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 {
display: inline-flex;
align-items: center;
}
.style-name {
@ -265,9 +266,38 @@ html[style*="border"] .entry:nth-child(11):before {
}
.entry .actions > * {
display: inline-block;
padding: 0 1px;
margin: 0 1px;
height: 26px;
width: 18px;
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,
@ -296,21 +326,34 @@ html[style*="border"] .entry:nth-child(11):before {
z-index: 1;
box-sizing: border-box;
height: 0;
transition: height .25s ease-out;
transition: height .25s ease-out, opacity .5s ease-in;
overflow: hidden;
opacity: 0;
}
.entry.menu-active .menu {
/* FIXME: avoid hard coded height */
height: 75px;
height: 72px;
opacity: 1;
}
.entry .menu-item {
display: flex;
/* accessibility */
.menu-item {
display: none;
border: none;
align-items: center;
padding: 0 0 0 20px;
cursor: pointer;
height: 25px;
height: 24px;
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:active {

7
popup/popup.js
View File

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