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">
<div class="entry">
<div class="main-controls">
<label class="style-name">
<input class="checker" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label>
</div>
<div class="actions">
<a href="#" class="configure" i18n-title="configureStyle" tabindex="0">
<svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
</a>
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
<svg class="svg-icon edit" viewBox="0 0 14 16">
<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>
</a>
<!-- <a href="#" class="delete" i18n-title="deleteStyleLabel" tabindex="0">
<svg class="svg-icon remove" viewBox="0 0 14 16">
<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>
</a> -->
<a href="##" class="menu-button">
<svg class="svg-icon edit" viewBox="0 0 14 16">
<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>
</a>
<div class="entry-content">
<div class="main-controls">
<label class="style-name">
<input class="checker" type="checkbox">
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
</label>
</div>
<div class="actions">
<a href="#" class="configure" i18n-title="configureStyle" tabindex="0">
<svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
</a>
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
<svg class="svg-icon edit" viewBox="0 0 14 16">
<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>
</a>
<!-- <a href="#" class="delete" i18n-title="deleteStyleLabel" tabindex="0">
<svg class="svg-icon remove" viewBox="0 0 14 16">
<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>
</a> -->
<a href="##" class="menu-button">
<svg class="svg-icon edit" viewBox="0 0 14 16">
<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>
</a>
</div>
</div>
<div class="menu">
<label class="menu-item exclude-by-domain button">

23
popup/popup.css
View File

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

9
popup/popup.js
View File

@ -361,15 +361,6 @@ Object.assign(handleEvent, {
toggleMenu(event) {
const entry = handleEvent.getClickedStyleElement(event);
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) {