ColorField
Massimo Melina committed
Oct 10, 2024 at 23:44 UTC
794471b6ed105fa66f7dbc5e907bf6edd4104d49
1 file changed
+38
-1
admin/src/InstalledPlugins.ts
+38
-1
@@ -4,7 +4,16 @@ import { apiCall, useApiEx, useApiList } from './api'
4
import { createElement as h, Fragment, useEffect } from 'react'
5
import { Box, Link } from '@mui/material'
6
import { DataTable, DataTableColumn } from './DataTable'
7
-import { Delete, Error as ErrorIcon, FormatPaint as ThemeIcon, PlayCircle, Settings, StopCircle, Upgrade } from '@mui/icons-material'
7
+import {
8
+ Clear,
9
+ Delete,
10
+ Error as ErrorIcon,
11
+ FormatPaint as ThemeIcon,
12
+ PlayCircle,
13
+ Settings,
14
+ StopCircle,
15
+ Upgrade
16
+} from '@mui/icons-material'
17
import { HTTP_FAILED_DEPENDENCY, md, newObj, prefix, with_, xlate } from './misc'
18
import { alertDialog, confirmDialog, formDialog, toast } from './dialog'
19
import _ from 'lodash'
@@ -187,6 +196,7 @@ const type2comp = {
196
real_path: FileField,
197
vfs_path: VfsPathField,
198
username: UsernameField,
199
+ color: ColorField,
200
}
201
202
export async function startPlugin(id: string) {
@@ -209,6 +219,33 @@ function UsernameField({ value, onChange, multiple, groups, ...rest }: FieldProp
219
})
220
}
221
222
+function ColorField(rest: FieldProps<string>) {
223
+ return h(StringField, {
224
+ inputProps: { type: 'color', style: { marginRight: 24 }, ...!rest.value && { value: '#888888', style: { zIndex: 1, opacity: .1 } } },
225
+ InputProps: { endAdornment: rest.value ? h(Btn, {
226
+ icon: Clear,
227
+ size: 'small',
228
+ sx: { position: 'absolute', right: 4 },
229
+ title: "Clear",
230
+ onClick(event) {
231
+ rest.onChange(undefined as any, { was: rest.value, event: event })
232
+ }
233
+ }) : h(Box, {
234
+ sx: {
235
+ position: 'absolute',
236
+ width: '100%',
237
+ bottom: 2,
238
+ pt: '3px',
239
+ textAlign: 'center',
240
+ color: '#fff',
241
+ background: 'repeating-linear-gradient(45deg, #333, #333 10px, #444 10px, #444 20px)',
242
+ }
243
+ }, "default") },
244
+ typing: true,
245
+ ...rest,
246
+ })
247
+}
248
+
249
export const descriptionField: DataTableColumn = {
250
field: 'description',
251
mergeRender: { isTheme: {} } ,