plugin togglers polish
Alessandro committed
Mar 16, 2026 at 18:24 UTC
462997285aa29c3e6f2d8de4bb1073e6c17e4eae
3 files changed
+101
-51
webui/components/plugins/list/plugin-list.html
+12
-2
@@ -156,16 +156,16 @@
156
<span>License</span>
157
</button>
158
</template>
159
+ <x-extension id="plugins-list-dropdown-end"></x-extension>
160
<template x-if="plugin.is_custom">
161
<button type="button"
161
- class="dropdown-item"
162
+ class="dropdown-item plugin-dropdown-delete"
163
title="Delete"
164
@click="$confirmClick($event, () => { $store.pluginListStore.deletePlugin(plugin); actionsOpen = false; })">
165
<span class="material-symbols-outlined">delete</span>
166
<span>Delete</span>
167
</button>
168
</template>
168
- <x-extension id="plugins-list-dropdown-end"></x-extension>
169
</div>
170
</div>
171
</div>
@@ -348,6 +348,16 @@
348
top: calc(100% - 1px);
349
}
350
351
+ .plugin-actions-dropdown .plugin-dropdown-delete,
352
+ .plugin-actions-dropdown .plugin-dropdown-delete .material-symbols-outlined {
353
+ color: var(--color-accent);
354
+ opacity: 1;
355
+ }
356
+
357
+ .plugin-actions-dropdown .plugin-dropdown-delete:hover {
358
+ background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
359
+ }
360
+
361
.plugin-footer-row {
362
display: flex;
363
align-items: center;
webui/components/plugins/plugin-settings.html
+46
-29
@@ -24,8 +24,22 @@
24
<div class="plugin-settings-scope-section"
25
x-show="context.perProjectConfig || context.perAgentConfig">
26
<div class="plugin-settings-scope-header">
27
- <div class="plugin-settings-scope-title">Settings scope</div>
28
- <div class="plugin-settings-scope-desc">This plugin supports settings per project or agent profile.</div>
27
+ <div class="plugin-settings-scope-header-copy">
28
+ <div class="plugin-settings-scope-title">Settings scope</div>
29
+ <div class="plugin-settings-scope-desc">This plugin supports settings per project or agent profile.</div>
30
+ </div>
31
+ <div class="plugin-settings-scope-header-toggle"
32
+ x-show="$store.pluginToggle && !$store.pluginToggle.alwaysEnabled">
33
+ <span class="plugin-settings-toolbar-label">Enabled</span>
34
+ <label class="toggle">
35
+ <input type="checkbox"
36
+ :checked="$store.pluginToggle?.status === 'enabled'"
37
+ :disabled="$store.pluginToggle?.isSaving"
38
+ @change="$store.pluginToggle.setEnabled($event.target.checked)">
39
+ <span class="toggler"></span>
40
+ </label>
41
+ <span class="plugin-toggle-status-text" x-text="$store.pluginToggle?.statusLabel"></span>
42
+ </div>
43
</div>
44
<div class="plugin-settings-toolbar">
45
<div class="plugin-settings-toolbar-row">
@@ -61,22 +75,6 @@
75
</button>
76
77
</div>
64
-
65
- <!-- Activation row: ON/OFF toggle -->
66
- <div class="plugin-settings-toolbar plugin-activation-toolbar" x-show="$store.pluginToggle">
67
- <div class="plugin-settings-toolbar-row">
68
- <div class="plugin-activation-toggle-group">
69
- <label class="toggle">
70
- <input type="checkbox"
71
- :checked="$store.pluginToggle?.status === 'enabled'"
72
- :disabled="$store.pluginToggle?.alwaysEnabled || $store.pluginToggle?.isSaving"
73
- @change="$store.pluginToggle.setEnabled($event.target.checked)">
74
- <span class="toggler"></span>
75
- </label>
76
- <span class="plugin-toggle-status-text" x-text="$store.pluginToggle?.statusLabel"></span>
77
- </div>
78
- </div>
79
- </div>
78
</div>
79
80
<div x-show="context.scopeMismatchMessage" class="plugin-settings-scope-info">
@@ -223,11 +221,28 @@
221
}
222
223
.plugin-settings-scope-header {
224
+ display: flex;
225
+ align-items: flex-start;
226
+ justify-content: space-between;
227
+ gap: 1rem;
228
padding: 0.75rem 1rem;
229
border-bottom: 1px solid var(--color-border);
230
background: var(--color-bg-secondary);
231
}
232
233
+ .plugin-settings-scope-header-copy {
234
+ min-width: 0;
235
+ }
236
+
237
+ .plugin-settings-scope-header-toggle {
238
+ display: flex;
239
+ align-items: center;
240
+ gap: 0.75rem;
241
+ margin-left: auto;
242
+ flex: 0 0 auto;
243
+ white-space: nowrap;
244
+ }
245
+
246
.plugin-settings-scope-title {
247
font-weight: 600;
248
font-size: var(--font-size-normal);
@@ -240,22 +255,24 @@
255
margin-top: 0.25rem;
256
}
257
243
- .plugin-activation-toolbar {
244
- padding-top: 0.75rem;
245
- padding-bottom: 0.75rem;
246
- }
247
-
248
- .plugin-activation-toggle-group {
249
- display: flex;
250
- align-items: center;
251
- gap: 0.75rem;
252
- }
253
-
258
.plugin-toggle-status-text {
259
font-weight: 600;
260
color: var(--color-text-primary);
261
min-width: 2rem;
262
}
263
+
264
+ @media (max-width: 640px) {
265
+ .plugin-settings-scope-header {
266
+ flex-direction: column;
267
+ align-items: stretch;
268
+ }
269
+
270
+ .plugin-settings-scope-header-toggle {
271
+ margin-left: 0;
272
+ justify-content: flex-start;
273
+ white-space: normal;
274
+ }
275
+ }
276
</style>
277
</body>
278
</html>
webui/components/plugins/toggle/plugin-toggle-advanced.html
+43
-20
@@ -28,8 +28,21 @@
28
<!-- Scope selector + per-scope ON/OFF -->
29
<div class="plugin-settings-scope-section">
30
<div class="plugin-settings-scope-header">
31
- <div class="plugin-settings-scope-title">Scope</div>
32
- <div class="plugin-settings-scope-desc">Select which project or agent profile to configure.</div>
31
+ <div class="plugin-settings-scope-header-copy">
32
+ <div class="plugin-settings-scope-title">Scope</div>
33
+ <div class="plugin-settings-scope-desc">Select which project or agent profile to configure.</div>
34
+ </div>
35
+ <div class="plugin-settings-scope-header-toggle">
36
+ <span class="plugin-settings-toolbar-label">Enabled</span>
37
+ <label class="toggle" :class="{ 'disabled-appearance': $store.pluginToggle.alwaysEnabled || $store.pluginToggle.isSaving }">
38
+ <input type="checkbox"
39
+ :checked="$store.pluginToggle.status === 'enabled'"
40
+ :disabled="$store.pluginToggle.alwaysEnabled || $store.pluginToggle.isSaving"
41
+ @change="$store.pluginToggle.setEnabled($event.target.checked)">
42
+ <span class="toggler"></span>
43
+ </label>
44
+ <span class="plugin-toggle-status-text" x-text="$store.pluginToggle.statusLabel"></span>
45
+ </div>
46
</div>
47
<div class="plugin-settings-toolbar">
48
<div class="plugin-settings-toolbar-row">
@@ -58,17 +71,6 @@
71
</select>
72
</label>
73
61
- <div class="plugin-settings-toolbar-item plugin-status-toggle-item">
62
- <label class="toggle" :class="{ 'disabled-appearance': $store.pluginToggle.alwaysEnabled || $store.pluginToggle.isSaving }">
63
- <input type="checkbox"
64
- :checked="$store.pluginToggle.status === 'enabled'"
65
- :disabled="$store.pluginToggle.alwaysEnabled || $store.pluginToggle.isSaving"
66
- @change="$store.pluginToggle.setEnabled($event.target.checked)">
67
- <span class="toggler"></span>
68
- </label>
69
- <span class="plugin-toggle-status-text" x-text="$store.pluginToggle.statusLabel"></span>
70
- </div>
71
-
74
<button type="button" class="button plugin-settings-toolbar-button" title="View all scope configs" @click="$store.pluginToggle.openConfigListModal()">
75
<span class="icon material-symbols-outlined">list</span>
76
</button>
@@ -117,11 +119,28 @@
119
}
120
121
.plugin-settings-scope-header {
122
+ display: flex;
123
+ align-items: flex-start;
124
+ justify-content: space-between;
125
+ gap: 1rem;
126
padding: 0.75rem 1rem;
127
border-bottom: 1px solid var(--color-border);
128
background: var(--color-bg-secondary);
129
}
130
131
+ .plugin-settings-scope-header-copy {
132
+ min-width: 0;
133
+ }
134
+
135
+ .plugin-settings-scope-header-toggle {
136
+ display: flex;
137
+ align-items: center;
138
+ gap: 0.75rem;
139
+ margin-left: auto;
140
+ flex: 0 0 auto;
141
+ white-space: nowrap;
142
+ }
143
+
144
.plugin-settings-scope-title {
145
font-weight: 600;
146
font-size: var(--font-size-normal);
@@ -181,6 +200,17 @@
200
}
201
202
@media (max-width: 640px) {
203
+ .plugin-settings-scope-header {
204
+ flex-direction: column;
205
+ align-items: stretch;
206
+ }
207
+
208
+ .plugin-settings-scope-header-toggle {
209
+ margin-left: 0;
210
+ justify-content: flex-start;
211
+ white-space: normal;
212
+ }
213
+
214
.plugin-settings-toolbar-item {
215
flex-basis: 100%;
216
min-width: 0;
@@ -217,13 +247,6 @@
247
to { transform: rotate(360deg); }
248
}
249
220
- .plugin-status-toggle-item {
221
- display: flex;
222
- align-items: center;
223
- gap: 0.75rem;
224
- flex: 0 0 auto;
225
- }
226
-
250
.disabled-appearance {
251
opacity: 0.6;
252
}