Redesign header area

[gordlin]

RECREATION OF PR #514, AS THAT BRANCH WAS HAVING ISSUES

DEPENDS ON #510 (this branch is based on that branch). Pull that first!

Related Item(s)

Issues:
#504
#518

Changes

• [FEATURE] Implements the UI/UX team's Figma suggestions for the header, with a few extra changes.
  • Header now has two layers: The "upper header", containing the Leave editor button and all the save-related UI elements (unsaved changes warning, reset changes button, save button); and the "lower header", containing the product title/UUID and all other buttons (preview, download, etc.)
  • Share feedback button moved to lower header.
  • Redesigned unsaved changes warning and reset changes button.
  • Add icons to save and preview buttons.
  • Save and reset changes buttons will now be disabled until there are unsaved changes.
  • Added an editor language toggle in the upper header, which will only show up when not on the Canada.ca template.
  • Set title and UUID to truncate at one line, to prevent wrapping.
  • Add tooltips to all header elements. These can also be accessed on mobile by holding the element for 500ms.
  • On mobile display sizes, header is now sticky and most buttons have their text hidden (only icons).
  • Added a dark border between the upper/lower headers.
• [FIX] Repairs various layout issues and bugs related to the Canada.ca template.
  • Added left/right-padding equal to that of the Canada.ca elements.
  • Fixed ToC not showing up.
  • Fixed new/load product pages being partially hidden by the footer.
• [FIX] Makes the Preview dropdown buttons wider, equal to the width of the Preview parent button.

Notes

Header, desktop, no unsaved changes:

Header, desktop, with unsaved changes:

Header, mobile, with unsaved changes and long truncated title:

Testing

Steps:

1. Open any product.
2. Try out each of the above-listed changes in the header. Try testing in different environments and screen sizes, with long and short titles/UUIDs, etc.
3. Go to the Canada.ca version of the editor, and test it out, keeping an eye out for the above listed fixes. Things should work the same as the standalone app.

---

This change is 

[github-actions]

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

[gordlin]

Reviewable status: 0 of 4 files reviewed, 1 unresolved discussion (waiting on @IshavSohal, @RyanCoulsonCA, and @yileifeng)

---

a discussion (no related file):
All comments on the prior PR (#514) should be fixed here. Let me know if anything's been undone that I didn't notice.

[RyanCoulsonCA]

Reviewed 2 of 4 files at r1, 2 of 2 files at r2, 1 of 1 files at r3, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @IshavSohal and @yileifeng)

[IshavSohal]

Noticed that the product's title remains the same when changing languages.

Also, the editor language toggle still appears for the Canada.ca template, but it also appears for all other pages (dashboard, edit existing product, create new product), so not sure if the issue pertains to this PR.

Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @yileifeng)

[gordlin]

Noticed that the product's title remains the same when changing languages.

This is expected behaviour. The product title language, and other metadata, is controlled by the config language (i.e. the thing you change with the "View English/French Config" button) and not the page language.

Also, the editor language toggle still appears for the Canada.ca template, but it also appears for all other pages (dashboard, edit existing product, create new product), so not sure if the issue pertains to this PR.

Yeah, odd. It seems to be an issue with the URLs used for the "Is this a Canada.ca template?" check. I've fixed it for the editor, new/load product pages, and the dashboard; the language toggle should now hide properly.

Donethanks!

Reviewable status: 2 of 5 files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA and @yileifeng)

[IshavSohal]

Reviewable status: 2 of 5 files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA and @yileifeng)

[yileifeng]

Reviewable status: 2 of 5 files reviewed, 6 unresolved discussions (waiting on @gordlin and @RyanCoulsonCA)

---

a discussion (no related file):

Previously, gordlin (Gordon Lin) wrote…

