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

add colour picker for intro title, subtitle and button #508

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add colour picker for intro title, subtitle and button #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 12 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
"url": "^0.11.3",
"uuid": "^9.0.0",
"vue": "^3.4.37",
"vue-accessible-color-picker": "^5.1.1",
"vue-class-component": "^8.0.0-rc.1",
"vue-final-modal": "^4.4.5",
"vue-i18n": "^9.2.2",
Expand Down
95 changes: 95 additions & 0 deletions src/components/helpers/colour-picker-input.vue
View file
Open in desktop
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-l w-10"
: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 py-2 rounded-r hover:bg-gray-100"
: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>
60 changes: 59 additions & 1 deletion src/components/helpers/metadata-content.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,58 @@
</div>
<p v-if="!editing">{{ metadata.logoAltText || $t('editor.metadataForm.na') }}</p>
</div>
<div class="flex flex-wrap gap-4">
<div class="metadata-item">
<span class="metadata-label">{{ $t('editor.introTitleColour') }}</span>
<ColourPickerInput
name="titleColour"
:value="metadata.titleColour"
@change="metadataChanged"
:disabled="!editing"
/>
</div>
<div class="metadata-item">
<span class="metadata-label">{{ $t('editor.introSubtitleColour') }}</span>
<ColourPickerInput
name="subtitleColour"
:value="metadata.subtitleColour"
@change="metadataChanged"
:disabled="!editing"
/>
</div>
<div class="metadata-item">
<div class="flex gap-2 items-center">
<span class="metadata-label">{{ $t('editor.introButtonColour') }}</span>
<span
:content="$t('editor.colourPicker.label.buttonLabel')"
v-tippy="{ placement: 'top', hideOnClick: false, animateFill: true }"
tabindex="0"
>
<svg
class="fill-current"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16"
height="16"
viewBox="0 0 416.979 416.979"
xml:space="preserve"
>
<g>
<path
d="M356.004,61.156c-81.37-81.47-213.377-81.551-294.848-0.182c-81.47,81.371-81.552,213.379-0.181,294.85 c81.369,81.47,213.378,81.551,294.849,0.181C437.293,274.636,437.375,142.626,356.004,61.156z M237.6,340.786 c0,3.217-2.607,5.822-5.822,5.822h-46.576c-3.215,0-5.822-2.605-5.822-5.822V167.885c0-3.217,2.607-5.822,5.822-5.822h46.576 c3.215,0,5.822,2.604,5.822,5.822V340.786z M208.49,137.901c-18.618,0-33.766-15.146-33.766-33.765 c0-18.617,15.147-33.766,33.766-33.766c18.619,0,33.766,15.148,33.766,33.766C242.256,122.755,227.107,137.901,208.49,137.901z"
/>
</g>
</svg>
</span>
</div>
<ColourPickerInput
name="buttonColour"
:value="metadata.buttonColour"
@change="metadataChanged"
:disabled="!editing"
/>
</div>
</div>
</section>
</section>
<!-- Section: End of page information -->
Expand Down Expand Up @@ -239,8 +291,14 @@

<script lang="ts">
import { MetadataContent } from '@/definitions';
import { Prop, Vue } from 'vue-property-decorator';
import { Options, Prop, Vue } from 'vue-property-decorator';
import ColourPickerInput from './colour-picker-input.vue';

