mirror of
https://github.com/slint-ui/slint.git
synced 2025-11-02 21:03:00 +00:00
live-preview: Add simple support for Globals and svg-colors (#8515)
This commit is contained in:
Nigel Breslaw
GitHub
parent
214d7fbea2
commit
2fbe091b93
4 changed files with 155 additions and 26 deletions
|
|
@ -10,11 +10,15 @@ export component ColorIndicator {
|
|||
width: 15px;
|
||||
height: self.width;
|
||||
in property <color> color;
|
||||
in property <length> border-radius;
|
||||
in property <length> border-width;
|
||||
property <{hue: float, saturation: float, value: float}> hsv-color: color.to-hsv();
|
||||
|
||||
Rectangle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: root.border-radius;
|
||||
clip: border-radius > 0;
|
||||
Rectangle {
|
||||
x: 0;
|
||||
width: 50%;
|
||||
|
|
@ -24,8 +28,10 @@ export component ColorIndicator {
|
|||
Rectangle {
|
||||
x: parent.width / 2;
|
||||
width: 50%;
|
||||
background: white;
|
||||
// work around lack of masking by hiding the background and checkerboard when alpha is 1
|
||||
background: root.color.to-hsv().alpha < 1 ? white : transparent;
|
||||
Image {
|
||||
visible: root.color.to-hsv().alpha < 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-alignment: top;
|
||||
|
|
@ -40,6 +46,11 @@ export component ColorIndicator {
|
|||
background: root.color;
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
border-radius: root.border-radius;
|
||||
border-width: root.border-width;
|
||||
border-color: EditorPalette.text-color.with-alpha(10%);
|
||||
}
|
||||
|
||||
@children
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,13 @@ import { CustomLineEdit } from "./widget-helpers.slint";
|
|||
import { ColorModeAndApply } from "./floating-brush-sections/color-mode-and-apply.slint";
|
||||
import { GradientPicker } from "./floating-brush-sections/gradient-ui.slint";
|
||||
import { RecentColorPicker } from "floating-brush-sections/palettes.slint";
|
||||
import { SvgColorPicker } from "floating-brush-sections/svg-color-ui.slint";
|
||||
|
||||
enum PickerTab {
|
||||
color,
|
||||
gradient,
|
||||
svg-color
|
||||
svg-color,
|
||||
globals
|
||||
}
|
||||
|
||||
component BrushTypeSelector {
|
||||
|
|
@ -24,6 +26,7 @@ component BrushTypeSelector {
|
|||
height: 100%;
|
||||
|
||||
in-out property <PickerTab> active-tab: PickerTab.color;
|
||||
in property <bool> supports-gradient;
|
||||
|
||||
changed active-tab => {
|
||||
WindowManager.hide-color-stop-picker();
|
||||
|
|
@ -73,7 +76,7 @@ component BrushTypeSelector {
|
|||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
if supports-gradient: Rectangle {
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: 25px;
|
||||
height: self.width;
|
||||
|
|
@ -112,7 +115,6 @@ component BrushTypeSelector {
|
|||
}
|
||||
|
||||
Rectangle {
|
||||
visible: false; // TODO: Bring back when svg-color support is ready
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: 25px;
|
||||
height: self.width;
|
||||
|
|
@ -150,6 +152,45 @@ component BrushTypeSelector {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: 25px;
|
||||
height: self.width;
|
||||
|
||||
property <bool> is-active: active-tab == PickerTab.globals;
|
||||
|
||||
Rectangle {
|
||||
visible: is-active;
|
||||
background: EditorPalette.section-color;
|
||||
border-radius: EditorSizeSettings.property-border-radius;
|
||||
}
|
||||
|
||||
TouchArea {
|
||||
clicked => {
|
||||
active-tab = PickerTab.globals;
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 15px;
|
||||
height: self.width;
|
||||
opacity: is-active ? 1 : 0.5;
|
||||
|
||||
Rectangle {
|
||||
border-radius: 3px;
|
||||
border-width: 1px;
|
||||
border-color: white;
|
||||
Text {
|
||||
font-family: "Inter";
|
||||
font-size: 6px;
|
||||
color: white;
|
||||
text: "G";
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -466,8 +507,9 @@ component ColorPicker inherits DraggablePanel {
|
|||
width: 100%;
|
||||
height: 40px;
|
||||
|
||||
if picker-mode == BrushPropertyType.brush: BrushTypeSelector {
|
||||
BrushTypeSelector {
|
||||
active-tab <=> root.active-tab;
|
||||
supports-gradient: picker-mode == BrushPropertyType.brush;
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
|
|
@ -517,8 +559,16 @@ component ColorPicker inherits DraggablePanel {
|
|||
|
||||
if show-palettes: RecentColorPicker {
|
||||
recent-colors <=> Api.recent-colors;
|
||||
}
|
||||
|
||||
if active-tab == PickerTab.svg-color: SvgColorPicker {
|
||||
filter-text: "^Color";
|
||||
}
|
||||
|
||||
if active-tab == PickerTab.globals: SvgColorPicker {
|
||||
filter-text: "!^Color";
|
||||
}
|
||||
|
||||
footer := Rectangle {
|
||||
width: 100%;
|
||||
height: EditorSizeSettings.small-margin;
|
||||
|
|
|
|||
|
|
@ -6,21 +6,15 @@ import { Api, BrushKind, PaletteEntry } from "../../../api.slint";
|
|||
import { EditorSizeSettings, EditorPalette } from "../../styling.slint";
|
||||
import { ScrollView } from "std-widgets.slint";
|
||||
import { PickerData } from "../../../windowglobal.slint";
|
||||
import { ColorIndicator } from "../brush-helpers.slint";
|
||||
|
||||
component PaletteIcon {
|
||||
component RecentIndicator inherits ColorIndicator {
|
||||
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;
|
||||
border-radius: 5px;
|
||||
border-width: 1px;
|
||||
border-color: #ffffff.with-alpha(0.2);
|
||||
}
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
|
||||
ta := TouchArea { }
|
||||
}
|
||||
|
|
@ -34,24 +28,21 @@ export component RecentColorPicker inherits SimpleColumn {
|
|||
background: EditorPalette.divider-color;
|
||||
}
|
||||
Rectangle {
|
||||
height: EditorSizeSettings.small-margin;
|
||||
height: 8px;
|
||||
}
|
||||
Rectangle {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
height: 16px;
|
||||
|
||||
for i[index] in root.recent-colors : PaletteIcon {
|
||||
for i[index] in root.recent-colors : RecentIndicator {
|
||||
x: EditorSizeSettings.standard-margin + index * 24px;
|
||||
name: "";
|
||||
brush: i;
|
||||
brush-kind: BrushKind.solid;
|
||||
color: i;
|
||||
|
||||
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 = BrushKind.solid;
|
||||
PickerData.hue = self.color.to-hsv().hue;
|
||||
PickerData.saturation = self.color.to-hsv().saturation;
|
||||
PickerData.value = self.color.to-hsv().value;
|
||||
PickerData.alpha = self.color.to-hsv().alpha * 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
// Copyright © SixtyFPS GmbH <info@slint.dev>
|
||||
// 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 { EditorSpaceSettings, EditorSizeSettings, EditorPalette, PickerStyles } from "../../styling.slint";
|
||||
import { ColorIndicator } from "../brush-helpers.slint";
|
||||
import { ListView } from "std-widgets.slint";
|
||||
import { Api, PaletteEntry } from "../../../api.slint";
|
||||
import { WindowManager } from "../../../windowglobal.slint";
|
||||
|
||||
component SvgColorIndicator {
|
||||
in property <string> name;
|
||||
in property <color> color;
|
||||
callback clicked <=> ta.clicked;
|
||||
|
||||
width: PickerStyles.picker-width;
|
||||
height: 24px;
|
||||
Rectangle {
|
||||
x: EditorSizeSettings.standard-margin - 6px;
|
||||
width: parent.width - EditorSizeSettings.standard-margin * 2;
|
||||
height: 100%;
|
||||
background: EditorPalette.text-color.with-alpha(0.1);
|
||||
border-radius: 6px;
|
||||
visible: ta.has-hover;
|
||||
}
|
||||
|
||||
ta := TouchArea { }
|
||||
|
||||
HorizontalLayout {
|
||||
y: (parent.height - self.height) / 2;
|
||||
height: 16px;
|
||||
alignment: start;
|
||||
Rectangle {
|
||||
width: EditorSizeSettings.standard-margin;
|
||||
}
|
||||
|
||||
ColorIndicator {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color <=> root.color;
|
||||
border-radius: 5px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: EditorSizeSettings.standard-margin;
|
||||
}
|
||||
|
||||
t := Text {
|
||||
color: EditorPalette.text-color;
|
||||
font-family: "Inter";
|
||||
font-size: 11px;
|
||||
text <=> root.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component SvgColorPicker inherits SimpleColumn {
|
||||
in property <string> filter-text;
|
||||
property <[PaletteEntry]> palettes: Api.filter-palettes(Api.palettes, filter-text);
|
||||
Rectangle {
|
||||
height: EditorSizeSettings.small-margin;
|
||||
}
|
||||
|
||||
ListView {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
for i[index] in palettes: SvgColorIndicator {
|
||||
name: i.name;
|
||||
color: i.value.value-brush;
|
||||
clicked => {
|
||||
WindowManager.apply-current-value(i.name);
|
||||
WindowManager.hide-floating-color-widget();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue