mirror of https://github.com/nocodb/nocodb
աɨռɢӄաօռɢ
2 years ago
committed by
GitHub
3 changed files with 138 additions and 6 deletions
@ -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) ? '✓':'' }} |
||||||
|
</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> |
Loading…
Reference in new issue