-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add colour picker for intro title, subtitle and button
- Loading branch information
Ryan Coulson
committed
Jan 13, 2025
1 parent
2f3e83f
commit 4acec50
Showing
9 changed files
with
171 additions
and
5 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| <template> | ||
| <div class="flex flex-col items-start relative"> | ||
| <div class="metadata-input flex flex-col p-0 w-full"> | ||
| <div class="flex"> | ||
| <div | ||
| @click="togglePicker" | ||
| @keypress.enter="togglePicker" | ||
| :style="{ 'background-color': selectedColour }" | ||
| :class="!disabled ? 'cursor-pointer' : ''" | ||
| class="flex flex-1 rounded w-10 mr-1" | ||
| :tabindex="!disabled ? 0 : -1" | ||
| v-tippy="{ | ||
| delay: '200', | ||
| placement: 'top', | ||
| content: !disabled | ||
| ? isOpen | ||
| ? $t('editor.colourPicker.close') | ||
| : $t('editor.colourPicker.open') | ||
| : '', | ||
| animateFill: true | ||
| }" | ||
| > | ||
| <span v-if="isOpen" class="text-white mx-auto self-center font-bold mix-blend-difference">X</span> | ||
| </div> | ||
| <input | ||
| :disabled="disabled" | ||
| class="text-center my-2" | ||
| :aria-label="name" | ||
| :value="selectedColour" | ||
| @input="(evt) => selectedColour = (evt.target as HTMLInputElement).value" | ||
| /> | ||
| </div> | ||
| <ColorPicker | ||
| v-if="isOpen" | ||
| :color="value" | ||
| alpha-channel="hide" | ||
| :visible-formats="['hex']" | ||
| default-format="hex" | ||
| @color-change="(evt: any) => this.selectedColour = evt.cssColor" | ||
| > | ||
| <template #copy-button></template> | ||
| </ColorPicker> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { Prop, Vue, Watch } from 'vue-property-decorator'; | ||
| export default class LoadingPageV extends Vue { | ||
| @Prop() value!: string; | ||
| @Prop() name!: string; | ||
| @Prop() disabled?: boolean; | ||
| isOpen: boolean = false; | ||
| selectedColour: string = ''; | ||
| beforeMount(): void { | ||
| this.selectedColour = this.value; | ||
| } | ||
| /** | ||
| * If component is enabled, toggle the colour picker visibility. | ||
| */ | ||
| togglePicker(): void { | ||
| if (!this.disabled) this.isOpen = !this.isOpen; | ||
| } | ||
| /** | ||
| * Watches the selectedColour property and emits a change event when it changes. The event emitted mimics an "HTMLInputEvent" so that | ||
| * we don't need to make any modifications to the `metadataChanged` event listener in `metadata-content.vue`. | ||
| * @param evt a string representing the new colour value. | ||
| */ | ||
| @Watch('selectedColour') | ||
| colourChanged(evt: Event): void { | ||
| // If the value didn't change, don't fire the event. | ||
| if (this.value === this.selectedColour) return; | ||
| this.$emit('change', { | ||
| target: { | ||
| name: this.name, | ||
| value: this.selectedColour | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style scoped lang="scss"> | ||
| :deep(.vacp-color-inputs), | ||
| :deep(.vacp-copy-button), | ||
| :deep(.vacp-range-input-label-text--hue) { | ||
| display: none; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters