Skip to content

Commit edd91ee

Browse files
zombieFoxzombieFox
authored
[refactor] improve state structure
1 parent 5fd7341 commit edd91ee

File tree

10 files changed

+132
-122
lines changed

10 files changed

+132
-122
lines changed

‎src/css/base.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ body{
2121
transition: background-color var(--layout-transition-speed-fast) ease-in-out;
2222
}
2323

24-
.is-layout-scroll-past-endbody{
24+
.is-layout-scrollpastendbody{
2525
margin-bottom:40vh;
2626
}
2727

‎src/css/header.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@
2727
left:0;
2828
}
2929

30-
.is-layout-order-headerLink.is-link-show .header{
30+
.is-layout-order-headerlink.is-link-show .header{
3131
top:0;
3232
}
3333

34-
.is-layout-order-linkHeader.is-link-show .header{
34+
.is-layout-order-linkheader.is-link-show .header{
3535
bottom:0;
3636
}
3737

@@ -185,7 +185,7 @@
185185
.is-header-search-show .header-search,
186186
.is-header-date-show .header-date,
187187
.is-header-clock-show .header-clock,
188-
.is-header-button-edit-add-show .header-edit-add,
188+
.is-header-button-editadd-show .header-edit-add,
189189
.is-header-button-accent-show .header-accent,
190190
.is-header-greeting-show .header-greeting,
191191
.is-header-transitional-show .header-transitional,

‎src/css/layout.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,6 @@
33
width:var(--layout-width);
44
}
55

6-
.is-layout-scroll-past-endbody{
7-
margin-bottom:40vh;
8-
}
9-
106
.is-layout-alignment-horizontal-leftbody{
117
align-items: flex-start;
128
}

‎src/css/link.css‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -33,21 +33,21 @@
3333
grid-template-columns:repeat(auto-fill,minmax(var(--link-item-width),1fr));
3434
}
3535

