simon/diy-startpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reworked bookmark listing menu dropdowns to reduce clicks + add clarity

Browse Source
This commit is contained in:
Simon
2025-07-26 15:29:26 -04:00
parent 02a1abd464
commit e6988f028e
1 changed files with 171 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
startpage.html
+65 -74
View File
@@ -902,7 +902,7 @@
<div class="expandableMenu" id=${this.id + "-settings-menu"} style="display: block; margin: 0;">
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>${this.name}: bookmarks</p>
<p>bookmarks</p>
<p class="expandedMenuIndicator">+</p>
</div>
<div class="expandableMenu" id=${this.id + "-bookmark-menu"} >
@@ -952,13 +952,74 @@
</div>
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>${this.name}: customize</p>
<p>color + shape options</p>
<p class="expandedMenuIndicator">+</p>
</div>
<div class="expandableMenu">
<p class="menuHeader">background color</p>
<div class="containerOptionListing">
<label for=${this.id + "-settings-bg-color"}>set background color: </label>
<input id=${this.id + "-settings-bg-color"} type="color" />
</div>
<div class="containerOptionListing">
<label for=${this.id + "-settings-bg-alpha"}>set background opacity (%): </label>
<input id=${this.id + "-settings-bg-alpha"} type="range" min="0" max="100" />
</div>
<p class="menuHeader">layer shape</p>
<div class="containerOptionListing">
<label for=${this.id + "-settings-border-radius"}>roundness: </label>
<input id=${this.id + "-settings-border-radius"} type="range" max="175" />
</div>
<p class="menuHeader">border</p>
<div class="containerOptionListing">
<label for=${this.id + "-settings-border-color"}>set border color: </label>
<input id=${this.id + "-settings-border-color"} type="color" />
</div>
<div class="containerOptionListing">
<label for=${this.id + "-settings-border-width"}>set border width: </label>
<input id=${this.id + "-settings-border-width"} type="range" min="0" max="100" />
</div>
<p class="menuHeader">shadow / glow</p>
<div class="containerOptionListing">
<label for=${this.id + "-settings-shadow-color"}>shadow color: </label>
<input id=${this.id + "-settings-shadow-color"} type="color" />
</div>
<div class="containerOptionListing">
<label>shadow opacity:</label>
<input id=${this.id + "-settings-shadow-alpha"} type="range" min="0" max="100" />
</div>
<br />
<div class="containerOptionListing">
<label for=${this.id + "-settings-shadow-x"}>shift shadow left/right: </label>
<input id=${this.id + "-settings-shadow-x"} type="range" min="-1000" max="1000" />
</div>
<div class="containerOptionListing">
<label for=${this.id + "-settings-shadow-y"}>shift shadow up/down: </label>
<input id=${this.id + "-settings-shadow-y"} type="range" min="-1000" max="1000" />
</div>
<br />
<div class="containerOptionListing">
<label for=${this.id + "-settings-shadow-blur"}>shadow sharpness/fuzziness: </label>
<input id=${this.id + "-settings-shadow-blur"} type="range" min="0" max="200" />
</div>
</div>
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>header options</p>
<p>header text options</p>
<p class="expandedMenuIndicator">+</p>
</div>
<div class="expandableMenu">
@@ -1011,7 +1072,7 @@
</div>
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>text options</p>
<p>general text options</p>
<p class="expandedMenuIndicator">+</p>
</div>
<div class="expandableMenu">
@@ -1086,76 +1147,6 @@
</div>
</div>
</div>
<div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
<p>color + shape options</p>
<p class="expandedMenuIndicator">+</p>
</div>
<div class="expandableMenu">
<p class="menuHeader">background color</p>
<div class="containerOptionListing">
<label for=${this.id + "-settings-bg-color"}>set background color: </label>
<input id=${this.id + "-settings-bg-color"} type="color" />
</div>
<div class="containerOptionListing">
<label for=${this.id + "-settings-bg-alpha"}>set background opacity (%): </label>
<input id=${this.id + "-settings-bg-alpha"} type="range" min="0" max="100" />
</div>
<p class="menuHeader">layer shape</p>
<div class="containerOptionListing">
<label for=${this.id + "-settings-border-radius"}>roundness: </label>
<input id=${this.id + "-settings-border-radius"} type="range" max="175" />
</div>
<p class="menuHeader">border</p>
<div class="containerOptionListing">
<label for=${this.id + "-settings-border-color"}>set border color: </label>
<input id=${this.id + "-settings-border-color"} type="color" />
</div>
<div class="containerOptionListing">
<label for=${this.id + "-settings-border-width"}>set border width: </label>
<input id=${this.id + "-settings-border-width"} type="range" min="0" max="100" />
</div>
<p class="menuHeader">shadow / glow</p>
<div class="containerOptionListing">
<label for=${this.id + "-settings-shadow-color"}>shadow color: </label>
<input id=${this.id + "-settings-shadow-color"} type="color" />
</div>
<div class="containerOptionListing">
<label>shadow opacity:</label>
<input id=${this.id + "-settings-shadow-alpha"} type="range" min="0" max="100" />
</div>
<br />
<div class="containerOptionListing">
<label for=${this.id + "-settings-shadow-x"}>shift shadow left/right: </label>
<input id=${this.id + "-settings-shadow-x"} type="range" min="-1000" max="1000" />
</div>
<div class="containerOptionListing">
<label for=${this.id + "-settings-shadow-y"}>shift shadow up/down: </label>
<input id=${this.id + "-settings-shadow-y"} type="range" min="-1000" max="1000" />
</div>
<br />
<div class="containerOptionListing">
<label for=${this.id + "-settings-shadow-blur"}>shadow sharpness/fuzziness: </label>
<input id=${this.id + "-settings-shadow-blur"} type="range" min="0" max="200" />
</div>
</div>
</div>
</div>
<div class="manageButtons">