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