All comments on the prior PR (#514) should be fixed here. Let me know if anything's been undone that I didn't notice.

Looking good for the most part, a few issues found:

1. When I reduce the browser size, it results in a double scrollbar on the Canada.ca template:

2. Some potential WET styling conflicts as the slide controls are misaligned on Canada.ca templates only:

3. On the Canada.ca template, using its language toggle incorrectly updates the URL leading to a misdirected page (to https://ramp4-pcar4.github.io/storylines-editor/new-header-bar-recreated/index-ca-fr.html#/fr/00000000-0000-0000-0000-000000000000). If easy enough fix to include in this PR would be great, otherwise high prio new issue is fine.

---

src/components/editor.vue line 8 at r4 (raw file):

        <!-- Header bar -->
        <div class="sticky top-0" style="z-index: 150">
            <div class="editor-header-upper sticky top-0 bg-white border-b border-black max-h-full">

I think it would be nice to have a top border for the top header to distinguish it from the Canada.ca template header

---

src/components/editor.vue line 14 at r4 (raw file):

                        <router-link
                            :to="{ name: 'home' }"
                            class=""

remove empty class

---

src/components/editor.vue line 67 at r4 (raw file):

                                touch: ['hold', 500],
                                offset: [0, 2]
                            }"

WAVE error: "Empty button - A button is empty or has no value text". Should be fixed by adding an aria-label.

---

src/components/editor.vue line 376 at r4 (raw file):

                                        animateFill: true,
                                        touch: ['hold', 500]
                                    }"

Same empty button error for help button, needs an aria-label

---

