Browse Source

Merge pull request #2151 from nocodb/feat/ColorPicker

ColorPicker component
pull/2169/head
աɨռɢӄաօռɢ 3 years ago committed by GitHub
parent
commit
8696764905
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 124
      packages/nc-gui/components/project/spreadsheet/components/ColorPicker.vue
  2. 10
      packages/nc-gui/components/project/spreadsheet/components/editColumn/CheckboxOptions.vue
  3. 10
      packages/nc-gui/components/project/spreadsheet/components/editColumn/RatingOptions.vue

124
packages/nc-gui/components/project/spreadsheet/components/ColorPicker.vue

@ -0,0 +1,124 @@
<template>
<div class="color-picker">
<div
v-for="colId in Math.ceil(colors.length / rowSize)"
:key="colId"
class="color-picker-row"
>
<button
v-for="(color, i) in colors.slice((colId - 1) * rowSize, (colId) * rowSize)"
:key="`color-${colId}-${i}`"
class="color-selector"
:class="compare(picked, color) ? 'selected':''"
:style="{ 'background-color': color }"
@click="select(color)"
>
{{ compare(picked, color) ? '&#10003;':'' }}
</button>
</div>
<v-expansion-panels v-if="advanced">
<v-expansion-panel>
<v-expansion-panel-header>Advanced</v-expansion-panel-header>
<v-expansion-panel-content>
<v-container class="d-flex flex-column">
<v-btn class="primary lighten-2" @click="select(picked)">
Pick Color
</v-btn>
<v-color-picker
v-model="picked"
class="align-self-center ma-2"
canvas-height="100px"
mode="hexa"
/>
</v-container>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</div>
</template>
<script>
import { enumColor } from '@/components/project/spreadsheet/helpers/colors'
export default {
name: 'ColorPicker',
props: {
value: {
type: String,
default: () => enumColor.light[0]
},
colors: {
type: Array,
default: () => enumColor.light.concat(enumColor.dark)
},
rowSize: {
type: Number,
default: () => 10
},
advanced: {
type: Boolean,
default: () => true
}
},
data: () => ({
picked: ''
}),
created() {
this.picked = this.value || ''
},
methods: {
select(color) {
this.picked = color
this.$emit('input', color)
},
compare(colorA, colorB) {
if ((typeof colorA === 'string' || colorA instanceof String) &&
(typeof colorB === 'string' || colorB instanceof String)) {
return colorA.toLowerCase() === colorB.toLowerCase()
}
return false
}
}
}
</script>
<style scoped>
.color-picker {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: white;
padding: 10px;
}
.color-picker-row {
display: flex;
flex-direction: row;
}
.color-selector {
position: relative;
height: 32px;
width: 32px;
margin: 10px 5px;
border-radius: 5px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}
.color-selector:hover {
filter: brightness(90%);
-webkit-filter: brightness(90%);
}
.color-selector.selected {
filter: brightness(90%);
-webkit-filter: brightness(90%);
}
/deep/ .v-input__control {
height: auto!important;
}
</style>

10
packages/nc-gui/components/project/spreadsheet/components/editColumn/CheckboxOptions.vue

@ -30,18 +30,22 @@
</template>
</v-select>
</div>
<v-color-picker
<color-picker
v-model="colMeta.color"
class="mx-auto"
hide-inputs
row-size="8"
:colors="['#fcb401', '#faa307', '#f48c06', '#e85d04', '#dc2f02', '#d00000', '#9d0208', '#777']"
/>
</div>
</template>
<script>
import ColorPicker from '@/components/project/spreadsheet/components/ColorPicker.vue'
export default {
name: 'CheckboxOptions',
components: {
ColorPicker
},
props: ['column', 'meta', 'value'],
data: () => ({
colMeta: {

10
packages/nc-gui/components/project/spreadsheet/components/editColumn/RatingOptions.vue

@ -39,18 +39,22 @@
class="caption"
/>
</div>
<v-color-picker
<color-picker
v-model="colMeta.color"
class="mx-auto"
hide-inputs
row-size="8"
:colors="['#fcb401', '#faa307', '#f48c06', '#e85d04', '#dc2f02', '#d00000', '#9d0208', '#777']"
/>
</div>
</template>
<script>
import ColorPicker from '@/components/project/spreadsheet/components/ColorPicker.vue'
export default {
name: 'RatingOptions',
components: {
ColorPicker
},
props: ['column', 'meta', 'value'],
data: () => ({
colMeta: {

Loading…
Cancel
Save