Skip to content

Commit d543781

Browse files
zombieFoxzombieFox
committed
[feature] add auto change accent hue control
1 parent 9a80b26 commit d543781

File tree

11 files changed

+293
-87
lines changed

11 files changed

+293
-87
lines changed

‎src/css/link.css‎

Lines changed: 30 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -639,13 +639,21 @@
639639
transition: color var(--layout-timing-extra-fast);
640640
}
641641

642+
.is-theme-accent-cycle .link-display-letter{
643+
transition: none;
644+
}
645+
642646
.link-display-icon{
643647
font-weight:400;
644648
font-style: normal;
645649
color:rgb(var(--theme-accent));
646650
transition: color var(--layout-timing-extra-fast);
647651
}
648652

653+
.is-theme-accent-cycle .link-display-icon{
654+
transition: none;
655+
}
656+
649657
.is-link-style-block .link-display-letter,
650658
.is-link-style-list .link-display-letter{
651659
font-size:var(--link-item-display-letter-size);
@@ -833,22 +841,32 @@
833841
flex-basis:30%;
834842
}
835843

836-
.link-text-dark .link-control-item{
837-
color:rgb(var(--theme-black));
844+
.link-control-item{
845+
color:rgb(var(--theme-accent-text));
838846
}
839847

840-
.link-text-light .link-control-item{
841-
color:rgb(var(--theme-white));
848+
.link-control-item:focus,
849+
.link-control-item:hover{
850+
color:rgb(var(--theme-accent-text));
851+
background-color:rgba(0,0,0,0.2);
842852
}
843853

844-
.link-text-dark .link-control-item.disabled,
845-
.link-text-dark .link-control-item:disabled{
846-
color:rgba(var(--theme-black),0.25);
854+
.link-control-item.disabled:focus,
855+
.link-control-item.disabled:hover,
856+
.link-control-item:disabled:focus,
857+
.link-control-item:disabled:hover{
858+
color:rgba(var(--theme-accent-text),0.25);
859+
background-color: transparent;
847860
}
848861

849-
.link-text-light .link-control-item.disabled,
850-
.link-text-light .link-control-item:disabled{
851-
color:rgba(var(--theme-white),0.25);
862+
.link-control-item:active{
863+
color:rgb(var(--theme-accent-text));
864+
background-color:rgba(0,0,0,0.1);
865+
}
866+
867+
.link-control-item.disabled,
868+
.link-control-item:disabled{
869+
color:rgb(var(--theme-accent-text),0.25);
852870
}
853871

854872
.is-link-orientation-top.is-link-style-list .link-control-item:nth-child(1){
@@ -883,44 +901,6 @@
883901
border-bottom-right-radius:var(--theme-radius);
884902
}
885903

886-
.link-text-dark .link-control-item:focus,
887-
.link-text-dark .link-control-item:hover{
888-
color:rgb(var(--theme-black));
889-
background-color:rgba(0,0,0,0.2);
890-
}
891-
892-
.link-text-light .link-control-item:focus,
893-
.link-text-light .link-control-item:hover{
894-
color:rgb(var(--theme-white));
895-
background-color:rgba(255,255,255,0.2);
896-
}
897-
898-
.link-text-dark .link-control-item.disabled:focus,
899-
.link-text-dark .link-control-item.disabled:hover,
900-
.link-text-dark .link-control-item:disabled:focus,
901-
.link-text-dark .link-control-item:disabled:hover{
902-
color:rgba(var(--theme-black),0.25);
903-
background-color: transparent;
904-
}
905-
906-
.link-text-light .link-control-item.disabled:focus,
907-
.link-text-light .link-control-item.disabled:hover,
908-
.link-text-light .link-control-item:disabled:focus,
909-
.link-text-light .link-control-item:disabled:hover{
910-
color:rgba(var(--theme-white),0.25);
911-
background-color: transparent;
912-
}
913-
914-
.link-text-dark .link-control-item:active{
915-
color:rgb(var(--theme-black));
916-
background-color:rgba(0,0,0,0.1);
917-
}
918-
919-
.link-text-light .link-control-item:active{
920-
color:rgb(var(--theme-white));
921-
background-color:rgba(255,255,255,0.1);
922-
}
923-
924904
.is-link-orientation-top.is-link-style-list .link-control,
925905
.is-link-orientation-bottom.is-link-style-list .link-control{
926906
flex-wrap: nowrap;
@@ -983,12 +963,8 @@
983963
text-overflow: ellipsis;
984964
}
985965

986-
.link-text-dark .link-url-text{
987-
color:rgb(var(--theme-black));
988-
}
989-
990-
.link-text-light .link-url-text{
991-
color:rgb(var(--theme-white));
966+
.link-url-text{
967+
color:rgb(var(--theme-accent-text));
992968
}
993969

994970
.is-edit.is-link-item-url-show .link-item:focus .link-panel-front,

‎src/css/shade.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
z-index:var(--z-index-shade);
1111
}
1212

13+
.is-theme-accent-cycle .shade{
14+
transition: opacity var(--layout-timing-extra-fast);
15+
}
16+
1317
.is-edge:not(.is-background-image-show) .shade{
1418
background-color:rgba(var(--theme-accent),0.05);
1519
}

‎src/css/variables.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
/* theme */
33
--theme-root-font-size:14px;
44
--theme-accent:250,130,0;
5+
--theme-accent-text:var(--theme-black);
56
--theme-radius:0.2rem;
67
--theme-font-display-name:"Fjalla One", sans-serif;
78
--theme-font-display-weight:400;

‎src/html/menu/content/background/image.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ <h1 class="menu-item-header-text">Image</h1>
6767
</div>
6868
</div>
6969
<divclass="form-wrap">
70-
<labelfor="control-background-image-grayscale-range">Grayscale</label>
70+
<labelfor="control-background-image-grayscale-range">Greyscale</label>
7171
<divclass="form-group form-group-block">
7272
<inputid="control-background-image-grayscale-range" class="control-background-image-grayscale-range mr-3" type="range" value="0" tabindex="-1">
7373
<inputclass="control-background-image-grayscale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">

‎src/html/menu/content/theme/accent.html‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h1 class="menu-item-header-text">Accent</h1>
1212
</div>
1313
</div>
1414
<divclass="form-helper">
15-
<pclass="control-theme-style-light-helper form-helper-item">Accent Colour can also be changed from the Header Area.</p>
15+
<pclass="control-theme-accent-rgb-helper form-helper-item">Accent Colour can also be changed from the Header Area.</p>
1616
</div>
1717
<hr>
1818
<divclass="form-wrap">
@@ -46,5 +46,36 @@ <h1 class="menu-item-header-text">Accent</h1>
4646
</div>
4747
</div>
4848
</div>
49+
<hr>
50+
<divclass="form-wrap">
51+
<inputid="control-theme-accent-cycle-active" class="control-theme-accent-cycle-active" type="checkbox" tabindex="-1">
52+
<labelfor="control-theme-accent-cycle-active"><spanclass="label-icon"></span> Auto change Accent hue</label>
53+
</div>
54+
<divclass="form-wrap">
55+
<divclass="form-indent">
56+
<divclass="form-wrap">
57+
<labelfor="control-theme-accent-cycle-speed-range">Change delay</label>
58+
<divclass="form-group form-group-block">
59+
<inputid="control-theme-accent-cycle-speed-range" class="control-theme-accent-cycle-speed-range mr-3" type="range" value="0" tabindex="-1">
60+
<inputclass="control-theme-accent-cycle-speed-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
61+
<buttonclass="control-theme-accent-cycle-speed-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
62+
</div>
63+
</div>
64+
<divclass="form-wrap">
65+
<labelfor="control-theme-accent-cycle-step-range">Change steps</label>
66+
<divclass="form-group form-group-block">
67+
<inputid="control-theme-accent-cycle-step-range" class="control-theme-accent-cycle-step-range mr-3" type="range" value="0" tabindex="-1">
68+
<inputclass="control-theme-accent-cycle-step-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
69+
<buttonclass="control-theme-accent-cycle-step-default button" tabindex="-1" title="Reset to default"><spanclass="icon-replay"></span></button>
70+
</div>
71+
</div>
72+
<divclass="form-helper">
73+
<pclass="control-theme-accent-cycle-helper form-helper-item">A small delay and small step in Accent hue change may cause performance issues.</p>
74+
</div>
75+
<divclass="form-helper">
76+
<pclass="control-theme-accent-cycle-helper form-helper-item">Auto change Accent hue will not work when the Accent colour is a grey or black.</p>
77+
</div>
78+
</div>
79+
</div>
4980
</div>
5081
</div>

‎src/js/control.js‎

Lines changed: 136 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,6 @@ var control = (function(){
123123
}],
124124
func: function(){
125125
theme.render.accent.color();
126-
link.groupAndItems();
127126
}
128127
}];
129128

@@ -5416,7 +5415,6 @@ var control = (function(){
54165415
}],
54175416
func: function(){
54185417
theme.render.accent.color();
5419-
link.groupAndItems();
54205418
}
54215419
},{
54225420
element: ".control-theme-accent-rgb-text",
@@ -5434,15 +5432,13 @@ var control = (function(){
54345432
}],
54355433
func: function(){
54365434
theme.render.accent.color();
5437-
link.groupAndItems();
54385435
}
54395436
},{
54405437
element: ".control-theme-accent-rgb-default",
54415438
type: "button",
54425439
func: function(){
54435440
mod.default("theme.accent.rgb");
54445441
theme.render.accent.color();
5445-
link.groupAndItems();
54465442
render.update.control.header();
54475443
render.update.control.menu();
54485444
}
@@ -5508,7 +5504,105 @@ var control = (function(){
55085504
}],
55095505
func: function(){
55105506
theme.accent.random();
5511-
link.groupAndItems();
5507+
}
5508+
},{
5509+
element: ".control-theme-accent-cycle-active",
5510+
path: "theme.accent.cycle.active",
5511+
type: "checkbox",
5512+
func: function(){
5513+
render.class();
5514+
render.dependents();
5515+
theme.bind.accent.cycle.toggle();
5516+
}
5517+
},{
5518+
element: ".control-theme-accent-cycle-speed-range",
5519+
path: "theme.accent.cycle.speed",
5520+
type: "range",
5521+
valueModify: {
5522+
min: 100,
5523+
max: 1000,
5524+
step: 10
5525+
},
5526+
mirrorElement: [{
5527+
element: ".control-theme-accent-cycle-speed-number",
5528+
path: "theme.accent.cycle.speed",
5529+
type: "number"
5530+
}],
5531+
func: function(){
5532+
theme.bind.accent.cycle.remove();
5533+
theme.bind.accent.cycle.add();
5534+
}
5535+
},{
5536+
element: ".control-theme-accent-cycle-speed-number",
5537+
path: "theme.accent.cycle.speed",
5538+
type: "number",
5539+
valueModify: {
5540+
min: 100,
5541+
max: 1000,
5542+
step: 10
5543+
},
5544+
mirrorElement: [{
5545+
element: ".control-theme-accent-cycle-speed-range",
5546+
path: "theme.accent.cycle.speed",
5547+
type: "number"
5548+
}],
5549+
func: function(){
5550+
theme.bind.accent.cycle.remove();
5551+
theme.bind.accent.cycle.add();
5552+
}
5553+
},{
5554+
element: ".control-theme-accent-cycle-speed-default",
5555+
type: "button",
5556+
func: function(){
5557+
mod.default("theme.accent.cycle.speed");
5558+
theme.bind.accent.cycle.remove();
5559+
theme.bind.accent.cycle.add();
5560+
render.update.control.header();
5561+
render.update.control.menu();
5562+
}
5563+
},{
5564+
element: ".control-theme-accent-cycle-step-range",
5565+
path: "theme.accent.cycle.step",
5566+
type: "range",
5567+
valueModify: {
5568+
min: 1,
5569+
max: 100
5570+
},
5571+
mirrorElement: [{
5572+
element: ".control-theme-accent-cycle-step-number",
5573+
path: "theme.accent.cycle.step",
5574+
type: "number"
5575+
}],
5576+
func: function(){
5577+
theme.bind.accent.cycle.remove();
5578+
theme.bind.accent.cycle.add();
5579+
}
5580+
},{
5581+
element: ".control-theme-accent-cycle-step-number",
5582+
path: "theme.accent.cycle.step",
5583+
type: "number",
5584+
valueModify: {
5585+
min: 1,
5586+
max: 100
5587+
},
5588+
mirrorElement: [{
5589+
element: ".control-theme-accent-cycle-step-range",
5590+
path: "theme.accent.cycle.step",
5591+
type: "number"
5592+
}],
5593+
func: function(){
5594+
theme.bind.accent.cycle.remove();
5595+
theme.bind.accent.cycle.add();
5596+
}
5597+
},{
5598+
element: ".control-theme-accent-cycle-step-default",
5599+
type: "button",
5600+
func: function(){
5601+
mod.default("theme.accent.cycle.step");
5602+
render.update.control.header();
5603+
render.update.control.menu();
5604+
render.update.control.header();
5605+
render.update.control.menu();
55125606
}
55135607
}],
55145608
radius: [{
@@ -6621,6 +6715,14 @@ var control = (function(){
66216715
returnstate.get.current().theme.custom.edit;
66226716
},
66236717
name: "is-theme-custom-edit"
6718+
},{
6719+
remove: [
6720+
"is-theme-accent-cycle"
6721+
],
6722+
condition: function(){
6723+
returnstate.get.current().theme.accent.cycle.active;
6724+
},
6725+
name: "is-theme-accent-cycle"
66246726
},{
66256727
remove: [
66266728
"is-theme-radius"
@@ -7337,7 +7439,35 @@ var control = (function(){
73377439
}
73387440
},{
73397441
condition: function(){
7340-
returnstate.get.current().theme.accent.random.active;
7442+
returnstate.get.current().theme.accent.cycle.active;
7443+
},
7444+
dependents: function(){
7445+
return[
7446+
"[for=control-theme-accent-cycle-speed-range]",
7447+
".control-theme-accent-cycle-speed-range",
7448+
".control-theme-accent-cycle-speed-range",
7449+
".control-theme-accent-cycle-speed-number",
7450+
".control-theme-accent-cycle-speed-default",
7451+
"[for=control-theme-accent-cycle-step-range]",
7452+
".control-theme-accent-cycle-step-range",
7453+
".control-theme-accent-cycle-step-range",
7454+
".control-theme-accent-cycle-step-number",
7455+
".control-theme-accent-cycle-step-default",
7456+
".control-theme-accent-cycle-helper"
7457+
];
7458+
}
7459+
},{
7460+
condition: function(){
7461+
return(!state.get.current().theme.accent.cycle.active);
7462+
},
7463+
dependents: function(){
7464+
return[
7465+
".control-theme-accent-random-active"
7466+
];
7467+
}
7468+
},{
7469+
condition: function(){
7470+
return(state.get.current().theme.accent.random.active&&!state.get.current().theme.accent.cycle.active);
73417471
},
73427472
dependents: function(){
73437473
return[

‎src/js/keyboard.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,6 @@ var keyboard = (function(){
186186
theme.accent.random();
187187
control.render.update.control.header();
188188
control.render.update.control.menu();
189-
link.groupAndItems();
190189
data.save();
191190
};
192191
},false);

0 commit comments

Comments
(0)