vyn/selenite
1
Fork 0
mirror of https://codeberg.org/vyn/selenite.git synced 2025-07-01 09:13:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

First commit

Browse source
This commit is contained in:
Vyn 2024-10-16 11:40:45 +02:00
commit dd0c8c326a
16 changed files with 534 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

50
ActionButton.slint Normal file
View file

@ -0,0 +1,50 @@
import { Palette } from "Palette.slint";
import { VText } from "Text.slint";
export component VActionButton inherits Rectangle {
in property<image> icon-source;
in property<brush> icon-colorize: Palette.foreground;
in property<length> icon-size: 1rem;
in property<string> icon-svg;
in property<length> icon-svg-stroke-width: 2px;
in property enabled <=> ta.enabled;
callback clicked;
private property<bool> active: false;
background: enabled ? Palette.control-background : Palette.control-background.darker(0.2);
border-radius: 4px;
ta := TouchArea {
mouse-cursor: pointer;
clicked => {
active = !active;
root.clicked();
}
}
HorizontalLayout {
alignment: center;
spacing: 8px;
padding: 8px;
if root.icon-svg != "" : VerticalLayout {
alignment: center;
Path {
padding: 8px;
commands: root.icon-svg;
stroke: icon-colorize;
stroke-width: icon-svg-stroke-width;
width: icon-size;
height: icon-size;
fill: icon-colorize;
}
}
if root.icon-source.width != 0 : Image {
padding: 8px;
source: icon-source;
colorize: icon-colorize;
width: icon-size;
}
}
}

61
Button.slint Normal file
View file

@ -0,0 +1,61 @@
import { Palette } from "Palette.slint";
import { VText } from "Text.slint";
export component VButton inherits Rectangle {
in property<string> text;
in property<brush> text-color: Palette.foreground;
in property<length> text-size: 1rem;
in property<image> icon-source;
in property<brush> icon-colorize: Palette.foreground;
in property<length> icon-size: 1rem;
in property <string> icon-svg;
in property enabled <=> ta.enabled;
callback clicked;
private property<bool> active: false;
background: enabled ? Palette.control-background : Palette.control-background.darker(0.2);
border-radius: 4px;
ta := TouchArea {
mouse-cursor: pointer;
clicked => {
active = !active;
root.clicked();
}
}
HorizontalLayout {
alignment: center;
spacing: 8px;
padding: 16px;
padding-top: 4px;
padding-bottom: 4px;
if root.icon-svg != "" : VerticalLayout {
alignment: center;
Path {
padding: 8px;
commands: root.icon-svg;
stroke: icon-colorize;
stroke-width: 2px;
width: icon-size;
height: icon-size;
}
}
if root.icon-source.width != 0 : Image {
padding: 8px;
source: icon-source;
colorize: icon-colorize;
width: icon-size;
}
if root.text != "" : VerticalLayout {
VText {
text: root.text;
font-size: root.text-size;
color: root.text-color;
horizontal-alignment: center;
}
}
}
}

42
CheckBox.slint Normal file
View file

@ -0,0 +1,42 @@
import { VLabeledComponent } from "LabeledComponent.slint";
import { VText } from "Text.slint";
import { Palette } from "Palette.slint";
export component VCheckBox {
in-out property<string> text;
in property <brush> color <=> textComponent.color;
in-out property<bool> checked: false;
callback toggled(bool); // toggled(state: bool)
HorizontalLayout {
spacing: 8px;
VerticalLayout {
alignment: center;
if checked : Rectangle {
background: Palette.accent;
height: 1rem;
width: self.height;
border-radius: 32px;
}
if !checked : Rectangle {
border-color: Palette.accent;
border-width: 2px;
height: 1rem;
width: self.height;
border-radius: 32px;
}
}
textComponent := VText {
text: root.text;
vertical-alignment: center;
}
}
ta := TouchArea {
clicked => {
checked = !checked;
root.toggled(checked)
}
}
}

48
DatePicker.slint Normal file
View file

