mirror of
https://gitlab.com/bramw/baserow.git
synced 2024-11-22 07:42:36 +00:00
417 lines
12 KiB
Vue
417 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<ThemeConfigBlockSection>
|
|
<template #default>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
required
|
|
:label="$t('buttonThemeConfigBlock.width')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<WidthSelector v-model="buttonWidth" />
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.button_width"
|
|
:default-value="theme?.button_width"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
v-if="values.button_width === 'auto' && !extraArgs?.noAlignment"
|
|
horizontal-narrow
|
|
small-label
|
|
required
|
|
class="margin-bottom-2"
|
|
:label="$t('buttonThemeConfigBlock.alignment')"
|
|
>
|
|
<HorizontalAlignmentsSelector v-model="values.button_alignment" />
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.button_alignment"
|
|
:default-value="theme?.button_alignment"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
v-if="values.button_width === 'full'"
|
|
horizontal-narrow
|
|
small-label
|
|
required
|
|
class="margin-bottom-2"
|
|
:label="$t('buttonThemeConfigBlock.textAlignment')"
|
|
>
|
|
<HorizontalAlignmentsSelector
|
|
v-model="values.button_text_alignment"
|
|
/>
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.button_text_alignment"
|
|
:default-value="theme?.button_text_alignment"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('buttonThemeConfigBlock.fontFamily')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<FontFamilySelector v-model="values.button_font_family" />
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.button_font_family"
|
|
:default-value="theme?.button_font_family"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('buttonThemeConfigBlock.size')"
|
|
:error-message="getError('button_font_size')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<PixelValueSelector v-model="values.button_font_size" />
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.button_font_size"
|
|
:default-value="theme?.button_font_size"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('buttonThemeConfigBlock.borderSize')"
|
|
:error-message="getError('button_border_size')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<PixelValueSelector v-model="values.button_border_size" />
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.button_border_size"
|
|
:default-value="theme?.button_border_size"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('buttonThemeConfigBlock.borderRadius')"
|
|
:error-message="getError('button_border_radius')"
|
|
class="margin-bottom-2"
|
|
>
|
|
<PixelValueSelector v-model="values.button_border_radius" />
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.button_border_radius"
|
|
:default-value="theme?.button_border_radius"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
:label="$t('buttonThemeConfigBlock.padding')"
|
|
:error-message="getPaddingError()"
|
|
class="margin-bottom-2"
|
|
>
|
|
<PaddingSelector v-model="padding" />
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="padding"
|
|
:default-value="
|
|
theme
|
|
? {
|
|
vertical: theme['button_vertical_padding'],
|
|
horizontal: theme['button_horizontal_padding'],
|
|
}
|
|
: undefined
|
|
"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
</template>
|
|
<template #preview>
|
|
<ABButton>{{ $t('buttonThemeConfigBlock.button') }}</ABButton>
|
|
</template>
|
|
</ThemeConfigBlockSection>
|
|
<ThemeConfigBlockSection :title="$t('buttonThemeConfigBlock.defaultState')">
|
|
<template #default>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
required
|
|
class="margin-bottom-2"
|
|
:label="$t('buttonThemeConfigBlock.backgroundColor')"
|
|
>
|
|
<ColorInput
|
|
v-model="values.button_background_color"
|
|
:color-variables="colorVariables"
|
|
:default-value="theme?.button_background_color"
|
|
small
|
|
/>
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.button_background_color"
|
|
:default-value="theme?.button_background_color"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
required
|
|
class="margin-bottom-2"
|
|
:label="$t('buttonThemeConfigBlock.textColor')"
|
|
>
|
|
<ColorInput
|
|
v-model="values.button_text_color"
|
|
:color-variables="colorVariables"
|
|
:default-value="theme?.button_text_color"
|
|
small
|
|
/>
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.button_text_color"
|
|
:default-value="theme?.button_text_color"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
required
|
|
class="margin-bottom-2"
|
|
:label="$t('buttonThemeConfigBlock.borderColor')"
|
|
>
|
|
<ColorInput
|
|
v-model="values.button_border_color"
|
|
:color-variables="colorVariables"
|
|
:default-value="theme?.button_border_color"
|
|
small
|
|
/>
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.button_border_color"
|
|
:default-value="theme?.button_border_color"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
</template>
|
|
<template #preview>
|
|
<ABButton>{{ $t('buttonThemeConfigBlock.button') }}</ABButton>
|
|
</template>
|
|
</ThemeConfigBlockSection>
|
|
<ThemeConfigBlockSection :title="$t('buttonThemeConfigBlock.hoverState')">
|
|
<template #default>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
required
|
|
class="margin-bottom-2"
|
|
:label="$t('buttonThemeConfigBlock.backgroundColor')"
|
|
>
|
|
<ColorInput
|
|
v-model="values.button_hover_background_color"
|
|
:color-variables="colorVariables"
|
|
:default-value="theme?.button_hover_background_color"
|
|
small
|
|
/>
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.button_hover_background_color"
|
|
:default-value="theme?.button_hover_background_color"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
class="margin-bottom-2"
|
|
:label="$t('buttonThemeConfigBlock.textColor')"
|
|
>
|
|
<ColorInput
|
|
v-model="values.button_hover_text_color"
|
|
:color-variables="colorVariables"
|
|
:default-value="theme?.button_hover_text_color"
|
|
small
|
|
/>
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.button_hover_text_color"
|
|
:default-value="theme?.button_hover_text_color"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
<FormGroup
|
|
horizontal-narrow
|
|
small-label
|
|
class="margin-bottom-2"
|
|
:label="$t('buttonThemeConfigBlock.borderColor')"
|
|
>
|
|
<ColorInput
|
|
v-model="values.button_hover_border_color"
|
|
:color-variables="colorVariables"
|
|
:default-value="theme?.button_hover_border_color"
|
|
small
|
|
/>
|
|
<template #after-input>
|
|
<ResetButton
|
|
v-model="values.button_hover_border_color"
|
|
:default-value="theme?.button_hover_border_color"
|
|
/>
|
|
</template>
|
|
</FormGroup>
|
|
</template>
|
|
<template #preview>
|
|
<ABButton class="ab-button--force-hover">
|
|
{{ $t('buttonThemeConfigBlock.button') }}
|
|
</ABButton>
|
|
</template>
|
|
</ThemeConfigBlockSection>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import themeConfigBlock from '@baserow/modules/builder/mixins/themeConfigBlock'
|
|
import ThemeConfigBlockSection from '@baserow/modules/builder/components/theme/ThemeConfigBlockSection'
|
|
import ResetButton from '@baserow/modules/builder/components/theme/ResetButton'
|
|
import HorizontalAlignmentsSelector from '@baserow/modules/builder/components/HorizontalAlignmentsSelector'
|
|
import WidthSelector from '@baserow/modules/builder/components/WidthSelector'
|
|
import FontFamilySelector from '@baserow/modules/builder/components/FontFamilySelector'
|
|
import PixelValueSelector from '@baserow/modules/builder/components/PixelValueSelector'
|
|
import PaddingSelector from '@baserow/modules/builder/components/PaddingSelector'
|
|
import { required, integer, minValue, maxValue } from 'vuelidate/lib/validators'
|
|
|
|
const pixelSizeMin = 1
|
|
const pixelSizeMax = 100
|
|
|
|
const minMax = {
|
|
button_font_size: {
|
|
min: 1,
|
|
max: 100,
|
|
},
|
|
button_border_size: {
|
|
min: 0,
|
|
max: 100,
|
|
},
|
|
button_border_radius: {
|
|
min: 0,
|
|
max: 100,
|
|
},
|
|
button_horizontal_padding: {
|
|
min: 0,
|
|
max: 200,
|
|
},
|
|
button_vertical_padding: {
|
|
min: 0,
|
|
max: 200,
|
|
},
|
|
}
|
|
|
|
export default {
|
|
name: 'ButtonThemeConfigBlock',
|
|
components: {
|
|
ThemeConfigBlockSection,
|
|
ResetButton,
|
|
WidthSelector,
|
|
HorizontalAlignmentsSelector,
|
|
FontFamilySelector,
|
|
PixelValueSelector,
|
|
PaddingSelector,
|
|
},
|
|
mixins: [themeConfigBlock],
|
|
data() {
|
|
return {
|
|
values: {},
|
|
}
|
|
},
|
|
computed: {
|
|
buttonWidth: {
|
|
get() {
|
|
return this.values.button_width
|
|
},
|
|
set(value) {
|
|
// When we change the button width we want to keep the same alignment,
|
|
// it's less confusing to the user.
|
|
this.values.button_width = value
|
|
if (value === 'auto') {
|
|
this.values.button_alignment = this.values.button_text_alignment
|
|
} else {
|
|
this.values.button_text_alignment = this.values.button_alignment
|
|
}
|
|
},
|
|
},
|
|
padding: {
|
|
get() {
|
|
return {
|
|
vertical: this.values.button_vertical_padding,
|
|
horizontal: this.values.button_horizontal_padding,
|
|
}
|
|
},
|
|
set(newValue) {
|
|
this.values.button_vertical_padding = newValue.vertical
|
|
this.values.button_horizontal_padding = newValue.horizontal
|
|
},
|
|
},
|
|
pixedSizeMin() {
|
|
return pixelSizeMin
|
|
},
|
|
pixedSizeMax() {
|
|
return pixelSizeMax
|
|
},
|
|
},
|
|
methods: {
|
|
isAllowedKey(key) {
|
|
return key.startsWith('button_')
|
|
},
|
|
getError(property) {
|
|
if (this.$v.values[property].$invalid) {
|
|
return this.$t('error.minMaxValueField', minMax[property])
|
|
}
|
|
return null
|
|
},
|
|
getPaddingError() {
|
|
return (
|
|
this.getError('button_vertical_padding') ||
|
|
this.getError('button_horizontal_padding')
|
|
)
|
|
},
|
|
},
|
|
validations: {
|
|
values: {
|
|
button_font_size: {
|
|
required,
|
|
integer,
|
|
minValue: minValue(minMax.button_font_size.min),
|
|
maxValue: maxValue(minMax.button_font_size.max),
|
|
},
|
|
button_border_size: {
|
|
integer,
|
|
minValue: minValue(minMax.button_border_size.min),
|
|
maxValue: maxValue(minMax.button_border_size.max),
|
|
},
|
|
button_border_radius: {
|
|
integer,
|
|
minValue: minValue(minMax.button_border_radius.min),
|
|
maxValue: maxValue(minMax.button_border_radius.max),
|
|
},
|
|
button_horizontal_padding: {
|
|
required,
|
|
integer,
|
|
minValue: minValue(minMax.button_horizontal_padding.min),
|
|
maxValue: maxValue(minMax.button_horizontal_padding.max),
|
|
},
|
|
button_vertical_padding: {
|
|
required,
|
|
integer,
|
|
minValue: minValue(minMax.button_vertical_padding.min),
|
|
maxValue: maxValue(minMax.button_vertical_padding.max),
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|