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

Advanced options toggle (#238)

Browse Source 
* Advanced options toggle

Whole div is clickable. Arrows to indicate functions. I went with carets and centered collapsed text, but we can use different arrow and/or keep the text to the left.

* advanced options toggle

* advanced options toggle

* Only apply to Chrome

* Delete options.css

* Delete options.js

* Only apply to Chrome

* Only apply to Chrome

* Fix label

* Fix label again
This commit is contained in:
narcolepticinsomniac 2017-11-14 22:25:30 -05:00 committed by GitHub
parent b9f6095db5
commit 24c513929e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 86 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
options.html
View File

@ -113,8 +113,17 @@
</div>
</div>
<div class="block collapsible" id="advanced">
<h1 i18n-text="optionsAdvanced"></h1>
<div class="block" id="advanced">
<div class="collapsible-resizer">
<h1 i18n-text="optionsAdvanced">
<svg class="svg-icon is-collapsed" viewBox="0 0 1792 1792">
<path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
</svg>
<svg class="svg-icon is-expanded" viewBox="0 0 1792 1792">
<path fill-rule="evenodd" d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
</svg>
</h1>
</div>
<div class="items">
<label>
<span i18n-text="optionsAdvancedNewStyleAsUsercss"></span>

74
options/options.css
View File

@ -180,6 +180,80 @@ input[type="color"] {
display: none;
}
#advanced.collapsible.collapsed {
height: 40px;
padding: 0;
margin: 0;
justify-content: center;
}
html:not(.firefox):not(.opera) #options > .block:nth-last-of-type(3) {
margin-bottom: 0;
}
#advanced.collapsible:not(.collapsed) .collapsible-resizer, #advanced:not(.collapsible) .collapsible-resizer {
padding-right: 8px;
box-sizing: border-box;
width: 30%;
}
#advanced.collapsible h1 {
width: unset;
padding: 0;
color: #333;
transition: color .5s;
display: inline-flex;
align-items: center;
}
#advanced:not(.collapsible) .collapsible-resizer h1 {
width: unset;
padding: 0;
display: inline-flex;
}
#advanced.collapsible:not(.collapsed) h1:hover {
color: #666;
}
#advanced.collapsible.collapsed h1 {
padding: 0;
color: #666;
}
#advanced.collapsible.collapsed:hover h1 {
color: #333;
}
#advanced.collapsible .svg-icon {
fill: #333;
transition: fill .5s;
height: 16px;
width: 16px;
}
#advanced.collapsible.collapsed .svg-icon,
#advanced.collapsible:not(.collapsed) h1:hover .svg-icon {
fill: #666;
}
#advanced.collapsible.collapsed:hover .svg-icon {
fill: #333;
}
#advanced.collapsible h1 .svg-icon {
margin-left: 2px;
}
#advanced.collapsible.collapsed .is-expanded,
#advanced:not(.collapsible) .svg-icon {
display: none;
}
#advanced.collapsible:not(.collapsed) .is-collapsed {
display: none;
}
#notes {
background-color: #f4f4f4;
padding: 1.5ex 16px 1ex calc(16px + 2ex);

2
options/options.js
View File

@ -6,7 +6,7 @@ enforceInputRange($('#popupWidth'));
if (!FIREFOX && !OPERA) {
const block = $('#advanced');
block.classList.add('collapsed');
block.classList.add('collapsible', 'collapsed');
block.onclick = event => {
if (block.classList.contains('collapsed') || event.target.closest('h1')) {
block.classList.toggle('collapsed');