@ -0,0 +1,48 @@
import { Button, DatePickerPopup, Date, Palette } from "std-widgets.slint";
import { VLabeledComponent } from "LabeledComponent.slint";
import { VActionButton } from "ActionButton.slint";
import { VButton } from "Button.slint";
import { Svg } from "Svg.slint";
export component VDatePicker inherits VLabeledComponent {
in-out property<Date> date;
in-out property<string> dateDisplay;
pure function formatZeroPadding(number: int) -> string {
if (number < 10) {
return "0\{number}";
}
return number;
}
pure function getDateDisplay() -> string {
if (date.year == 0) {
return "Unscheduled";
}
return formatZeroPadding(date.day) + "/" + formatZeroPadding(date.month) + "/" + date.year;
}
function resetDate() {
date.year = 0;
date.month = 0;
date.day = 0;
}
HorizontalLayout {
VButton {
text: getDateDisplay();
enabled: root.enabled;
clicked => { taskDateInput.show() }
}
VActionButton {
icon-svg: Svg.reset;
icon-svg-stroke-width: 1px;
enabled: root.enabled;
clicked => { resetDate() }
}
}
taskDateInput := DatePickerPopup {
accepted(date) => { root.date = date }
}
}

60
LabeledComponent.slint Normal file
View file

@ -0,0 +1,60 @@
import { Palette } from "Palette.slint";
import { VText } from "Text.slint";
export component VLabeledComponent {
in property<string> label;
in property<length> label-size: 1rem;
in property <TextHorizontalAlignment> label-alignment: TextHorizontalAlignment.left;
in property<bool> enabled: true;
in property<bool> no-background: false;
function calc-background() -> brush {
if (no-background == true) {
return Palette.control-background.transparentize(1);
}
if (enabled == false) {
return Palette.control-background.darker(0.2);
}
return Palette.control-background;
}
VerticalLayout {
if root.label != "" : VerticalLayout {
padding-left: 4px;
padding-right: 4px;
VText {
text: root.label;
font-size: label-size;
horizontal-alignment: root.label-alignment;
}
}
Rectangle {
background: calc-background();
border-radius: 4px;
VerticalLayout {
@children
}
}
}
}
export component CommonComponentBackground {
in property<bool> enabled: true;
in property<bool> no-background: false;
function calc-background() -> brush {
if (no-background == true) {
return Palette.control-background.transparentize(1);
}
if (enabled == false) {
return Palette.control-background.darker(0.2);
}
return Palette.control-background;
}
Rectangle {
background: calc-background();
@children
}
}

43
Palette.slint Normal file
View file

@ -0,0 +1,43 @@
// OneDark
//black = "#181a1f",
//bg0 = "#282c34",
//bg1 = "#31353f",
//bg2 = "#393f4a",
//bg3 = "#3b3f4c",
//bg_d = "#21252b",
//bg_blue = "#73b8f1",
//bg_yellow = "#ebd09c",
//fg = "#abb2bf",
//purple = "#c678dd",
//green = "#98c379",
//orange = "#d19a66",
//blue = "#61afef",
//yellow = "#e5c07b",
//cyan = "#56b6c2",
//red = "#e86671",
//grey = "#5c6370",
//light_grey = "#848b98",
//dark_cyan = "#2b6f77",
//dark_red = "#993939",
//dark_yellow = "#93691d",
//dark_purple = "#8a3fa0",
//diff_add = "#31392b",
//diff_delete = "#382b2c",
//diff_change = "#1c3448",
//diff_text = "#2c5372",
// ----
export global Palette {
out property<brush> accent: Colors.cyan.darker(0.4);
out property<brush> foreground: #abb2bf;
out property<brush> foreground-hint: foreground.darker(0.2);
out property<brush> background: #282c34;
out property<brush> pane: #21252b;
out property<brush> control-foreground: #abb2bf;
out property<brush> control-background: #393f4a;
out property<brush> card-background: background.brighter(0.2);
out property<brush> green: Colors.greenyellow;
out property<brush> orange: Colors.orange;
out property<brush> red: Colors.red;
}

27
PopupIconMenu.slint Normal file
View file

@ -0,0 +1,27 @@
import { Palette } from "Palette.slint";
import { VButton } from "Button.slint";
export component VPopupIconMenu inherits Rectangle {
private property<length> popup-x: 200px;
private property<length> popup-y: 200px;
public function show(x: length, y: length) {
popup-x = x;
popup-y = y;
popup.show();
}
popup := PopupWindow {
x: popup-x;
y: popup-y;
Rectangle {
background: Palette.background.brighter(0.2);
border-radius: 8px;
clip: true;
HorizontalLayout {
alignment: start;
@children
}
}
}
}

