feat: submenu to group away context menu items (#7263)

* Update context-menu.js

* Update transmission-app.scss

* Update transmission-app.scss

* Update transmission-app.scss

* Update context-menu.js

* Update transmission-app.scss

* Update context-menu.js

* Update transmission-app.scss

* Update context-menu.js

* Update transmission-app.scss

* Update context-menu.js

* Update action-manager.js

* Update context-menu.js

* Update context-menu.js

* Update action-manager.js

* Update context-menu.js

* Update context-menu.js

* Update context-menu.js

* Update context-menu.js

web/assets/css/transmission-app.scss

@@ -1300,10 +1300,89 @@ a {
   border-radius: 5px;
   color: var(--color-fg-on-popup);
   padding: 10px 5px;
-  z-index: 9999;
+  z-index: 2;
   user-select: none;
   -webkit-user-select: none;
 
+  .arrow {
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    border-left: 4px solid var(--color-fg-secondary);
+    float: right;
+    left: 5px;
+    pointer-events: none;
+    position: relative;
+    top: 5px;
+
+    .submenu {
+      display: none;
+      margin: 0 3px;
+      pointer-events: auto;
+      position: absolute;
+      overflow: hidden;
+      transform: translate(7px, -18px);
+      z-index: 3;
+      border-radius: 5px;
+      animation: shadow 200ms ease-in normal forwards;
+
+      @keyframes shadow {
+        0% {
+          background: rgba(0, 0, 0, 0);
+          box-shadow: none;
+        }
+
+        100% {
+          background: rgba(0, 0, 0, 0.04);
+          box-shadow:
+            0 3px 6px -4px rgba(0, 0, 0, 0.12),
+            0 6px 16px rgba(0, 0, 0, 0.08),
+            0 9px 28px 8px rgba(0, 0, 0, 0.06);
+        }
+      }
+
+      .open {
+        background-color: var(--color-bg-primary);
+        border-radius: 5px;
+        color: var(--color-fg-on-popup);
+        padding: 5px;
+        right: 0;
+        white-space: nowrap;
+
+        &.left {
+          position: relative;
+          display: block;
+          animation: left 200ms linear 1;
+        }
+
+        &.right {
+          position: relative;
+          display: block;
+          animation: right 200ms linear 1;
+        }
+
+        @keyframes left {
+          0% {
+            transform: translateX(100%);
+          }
+
+          100% {
+            transform: translateX(0%);
+          }
+        }
+
+        @keyframes right {
+          0% {
+            transform: translateX(-100%);
+          }
+
+          100% {
+            transform: translateX(0%);
+          }
+        }
+      }
+    }
+  }
+
   .context-menuitem {
     font-size: 13px;
     font-weight: 400;

web/src/action-manager.js

@@ -12,10 +12,10 @@ export class ActionManager extends EventTarget {
         shortcut: 'D',
         text: 'Deselect all',
       },
-      'move-bottom': { enabled: false, text: 'Move to the back of the queue' },
+      'move-bottom': { enabled: false, text: 'Bottom' },
-      'move-down': { enabled: false, text: 'Move down in the queue' },
+      'move-down': { enabled: false, text: 'Down' },
-      'move-top': { enabled: false, text: 'Move to the front of the queue' },
+      'move-top': { enabled: false, text: 'Top' },
-      'move-up': { enabled: false, text: 'Move up in the queue' },
+      'move-up': { enabled: false, text: 'Up' },
       'open-torrent': {
         enabled: true,
         shortcut: 'O',

web/src/context-menu.js

@@ -58,7 +58,7 @@ export class ContextMenu extends EventTarget {
     root.style.pointerEvents = 'none';
 
     const actions = {};
-    const add_item = (action, warn = false) => {
+    const new_item = (action, warn = false) => {
       const item = document.createElement('div');
       const text = this.action_manager.text(action);
       item.role = 'menuitem';
@@ -78,36 +78,108 @@ export class ContextMenu extends EventTarget {
         this.close();
       });
       actions[action] = item;
-      root.append(item);
+      return item;
     };
 
-    const add_separator = () => {
+    const new_separator = () => {
       const item = document.createElement('div');
       item.classList.add('context-menu-separator');
-      root.append(item);
+      return item;
     };
 
-    add_item('resume-selected-torrents');
+    const new_submenu = (text, ...items) => {
-    add_item('resume-selected-torrents-now');
+      const item = document.createElement('div');
-    add_item('pause-selected-torrents');
+      item.className = 'context-menuitem';
-    add_separator();
+      item.textContent = text;
-    add_item('move-top');
+
-    add_item('move-up');
+      const arrow = document.createElement('div');
-    add_item('move-down');
+      arrow.className = 'arrow';
-    add_item('move-bottom');
+      item.append(arrow);
-    add_separator();
+
-    add_item('remove-selected-torrents', true);
+      const submenu = document.createElement('div');
-    add_item('trash-selected-torrents', true);
+      submenu.className = 'submenu';
-    add_separator();
+      arrow.append(submenu);
-    add_item('verify-selected-torrents');
+
-    add_item('show-move-dialog');
+      const open = document.createElement('div');
-    add_item('show-rename-dialog');
+      open.className = 'open right';
-    add_item('show-labels-dialog');
+      submenu.append(open);
-    add_separator();
+      open.append(...items.map((t) => new_item(t)));
-    add_item('reannounce-selected-torrents');
+
-    add_separator();
+      item.addEventListener('click', (e_) => {
-    add_item('select-all');
+        const t = item.lastChild.lastChild;
-    add_item('deselect-all');
+
+        if (
+          !e_.target.classList.contains('right') &&
+          !e_.target.parentNode.classList.contains('right') &&
+          !e_.target.classList.contains('left') &&
+          !e_.target.parentNode.classList.contains('left') &&
+          t.style.display === 'block'
+        ) {
+          t.style.display = 'none';
+          return;
+        }
+
+        for (const p of root.querySelectorAll('.submenu')) {
+          p.style.display = 'none';
+        }
+
+        t.style.display = 'block';
+        const where = item.getBoundingClientRect();
+        const wheret = t.lastChild.getBoundingClientRect();
+        const y = Math.min(
+          0,
+          document.documentElement.clientHeight -
+            window.visualViewport.offsetTop -
+            where.top -
+            t.clientHeight +
+            3,
+        );
+        const x = Math.min(
+          0,
+          document.documentElement.clientWidth -
+            window.visualViewport.offsetLeft -
+            where.right -
+            t.clientWidth,
+        );
+
+        t.style.top = `${y}px`;
+        if (x) {
+          t.lastChild.className = 'open left';
+          t.style.left = `${-where.width - wheret.width}px`;
+        } else {
+          t.lastChild.className = 'open right';
+          t.style.left = `${x}px`;
+        }
+      });
+
+      return item;
+    };
+
+    root.append(
+      new_item('resume-selected-torrents'),
+      new_item('resume-selected-torrents-now'),
+      new_item('pause-selected-torrents'),
+      new_separator(),
+      new_submenu(
+        'Move in the queue',
+        'move-top',
+        'move-up',
+        'move-down',
+        'move-bottom',
+      ),
+      new_separator(),
+      new_item('remove-selected-torrents', true),
+      new_item('trash-selected-torrents', true),
+      new_separator(),
+      new_item('verify-selected-torrents'),
+      new_item('show-move-dialog'),
+      new_item('show-rename-dialog'),
+      new_item('show-labels-dialog'),
+      new_separator(),
+      new_item('reannounce-selected-torrents'),
+      new_separator(),
+      new_submenu('Select operation', 'select-all', 'deselect-all'),
+    );
 
     return { actions, root };
   }