DeforaNetworks/corteza
3
0
Fork 0
Code Activity

Add CInputColorPicker

Browse Source
This commit is contained in:
Katrin Yordanova
2023-05-02 14:16:06 +03:00
parent bb2021d604
commit 9dba361a80
21 changed files with 328 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/web/admin/src/components/User/CUserEditorAvatar.vue
+13 -4
View File
@@ -48,10 +48,13 @@
:label="$t('initial.color')"
class="col"
>
<b-form-input
<c-input-color-picker
v-model="user.meta.avatarColor"
data-test-id="input-text-color"
type="color"
:translations="{
modalTitle: $t('colorPicker'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
/>
</b-form-group>
@@ -59,10 +62,13 @@
:label="$t('initial.backgroundColor')"
class="col"
>
<b-form-input
<c-input-color-picker
v-model="user.meta.avatarBgColor"
data-test-id="input-background-color"
type="color"
:translations="{
modalTitle: $t('colorPicker'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
/>
</b-form-group>
</div>
@@ -82,6 +88,8 @@
<script>
import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
import CUploaderWithPreview from 'corteza-webapp-admin/src/components/CUploaderWithPreview'
import { components } from '@cortezaproject/corteza-vue'
const { CInputColorPicker } = components
export default {
name: 'CUserEditorAvatar',
@@ -94,6 +102,7 @@ export default {
components: {
CSubmitButton,
CUploaderWithPreview,
CInputColorPicker,
},
props: {
client/web/compose/src/components/ModuleFields/Configurator/File.vue
+11 -3
View File
@@ -152,10 +152,12 @@
:label="$t('kind.file.view.background')"
label-class="text-primary"
>
<b-form-input
<c-input-color-picker
v-model="f.options.backgroundColor"
type="color"
debounce="300"
:translations="{
modalTitle: $t('kind.file.view.colorPicker'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
/>
</b-form-group>
</b-col>
@@ -166,12 +168,18 @@
<script>
import base from './base'
import { components } from '@cortezaproject/corteza-vue'
const { CInputColorPicker } = components
export default {
i18nOptions: {
namespaces: 'field',
},
components: {
CInputColorPicker,
},
extends: base,
computed: {
client/web/compose/src/components/PageBlocks/CalendarBase.vue
+9
View File
@@ -308,12 +308,14 @@ export default {
return compose.PageBlockCalendar.RecordFeed(this.$ComposeAPI, module, this.namespace, ff, this.loaded)
.then(events => {
events = this.setEventColors(events, ff)
this.events.push(...events)
})
})
case compose.PageBlockCalendar.feedResources.reminder:
return compose.PageBlockCalendar.ReminderFeed(this.$SystemAPI, this.$auth.user, feed, this.loaded)
.then(events => {
events = this.setEventColors(events, feed)
this.events.push(...events)
})
}
@@ -368,6 +370,13 @@ export default {
.then(() => this.key++)
.catch(() => this.toastErrorHandler(this.$t('notification:page.block.calendar.eventFetchFailed')))
},
setEventColors (events, feed) {
return events.map(event => {
event.backgroundColor = feed.options.color
return event
})
},
},
}
</script>
client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Record.vue
+13 -8
View File
@@ -30,14 +30,13 @@
breakpoint="md"
:label="$t('calendar.recordFeed.colorLabel')"
>
<b-input-group>
<b-form-input
v-model="feed.options.color"
style="max-width: 50px;"
type="color"
debounce="300"
/>
</b-input-group>
<c-input-color-picker
v-model="feed.options.color"
:translations="{
modalTitle: $t('calendar.recordFeed.colorPicker'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
/>
</b-form-group>
<b-form-group
horizontal
@@ -143,12 +142,18 @@
<script>
import base from './base'
import { components } from '@cortezaproject/corteza-vue'
const { CInputColorPicker } = components
export default {
i18nOptions: {
namespaces: 'block',
},
components: {
CInputColorPicker,
},
extends: base,
computed: {
client/web/compose/src/components/PageBlocks/CalendarConfigurator/FeedSource/configs/Reminder.vue
+13 -8
View File
@@ -6,26 +6,31 @@
breakpoint="md"
:label="$t('calendar.reminderFeed.colorLabel')"
>
<b-input-group>
<b-form-input
v-model="feed.options.color"
style="max-width: 50px;"
type="color"
debounce="300"
/>
</b-input-group>
<c-input-color-picker
v-model="feed.options.color"
:translations="{
modalTitle: $t('calendar.recordFeed.colorPicker'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
/>
</b-form-group>
</div>
</template>
<script>
import base from './base'
import { components } from '@cortezaproject/corteza-vue'
const { CInputColorPicker } = components
export default {
i18nOptions: {
namespaces: 'block',
},
components: {
CInputColorPicker,
},
extends: base,
}
</script>
client/web/compose/src/components/PageBlocks/FileConfigurator.vue
+8 -3
View File
@@ -168,10 +168,12 @@
:label="$t('kind.file.view.background')"
label-class="text-primary"
>
<b-form-input
<c-input-color-picker
v-model="options.backgroundColor"
type="color"
debounce="300"
:translations="{
modalTitle: $t('kind.file.view.colorPicker'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
/>
</b-form-group>
</b-col>
@@ -183,6 +185,8 @@
import base from './base'
import Uploader from 'corteza-webapp-compose/src/components/Public/Page/Attachment/Uploader'
import ListLoader from 'corteza-webapp-compose/src/components/Public/Page/Attachment/ListLoader'
import { components } from '@cortezaproject/corteza-vue'
const { CInputColorPicker } = components
export default {
i18nOptions: {
@@ -194,6 +198,7 @@ export default {
components: {
Uploader,
ListLoader,
CInputColorPicker,
},
extends: base,
client/web/compose/src/components/PageBlocks/GeometryConfigurator/FeedSource/configs/Record.vue
+13 -8
View File
@@ -85,14 +85,13 @@
breakpoint="md"
:label="$t('geometry.recordFeed.colorLabel')"
>
<b-input-group>
<b-form-input
v-model="feed.options.color"
style="max-width: 50px;"
type="color"
debounce="300"
/>
</b-input-group>
<c-input-color-picker
v-model="feed.options.color"
:translations="{
modalTitle: $t('geometry.recordFeed.colorPicker'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
/>
</b-form-group>
<b-form-group
@@ -129,12 +128,18 @@
<script>
import base from './base'
import { components } from '@cortezaproject/corteza-vue'
const { CInputColorPicker } = components
export default {
i18nOptions: {
namespaces: 'block',
},
components: {
CInputColorPicker,
},
extends: base,
computed: {
client/web/compose/src/components/PageBlocks/MetricConfigurator/MStyle.vue
+17 -9
View File
@@ -5,31 +5,32 @@
<fieldset>
<b-form-group
:label="$t('metric.editStyle.color')"
label-cols="4"
>
<b-form-input
<c-input-color-picker
v-model="options.color"
type="color"
debounce="300"
:translations="{
modalTitle: $t('metric.editStyle.colorPicker'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
class="mb-1"
/>
</b-form-group>
<b-form-group
:label="$t('metric.editStyle.backgroundColor')"
label-cols="4"
>
<b-form-input
<c-input-color-picker
v-model="options.backgroundColor"
type="color"
debounce="300"
:translations="{
modalTitle: $t('geometry.recordFeed.colorPicker'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
class="mb-1"
/>
</b-form-group>
<b-form-group
:label="$t('metric.editStyle.fontSize')"
label-cols="4"
>
<b-form-input
v-model="options.fontSize"
@@ -43,11 +44,18 @@
</template>
<script>
import { components } from '@cortezaproject/corteza-vue'
const { CInputColorPicker } = components
export default {
i18nOptions: {
namespaces: 'block',
},
components: {
CInputColorPicker,
},
props: {
options: {
type: Object,
client/web/compose/src/components/PageBlocks/MetricConfigurator/index.vue
+2 -1
View File
@@ -431,7 +431,8 @@ export default {
const m = {
labelStyle: {},
valueStyle: {
backgroundColor: '#FFFFFF',
backgroundColor: '#FFFFFF00',
color: '#000000',
},
drillDown: {
enabled: false,
client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
+14 -7
View File
@@ -130,18 +130,22 @@
/>
</td>
<td class="align-middle">
<b-form-input
<c-input-color-picker
v-model="item.options.textColor"
type="color"
debounce="300"
:translations="{
modalTitle: $t('navigation.colorPicker'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
class="w-100"
/>
</td>
<td class="align-middle">
<b-form-input
<c-input-color-picker
v-model="item.options.backgroundColor"
type="color"
debounce="300"
:translations="{
modalTitle: $t('navigation.colorPicker'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
class="w-100"
/>
</td>
@@ -209,6 +213,8 @@ import Text from './NavTypes/Text.vue'
import Url from './NavTypes/Url.vue'
import Compose from './NavTypes/ComposePage.vue'
import Dropdown from './NavTypes/Dropdown.vue'
import { components } from '@cortezaproject/corteza-vue'
const { CInputColorPicker } = components
export default {
i18nOptions: {
@@ -221,6 +227,7 @@ export default {
Url,
Compose,
Dropdown,
CInputColorPicker,
},
extends: base,
@@ -268,7 +275,7 @@ export default {
compose.PageBlockNavigation.makeNavigationItem({
type: 'compose',
options: {
backgroundColor: '',
backgroundColor: '#FFFFFF00',
item: {
align: 'bottom',
target: 'sameTab',
client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/Metric.vue
+24 -12
View File
@@ -2,7 +2,7 @@
<div>
<b-form-group
v-if="options.valueColumn !== undefined"
:label="$t('display-element:metric.configurator.label-column')"
:label="$t('label-column')"
label-class="text-primary"
>
<column-selector
@@ -15,7 +15,7 @@
<b-row>
<b-col>
<b-form-group
:label="$t('display-element:metric.configurator.format')"
:label="$t('format')"
label-class="text-primary"
>
<b-form-input
@@ -26,7 +26,7 @@
</b-col>
<b-col>
<b-form-group
:label="$t('display-element:metric.configurator.prefix')"
:label="$t('prefix')"
label-class="text-primary"
>
<b-form-input
@@ -37,7 +37,7 @@
</b-col>
<b-col>
<b-form-group
:label="$t('display-element:metric.configurator.suffix')"
:label="$t('suffix')"
label-class="text-primary"
>
<b-form-input
@@ -51,23 +51,27 @@
<b-row>
<b-col>
<b-form-group
:label="$t('display-element:metric.configurator.color.text')"
:label="$t('color.text')"
>
<b-form-input
<c-input-color-picker
v-model="options.color"
type="color"
debounce="300"
:translations="{
modalTitle: $t('color.picker'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
/>
</b-form-group>
</b-col>
<b-col>
<b-form-group
:label="$t('display-element:metric.configurator.color.background')"
:label="$t('color.background')"
>
<b-form-input
<c-input-color-picker
v-model="options.backgroundColor"
type="color"
debounce="300"
:translations="{
modalTitle: $t('color.picker'),
saveBtnLabel: $t('general:label.saveAndClose')
}"
/>
</b-form-group>
</b-col>
@@ -78,10 +82,18 @@
<script>
import base from './base'
import ColumnSelector from 'corteza-webapp-reporter/src/components/Common/ColumnSelector.vue'
import { components } from '@cortezaproject/corteza-vue'
const { CInputColorPicker } = components
export default {
i18nOptions: {
namespaces: 'display-element',
keyPrefix: 'metric.configurator',
},
components: {
ColumnSelector,
CInputColorPicker,
},
extends: base,
lib/vue/package.json
+1
View File
@@ -48,6 +48,7 @@
"tiptap": "^1.26.0",
"tiptap-extensions": "^1.28.4",
"v-photoswipe": "^1.0.3-1",
"vue-color": "^2.8.1",
"vue-echarts": "^6.2.3",
"vue-select": "^3.4.0",
"vue-swatches": "^1.0.4",
lib/vue/src/components/index.ts
+1
View File
@@ -17,6 +17,7 @@ export {
CInputSearch,
CRichTextInput,
CInputCheckbox,
CInputColorPicker,
} from './input'
export {
lib/vue/src/components/input/CInputColorPicker.vue
+140
View File
@@ -0,0 +1,140 @@
<template>
<div>
<b-button
:style="`color: ${pickedColor}; fill: ${pickedColor};`"
class="p-0 rounded-circle bg-white border-white shadow-none"
@click="toggleMenu"
>
<svg
viewBox="0 0 32 32"
style="width: 32px; height: 32px;"
class="border border-light rounded-circle"
>
<pattern
id="checkerboard"
width="12"
height="12"
patternUnits="userSpaceOnUse"
fill="FFF"
>
<rect
fill="#7080707f"
x="0"
width="6"
height="6"
y="0"
/>
<rect
fill="#7080707f"
x="6"
width="6"
height="6"
y="6"
/>
</pattern>
<circle
cx="16"
cy="16"
r="16"
fill="url(#checkerboard)"
/>
<circle
cx="16"
cy="16"
r="16"
/>
</svg>
</b-button>
<b-modal
:visible="showModal"
:title="translations.modalTitle"
:ok-title="translations.saveBtnLabel"
centered
size="sm"
body-class="p-0"
cancel-variant="link"
@ok="$emit('input', currentColor || value)"
@hide="closeMenu"
>
<chrome
:value="value"
class="w-100 shadow-none"
@input="updateColor"
/>
</b-modal>
</div>
</template>
<script>
import { Chrome } from 'vue-color'
import { debounce } from 'lodash'
export default {
name: 'CInputColorPicker',
components: {
Chrome,
},
props: {
value: {
type: String,
default: 'rgba(0,0,0,0)',
},
translations: {
type: Object,
},
},
data () {
return {
showModal: false,
currentColor: '',
}
},
computed: {
pickedColor: {
get () {
return this.value
},
set (pickedColor) {
this.pickedColor = pickedColor
},
},
},
methods: {
updateColor: debounce(function ({ hex8 = '' }) {
this.currentColor = hex8
}, 300),
toggleMenu () {
if (this.showModal) {
this.closeMenu()
} else {
this.openMenu()
}
},
openMenu () {
this.showModal = true
},
closeMenu () {
this.showModal = false
},
},
}
</script>
<style>
.vc-chrome {
font-family: 'Poppins-Medium' !important;
}
</style>
lib/vue/src/components/input/index.ts
+1
View File
@@ -6,3 +6,4 @@ export { default as CInputCron } from './CInputCron.vue'
export { default as CInputSearch } from './CInputSearch.vue'
export { default as CRichTextInput } from './CRichTextInput/index.vue'
export { default as CInputCheckbox } from './CInputCheckbox.vue'
export { default as CInputColorPicker } from './CInputColorPicker.vue'
lib/vue/yarn.lock
+30
View File
@@ -2937,6 +2937,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
inherits "^2.0.1"
safe-buffer "^5.0.1"
clamp@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
integrity sha512-kgMuFyE78OC6Dyu3Dy7vcx4uy97EIbVxJB/B0eJ3bUNAkwdNcxYzgKltnyADiYwsR7SEqkkUPsEUT//OVS6XMA==
class-utils@^0.3.5:
version "0.3.6"
resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -6724,6 +6729,11 @@ lodash.memoize@^4.1.2:
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
lodash.throttle@^4.0.0:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
lodash.transform@^4.6.0:
version "4.6.0"
resolved "https://registry.yarnpkg.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
@@ -6844,6 +6854,11 @@ map-visit@^1.0.0:
dependencies:
object-visit "^1.0.0"
material-colors@^1.0.0:
version "1.2.6"
resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
md5.js@^1.3.4:
version "1.3.5"
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -10588,6 +10603,11 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tinycolor2@^1.1.2:
version "1.6.0"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
tiptap-commands@^1.17.1:
version "1.17.1"
resolved "https://registry.yarnpkg.com/tiptap-commands/-/tiptap-commands-1.17.1.tgz#a8974a26d87db57b2fd4fc56a552520c69e43a4a"
@@ -11223,6 +11243,16 @@ vue-class-component@^7.1.0:
resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4"
integrity sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==
vue-color@^2.8.1:
version "2.8.1"
resolved "https://registry.yarnpkg.com/vue-color/-/vue-color-2.8.1.tgz#a090f3dcf8ed6f07afdb865cac84b19a73302e70"
integrity sha512-BoLCEHisXi2QgwlhZBg9UepvzZZmi4176vbr+31Shen5WWZwSLVgdScEPcB+yrAtuHAz42309C0A4+WiL9lNBw==
dependencies:
clamp "^1.0.1"
lodash.throttle "^4.0.0"
material-colors "^1.0.0"
tinycolor2 "^1.1.2"
vue-demi@^0.13.2:
version "0.13.5"
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.5.tgz#d5eddbc9eaefb89ce5995269d1fa6b0486312092"
locale/en/corteza-webapp-admin/general.yaml
+1
View File
@@ -9,6 +9,7 @@ label:
refresh: Refresh
loadMore: Load more
loading: Loading
saveAndClose: Save and close
submit: Submit
delete: Delete
undelete: Undelete
locale/en/corteza-webapp-admin/system.users.yaml
+11 -10
View File
@@ -21,16 +21,17 @@ editor:
unsuspend: Unsuspend
updatedAt: Updated at
avatar:
title: Profile avatar
preview:
label: Avatar
title: Avatar
initial:
color: Text color
backgroundColor: Background color
uploader:
instructions: Upload avatar
uploading: Uploading user avatar
title: Profile avatar
preview:
label: Avatar
title: Avatar
initial:
color: Text color
backgroundColor: Background color
uploader:
instructions: Upload avatar
uploading: Uploading user avatar
colorPicker: Choose a color
mfa:
TOTP:
disabled:
locale/en/corteza-webapp-compose/block.yaml
+4
View File
@@ -46,6 +46,7 @@ calendar:
hideToday: Hide today button
label: Calendar
recordFeed:
colorPicker: Choose a color
colorLabel: Event color
eventAllDay: Show as all-day-events
eventEndFieldLabel: Event end
@@ -225,6 +226,7 @@ metric:
editStyle:
backgroundColor: Background color
color: Text color
colorPicker: Choose a color
fontSize: Font size in pixels
labelLabel: Label style
valueLabel: Value style
@@ -589,6 +591,7 @@ comment:
footnote: 'Field value will be used as reference'
navigation:
chart: Charts
colorPicker: Choose a color
noNavigationItems: No navigation item configured
label: Navigation
displayOptions: Display options
@@ -726,6 +729,7 @@ geometry:
openInNewTab: Open in a new tab
openInModal: Open in a modal
recordFeed:
colorPicker: Choose a color
moduleLabel: Module*
modulePlaceholder: (No module)
noMultiFields: Multi-value fields are currently not supported
locale/en/corteza-webapp-compose/field.yaml
+1
View File
@@ -45,6 +45,7 @@ kind:
maxWidth: Max width
borderRadius: Border radius
background: Background color
colorPicker: Choose a color
margin: Margin
unitType: Unit type
px: px
locale/en/corteza-webapp-reporter/display-element.yaml
+1
View File
@@ -89,6 +89,7 @@ metric:
color:
background: Background color
text: Text color
picker: Choose a color
format: Format
label-column: Label column
none: None