Add option to individually reset theme colors

This commit is contained in:
JannisX11 2021-05-09 18:31:33 +02:00
parent 0d2c0db2f1
commit bc6c6445ad
4 changed files with 38 additions and 10 deletions

View File

@ -306,7 +306,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
/* Input */
.sp-input-container {
float: left;
width: 64%;
width: 48%;
margin-top: -3px;
}
.sp-input {
@ -439,8 +439,14 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
}
/* Buttons: http://hellohappy.org/css3-buttons/ */
.sp-reset {
font-size: 11px;
margin:0;
padding:2px;
margin-right: 5px;
vertical-align: middle;
text-decoration:none;
}
.sp-cancel {
font-size: 11px;
margin:0;
@ -485,5 +491,4 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
.sp-clear-display {
background-repeat:no-repeat;
background-position: center;
background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
}

View File

@ -1011,6 +1011,9 @@ class ColorPicker extends Widget {
maxSelectionSize: 128,
showPalette: data.palette === true,
palette: data.palette ? [] : undefined,
resetText: tl('generic.reset'),
cancelText: tl('dialog.cancel'),
chooseText: tl('dialog.confirm'),
show: function() {
open_interface = scope
},

View File

@ -111,6 +111,10 @@ const CustomTheme = {
color: hex,
showAlpha: false,
showInput: true,
defaultColor: CustomTheme.defaultColors[key],
resetText: tl('generic.reset'),
cancelText: tl('dialog.cancel'),
chooseText: tl('dialog.confirm'),
move(c) {
CustomTheme.data.colors[scope_key] = c.toHexString();
},

View File

@ -43,8 +43,9 @@
localStorageKey: false,
appendTo: "body",
maxSelectionSize: 7,
cancelText: '<i class="material-icons">clear</i>',
chooseText: '<i class="material-icons">check</i>',
resetText: '',
cancelText: '',
chooseText: '',
togglePaletteMoreText: "more",
togglePaletteLessText: "less",
clearText: "Clear Color Selection",
@ -54,6 +55,7 @@
containerClassName: "",
replacerClassName: "",
showAlpha: false,
defaultColor: null,
theme: "sp-light",
palette: [["#ffffff", "#000000", "#ff0000", "#ff8000", "#ffff00", "#008000", "#0000ff", "#4b0082", "#9400d3"]],
selectionPalette: [],
@ -122,8 +124,9 @@
"</div>",
"<div class='sp-initial sp-thumb sp-cf'></div>",
"<div class='sp-button-container sp-cf'>",
"<a class='sp-cancel' href='#'></a>",
"<a class='sp-choose' href='#'></a>",
"<a class='sp-reset' href='#'><i class=material-icons>format_color_reset</i></a>",
"<a class='sp-cancel' href='#'><i class=material-icons>clear</i></a>",
"<a class='sp-choose' href='#'><i class=material-icons>check</i></a>",
"</div>",
"</div>",
"</div>"
@ -222,6 +225,7 @@
textInput = container.find(".sp-input"),
paletteContainer = container.find(".sp-palette"),
initialColorContainer = container.find(".sp-initial"),
resetButton = container.find(".sp-reset"),
cancelButton = container.find(".sp-cancel"),
clearButton = container.find(".sp-clear"),
chooseButton = container.find(".sp-choose"),
@ -262,6 +266,7 @@
container.toggleClass("sp-flat", flat);
container.toggleClass("sp-input-disabled", !opts.showInput);
container.toggleClass("sp-alpha-enabled", opts.showAlpha);
container.toggleClass("sp-reset-enabled", opts.defaultColor);
container.toggleClass("sp-clear-enabled", allowEmpty);
container.toggleClass("sp-buttons-disabled", !opts.showButtons);
container.toggleClass("sp-palette-buttons-disabled", !opts.togglePaletteOnly);
@ -330,7 +335,7 @@
});
textInput.keydown(function (e) { if (e.keyCode == 13) { setFromTextInput(); } });
cancelButton.html(opts.cancelText);
cancelButton.attr("title", opts.cancelText);
cancelButton.bind("click.spectrum", function (e) {
e.stopPropagation();
e.preventDefault();
@ -338,6 +343,14 @@
hide();
});
resetButton.attr("title", opts.resetText);
resetButton.bind("click.spectrum", function (e) {
e.stopPropagation();
e.preventDefault();
reset();
move();
});
clearButton.attr("title", opts.clearText);
clearButton.bind("click.spectrum", function (e) {
e.stopPropagation();
@ -351,7 +364,7 @@
}
});
chooseButton.html(opts.chooseText);
chooseButton.attr("title", opts.chooseText);
chooseButton.bind("click.spectrum", function (e) {
e.stopPropagation();
e.preventDefault();
@ -715,6 +728,9 @@
function revert() {
set(colorOnShow, true);
}
function reset() {
set(opts.defaultColor, true);
}
function set(color, ignoreFormatChange) {
if (tinycolor.equals(color, get())) {