diff --git a/src/actions/definitionActions.js b/src/actions/definitionActions.js index acf44464e..7f3752ed5 100644 --- a/src/actions/definitionActions.js +++ b/src/actions/definitionActions.js @@ -56,7 +56,7 @@ export function checkForMissingDefinition(token, isFirstAttempt = false) { ).filter(x => x) const missingDefinitions = map( workspaceComponents, - item => !get(item, 'described.tools') && EntitySpec.fromObject(item).toPath() + item => !get(item, 'described.tools') && EntitySpec.fromObject(item.coordinates).toPath() ).filter(x => x) if (missingDefinitions.length > 0) { if (isFirstAttempt) diff --git a/src/components/ComponentList.js b/src/components/ComponentList.js index cb981d540..de9219dfa 100644 --- a/src/components/ComponentList.js +++ b/src/components/ComponentList.js @@ -145,8 +145,9 @@ class ComponentList extends React.Component { render() { const { loadMoreRows, noRowsRenderer, list, listLength } = this.props const { sortOrder, contentSeq } = this.state + const showFilterBar = false return ( -
+

Component

diff --git a/src/components/DefinitionEntry.js b/src/components/DefinitionEntry.js index bc24e603a..c4bd4646e 100644 --- a/src/components/DefinitionEntry.js +++ b/src/components/DefinitionEntry.js @@ -3,7 +3,7 @@ import React from 'react' import PropTypes from 'prop-types' -import { TwoLineEntry, QuickEditModel, SourcePicker, FileCountRenderer } from './' +import { TwoLineEntry, QuickEditModel, FileCountRenderer } from './' import { Checkbox, OverlayTrigger, Tooltip, Popover } from 'react-bootstrap' import { Tag } from 'antd' import { get, isEqual, union } from 'lodash' @@ -34,7 +34,7 @@ class DefinitionEntry extends React.Component { } } static propTypes = { - onChange: PropTypes.func, + onChange: PropTypes.func.isRequired, onCurate: PropTypes.func, onInspect: PropTypes.func, activeFacets: PropTypes.array, @@ -60,7 +60,7 @@ class DefinitionEntry extends React.Component { const newChanges = { ...component.changes } if (isChanged && proposedValue !== null) newChanges[field] = proposedValue else delete newChanges[field] - onChange && onChange(component, newChanges, field) + onChange(component, newChanges, field) } } @@ -90,10 +90,10 @@ class DefinitionEntry extends React.Component { ) : null - const releasedDate = definition?.described?.releaseDate ? ( - {definition.described.releaseDate} - ) : ( - -- -- -- + const releasedDate = ( + + {this.renderFieldWithToolTipIfDifferent('described.releaseDate', a => a || '-- -- --')} + ) const curationTag = isCurationPending ? ( @@ -125,7 +125,7 @@ class DefinitionEntry extends React.Component { renderWithToolTipIfDifferent(field, content, placement = 'right', transform = x => x) { const toolTip = ( - Original: {transform(get(this.props.otherDefinition, field))} + Original: {transform(this.getOriginalValue(field))} ) return this.ifDifferent( @@ -137,14 +137,19 @@ class DefinitionEntry extends React.Component { ) } + renderFieldWithToolTipIfDifferent(field, transform = a => a) { + const displayValue = transform(this.getValue(field)) + return this.renderWithToolTipIfDifferent( + field, + {displayValue}, + undefined, + transform + ) + } + renderMessage(definition) { const licenseExpression = definition ? this.getValue('licensed.declared') : null - return licenseExpression - ? this.renderWithToolTipIfDifferent( - 'licensed.declared', - {licenseExpression} - ) - : null + return licenseExpression ? this.renderFieldWithToolTipIfDifferent('licensed.declared') : null } getPercentage(count, total) { @@ -190,6 +195,23 @@ class DefinitionEntry extends React.Component { this.setState({ modelOpen: !this.state.modelOpen }) } + handleSaveEdit = updates => { + const { onChange, definition, component } = this.props + + const newChanges = Object.entries(updates).reduce((changes, [key, value]) => { + let field + if (key === 'declared') field = 'licensed.declared' + if (key === 'sourceComponent') field = 'described.sourceLocation' + if (key === 'release') field = 'described.releaseDate' + return field ? Contribution.applyChanges(definition, changes, field, value) : changes + }, {}) + + if (Object.keys(newChanges).length !== 0) { + const combinedChanges = { ...component.changes, ...newChanges } + onChange(component, combinedChanges) + } + } + renderPanel(rawDefinition) { if (!rawDefinition) return ( @@ -201,13 +223,12 @@ class DefinitionEntry extends React.Component { // TODO: find a way of calling this method less frequently. It's relatively expensive. const definition = this.foldFacets(rawDefinition, this.props.activeFacets) const { licensed } = definition - const { readOnly, onRevert } = this.props return (
{this.renderLabel('Declared')}:
-

{this.getValue('licensed.declared')}

+ {this.renderFieldWithToolTipIfDifferent('licensed.declared')} {/* {this.renderWithToolTipIfDifferent( 'licensed.declared', {this.renderLabel('Source')}:
-

{Contribution.printCoordinates(this.getValue('described.sourceLocation'))}

+ {this.renderFieldWithToolTipIfDifferent('described.sourceLocation', a => Contribution.printCoordinates(a))} {/* {this.renderWithToolTipIfDifferent( 'described.sourceLocation', {this.renderLabel('Release')}:
-

{Contribution.printDate(this.getValue('described.releaseDate'))}

+ {this.renderFieldWithToolTipIfDifferent( + 'described.releaseDate', + a => Contribution.printDate(a) || '-- -- --' + )} {/* {this.renderWithToolTipIfDifferent( 'described.releaseDate', true} - placeholder={'Source location'} - revertable - onRevert={() => onRevert('described.sourceLocation')} + onSave={this.handleSaveEdit} /> - + {toggleCollapseExpandAll && ( + + )} diff --git a/src/components/Navigation/Pages/PageBrowse/PageBrowse.js b/src/components/Navigation/Pages/PageBrowse/PageBrowse.js index 1ebb79d24..12aace61d 100644 --- a/src/components/Navigation/Pages/PageBrowse/PageBrowse.js +++ b/src/components/Navigation/Pages/PageBrowse/PageBrowse.js @@ -10,7 +10,7 @@ import difference from 'lodash/difference' import classNames from 'classnames' import { ROUTE_ROOT } from '../../../../utils/routingConstants' import { getCurationsAction } from '../../../../actions/curationActions' -import { uiBrowseUpdateList, uiNavigation, uiBrowseGet } from '../../../../actions/ui' +import { uiBrowseUpdateFilterList, uiBrowseUpdateList, uiNavigation, uiBrowseGet } from '../../../../actions/ui' import SystemManagedList from '../../../SystemManagedList' import Section from '../../../Section' import ComponentList from '../../../ComponentList' @@ -34,7 +34,8 @@ class PageBrowse extends SystemManagedList { this.state = { activeSort: 'releaseDate-desc', searchFocused: false, - selectedProvider: providers[0] + selectedProvider: providers[0], + searchTerm: '' } this.onFilter = this.onFilter.bind(this) this.onSort = this.onSort.bind(this) @@ -63,13 +64,19 @@ class PageBrowse extends SystemManagedList { } onBrowse = value => { - this.setState({ activeName: value }, () => this.updateData()) + this.setState({ activeName: value, searchTerm: '' }, () => this.updateData()) } onFocusChange = value => { this.setState({ searchFocused: value }) } + onSearch = value => { + this.setState({ searchTerm: value }) + const valueToSearch = this.state.selectedProvider.value + '/' + value + this.props.dispatch(uiBrowseUpdateFilterList(this.props.token, valueToSearch)) + } + tableTitle() { return 'Browse' } @@ -156,7 +163,6 @@ class PageBrowse extends SystemManagedList { this.revertAll('browse')} - toggleCollapseExpandAll={this.toggleCollapseExpandAll} doPromptContribute={this.doPromptContribute} /> ) @@ -164,6 +170,10 @@ class PageBrowse extends SystemManagedList { onProviderChange(item) { this.setState({ selectedProvider: item }) + if (this.state.searchTerm) { + const valueToSearch = item.value + '/' + this.state.searchTerm + this.props.dispatch(uiBrowseUpdateFilterList(this.props.token, valueToSearch)) + } } // Overrides the default onFilter method @@ -332,10 +342,8 @@ class PageBrowse extends SystemManagedList { />
-
-
+
+
this.revertDefinition(definition, value, 'browse')} onChange={this.onChangeComponent} - onInspect={this.onInspect} renderFilterBar={this.renderFilterBar} curations={curations} definitions={definitions} diff --git a/src/components/Navigation/Pages/PageBrowse/__tests__/ButtonsBar.test.js b/src/components/Navigation/Pages/PageBrowse/__tests__/ButtonsBar.test.js index b4182be04..cdc164b39 100644 --- a/src/components/Navigation/Pages/PageBrowse/__tests__/ButtonsBar.test.js +++ b/src/components/Navigation/Pages/PageBrowse/__tests__/ButtonsBar.test.js @@ -12,7 +12,7 @@ describe('ButtonsBar', () => { }) it("checks if buttons are enabled when there aren't changes", async () => { - const wrapper = await shallow() + const wrapper = await shallow() const toggleCollapseButton = wrapper.find({ children: 'Toggle Collapse' }) expect(toggleCollapseButton.exists()).toBeTruthy() const contributeButton = wrapper.find({ children: 'Contribute' }) @@ -21,7 +21,9 @@ describe('ButtonsBar', () => { }) it('checks if buttons are disabled when there are changes', async () => { - const wrapper = await shallow() + const wrapper = await shallow( + + ) const toggleCollapseButton = wrapper.find({ children: 'Toggle Collapse' }) expect(toggleCollapseButton.exists()).toBeTruthy() const contributeButton = wrapper.find({ children: 'Contribute' }) diff --git a/src/components/Navigation/Pages/PageDefinitions/ButtonsBar.js b/src/components/Navigation/Pages/PageDefinitions/ButtonsBar.js index cb8606963..f10fd0f27 100644 --- a/src/components/Navigation/Pages/PageDefinitions/ButtonsBar.js +++ b/src/components/Navigation/Pages/PageDefinitions/ButtonsBar.js @@ -5,6 +5,11 @@ import ButtonWithTooltip from '../../Ui/ButtonWithTooltip' import ShareButton from '../../Ui/ShareButton' export default class ButtonsBar extends Component { + constructor(props) { + super(props) + this.onSelect = this.onSelect.bind(this) + } + static propTypes = { components: PropTypes.object, hasChanges: PropTypes.bool, diff --git a/src/components/Navigation/Pages/PageDefinitions/PageDefinitions.js b/src/components/Navigation/Pages/PageDefinitions/PageDefinitions.js index e52852dc7..ef6e3d701 100644 --- a/src/components/Navigation/Pages/PageDefinitions/PageDefinitions.js +++ b/src/components/Navigation/Pages/PageDefinitions/PageDefinitions.js @@ -23,7 +23,6 @@ import UrlShare from '../../../../utils/urlShare' export class PageDefinitions extends UserManagedList { constructor(props) { super(props) - this.onAddComponent = this.onAddComponent.bind(this) this.doSave = this.doSave.bind(this) this.doSaveAsUrl = this.doSaveAsUrl.bind(this) this.revertAll = this.revertAll.bind(this) @@ -225,7 +224,7 @@ export class PageDefinitions extends UserManagedList { path={path} currentDefinition={currentDefinition} component={currentComponent} - readOnly={this.readOnly} + readOnly={true} /> )} {showSavePopup && ( diff --git a/src/components/Navigation/Ui/ComponentButtons.js b/src/components/Navigation/Ui/ComponentButtons.js index 9036dfc53..acf9a4797 100644 --- a/src/components/Navigation/Ui/ComponentButtons.js +++ b/src/components/Navigation/Ui/ComponentButtons.js @@ -1,12 +1,17 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { get } from 'lodash' -import { ButtonToolbar, Dropdown as BSDropdown } from 'react-bootstrap' +import { Button, ButtonGroup, ButtonToolbar, Dropdown as BSDropdown } from 'react-bootstrap' import EntitySpec from '../../../utils/entitySpec' import { ROUTE_DEFINITIONS } from '../../../utils/routingConstants' import { withResize } from '../../../utils/WindowProvider' +import Definition from '../../../utils/definition' +import { ORIGINS } from '../../../api/clearlyDefined' import MoreVertIcon from '@material-ui/icons/MoreVert' import { IconButton } from '@material-ui/core' +import ButtonWithTooltip from './ButtonWithTooltip' +import { Menu, Dropdown, Icon } from 'antd' + class ComponentButtons extends Component { constructor(props) { super(props) @@ -30,25 +35,33 @@ class ComponentButtons extends Component { return ['github', 'sourcearchive', 'debsrc'].includes(component.provider) } + _isProviderSupported(component) { + return !!get(ORIGINS, component.provider) + } + removeComponent(component, event) { event.stopPropagation() + this.handleMenu() const { onRemove } = this.props onRemove && onRemove(component) } revertComponent(component, param) { + this.handleMenu() const { onRevert } = this.props onRevert && onRevert(component, param) } inspectComponent(component, definition, event) { event.stopPropagation() + this.handleMenu() const action = this.props.onInspect action && action(component, definition) } addSourceForComponent(component, event) { event.stopPropagation() + this.handleMenu() const definition = this.props.getDefinition(component) const sourceLocation = get(definition, 'described.sourceLocation') const sourceEntity = sourceLocation && EntitySpec.fromObject(sourceLocation) @@ -58,6 +71,7 @@ class ComponentButtons extends Component { showVersionSelectorPopup(component, multiple, event) { event.domEvent.stopPropagation() + this.handleMenu() this.props.showVersionSelectorPopup(component, multiple) } @@ -77,111 +91,109 @@ class ComponentButtons extends Component { ) } + renderDropdown(currentComponent) { + return ( + + + Switch version + + + Add more versions + + + } + > + + + ) + } + renderButtonGroup() { - const { definition, currentComponent, hasChange } = this.props + const { + definition, + currentComponent, + hasChange, + readOnly, + onAddComponent, + onInspect, + onRemove, + hideVersionSelector + } = this.props const component = EntitySpec.fromObject(currentComponent) + + const isSourceComponent = this.isSourceComponent(component) + const isSourceEmpty = Definition.isSourceEmpty(definition) + const isDefinitionEmpty = Definition.isDefinitionEmpty(definition) + const isProviderSupported = this._isProviderSupported(component) return ( <>
- { - this.handleMenu() - }} - className="clearly-menu-btns" - > - View Components - - - -
- - {/* - - {!isSourceComponent && !readOnly && !isSourceEmpty && ( - - - - )} - {!isDefinitionEmpty && ( - + + {!isSourceComponent && !readOnly && !isSourceEmpty && onAddComponent && ( + + + + )} + {!isDefinitionEmpty && onInspect && ( + - - )} - event.stopPropagation()} - > - - - {!hideVersionSelector && ( - - <> - - - Switch version - - - Add more versions - - - } + + + + )} + { + this.handleMenu() + event.stopPropagation() + }} + > + + + {!hideVersionSelector && isProviderSupported && ( + + {this.renderDropdown(currentComponent)} + + )} + {!readOnly && onRemove && ( + + + + )} + {!readOnly && !isDefinitionEmpty && ( + + - - - - )} - {!readOnly && !isDefinitionEmpty && ( - - - - )} - */} + + + + )} + +
) } diff --git a/src/components/Navigation/Ui/ListDataRenderer.js b/src/components/Navigation/Ui/ListDataRenderer.js index 8498ef8bd..fa887d1ed 100644 --- a/src/components/Navigation/Ui/ListDataRenderer.js +++ b/src/components/Navigation/Ui/ListDataRenderer.js @@ -30,7 +30,7 @@ export default class ListDataRenderer extends Component { document.body.addEventListener('showTooltip', this.handleShowTooltip) } - componentWillMount() { + componentWillUnmount() { document.body.removeEventListener('showTooltip', this.handleShowTooltip) } diff --git a/src/components/Navigation/Ui/ShareButton.js b/src/components/Navigation/Ui/ShareButton.js index 4c570939c..f82c783f7 100644 --- a/src/components/Navigation/Ui/ShareButton.js +++ b/src/components/Navigation/Ui/ShareButton.js @@ -13,18 +13,18 @@ export default class ShareButton extends Component { const disabled = !components || components.list.length === 0 return ( - onSelect('url')}> + onSelect('url')}> URL - onSelect('file')}> + onSelect('file')}> Coordinate list (JSON) - onSelect('notice')}> + onSelect('notice')}> Notice file - + {/* Definitions (Not implemented) - SPDX (Not implemented) + SPDX (Not implemented) */} ) } diff --git a/src/components/Navigation/Ui/VersionSelector.js b/src/components/Navigation/Ui/VersionSelector.js index 783647fd6..1ae283f3d 100644 --- a/src/components/Navigation/Ui/VersionSelector.js +++ b/src/components/Navigation/Ui/VersionSelector.js @@ -29,7 +29,7 @@ class VersionSelector extends Component { const fullname = component.namespace ? `${component.namespace}/${component.name}` : component.name try { const label = multiple - ? `Pick one or move versions of ${fullname} to add to the definitions list` + ? `Add one or more versions of ${fullname}` : `Pick a different version of ${fullname}` const options = await getRevisions(token, fullname, component.type, component.provider) this.setState({ options, label }) @@ -58,7 +58,7 @@ class VersionSelector extends Component { const { options, label, selected } = this.state return ( - 0 ? 'static' : true}> + 0 ? 'static' : true} dialogClassName='version-selector'> {label} @@ -67,8 +67,10 @@ class VersionSelector extends Component { +
+
+ +
+
+ + +
+ +
+ ) +} + +QuickEditModel.propsType = { + open: PropTypes.bool, + closeModel: PropTypes.func.isRequired, + initialValues: PropTypes.object.isRequired, + onSave: PropTypes.object.isRequired +} + +export default QuickEditModel diff --git a/src/components/QuickEditModel.jsx b/src/components/QuickEditModel.jsx deleted file mode 100644 index c704e11b3..000000000 --- a/src/components/QuickEditModel.jsx +++ /dev/null @@ -1,86 +0,0 @@ -import React from 'react' -import { Modal, Button } from 'react-bootstrap' -import closeSvg from '../images/icons/closeSvg.svg' - -const QuickEditModel = props => { - const { open, closeModel, values, onChange } = props - return ( -
- -
-

Quick Edit Component

- closeModel()}> - - -
-
-
-
- -
- (typeof onChange.declared === 'function' ? onChange.declared() : null)} - value={values.declared || ''} - type="text" - className="form-control model-input" - id="declared" - placeholder="MIT" - /> -
-
-
- -
- (typeof onChange.source === 'function' ? onChange.source() : null)} - value={values.source || ''} - type="text" - className="form-control mr-4 model-input" - id="source" - placeholder="User / Organization" - /> -     - (typeof onChange.repo === 'function' ? onChange.repo() : null)} - value={values.repo || ''} - type="text" - className="form-control model-input" - id="repo" - placeholder="Repo" - /> -
-
-
- -
- (typeof onChange.release === 'function' ? onChange.release() : null)} - value={values.release || ''} - className="form-control model-input" - id="release" - /> -
-
-
-
-
- - -
- -
- ) -} - -export default QuickEditModel diff --git a/src/components/SourceLocationPicker.js b/src/components/SourceLocationPicker.js new file mode 100644 index 000000000..58fe37047 --- /dev/null +++ b/src/components/SourceLocationPicker.js @@ -0,0 +1,96 @@ +// (c) Copyright 2022, SAP SE and ClearlyDefined contributors. Licensed under the MIT license. +// SPDX-License-Identifier: MIT + +import React, { Component } from 'react' +import { Button, ButtonGroup } from 'react-bootstrap' +import { GitHubSelector, GitHubCommitPicker } from './' +import { getGitHubRevisions } from '../api/clearlyDefined' +import EntitySpec from '../utils/entitySpec' +import { clone } from 'lodash' +import { PropTypes } from 'prop-types' + +class SourceLocationPicker extends Component { + constructor(props) { + super(props) + this.state = { activeProvider: this.props.activeProvider } + this.onSelectComponent = this.onSelectComponent.bind(this) + this.onChangeComponent = this.onChangeComponent.bind(this) + this.onProviderClick = this.onProviderClick.bind(this) + } + + static propTypes = { + token: PropTypes.string, + value: PropTypes.string, + activeProvider: PropTypes.string, + onChangeComponent: PropTypes.func.isRequired + } + + static defaultProps = { + value: '', + activeProvider: 'github' + } + + onSelectComponent(value, tool) { + const [namespace, name] = value.name.split('/') + const component = new EntitySpec(value.type, value.provider, namespace, name) + component.tool = tool + this.onChangeComponent(component) + } + + onChangeComponent(component) { + const { onChangeComponent } = this.props + this.setState({ ...this.state, selectedComponent: component }) + onChangeComponent(component) + } + + onProviderClick(event) { + const activeProvider = event.target.name + this.setState({ activeProvider }) + } + + renderProviderButtons() { + const { activeProvider } = this.state + return ( + + + + ) + } + + commitChanged(component, value) { + const newComponent = clone(component) + newComponent.revision = value ? value.sha : null + this.onChangeComponent(newComponent) + } + + render() { + const { activeProvider, selectedComponent } = this.state + const { token, value } = this.props + + return ( +
+
{this.renderProviderButtons()}
+
{activeProvider === 'github' && }
+
+ {selectedComponent && activeProvider === 'github' && ( + getGitHubRevisions(token, path)} + onChange={this.commitChanged.bind(this, selectedComponent)} + /> + )} +
+ +
+ ) + } +} + +export default SourceLocationPicker diff --git a/src/components/SourcePicker.js b/src/components/SourcePicker.js index 5111a45ea..a2a8b5627 100644 --- a/src/components/SourcePicker.js +++ b/src/components/SourcePicker.js @@ -3,48 +3,28 @@ import React, { Component } from 'react' import { connect } from 'react-redux' -import { Grid, Button, ButtonGroup, FormGroup } from 'react-bootstrap' -import { GitHubSelector, GitHubCommitPicker } from './' -import { getGitHubRevisions } from '../api/clearlyDefined' -import EntitySpec from '../utils/entitySpec' -import { clone } from 'lodash' +import { Grid, Button, FormGroup } from 'react-bootstrap' +import SourceLocationPicker from './SourceLocationPicker' +import { PropTypes } from 'prop-types' class SourcePicker extends Component { constructor(props) { super(props) - this.state = { activeProvider: 'github' } - this.onSelectComponent = this.onSelectComponent.bind(this) + this.state = {} this.onChangeComponent = this.onChangeComponent.bind(this) - this.onClick = this.onClick.bind(this) } - onSelectComponent(value, tool) { - const [namespace, name] = value.name.split('/') - const component = new EntitySpec(value.type, value.provider, namespace, name) - component.tool = tool - this.setState({ selectedComponent: component }) + static propTypes = { + token: PropTypes.string, + value: PropTypes.string, + onChange: PropTypes.func.isRequired, + onClose: PropTypes.func.isRequired } - onChangeComponent(component, newComponent) { + onChangeComponent(newComponent) { this.setState({ selectedComponent: newComponent }) } - onClick(event) { - const activeProvider = event.target.name - this.setState({ activeProvider }) - } - - renderProviderButtons() { - const { activeProvider } = this.state - return ( - - - - ) - } - renderActionButton() { const { onChange, onClose } = this.props return ( @@ -60,35 +40,12 @@ class SourcePicker extends Component { ) } - commitChanged(component, value) { - const newComponent = clone(component) - newComponent.revision = value ? value.sha : null - this.onChangeComponent(component, newComponent) - } - render() { - const { activeProvider, selectedComponent } = this.state - const { value } = this.props + const { value, token } = this.props return ( - -
{this.renderProviderButtons()}
-
{activeProvider === 'github' && }
-
- {selectedComponent && activeProvider === 'github' && ( - getGitHubRevisions(this.props.token, path)} - onChange={this.commitChanged.bind(this, selectedComponent)} - /> - )} -
- + + + {this.renderActionButton()} ) } diff --git a/src/components/SystemManagedList.js b/src/components/SystemManagedList.js index 62be06a77..d234cc4b4 100644 --- a/src/components/SystemManagedList.js +++ b/src/components/SystemManagedList.js @@ -51,6 +51,7 @@ export default class SystemManagedList extends Component { this.updateList = this.updateList.bind(this) this.onSearch = this.onSearch.bind(this) this.onInspect = this.onInspect.bind(this) + this.onInspectClose = this.onInspectClose.bind(this) this.onSort = this.onSort.bind(this) this.onFilter = this.onFilter.bind(this) this.onChangeComponent = this.onChangeComponent.bind(this) diff --git a/src/components/index.js b/src/components/index.js index 7f192105c..d4bd01362 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -12,17 +12,17 @@ from './ContributePrompt' export { default as CopyUrlButton } from './CopyUrlButton' export { default as CrateSelector } -from './CrateSelector' +from './Providers/Selectors/CrateSelector' export { default as CrateVersionPicker } -from './CrateVersionPicker' +from './Providers/VersionPickers/CrateVersionPicker' export { default as DebianSelector } from './Providers/Selectors/DebianSelector' export { default as DebianVersionPicker } from './Providers/VersionPickers/DebianVersionPicker' export { default as ComposerSelector } -from './ComposerSelector' +from './Providers/Selectors/ComposerSelector' export { default as ComposerVersionPicker } -from './ComposerVersionPicker' +from './Providers/VersionPickers/ComposerVersionPicker' export { default as DefinitionEntry } from './DefinitionEntry' export { default as FieldGroup } @@ -34,9 +34,9 @@ from './FilterBar' export { default as Footer } from './Footer' export { default as GitHubCommitPicker } -from './GitHubCommitPicker' +from './Providers/VersionPickers/GitHubCommitPicker' export { default as GitHubSelector } -from './GitHubSelector' +from './Providers/Selectors/GitHubSelector' export { default as HarvestQueueList } from './HarvestQueueList' export { default as Header } @@ -50,31 +50,31 @@ from './ModalEditor' export { default as SourcePicker } from './SourcePicker' export { default as MavenSelector } -from './MavenSelector' +from './Providers/Selectors/MavenSelector' export { default as MavenVersionPicker } -from './MavenVersionPicker' +from './Providers/VersionPickers/MavenVersionPicker' export { default as NotificationList } from './NotificationList' export { default as NpmSelector } -from './NpmSelector' +from './Providers/Selectors/NpmSelector' export { default as NpmVersionPicker } -from './NpmVersionPicker' +from './Providers/VersionPickers/NpmVersionPicker' export { default as NuGetSelector } -from './NuGetSelector' +from './Providers/Selectors/NuGetSelector' export { default as NuGetVersionPicker } -from './NuGetVersionPicker' +from './Providers/VersionPickers/NuGetVersionPicker' export { default as PyPiSelector } -from './PyPiSelector' +from './Providers/Selectors/PyPiSelector' export { default as PyPiVersionPicker } -from './PyPiVersionPicker' +from './Providers/VersionPickers/PyPiVersionPicker' export { default as RubyGemsSelector } -from './RubyGemsSelector' +from './Providers/Selectors/RubyGemsSelector' export { default as RubyGemsVersionPicker } -from './RubyGemsVersionPicker' +from './Providers/VersionPickers/RubyGemsVersionPicker' export { default as CocoaPodsSelector } -from './CocoaPodsSelector' +from './Providers/Selectors/CocoaPodsSelector' export { default as CocoaPodsVersionPicker } -from './CocoaPodsVersionPicker' +from './Providers/VersionPickers/CocoaPodsVersionPicker' export { default as PageAbout } from './PageAbout' export { default as RehydrationProvider } diff --git a/src/styles/_App.scss b/src/styles/_App.scss index 617637f06..4208e5a8b 100644 --- a/src/styles/_App.scss +++ b/src/styles/_App.scss @@ -240,7 +240,6 @@ main { box-shadow: 5px 5px 20px -10px lightgrey; display: flex; min-height: 200px; - padding-bottom: $height-filters-section; .fa-spinner { display: none; diff --git a/src/styles/_FullDetailComponent.scss b/src/styles/_FullDetailComponent.scss index 587d7b8bc..5f278a3bb 100644 --- a/src/styles/_FullDetailComponent.scss +++ b/src/styles/_FullDetailComponent.scss @@ -317,14 +317,16 @@ } } -#source-picker { +.source-picker.main-container { padding: 24px; border-radius: 8px; @include start-at($medium) { padding: 36px; } +} +#source-picker { button[name='github'] { @include no-btn; font-weight: 600 !important; @@ -340,12 +342,19 @@ border-radius: 4px; padding: 0 14px; } +} - .form-group { - display: flex; - align-items: center; - justify-content: space-between; - } +.source-picker .form-group { + display: flex; + align-items: center; + justify-content: space-between; +} + +.edit #source-picker { + padding-top: 5px; + padding-left: 0px; + padding-right: 0px; + padding-bottom: 0px; } .source-picker__current-source { diff --git a/src/styles/_List.scss b/src/styles/_List.scss index 4ad413707..b65828e6c 100644 --- a/src/styles/_List.scss +++ b/src/styles/_List.scss @@ -373,6 +373,10 @@ height: $height-filters-list; } +.show-filter.clearly-table-body { + margin-bottom: $height-filters-section; +} + .filter-list, .list-filter, .section--filter-bar { diff --git a/src/styles/_Popover.scss b/src/styles/_Popover.scss index c10df30b2..295fc077f 100644 --- a/src/styles/_Popover.scss +++ b/src/styles/_Popover.scss @@ -219,7 +219,7 @@ button.modal__btn--secondary, } } - +.fade.in.tooltip, .fade.in.modal { opacity: 1 !important; } \ No newline at end of file diff --git a/src/styles/_ShareButton.scss b/src/styles/_ShareButton.scss new file mode 100644 index 000000000..14d6b9c52 --- /dev/null +++ b/src/styles/_ShareButton.scss @@ -0,0 +1,11 @@ +.open > .dropdown-menu { + display: block; +} + +.dropdown.btn-group { + display: inline-block; +} + +.dropdown-item > a { + display: block; +} \ No newline at end of file diff --git a/src/styles/_VersionSelector.scss b/src/styles/_VersionSelector.scss new file mode 100644 index 000000000..34d67e663 --- /dev/null +++ b/src/styles/_VersionSelector.scss @@ -0,0 +1,22 @@ +.version-selector { + .modal-header { + padding: 15px; + display: block; + } + button.close { + border: 0; + } + .close { + color: #000; + filter: alpha(opacity=20); + float: right; + font-size: 21px; + font-weight: 700; + line-height: 1; + opacity: .2; + text-shadow: 0 1px 0 #fff; + } +} +.select-in-modal.ant-select-dropdown { + z-index: 1100; +} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index fb4e895c9..80c066112 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -75,5 +75,7 @@ main { @import './GetInvolved.scss'; @import './PageAbout.scss'; @import './charter.scss'; +@import './ShareButton.scss'; +@import './VersionSelector.scss'; @import './utils.scss'; diff --git a/src/styles/style.css b/src/styles/style.css index 6a151e402..230debb70 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -433,13 +433,12 @@ a:hover { /* min-height: 550px; */ /* max-height: 700px; */ overflow: hidden; - height: 60vh; position: relative; width: 100%; will-change: transform; } .clearly-table-body .form-group.flex-grow-column { - height: 100%; + height: 60vh; width: 100%; } .clearly-table .form-group.flex-grow-column .checkbox {