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