Another popup mockup (#271)
* Another popup mockup This is a fraction of what I want to do with the popup, but these are improvements that can be made to the existing version without a complete overhaul. Should be no difference appearance-wise, only some simple enhancements to existing functionality in terms of click area and stylability. Eliminates ill-conceived `.left-gutter` altogether. Checkboxes and labels are now either parent/child or siblings, with no weird spaces between them, and their hovers can therefore be styled together. `entry` checkbox/label `.style-name` now occupies the entire height/width of the `.entry` to the left of the `.actions` icons, so no more errant clicks. * Another popup mockup * Delete popup.css * Another popup mockup * Custom checkboxes * Custom checkboxes * Subtlety >an animated checkbox needlessly draws attention to itself But... I feel the need. Drawing attention to the checkbox is intentional to indicate click action. >In case the entire row is highlighted there will be no distraction Clickable area isn't the entire row, it's everything left of action icons. Hovering background on part of the row will look odd, and it's also a less obvious indicator of click action IMO. Didn't change "disable all" yet. It's a special kinda function, so maybe slightly more drastic is warranted, but I can tone that down too.
This commit is contained in:
narcolepticinsomniac
GitHub
parent
55564b543a
commit
a185b6b182
46
popup.html
46
popup.html
|
|
@ -23,25 +23,27 @@
|
|||
|
||||
<template data-id="style">
|
||||
<div class="entry">
|
||||
<div class="left-gutter">
|
||||
<input class="checker" type="checkbox">
|
||||
</div>
|
||||
<div class="main-controls">
|
||||
<label class="style-name"></label>
|
||||
<div class="actions">
|
||||
<a href="#" class="enable" i18n-text="enableStyleLabel"></a>
|
||||
<a href="#" class="disable" i18n-text="disableStyleLabel"></a>
|
||||
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
<label class="style-name">
|
||||
<input class="checker" type="checkbox">
|
||||
<svg class="svg-icon checked" viewBox="0 0 1000 1000">
|
||||
<path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<a href="#" class="enable" i18n-text="enableStyleLabel"></a>
|
||||
<a href="#" class="disable" i18n-text="disableStyleLabel"></a>
|
||||
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -108,14 +110,14 @@
|
|||
|
||||
<div class="actions">
|
||||
<div id="disable-all-wrapper">
|
||||
<div class="left-gutter">
|
||||
<input id="disableAll" type="checkbox">
|
||||
</div>
|
||||
<div class="main-controls">
|
||||
<input id="disableAll" type="checkbox">
|
||||
<svg class="svg-icon checked" viewBox="0 0 1000 1000">
|
||||
<path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
|
||||
</svg>
|
||||
<label id="disableAll-label" for="disableAll" i18n-text="disableAllStyles"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left-gutter"></div>
|
||||
<div class="main-controls">
|
||||
<div id="find-styles">
|
||||
<a id="find-styles-link" href="https://userstyles.org/styles/browse/"
|
||||
|
|
|
|||
169
popup/popup.css
169
popup/popup.css
|
|
@ -15,22 +15,112 @@ body {
|
|||
}
|
||||
|
||||
body > div:not(#installed) {
|
||||
margin-left: 0.75em;
|
||||
margin-right: 0.75em;
|
||||
margin-left: 9px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
.firefox .chromium-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
.svg-icon.checked {
|
||||
position: absolute;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
display: none;
|
||||
fill: #000;
|
||||
margin: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + .svg-icon.checked {
|
||||
display: inline-flex;
|
||||
transition: fill .25s;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: 1px solid hsl(0, 0%, 46%);
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
display: inline-flex;
|
||||
border-radius: 2px;
|
||||
background-color: hsl(0, 0%, 94%);
|
||||
outline: none;
|
||||
margin: 0;
|
||||
transition: background-color .25s, border-color .25s;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked:hover, .style-name:hover input[type="checkbox"]:checked {
|
||||
border-color: hsl(0, 0%, 32%);
|
||||
background-color: hsl(0, 0%, 82%);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:hover, .style-name:hover input[type="checkbox"],
|
||||
.entry.disabled .style-name:hover input[type="checkbox"] {
|
||||
border-color: hsl(0, 0%, 32%);
|
||||
background-color: hsl(0, 0%, 82%);
|
||||
}
|
||||
|
||||
#installed.disabled + .actions #disableAll:checked + .svg-icon.checked {
|
||||
fill: hsl(0, 68%, 42%);
|
||||
}
|
||||
|
||||
#installed.disabled + .actions #disableAll:checked {
|
||||
border-color: hsl(0, 68%, 50%);
|
||||
}
|
||||
|
||||
#installed.disabled + .actions #disableAll:checked:hover + .svg-icon.checked {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
#disableAll:hover {
|
||||
border-color: hsl(0, 68%, 50%);
|
||||
background-color: hsl(20, 70%, 75%);
|
||||
}
|
||||
|
||||
#disableAll:hover + .svg-icon + label {
|
||||
color: hsl(0, 68%, 42%);
|
||||
}
|
||||
|
||||
#installed.disabled + .actions #disableAll:checked:hover {
|
||||
border-color: hsl(0, 50%, 56%);
|
||||
background-color: hsl(0, 50%, 56%);
|
||||
}
|
||||
|
||||
.style-name .checker,
|
||||
.style-name .svg-icon.checked {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 9px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#disable-all-wrapper .main-controls .svg-icon.checked {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
label {
|
||||
transition: color .25s;
|
||||
}
|
||||
|
||||
#disable-all-wrapper {
|
||||
padding: 0.3em 0 0.6em;
|
||||
}
|
||||
|
||||
#disable-all-wrapper .main-controls {
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#disable-all-wrapper .main-controls label {
|
||||
font-size: 12px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
#no-styles {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -39,12 +129,6 @@ input[type=checkbox] {
|
|||
display: inline;
|
||||
}
|
||||
|
||||
.style-name {
|
||||
cursor: default;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
transition: color .5s;
|
||||
|
|
@ -55,16 +139,8 @@ a:hover {
|
|||
color: #666;
|
||||
}
|
||||
|
||||
.left-gutter {
|
||||
display: table-cell;
|
||||
width: 16px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.left-gutter input {
|
||||
margin-bottom: 1px;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
.actions > .main-controls {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.main-controls {
|
||||
|
|
@ -108,10 +184,46 @@ body.blocked > DIV {
|
|||
.entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0.75em;
|
||||
height: 26px;
|
||||
padding: 0 14px 0 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
html[style] .entry {
|
||||
padding: 0 16px 0 0;
|
||||
}
|
||||
|
||||
html[style] .entry:nth-child(-n+10):before,
|
||||
html[style] .entry:nth-child(10):before {
|
||||
right: 7px;
|
||||
}
|
||||
|
||||
.entry .actions {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.style-name {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
line-height: 28px;
|
||||
cursor: default;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-left: 26px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.entry .main-controls {
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.entry:nth-child(even) {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
|
@ -140,20 +252,6 @@ body.blocked > DIV {
|
|||
padding: 0 1px 0;
|
||||
}
|
||||
|
||||
.entry .main-controls {
|
||||
display: flex;
|
||||
width: calc(100% - 20px);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.entry .main-controls label {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.not-applied .checker,
|
||||
.not-applied .style-name,
|
||||
.not-applied .actions > * {
|
||||
|
|
@ -253,8 +351,7 @@ body > .actions {
|
|||
}
|
||||
|
||||
body.blocked #installed > *,
|
||||
body.blocked .actions > .main-controls,
|
||||
body.blocked .actions > .left-gutter {
|
||||
body.blocked .actions > .main-controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user