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

Another popup mockup

Browse Source 
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.
This commit is contained in:
narcolepticinsomniac 2017-12-02 02:00:31 -05:00 committed by GitHub
parent fdcdaf3db5
commit cf2c7402dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
popup.html
View File

@ -23,11 +23,10 @@
<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>
<label class="style-name">
<input class="checker" type="checkbox"></label>
</div>
<div class="actions">
<a href="#" class="enable" i18n-text="enableStyleLabel"></a>
<a href="#" class="disable" i18n-text="disableStyleLabel"></a>
@ -43,7 +42,6 @@
</a>
</div>
</div>
</div>
</template>
<template data-id="writeStyle">
@ -108,14 +106,11 @@
<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">
<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/"