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

Fix: use simple menu toggle

Browse Source
This commit is contained in:
eight 2019-02-11 08:04:24 +08:00
parent 71e439bd64
commit 06960543db
3 changed files with 40 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
popup.html
View File

@ -24,6 +24,7 @@
<template data-id="style"> <template data-id="style">
<div class="entry"> <div class="entry">
<div class="entry-content">
<div class="main-controls"> <div class="main-controls">
<label class="style-name"> <label class="style-name">
<input class="checker" type="checkbox"> <input class="checker" type="checkbox">
@ -50,6 +51,7 @@
</svg> </svg>
</a> </a>
</div> </div>
</div>
<div class="menu"> <div class="menu">
<label class="menu-item exclude-by-domain button"> <label class="menu-item exclude-by-domain button">
<div class="menu-icon"> <div class="menu-icon">

23
popup/popup.css
View File

@ -173,16 +173,17 @@ body.blocked > DIV {
} }
/* entry */ /* entry */
.entry { .entry {
position: relative;
}
.entry-content {
display: flex; display: flex;
align-items: center; align-items: center;
height: 26px; height: 26px;
padding: 0 14px 0 0; padding: 0 14px 0 0;
position: relative;
} }
html[style] .entry { html[style] .entry-content {
padding: 0 16px 0 0; padding: 0 16px 0 0;
} }
@ -288,14 +289,19 @@ html[style*="border"] .entry:nth-child(11):before {
/* entry menu */ /* entry menu */
.entry .menu { .entry .menu {
position: absolute;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
top: 100%; top: 100%;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
box-sizing: border-box; box-sizing: border-box;
background-color: white; height: 0;
transition: height .25s ease-out;
overflow: hidden;
}
.entry.menu-active .menu {
/* FIXME: avoid hard coded height */
height: 75px;
} }
.entry .menu-item { .entry .menu-item {
display: flex; display: flex;
@ -304,16 +310,13 @@ html[style*="border"] .entry:nth-child(11):before {
padding: 0 0 0 20px; padding: 0 0 0 20px;
cursor: pointer; cursor: pointer;
height: 25px; height: 25px;
background: unset; background: none;
} }
.entry .menu-item:hover, .entry .menu-item:hover,
.entry .menu-item:active { .entry .menu-item:active {
background-color: hsl(0, 0%, 95%); background-color: rgba(0, 0, 0, 0.1);
transition: background-color .25s; transition: background-color .25s;
} }
.entry:not(.menu-active) .menu {
display: none;
}
.entry .menu-icon { .entry .menu-icon {
width: 26px; width: 26px;
} }

9
popup/popup.js
View File

@ -361,15 +361,6 @@ 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');
if (entry.classList.contains('menu-active')) {
document.addEventListener('click', function handler(e) {
if ($('.menu', entry).contains(e.target)) {
return;
}
entry.classList.toggle('menu-active');
document.removeEventListener('click', handler);
});
}
}, },
delete(event) { delete(event) {