Skip to content

Commit 9cb3eed

Browse files
cmuenchcmuench
committed
feat(options): implement collapsible custom payload section with improved styling
1 parent 8289d28 commit 9cb3eed

4 files changed

Lines changed: 245 additions & 66 deletions

File tree

‎options/options.css‎

Lines changed: 148 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,56 +2,74 @@ body {
22
font-family:
33
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
44
sans-serif;
5-
background-color: #f0f2f5;
6-
color: #1c1e21;
5+
background-color: #f5f7fa;
6+
color: #333;
77
margin: 0;
88
padding: 20px;
9+
line-height: 1.6;
910
}
1011

1112
.container {
1213
max-width: 800px;
1314
margin: 20px auto;
1415
background-color: #fff;
1516
padding: 30px;
16-
border-radius: 8px;
17-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
17+
border-radius: 12px;
18+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
1819
}
1920

2021
h1,
2122
h2 {
22-
color: #0052cc;
23-
border-bottom: 2px solid #f0f2f5;
24-
padding-bottom: 10px;
25-
margin-bottom: 20px;
23+
color: #2563eb;
24+
border-bottom: 2px solid #e5e7eb;
25+
padding-bottom: 12px;
26+
margin-bottom: 24px;
2627
}
2728

2829
h1 {
2930
font-size: 2em;
31+
font-weight: 700;
3032
}
3133

3234
h2 {
3335
font-size: 1.5em;
34-
margin-top: 30px;
36+
margin-top: 32px;
37+
font-weight: 600;
3538
}
3639

3740
.form-group {
38-
margin-bottom: 15px;
41+
margin-bottom: 20px;
42+
border-radius: 8px;
43+
transition: all 0.3s ease;
3944
}
4045

4146
label {
4247
display: block;
4348
font-weight: 600;
44-
margin-bottom: 5px;
49+
margin-bottom: 8px;
50+
color: #4b5563;
4551
}
4652

4753
input[type="text"],
4854
input[type="url"],
55+
select,
4956
textarea {
5057
width: 100%;
51-
padding: 10px;
52-
border: 1px solid #ddd;
53-
border-radius: 6px;
58+
padding: 12px;
59+
border: 1px solid #d1d5db;
60+
border-radius: 8px;
5461
box-sizing: border-box;
62+
font-size: 1em;
63+
transition: border-color 0.3s, box-shadow 0.3s;
64+
}
65+
66+
input[type="text"]:focus,
67+
input[type="url"]:focus,
68+
select:focus,
69+
textarea:focus {
70+
outline: none;
71+
border-color: #3b82f6;
72+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
5573
}
5674

5775
textarea {
@@ -61,18 +79,73 @@ textarea {
6179
}
6280

6381
button {
64-
background-color: #007bff;
82+
background-color: #3b82f6;
6583
color: white;
66-
padding: 10px 20px;
84+
padding: 12px 24px;
6785
border: none;
68-
border-radius: 6px;
86+
border-radius: 8px;
6987
cursor: pointer;
7088
font-size: 1em;
71-
transition: background-color 0.2s;
89+
font-weight: 500;
90+
transition: all 0.2s;
91+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
7292
}
7393

7494
button:hover {
75-
background-color: #0056b3;
95+
background-color: #2563eb;
96+
transform: translateY(-1px);
97+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
98+
}
99+
100+
/* Collapsible section styles */
101+
.collapsible-header {
102+
display: flex;
103+
justify-content: space-between;
104+
align-items: center;
105+
cursor: pointer;
106+
padding: 8px 0;
107+
}
108+
109+
.toggle-btn {
110+
background: none;
111+
border: none;
112+
color: #3b82f6;
113+
font-size: 1.2em;
114+
font-weight: bold;
115+
padding: 0 8px;
116+
cursor: pointer;
117+
box-shadow: none;
118+
transition: transform 0.3s;
119+
}
120+
121+
.toggle-btn:hover {
122+
background: none;
123+
color: #2563eb;
124+
transform: none;
125+
box-shadow: none;
126+
}
127+
128+
.toggle-icon {
129+
display: inline-block;
130+
transition: transform 0.3s;
131+
}
132+
133+
.toggle-btn[aria-expanded="true"] .toggle-icon {
134+
transform: rotate(45deg);
135+
}
136+
137+
.collapsible-content {
138+
overflow: hidden;
139+
transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
140+
max-height: 2000px;
141+
opacity: 1;
142+
margin-top: 10px;
143+
}
144+
145+
.collapsible-content.collapsed {
146+
max-height: 0;
147+
opacity: 0;
148+
margin-top: 0;
76149
}
77150

78151
#webhook-list {
@@ -84,8 +157,15 @@ button:hover {
84157
display: flex;
85158
justify-content: space-between;
86159
align-items: center;
87-
padding: 15px;
88-
border-bottom: 1px solid #eee;
160+
padding: 16px;
161+
border-bottom: 1px solid #e5e7eb;
162+
transition: background-color 0.2s;
163+
border-radius: 8px;
164+
margin-bottom: 8px;
165+
}
166+
167+
#webhook-list li:hover {
168+
background-color: #f9fafb;
89169
}
90170

