add colour picker for intro title, subtitle and button

[RyanCoulsonCA]

Related Item(s)

#506, #494

Changes

• Adds a new colour picker component. Allows the user to change the colour of the intro title, subtitle and "scroll to story" button.
• The colour picker is fully keyboard accessible.

Notes

Open to feedback on the design and functionality!

Testing

Steps:

1. Create a new product.
2. Play around with the new colour picker fields and ensure everything works properly.
3. Save the product and ensure everything saves correctly.
4. Load an existing product.
5. Repeat step 3 again.
6. Save the product and ensure everything saves correctly.

---

This change is 

[RyanCoulsonCA]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/storylines-editor/fix-506

[gordlin]

Nice functionality! Overall, it looks very nice.

Reviewed 9 of 9 files at r1, all commit messages.
Reviewable status: all files reviewed, 3 unresolved discussions (waiting on @RyanCoulsonCA)

---

src/components/helpers/metadata-content.vue line 199 at r1 (raw file):

                    />
                </div>
                <div class="metadata-item">

May be worth explaining somewhere that the 'Button' refers to the "Jump to storyline contents" (or whatever it's called) button.

---

src/components/helpers/colour-picker-input.vue line 10 at r1 (raw file):

                    :style="{ 'background-color': selectedColour }"
                    :class="!disabled ? 'cursor-pointer' : ''"
                    class="flex flex-1 rounded w-10 mr-1"

Minor nitpick: Either make the color picker's right corners unrounded (change rounded to rounded-l), or add some slight padding on all sides (or just left + top + bottom) of the parent button. Either one would visually integrate the color picker into the button slightly better.

---

src/components/helpers/colour-picker-input.vue line 25 at r1 (raw file):

                    <span v-if="isOpen" class="text-white mx-auto self-center font-bold mix-blend-difference">X</span>
                </div>
                <input

It's a bit hard to tell that the hex text is selectable/modifiable. Maybe add a slight gray background upon hover?

Also, it seems that if you enter a non-valid hex value here, nothing happens. The user might erroneously think it's worked, or be confused why the text changed but not the color in the picker. I'd suggest either some sort of error message ("This is not a valid hex color"), or to revert the text to the last valid hex value.

[RyanCoulsonCA]

Reviewable status: 6 of 9 files reviewed, 3 unresolved discussions (waiting on @gordlin)

---

src/components/helpers/colour-picker-input.vue line 10 at r1 (raw file):

Previously, gordlin (Gordon Lin) wrote…

Minor nitpick: Either make the color picker's right corners unrounded (change rounded to rounded-l), or add some slight padding on all sides (or just left + top + bottom) of the parent button. Either one would visually integrate the color picker into the button slightly better.

Donethanks.

---

src/components/helpers/colour-picker-input.vue line 25 at r1 (raw file):

Previously, gordlin (Gordon Lin) wrote…

It's a bit hard to tell that the hex text is selectable/modifiable. Maybe add a slight gray background upon hover?

Also, it seems that if you enter a non-valid hex value here, nothing happens. The user might erroneously think it's worked, or be confused why the text changed but not the color in the picker. I'd suggest either some sort of error message ("This is not a valid hex color"), or to revert the text to the last valid hex value.

Added the slight background change on hover.

---

src/components/helpers/metadata-content.vue line 199 at r1 (raw file):

Previously, gordlin (Gordon Lin) wrote…

May be worth explaining somewhere that the 'Button' refers to the "Jump to storyline contents" (or whatever it's called) button.

Good catch, I've added a little info icon to clarify.

[yileifeng]

Reviewed 6 of 9 files at r1, 3 of 3 files at r2, all commit messages.
Reviewable status: all files reviewed, 3 unresolved discussions (waiting on @gordlin)

[RyanCoulsonCA]

Rebase added some unexpected changes for some reason. Working on it now.

[RyanCoulsonCA]

Rebase added some unexpected changes for some reason. Working on it now.

False alarm. All should be good. I blame RTO 🏢

[IshavSohal]

Reviewed 1 of 9 files at r1, 1 of 3 files at r2, 6 of 7 files at r3, 1 of 1 files at r4, all commit messages.
Reviewable status: all files reviewed, 3 unresolved discussions (waiting on @gordlin)

[gordlin]

Reviewed 1 of 3 files at r2, 6 of 7 files at r3, 1 of 1 files at r4, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @RyanCoulsonCA)