diff --git a/package-lock.json b/package-lock.json index ada7fa362..ed46a323e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@internetarchive/icon-close": "1.4.1", "@internetarchive/icon-dl": "1.4.1", "@internetarchive/icon-edit-pencil": "1.4.1", + "@internetarchive/icon-ellipses": "1.4.1", "@internetarchive/icon-ia-logo": "1.4.1", "@internetarchive/icon-magnify-minus": "1.4.1", "@internetarchive/icon-magnify-plus": "1.4.1", diff --git a/package.json b/package.json index c22b3c459..ea805cdc0 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "@internetarchive/icon-close": "1.4.1", "@internetarchive/icon-dl": "1.4.1", "@internetarchive/icon-edit-pencil": "1.4.1", + "@internetarchive/icon-ellipses": "1.4.1", "@internetarchive/icon-ia-logo": "1.4.1", "@internetarchive/icon-magnify-minus": "1.4.1", "@internetarchive/icon-magnify-plus": "1.4.1", @@ -143,6 +144,6 @@ "update:runtime-deps": "npm i @webcomponents/webcomponentsjs@latest interactjs@latest iso-language-codes@latest jquery@latest jquery-colorbox@latest jquery-ui@latest jquery-ui-touch-punch@latest jquery.browser@latest lit@latest soundmanager2@latest", "update:runtime-deps:test": "npm run build", "DOCS:update:ia-deps": "Packages by @internetarchive", - "update:ia-deps": "npm i @internetarchive/bergamot-translator@latest @internetarchive/ia-activity-indicator@latest @internetarchive/ia-item-navigator@latest @internetarchive/icon-bookmark@latest @internetarchive/icon-close@latest @internetarchive/icon-dl@latest @internetarchive/icon-edit-pencil@latest @internetarchive/icon-ia-logo@latest @internetarchive/icon-magnify-minus@latest @internetarchive/icon-magnify-plus@latest @internetarchive/icon-search@latest @internetarchive/icon-share@latest @internetarchive/icon-toc@latest @internetarchive/icon-visual-adjustment@latest @internetarchive/modal-manager@latest @internetarchive/shared-resize-observer@latest" + "update:ia-deps": "npm i @internetarchive/bergamot-translator@latest @internetarchive/ia-activity-indicator@latest @internetarchive/ia-item-navigator@latest @internetarchive/icon-bookmark@latest @internetarchive/icon-close@latest @internetarchive/icon-dl@latest @internetarchive/icon-edit-pencil@latest @internetarchive/icon-ellipses@latest @internetarchive/icon-ia-logo@latest @internetarchive/icon-magnify-minus@latest @internetarchive/icon-magnify-plus@latest @internetarchive/icon-search@latest @internetarchive/icon-share@latest @internetarchive/icon-toc@latest @internetarchive/icon-visual-adjustment@latest @internetarchive/modal-manager@latest @internetarchive/shared-resize-observer@latest" } } diff --git a/src/css/_TextSelection.scss b/src/css/_TextSelection.scss index 2fb888ae5..5530f8f27 100644 --- a/src/css/_TextSelection.scss +++ b/src/css/_TextSelection.scss @@ -145,16 +145,29 @@ display: none; } + +$select-menu-radius: 25px; +$select-menu-extended-radius: 10px; .br-select-menu__root { display: none; - border-radius: 20px; - background-color: #333; color: white; color-scheme: dark; padding: 2px; overflow: hidden; opacity: 1; - transition: border-radius 0.2s, opacity 0.2s; + transition: opacity 0.2s; + gap: 5px; + + &[open] { + display: flex; + } + + &[showextended] { + display: block; + gap: 0px; + background-color: #333; + border-radius: $select-menu-extended-radius; + } @starting-style { opacity: 0; @@ -164,13 +177,6 @@ opacity: 0; pointer-events: none; } -.br-select-menu__root:hover { - border-radius: 8px; -} - -.br-select-menu__root:hover .br-select-menu__option { - border-radius: 6px; -} .br-select-menu__option { --iconWidth: 15px; @@ -179,18 +185,40 @@ background: transparent; display: flex; align-items: center; - border-radius: 20px; + border-radius: $select-menu-radius; font-family: inherit; color: inherit; border: 0; - transition: background-color 0.2s, border-radius 0.2s; cursor: pointer; text-wrap: nowrap; - padding: 4px; -} + background-color: #333; + position: relative; -.br-select-menu__option:hover { - background-color: rgba(255, 255, 255, 0.1); + @media (pointer: coarse) and (hover: none) { + padding: 4px 8px; + #br-select-more & { + padding: 4px; + } + } + + &:hover:after { + position: absolute; + left: 2px; + right: 2px; + top: 2px; + bottom: 2px; + content: ""; + pointer-events: none; + background-color: rgba(255, 255, 255, 0.1); + border-radius: calc($select-menu-radius - 2px); + } + + .br-select-menu__root[showextended] & { + width:100%; + &:hover:after { + border-radius: calc($select-menu-extended-radius - 2px); + } + } } .br-select-menu__icon { @@ -198,26 +226,13 @@ flex-shrink: 0; width: 17px; height: 17px; + padding: 3px; } .br-select-menu__label { margin-left: 4px; font-size: 12px; -} - -@media (hover: hover) { - .br-select-menu__label { - width: 0px; - margin-left: 0; - opacity: 0; - interpolate-size: allow-keywords; - transition: width 0.2s; - } - .br-select-menu__root:hover .br-select-menu__label { - width: auto; - margin-left: 4px; - opacity: 1; - } + margin-right: 4px; } .BRtextLayer .BRhighlight { diff --git a/src/util/TextSelectionManager.js b/src/util/TextSelectionManager.js index 2ae2fe983..80279c60c 100644 --- a/src/util/TextSelectionManager.js +++ b/src/util/TextSelectionManager.js @@ -7,6 +7,7 @@ import { customElement, property, query } from 'lit/decorators.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import '@internetarchive/icon-share'; import '@internetarchive/icon-edit-pencil/icon-edit-pencil.js'; +import '@internetarchive/icon-ellipses'; import { isIOS, isAndroid } from './browserSniffing.js'; import { genAt, genFilter } from './generators.js'; @@ -412,6 +413,9 @@ export class BRSelectMenuOption extends LitElement { if (this.icon === 'edit-pencil') { return html``; } + if (this.icon === 'ellipses') { + return html``; + } return ''; } @@ -433,7 +437,9 @@ export class BRSelectMenuOption extends LitElement { aria-label=${ifDefined(accessibleLabel)} > ${this.renderIcon()} - ${hasTemporaryText ? html` + ${ + !hasTemporaryText && !baseLabel ? '' : + hasTemporaryText ? html` e.preventDefault()} @click=${this.handleCopyLinkToHighlight} icon="share" @@ -560,6 +570,19 @@ class BRSelectMenu extends LitElement { > `; } + + renderShowMoreOption() { + return html` + e.preventDefault()} + @click=${this.toggleExtendedMenu} + icon="ellipses" + aria-label="Show more options" + > + `; + } + renderLocalStorageOptions() { return html` `; } - render() { - // TODO change the second button to use a different icon + renderDefaultOptions() { return html` ${this.copyLinkToHighlightEnabled ? this.renderCopyLinkToHighlightOption() : ''} ${this.highlightAnnotationEnabled && !this.nodesForRemoval ? this.renderHighlightOption() : ''} - ${this.highlightAnnotationEnabled ? this.renderLocalStorageOptions() : ''} ${this.nodesForRemoval ? this.renderRemoveOption() : ''} `; } + renderExtendedOptions() { + return html` + ${this.renderDefaultOptions()} + ${this.renderLocalStorageOptions()} + `; + } + + render() { + const hasMoreOptions = this.br.plugins.experiments?.isEnabled('annotateHighlight'); + // TODO change the second button to use a different icon + return html` + ${this.showExtended ? this.renderExtendedOptions() : this.renderDefaultOptions()} + ${!this.showExtended && hasMoreOptions ? this.renderShowMoreOption() : ""} + `; + } + /** * @param {MouseEvent} e */ @@ -615,6 +652,14 @@ class BRSelectMenu extends LitElement { this.copyLinkOption?.showTemporaryText('Copied!'); } + /** + * @param {MouseEvent} e + */ + toggleExtendedMenu(e) { + e.preventDefault(); + this.showExtended = !this.showExtended; + } + /** * Returns the closest BRtextLayer element on the page that contains the target node * @param {Node} node @@ -761,12 +806,12 @@ class BRSelectMenu extends LitElement { this.style.left = `${left}px`; } + // Will always show the simplified menu when rendered after hiding async show() { if (this.br.plugins.translate?.userToggleTranslate) return; this.style.zIndex = '1'; this.style.position = 'absolute'; - this.style.display = 'block'; this.open = true; this.classList.remove('br-select-menu__root--scrolling'); window.removeEventListener('scroll', this._onScroll, { capture: true }); @@ -778,7 +823,7 @@ class BRSelectMenu extends LitElement { hide() { if (!this.open) return; - this.style.display = 'none'; + this.showExtended = false; this.open = false; window.removeEventListener('scroll', this._onScroll, { capture: true }); this.clearNodesForRemoval();