Skip to content

Configurable Waveform colors #2359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tf merged 5 commits into from
Feb 24, 2026
+1,755 −1,252
Merged

Configurable Waveform colors #2359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a52bcc4
Replace minicolors with custom ColorPicker
tf Feb 20, 2026
b369bec
Re-render typography previews on binding change
tf Feb 24, 2026
2462520
Remove jquery-minicolors dependency
tf Feb 24, 2026
5a8eafd
Customizable waveform colors
tf Feb 24, 2026
a9c43a9
Add invert play button option for waveform
tf Feb 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion app/assets/javascripts/pageflow/editor/vendor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
//= require i18n/translations

//= require wysihtml-toolbar
//= require jquery.minicolors

//= require cocktail
//= require backbone.marionette
Expand Down
1 change: 0 additions & 1 deletion app/assets/javascripts/pageflow/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
//= require wysihtml-toolbar
//= require jquery.minicolors

//= require i18n
//= require i18n/translations
Expand Down
4 changes: 2 additions & 2 deletions app/assets/stylesheets/pageflow/ui.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
@import "bourbon";
@import "jquery.minicolors";
@import "pageflow/mixins";

@import "./ui/properties";
@import "./ui/functions";

%pageflow-ui {
@import "./ui/forms";
@import "./ui/input/file_name_input";
@import "./ui/color_picker";
@import "./ui/input/color_input";
@import "./ui/input/file_name_input";
@import "./ui/table_view";
@import "./ui/table_cells/presence_table_cell";
@import "./ui/table_cells/delete_row_table_cell";
Expand Down
223 changes: 223 additions & 0 deletions app/assets/stylesheets/pageflow/ui/color_picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,223 @@
.color_picker {
--thumb: #{size(4)};

display: none;
position: absolute;
width: size(48);
z-index: 1000;
border-radius: rounded("base");
background-color: var(--ui-surface-color);
box-shadow: 0 0 0 1px var(--ui-on-surface-color-lightest), var(--ui-box-shadow-lg);
user-select: none;

&-open {
display: block;
}

&-gradient {
position: relative;
width: 100%;
height: size(24);
margin-bottom: size(3);
border-radius: rounded("base") rounded("base") 0 0;
background-image: #{"linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor)"};
cursor: pointer;
}

&-marker {
position: absolute;
width: size(3);
height: size(3);
margin: size(-1.5) 0 0 size(-1.5);
border: 1px solid #fff;
border-radius: 50%;
background-color: currentColor;
cursor: pointer;

&:focus {
outline: none;
}
}

input[type="range"] {
&::-webkit-slider-runnable-track {
width: 100%;
height: var(--thumb);
}

&::-webkit-slider-thumb {
width: var(--thumb);
height: var(--thumb);
-webkit-appearance: none;
}

&::-moz-range-track {
width: 100%;
height: var(--thumb);
border: 0;
}

&::-moz-range-thumb {
width: var(--thumb);
height: var(--thumb);
border: 0;
}
}

&-hue {
background-image: #{"linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%)"};
}

&-hue,
&-alpha {
position: relative;
height: size(2);
margin: size(3) size(4);
border-radius: rounded("base");
}

&-alpha span {
display: block;
height: 100%;
width: 100%;
border-radius: inherit;
background-image: #{"linear-gradient(90deg, rgba(0,0,0,0), currentColor)"};
}

&-hue input[type="range"],
&-alpha input[type="range"] {
position: absolute;
width: calc(100% + 2 * var(--thumb));
height: var(--thumb);
left: calc(-1 * var(--thumb));
top: calc((#{size(2)} - var(--thumb)) / 2);
margin: 0;
background-color: transparent;
opacity: 0;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}

&-hue div,
&-alpha div {
position: absolute;
width: var(--thumb);
height: var(--thumb);
left: 0;
top: 50%;
margin-left: calc(var(--thumb) / -2);
transform: translateY(-50%);
border: 2px solid #fff;
border-radius: 50%;
background-color: currentColor;
pointer-events: none;
}

&-swatches {
margin: 0 size(4);
border-top: 1px solid var(--ui-on-surface-color-lightest);
display: flex;
flex-wrap: wrap;
gap: size(2);
padding: size(3) 0;

&.color_picker-empty {
display: none;
}

button {
position: relative;
width: size(5);
height: size(5);
padding: 0;
border: 0;
border-radius: 50%;
color: inherit;
text-indent: -1000px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;

&:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: inherit;
background-color: currentColor;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
}
}

&-marker,
&-hue div,
&-alpha div {
box-sizing: border-box;
box-shadow: 0 0 0 1px inset var(--ui-on-surface-color-lighter), 0 0 0 1px var(--ui-on-surface-color-lighter);
}

&-field {
display: inline-block;
position: relative;
color: transparent;

> input {
margin: 0;
direction: ltr;
}

> span {
position: absolute;
width: size(8);
height: 100%;
right: 0;
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 0;
border: 0;
color: inherit;
text-indent: -1000px;
white-space: nowrap;
overflow: hidden;
pointer-events: none;

&:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: inherit;
background-color: currentColor;
box-shadow: inset 0 0 0 1px var(--ui-on-surface-color-lighter);
}
}
}

&-alpha,
&-swatches button,
&-field > span {
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)"};
background-position: 0 0, size(1) size(1);
background-size: size(2) size(2);
}

&-keyboard_nav .color_picker-marker:focus,
&-keyboard_nav .color_picker-hue input:focus + div,
&-keyboard_nav .color_picker-alpha input:focus + div {
outline: none;
box-shadow: 0 0 0 2px var(--ui-selection-color), 0 0 2px 2px #fff;
}

&-no_alpha .color_picker-alpha {
display: none;
}
}
14 changes: 12 additions & 2 deletions app/assets/stylesheets/pageflow/ui/functions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,19 @@
@function space($name) {
@return map-get($size-scale, "#{$name}");
@return _size-lookup($name);
}

@function size($name) {
@return map-get($size-scale, "#{$name}");
@return _size-lookup($name);
}

@function _size-lookup($name) {
$key: "#{$name}";

@if str-slice($key, 1, 1) == "-" {
@return -1 * map-get($size-scale, str-slice($key, 2));
}

@return map-get($size-scale, $key);
}

$size-scale: (
Expand Down
26 changes: 10 additions & 16 deletions app/assets/stylesheets/pageflow/ui/input/color_input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,27 @@
.color_input {
.minicolors {
.color_picker-field {
color: var(--placeholder-color, transparent);
box-sizing: border-box;
width: 100%;
}

input {
padding-left: 30px;
.color_picker-field > input {
padding-left: size(8);
width: 100%;
height: auto;
}

.minicolors-input-swatch {
top: 5px;
left: 5px;

.minicolors-swatch-color {
background-color: var(--placeholder-color);
}
.color_picker-field > span {
left: size(1.5);
width: size(5);
height: size(5);
}

&.is_default input {
&.is_default .color_picker-field > input {
color: var(--ui-on-surface-color-light);
}

.minicolors-focus input {
.color_picker-field:focus-within > input {
color: var(--ui-on-surface-color);
}

.minicolors-swatches .minicolors-swatch {
margin: 2px;
}
}
13 changes: 12 additions & 1 deletion entry_types/scrolled/config/locales/de.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -648,6 +648,9 @@ de:
label: Autoplay
id:
label: Audio
invertPlayButton:
inline_help: Dunklen Play-Button statt des standardmäßig weißen verwenden.
label: Play-Button invertieren
playerControlVariant:
inline_help: Wähle den Stil der Player-Steuerelemente.
label: Player Controls
Expand All @@ -658,9 +661,17 @@ de:
waveformLines: Waveform (Linien)
posterId:
label: Poster
remainingWaveformColor:
auto: (Automatisch)
inline_help: Farbe des noch nicht abgespielten Bereichs der Waveform.
label: Verbleibende Waveform
waveformColor:
inline_help: Farbe des Bereichs der Waveform, der den bereits abgespielten Teil der Audio-Datei repräsentiert.
label: Waveform Farbe
label: Abgespielte Waveform
waveformCursorColor:
auto: (Automatisch)
inline_help: Farbe des Cursors, der die aktuelle Wiedergabeposition markiert.
label: Waveform Cursor
description: Wiedergabe einer Audiodatei mit Steuerelementen
name: Audio
tabs:
Expand Down
15 changes: 13 additions & 2 deletions entry_types/scrolled/config/locales/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -633,6 +633,9 @@ en:
label: Autoplay
id:
label: Audio
invertPlayButton:
inline_help: Use a dark play button instead of the default white one.
label: Invert Play Button
playerControlVariant:
inline_help: Choose the style of player controls.
label: Player Controls
Expand All @@ -643,9 +646,17 @@ en:
waveformLines: Waveform (Lines)
posterId:
label: Poster
remainingWaveformColor:
auto: (Auto)
inline_help: Color of the remaining waveform that has not been played yet.
label: Remaining Waveform
waveformColor:
inline_help: Color of the waveform's parts that represents the already played part of the audio.
label: Waveform Color
inline_help: Color of the waveform that represents the already played part of the audio.
label: Played Waveform
waveformCursorColor:
auto: (Auto)
inline_help: Color of the cursor marking the current playback position.
label: Waveform Cursor
description: Player or waveform with controls
name: Audio
tabs:
Expand Down
Loading
Loading