Design polishing II: the return of the shadows

[diocas]

Some more issues:

• App iframe without borders [full-ci] Enforce extensions to always display the ui-header #6401
  • now the iframe has the default grey border and it would look better without it.
  • I'm also not sure about having the blue space around since we no longer have the rounded corners. It doesn't look too bad, but it's not consistent.
• Shadow fix in the left menu Add missing changelog items, fix UI glitches, supersede dependabot PRs #6386
  • you already fixed the shadow in almost all places but missed the left menu (check pic [1]). The current is applied around the squared div and not the one with the rounded corners.
• Inconsistent buttons height (top bar menu) Add missing changelog items, fix UI glitches, supersede dependabot PRs #6386
  • the "New" button has 40px of height and the batch buttons have 42 (prob due to the borders). You fixed the "jump" by increasing the container height, but this means the buttons are no longer vertically aligned.
• Inconsistent hovering in context menu
  • Now we can click on an action of the context menu even if we are not hovering the action's text. But the over effect (color change) only happens when we hover the text, so it's inconsistent. (edit: no longer see the hover effect, which is also an issue as there should be some)
• Apps background is no longer white [full-ci] Enforce extensions to always display the ui-header #6401
  • Opening apps like drawio has a blue background with black letters. Before apps had a white background.
• Drag and drop area doesn't cover the full width Further small redesign fixes #6403
  • If you try to drag and drop a file, the overlay has a strange margin on the left
• Still too big and inconsistent UI
  • Still have the feeling things are too big but it would be better if there were less inconsistencies. The batch actions/new buttons are super huge (and too much spacing between them), the breadcrumb text size is huge and proiminent, the quick action buttons are huge (bigger than the file icon), the application switcher button is huge (and takes some prominence from the logo; maybe smaller squares and a dimmed color would help), the details (and sub-) pane(s) have huge text (again bigger than the files list)
• Inconsistent icons
  • The folder icon in the left menu is not the same as the folders in the file listing (to me the last one is too round)
  • Also have some doubts about using some filled and others don't
• The personal storage text is a bit crowded
  • Why don't we replace the cloud icon and put a circle that shows the amount used (instead of a line), with the % in the middle?
• Missing round corner public link Further small redesign fixes #6403
  • File listing in public links, top left corner is missing (where usually is the navbar collapse button)
• html and body don't have height = 100%
  • The loader and error message are not centered without it. This doesn't seem to break anything else.
• The titles in "Shared with me" are not left aligned properly Further small redesign fixes #6403
  • they're missing the extra space on the left that was added to compensate the shadow

There are others, but I see they might be covered in #6280 so I'll wait until that gets closed. Feel free to tick the ones you don't agree with.

[1]

[pascalwengerter]

I've ticket two boxes, one is fixed in master already (jumping batch actions) and the other one (SidebarNav icon whitespace) on #6386. Now taking a look into the other ones, although we will most likely not be able to fix all of them for the upcoming release

[pascalwengerter]

@diocas App iframe without borders does that reference the DrawIo or External app?

[elizavetaRa]

@pascalwengerter the html element <iframe> has set by user agent (Chrome) grey border with border-with 2px, so you can see this border by external apps. Another "border" is set padding for #web-content-main, in our opinion for external apps it would look better without.

[diocas]

@pascalwengerter Any app that uses an iframe? So, I guess external and drawio as well (we should enable the header there, btw).

For the jumping batch actions, I mention above that I saw it was solved, it's just that the solution didn't address what might be the real reason: the buttons don't have the same height. This is OCD from my part, but I clearly notice that things are not properly aligned.

For the sidebar nav, it's not just the extra white space. It's the shadow that is not in the correct place (it has square corners).

[pascalwengerter]

@pascalwengerter Any app that uses an iframe? So, I guess external and drawio as well (we should enable the header there, btw).

For the jumping batch actions, I mention above that I saw it was solved, it's just that the solution didn't address what might be the real reason: the buttons don't have the same height. This is OCD from my part, but I clearly notice that things are not properly aligned.

For the sidebar nav, it's not just the extra white space. It's the shadow that is not in the correct place (it has square corners).

Great eye for detail, I'll take another look!

[pascalwengerter]

@pascalwengerter the html element <iframe> has set by user agent (Chrome) grey border with border-with 2px, so you can see this border by external apps. Another "border" is set padding for #web-content-main, in our opinion for external apps it would look better without.

Ah damn, missed it since I'm mainly using Firefox...investigating 🕵🏽

[pascalwengerter]

@pascalwengerter Any app that uses an iframe? So, I guess external and drawio as well (we should enable the header there, btw).
For the jumping batch actions, I mention above that I saw it was solved, it's just that the solution didn't address what might be the real reason: the buttons don't have the same height. This is OCD from my part, but I clearly notice that things are not properly aligned.
For the sidebar nav, it's not just the extra white space. It's the shadow that is not in the correct place (it has square corners).

Great eye for detail, I'll take another look!

Fixed here

*append: There seemed to be a tiny margin-bottom-class on the "+ New" button too that messed with things. Removed in #6386

[pascalwengerter]

Closing this since the actionable items have been resolved or are already tracked in #6279 and #6280 - I'd ask @tbsbdr to take another look at the more generic feedback and deduce tickets from them 😉

[diocas]

@pascalwengerter one more issue (fee free to re-open or put it somewhere else)...
The over on the breadcrumb is not ok (the text has spacing around the words, and that becomes visible) and then the hover in the context menu inherits this effect (which becomes inconsistent with the rest). The context menu even has 2 levels of hover depending on wether we hover the text or just the button.