0
README.md Normal file
View file

34
Slider.slint Normal file
View file

@ -0,0 +1,34 @@
import { VLabeledComponent } from "LabeledComponent.slint";
import { Palette } from "Palette.slint";
import { Slider } from "std-widgets.slint";
import { VText } from "Text.slint";
export component VSlider inherits VLabeledComponent {
in property <bool> show-value;
in-out property <float> value;
init => {
sliderComponent.value = root.value;
}
pure callback format-value(float) -> string;
format-value(value) => {
return "\{value}";
}
callback released <=> sliderComponent.released;
in property minimum <=> sliderComponent.minimum;
in property maximum <=> sliderComponent.maximum;
VerticalLayout {
spacing: 8px;
VText {
horizontal-alignment: center;
text: format-value(sliderComponent.value);
color: Palette.foreground-hint;
}
sliderComponent := Slider {
}
}
}

12
Svg.slint Normal file
View file

@ -0,0 +1,12 @@
export global Svg {
out property <string> burger: "M3 6h18M3 12h18M3 18h18";
out property <string> play: "M240 128a15.74 15.74 0 0 1-7.6 13.51L88.32 229.65a16 16 0 0 1-16.2.3A15.86 15.86 0 0 1 64 216.13V39.87a15.86 15.86 0 0 1 8.12-13.82a16 16 0 0 1 16.2.3l144.08 88.14A15.74 15.74 0 0 1 240 128";
out property <string> pause: "M216 48v160a16 16 0 0 1-16 16h-40a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h40a16 16 0 0 1 16 16M96 32H56a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h40a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16";
out property <string> reset: "M18 28A12 12 0 1 0 6 16v6.2l-3.6-3.6L1 20l6 6l6-6l-1.4-1.4L8 22.2V16a10 10 0 1 1 10 10Z";
out property <string> trash: "M19 4h-3.5l-1-1h-5l-1 1H5v2h14M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6z";
out property <string> plus: "M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z";
out property <string> pen: "M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1q-.15.15-.15.36M20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83l3.75 3.75z";
out property <string> visible: "M2.933 3.491C4.056 2.681 5.456 2 7 2s2.944.682 4.067 1.491c1.128.812 2.02 1.784 2.56 2.437l.005.005c.241.3.368.681.368 1.067s-.127.766-.368 1.067l-.005.005c-.54.653-1.432 1.625-2.56 2.437C9.944 11.32 8.544 12 7 12s-2.944-.682-4.067-1.49C1.805 9.696.913 8.724.373 8.071l-.005-.005A1.7 1.7 0 0 1 0 7c0-.386.127-.766.368-1.067l.005-.005c.54-.653 1.432-1.625 2.56-2.437M7 9.25a2.25 2.25 0 1 0 0-4.5a2.25 2.25 0 0 0 0 4.5";
out property <string> not-visible: "M.264 1.324a.75.75 0 0 1 1.06-1.06l2.629 2.628C4.86 2.393 5.893 2.04 7 2.04c1.532 0 2.92.677 4.035 1.48c1.118.805 2.003 1.769 2.539 2.417l.004.005c.24.298.366.675.366 1.058s-.126.76-.366 1.058l-.004.006a14.5 14.5 0 0 1-2.249 2.2l2.411 2.412a.75.75 0 0 1-1.06 1.06zm8.753 6.633a2.232 2.232 0 0 0-2.974-2.974zm-8.59-2.02c.319-.387.762-.885 1.305-1.395l7.104 7.104A5.7 5.7 0 0 1 7 11.96c-1.532 0-2.92-.676-4.035-1.479C1.847 9.675.962 8.711.426 8.064l-.004-.006A1.7 1.7 0 0 1 .056 7c0-.383.126-.76.366-1.058l.004-.005Z";
}

31
Tag.slint Normal file
View file

