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

52
popup.html
View File

@ -24,31 +24,33 @@
<template data-id="style"> <template data-id="style">
<div class="entry"> <div class="entry">
<div class="main-controls"> <div class="entry-content">
<label class="style-name"> <div class="main-controls">
<input class="checker" type="checkbox"> <label class="style-name">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg> <input class="checker" type="checkbox">
</label> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</div> </label>
<div class="actions"> </div>
<a href="#" class="configure" i18n-title="configureStyle" tabindex="0"> <div class="actions">
<svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg> <a href="#" class="configure" i18n-title="configureStyle" tabindex="0">
</a> <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0"> </a>
<svg class="svg-icon edit" viewBox="0 0 14 16"> <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
<path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/> <svg class="svg-icon edit" viewBox="0 0 14 16">
</svg> <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
</a> </svg>
<!-- <a href="#" class="delete" i18n-title="deleteStyleLabel" tabindex="0"> </a>
<svg class="svg-icon remove" viewBox="0 0 14 16"> <!-- <a href="#" class="delete" i18n-title="deleteStyleLabel" tabindex="0">
<path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/> <svg class="svg-icon remove" viewBox="0 0 14 16">
</svg> <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
</a> --> </svg>
<a href="##" class="menu-button"> </a> -->
<svg class="svg-icon edit" viewBox="0 0 14 16"> <a href="##" class="menu-button">
<path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/> <svg class="svg-icon edit" viewBox="0 0 14 16">
</svg> <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
</a> </svg>
</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">

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) {