mirror of
https://github.com/zen-browser/desktop.git
synced 2026-01-25 06:06:10 +00:00
feat: Add black / white color shades options for gradients, b=no-bug, c=common, workspaces
This commit is contained in:
mr. m
@@ -12,10 +12,9 @@
|
||||
<button id="PanelUI-zen-gradient-generator-scheme-dark" class="subviewbutton"/>
|
||||
</hbox>
|
||||
<hbox id="PanelUI-zen-gradient-generator-color-actions">
|
||||
<button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton">
|
||||
</button>
|
||||
<button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton">
|
||||
</button>
|
||||
<button id="PanelUI-zen-gradient-generator-color-add" class="subviewbutton" />
|
||||
<button id="PanelUI-zen-gradient-generator-color-remove" class="subviewbutton" />
|
||||
<button id="PanelUI-zen-gradient-generator-color-toggle-algo" class="subviewbutton" />
|
||||
</hbox>
|
||||
<label data-l10n-id="zen-panel-ui-gradient-click-to-add" id="PanelUI-zen-gradient-generator-color-click-to-add"></label>
|
||||
</hbox>
|
||||
@@ -78,6 +77,27 @@
|
||||
<box data-lightness="20" data-algo="analogous" data-num-dots="3" data-position="118,215"
|
||||
style="--c1: rgb(22, 80, 61); --c2: rgb(26, 60, 76); --c3: rgb(27, 87, 15);" />
|
||||
</hbox>
|
||||
<hbox>
|
||||
# Start from black to white in a span on 8 steps and.
|
||||
# They must all go from the middle to the right side. They must always stay verically centered.
|
||||
# And reach to 180 on the right side, meaning we must divide the width in 16 segments.
|
||||
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
|
||||
data-position="180,180" style="background: rgb(0, 0, 0);"></box>
|
||||
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
|
||||
data-position="202.5,180" style="background: rgb(32, 32, 32);"></box>
|
||||
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
|
||||
data-position="225,180" style="background: rgb(64, 64, 64);"></box>
|
||||
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
|
||||
data-position="247.5,180" style="background: rgb(96, 96, 96);"></box>
|
||||
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
|
||||
data-position="270,180" style="background: rgb(128, 128, 128);"></box>
|
||||
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
|
||||
data-position="292.5,180" style="background: rgb(160, 160, 160);"></box>
|
||||
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
|
||||
data-position="315,180" style="background: rgb(192, 192, 192);"></box>
|
||||
<box data-type="explicit-black-white" data-algo="float" data-num-dots="1"
|
||||
data-position="337.5,180" style="background: rgb(224, 224, 224);"></box>
|
||||
</hbox>
|
||||
</hbox>
|
||||
<toolbarbutton id="PanelUI-zen-gradient-generator-color-page-right" class="toolbarbutton-1" />
|
||||
</hbox>
|
||||
|
||||
@@ -692,6 +692,10 @@
|
||||
list-style-image: url('container-tab.svg') !important;
|
||||
}
|
||||
|
||||
#PanelUI-zen-gradient-generator-color-toggle-algo {
|
||||
list-style-image: url('algorithm.svg');
|
||||
}
|
||||
|
||||
#appMenuClearRecentHistory {
|
||||
list-style-image: url('edit-delete.svg') !important;
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
#ifdef XP_WIN
|
||||
* skin/classic/browser/zen-icons/algorithm.svg (../shared/zen-icons/lin/algorithm.svg)
|
||||
* skin/classic/browser/zen-icons/arrow-down.svg (../shared/zen-icons/lin/arrow-down.svg)
|
||||
* skin/classic/browser/zen-icons/arrow-left.svg (../shared/zen-icons/lin/arrow-left.svg)
|
||||
* skin/classic/browser/zen-icons/arrow-right.svg (../shared/zen-icons/lin/arrow-right.svg)
|
||||
@@ -131,6 +132,7 @@
|
||||
* skin/classic/browser/zen-icons/zoom-out.svg (../shared/zen-icons/lin/zoom-out.svg)
|
||||
#endif
|
||||
#ifdef XP_MACOSX
|
||||
* skin/classic/browser/zen-icons/algorithm.svg (../shared/zen-icons/lin/algorithm.svg)
|
||||
* skin/classic/browser/zen-icons/arrow-down.svg (../shared/zen-icons/lin/arrow-down.svg)
|
||||
* skin/classic/browser/zen-icons/arrow-left.svg (../shared/zen-icons/lin/arrow-left.svg)
|
||||
* skin/classic/browser/zen-icons/arrow-right.svg (../shared/zen-icons/lin/arrow-right.svg)
|
||||
@@ -259,6 +261,7 @@
|
||||
* skin/classic/browser/zen-icons/zoom-out.svg (../shared/zen-icons/lin/zoom-out.svg)
|
||||
#endif
|
||||
#ifdef XP_LINUX
|
||||
* skin/classic/browser/zen-icons/algorithm.svg (../shared/zen-icons/lin/algorithm.svg)
|
||||
* skin/classic/browser/zen-icons/arrow-down.svg (../shared/zen-icons/lin/arrow-down.svg)
|
||||
* skin/classic/browser/zen-icons/arrow-left.svg (../shared/zen-icons/lin/arrow-left.svg)
|
||||
* skin/classic/browser/zen-icons/arrow-right.svg (../shared/zen-icons/lin/arrow-right.svg)
|
||||
|
||||
5
src/browser/themes/shared/zen-icons/lin/algorithm.svg
Normal file
5
src/browser/themes/shared/zen-icons/lin/algorithm.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
#filter dumbComments emptyLines substitution
|
||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><g stroke-linecap="round" stroke-width="1.5" fill="none" stroke="context-fill" stroke-opacity="context-fill-opacity" stroke-linejoin="round" class="nc-icon-wrapper"><path d="M4.75 15.25C5.99264 15.25 7 14.2426 7 13C7 11.7574 5.99264 10.75 4.75 10.75C3.50736 10.75 2.5 11.7574 2.5 13C2.5 14.2426 3.50736 15.25 4.75 15.25Z"/><path d="M13.25 15.25C14.4926 15.25 15.5 14.2426 15.5 13C15.5 11.7574 14.4926 10.75 13.25 10.75C12.0074 10.75 11 11.7574 11 13C11 14.2426 12.0074 15.25 13.25 15.25Z"/><path d="M9 7.25C10.2426 7.25 11.25 6.24264 11.25 5C11.25 3.75736 10.2426 2.75 9 2.75C7.75736 2.75 6.75 3.75736 6.75 5C6.75 6.24264 7.75736 7.25 9 7.25Z"/></g></svg>
|
||||
@@ -2,4 +2,4 @@
|
||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M17.25,8.25h-1.292c-.146-1.369-.69-2.619-1.512-3.637l1.583-1.583c.293-.293,.293-.768,0-1.061s-.767-.294-1.061,0l-1.583,1.583c-1.018-.821-2.268-1.365-3.636-1.511V.75c0-.414-.336-.75-.75-.75s-.75,.336-.75,.75v1.292c-1.368,.146-2.618,.69-3.636,1.511l-1.583-1.583c-.293-.293-.768-.293-1.061,0s-.293,.768,0,1.061l1.583,1.583c-.821,1.018-1.365,2.268-1.511,3.637H.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h1.292c.146,1.369,.69,2.619,1.511,3.637l-1.583,1.583c-.293,.293-.293,.768,0,1.061,.146,.146,.338,.22,.53,.22,.191,0,.384-.073,.53-.22l1.583-1.583c1.018,.821,2.268,1.365,3.636,1.511v1.292c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-1.292c1.368-.146,2.618-.69,3.636-1.511l1.583,1.583c.146,.146,.338,.22,.53,.22s.384-.073,.53-.22c.293-.293,.293-.768,0-1.061l-1.583-1.583c.821-1.018,1.365-2.268,1.512-3.637h1.292c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-11.25,1.75c-.552,0-1-.448-1-1s.448-1,1-1,1,.448,1,1-.448,1-1,1Zm3,2c-.828,0-1.5-.672-1.5-1.5,0-.276,.224-.5,.5-.5h2c.276,0,.5,.224,.5,.5,0,.828-.672,1.5-1.5,1.5Zm2-3c0-.552,.448-1,1-1s1,.448,1,1-.448,1-1,1-1-.448-1-1Z" fill="currentColor"></path></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M17.25,8.25h-1.292c-.146-1.369-.69-2.619-1.512-3.637l1.583-1.583c.293-.293,.293-.768,0-1.061s-.767-.294-1.061,0l-1.583,1.583c-1.018-.821-2.268-1.365-3.636-1.511V.75c0-.414-.336-.75-.75-.75s-.75,.336-.75,.75v1.292c-1.368,.146-2.618,.69-3.636,1.511l-1.583-1.583c-.293-.293-.768-.293-1.061,0s-.293,.768,0,1.061l1.583,1.583c-.821,1.018-1.365,2.268-1.511,3.637H.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h1.292c.146,1.369,.69,2.619,1.511,3.637l-1.583,1.583c-.293,.293-.293,.768,0,1.061,.146,.146,.338,.22,.53,.22,.191,0,.384-.073,.53-.22l1.583-1.583c1.018,.821,2.268,1.365,3.636,1.511v1.292c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-1.292c1.368-.146,2.618-.69,3.636-1.511l1.583,1.583c.146,.146,.338,.22,.53,.22s.384-.073,.53-.22c.293-.293,.293-.768,0-1.061l-1.583-1.583c.821-1.018,1.365-2.268,1.512-3.637h1.292c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-11.25,1.75c-.552,0-1-.448-1-1s.448-1,1-1,1,.448,1,1-.448,1-1,1Zm3,2c-.828,0-1.5-.672-1.5-1.5,0-.276,.224-.5,.5-.5h2c.276,0,.5,.224,.5,.5,0,.828-.672,1.5-1.5,1.5Zm2-3c0-.552,.448-1,1-1s1,.448,1,1-.448,1-1,1-1-.448-1-1Z" fill="context-fill"></path></svg>
|
||||
@@ -2,4 +2,4 @@
|
||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M16.705,10.223c-.246-.183-.578-.197-.838-.037-.868,.532-1.859,.813-2.867,.813-3.033,0-5.5-2.467-5.5-5.5,0-1.146,.354-2.247,1.023-3.186,.177-.249,.186-.581,.021-.839-.164-.258-.467-.386-.77-.334C3.994,1.847,1.25,5.152,1.25,9c0,4.411,3.589,8,8,8,3.638,0,6.819-2.461,7.735-5.986,.077-.296-.034-.609-.28-.791Z" fill="currentColor"></path><path d="M12.743,4.492l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" data-color="color-2"></path><circle cx="14.25" cy="7.75" r=".75" fill="currentColor" data-color="color-2"></circle></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M16.705,10.223c-.246-.183-.578-.197-.838-.037-.868,.532-1.859,.813-2.867,.813-3.033,0-5.5-2.467-5.5-5.5,0-1.146,.354-2.247,1.023-3.186,.177-.249,.186-.581,.021-.839-.164-.258-.467-.386-.77-.334C3.994,1.847,1.25,5.152,1.25,9c0,4.411,3.589,8,8,8,3.638,0,6.819-2.461,7.735-5.986,.077-.296-.034-.609-.28-.791Z" fill="context-fill"></path><path d="M12.743,4.492l-.946-.315-.316-.947c-.102-.306-.609-.306-.711,0l-.316,.947-.946,.315c-.153,.051-.257,.194-.257,.356s.104,.305,.257,.356l.946,.315,.316,.947c.051,.153,.194,.256,.355,.256s.305-.104,.355-.256l.316-.947,.946-.315c.153-.051,.257-.194,.257-.356s-.104-.305-.257-.356Z" fill="currentColor" data-color="color-2"></path><circle cx="14.25" cy="7.75" r=".75" fill="currentColor" data-color="color-2"></circle></svg>
|
||||
@@ -2,4 +2,4 @@
|
||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M3.025,5.623c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263Z" fill="currentColor" data-color="color-2"></path><path d="M16.525,8.803l-4.535-1.793-1.793-4.535c-.227-.572-1.168-.572-1.395,0l-1.793,4.535-4.535,1.793c-.286,.113-.475,.39-.475,.697s.188,.584,.475,.697l4.535,1.793,1.793,4.535c.113,.286,.39,.474,.697,.474s.584-.188,.697-.474l1.793-4.535,4.535-1.793c.286-.113,.475-.39,.475-.697s-.188-.584-.475-.697Z" fill="currentColor"></path></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="18px" viewBox="0 0 18 18"><path d="M3.025,5.623c.068,.204,.26,.342,.475,.342s.406-.138,.475-.342l.421-1.263,1.263-.421c.204-.068,.342-.259,.342-.474s-.138-.406-.342-.474l-1.263-.421-.421-1.263c-.137-.408-.812-.408-.949,0l-.421,1.263-1.263,.421c-.204,.068-.342,.259-.342,.474s.138,.406,.342,.474l1.263,.421,.421,1.263Z" fill="context-fill" data-color="color-2"></path><path d="M16.525,8.803l-4.535-1.793-1.793-4.535c-.227-.572-1.168-.572-1.395,0l-1.793,4.535-4.535,1.793c-.286,.113-.475,.39-.475,.697s.188,.584,.475,.697l4.535,1.793,1.793,4.535c.113,.286,.39,.474,.697,.474s.584-.188,.697-.474l1.793-4.535,4.535-1.793c.286-.113,.475-.39,.475-.697s-.188-.584-.475-.697Z" fill="currentColor"></path></svg>
|
||||
@@ -18,13 +18,13 @@
|
||||
|
||||
@keyframes zen-theme-picker-dot-animation {
|
||||
from {
|
||||
transform: scale(0.8) translate(-50%, -50%);
|
||||
transform: scale(0.8) translate(-25%, -25%);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2) translate(-50%, -50%);
|
||||
transform: scale(1.2) translate(-25%, -25%);
|
||||
}
|
||||
to {
|
||||
transform: scale(1) translate(-50%, -50%);
|
||||
transform: scale(1) translate(-25%, -25%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -45,6 +45,7 @@ const MAX_OPACITY = 0.9;
|
||||
const MIN_OPACITY = AppConstants.platform === 'macosx' ? 0.25 : 0.35;
|
||||
|
||||
const EXPLICIT_LIGHTNESS_TYPE = 'explicit-lightness';
|
||||
const EXPLICIT_BLACKWHITE_TYPE = 'explicit-black-white';
|
||||
|
||||
export class nsZenThemePicker extends nsZenMultiWindowFeature {
|
||||
static MAX_DOTS = 3;
|
||||
@@ -146,6 +147,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
|
||||
get colorHarmonies() {
|
||||
return [
|
||||
{ type: 'complementary', angles: [180] },
|
||||
{ type: 'singleAnalogous', angles: [310] },
|
||||
{ type: 'splitComplementary', angles: [150, 210] },
|
||||
{ type: 'analogous', angles: [50, 310] },
|
||||
{ type: 'triadic', angles: [120, 240] },
|
||||
@@ -198,6 +200,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
|
||||
}
|
||||
this.dots = this.dots.slice(0, numDots);
|
||||
}
|
||||
const type = target.getAttribute('data-type') || EXPLICIT_LIGHTNESS_TYPE;
|
||||
// Generate new gradient from the single color given
|
||||
const [x, y] = rawPosition.split(',').map((pos) => parseInt(pos));
|
||||
let dots = [
|
||||
@@ -205,18 +208,18 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
|
||||
ID: 0,
|
||||
position: { x, y },
|
||||
isPrimary: true,
|
||||
type: EXPLICIT_LIGHTNESS_TYPE,
|
||||
type,
|
||||
},
|
||||
];
|
||||
for (let i = 1; i < numDots; i++) {
|
||||
dots.push({
|
||||
ID: i,
|
||||
position: { x: 0, y: 0 },
|
||||
type: EXPLICIT_LIGHTNESS_TYPE,
|
||||
type,
|
||||
});
|
||||
}
|
||||
this.useAlgo = algo;
|
||||
this.#currentLightness = lightness;
|
||||
if (lightness !== null) this.#currentLightness = lightness;
|
||||
dots = this.calculateCompliments(dots, 'update', this.useAlgo);
|
||||
this.handleColorPositions(dots, true);
|
||||
this.updateCurrentWorkspace();
|
||||
@@ -416,10 +419,10 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
|
||||
calculateInitialPosition([r, g, b]) {
|
||||
// This function is called before the picker is even rendered, so we hard code the dimensions
|
||||
// important: If any sort of sizing is changed, make sure changes are reflected here
|
||||
const padding = 30;
|
||||
const padding = 0;
|
||||
const rect = {
|
||||
width: 338,
|
||||
height: 338,
|
||||
width: 380 + padding * 2,
|
||||
height: 380 + padding * 2,
|
||||
};
|
||||
const centerX = rect.width / 2;
|
||||
const centerY = rect.height / 2;
|
||||
@@ -437,7 +440,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
|
||||
const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
|
||||
const rect = gradient.getBoundingClientRect();
|
||||
const padding = 30; // each side
|
||||
const dotHalfSize = 36 / 2; // half the size of the dot
|
||||
const dotHalfSize = 38 / 2; // half the size of the dot
|
||||
x += dotHalfSize;
|
||||
y += dotHalfSize;
|
||||
rect.width += padding * 2; // Adjust width and height for padding
|
||||
@@ -452,7 +455,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
|
||||
angle += 360; // Normalize to [0, 360)
|
||||
}
|
||||
const normalizedDistance = 1 - Math.min(distance / radius, 1); // Normalize distance to [0, 1]
|
||||
const hue = (angle / 360) * 360; // Normalize angle to [0, 360)
|
||||
let hue = (angle / 360) * 360; // Normalize angle to [0, 360)
|
||||
let saturation = normalizedDistance * 100; // stays high even in center
|
||||
if (type !== EXPLICIT_LIGHTNESS_TYPE) {
|
||||
saturation = 80 + (1 - normalizedDistance) * 20;
|
||||
@@ -460,7 +463,12 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
|
||||
// For example, moving the dot outside will have higher lightness, while moving it inside will have lower lightness
|
||||
this.#currentLightness = Math.round((1 - normalizedDistance) * 100);
|
||||
}
|
||||
const lightness = this.#currentLightness; // Fixed lightness for simplicity
|
||||
let lightness = this.#currentLightness; // Fixed lightness for simplicity
|
||||
if (type === EXPLICIT_BLACKWHITE_TYPE) {
|
||||
// We can only get grayscales from white to black
|
||||
saturation = 0;
|
||||
lightness = Math.round((1 - normalizedDistance) * 100);
|
||||
}
|
||||
const [r, g, b] = this.hslToRgb(hue / 360, saturation / 100, lightness / 100);
|
||||
return [
|
||||
Math.min(255, Math.max(0, r)),
|
||||
@@ -675,7 +683,13 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
|
||||
}
|
||||
|
||||
if (action === 'remove') {
|
||||
return colorHarmonies.find((harmony) => harmony.angles.length === numDots);
|
||||
let harmony = colorHarmonies.find((harmony) => harmony.angles.length === numDots);
|
||||
// If we are coming from 3 analogous dots, we should now go to singleAnalogous if
|
||||
// there are 2 dots left
|
||||
if (harmony.type === 'analogous' && numDots === 1) {
|
||||
harmony = colorHarmonies.find((harmony) => harmony.type === 'singleAnalogous');
|
||||
}
|
||||
return harmony;
|
||||
}
|
||||
if (action === 'add') {
|
||||
return colorHarmonies.find((harmony) => harmony.angles.length + 1 === numDots);
|
||||
@@ -700,7 +714,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
|
||||
|
||||
const dotPad = this.panel.querySelector('.zen-theme-picker-gradient');
|
||||
const rect = dotPad.getBoundingClientRect();
|
||||
const padding = 30;
|
||||
const padding = 0;
|
||||
|
||||
let updatedDots = [...dots];
|
||||
const centerPosition = { x: rect.width / 2, y: rect.height / 2 };
|
||||
@@ -843,16 +857,30 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
|
||||
this.handleColorPositions(colorPositions);
|
||||
this.updateCurrentWorkspace();
|
||||
return;
|
||||
} else if (target.id === 'PanelUI-zen-gradient-generator-color-toggle-algo') {
|
||||
const applicableHarmonies = this.colorHarmonies.filter(
|
||||
(harmony) => harmony.angles.length + 1 === this.dots.length
|
||||
);
|
||||
|
||||
let currentIndex = applicableHarmonies.findIndex((harmony) => harmony.type === this.useAlgo);
|
||||
|
||||
const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % applicableHarmonies.length;
|
||||
this.useAlgo = applicableHarmonies[nextIndex].type;
|
||||
|
||||
let colorPositions = this.calculateCompliments(this.dots, 'update', this.useAlgo);
|
||||
this.handleColorPositions(colorPositions);
|
||||
this.updateCurrentWorkspace();
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.button !== 0 || this.dragging || this.recentlyDragged) return;
|
||||
|
||||
const gradient = this.panel.querySelector('.zen-theme-picker-gradient');
|
||||
const rect = gradient.getBoundingClientRect();
|
||||
const padding = 30;
|
||||
const padding = 0;
|
||||
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
const centerY = rect.top + rect.height / 2;
|
||||
const centerX = rect.left + rect.width / 2 - padding;
|
||||
const centerY = rect.top + rect.height / 2 - padding;
|
||||
const radius = (rect.width - padding) / 2;
|
||||
let pixelX = event.clientX;
|
||||
let pixelY = event.clientY;
|
||||
@@ -982,7 +1010,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
|
||||
if (this.dragging) {
|
||||
event.preventDefault();
|
||||
const rect = this.panel.querySelector('.zen-theme-picker-gradient').getBoundingClientRect();
|
||||
const padding = 30; // each side
|
||||
const padding = 0; // each side
|
||||
// do NOT let the ball be draged outside of an imaginary circle. You can drag it anywhere inside the circle
|
||||
// if the distance between the center of the circle and the dragged ball is bigger than the radius, then the ball
|
||||
// should be placed on the edge of the circle. If it's inside the circle, then the ball just follows the mouse
|
||||
@@ -1164,7 +1192,7 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
|
||||
if (!forToolbar) {
|
||||
return [
|
||||
`linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} 0%, transparent 100%)`,
|
||||
`linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} 0%, transparent 80%)`,
|
||||
`linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} 0%, transparent 100%)`,
|
||||
]
|
||||
.reverse()
|
||||
.join(', ');
|
||||
@@ -1175,8 +1203,8 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
|
||||
let color2 = this.getSingleRGBColor(themedColors[0], forToolbar);
|
||||
let color3 = this.getSingleRGBColor(themedColors[1], forToolbar);
|
||||
return [
|
||||
`radial-gradient(circle at 0% 0%, ${color2} -10%, transparent 100%)`,
|
||||
`linear-gradient(to top, ${color1} -50%, transparent 125%)`,
|
||||
`radial-gradient(circle at 0% 0%, ${color2} 10%, transparent 80%)`,
|
||||
`radial-gradient(circle at 100% -100%, ${color3} -100%, transparent 400%)`,
|
||||
].join(', ');
|
||||
}
|
||||
@@ -1389,6 +1417,9 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
|
||||
workspaceTheme.gradientColors.length === 0 ||
|
||||
(button.id === 'PanelUI-zen-gradient-generator-color-add'
|
||||
? workspaceTheme.gradientColors.length >= nsZenThemePicker.MAX_DOTS
|
||||
: false) ||
|
||||
(button.id === 'PanelUI-zen-gradient-generator-color-toggle-algo'
|
||||
? workspaceTheme.gradientColors.length < 2
|
||||
: false);
|
||||
}
|
||||
const clickToAdd = browser.document.getElementById(
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
*/
|
||||
|
||||
#PanelUI-zen-gradient-generator {
|
||||
--panel-width: 360px;
|
||||
--panel-width: 380px;
|
||||
--panel-padding: 10px;
|
||||
min-width: var(--panel-width);
|
||||
}
|
||||
@@ -102,15 +102,16 @@
|
||||
overflow: auto;
|
||||
scrollbar-width: none;
|
||||
scroll-behavior: smooth;
|
||||
mask-image: linear-gradient(to right, transparent 0%, black 2.5%, black 97.5%, transparent 100%);
|
||||
|
||||
& > hbox {
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
min-width: 100%;
|
||||
padding: 0 1px;
|
||||
|
||||
& > box {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
@@ -251,17 +252,17 @@
|
||||
min-height: calc(var(--panel-width) - var(--panel-padding) * 2 - 2px);
|
||||
background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.03));
|
||||
background-image: radial-gradient(
|
||||
light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1)) 1px,
|
||||
light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1)) 0.5px,
|
||||
transparent 0
|
||||
);
|
||||
background-position: -23px -23px;
|
||||
background-size: 6px 6px;
|
||||
|
||||
& .zen-theme-picker-dot {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: var(--zen-theme-picker-dot-color);
|
||||
@media (-prefers-color-scheme: dark) {
|
||||
@@ -270,25 +271,25 @@
|
||||
cursor: pointer;
|
||||
border: 3px solid #ffffff;
|
||||
animation: zen-theme-picker-dot-animation 0.5s;
|
||||
transform: translate(-50%, -50%);
|
||||
transform: translate(-25%, -25%);
|
||||
pointer-events: none;
|
||||
transform-origin: center center;
|
||||
|
||||
&:first-of-type {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-width: 4px;
|
||||
z-index: 2;
|
||||
pointer-events: all;
|
||||
transition: transform 0.2s;
|
||||
z-index: 999;
|
||||
&:hover {
|
||||
transform: scale(1.05) translate(-50%, -50%);
|
||||
transform: scale(1.05) translate(-25%, -25%);
|
||||
}
|
||||
}
|
||||
|
||||
&[dragging='true'] {
|
||||
transform: scale(1.2) translate(-50%, -50%) !important;
|
||||
transform: scale(1.2) translate(-25%, -25%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -329,10 +330,10 @@
|
||||
min-width: fit-content !important;
|
||||
transition: background 0.2s;
|
||||
appearance: none;
|
||||
max-height: 26px;
|
||||
max-width: 26px;
|
||||
min-height: 26px;
|
||||
min-width: 26px !important;
|
||||
max-height: 30px;
|
||||
max-width: 30px;
|
||||
min-height: 30px;
|
||||
min-width: 30px !important;
|
||||
color: light-dark(rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.9));
|
||||
|
||||
& .button-box {
|
||||
|
||||
Reference in New Issue
Block a user