@ -0,0 +1,31 @@
import { Palette } from "Palette.slint";
import { VText } from "Text.slint";
export component VTag inherits Rectangle {
in property text <=> text-component.text;
in property text-color <=> text-component.color;
in property size <=> text-component.font-size;
in property background-color <=> self.background;
callback clicked;
background: Palette.control-background;
border-radius: 8px;
ta := TouchArea {
mouse-cursor: pointer;
clicked => {
root.clicked();
}
}
VerticalLayout {
padding-left: 8px;
padding-right: 8px;
alignment: center;
text-component := VText {
horizontal-alignment: center;
}
}
}

5
Text.slint Normal file
View file

@ -0,0 +1,5 @@
import { Palette } from "Palette.slint";
export component VText inherits Text {
color: Palette.foreground;
}

47
TextInput.slint Normal file
View file

@ -0,0 +1,47 @@
import { VLabeledComponent } from "LabeledComponent.slint";
import { Palette } from "Palette.slint";
import { VText } from "Text.slint";
export component VTextInput inherits VLabeledComponent {
in-out property text <=> textInputComponent.text;
out property has-focus <=> textInputComponent.has-focus;
in-out property placeholder <=> textInputComponent.accessible-placeholder-text;
in-out property wrap <=> textInputComponent.wrap;
callback accepted();
callback edited();
callback started-writting();
public function edit-text(text: string) {
root.text = text;
root.old-text = text;
}
private property <string> old-text: "";
VerticalLayout {
padding: 4px;
padding-left: 8px;
padding-right: 8px;
textInputComponent := TextInput {
color: Palette.foreground;
accepted => { root.accepted() }
edited => {
root.edited();
if (textInputComponent.text != "" && old-text == "") {
root.started-writting();
}
old-text = textInputComponent.text;
}
HorizontalLayout {
alignment: start;
VText {
visible: textInputComponent.text == "";
color: Palette.foreground-hint;
text: root.placeholder;
}
}
}
}
}

25
TimePicker.slint Normal file
View file

@ -0,0 +1,25 @@
import { Button, TimePickerPopup, Date, Palette, Time } from "std-widgets.slint";
import { VLabeledComponent } from "LabeledComponent.slint";
import { VButton } from "Button.slint";
export component VTimePicker inherits VLabeledComponent {
in-out property<Time> time;
in-out property<string> timeDisplay: formatZeroPadding(time.hour) + "h" + formatZeroPadding(time.minute);
pure function formatZeroPadding(number: int) -> string {
if (number < 10) {
return "0\{number}";
}
return number;
}
button := VButton {
text: timeDisplay;
enabled: root.enabled;
clicked => { timePickerPopup.show() }
}
timePickerPopup := TimePickerPopup {
accepted(time) => { root.time = time }
}
}

34
ToggleButton.slint Normal file
View file

@ -0,0 +1,34 @@
import { Palette } from "Palette.slint";
import { VText } from "Text.slint";
export component ToggleButton inherits Rectangle {
in property text <=> text-component.text;
in property text-color <=> text-component.color;
in property text-alignment <=> text-component.horizontal-alignment;
in property<bool> active: false;
callback clicked;
background: root.active ? Palette.control-background
: ta.has-hover ? Palette.control-background.transparentize(0.5)
: Colors.transparent;
border-radius: 4px;
ta := TouchArea {
mouse-cursor: pointer;
clicked => {
root.clicked();
}
}
VerticalLayout {
padding: 8px;
padding-top: 4px;
padding-bottom: 4px;
text-component := VText {
horizontal-alignment: center;
}
}
}

15
index.slint Normal file
View file

@ -0,0 +1,15 @@
export { Palette } from "Palette.slint";
export { VButton } from "Button.slint";
export { VActionButton } from "ActionButton.slint";
export { VText } from "Text.slint";
export { VCheckBox } from "CheckBox.slint";
export { VDatePicker } from "DatePicker.slint";
export { VTimePicker } from "TimePicker.slint";
export { VLabeledComponent, CommonComponentBackground } from "LabeledComponent.slint";
export { VPopupIconMenu } from "PopupIconMenu.slint";
export { VTag } from "Tag.slint";
export { VTextInput } from "TextInput.slint";
export { VSlider } from "Slider.slint";
export { ToggleButton } from "ToggleButton.slint";
export { Svg } from "Svg.slint";