Implement minor slide editor redesign, improve 'full slide' functionality

[gordlin]

Related Item(s)

Issues:
#450
#453
#457

Changes

• Implements a minor redesign of the slide editor.
  • Adjusts the header/common section to enhance clarity.
    • [Spacing of Horizontal Checkboxes #453] Adds more spacing between slide options to clarify which checkbox belongs to which.
  • Round-ifys buttons and inputs so they match the ToC and metadata editor.
  • Unifies the outlines to a common 'royal blue' colour upon keyboard focus, to make it more clear what's been selected.
  • Moves most input labels to be a line before the input, which prevents overlap on small screens and matches design on metadata editor.
  • Adds a very minor shadow to inputs to emphasize their existence.
  • Updates the warning modals for Change content type and Make the current panel the full slide to use the new, clearer design.
  • Adjusts the styles of the text and image editors to improve clarity. (NOTE: remaining editors haven't really been modified; could be a TODO for the future).
    • Changes breakpoints for the image previews so they don't get too small to see (largest screen allows 3 images in a row, medium screens allow 2, mobile-like screens allow 1).
• [The "Make the right panel the full slide" feature #450] Changes the Make right panel the full slide option to Make the current panel the full slide.
  • Upon disabling the option, user will now be asked which side they want the new panel to be on (left or right) (See image below).
• [Vertical scrollbar appears when no slide is selected #457] Prevents vertical scrollbar from appearing when editor page first loaded and no slide is selected.

Notes

New common slide editor header:

Enabling Make the current panel the full slide modal:

Disabling Make the current panel the full slide modal:

Change panel type modal:

Image editor (large screens):

Image editor (medium screens):

Image editor (small screens):

Testing

Steps:

1. Open any product (e.g. 00000000-0000-0000-0000-000000000000). Immediately notice there's no vertical scroll bar for the slide editor area.
2. Open any slide. See the modified common slide elements (title, slide options, etc.) at the top.
3. Test out the Make current panel the full slide option. Select it, select continue for the warning, and the panel will be the whole slide. De-select the option, and you can choose which side to put the new panel on.

---

This change is 

[github-actions]

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

[IshavSohal]

Reviewable status: 0 of 14 files reviewed, 1 unresolved discussion (waiting on @gordlin)

---

a discussion (no related file):
Looks great, everything seems to be working as intended. However I noticed that for slideshow panels, the styling for the captions got a bit messed up:

[RyanCoulsonCA]

Looks very nice, good work!

Reviewed 14 of 14 files at r1.
Reviewable status: all files reviewed (commit messages unreviewed), 2 unresolved discussions (waiting on @gordlin)

---

src/components/helpers/multi-option-modal.vue line 27 at r1 (raw file):

                    {{ $t('editor.cancel') }}
                </button>
                <!--                <button class="editor-button bg-black text-white hover:bg-gray-800" @click="onOk">-->

These comments can probably be removed before we merge.

[szczz]

Just a heads up that there are a few merge conflicts

Reviewed 14 of 14 files at r1, all commit messages.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @gordlin)

[gordlin]

Reviewable status: 8 of 14 files reviewed, 2 unresolved discussions (waiting on @IshavSohal, @RyanCoulsonCA, and @szczz)

---

a discussion (no related file):

Previously, IshavSohal (Ishav Sohal) wrote…

Looks great, everything seems to be working as intended. However I noticed that for slideshow panels, the styling for the captions got a bit messed up:

Donethanks! Also moved the caption input to the top (above the image preview stuff) for easier access.

---

src/components/helpers/multi-option-modal.vue line 27 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

These comments can probably be removed before we merge.

Donethanks!

[gordlin]

Reviewable status: 6 of 15 files reviewed, 3 unresolved discussions (waiting on @IshavSohal, @RyanCoulsonCA, and @szczz)

---

a discussion (no related file):
Latest push adds a bunch of minor fixes:

• Changed the panel type name in the type change warning popup to uppercase
• Implemented minor design changes in the map editor, slideshow editor, and video editor. They should now use the rounded UI elements, and layout better as the screen size changes.

As an aside, the CSS in the storylines editor is getting a bit fragmented. I've noticed a bunch of styles being re-implemented multiple times, and a couple hacky workarounds for styling problems that could be resolved by simplifying the stylesheets (so there aren't multiple conflicting styles for an element, for example). It might be a good future task to 'refactor and unify' the CSS in the app.

[RyanCoulsonCA]

Reviewed 5 of 6 files at r2, 4 of 4 files at r3, all commit messages.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @gordlin and @IshavSohal)

---

a discussion (no related file):

Previously, gordlin (Gordon Lin) wrote…

Latest push adds a bunch of minor fixes:

• Changed the panel type name in the type change warning popup to uppercase
• Implemented minor design changes in the map editor, slideshow editor, and video editor. They should now use the rounded UI elements, and layout better as the screen size changes.

As an aside, the CSS in the storylines editor is getting a bit fragmented. I've noticed a bunch of styles being re-implemented multiple times, and a couple hacky workarounds for styling problems that could be resolved by simplifying the stylesheets (so there aren't multiple conflicting styles for an element, for example). It might be a good future task to 'refactor and unify' the CSS in the app.

Just a couple more minor things:

1. The caption input for charts is quite small, this can probably be made longer:
   

2. The spacing has been removed between the 'text' and 'panel' switch for dynamic panels which is causing the focus outline to overlap the other button.
   

[gordlin]

Reviewable status: 10 of 17 files reviewed, 2 unresolved discussions (waiting on @IshavSohal, @RyanCoulsonCA, and @szczz)

---

a discussion (no related file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

Just a couple more minor things:

1. The caption input for charts is quite small, this can probably be made longer:
   

2. The spacing has been removed between the 'text' and 'panel' switch for dynamic panels which is causing the focus outline to overlap the other button.
   

1. Donethanks, I've modified the design of the chart item fields.

2. Donethanks! I've changed the styling a bit so that the buttons look like a button group, which is what it was before the redesign. The outline still overlaps, but I think it makes sense now.

[RyanCoulsonCA]

Reviewed 7 of 7 files at r4, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @IshavSohal)

[IshavSohal]

Reviewed 5 of 14 files at r1, 2 of 6 files at r2, 3 of 4 files at r3, 7 of 7 files at r4, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @gordlin)

[yileifeng]

Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @gordlin)

---

a discussion (no related file):

Previously, gordlin (Gordon Lin) wrote…

Donethanks! Also moved the caption input to the top (above the image preview stuff) for easier access.

Good enhancements all-around. For the enhanced "full slide" functionality, I'm not able to get the "make current panel the full slide" popup to show up if the panel is empty. See below:

When the panel has some type of content, the behavior works as intended.

[gordlin]

Reviewable status: 15 of 17 files reviewed, all discussions resolved (waiting on @IshavSohal and @RyanCoulsonCA)

---

a discussion (no related file):

Previously, yileifeng (Yi Lei Feng) wrote…

Good enhancements all-around. For the enhanced "full slide" functionality, I'm not able to get the "make current panel the full slide" popup to show up if the panel is empty. See below:

When the panel has some type of content, the behavior works as intended.

Donethanks!

[yileifeng]

Reviewed 5 of 14 files at r1, 1 of 6 files at r2, 3 of 4 files at r3, 6 of 7 files at r4, 2 of 2 files at r5, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @gordlin)

[spencerwahl]

Reviewed 5 of 14 files at r1, 1 of 6 files at r2, 3 of 4 files at r3, 6 of 7 files at r4, 2 of 2 files at r5, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @gordlin)