Redesign header area

[gordlin]

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-alter

[yileifeng]

Nice work, new header looks like a solid enhancement. When you get the chance, please squash the multiple commits into one.

Some general issues:

• while on the Canada.ca template, the lower header does not seem sticky (only the top header is) when scrolling page
• loading in any product to the main editor page on the Canada.ca template, there is no table of contents - this is also an issue on the main branch so needs to be addressed as an urgent priority issue (will log this one)
• unsure on having tooltips on every header button, it makes sense for the icon only buttons and buttons with any truncated text but showing a tooltip for fully visible text may not be required

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

---

src/components/editor.vue line 7 at r1 (raw file):

        <div id="overlay" class="overlay" @click="closeSidebar"></div>
        <!-- Header bar -->
        <div class="editor-header-upper sticky top-0 bg-white z-20 border-b border-gray-200 max-h-full">

Hard to notice this border, suggest switching to border-black would provide more clarity

---

src/components/editor.vue line 247 at r1 (raw file):

                        <div class="dropdown editor-button">
                            <!-- The "Preview" button - hover over it to show the options -->
                            <button

The dropdown menu from the preview button should be aligned:

[gordlin]

while on the Canada.ca template, the lower header does not seem sticky (only the top header is) when scrolling page

This was the behaviour I originally intended. The upper header is meant for the "most important" utilities (like saving), so it was meant to be the only bar that was sticky to reduce wasted vertical space. But it doesn't seem like it takes that much space either way.

I've changed it so that both parts of the header are sticky (Donethanks). If anyone has any strong opinion about this, let me know and I can change it back.

loading in any product to the main editor page on the Canada.ca template, there is no table of contents - this is also an issue on the main branch so needs to be addressed as an urgent priority issue (will log this one)

Donethanks! A lot of tailwind breakpoints mysteriously fail on the Canada.ca template but work on the standalone version. No idea why. As a remedy, I've replaced the ones that were failing with a CSS media query approach.

unsure on having tooltips on every header button, it makes sense for the icon only buttons and buttons with any truncated text but showing a tooltip for fully visible text may not be required

Forgot to do this, I'll implement this on the next pass.

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

---

src/components/editor.vue line 7 at r1 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

Hard to notice this border, suggest switching to border-black would provide more clarity

Donethanks!

---

src/components/editor.vue line 247 at r1 (raw file):

Previously, yileifeng (Yi Lei Feng) wrote…

The dropdown menu from the preview button should be aligned:

Donethanks! Made them take the width of the parent button.

[gordlin]

When you get the chance, please squash the multiple commits into one.

One of the commits is from #510, so it'll disappear once it gets merged to main. I'll combine the others once I fix up the tooltips.

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

[RyanCoulsonCA]

Looks very nice! 🏆

Reviewed 1 of 4 files at r1.
Reviewable status: 1 of 5 files reviewed, 4 unresolved discussions (waiting on @gordlin and @yileifeng)

---

src/app.vue line 89 at r2 (raw file):

// Making the margins align with the canada.ca template

.canada-ca-site {

Unless anyone opposes, I'd say we just have the editor take up the full screen width.

I'm always tempted to line things up with the Canada.ca header as well when working with the WET template, but for most of our apps (Storylines included) we typically use the full screen width.

---

src/components/editor.vue line 245 at r2 (raw file):

                                    touch: ['hold', 500]
                                }"
                                >UUID: {{ uuid }}</span

UUID is probably the same in English and French, but maybe swap this to $t('editor.uuid') just incase we change it in the future

[IshavSohal]

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

---

a discussion (no related file):
Noticed that in the canada.ca template, some components (ex. buttons, images within panels) will overlap the header upon scrolling the page (not the editor). Perhaps setting the z-index could help. Besides that, changes look great, and make the editor much easier to use.

[gordlin]

Forgot to do this, I'll implement this on the next pass.

Donethanks!

When you get the chance, please squash the multiple commits into one.

Donethanks!

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

---

a discussion (no related file):

Previously, IshavSohal (Ishav Sohal) wrote…

Noticed that in the canada.ca template, some components (ex. buttons, images within panels) will overlap the header upon scrolling the page (not the editor). Perhaps setting the z-index could help. Besides that, changes look great, and make the editor much easier to use.

Donethanks, I think! Let me know if I missed anything.

---

src/app.vue line 89 at r2 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

Unless anyone opposes, I'd say we just have the editor take up the full screen width.

I'm always tempted to line things up with the Canada.ca header as well when working with the WET template, but for most of our apps (Storylines included) we typically use the full screen width.

Donethanks!

---

src/components/editor.vue line 245 at r2 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

UUID is probably the same in English and French, but maybe swap this to $t('editor.uuid') just incase we change it in the future

Donethanks!

[RyanCoulsonCA]

Reviewable status: 1 of 5 files reviewed, 5 unresolved discussions (waiting on @gordlin, @IshavSohal, and @yileifeng)

---

a discussion (no related file):
If you click on the hamburger menu on mobile to open the sidebar, an empty modal seems to pop up which doesn't allow you to do anything until you click somewhere:

---

src/app.vue line 17 at r3 (raw file):

export default class App extends Vue {
    currentPath = window.location.href;

I may be missing something, is this used anywhere? If not we can remove it.

[gordlin]

Going to re-create this PR. Somehow managed to completely screw up the local branch, git's seeing every line in metadata-editor.vue as a conflict.