From 5e577e2f2ee2a04acfb9608328f8e08107da1f61 Mon Sep 17 00:00:00 2001 From: the-good-boy Date: Thu, 17 Mar 2022 00:48:13 +0530 Subject: [PATCH 1/4] [BB-432]:Dont change shape of name-section --- .../name-section/name-section.js | 135 ++++++++++-------- 1 file changed, 78 insertions(+), 57 deletions(-) diff --git a/src/client/entity-editor/name-section/name-section.js b/src/client/entity-editor/name-section/name-section.js index 7c870944cd..3c798a1709 100644 --- a/src/client/entity-editor/name-section/name-section.js +++ b/src/client/entity-editor/name-section/name-section.js @@ -16,7 +16,7 @@ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. */ -import {Alert, Col, ListGroup, Row} from 'react-bootstrap'; +import {Alert, Button, Col, Container, ListGroup, Row} from 'react-bootstrap'; import { checkIfNameExists, debouncedUpdateDisambiguationField, @@ -79,6 +79,10 @@ class NameSection extends React.Component { this.updateNameFieldInputRef = this.updateNameFieldInputRef.bind(this); this.handleNameChange = this.handleNameChange.bind(this); this.searchForMatchindEditionGroups = this.searchForMatchindEditionGroups.bind(this); + this.state = { + open: false, + showButton: false + }; } /* @@ -103,6 +107,10 @@ class NameSection extends React.Component { this.searchForMatchindEditionGroups(nameValue); } + handleToggleCollapse = () => { + this.setState(prevState => ({open: !prevState.open})); + }; + handleNameChange(event) { this.props.onNameChange(event.target.value); this.props.onNameChangeCheckIfExists(event.target.value); @@ -149,12 +157,24 @@ class NameSection extends React.Component { const warnIfExists = !_.isEmpty(exactMatches); + if (!this.state.showButton && searchResults && searchResults.length > 5) { + this.setState({showButton: true}); + } + + if (this.state.showButton && searchResults && searchResults.length <= 5) { + this.setState({showButton: false}); + } + + if (this.state.showButton && searchResults === null) { + this.setState({showButton: false}); + } + return ( -
+

{`What is the ${_.startCase(entityType)} called?`}

- + - - - {isRequiredDisambiguationEmpty( - warnIfExists, - disambiguationDefaultValue - ) ? - - We found the following  - {_.startCase(entityType)}{exactMatches.length > 1 ? 's' : ''} with - exactly the same name or alias: -
Click on a name to open it (Ctrl/Cmd + click to open in a new tab) - - {exactMatches.map((match) => - ( - - {match.defaultAlias.name} {getEntityDisambiguation(match)} - - ))} - - If you are sure your entry is different, please fill the - disambiguation field below to help us differentiate between them. - : null - } - - - { - !warnIfExists && - !_.isEmpty(searchResults) && - - - If the {_.startCase(entityType)} you want to add appears in the results - below, click on it to inspect it before adding a possible duplicate.
- Ctrl/Cmd + click to open in a new tab - - - - } - - - - - - - - - - + + +
+ {isRequiredDisambiguationEmpty( + warnIfExists, + disambiguationDefaultValue + ) ? + + We found the following  + {_.startCase(entityType)}{exactMatches.length > 1 ? 's' : ''} with + exactly the same name or alias: +
Click on a name to open it (Ctrl/Cmd + click to open in a new tab) + + {exactMatches.map((match) => + ( + + {match.defaultAlias.name} {getEntityDisambiguation(match)} + + ))} + + If you are sure your entry is different, please fill the + disambiguation field below to help us differentiate between them. + : null + } + + + { + !warnIfExists && + !_.isEmpty(searchResults) && + + + If the {_.startCase(entityType)} you want to add appears in the results + below, click on it to inspect it before adding a possible duplicate.
+ Ctrl/Cmd + click to open in a new tab + + + + } + {this.state.showButton && + + + + + } + + -
+ ); } } From 45bee27c2b0836ea275c3bbceb99cd2611881aaf Mon Sep 17 00:00:00 2001 From: the-good-boy Date: Thu, 17 Mar 2022 01:07:14 +0530 Subject: [PATCH 2/4] put margin-right on external div --- src/client/entity-editor/name-section/name-section.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/client/entity-editor/name-section/name-section.js b/src/client/entity-editor/name-section/name-section.js index 3c798a1709..3516305bb7 100644 --- a/src/client/entity-editor/name-section/name-section.js +++ b/src/client/entity-editor/name-section/name-section.js @@ -16,7 +16,7 @@ * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. */ -import {Alert, Button, Col, Container, ListGroup, Row} from 'react-bootstrap'; +import {Alert, Button, Col, ListGroup, Row} from 'react-bootstrap'; import { checkIfNameExists, debouncedUpdateDisambiguationField, @@ -171,7 +171,7 @@ class NameSection extends React.Component { return ( - +

{`What is the ${_.startCase(entityType)} called?`}

@@ -278,7 +278,7 @@ class NameSection extends React.Component { - +
); } } From 76be9ac8a418c24063eebcbe5c23b20079eb0740 Mon Sep 17 00:00:00 2001 From: the-good-boy Date: Thu, 24 Mar 2022 19:41:09 +0530 Subject: [PATCH 3/4] optional chaining and md --- src/client/entity-editor/name-section/name-section.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/client/entity-editor/name-section/name-section.js b/src/client/entity-editor/name-section/name-section.js index 3516305bb7..1e66a4e6e4 100644 --- a/src/client/entity-editor/name-section/name-section.js +++ b/src/client/entity-editor/name-section/name-section.js @@ -157,11 +157,11 @@ class NameSection extends React.Component { const warnIfExists = !_.isEmpty(exactMatches); - if (!this.state.showButton && searchResults && searchResults.length > 5) { + if (!this.state.showButton && searchResults?.length > 5) { this.setState({showButton: true}); } - if (this.state.showButton && searchResults && searchResults.length <= 5) { + if (this.state.showButton && searchResults?.length <= 5) { this.setState({showButton: false}); } @@ -171,10 +171,10 @@ class NameSection extends React.Component { return ( -
+

{`What is the ${_.startCase(entityType)} called?`}

- + - +
{isRequiredDisambiguationEmpty( From 56d4848278d16f3ac02c3359ed3360f5ff7551f8 Mon Sep 17 00:00:00 2001 From: Monkey Do Date: Wed, 31 Aug 2022 18:34:04 +0200 Subject: [PATCH 4/4] feat(duplicates): Scrollable duplicate results Instead of a "show more" button and a very long list of results, let's make the list of search results scrollable, showing up to 5 results at a time --- .../name-section/name-section.js | 79 ++++++------------- src/client/stylesheets/style.scss | 22 +++++- 2 files changed, 43 insertions(+), 58 deletions(-) diff --git a/src/client/entity-editor/name-section/name-section.js b/src/client/entity-editor/name-section/name-section.js index e045dae81a..701e9c056f 100644 --- a/src/client/entity-editor/name-section/name-section.js +++ b/src/client/entity-editor/name-section/name-section.js @@ -83,10 +83,6 @@ class NameSection extends React.Component { this.updateNameFieldInputRef = this.updateNameFieldInputRef.bind(this); this.handleNameChange = this.handleNameChange.bind(this); this.searchForMatchindEditionGroups = this.searchForMatchindEditionGroups.bind(this); - this.state = { - open: false, - showButton: false - }; } /* @@ -111,10 +107,6 @@ class NameSection extends React.Component { this.searchForMatchindEditionGroups(nameValue); } - handleToggleCollapse = () => { - this.setState(prevState => ({open: !prevState.open})); - }; - handleNameChange(event) { this.props.onNameChange(event.target.value); this.props.onNameChangeCheckIfExists(event.target.value); @@ -162,18 +154,6 @@ class NameSection extends React.Component { const warnIfExists = !_.isEmpty(exactMatches); - if (!this.state.showButton && searchResults?.length > 5) { - this.setState({showButton: true}); - } - - if (this.state.showButton && searchResults?.length <= 5) { - this.setState({showButton: false}); - } - - if (this.state.showButton && searchResults === null) { - this.setState({showButton: false}); - } - const languageOption = languageOptionsForDisplay.filter((el) => el.value === languageValue); return (
@@ -204,10 +184,6 @@ class NameSection extends React.Component { storedNameValue={nameValue} onChange={onSortNameChange} /> - - - - - - -
- {isRequiredDisambiguationEmpty( - warnIfExists, - disambiguationDefaultValue - ) ? + + {isRequiredDisambiguationEmpty( + warnIfExists, + disambiguationDefaultValue + ) ? +
- We found the following  + We found the following  {_.startCase(entityType)}{exactMatches.length > 1 ? 's' : ''} with - exactly the same name or alias: + exactly the same name or alias:
Click on a name to open it (Ctrl/Cmd + click to open in a new tab) {exactMatches.map((match) => @@ -258,33 +233,23 @@ class NameSection extends React.Component { ))} - If you are sure your entry is different, please fill the - disambiguation field below to help us differentiate between them. - : null - } - - - { - !warnIfExists && + If you are sure your entry is different, please fill the + disambiguation field below to help us differentiate between them. + +
: null + } + { + !warnIfExists && !_.isEmpty(searchResults) && - - +
If the {_.startCase(entityType)} you want to add appears in the results below, click on it to inspect it before adding a possible duplicate.
- Ctrl/Cmd + click to open in a new tab - - - - } - {this.state.showButton && - - - - - } - + Ctrl/Cmd + click to open in a new tab +
+ +
+
+ }
diff --git a/src/client/stylesheets/style.scss b/src/client/stylesheets/style.scss index 0e0e8b1015..8a0b061f86 100644 --- a/src/client/stylesheets/style.scss +++ b/src/client/stylesheets/style.scss @@ -296,7 +296,7 @@ a.contact-text:visited { border: 1px solid hsl(0, 0%, 70%) !important; box-shadow: none !important; &:hover{ - border: 1px solid hsl(0, 0%, 70%) !important; + border: 1px solid hsl(0, 0%, 70%) !important; } } @@ -726,4 +726,24 @@ ul { } .series-editor-select { margin-top: 1.7em; +} + +.duplicate-result-scroll-window{ + max-height: 17em; + overflow-y: scroll; + &:after { + display: block; + position: absolute; + bottom: 0; + width: 100%; + content: " "; + height: 20px; + background: -moz-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%); + background: -webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,0)),color-stop(100%,#fff)); + background: -webkit-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%); + background: -o-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%); + background: -ms-linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%); + background: linear-gradient(top,rgba(255,255,255,0) 0,#fff 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0); + } } \ No newline at end of file