-
-
-
-
-
+
{
primaryColor: color,
accentColor: complement.toHex8String(),
},
- iconHue: parseProp(props.base.meta).iconHue,
+ iconColor: parseProp(props.base.meta).iconColor,
}),
},
})
diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
index 0a3bc6839d..dd2742470a 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
@@ -154,18 +154,7 @@ watch(showShareModal, (val) => {
-
-
-
-
-
+
{{ $t('activity.shareBase.label') }}
import tinycolor from 'tinycolor2'
-import { BASE_ICON_COLOR_HUE_DATA as preDefinedHueData } from '#imports'
-
-const props = defineProps<{
- hue?: number | null
- size?: 'small' | 'medium' | 'large' | 'xlarge'
- readonly?: boolean
- disableClearing?: boolean
- iconClass?: string
-}>()
-
-const emit = defineEmits(['colorSelected'])
+import { NcProjectType } from '#imports'
+
+const props = withDefaults(
+ defineProps<{
+ type?: NcProjectType | string
+ modelValue?: string
+ size?: 'small' | 'medium' | 'large' | 'xlarge'
+ readonly?: boolean
+ iconClass?: string
+ }>(),
+ {
+ type: NcProjectType.DB,
+ size: 'small',
+ },
+)
-const { hue, size = 'medium', readonly } = props
+const emit = defineEmits(['update:modelValue'])
-const defaultHueColor = {
- h: 199,
- s: 79,
- v: 100,
-}
+const defaultIconColors = ['#36BFFF', '#FA8231', '#FCBE3A', '#27D665', '#6A7184', '#FF4A3F', '#FC3AC6', '#7D26CD']
-const defaultHueValue = 199
+const { modelValue, size, readonly } = props
const isOpen = ref(false)
-const colorRef = ref({
- ...defaultHueColor,
- h: !(hue !== 0 && !hue) ? hue : defaultHueValue,
-})
+const colorRef = ref(tinycolor(modelValue).isValid() ? modelValue : defaultIconColors[0])
-const updateColorHue = (value?: string | number | null) => {
- colorRef.value.h = !isNaN(parseInt(`${value}`)) ? +Math.min(parseInt(`${value}`), 360) : 0
+const updateIconColor = (color: string) => {
+ const tcolor = tinycolor(color)
+ if (tcolor.isValid()) {
+ colorRef.value = color
+ }
}
const onClick = (e: Event) => {
@@ -45,8 +45,8 @@ const onClick = (e: Event) => {
watch(
isOpen,
(value) => {
- if (!value && colorRef.value.h !== hue) {
- emit('colorSelected', colorRef.value.h)
+ if (!value && colorRef.value !== modelValue) {
+ emit('update:modelValue', colorRef.value)
}
},
{
@@ -72,108 +72,25 @@ watch(
>
{{ $t('tooltip.changeIconColour') }}
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
{{ $t('labels.customColour') }}
-
-
- {
- updateColorHue(value?.h)
- }
- "
- />
- {
- updateColorHue(value.target?.value)
- }
- "
- />
-
+
+
@@ -185,28 +102,4 @@ watch(
.nc-base-icon-color-picker-dropdown {
box-shadow: 0px 8px 8px -4px #0000000a, 0px 20px 24px -4px #0000001a;
}
-.nc-pre-defined-hue-item-wrapper {
- .nc-pre-defined-hue-item:focus,
- .nc-pre-defined-hue-item.selected {
- @apply outline-none;
- box-shadow: 0 0 0 2px #fff, 0 0 0 4px #3069fe;
- }
-}
-
-.nc-color-hue-input {
- @apply outline-none text-sm rounded-lg border-gray-200 py-1 px-3 w-14 text-center;
- -moz-appearance: textfield;
-
- &:focus,
- &.selected {
- @apply ring-transparent border-brand-500;
- }
-
- /* Chrome, Safari, Edge, Opera */
- &::-webkit-outer-spin-button,
- &::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
- }
-}
diff --git a/packages/nc-gui/components/general/ColorPicker.vue b/packages/nc-gui/components/general/ColorPicker.vue
index c3e748a653..727d2f8ee8 100644
--- a/packages/nc-gui/components/general/ColorPicker.vue
+++ b/packages/nc-gui/components/general/ColorPicker.vue
@@ -1,4 +1,5 @@
-
+ >
+
+
+
+
+
+
+
+