mirror of
https://github.com/slint-ui/slint.git
synced 2025-10-21 07:41:51 +00:00
b763bf65ef
Previously to see errors or debug info using debug(...) required the output panel of a speperate IDE or for Slintpad to open the browser developer tools. This PR adds a dedicated panel to the live-preview. Log messages include a link back to the source file and line number for fast finding where the message was generated. Syntax errors also now show in the logs. By default the panel is minimised and logs will clear themselves on UI recompile. The last log message does show as a preview on the minimised bar meaning in many cases you never need to open the panel. --------- Co-authored-by: Tobias Hunger <tobias.hunger@slint.dev>
119 lines
5.8 KiB
Text
119 lines
5.8 KiB
Text
// 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 { Palette } from "std-widgets.slint";
|
|
|
|
export global Icons {
|
|
out property <image> add: @image-url("../assets/add.svg");
|
|
out property <image> chevron-down: @image-url("../assets/chevron-down.svg");
|
|
out property <image> inspect: @image-url("../assets/inspect.svg");
|
|
out property <image> search: @image-url("../assets/search.svg");
|
|
out property <image> filter: @image-url("../assets/filter.svg");
|
|
out property <image> sidebar-left-off: @image-url("../assets/layout-sidebar-left-off.svg");
|
|
out property <image> sidebar-right-off: @image-url("../assets/layout-sidebar-right-off.svg");
|
|
out property <image> sidebar-left: @image-url("../assets/layout-sidebar-left.svg");
|
|
out property <image> sidebar-right: @image-url("../assets/layout-sidebar-right.svg");
|
|
out property <image> sync: @image-url("../assets/sync.svg");
|
|
out property <image> black-square: @image-url("../assets/black-square.png");
|
|
out property <image> checkerboard: @image-url("../assets/background.svg");
|
|
out property <image> checkerboard-mini: @image-url("../assets/background-mini.svg");
|
|
out property <image> checkerboard-tiny: @image-url("../assets/background-tiny.svg");
|
|
out property <image> close: @image-url("../assets/close.svg");
|
|
out property <image> plus: @image-url("../assets/plus.svg");
|
|
out property <image> minus: @image-url("../assets/minus.svg");
|
|
out property <image> info: @image-url("../assets/info.svg");
|
|
out property <image> clear: @image-url("../assets/clear.svg");
|
|
}
|
|
|
|
export struct TextStyle {
|
|
font-size: relative-font-size,
|
|
font-weight: int,
|
|
}
|
|
|
|
export global EditorFontSettings {
|
|
out property <int> light-font-weight: 100;
|
|
out property <int> regular-font-weight: 400;
|
|
out property <int> semibold-font-weight: 700;
|
|
out property <int> bold-font-weight: 900;
|
|
|
|
out property <TextStyle> header: { font-size: 18 * 0.0769rem, font-weight: root.semibold-font-weight };
|
|
|
|
out property <TextStyle> body: { font-size: 14 * 0.0769rem, font-weight: root.regular-font-weight };
|
|
out property <TextStyle> label: { font-size: 14 * 0.0769rem, font-weight: root.regular-font-weight };
|
|
out property <TextStyle> label-sub: { font-size: 14 * 0.0769rem, font-weight: root.light-font-weight };
|
|
|
|
out property <TextStyle> body-strong: { font-size: 16 * 0.0769rem, font-weight: root.bold-font-weight };
|
|
}
|
|
|
|
export global EditorSpaceSettings {
|
|
in property <length> default-padding: 8px;
|
|
in property <length> default-spacing: 8px;
|
|
in property <length> group-indent: 25px;
|
|
in property <length> property-spacing: 5px;
|
|
}
|
|
|
|
export global EditorSizeSettings {
|
|
in property <length> default-icon-width: 20px;
|
|
in property <length> eightbit-int-size: 40px;
|
|
in property <length> float-size: 100px;
|
|
in property <length> header-height: 32px;
|
|
in property <length> hex-size: 80px;
|
|
in property <length> item-height: 24px;
|
|
in property <length> length-combo: 70px;
|
|
in property <length> min-prefix-text-width: 120px;
|
|
in property <length> property-bar-width: 360px;
|
|
in property <length> radius: 5px;
|
|
in property <length> side-bar-width: 280px;
|
|
out property <length> standard-margin: 16px;
|
|
out property <length> small-margin: 12px;
|
|
out property <length> property-border-radius: 5px;
|
|
}
|
|
|
|
export global PickerStyles {
|
|
property <bool> dark-scheme: Palette.color-scheme == ColorScheme.dark;
|
|
out property <length> picker-width: 240px;
|
|
out property <color> focused-color: #0c8ce9;
|
|
out property <color> focused-stop-color: dark-scheme ? #4a5878 : #b5ccdd;
|
|
out property <color> slider-color: dark-scheme ? EditorPalette.section-color : #b5ccdd;
|
|
}
|
|
|
|
export global ConsoleStyles {
|
|
property <bool> dark-scheme: Palette.color-scheme == ColorScheme.dark;
|
|
out property <color> header-background: dark-scheme ? #2c2c2c : #eaeaea;
|
|
out property <color> divider-line: dark-scheme ? #454a54 : #e0e0e0;
|
|
out property <color> log-background: dark-scheme ? #262626 : #ffffff;
|
|
out property <color> text-color: dark-scheme ? #cccccc : #525252;
|
|
out property <color> toolbar-background: dark-scheme ? #2c2c2c : #f3f3f3;
|
|
out property <length> header-height: 28px;
|
|
out property <length> log-height: 120px;
|
|
out property <color> slint-blue: #0088ff;
|
|
}
|
|
|
|
export global EditorPalette {
|
|
|
|
out property <bool> dark-scheme: Palette.color-scheme == ColorScheme.dark;
|
|
|
|
out property <brush> drop-mark-background: #00ff0080;
|
|
out property <brush> drop-mark-foreground: #00ff00ff;
|
|
|
|
out property <brush> general-element-selection-primary: #3884ed;
|
|
out property <brush> general-element-selection-secondary: #86b5fc;
|
|
out property <brush> general-element-selection-selected: Palette.accent-foreground;
|
|
out property <brush> interactive-element-selection-primary: #8fff79;
|
|
out property <brush> interactive-element-selection-secondary: #48dc2a;
|
|
out property <brush> layout-element-selection-primary: #FFC5FC;
|
|
out property <brush> layout-element-selection-secondary: #ff8af9;
|
|
out property <brush> shadow-gradient: @linear-gradient(0deg, Palette.foreground.transparentize(1), Palette.foreground.transparentize(0.75));
|
|
|
|
out property <brush> state-hovered: dark-scheme ? #ffffff.with-alpha(0.1) : #000000.with-alpha(0.1);
|
|
out property <brush> state-pressed: dark-scheme ? #ffffff.with-alpha(0.2) : #000000.with-alpha(0.2);
|
|
out property <color> text-color: dark-scheme ? white : #383838;
|
|
out property <color> section-color: dark-scheme ? #3f3f3f : #e6e6e6;
|
|
out property <color> divider-color: dark-scheme ? #444444 : #e6e6e6;
|
|
}
|
|
|
|
export global EditorAnimationSettings {
|
|
out property <duration> resize-duration: 200ms;
|
|
out property <duration> color-duration: 200ms;
|
|
out property <duration> rotation-duration: 200ms;
|
|
}
|