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

Fix: calculate menu height dynamically

Browse Source
This commit is contained in:
eight 2019-03-18 17:45:19 +08:00
parent 0183067b11
commit 812f6bcdd9
2 changed files with 6 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
popup/popup.css
View File

@ -327,8 +327,7 @@ a.configure[target="_blank"] .svg-icon.config {
opacity: 0; opacity: 0;
} }
.entry.menu-active .menu { .entry.menu-active .menu {
/* FIXME: avoid hard coded height */ height: var(--menu-height, 0px);
height: 72px;
opacity: 1; opacity: 1;
} }
/* accessibility */ /* accessibility */
@ -336,12 +335,11 @@ a.configure[target="_blank"] .svg-icon.config {
display: none; display: none;
border: none; border: none;
align-items: center; align-items: center;
padding: 0 0 0 20px; padding: 3px 0 3px 20px;
height: 24px;
background: none; background: none;
text-decoration: none; text-decoration: none;
} }
.entry.menu-active.accessible-items .menu-item { .entry.menu-active .menu-item {
display: flex; display: flex;
} }
.entry .menu-item.delete { .entry .menu-item.delete {
@ -360,6 +358,7 @@ a.configure[target="_blank"] .svg-icon.config {
} }
.entry .menu-icon { .entry .menu-icon {
width: 26px; width: 26px;
flex-shrink: 0;
} }
.entry .menu-icon > * { .entry .menu-icon > * {
display: block; display: block;

5
popup/popup.js
View File

@ -404,9 +404,8 @@ Object.assign(handleEvent, {
toggleMenu(event) { toggleMenu(event) {
const entry = handleEvent.getClickedStyleElement(event); const entry = handleEvent.getClickedStyleElement(event);
entry.classList.toggle('menu-active'); entry.classList.toggle('menu-active');
setTimeout(() => { const menu = entry.querySelector('.menu');
entry.classList.toggle('accessible-items'); menu.style.setProperty('--menu-height', menu.scrollHeight + 'px');
}, 250);
event.preventDefault(); event.preventDefault();
}, },