Add labels to color picker theme variables
This commit is contained in:
Jože Fortun
Mumbi Francis
parent
3b4dff94ae
commit
9a4e1fa14b
@ -1,48 +1,46 @@
|
||||
<template>
|
||||
<fieldset class="form-group">
|
||||
<div>
|
||||
<!-- Feed list -->
|
||||
<div
|
||||
v-for="(feed, i) in options.feeds"
|
||||
:key="i"
|
||||
>
|
||||
<div
|
||||
v-if="feed.resource"
|
||||
class="d-flex justify-content-end mb-3"
|
||||
>
|
||||
<c-input-confirm
|
||||
v-if="feed.resource"
|
||||
show-icon
|
||||
size="md"
|
||||
@confirmed="onRemoveFeed(i)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- define feed resource; eg. module, reminders, google calendar, ... -->
|
||||
<b-form-group
|
||||
:label="$t('calendar.feedLabel')"
|
||||
:label="$t('calendar.eventSource')"
|
||||
:label-cols="3"
|
||||
horizontal
|
||||
breakpoint="md"
|
||||
label-class="text-primary"
|
||||
>
|
||||
<b-input-group>
|
||||
<b-form-select
|
||||
v-model="feed.resource"
|
||||
:options="feedSources"
|
||||
>
|
||||
<template slot="first">
|
||||
<option
|
||||
value=""
|
||||
:disabled="true"
|
||||
>
|
||||
{{ $t('calendar.feedPlaceholder') }}
|
||||
</option>
|
||||
</template>
|
||||
</b-form-select>
|
||||
|
||||
<!-- allow feed removal -->
|
||||
<template
|
||||
v-if="feed.resource"
|
||||
v-slot:append
|
||||
>
|
||||
<c-input-confirm
|
||||
show-icon
|
||||
size="md"
|
||||
@confirmed="onRemoveFeed(i)"
|
||||
/>
|
||||
<b-form-select
|
||||
v-model="feed.resource"
|
||||
:options="feedSources"
|
||||
>
|
||||
<template slot="first">
|
||||
<option
|
||||
value=""
|
||||
:disabled="true"
|
||||
>
|
||||
{{ $t('calendar.feedPlaceholder') }}
|
||||
</option>
|
||||
</template>
|
||||
</b-input-group>
|
||||
</b-form-select>
|
||||
</b-form-group>
|
||||
|
||||
<b-form-group
|
||||
horizontal
|
||||
>
|
||||
<b-form-group horizontal>
|
||||
<!-- source configurator -->
|
||||
<component
|
||||
:is="configurator(feed)"
|
||||
@ -56,12 +54,13 @@
|
||||
</div>
|
||||
|
||||
<b-button
|
||||
class="btn btn-url test-feed-add"
|
||||
variant="primary"
|
||||
class="test-feed-add"
|
||||
@click.prevent="handleAddButton"
|
||||
>
|
||||
{{ $t('calendar.addEventsSource') }}
|
||||
</b-button>
|
||||
</fieldset>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
@ -89,7 +89,7 @@
|
||||
cancelBtnLabel: $t('general:label.cancel'),
|
||||
saveBtnLabel: $t('general:label.saveAndClose')
|
||||
}"
|
||||
theme-settings="themeSettings"
|
||||
:theme-settings="themeSettings"
|
||||
/>
|
||||
</b-form-group>
|
||||
|
||||
|
||||
@ -1,25 +1,18 @@
|
||||
<template>
|
||||
<fieldset class="form-group">
|
||||
<div>
|
||||
<div
|
||||
v-for="(feed, i) in options.feeds"
|
||||
:key="i"
|
||||
>
|
||||
<div
|
||||
class="d-flex justify-content-between mb-3"
|
||||
v-if="feed.resource"
|
||||
class="d-flex justify-content-end mb-3"
|
||||
>
|
||||
<h5>
|
||||
{{ $t('geometry.feedLabel') }}
|
||||
</h5>
|
||||
|
||||
<template
|
||||
v-if="feed.resource"
|
||||
>
|
||||
<c-input-confirm
|
||||
show-icon
|
||||
size="md"
|
||||
@confirmed="onRemoveFeed(i)"
|
||||
/>
|
||||
</template>
|
||||
<c-input-confirm
|
||||
show-icon
|
||||
size="md"
|
||||
@confirmed="onRemoveFeed(i)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<b-form-group horizontal>
|
||||
@ -35,12 +28,13 @@
|
||||
</div>
|
||||
|
||||
<b-button
|
||||
class="btn btn-url test-feed-add"
|
||||
variant="primary"
|
||||
class="test-feed-add"
|
||||
@click.prevent="handleAddButton"
|
||||
>
|
||||
{{ $t('geometry.addSource') }}
|
||||
</b-button>
|
||||
</fieldset>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
@ -70,22 +70,28 @@
|
||||
|
||||
<div
|
||||
v-if="themes.length > 0"
|
||||
class="d-flex flex-column border-top p-3 gap-1"
|
||||
class="d-flex flex-column border-top p-3 gap-2"
|
||||
>
|
||||
<div
|
||||
<b-form-group
|
||||
v-for="theme in themes"
|
||||
:key="theme.id"
|
||||
class="d-flex border"
|
||||
:label="translations[theme.id]"
|
||||
label-class="text-primary"
|
||||
class="mb-0"
|
||||
>
|
||||
<b-button
|
||||
v-for="variable in themeVariables"
|
||||
:key="variable.label"
|
||||
v-b-tooltip.noninteractive.hover="{ title: colorToolTip(theme.id, variable.value), container: '#body' }"
|
||||
class="swatch flex-grow-1 rounded-0"
|
||||
:style="{ backgroundColor: theme.values[variable.label], borderColor: theme.values[variable.label] }"
|
||||
@click="setColor(theme.values[variable.label])"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex flex-wrap border"
|
||||
>
|
||||
<b-button
|
||||
v-for="variable in themeVariables"
|
||||
:key="variable.label"
|
||||
v-b-tooltip.noninteractive.hover="{ title: colorToolTip(theme.id, variable.value), container: '#body' }"
|
||||
class="swatch flex-grow-1 rounded-0"
|
||||
:style="{ backgroundColor: theme.values[variable.label], borderColor: theme.values[variable.label] }"
|
||||
@click="setColor(theme.values[variable.label])"
|
||||
/>
|
||||
</div>
|
||||
</b-form-group>
|
||||
</div>
|
||||
|
||||
<template #modal-footer>
|
||||
@ -276,6 +282,7 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.swatch {
|
||||
height: 58px;
|
||||
min-width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -39,7 +39,8 @@ calendar:
|
||||
addEventsSource: Add events source
|
||||
calendarHeader: Calendar header
|
||||
feedLabel: Configure events source
|
||||
feedPlaceholder: Select a feed source
|
||||
feedPlaceholder: Select an event source
|
||||
eventSource: Event source
|
||||
hideHeader: Hide calendar header
|
||||
hideNavigation: Hide prev/next button
|
||||
hideTitle: Hide title text
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user