diff --git a/package.json b/package.json index 85c4d9f18f..95d7f14f63 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "eslint-plugin-jest-dom": "^5.0.0", "eslint-plugin-react": "^7.23.2", "eslint-plugin-react-hooks": "^5.0.0", - "eslint-plugin-testing-library": "^6.0.0", + "eslint-plugin-testing-library": "^7.0.0", "fs-extra": "^11.1.1", "glob": "^11.0.0", "html-webpack-plugin": "5.6.3", @@ -83,7 +83,7 @@ "sass-loader": "16.0.3", "style-loader": "4.0.0", "undici": "^5.28.2", - "webpack": "5.95.0", + "webpack": "5.96.1", "webpack-cli": "5.1.4", "webpack-concat-files-plugin": "^0.5.2", "whatwg-fetch": "^3.6.20" diff --git a/public/css/sass/style.scss b/public/css/sass/style.scss index 734181fda9..a35cc21c9f 100644 --- a/public/css/sass/style.scss +++ b/public/css/sass/style.scss @@ -1326,6 +1326,33 @@ ul.suggestion-item.graysmall:last-child { overflow: auto; } +.tab { + .segment-footer-tab-more-button { + margin-left: auto; + margin-right: auto; + background-color: $grey4 !important; + color: $grey6 !important; + gap: 0; + padding-right: 16px !important; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + + &:hover { + background-color: $grey9 !important; + } + + &.segment-footer-tab-more-button-extended-mode { + svg { + transform: rotate(180deg); + } + } + } + + .segment-footer-tab-concordance-results { + overflow: hidden; + } +} + .graygreen { color: #fff !important; border-top: 1px solid #ccc; @@ -1472,6 +1499,8 @@ body .footer.showMatches .sub-editor.open { .sub-editor.matches .overflow { min-height: 50px; + max-height: 424px; + overflow-y: auto; } .sub-editor.matches .overflow span.loader { bottom: 20px; diff --git a/public/js/cat_source/es6/api/getContributions/getContributions.js b/public/js/cat_source/es6/api/getContributions/getContributions.js index 5886f30209..bf00c516fa 100644 --- a/public/js/cat_source/es6/api/getContributions/getContributions.js +++ b/public/js/cat_source/es6/api/getContributions/getContributions.js @@ -36,7 +36,6 @@ export const getContributions = async ({ id_segment: idSegment, text: txt, id_job: idJob, - num_results: NUM_CONTRIBUTION_RESULTS, context_before: contextBefore ? contextBefore : '', id_before: idBefore ? idBefore : '', context_after: contextAfter, diff --git a/public/js/cat_source/es6/components/segments/SegmentFooterTabMatches.js b/public/js/cat_source/es6/components/segments/SegmentFooterTabMatches.js index 3b3c7af2e6..5e99cefeb6 100644 --- a/public/js/cat_source/es6/components/segments/SegmentFooterTabMatches.js +++ b/public/js/cat_source/es6/components/segments/SegmentFooterTabMatches.js @@ -13,6 +13,11 @@ import {SegmentContext} from './SegmentContext' import {SegmentFooterTabError} from './SegmentFooterTabError' import ApplicationStore from '../../stores/ApplicationStore' import DraftMatecatUtils from './utils/DraftMatecatUtils' +import {Button, BUTTON_SIZE, BUTTON_TYPE} from '../common/Button/Button' +import {NUM_CONTRIBUTION_RESULTS} from '../../constants/Constants' +import ArrowDown from '../../../../../img/icons/ArrowDown' + +const MAX_ITEMS_TO_DISPLAY_NOT_EXTENDED = 3 class SegmentFooterTabMatches extends React.Component { static contextType = SegmentContext @@ -26,6 +31,7 @@ class SegmentFooterTabMatches extends React.Component { this.state = { tmKeys: CatToolStore.getJobTmKeys(), + numContributionsToShow: MAX_ITEMS_TO_DISPLAY_NOT_EXTENDED, } } @@ -235,7 +241,8 @@ class SegmentFooterTabMatches extends React.Component { this.props.active_class !== nextProps.active_class || this.props.tab_class !== nextProps.tab_class || this.props.segment.unlocked !== nextProps.segment.unlocked || - this.state.tmKeys !== nextState.tmKeys + this.state.tmKeys !== nextState.tmKeys || + this.state.numContributionsToShow !== nextState.numContributionsToShow ) } @@ -243,6 +250,15 @@ class SegmentFooterTabMatches extends React.Component { return {__html: string} } + toggleExtendend = () => { + this.setState({ + numContributionsToShow: + this.state.numContributionsToShow < NUM_CONTRIBUTION_RESULTS + ? NUM_CONTRIBUTION_RESULTS + : MAX_ITEMS_TO_DISPLAY_NOT_EXTENDED, + }) + } + render() { const {clientConnected} = this.context @@ -254,8 +270,11 @@ class SegmentFooterTabMatches extends React.Component { this.props.segment.contributions.matches.length > 0 ) { let tpmMatches = this.processContributions( - this.props.segment.contributions.matches, + this.props.segment.contributions.matches.filter( + (contribution, index) => index < this.state.numContributionsToShow, + ), ) + tpmMatches.forEach((match, index) => { const {memoryKey} = match const isOwnedKey = memoryKey ? this.isOwnerKey(memoryKey) : false @@ -373,6 +392,21 @@ class SegmentFooterTabMatches extends React.Component { }) } + const isExtended = + this.state.numContributionsToShow === NUM_CONTRIBUTION_RESULTS + + const moreButton = ( + + ) + return (
)} + {this.props.segment.contributions?.matches.length > + MAX_ITEMS_TO_DISPLAY_NOT_EXTENDED && moreButton} {errors.length > 0 &&