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: { background: background(layer, "default") },
87 }, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
88 }),
89 state: {
90 active: {
91 default: {
92 ...text(layer, "mono", "active", { size: "sm" }),
93 background: background(layer, "active"),
94 },
95 }
96 }
97 }),
98 leaveCall: interactive({
99 base: {
100 background: background(layer),
101 border: border(layer),
102 cornerRadius: 6,
103 margin: {
104 top: 1,
105 },
106 padding: {
107 top: 1,
108 bottom: 1,
109 left: 7,
110 right: 7,
111 },
112 ...text(layer, "sans", "variant", { size: "xs" }),
113 },
114 state: {
115 hovered: {
116 ...text(layer, "sans", "hovered", { size: "xs" }),
117 background: background(layer, "hovered"),
118 border: border(layer, "hovered"),
119 },
120 },
121 }),
122 contactRow: {
123 inactive: {
124 default: {
125 padding: {
126 left: sidePadding,
127 right: sidePadding,
128 },
129 },
130 },
131 active: {
132 default: {
133 background: background(layer, "active"),
134 padding: {
135 left: sidePadding,
136 right: sidePadding,
137 },
138 },
139 },
140 },
141
142 contactAvatar: {
143 cornerRadius: 10,
144 width: 18,
145 },
146 contactStatusFree: {
147 cornerRadius: 4,
148 padding: 4,
149 margin: { top: 12, left: 12 },
150 background: foreground(layer, "positive"),
151 },
152 contactStatusBusy: {
153 cornerRadius: 4,
154 padding: 4,
155 margin: { top: 12, left: 12 },
156 background: foreground(layer, "negative"),
157 },
158 contactUsername: {
159 ...text(layer, "mono", { size: "sm" }),
160 margin: {
161 left: nameMargin,
162 },
163 },
164 contactButtonSpacing: nameMargin,
165 contactButton: interactive({
166 base: { ...contactButton },
167 state: {
168 hovered: {
169 background: background(layer, "hovered"),
170 },
171 },
172 }),
173 disabledButton: {
174 ...contactButton,
175 background: background(layer, "on"),
176 color: foreground(layer, "on"),
177 },
178 callingIndicator: {
179 ...text(layer, "mono", "variant", { size: "xs" }),
180 },
181 treeBranch: toggleable({
182 base:
183 interactive({
184 base: {
185 color: borderColor(layer),
186 width: 1,
187 },
188 state: {
189 hovered: {
190 color: borderColor(layer),
191 },
192 },
193 }),
194 state: {
195 active: {
196 default: {
197 color: borderColor(layer),
198 },
199 }
200 }
201 }
202 ),
203 projectRow: toggleable({
204 base:
205 interactive({
206 base: {
207 ...projectRow,
208 background: background(layer),
209 icon: {
210 margin: { left: nameMargin },
211 color: foreground(layer, "variant"),
212 width: 12,
213 },
214 name: {
215 ...projectRow.name,
216 ...text(layer, "mono", { size: "sm" }),
217 },
218 },
219 state: {
220 hovered: {
221 background: background(layer, "hovered"),
222 },
223 },
224 }),
225 state: {
226 active: {
227 default: { background: background(layer, "active") },
228 }
229 }
230 }
231 ),
232 }
233}