src/components/editor.vue line 396 at r4 (raw file):

                                        :href="`mailto:[email protected]?subject=${$t(
                                            'editor.feedback.subject'
                                        )}`"

Got a WAVE empty link error on the feedback button, probably can also be fixed with an aria-label on anchor element but could be wrong

[gordlin]

Reviewable status: 0 of 8 files reviewed, 6 unresolved discussions (waiting on @RyanCoulsonCA and @yileifeng)

---

a discussion (no related file):

When I reduce the browser size, it results in a double scrollbar on the Canada.ca template:

This may be unavoidable, unfortunately. The outer scrollbar is for the whole page, and the inner scrollbar is for the embedded storylines editor application, which has a fixed maximum height (I think it was 100% of the viewport height?) and so must create its own scrollbars if the internal components (like the slide editor, or the ToC) gets long enough.

Some potential WET styling conflicts as the slide controls are misaligned on Canada.ca templates only:

Donethanks, I added manual overrides for these controls.

Unfortunately this is only a temporary solution. If we want this to not happen for any RESPECT editor component, we'll likely need to find a way to cancel out all external stylings from the Canada.ca template within the app. I've found some promising potential solutions (like using a shadow DOM); we could create an issue to explore and implement a permanent solution.

On the Canada.ca template, using its language toggle incorrectly updates the URL leading to a misdirected page

Donethanks, I edited the URLs. I'm not sure about the logic being used when changing languages, though: it always goes to the page that you initially loaded the Canada.ca template with. For example, if you started the app in the editor, then go back to the 'Load product' screen, then change the language to French, it tries to load back into the editor and not the 'Load product' screen. Is this intentional?

(Also, sometimes switching languages in the editor section fails, and the product won't load unless you go back to the 'Load product' screen and re-load with the UUID. This may just be on my end, though).

---

src/components/editor.vue line 8 at r4 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

I think it would be nice to have a top border for the top header to distinguish it from the Canada.ca template header

Donethanks!

---

src/components/editor.vue line 14 at r4 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

remove empty class

Donethanks!

---

src/components/editor.vue line 67 at r4 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

WAVE error: "Empty button - A button is empty or has no value text". Should be fixed by adding an aria-label.

Donethanks!

---

src/components/editor.vue line 376 at r4 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

Same empty button error for help button, needs an aria-label

Donethanks!

---

src/components/editor.vue line 396 at r4 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

Got a WAVE empty link error on the feedback button, probably can also be fixed with an aria-label on anchor element but could be wrong

Donethanks!

[yileifeng]

Reviewable status: 0 of 8 files reviewed, 4 unresolved discussions (waiting on @gordlin and @RyanCoulsonCA)

---

a discussion (no related file):

If we want this to not happen for any RESPECT editor component, we'll likely need to find a way to cancel out all external stylings from the Canada.ca template within the app. I've found some promising potential solutions (like using a shadow DOM); we could create an issue to explore and implement a permanent solution.

If you can writeup an issue for this would be useful to reference for future 👍

I'm not sure about the logic being used when changing languages, though: it always goes to the page that you initially loaded the Canada.ca template with. For example, if you started the app in the editor, then go back to the 'Load product' screen, then change the language to French, it tries to load back into the editor and not the 'Load product' screen. Is this intentional?

This seems like outdated logic to me. If possible, it makes sense for the construction of the new URL route on lang change to be based on the current page route.

New bug: loading in a UUID on Canada.ca template and proceeding to the main editor page preserves the position of the page instead of starting from the top.

---

src/components/editor.vue line 376 at r4 (raw file):

Previously, gordlin (Gordon Lin) wrote…

Donethanks!

needs a translation

---

src/components/editor.vue line 396 at r4 (raw file):

Previously, gordlin (Gordon Lin) wrote…

Donethanks!

needs a translation

---

src/components/editor.vue line 61 at r5 (raw file):

                        <button
                            @click="openSidebar"
                            aria-label="open sidebar button"

needs a translation

[gordlin]

Reviewable status: 0 of 8 files reviewed, 4 unresolved discussions (waiting on @RyanCoulsonCA and @yileifeng)

---

a discussion (no related file):

If you can writeup an issue for this would be useful to reference for future 👍

Donethanks! #559.

This seems like outdated logic to me. If possible, it makes sense for the construction of the new URL route on lang change to be based on the current page route.

The issue seems to be that the toggle URLs are hard-coded immediately after the editor loads in. Since the Canada.ca wrapper is static throughout all the editor's URL changes, the toggle link will stay at the initial loaded page even as you change pages in the editor.

I've spun this into a new issue: #561.

New bug: loading in a UUID on Canada.ca template and proceeding to the main editor page preserves the position of the page instead of starting from the top.

Donethanks! The app now scrolls to the top of the page after loading into the main editor.

---

src/components/editor.vue line 376 at r4 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

needs a translation

Donethanks!

---

src/components/editor.vue line 396 at r4 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

needs a translation

Donethanks!

---

src/components/editor.vue line 61 at r5 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

needs a translation

Donethanks!

[yileifeng]

Reviewed 2 of 7 files at r5, all commit messages.
Reviewable status: 2 of 8 files reviewed, 1 unresolved discussion (waiting on @gordlin and @RyanCoulsonCA)

---

a discussion (no related file):

Previously, gordlin (Gordon Lin) wrote…

If you can writeup an issue for this would be useful to reference for future 👍

Donethanks! #559.

This seems like outdated logic to me. If possible, it makes sense for the construction of the new URL route on lang change to be based on the current page route.

The issue seems to be that the toggle URLs are hard-coded immediately after the editor loads in. Since the Canada.ca wrapper is static throughout all the editor's URL changes, the toggle link will stay at the initial loaded page even as you change pages in the editor.

I've spun this into a new issue: #561.

New bug: loading in a UUID on Canada.ca template and proceeding to the main editor page preserves the position of the page instead of starting from the top.

Donethanks! The app now scrolls to the top of the page after loading into the main editor.

Noticing that the editor jumps up to the top of the page everytime a new slide is selected which is not the behavior on non Canada.ca templates

[gordlin]

Reviewable status: 2 of 8 files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA and @yileifeng)

---

a discussion (no related file):

Previously, yileifeng (Yi Lei Feng) wrote…

Noticing that the editor jumps up to the top of the page everytime a new slide is selected which is not the behavior on non Canada.ca templates

Donethanks. There was a scrollTo command that ran every time a slide was selected, making the app scroll to the top. I'm not sure what it was for, so hopefully it's not still needed somewhere else (from my testing, it doesn't seem to be).