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