Make palette apply clicked colors (#8498)

This commit is contained in:
Nigel Breslaw 2025-05-22 12:47:23 +03:00 committed by GitHub
parent 58aacea3a7
commit 2c71c8539d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 34 additions and 13 deletions

View file

@ -3,7 +3,7 @@
import { Palette, Button, ComboBox } from "std-widgets.slint";
import { WindowGlobal, WindowManager, PickerData, BrushMode, BrushPropertyType, WidgetMode} from "../../windowglobal.slint";
import { Api, GradientStop, BrushKind} from "../../api.slint";
import { Api, GradientStop, BrushKind, PaletteEntry } from "../../api.slint";
import { Icons, EditorPalette, EditorSizeSettings, PickerStyles } from "../../components/styling.slint";
import { SimpleColumn } from "../../components/layout-helpers.slint";
import { DraggablePanel } from "../../components/draggable-panel.slint";
@ -452,6 +452,8 @@ component ColorPicker inherits DraggablePanel {
in-out property <BrushMode> brush-mode: color;
// Which tab is active in the picker (color, gradient, etc)
in-out property <PickerTab> active-tab: PickerTab.color;
property <bool> show-palettes: active-tab == PickerTab.color && palettes.length > 0;
property <[PaletteEntry]> palettes: Api.filter_palettes(Api.palettes, "%is_brush:yes !^Colors.");
callback close <=> t-close.clicked;
@ -512,13 +514,15 @@ component ColorPicker inherits DraggablePanel {
}
}
PalettePicker {
if show-palettes : VerticalSpacer { }
}
if show-palettes: PalettePicker {
palette-entries <=> root.palettes;
}
footer := Rectangle {
width: 100%;
height: EditorSizeSettings.standard-margin;
height: EditorSizeSettings.small-margin;
}
}

View file

@ -2,15 +2,18 @@
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
import { SimpleColumn } from "../../layout-helpers.slint";
import { Api, PaletteEntry } from "../../../api.slint";
import { EditorSizeSettings } from "../../styling.slint";
import { Api, BrushKind, PaletteEntry } from "../../../api.slint";
import { EditorSizeSettings, EditorPalette } from "../../styling.slint";
import { ScrollView } from "std-widgets.slint";
import { PickerData } from "../../../windowglobal.slint";
component PaletteIcon {
width: 16px;
height: self.width;
in property <brush> brush;
in property <string> name;
in property <BrushKind> brush-kind: BrushKind.solid;
callback clicked <=> ta.clicked;
Rectangle {
background <=> brush;
@ -22,23 +25,37 @@ component PaletteIcon {
ta := TouchArea { }
}
export component PalettePicker {
height: 100px;
export component PalettePicker inherits SimpleColumn {
in property <[PaletteEntry]> palette-entries;
property <int> rows: 9;
property <[PaletteEntry]> palette-entries: Api.filter_palettes(Api.palettes, "%is_brush:yes !^Colors.");
Rectangle {
width: 100%;
height: 1px;
background: EditorPalette.divider-color;
}
Rectangle {
height: EditorSizeSettings.small-margin;
}
ScrollView {
width: 100%;
height: 100%;
viewport-height: (Api.palettes.length / rows).floor() * 24px;
height: min((3 * 24px) - 8px, (palette-entries.length / rows).ceil() * 24px);
viewport-height: (palette-entries.length / rows).ceil() * 24px - 8px;
for i[index] in root.palette-entries : PaletteIcon {
x: EditorSizeSettings.standard-margin + (index.mod(rows) * 24px);
y: (index / rows).floor() * 24px;
name: i.name;
brush: i.value.value-brush;
brush-kind: i.value.brush-kind;
clicked => {
PickerData.hue = self.brush.to-hsv().hue;
PickerData.saturation = self.brush.to-hsv().saturation;
PickerData.value = self.brush.to-hsv().value;
PickerData.alpha = self.brush.to-hsv().alpha * 100;
PickerData.current-brush-kind = i.value.brush-kind;
}
}
}
}