91171
#webhook-list li:last-child {
@@ -95,37 +175,52 @@ button:hover {
95175
.webhook-info {
96176
display: flex;
97177
flex-direction: column;
178+
flex: 1;
179+
margin-right: 16px;
98180
}
99181

100182
.webhook-info .label {
101-
font-weight: bold;
183+
font-weight: 600;
102184
font-size: 1.1em;
185+
color: #1f2937;
186+
margin-bottom: 4px;
103187
}
104188

105189
.webhook-info .url {
106-
color: #606770;
190+
color: #6b7280;
107191
font-size: 0.9em;
108192
word-break: break-all;
109193
}
110194

195+
.edit-btn {
196+
margin-right: 8px;
197+
background-color: #10b981;
198+
}
199+
200+
.edit-btn:hover {
201+
background-color: #059669;
202+
}
203+
111204
.delete-btn {
112-
background-color: #dc3545;
205+
background-color: #ef4444;
113206
}
114207

115208
.delete-btn:hover {
116-
background-color: #c82333;
209+
background-color: #dc2626;
117210
}
118211

119212
.hidden {
120-
display: none;
213+
display: none !important;
121214
}
122215

123216
#no-webhooks-message {
124-
color: #606770;
125-
padding: 15px;
217+
color: #6b7280;
218+
padding: 20px;
126219
text-align: center;
127-
background-color: #f8f9fa;
128-
border-radius: 6px;
220+
background-color: #f9fafb;
221+
border-radius: 8px;
222+
border: 1px dashed #d1d5db;
223+
margin-top: 16px;
129224
}
130225

