diff --git a/manage.html b/manage.html index 7c8803be..d1ccede7 100644 --- a/manage.html +++ b/manage.html @@ -59,8 +59,10 @@

+ + +
- ...
@@ -361,7 +363,7 @@ - + diff --git a/manage/events.js b/manage/events.js index 0686688a..2dfcbf0b 100644 --- a/manage/events.js +++ b/manage/events.js @@ -77,6 +77,13 @@ const Events = { }, expandTargets(event, entry) { + if (event.type === 'contextmenu') { + event.preventDefault(); + const ex = '.expanded'; + $$(`.has-more${$(ex, entry) ? ex : `:not(${ex})`} .expander`) + .forEach(el => el.click()); + return; + } if (!entry._allTargetsRendered) { createTargetsElement({entry, expanded: true}); getFaviconSrc(entry); @@ -100,10 +107,11 @@ const Events = { entryClicked(event) { const target = event.target; const entry = target.closest('.entry'); - for (const selector in Events.ENTRY_ROUTES) { + const routes = Events['ENTRY_ROUTES' + (event.type === 'contextmenu' ? '_CTX' : '')]; + for (const selector in routes) { for (let el = target; el && el !== entry; el = el.parentElement) { if (el.matches(selector)) { - return Events.ENTRY_ROUTES[selector].call(el, event, entry); + return routes[selector].call(el, event, entry); } } } @@ -146,6 +154,9 @@ Events.ENTRY_ROUTES = { '.applies-to .expander': Events.expandTargets, '.configure-usercss': Events.config, }; +Events.ENTRY_ROUTES_CTX = { + '.applies-to .expander': Events.expandTargets, +}; /* exported handleBulkChange */ function handleBulkChange() { diff --git a/manage/manage.css b/manage/manage.css index eae810f5..b5ffb2e2 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -611,16 +611,13 @@ button .svg-icon, padding-top: .25rem; padding-bottom: .25rem; } - .newUI .targets { overflow: hidden; max-height: calc(var(--num-targets) * 18px); } - .newUI .applies-to.expanded .targets { max-height: none; } - .newUI .target { display: block; overflow: hidden; @@ -631,25 +628,23 @@ button .svg-icon, padding-right: 1rem; line-height: 18px; } - -.newUI .applies-to .expander { - margin: 0; +.expander { cursor: pointer; - font-size: 3ex; - line-height: .5ex; - vertical-align: super; - letter-spacing: .1ex; - text-decoration: none; + position: absolute; + right: 4px; +} +.expander svg { + width: 16px; + height: 16px; + fill: var(--c50); +} +.expanded .expander { + transform: rotate(180deg); + transform-origin: 8px 8px; } - .newUI .applies-to:not(.has-more) .expander { display: none; } - -.newUI .has-favicons .applies-to .expander { - margin-left: 20px; -} - .newUI .target:hover { background-color: inherit; } diff --git a/manage/manage.js b/manage/manage.js index 84abe0b7..b2a1ba32 100644 --- a/manage/manage.js +++ b/manage/manage.js @@ -48,6 +48,7 @@ newUI.renderClass(); prefs.ready, ]); installed.on('click', Events.entryClicked); + installed.on('contextmenu', Events.entryClicked); installed.on('mouseover', Events.lazyAddEntryTitle, {passive: true}); installed.on('mouseout', Events.lazyAddEntryTitle, {passive: true}); $('#sync-styles').onclick =