Change context menu to horizontal layout

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"
   }
 }

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,45 +185,54 @@
   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 {
   display: block;
   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 {

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`<ia-icon-edit-pencil class="br-select-menu__icon" aria-hidden="true"></ia-icon-edit-pencil>`;
     }
+    if (this.icon === 'ellipses') {
+      return html`<ia-icon-ellipses class="br-select-menu__icon" aria-hidden="true"></ia-icon-ellipses>`;
+    }
     return '';
   }
 
@@ -433,7 +437,9 @@ export class BRSelectMenuOption extends LitElement {
         aria-label=${ifDefined(accessibleLabel)}
       >
         ${this.renderIcon()}
-        ${hasTemporaryText ? html`
+        ${
+          !hasTemporaryText && !baseLabel ? '' :
+            hasTemporaryText ? html`
           <span class="br-select-menu__label-wrap" style="display: inline-flex; position: relative; align-items: center;">
             <span
               class="br-select-menu__label"
@@ -459,8 +465,12 @@ class BRSelectMenu extends LitElement {
   /** @type {import('../BookReader.js').default} */
   br;
 
+  /** @type {boolean} */
+  @property({type: Boolean, reflect: true})
+  showExtended = false;
+
   /** @type {BRSelectMenuOption | null} */
-  @query('#copy-link-option')
+  @query('#br-select-copy-link-option')
   copyLinkOption;
 
   @property({type: Boolean, reflect: true})
@@ -521,7 +531,7 @@ class BRSelectMenu extends LitElement {
     // Mousedown needed to prevent selection from being cleared on iOS
     return html`
       <br-menu-option
-        id="copy-link-option"
+        id="br-select-copy-link-option"
         @mousedown=${/** @param {MouseEvent} e */ (e) => e.preventDefault()}
         @click=${this.handleCopyLinkToHighlight}
         icon="share"
@@ -560,6 +570,19 @@ class BRSelectMenu extends LitElement {
       ></br-menu-option>
     `;
   }
+
+  renderShowMoreOption() {
+    return html`
+      <br-menu-option
+        id="br-select-more"
+        @mousedown=${/** @param {MouseEvent} e */ (e) => e.preventDefault()}
+        @click=${this.toggleExtendedMenu}
+        icon="ellipses"
+        aria-label="Show more options"
+      ></br-menu-option>
+    `;
+  }
+
   renderLocalStorageOptions() {
     return html`
       <br-menu-option
@@ -574,16 +597,30 @@ class BRSelectMenu extends LitElement {
       ></br-menu-option>`;
   }
 
-  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();