diff --git a/src/i18n/en-US.properties b/src/i18n/en-US.properties index 1604c32f7..c7e424b26 100644 --- a/src/i18n/en-US.properties +++ b/src/i18n/en-US.properties @@ -36,6 +36,8 @@ loading_preview=Loading Preview... download_file=Download File # Text shown when a text file has been truncated due to size limits. text_truncated=This file has been truncated due to size limits. Please download to view the whole file. +# Button tooltip for toggling find bar +toggle_findbar=Toggle findbar # Button tooltip to toggle Thumbnails Sidebar toggle_thumbnails=Toggle thumbnails # Message when file has inaccessible xrefs diff --git a/src/lib/icons/search.svg b/src/lib/icons/search.svg old mode 100755 new mode 100644 index bf697eece..6b4ce0e09 --- a/src/lib/icons/search.svg +++ b/src/lib/icons/search.svg @@ -1,4 +1,6 @@ - - - + + + + + diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index 42b7cee2d..c641733e9 100644 --- a/src/lib/viewers/doc/DocBaseViewer.js +++ b/src/lib/viewers/doc/DocBaseViewer.js @@ -33,6 +33,7 @@ import { ICON_PRINT_CHECKMARK, ICON_FULLSCREEN_IN, ICON_FULLSCREEN_OUT, + ICON_SEARCH, ICON_THUMBNAILS_TOGGLE, } from '../../icons/icons'; import { JS, PRELOAD_JS, CSS } from './docAssets'; @@ -774,16 +775,26 @@ class DocBaseViewer extends BaseViewer { // Only initialize the find bar if the user has download permissions on // the file. Users without download permissions shouldn't be able to // interact with the text layer - const canDownload = checkPermission(this.options.file, PERMISSION_DOWNLOAD); - if (!canDownload || this.getViewerOption('disableFindBar')) { + if (this.isFindDisabled()) { return; } - this.findBar = new DocFindBar(this.findBarEl, this.pdfFindController, this.pdfEventBus, canDownload); + this.findBar = new DocFindBar(this.findBarEl, this.pdfFindController, this.pdfEventBus); this.findBar.addListener(VIEWER_EVENT.metric, this.emitMetric); this.findBar.addListener('close', this.handleFindBarClose); } + /** + * Determines if findbar is disabled + * + * @private + * @return {boolean} + */ + isFindDisabled() { + const canDownload = checkPermission(this.options.file, PERMISSION_DOWNLOAD); + return !canDownload || this.getViewerOption('disableFindBar'); + } + /** * Re-sizing logic. * @@ -1069,6 +1080,10 @@ class DocBaseViewer extends BaseViewer { ); } + if (!this.isFindDisabled()) { + this.controls.add(__('toggle_findbar'), () => this.findBar.toggle(), 'bp-toggle-findbar-icon', ICON_SEARCH); + } + this.zoomControls.init(this.pdfViewer.currentScale, { maxZoom: MAX_SCALE, minZoom: MIN_SCALE, diff --git a/src/lib/viewers/doc/DocFindBar.js b/src/lib/viewers/doc/DocFindBar.js index 7a40d63ad..87a569325 100644 --- a/src/lib/viewers/doc/DocFindBar.js +++ b/src/lib/viewers/doc/DocFindBar.js @@ -401,6 +401,19 @@ class DocFindBar extends EventEmitter { this.opened = false; this.bar.classList.add(CLASS_HIDDEN); } + + /** + * Toggles the Find Bar open and closed + * + * @return {void} + */ + toggle() { + if (this.opened) { + this.close(); + } else { + this.open(); + } + } } export default DocFindBar; diff --git a/src/lib/viewers/doc/DocFindBar.scss b/src/lib/viewers/doc/DocFindBar.scss index adfd2dea8..e94c7c31a 100644 --- a/src/lib/viewers/doc/DocFindBar.scss +++ b/src/lib/viewers/doc/DocFindBar.scss @@ -85,21 +85,24 @@ $blue: #00f !default; margin: 0; line-height: 1; text-align: left; - } + border: 0; - .bp-doc-find-close { - &:hover .icon { - fill: $better-black; + svg { + width: 12px; + height: 12px; } } - .bp-doc-find-search, .bp-doc-find-close { border: 0; svg { width: 22px; } + + &:hover .icon { + fill: $better-black; + } } .bp-find-match-not-found, diff --git a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js index 5b84992eb..5130f6e6a 100644 --- a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js +++ b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js @@ -27,10 +27,11 @@ import { SELECTOR_BOX_PREVIEW, } from '../../../constants'; import { - ICON_PRINT_CHECKMARK, - ICON_THUMBNAILS_TOGGLE, ICON_FULLSCREEN_IN, ICON_FULLSCREEN_OUT, + ICON_PRINT_CHECKMARK, + ICON_SEARCH, + ICON_THUMBNAILS_TOGGLE, } from '../../../icons/icons'; import { VIEWER_EVENT, LOAD_METRIC, USER_DOCUMENT_THUMBNAIL_EVENTS } from '../../../events'; import Timer from '../../../Timer'; @@ -2257,6 +2258,8 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => { add: sandbox.stub(), removeListener: sandbox.stub(), }; + + stubs.isFindDisabled = sandbox.stub(docBase, 'isFindDisabled'); }); it('should add the correct controls', () => { @@ -2269,6 +2272,13 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => { ICON_THUMBNAILS_TOGGLE, ); + expect(docBase.controls.add).to.be.calledWith( + __('toggle_findbar'), + sinon.match.func, + 'bp-toggle-findbar-icon', + ICON_SEARCH, + ); + expect(docBase.zoomControls.init).to.be.calledWith(0.9, { maxZoom: 10, minZoom: 0.1, @@ -2309,6 +2319,19 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => { ICON_THUMBNAILS_TOGGLE, ); }); + + it('should not add the find controls if find is disabled', () => { + stubs.isFindDisabled.returns(true); + + docBase.bindControlListeners(); + + expect(docBase.controls.add).not.to.be.calledWith( + __('toggle_findbar'), + sinon.match.func, + 'bp-toggle-findbar-icon', + ICON_SEARCH, + ); + }); }); describe('toggleThumbnails()', () => { diff --git a/src/lib/viewers/doc/__tests__/DocFindBar-test.js b/src/lib/viewers/doc/__tests__/DocFindBar-test.js index 1178362a7..d212ba4f8 100644 --- a/src/lib/viewers/doc/__tests__/DocFindBar-test.js +++ b/src/lib/viewers/doc/__tests__/DocFindBar-test.js @@ -584,4 +584,29 @@ describe('lib/viewers/doc/DocFindBar', () => { expect(stubs.add).to.be.calledWith(CLASS_HIDDEN); }); }); + + describe('toggle()', () => { + beforeEach(() => { + stubs.open = sandbox.stub(docFindBar, 'open'); + stubs.close = sandbox.stub(docFindBar, 'close'); + }); + + it('should open if not currently opened', () => { + docFindBar.opened = false; + + docFindBar.toggle(); + + expect(docFindBar.open).to.be.called; + expect(docFindBar.close).not.to.be.called; + }); + + it('should close if currently opened', () => { + docFindBar.opened = true; + + docFindBar.toggle(); + + expect(docFindBar.open).not.to.be.called; + expect(docFindBar.close).to.be.called; + }); + }); });