Skip to content

Commit 706e0ec

Browse files
tftf
authored
Merge pull request #2359 from tf/waveform-colors
Configurable Waveform colors
2 parents bf4aade + a9c43a9 commit 706e0ec

36 files changed

Lines changed: 1755 additions & 1252 deletions

File tree

‎app/assets/javascripts/pageflow/editor/vendor.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
//= require i18n/translations
44

55
//= require wysihtml-toolbar
6-
//= require jquery.minicolors
76

87
//= require cocktail
98
//= require backbone.marionette

‎app/assets/javascripts/pageflow/ui.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
//= require wysihtml-toolbar
2-
//= require jquery.minicolors
32

43
//= require i18n
54
//= require i18n/translations

‎app/assets/stylesheets/pageflow/ui.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
@import "bourbon";
2-
@import "jquery.minicolors";
32
@import "pageflow/mixins";
43

54
@import "./ui/properties";
65
@import "./ui/functions";
76

87
%pageflow-ui {
98
@import "./ui/forms";
10-
@import "./ui/input/file_name_input";
9+
@import "./ui/color_picker";
1110
@import "./ui/input/color_input";
11+
@import "./ui/input/file_name_input";
1212
@import "./ui/table_view";
1313
@import "./ui/table_cells/presence_table_cell";
1414
@import "./ui/table_cells/delete_row_table_cell";

‎app/assets/stylesheets/pageflow/ui/color_picker.scss‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
.color_picker {
2+
--thumb: #{size(4)};
3+
4+
display: none;
5+
position: absolute;
6+
width: size(48);
7+
z-index: 1000;
8+
border-radius: rounded("base");
9+
background-color: var(--ui-surface-color);
10+
box-shadow: 0 0 0 1px var(--ui-on-surface-color-lightest), var(--ui-box-shadow-lg);
11+
user-select: none;
12+
13+
&-open {
14+
display: block;
15+
}
16+
17+
&-gradient {
18+
position: relative;
19+
width: 100%;
20+
height: size(24);
21+
margin-bottom: size(3);
22+
border-radius: rounded("base") rounded("base") 0 0;
23+
background-image: #{"linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor)"};
24+
cursor: pointer;
25+
}
26+
27+
&-marker {
28+
position: absolute;
29+
width: size(3);
30+
height: size(3);
31+
margin: size(-1.5) 0 0 size(-1.5);
32+
border: 1px solid #fff;
33+
border-radius: 50%;
34+
background-color: currentColor;
35+
cursor: pointer;
36+
37+
&:focus {
38+
outline: none;
39+
}
40+
}
41+
42+
input[type="range"] {
43+
&::-webkit-slider-runnable-track {
44+
width: 100%;
45+
height: var(--thumb);
46+
}
47+
48+
&::-webkit-slider-thumb {
49+
width: var(--thumb);
50+
height: var(--thumb);
51+
-webkit-appearance: none;
52+
}
53+
54+
&::-moz-range-track {
55+
width: 100%;
56+
height: var(--thumb);
57+
border: 0;
58+
}
59+
60+
&::-moz-range-thumb {
61+
width: var(--thumb);
62+
height: var(--thumb);
63+
border: 0;
64+
}
65+
}
66+
67+
&-hue {
68+
background-image: #{"linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%)"};
69+
}
70+
71+
&-hue,
72+
&-alpha {
73+
position: relative;
74+
height: size(2);
75+
margin: size(3) size(4);
76+
border-radius: rounded("base");
77+
}
78+
79+
&-alpha span {
80+
display: block;
81+
height: 100%;
82+
width: 100%;
83+
border-radius: inherit;
84+
background-image: #{"linear-gradient(90deg, rgba(0,0,0,0), currentColor)"};
85+
}
86+
87+
&-hue input[type="range"],
88+
&-alpha input[type="range"] {
89+
position: absolute;
90+
width: calc(100% + 2 * var(--thumb));
91+
height: var(--thumb);
92+
left: calc(-1 * var(--thumb));
93+
top: calc((#{size(2)} - var(--thumb)) / 2);
94+
margin: 0;
95+
background-color: transparent;
96+
opacity: 0;
97+
cursor: pointer;
98+
appearance: none;
99+
-webkit-appearance: none;
100+
}
101+
102+
&-hue div,
103+
&-alpha div {
104+
position: absolute;
105+
width: var(--thumb);
106+
height: var(--thumb);
107+
left: 0;
108+
top: 50%;
109+
margin-left: calc(var(--thumb) / -2);
110+
transform: translateY(-50%);
111+
border: 2px solid #fff;
112+
border-radius: 50%;
113+
background-color: currentColor;
114+
pointer-events: none;
115+
}
116+
117+
&-swatches {
118+
margin: 0 size(4);
119+
border-top: 1px solid var(--ui-on-surface-color-lightest);
120+
display: flex;
121+
flex-wrap: wrap;
122+
gap: size(2);
123+
padding: size(3) 0;
124+
125+
&.color_picker-empty {
126+
display: none;
127+
}
128+
129+
button {
130+
position: relative;
131+
width: size(5);
132+
height: size(5);
133+
padding: 0;
134+
border: 0;
135+
border-radius: 50%;
136+
color: inherit;
137+
text-indent: -1000px;
138+
white-space: nowrap;
139+
overflow: hidden;
140+
cursor: pointer;
141+
142+
&:after {
143+
content: '';
144+
display: block;
145+
position: absolute;
146+
width: 100%;
147+
height: 100%;
148+
left: 0;
149+
top: 0;
150+
border-radius: inherit;
151+
background-color: currentColor;
152+
box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
153+
}
154+
}
155+
}
156+
157+
&-marker,
158+
&-hue div,
159+
&-alpha div {
160+
box-sizing: border-box;
161+
box-shadow: 0 0 0 1px inset var(--ui-on-surface-color-lighter), 0 0 0 1px var(--ui-on-surface-color-lighter);
162+
}
163+
164+
&-field {
165+
display: inline-block;
166+
position: relative;
167+
color: transparent;
168+
169+
> input {
170+
margin: 0;
171+
direction: ltr;
172+
}
173+
174+
> span {
175+
position: absolute;
176+
width: size(8);
177+
height: 100%;
178+
right: 0;
179+
top: 50%;
180+
transform: translateY(-50%);
181+
margin: 0;
182+
padding: 0;
183+
border: 0;
184+
color: inherit;
185+
text-indent: -1000px;
186+
white-space: nowrap;
187+
overflow: hidden;
188+
pointer-events: none;
189+
190+
&:after {
191+
content: '';
192+
display: block;
193+
position: absolute;
194+
width: 100%;
195+
height: 100%;
196+
left: 0;
197+
top: 0;
198+
border-radius: inherit;
199+
background-color: currentColor;
200+
box-shadow: inset 0 0 0 1px var(--ui-on-surface-color-lighter);
201+
}
202+
}
203+
}
204+
205+
&-alpha,
206+
&-swatches button,
207+
&-field > span {
208+
background-image: #{"repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa)"};
209+
background-position: 0 0, size(1) size(1);
210+
background-size: size(2) size(2);
211+
}
212+
213+
&-keyboard_nav .color_picker-marker:focus,
214+
&-keyboard_nav .color_picker-hue input:focus + div,
215+
&-keyboard_nav .color_picker-alpha input:focus + div {
216+
outline: none;
217+
box-shadow: 0 0 0 2px var(--ui-selection-color), 0 0 2px 2px #fff;
218+
}
219+
220+
&-no_alpha .color_picker-alpha {
221+
display: none;
222+
}
223+
}

‎app/assets/stylesheets/pageflow/ui/functions.scss‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
@function space($name) {
2-
@return map-get($size-scale, "#{$name}");
2+
@return _size-lookup($name);
33
}
44

55
@function size($name) {
6-
@return map-get($size-scale, "#{$name}");
6+
@return _size-lookup($name);
7+
}
8+
9+
@function _size-lookup($name) {
10+
$key: "#{$name}";
11+
12+
@if str-slice($key, 1, 1) == "-" {
13+
@return -1 * map-get($size-scale, str-slice($key, 2));
14+
}
15+
16+
@return map-get($size-scale, $key);
717
}
818

919
$size-scale: (

‎app/assets/stylesheets/pageflow/ui/input/color_input.scss‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,27 @@
11
.color_input {
2-
.minicolors {
2+
.color_picker-field {
3+
color: var(--placeholder-color, transparent);
34
box-sizing: border-box;
45
width: 100%;
56
}
67

7-
input {
8-
padding-left: 30px;
8+
.color_picker-field > input {
9+
padding-left: size(8);
910
width: 100%;
1011
height: auto;
1112
}
1213

13-
.minicolors-input-swatch {
14-
top: 5px;
15-
left: 5px;
16-
17-
.minicolors-swatch-color {
18-
background-color: var(--placeholder-color);
19-
}
14+
.color_picker-field > span {
15+
left: size(1.5);
16+
width: size(5);
17+
height: size(5);
2018
}
2119

22-
&.is_default input {
20+
&.is_default .color_picker-field > input {
2321
color: var(--ui-on-surface-color-light);
2422
}
2523

26-
.minicolors-focus input {
24+
.color_picker-field:focus-within > input {
2725
color: var(--ui-on-surface-color);
2826
}
29-
30-
.minicolors-swatches .minicolors-swatch {
31-
margin: 2px;
32-
}
3327
}

‎entry_types/scrolled/config/locales/de.yml‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -648,6 +648,9 @@ de:
648648
label: Autoplay
649649
id:
650650
label: Audio
651+
invertPlayButton:
652+
inline_help: Dunklen Play-Button statt des standardmäßig weißen verwenden.
653+
label: Play-Button invertieren
651654
playerControlVariant:
652655
inline_help: Wähle den Stil der Player-Steuerelemente.
653656
label: Player Controls
@@ -658,9 +661,17 @@ de:
658661
waveformLines: Waveform (Linien)
659662
posterId:
660663
label: Poster
664+
remainingWaveformColor:
665+
auto: (Automatisch)
666+
inline_help: Farbe des noch nicht abgespielten Bereichs der Waveform.
667+
label: Verbleibende Waveform
661668
waveformColor:
662669
inline_help: Farbe des Bereichs der Waveform, der den bereits abgespielten Teil der Audio-Datei repräsentiert.
663-
label: Waveform Farbe
670+
label: Abgespielte Waveform
671+
waveformCursorColor:
672+
auto: (Automatisch)
673+
inline_help: Farbe des Cursors, der die aktuelle Wiedergabeposition markiert.
674+
label: Waveform Cursor
664675
description: Wiedergabe einer Audiodatei mit Steuerelementen
665676
name: Audio
666677
tabs:

‎entry_types/scrolled/config/locales/en.yml‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -633,6 +633,9 @@ en:
633633
label: Autoplay
634634
id:
635635
label: Audio
636+
invertPlayButton:
637+
inline_help: Use a dark play button instead of the default white one.
638+
label: Invert Play Button
636639
playerControlVariant:
637640
inline_help: Choose the style of player controls.
638641
label: Player Controls
@@ -643,9 +646,17 @@ en:
643646
waveformLines: Waveform (Lines)
644647
posterId:
645648
label: Poster
649+
remainingWaveformColor:
650+
auto: (Auto)
651+
inline_help: Color of the remaining waveform that has not been played yet.
652+
label: Remaining Waveform
646653
waveformColor:
647-
inline_help: Color of the waveform's parts that represents the already played part of the audio.
648-
label: Waveform Color
654+
inline_help: Color of the waveform that represents the already played part of the audio.
655+
label: Played Waveform
656+
waveformCursorColor:
657+
auto: (Auto)
658+
inline_help: Color of the cursor marking the current playback position.
659+
label: Waveform Cursor
649660
description: Player or waveform with controls
650661
name: Audio
651662
tabs:

0 commit comments

Comments
 (0)