1import { ColorScheme } from "../theme/color_scheme"
2import {
3 background,
4 border,
5 border_color,
6 foreground,
7 text,
8} from "./components"
9import { interactive, toggleable } from "../element"
10export default function contacts_panel(theme: ColorScheme): any {
11 const name_margin = 8
12 const side_padding = 12
13
14 const layer = theme.middle
15
16 const contact_button = {
17 background: background(layer, "on"),
18 color: foreground(layer, "on"),
19 icon_width: 8,
20 button_width: 16,
21 corner_radius: 8,
22 }
23 const project_row = {
24 guest_avatar_spacing: 4,
25 height: 24,
26 guest_avatar: {
27 corner_radius: 8,
28 width: 14,
29 },
30 name: {
31 ...text(layer, "mono", { size: "sm" }),
32 margin: {
33 left: name_margin,
34 right: 6,
35 },
36 },
37 guests: {
38 margin: {
39 left: name_margin,
40 right: name_margin,
41 },
42 },
43 padding: {
44 left: side_padding,
45 right: side_padding,
46 },
47 }
48
49 return {
50 background: background(layer),
51 padding: { top: 12 },
52 user_query_editor: {
53 background: background(layer, "on"),
54 corner_radius: 6,
55 text: text(layer, "mono", "on"),
56 placeholder_text: text(layer, "mono", "on", "disabled", {
57 size: "xs",
58 }),
59 selection: theme.players[0],
60 border: border(layer, "on"),
61 padding: {
62 bottom: 4,
63 left: 8,
64 right: 8,
65 top: 4,
66 },
67 margin: {
68 left: 6,
69 },
70 },
71 user_query_editor_height: 33,
72 add_contact_button: {
73 margin: { left: 6, right: 12 },
74 color: foreground(layer, "on"),
75 button_width: 28,
76 icon_width: 16,
77 },
78 row_height: 28,
79 section_icon_size: 8,
80 header_row: toggleable({
81 base: interactive({
82 base: {
83 ...text(layer, "mono", { size: "sm" }),
84 margin: { top: 14 },
85 padding: {
86 left: side_padding,
87 right: side_padding,
88 },
89 background: background(layer, "default"), // posiewic: breaking change
90 },
91 state: {
92 hovered: {
93 background: background(layer, "hovered"),
94 },
95 clicked: {
96 background: background(layer, "pressed"),
97 },
98 }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
99 }),
100 state: {
101 active: {
102 default: {
103 ...text(layer, "mono", "active", { size: "sm" }),
104 background: background(layer, "active"),
105 },
106 hovered: {
107 background: background(layer, "hovered"),
108 },
109 clicked: {
110 background: background(layer, "pressed"),
111 },
112 },
113 },
114 }),
115 leave_call: interactive({
116 base: {
117 background: background(layer),
118 border: border(layer),
119 corner_radius: 6,
120 margin: {
121 top: 1,
122 },
123 padding: {
124 top: 1,
125 bottom: 1,
126 left: 7,
127 right: 7,
128 },
129 ...text(layer, "sans", "variant", { size: "xs" }),
130 },
131 state: {
132 hovered: {
133 ...text(layer, "sans", "hovered", { size: "xs" }),
134 background: background(layer, "hovered"),
135 border: border(layer, "hovered"),
136 },
137 },
138 }),
139 contact_row: {
140 inactive: {
141 default: {
142 padding: {
143 left: side_padding,
144 right: side_padding,
145 },
146 },
147 },
148 active: {
149 default: {
150 background: background(layer, "active"),
151 padding: {
152 left: side_padding,
153 right: side_padding,
154 },
155 },
156 },
157 },
158 contact_avatar: {
159 corner_radius: 10,
160 width: 18,
161 },
162 contact_status_free: {
163 corner_radius: 4,
164 padding: 4,
165 margin: { top: 12, left: 12 },
166 background: foreground(layer, "positive"),
167 },
168 contact_status_busy: {
169 corner_radius: 4,
170 padding: 4,
171 margin: { top: 12, left: 12 },
172 background: foreground(layer, "negative"),
173 },
174 contact_username: {
175 ...text(layer, "mono", { size: "sm" }),
176 margin: {
177 left: name_margin,
178 },
179 },
180 contact_button_spacing: name_margin,
181 contact_button: interactive({
182 base: { ...contact_button },
183 state: {
184 hovered: {
185 background: background(layer, "hovered"),
186 },
187 },
188 }),
189 disabled_button: {
190 ...contact_button,
191 background: background(layer, "on"),
192 color: foreground(layer, "on"),
193 },
194 calling_indicator: {
195 ...text(layer, "mono", "variant", { size: "xs" }),
196 },
197 tree_branch: toggleable({
198 base: interactive({
199 base: {
200 color: border_color(layer),
201 width: 1,
202 },
203 state: {
204 hovered: {
205 color: border_color(layer),
206 },
207 },
208 }),
209 state: {
210 active: {
211 default: {
212 color: border_color(layer),
213 },
214 },
215 },
216 }),
217 project_row: toggleable({
218 base: interactive({
219 base: {
220 ...project_row,
221 background: background(layer),
222 icon: {
223 margin: { left: name_margin },
224 color: foreground(layer, "variant"),
225 width: 12,
226 },
227 name: {
228 ...project_row.name,
229 ...text(layer, "mono", { size: "sm" }),
230 },
231 },
232 state: {
233 hovered: {
234 background: background(layer, "hovered"),
235 },
236 },
237 }),
238 state: {
239 active: {
240 default: { background: background(layer, "active") },
241 },
242 },
243 }),
244 }
245}