open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

properly show another split-btn + tiny popup

Browse Source
This commit is contained in:
tophf 2022-02-23 00:07:01 +03:00
parent 38ac974d8a
commit f5b2fe2fc6
3 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
global.css
View File

@ -371,6 +371,7 @@ body.resizing-v > * {
.split-btn { .split-btn {
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
--menu-pad: .5em;
} }
.split-btn-pedal { .split-btn-pedal {
margin-left: -1px !important; margin-left: -1px !important;
@ -386,7 +387,7 @@ body.resizing-v > * {
border-top: calc(var(--side) * 1.3) solid currentColor; border-top: calc(var(--side) * 1.3) solid currentColor;
vertical-align: bottom; vertical-align: bottom;
} }
.split-btn-pedal.active { .split-btn.active .split-btn-pedal {
box-shadow: inset 0 0 100px rgba(0, 0, 0, .2); box-shadow: inset 0 0 100px rgba(0, 0, 0, .2);
} }
.split-btn-menu { .split-btn-menu {
@ -400,7 +401,7 @@ body.resizing-v > * {
z-index: 1000; z-index: 1000;
} }
.split-btn-menu > * { .split-btn-menu > * {
padding: .5em 1em; padding: var(--menu-pad) 1em;
display: block; display: block;
} }
.split-btn-menu > :hover { .split-btn-menu > :hover {

14
js/dom-on-load.js
View File

@ -97,29 +97,31 @@
* @param {PointerEvent} [event] - absent when self-invoked to hide the menu * @param {PointerEvent} [event] - absent when self-invoked to hide the menu
*/ */
function splitMenu(event) { function splitMenu(event) {
const prevMenu = $(SPLIT_BTN_MENU); const prevMenu = $('.split-btn.active ' + SPLIT_BTN_MENU) || $(SPLIT_BTN_MENU);
const prevPedal = (prevMenu || {}).previousElementSibling; const prevPedal = (prevMenu || {}).previousElementSibling;
const pedal = event && event.target.closest('.split-btn-pedal'); const pedal = event && event.target.closest('.split-btn-pedal');
const entry = event && prevMenu && event.target.closest(SPLIT_BTN_MENU + '>*'); const entry = event && prevMenu && event.target.closest(SPLIT_BTN_MENU + '>*');
if (prevMenu) { if (prevMenu) {
prevMenu.onfocusout = null;
prevMenu.remove(); prevMenu.remove();
prevPedal.classList.remove('active'); prevPedal.parentElement.classList.remove('active');
window.off('keydown', splitMenuEscape); window.off('keydown', splitMenuEscape);
if (!event) prevPedal.focus();
} }
if (pedal) { if (pedal && pedal !== prevPedal) {
const menu = $create(SPLIT_BTN_MENU, const menu = $create(SPLIT_BTN_MENU,
Array.from(pedal.attributes, ({name, value}) => Array.from(pedal.attributes, ({name, value}) =>
name.startsWith('menu-') && name.startsWith('menu-') &&
$create('a', {tabIndex: 0, __cmd: name.split('-').pop()}, value) $create('a', {tabIndex: 0, __cmd: name.split('-').pop()}, value)
)); ));
window.on('keydown', splitMenuEscape); window.on('keydown', splitMenuEscape);
menu.on('focusout', e => { menu.onfocusout = e => {
if (!menu.contains(e.relatedTarget)) { if (!menu.contains(e.relatedTarget)) {
setTimeout(splitMenu); setTimeout(splitMenu);
} }
}); };
pedal.on('mousedown', e => e.preventDefault()); pedal.on('mousedown', e => e.preventDefault());
pedal.classList.toggle('active'); pedal.parentElement.classList.toggle('active');
pedal.after(menu); pedal.after(menu);
moveFocus(menu, 0); moveFocus(menu, 0);
focusAccessibility.toggle(menu.firstChild, focusAccessibility.get(pedal)); focusAccessibility.toggle(menu.firstChild, focusAccessibility.get(pedal));

6
popup/popup.css
View File

@ -911,6 +911,12 @@ html:not(.styles-last) .split-btn-pedal::after {
} }
} }
@media (max-height: 130px) {
#find-split {
--menu-pad: .25em;
}
}
/* Popup adjustments for common zoom levels */ /* Popup adjustments for common zoom levels */
@media (-webkit-min-device-pixel-ratio: 1.05) { @media (-webkit-min-device-pixel-ratio: 1.05) {