Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace colorpicker icon with ColorSwatch #4350

Merged
merged 2 commits into from
Jan 2, 2024
Merged

Replace colorpicker icon with ColorSwatch #4350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f79eee
Replace colorpicker icon with ColorSwatch
manuelmeister Dec 29, 2023
f9f128a
Remove ripple, as it breaks the snapshots
manuelmeister Dec 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions frontend/src/components/form/base/BasePicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,23 @@ Displays a field as a picker (can be used with v-model)
@click="(...args) => (openOnTextFieldClick ? onMenuOpen(on, ...args) : null)"
@input="debouncedParseValue"
>
<template v-if="icon" #prepend>
<v-icon
<template #prepend>
<slot
name="prepend"
:color="iconColor"
:aria-label="$tc(buttonAriaLabelI18nKey, 0, { label: label || name })"
@click="(...args) => onMenuOpen(on, ...args)"
:attrs="{
'aria-label': $tc(buttonAriaLabelI18nKey, 0, { label: label || name }),
}"
:on="{ click: (...args) => onMenuOpen(on, ...args) }"
>
{{ icon }}
</v-icon>
<v-icon
:color="iconColor"
:aria-label="$tc(buttonAriaLabelI18nKey, 0, { label: label || name })"
@click="(...args) => onMenuOpen(on, ...args)"
>
{{ icon }}
</v-icon>
</slot>
</template>

<!-- passing the append slot through -->
Expand Down
8 changes: 5 additions & 3 deletions frontend/src/components/form/base/ColorPicker/ColorSwatch.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
width="30"
height="30"
:color="color"
@click="picker.onInput(color)"
:ripple="false"
@click="$emit('selectColor', color)"
v-on="$listeners"
></v-btn>
</template>
<script>
Expand All @@ -15,12 +17,12 @@ import { contrastColor } from '@/common/helpers/colors.js'
export default {
name: 'ColorSwatch',
props: {
picker: { type: Object, required: true },
color: { type: String, required: true },
},
computed: {
contrast() {
return this.color ? contrastColor(this.color) : 'black'
// Vuetify returns invalid value #NANNAN in the initialization phase
return this.color && this.color !== '#NANNAN' ? contrastColor(this.color) : 'black'
},
},
}
Expand Down
43 changes: 28 additions & 15 deletions frontend/src/components/form/base/EColorPicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ Displays a field as a color picker (can be used with v-model)
open-on-text-field-click
@input="$emit('input', $event)"
>
<template #prepend="{ color, attrs, on }">
<ColorSwatch :color="color" class="mt-n1" v-bind="attrs" v-on="on" />
</template>
<template #default="picker">
<v-card :style="{ '--picker-contrast-color': contrast }" data-testid="colorpicker">
<v-color-picker
Expand All @@ -24,21 +27,12 @@ Displays a field as a color picker (can be used with v-model)
/>
<v-divider />
<div class="d-flex gap-2 pa-4 flex-wrap">
<ColorSwatch color="#90B7E4" :picker="picker" />
<ColorSwatch color="#6EDBE9" :picker="picker" />
<ColorSwatch color="#4dbb52" :picker="picker" />
<ColorSwatch color="#FF9800" :picker="picker" />
<ColorSwatch color="#FD7A7A" :picker="picker" />
<ColorSwatch color="#d584e9" :picker="picker" />
<ColorSwatch color="#BBBBBB" :picker="picker" />

<ColorSwatch color="#1964B1" :picker="picker" />
<ColorSwatch color="#1E86CA" :picker="picker" />
<ColorSwatch color="#3DB842" :picker="picker" />
<ColorSwatch color="#F1810D" :picker="picker" />
<ColorSwatch color="#C71A1A" :picker="picker" />
<ColorSwatch color="#CF3BD6" :picker="picker" />
<ColorSwatch color="#575757" :picker="picker" />
<ColorSwatch
v-for="swatch in swatches"
:key="swatch"
:color="swatch"
@selectColor="picker.onInput"
/>
</div>
</v-card>
</template>
Expand All @@ -63,6 +57,25 @@ export default {
props: {
value: { type: String, required: true },
},
data: () => ({
swatches: [
'#90B7E4',
'#6EDBE9',
'#4dbb52',
'#FF9800',
'#FD7A7A',
'#d584e9',
'#BBBBBB',

'#1964B1',
'#1E86CA',
'#3DB842',
'#F1810D',
'#C71A1A',
'#CF3BD6',
'#575757',
],
}),
computed: {
contrast() {
// Vuetify returns invalid value #NANNAN in the initialization phase
Expand Down
16 changes: 10 additions & 6 deletions frontend/src/components/form/base/__tests__/__snapshots__/EColorPicker.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@ exports[`An EColorPicker > looks like a color picker > pickerclosed 1`] = `
<div class="v-input v-input--hide-details theme--light v-text-field v-text-field--filled v-text-field--enclosed">
<div class="v-input__prepend-outer">
<button aria-label="Dialog öffnen um eine Farbe für test zu wählen"
class="v-icon notranslate v-icon--link mdi mdi-palette theme--light"
style="color: rgb(255, 0, 0); caret-color: #ff0000;"
type="button"></button>
class="e-colorswatch mt-n1 v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
style="height: 30px; width: 30px; background-color: rgb(255, 0, 0); border-color: #ff0000; --ee5e0d96-contrast: #fff;"
type="button">
<span class="v-btn__content"></span>
</button>
</div>
<div class="v-input__control">
<div class="v-input__slot">
Expand Down Expand Up @@ -43,9 +45,11 @@ exports[`An EColorPicker > looks like a color picker > pickeropen 1`] = `
<div class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--filled v-text-field--is-booted v-text-field--enclosed">
<div class="v-input__prepend-outer">
<button aria-label="Dialog öffnen um eine Farbe für test zu wählen"
class="v-icon notranslate v-icon--link mdi mdi-palette theme--light"
style="color: rgb(255, 0, 0); caret-color: #ff0000;"
type="button"></button>
class="e-colorswatch mt-n1 v-btn v-btn--fab v-btn--has-bg v-btn--round theme--light elevation-0 v-size--default"
style="height: 30px; width: 30px; background-color: rgb(255, 0, 0); border-color: #ff0000; --ee5e0d96-contrast: #fff;"
type="button">
<span class="v-btn__content"></span>
</button>
</div>
<div class="v-input__control">
<div class="v-input__slot">
Expand Down