131226
.textarea-container {
@@ -135,45 +230,55 @@ button:hover {
135230
.autocomplete-container {
136231
position: absolute;
137232
background-color: white;
138-
border: 1px solid #ddd;
139-
border-radius: 4px;
140-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
233+
border: 1px solid #d1d5db;
234+
border-radius: 8px;
235+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
141236
max-height: 200px;
142237
overflow-y: auto;
143238
width: 100%;
144239
z-index: 10;
145240
}
146241

147242
.autocomplete-item {
148-
padding: 8px 12px;
243+
padding: 10px 14px;
149244
cursor: pointer;
245+
transition: background-color 0.2s;
150246
}
151247

152248
.autocomplete-item:hover {
153-
background-color: #f0f2f5;
249+
background-color: #f3f4f6;
250+
}
251+
252+
.autocomplete-item.active {
253+
background-color: #e5e7eb;
154254
}
155255

156256
.variables-help {
157-
margin-top: 10px;
158-
padding: 10px;
159-
background-color: #f8f9fa;
160-
border-radius: 6px;
257+
margin-top: 16px;
258+
padding: 16px;
259+
background-color: #f3f4f6;
260+
border-radius: 8px;
161261
font-size: 0.9em;
262+
border-left: 4px solid #3b82f6;
162263
}
163264

164265
.variables-help p {
165266
margin-top: 0;
166267
font-weight: 600;
268+
color: #4b5563;
167269
}
168270

169271
.variables-help ul {
170-
margin: 0;
272+
margin: 8px 0 0;
171273
padding-left: 20px;
274+
color: #4b5563;
172275
}
173276

174277
.variables-help code {
175-
background-color: #e9ecef;
176-
padding: 2px 4px;
177-
border-radius: 3px;
278+
background-color: #e5e7eb;
279+
padding: 3px 6px;
280+
border-radius: 4px;
178281
font-family: monospace;
282+
color: #2563eb;
283+
font-size: 0.9em;
179284
}

‎options/options.html‎

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -52,28 +52,35 @@ <h2>__MSG_optionsAddWebhookHeader__</h2>
5252
<input type="text" id="webhook-identifier" placeholder="Optional identifier" />
5353
</div>
5454
<div class="form-group">
55-
<label for="webhook-custom-payload">Custom Payload (optional)</label>
56-
<div class="textarea-container">
57-
<textarea id="webhook-custom-payload" placeholder="Enter custom JSON payload"></textarea>
58-
<div id="variables-autocomplete" class="autocomplete-container hidden"></div>
55+
<div class="collapsible-header">
56+
<label for="webhook-custom-payload">Custom Payload (optional)</label>
57+
<button type="button" id="toggle-custom-payload" class="toggle-btn" aria-expanded="false">
58+
<span class="toggle-icon">+</span>
59+
</button>
5960
</div>
60-
<div class="variables-help">
61-
<p>Available variables:</p>
62-
<ul>
63-
<li><code>{{tab.title}}</code> - Current tab title</li>
64-
<li><code>{{tab.url}}</code> - Current tab URL</li>
65-
<li><code>{{tab.id}}</code> - Current tab ID</li>
66-
<li><code>{{tab.windowId}}</code> - Current window ID</li>
67-
<li><code>{{tab.index}}</code> - Tab index</li>
68-
<li><code>{{tab.pinned}}</code> - Is tab pinned</li>
69-
<li><code>{{tab.audible}}</code> - Is tab playing audio</li>
70-
<li><code>{{tab.incognito}}</code> - Is tab in incognito mode</li>
71-
<li><code>{{tab.status}}</code> - Tab loading status</li>
72-
<li><code>{{browser}}</code> - Browser information</li>
73-
<li><code>{{platform}}</code> - Platform information</li>
74-
<li><code>{{triggeredAt}}</code> - Timestamp when triggered</li>
75-
<li><code>{{identifier}}</code> - Custom identifier</li>
76-
</ul>
61+
<div id="custom-payload-content" class="collapsible-content collapsed">
62+
<div class="textarea-container">
63+
<textarea id="webhook-custom-payload" placeholder="Enter custom JSON payload"></textarea>
64+
<div id="variables-autocomplete" class="autocomplete-container hidden"></div>
65+
</div>
66+
<div class="variables-help">
67+
<p>Available variables:</p>
68+
<ul>
69+
<li><code>{{tab.title}}</code> - Current tab title</li>
70+
<li><code>{{tab.url}}</code> - Current tab URL</li>
71+
<li><code>{{tab.id}}</code> - Current tab ID</li>
72+
<li><code>{{tab.windowId}}</code> - Current window ID</li>
73+
<li><code>{{tab.index}}</code> - Tab index</li>
74+
<li><code>{{tab.pinned}}</code> - Is tab pinned</li>
75+
<li><code>{{tab.audible}}</code> - Is tab playing audio</li>
76+
<li><code>{{tab.incognito}}</code> - Is tab in incognito mode</li>
77+
<li><code>{{tab.status}}</code> - Tab loading status</li>
78+
<li><code>{{browser}}</code> - Browser information</li>
79+
<li><code>{{platform}}</code> - Platform information</li>
80+
<li><code>{{triggeredAt}}</code> - Timestamp when triggered</li>
81+
<li><code>{{identifier}}</code> - Custom identifier</li>
82+
</ul>
83+
</div>
7784
</div>
7885
</div>
7986
<button type="submit">__MSG_optionsSaveButton__</button>

0 commit comments

Comments
 (0)