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

Icons and accessibility

Browse Source
This commit is contained in:
narcolepticinsomniac 2019-02-11 19:06:03 -05:00 committed by GitHub
parent e9281cfe23
commit 9101ee9219
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 57 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
popup/popup.css
View File

@ -193,6 +193,7 @@ html[style] .entry-content {
.entry .actions { .entry .actions {
display: inline-flex; display: inline-flex;
align-items: center;
} }
.style-name { .style-name {
@ -265,9 +266,38 @@ html[style*="border"] .entry:nth-child(11):before {
} }
.entry .actions > * { .entry .actions > * {
display: inline-block; height: 26px;
padding: 0 1px; width: 18px;
margin: 0 1px; display: inline-flex;
align-items: center;
justify-content: center;
}
.entry .actions > .menu-button {
width: 14px;
}
.entry .actions > a.configure {
padding-right: 2px;
}
.entry .actions > a.configure[target="_blank"] {
width: 20px;
}
.svg-icon.config {
height: 14px;
width: 14px;
}
a.configure[target="_blank"] .svg-icon.config {
height: 20px;
width: 20px;
margin-top: 1px;
}
.svg-icon.config {
width: 16px;
} }
.not-applied .checker, .not-applied .checker,
@ -296,21 +326,34 @@ html[style*="border"] .entry:nth-child(11):before {
z-index: 1; z-index: 1;
box-sizing: border-box; box-sizing: border-box;
height: 0; height: 0;
transition: height .25s ease-out; transition: height .25s ease-out, opacity .5s ease-in;
overflow: hidden; overflow: hidden;
opacity: 0;
} }
.entry.menu-active .menu { .entry.menu-active .menu {
/* FIXME: avoid hard coded height */ /* FIXME: avoid hard coded height */
height: 75px; height: 72px;
opacity: 1;
} }
.entry .menu-item { /* accessibility */
display: flex; .menu-item {
display: none;
border: none; border: none;
align-items: center; align-items: center;
padding: 0 0 0 20px; padding: 0 0 0 20px;
cursor: pointer; cursor: pointer;
height: 25px; height: 24px;
background: none; background: none;
text-decoration: none;
}
.entry.menu-active.accessible-items .menu-item {
display: flex;
}
.entry .menu-item.delete:hover {
color: #000;
}
.entry .menu-item.delete > span {
margin-top: 1px;
} }
.entry .menu-item:hover, .entry .menu-item:hover,
.entry .menu-item:active { .entry .menu-item:active {

7
popup/popup.js
View File

@ -390,12 +390,17 @@ 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(() => {
entry.classList.toggle('accessible-items');
}, 250);
event.preventDefault();
}, },
delete(event) { delete(event) {
const entry = handleEvent.getClickedStyleElement(event); const entry = handleEvent.getClickedStyleElement(event);
const id = entry.styleId; const id = entry.styleId;
const box = $('#confirm'); const box = $('#confirm');
const cancel = $('[data-cmd="cancel"]');
box.dataset.display = true; box.dataset.display = true;
box.style.cssText = ''; box.style.cssText = '';
$('b', box).textContent = $('.style-name', entry).textContent; $('b', box).textContent = $('.style-name', entry).textContent;
@ -404,7 +409,7 @@ Object.assign(handleEvent, {
$('[data-cmd="cancel"]', box).onclick = () => confirm(false); $('[data-cmd="cancel"]', box).onclick = () => confirm(false);
window.onkeydown = event => { window.onkeydown = event => {
const keyCode = event.keyCode || event.which; const keyCode = event.keyCode || event.which;
if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey if (document.activeElement !== cancel && !event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
&& (keyCode === 13 || keyCode === 27)) { && (keyCode === 13 || keyCode === 27)) {
event.preventDefault(); event.preventDefault();
confirm(keyCode === 13); confirm(keyCode === 13);