1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
3
4import { CupertinoPalette, CupertinoFontSettings, Icons, CupertinoSizeSettings } from "styling.slint";
5
6export component FocusBorder inherits Rectangle {
7 in property <bool> has-focus;
8
9 background: CupertinoPalette.tertiary-accent-background;
10 opacity: 0;
11
12 animate opacity { duration: 150ms; }
13
14 states [
15 focused when root.has-focus : {
16 opacity: 0.5;
17 }
18 ]
19}
20
21export component MenuBorder inherits Rectangle {
22 drop-shadow-blur: 22px;
23 drop-shadow-color: #00000066;
24 drop-shadow-offset-y: 0.5px;
25 background: CupertinoPalette.background;
26 border-radius: 6px;
27
28 Rectangle {
29 width: 100%;
30 height: 100%;
31 border-radius: parent.border-radius;
32 background: CupertinoPalette.background;
33
34 @children
35 }
36
37 Rectangle {
38 width: 100%;
39 height: 100%;
40 border-radius: parent.border-radius;
41 border-width: 1px;
42 border-color: CupertinoPalette.popup-border;
43 }
44}
45
46export component ListItem {
47 in property <bool> is-selected;
48 in property <StandardListViewItem> item;
49 in property <length> padding-horizontal: 12px;
50 in property <bool> has-focus;
51 in property <bool> has-hover;
52 in property <bool> pressed;
53 in property <int> index;
54 in property <length> pressed-x;
55 in property <length> pressed-y;
56
57 min-width: i-layout.min-width;
58 min-height: max(CupertinoSizeSettings.item-height, i-layout.min-height);
59 vertical-stretch: 0;
60 horizontal-stretch: 1;
61 accessible-role: list-item;
62 accessible-label: root.item.text;
63 accessible-item-selectable: true;
64 accessible-item-selected: root.is-selected;
65 accessible-item-index: root.index;
66
67 states [
68 has-focus when root.has-focus : {
69 i-background.background: CupertinoPalette.tertiary-accent-background;
70 }
71 hover when root.has-hover : {
72 i-background.background: CupertinoPalette.accent-background;
73 i-text.color: CupertinoPalette.accent-foreground;
74 i-icon.colorize: CupertinoPalette.accent-foreground;
75 }
76 ]
77
78 i-layout := VerticalLayout {
79 padding-left: root.padding-horizontal;
80 padding-right: root.padding-horizontal;
81
82 i-background := Rectangle {
83 background: transparent;
84 border-radius: 5px;
85
86 HorizontalLayout {
87 spacing: 4px;
88 padding-left: 4px;
89 padding-right: 4px;
90
91 i-icon := Image {
92 image-fit: contain;
93 source: Icons.check-mark;
94 colorize: CupertinoPalette.foreground;
95 visible: root.is-selected;
96 width: 10px;
97 accessible-role: none;
98 }
99
100 i-text := Text {
101 text: root.item.text;
102 color: CupertinoPalette.foreground;
103 font-size: CupertinoFontSettings.body.font-size;
104 font-weight: CupertinoFontSettings.body.font-weight;
105 vertical-alignment: center;
106 horizontal-alignment: left;
107 overflow: elide;
108 accessible-role: none;
109 }
110 }
111 }
112 }
113
114 @children
115}
116