Lokasi ngalangkungan proxy:   [ UP ]  
[Ngawartoskeun bug]   [Panyetelan cookie]                
Skip to content

Commit edd91ee

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

10 files changed

Lines changed: 132 additions & 122 deletions

File tree

‎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-end body {
24+
.is-layout-scrollpastend body {
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-end body {
7-
margin-bottom: 40vh;
8-
}
9-
106
.is-layout-alignment-horizontal-left body {
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(0 var(--layout-line-width), 100% var(--layout-line-width), 100% 100%, 0 100%);

‎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
<div class="menu-item-form">
186186
<div class="input-wrap">
187-
<input id="control-layout-order-headerLink" class="control-layout-order-headerLink" type="radio" name="control-layout-order" value="headerLink" tabindex="1">
188-
<label for="control-layout-order-headerLink">Header then Bookmarks</label>
187+
<input id="control-layout-order-headerlink" class="control-layout-order-headerlink" type="radio" name="control-layout-order" value="headerlink" tabindex="1">
188+
<label for="control-layout-order-headerlink">Header then Bookmarks</label>
189189
</div>
190190
<div class="input-wrap">
191-
<input id="control-layout-order-linkHeader" class="control-layout-order-linkHeader" type="radio" name="control-layout-order" value="linkHeader" tabindex="1">
192-
<label for="control-layout-order-linkHeader">Bookmarks then Header</label>
191+
<input id="control-layout-order-linkheader" class="control-layout-order-linkheader" type="radio" name="control-layout-order" value="linkheader" tabindex="1">
192+
<label for="control-layout-order-linkheader">Bookmarks then Header</label>
193193
<p class="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
<div class="input-wrap">
230-
<input id="control-layout-scroll-past-end" class="control-layout-scroll-past-end" type="checkbox" tabindex="1">
231-
<label for="control-layout-scroll-past-end">Scroll past end</label>
230+
<input id="control-layout-scrollpastend" class="control-layout-scrollpastend" type="checkbox" tabindex="1">
231+
<label for="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
<div class="input-wrap">
619619
<input id="control-header-search-engine-bing" class="control-header-search-engine-bing" type="radio" name="control-header-search-engine" value="bing" tabindex="1">
620620
<label for="control-header-search-engine-bing">Bing</label>
621-
</div>
621+
</div>
622622
<div class="input-wrap">
623623
<input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" name="control-header-search-engine" value="custom" tabindex="1">
624624
<label for="control-header-search-engine-custom">Custom</label>
@@ -681,8 +681,8 @@ <h1 class="menu-item-header-text">Buttons</h1>
681681
</div>
682682
<hr>
683683
<div class="input-wrap">
684-
<input id="control-header-button-edit-add-show" class="control-header-button-edit-add-show" type="checkbox" tabindex="1">
685-
<label for="control-header-button-edit-add-show">Show Edit/Add</label>
684+
<input id="control-header-button-editadd-show" class="control-header-button-editadd-show" type="checkbox" tabindex="1">
685+
<label for="control-header-button-editadd-show">Show Edit/Add</label>
686686
</div>
687687
<hr>
688688
<div class="input-wrap">
@@ -803,6 +803,48 @@ <h1 class="menu-item-header-text">Bookmarks</h1>
803803
<button class="control-link-item-size-default button mb-0" tabindex="1">Default tile size</button>
804804
</div>
805805
<hr>
806+
<label class="control-link-item-display-alignment-label">Content Alignment</label>
807+
<div class="form-grid-wrap">
808+
<div class="form-grid form-grid-3x3 form-grid-square control-link-item-display-alignment-grid" tabindex="-1">
809+
<div class="input-wrap">
810+
<input id="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+
<label for="control-link-item-display-alignment-topleft"><span class="sr-only">Top left</span></label>
812+
</div>
813+
<div class="input-wrap">
814+
<input id="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+
<label for="control-link-item-display-alignment-topcenter"><span class="sr-only">Top center</span></label>
816+
</div>
817+
<div class="input-wrap">
818+
<input id="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+
<label for="control-link-item-display-alignment-topright"><span class="sr-only">Top right</span></label>
820+
</div>
821+
<div class="input-wrap">
822+
<input id="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+
<label for="control-link-item-display-alignment-centerleft"><span class="sr-only">Center left</span></label>
824+
</div>
825+
<div class="input-wrap">
826+
<input id="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+
<label for="control-link-item-display-alignment-centercenter"><span class="sr-only">Center center</span></label>
828+
</div>
829+
<div class="input-wrap">
830+
<input id="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+
<label for="control-link-item-display-alignment-centerright"><span class="sr-only">Center right</span></label>
832+
</div>
833+
<div class="input-wrap">
834+
<input id="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+
<label for="control-link-item-display-alignment-bottomleft"><span class="sr-only">Bottom left</span></label>
836+
</div>
837+
<div class="input-wrap">
838+
<input id="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+
<label for="control-link-item-display-alignment-bottomcenter"><span class="sr-only">Bottom Center</span></label>
840+
</div>
841+
<div class="input-wrap">
842+
<input id="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+
<label for="control-link-item-display-alignment-bottomright"><span class="sr-only">Bottom right</span></label>
844+
</div>
845+
</div>
846+
</div>
847+
<hr>
806848
<div class="input-wrap">
807849
<input id="control-link-item-display-show" class="control-link-item-display-show" type="checkbox" tabindex="1">
808850
<label for="control-link-item-display-show">Letter/Icon</label>
@@ -841,74 +883,26 @@ <h1 class="menu-item-header-text">Bookmarks</h1>
841883
<hr>
842884
<div class="input-wrap">
843885
<input id="control-link-item-url-show" class="control-link-item-url-show" type="checkbox" tabindex="1">
844-
<label for="control-link-item-url-show">URL on hover</label>
886+
<label for="control-link-item-url-show">URL on tile hover</label>
845887
</div>
846888
<hr>
847889
<div class="input-wrap">
848-
<input id="control-link-item-line" class="control-link-item-line" type="checkbox" tabindex="1">
849-
<label for="control-link-item-line">Tile line</label>
890+
<input id="control-link-item-line-show" class="control-link-item-line-show" type="checkbox" tabindex="1">
891+
<label for="control-link-item-line-show">Tile line</label>
850892
</div>
851893
<hr>
852894
<div class="input-wrap">
853895
<input id="control-link-item-hover-scale" class="control-link-item-hover-scale" type="checkbox" tabindex="1">
854-
<label for="control-link-item-hover-scale">Grow on hover</label>
896+
<label for="control-link-item-hover-scale">Grow tile on hover</label>
855897
</div>
856898
<hr>
857-
<label class="control-link-item-display-alignment-label">Content Alignment</label>
858-
<div class="form-grid-wrap">
859-
<div class="form-grid form-grid-3x3 form-grid-square control-link-item-display-alignment-grid" tabindex="-1">
860-
<div class="input-wrap">
861-
<input id="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-
<label for="control-link-item-display-alignment-topleft"><span class="sr-only">Top left</span></label>
863-
</div>
864-
<div class="input-wrap">
865-
<input id="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-
<label for="control-link-item-display-alignment-topcenter"><span class="sr-only">Top center</span></label>
867-
</div>
868-
<div class="input-wrap">
869-
<input id="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-
<label for="control-link-item-display-alignment-topright"><span class="sr-only">Top right</span></label>
871-
</div>
872-
<div class="input-wrap">
873-
<input id="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-
<label for="control-link-item-display-alignment-centerleft"><span class="sr-only">Center left</span></label>
875-
</div>
876-
<div class="input-wrap">
877-
<input id="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-
<label for="control-link-item-display-alignment-centercenter"><span class="sr-only">Center center</span></label>
879-
</div>
880-
<div class="input-wrap">
881-
<input id="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-
<label for="control-link-item-display-alignment-centerright"><span class="sr-only">Center right</span></label>
883-
</div>
884-
<div class="input-wrap">
885-
<input id="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-
<label for="control-link-item-display-alignment-bottomleft"><span class="sr-only">Bottom left</span></label>
887-
</div>
888-
<div class="input-wrap">
889-
<input id="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-
<label for="control-link-item-display-alignment-bottomcenter"><span class="sr-only">Bottom Center</span></label>
891-
</div>
892-
<div class="input-wrap">
893-
<input id="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-
<label for="control-link-item-display-alignment-bottomright"><span class="sr-only">Bottom right</span></label>
895-
</div>
896-
</div>
899+
<div class="input-wrap">
900+
<input id="control-link-newtab" class="control-link-newtab" type="checkbox" tabindex="1">
901+
<label for="control-link-newtab">Open Bookmarks in a new tab</label>
897902
</div>
898903
</div>
899904
</div>
900905
</div>
901-
<div class="menu-item">
902-
<div class="menu-item-header">
903-
<h1 class="menu-item-header-text">Open</h1>
904-
</div>
905-
<div class="menu-item-form">
906-
<div class="input-wrap">
907-
<input id="control-link-new-tab" class="control-link-new-tab" type="checkbox" tabindex="1">
908-
<label for="control-link-new-tab">In a new tab</label>
909-
</div>
910-
</div>
911-
</div>
912906
<div class="menu-item">
913907
<div class="menu-item-header">
914908
<h1 class="menu-item-header-text">Style</h1>

0 commit comments

Comments
 (0)