36-
.is-layout-order-headerLink .link-area{
36+
.is-layout-order-headerlink .link-area{
3737
padding-bottom:calc(var(--layout-gutter) *var(--layout-padding-multiplier));
3838
}
3939

40-
.is-layout-order-headerLink.is-header-border-bottom .link-area,
41-
.is-layout-order-headerLink.is-header-shade-style-always .link-area{
40+
.is-layout-order-headerlink.is-header-border-bottom .link-area,
41+
.is-layout-order-headerlink.is-header-shade-style-always .link-area{
4242
padding-top:calc(var(--layout-gutter) *var(--layout-padding-multiplier));
4343
}
4444

45-
.is-layout-order-linkHeader .link-area{
45+
.is-layout-order-linkheader .link-area{
4646
padding-top:calc(var(--layout-gutter) *var(--layout-padding-multiplier));
4747
}
4848

49-
.is-layout-order-linkHeader.is-header-border-top .link-area,
50-
.is-layout-order-linkHeader.is-header-shade-style-always .link-area{
49+
.is-layout-order-linkheader.is-header-border-top .link-area,
50+
.is-layout-order-linkheader.is-header-shade-style-always .link-area{
5151
padding-bottom:calc(var(--layout-gutter) *var(--layout-padding-multiplier));
5252
}
5353

@@ -105,7 +105,7 @@
105105
transition: background-color var(--layout-transition-speed-fast) ease-in-out, height var(--layout-transition-speed-fast) ease-in-out, box-shadow var(--layout-transition-speed-fast) ease-in-out;
106106
}
107107

108-
.is-link-item-line .link-panel-front{
108+
.is-link-item-line-show .link-panel-front{
109109
height:calc(100%-var(--layout-line-width));
110110
}
111111

@@ -247,14 +247,14 @@
247247
transition: height var(--layout-transition-speed-fast) ease-in-out, top var(--layout-transition-speed-fast) ease-in-out;
248248
}
249249

250-
.is-link-item-line .link-panel-back{
250+
.is-link-item-line-show .link-panel-back{
251251
height:calc(100%-var(--layout-line-width));
252252
}
253253

254254
.is-link-edit .link-panel-back,
255-
.is-link-url-show:not(.is-link-item-line) .link-item:focus .link-panel-back,
256-
.is-link-url-show:not(.is-link-item-line) .link-item:focus-within .link-panel-back,
257-
.is-link-url-show:not(.is-link-item-line) .link-item:hover .link-panel-back{
255+
.is-link-url-show:not(.is-link-item-line-show) .link-item:focus .link-panel-back,
256+
.is-link-url-show:not(.is-link-item-line-show) .link-item:focus-within .link-panel-back,
257+
.is-link-url-show:not(.is-link-item-line-show) .link-item:hover .link-panel-back{
258258
height:100%;
259259
top:0;
260260
clip-path:polygon(0var(--layout-line-width),100%var(--layout-line-width),100%100%,0100%);

‎src/index.html‎

Lines changed: 58 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -184,12 +184,12 @@ <h1 class="menu-item-header-text">Area order</h1>
184184
</div>
185185
<divclass="menu-item-form">
186186
<divclass="input-wrap">
187-
<inputid="control-layout-order-headerLink" class="control-layout-order-headerLink" type="radio" name="control-layout-order" value="headerLink" tabindex="1">
188-
<labelfor="control-layout-order-headerLink">Header then Bookmarks</label>
187+
<inputid="control-layout-order-headerlink" class="control-layout-order-headerlink" type="radio" name="control-layout-order" value="headerlink" tabindex="1">
188+
<labelfor="control-layout-order-headerlink">Header then Bookmarks</label>
189189
</div>
190190
<divclass="input-wrap">
191-
<inputid="control-layout-order-linkHeader" class="control-layout-order-linkHeader" type="radio" name="control-layout-order" value="linkHeader" tabindex="1">
192-
<labelfor="control-layout-order-linkHeader">Bookmarks then Header</label>
191+
<inputid="control-layout-order-linkheader" class="control-layout-order-linkheader" type="radio" name="control-layout-order" value="linkheader" tabindex="1">
192+
<labelfor="control-layout-order-linkheader">Bookmarks then Header</label>
193193
<pclass="input-helper small muted">Only available when Bookmarks are shown.</p>
194194
</div>
195195
</div>
@@ -227,8 +227,8 @@ <h1 class="menu-item-header-text">Page</h1>
227227
</div>
228228
<hr>
229229
<divclass="input-wrap">
230-
<inputid="control-layout-scroll-past-end" class="control-layout-scroll-past-end" type="checkbox" tabindex="1">
231-
<labelfor="control-layout-scroll-past-end">Scroll past end</label>
230+
<inputid="control-layout-scrollpastend" class="control-layout-scrollpastend" type="checkbox" tabindex="1">
231+
<labelfor="control-layout-scrollpastend">Scroll past end</label>
232232
</div>
233233
</div>
234234
</div>
@@ -618,7 +618,7 @@ <h1 class="menu-item-header-text">Search</h1>
618618
<divclass="input-wrap">
619619
<inputid="control-header-search-engine-bing" class="control-header-search-engine-bing" type="radio" name="control-header-search-engine" value="bing" tabindex="1">
620620
<labelfor="control-header-search-engine-bing">Bing</label>
621-
</div>
621+
</div>
622622
<divclass="input-wrap">
623623
<inputid="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" name="control-header-search-engine" value="custom" tabindex="1">
624624
<labelfor="control-header-search-engine-custom">Custom</label>
@@ -681,8 +681,8 @@ <h1 class="menu-item-header-text">Buttons</h1>
681681
</div>
682682
<hr>
683683
<divclass="input-wrap">
684-
<inputid="control-header-button-edit-add-show" class="control-header-button-edit-add-show" type="checkbox" tabindex="1">
685-
<labelfor="control-header-button-edit-add-show">Show Edit/Add</label>
684+
<inputid="control-header-button-editadd-show" class="control-header-button-editadd-show" type="checkbox" tabindex="1">
685+
<labelfor="control-header-button-editadd-show">Show Edit/Add</label>
686686
</div>
687687
<hr>
688688
<divclass="input-wrap">
@@ -803,6 +803,48 @@ <h1 class="menu-item-header-text">Bookmarks</h1>
803803
<buttonclass="control-link-item-size-default button mb-0" tabindex="1">Default tile size</button>
804804
</div>
805805
<hr>
806+
<labelclass="control-link-item-display-alignment-label">Content Alignment</label>
807+
<divclass="form-grid-wrap">
808+
<divclass="form-grid form-grid-3x3 form-grid-square control-link-item-display-alignment-grid" tabindex="-1">
809+
<divclass="input-wrap">
810+
<inputid="control-link-item-display-alignment-topleft" class="control-link-item-display-alignment-topleft" type="radio" name="control-link-item-display-alignment" value="topleft" tabindex="1">
811+
<labelfor="control-link-item-display-alignment-topleft"><spanclass="sr-only">Top left</span></label>
812+
</div>
813+
<divclass="input-wrap">
814+
<inputid="control-link-item-display-alignment-topcenter" class="control-link-item-display-alignment-topcenter" type="radio" name="control-link-item-display-alignment" value="topcenter" tabindex="1">
815+
<labelfor="control-link-item-display-alignment-topcenter"><spanclass="sr-only">Top center</span></label>
816+
</div>
817+
<divclass="input-wrap">
818+
<inputid="control-link-item-display-alignment-topright" class="control-link-item-display-alignment-topright" type="radio" name="control-link-item-display-alignment" value="topright" tabindex="1">
819+
<labelfor="control-link-item-display-alignment-topright"><spanclass="sr-only">Top right</span></label>
820+
</div>
821+
<divclass="input-wrap">
822+
<inputid="control-link-item-display-alignment-centerleft" class="control-link-item-display-alignment-centerleft" type="radio" name="control-link-item-display-alignment" value="centerleft" tabindex="1">
823+
<labelfor="control-link-item-display-alignment-centerleft"><spanclass="sr-only">Center left</span></label>
824+
</div>
825+
<divclass="input-wrap">
826+
<inputid="control-link-item-display-alignment-centercenter" class="control-link-item-display-alignment-centercenter" type="radio" name="control-link-item-display-alignment" value="centercenter" tabindex="1">
827+
<labelfor="control-link-item-display-alignment-centercenter"><spanclass="sr-only">Center center</span></label>
828+
</div>
829+
<divclass="input-wrap">
830+
<inputid="control-link-item-display-alignment-centerright" class="control-link-item-display-alignment-centerright" type="radio" name="control-link-item-display-alignment" value="centerright" tabindex="1">
831+
<labelfor="control-link-item-display-alignment-centerright"><spanclass="sr-only">Center right</span></label>
832+
</div>
833+
<divclass="input-wrap">
834+
<inputid="control-link-item-display-alignment-bottomleft" class="control-link-item-display-alignment-bottomleft" type="radio" name="control-link-item-display-alignment" value="bottomleft" tabindex="1">
835+
<labelfor="control-link-item-display-alignment-bottomleft"><spanclass="sr-only">Bottom left</span></label>
836+
</div>
837+
<divclass="input-wrap">
838+
<inputid="control-link-item-display-alignment-bottomcenter" class="control-link-item-display-alignment-bottomcenter" type="radio" name="control-link-item-display-alignment" value="bottomcenter" tabindex="1">
839+
<labelfor="control-link-item-display-alignment-bottomcenter"><spanclass="sr-only">Bottom Center</span></label>
840+
</div>
841+
<divclass="input-wrap">
842+
<inputid="control-link-item-display-alignment-bottomright" class="control-link-item-display-alignment-bottomright" type="radio" name="control-link-item-display-alignment" value="bottomright" tabindex="1">
843+
<labelfor="control-link-item-display-alignment-bottomright"><spanclass="sr-only">Bottom right</span></label>
844+
</div>
845+
</div>
846+
</div>
847+
<hr>
806848
<divclass="input-wrap">
807849
<inputid="control-link-item-display-show" class="control-link-item-display-show" type="checkbox" tabindex="1">
808850
<labelfor="control-link-item-display-show">Letter/Icon</label>
@@ -841,74 +883,26 @@ <h1 class="menu-item-header-text">Bookmarks</h1>
841883
<hr>
842884
<divclass="input-wrap">
843885
<inputid="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="1">
844-
<labelfor="control-link-item-url-show">URL on hover</label>
886+
<labelfor="control-link-item-url-show">URL on tile hover</label>
845887
</div>
846888
<hr>
847889
<divclass="input-wrap">
848-
<inputid="control-link-item-line" class="control-link-item-line" type="checkbox" tabindex="1">
849-
<labelfor="control-link-item-line">Tile line</label>
890+
<inputid="control-link-item-line-show" class="control-link-item-line-show" type="checkbox" tabindex="1">
891+
<labelfor="control-link-item-line-show">Tile line</label>
850892
</div>
851893
<hr>
852894
<divclass="input-wrap">
853895
<inputid="control-link-item-hover-scale" class="control-link-item-hover-scale" type="checkbox" tabindex="1">
854-
<labelfor="control-link-item-hover-scale">Grow on hover</label>
896+
<labelfor="control-link-item-hover-scale">Grow tile on hover</label>
855897
</div>
856898
<hr>
857-
<labelclass="control-link-item-display-alignment-label">Content Alignment</label>
858-
<divclass="form-grid-wrap">
859-
<divclass="form-grid form-grid-3x3 form-grid-square control-link-item-display-alignment-grid" tabindex="-1">
860-
<divclass="input-wrap">
861-
<inputid="control-link-item-display-alignment-topleft" class="control-link-item-display-alignment-topleft" type="radio" name="control-link-item-display-alignment" value="topleft" tabindex="1">
862-
<labelfor="control-link-item-display-alignment-topleft"><spanclass="sr-only">Top left</span></label>
863-
</div>
864-
<divclass="input-wrap">
865-
<inputid="control-link-item-display-alignment-topcenter" class="control-link-item-display-alignment-topcenter" type="radio" name="control-link-item-display-alignment" value="topcenter" tabindex="1">
866-
<labelfor="control-link-item-display-alignment-topcenter"><spanclass="sr-only">Top center</span></label>
867-
</div>
868-
<divclass="input-wrap">
869-
<inputid="control-link-item-display-alignment-topright" class="control-link-item-display-alignment-topright" type="radio" name="control-link-item-display-alignment" value="topright" tabindex="1">
870-
<labelfor="control-link-item-display-alignment-topright"><spanclass="sr-only">Top right</span></label>
871-
</div>
872-
<divclass="input-wrap">
873-
<inputid="control-link-item-display-alignment-centerleft" class="control-link-item-display-alignment-centerleft" type="radio" name="control-link-item-display-alignment" value="centerleft" tabindex="1">
874-
<labelfor="control-link-item-display-alignment-centerleft"><spanclass="sr-only">Center left</span></label>
875-
</div>
876-
<divclass="input-wrap">
877-
<inputid="control-link-item-display-alignment-centercenter" class="control-link-item-display-alignment-centercenter" type="radio" name="control-link-item-display-alignment" value="centercenter" tabindex="1">
878-
<labelfor="control-link-item-display-alignment-centercenter"><spanclass="sr-only">Center center</span></label>
879-
</div>
880-
<divclass="input-wrap">
881-
<inputid="control-link-item-display-alignment-centerright" class="control-link-item-display-alignment-centerright" type="radio" name="control-link-item-display-alignment" value="centerright" tabindex="1">
882-
<labelfor="control-link-item-display-alignment-centerright"><spanclass="sr-only">Center right</span></label>
883-
</div>
884-
<divclass="input-wrap">
885-
<inputid="control-link-item-display-alignment-bottomleft" class="control-link-item-display-alignment-bottomleft" type="radio" name="control-link-item-display-alignment" value="bottomleft" tabindex="1">
886-
<labelfor="control-link-item-display-alignment-bottomleft"><spanclass="sr-only">Bottom left</span></label>
887-
</div>
888-
<divclass="input-wrap">
889-
<inputid="control-link-item-display-alignment-bottomcenter" class="control-link-item-display-alignment-bottomcenter" type="radio" name="control-link-item-display-alignment" value="bottomcenter" tabindex="1">
890-
<labelfor="control-link-item-display-alignment-bottomcenter"><spanclass="sr-only">Bottom Center</span></label>
891-
</div>
892-
<divclass="input-wrap">
893-
<inputid="control-link-item-display-alignment-bottomright" class="control-link-item-display-alignment-bottomright" type="radio" name="control-link-item-display-alignment" value="bottomright" tabindex="1">
894-
<labelfor="control-link-item-display-alignment-bottomright"><spanclass="sr-only">Bottom right</span></label>
895-
</div>
896-
</div>
899+
<divclass="input-wrap">
900+
<inputid="control-link-newtab" class="control-link-newtab" type="checkbox" tabindex="1">
901+
<labelfor="control-link-newtab">Open Bookmarks in a new tab</label>
897902
</div>
898903
</div>
899904
</div>
900905
</div>
901-
<divclass="menu-item">
902-
<divclass="menu-item-header">
903-
<h1class="menu-item-header-text">Open</h1>
904-
</div>
905-
<divclass="menu-item-form">
906-
<divclass="input-wrap">
907-
<inputid="control-link-new-tab" class="control-link-new-tab" type="checkbox" tabindex="1">
908-
<labelfor="control-link-new-tab">In a new tab</label>
909-
</div>
910-
</div>
911-
</div>
912906
<divclass="menu-item">
913907
<divclass="menu-item-header">
914908
<h1class="menu-item-header-text">Style</h1>

0 commit comments

Comments
(0)