@Options({
components: {
ColourPickerInput: ColourPickerInput
}
})
export default class MetadataEditorV extends Vue {
@Prop() metadata!: MetadataContent;
@Prop({ default: true }) editing!: boolean;
Expand Down
20 changes: 19 additions & 1 deletion src/components/metadata-editor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -691,6 +691,9 @@ export default class MetadataEditorV extends Vue {
logoPreview: '',
logoName: '',
logoAltText: '',
titleColour: '#1f2937',
subtitleColour: '#6b7280',
buttonColour: '#00d2d3',
contextLink: '',
contextLabel: '',
tocOrientation: '',
Expand All @@ -706,6 +709,9 @@ export default class MetadataEditorV extends Vue {
logoPreview: '',
logoName: '',
logoAltText: '',
titleColour: '',
subtitleColour: '',
buttonColour: '',
contextLink: '',
contextLabel: '',
tocOrientation: '',
Expand Down Expand Up @@ -983,7 +989,10 @@ export default class MetadataEditorV extends Vue {
src: ''
},
title: this.metadata.introTitle,
subtitle: this.metadata.introSubtitle
subtitle: this.metadata.introSubtitle,
titleColour: this.metadata.titleColour,
subtitleColour: this.metadata.subtitleColour,
buttonColour: this.metadata.buttonColour
},
slides: [],
contextLabel: this.metadata.contextLabel,
Expand Down Expand Up @@ -1491,6 +1500,9 @@ export default class MetadataEditorV extends Vue {
this.metadata.title = config.title;
this.metadata.introTitle = config.introSlide.title;
this.metadata.introSubtitle = config.introSlide.subtitle;
this.metadata.titleColour = config.introSlide.titleColour ?? '#1f2937';
this.metadata.subtitleColour = config.introSlide.subtitleColour ?? '#6b7280';
this.metadata.buttonColour = config.introSlide.buttonColour ?? '#00d2d3';
this.metadata.contextLink = config.contextLink;
this.metadata.contextLabel = config.contextLabel;
this.metadata.tocOrientation = config.tocOrientation;
Expand Down Expand Up @@ -1766,6 +1778,9 @@ export default class MetadataEditorV extends Vue {
config.title = this.metadata.title;
config.introSlide.title = this.metadata.introTitle;
config.introSlide.subtitle = this.metadata.introSubtitle;
config.introSlide.titleColour = this.metadata.titleColour;
config.introSlide.subtitleColour = this.metadata.subtitleColour;
config.introSlide.buttonColour = this.metadata.buttonColour;
config.contextLink = this.metadata.contextLink;
config.contextLabel = this.metadata.contextLabel;
config.tocOrientation = this.metadata.tocOrientation;
Expand Down Expand Up @@ -1813,6 +1828,9 @@ export default class MetadataEditorV extends Vue {
title: '',
introTitle: '',
introSubtitle: '',
titleColour: '',
subtitleColour: '',
buttonColour: '',
contextLink: '',
contextLabel: '',
dateModified: '',
Expand Down
6 changes: 6 additions & 0 deletions src/definitions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,9 @@ export interface MetadataContent {
logoPreview: string;
logoName: string;
logoAltText: string;
titleColour?: string;
subtitleColour?: string;
buttonColour?: string;
contextLink: string;
contextLabel: string;
tocOrientation: string;
Expand Down Expand Up @@ -134,6 +137,9 @@ export interface Intro {
subtitle: string;
blurb?: string;
backgroundImage: string;
titleColour?: string;
subtitleColour?: string;
buttonColour?: string;
}

export interface Slide {
Expand Down
6 changes: 6 additions & 0 deletions src/lang/lang.csv
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,12 @@ editor.logoPreview,Logo preview,1,Aperçu du logo,1
editor.logoPreviewAltText,Preview of product logo,1,Aperçu du logo du produit,0
editor.logoAltText,Logo alt text,1,Lien contextuel,1
editor.logoAltText.desc,"For accessibility purposes, provide description text for the logo.",1,"Pour des raisons d'accessibilité, fournissez un texte descriptif pour le logo.",0
editor.introTitleColour,"Title colour",1,Couleur du titre,0
editor.introSubtitleColour,"Subtitle colour",1,Couleur du sous-titre,0
editor.introButtonColour,"Button colour",1,Couleur du bouton,0
editor.colourPicker.open,Open colour picker,1,Ouvrir le sélecteur de couleur,0
editor.colourPicker.close,Close colour picker,1,Fermer le sélecteur de couleur,0
editor.colourPicker.label.buttonLabel,Refers to the "scroll to story" button in the introduction slide.,1,Se réfère au bouton « défilement vers l’histoire » dans la diapositive d’introduction.,0
editor.contextLink,Context link,1,Lien contextuel,1
editor.contextLink.info,Context link shows up at the bottom of the page to provide additional resources for interested users.,1,Le lien contextuel apparaît au bas de la page et fournit des ressources supplémentaires aux utilisateurs intéressés.,1
editor.contextLabel,Context label,1,Étiquette de contexte,1
Expand Down
4 changes: 4 additions & 0 deletions src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ import HighchartsVue from 'highcharts-vue';
import Message from 'vue-m-message';
import 'vue-m-message/dist/style.css';

import ColorPicker from 'vue-accessible-color-picker';
import 'vue-accessible-color-picker/styles';

import StorylinesViewer from 'ramp-storylines_demo-scenarios-pcar';
import 'ramp-storylines_demo-scenarios-pcar/dist/style.css';

Expand All @@ -52,6 +55,7 @@ app.use(pinia)
.use(Message)
.use(StorylinesViewer)
.use(VueMarkdownEditor)
.use(ColorPicker)
.use(vfm);

app.directive('focus-container', FocusContainer);
Expand Down
1 change: 1 addition & 0 deletions src/shims-vue.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,4 @@ declare module 'vue-m-message';
declare module 'vue3-json-editor';
declare module 'highcharts-vue';
declare module 'vue-tippy';
declare module 'vue-accessible-color-picker';
Loading