mirror of
https://github.com/transmission/transmission.git
synced 2025-12-20 02:18:42 +00:00
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
This commit is contained in:
Rukario
GitHub
@@ -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;
|
||||
|
||||
@@ -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-down': { enabled: false, text: 'Move down in the queue' },
|
||||
'move-top': { enabled: false, text: 'Move to the front of the queue' },
|
||||
'move-up': { enabled: false, text: 'Move up in the queue' },
|
||||
'move-bottom': { enabled: false, text: 'Bottom' },
|
||||
'move-down': { enabled: false, text: 'Down' },
|
||||
'move-top': { enabled: false, text: 'Top' },
|
||||
'move-up': { enabled: false, text: 'Up' },
|
||||
'open-torrent': {
|
||||
enabled: true,
|
||||
shortcut: 'O',
|
||||
|
||||
@@ -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');
|
||||
add_item('resume-selected-torrents-now');
|
||||
add_item('pause-selected-torrents');
|
||||
add_separator();
|
||||
add_item('move-top');
|
||||
add_item('move-up');
|
||||
add_item('move-down');
|
||||
add_item('move-bottom');
|
||||
add_separator();
|
||||
add_item('remove-selected-torrents', true);
|
||||
add_item('trash-selected-torrents', true);
|
||||
add_separator();
|
||||
add_item('verify-selected-torrents');
|
||||
add_item('show-move-dialog');
|
||||
add_item('show-rename-dialog');
|
||||
add_item('show-labels-dialog');
|
||||
add_separator();
|
||||
add_item('reannounce-selected-torrents');
|
||||
add_separator();
|
||||
add_item('select-all');
|
||||
add_item('deselect-all');
|
||||
const new_submenu = (text, ...items) => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'context-menuitem';
|
||||
item.textContent = text;
|
||||
|
||||
const arrow = document.createElement('div');
|
||||
arrow.className = 'arrow';
|
||||
item.append(arrow);
|
||||
|
||||
const submenu = document.createElement('div');
|
||||
submenu.className = 'submenu';
|
||||
arrow.append(submenu);
|
||||
|
||||
const open = document.createElement('div');
|
||||
open.className = 'open right';
|
||||
submenu.append(open);
|
||||
open.append(...items.map((t) => new_item(t)));
|
||||
|
||||
item.addEventListener('click', (e_) => {
|
||||
const t = item.lastChild.lastChild;
|
||||
|
||||
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 };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user