[full-ci] Redesign main layout #6086

lookacat · 2021-12-02T12:30:56Z

Description

See #6036

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Technical debt
Tests

Checklist:

Code changes
Unit tests updated
Acceptance tests updated

update-docs · 2021-12-02T12:30:59Z

Thanks for opening this pull request! The maintainers of this repository would appreciate it if you would create a changelog item based on your changes.

packages/web-runtime/package.json

pascalwengerter

@paulnebr could you move the application switcher out of the left sidebar into the topbar component within the runtime? Otherwise the user would run into issues both on mobile and when the rendered app doesn't have any navigation items :)

lookacat · 2021-12-06T07:42:22Z

@pascalwengerter i'll try

packages/web-runtime/src/App.vue

WIP WIP

fix top bar right side actions fix topbar & linting fix unittests remove inline style

author Paul Neubauer <paulneubauer@live.de> 1639010639 +0100 committer pwengerter <pascal@wengerter.info> 1640347147 +0100 parent c25b33f author Paul Neubauer <paulneubauer@live.de> 1639010639 +0100 committer pwengerter <pascal@wengerter.info> 1640347043 +0100 move sidebar navigation from ods to web fix animation style issue fix initial bug add newline to yarn lock fix unittests fix sidebar naming add changelog update snapshot tests enable smoke tests again fix rebase gone fix fav id fix favourites id Check deeper in left navbar for navItem text in acceptance tests

fschade

some tiny findings, beside that:

top left rounded corner has a white artifact border
overflow of main area has a margin around it
a lot of button inverse hard coded, could be problematic if the user has a bright theme

packages/web-app-files/src/App.vue

packages/web-runtime/src/components/SidebarNav/SidebarNav.vue

fschade · 2021-12-29T11:25:37Z

packages/web-runtime/src/components/TopBar.vue

+    image-rendering: auto;
+    image-rendering: crisp-edges;
+    image-rendering: pixelated;
+    image-rendering: -webkit-optimize-contrast;


hmmm, do we need to add -webkit-optimize-contrast manually or can't post-css help here?

fschade · 2021-12-29T11:27:00Z

packages/web-runtime/src/store/index.js

+    const navigation = state.navigation
    return {


can't we use spreading in both cases?

fschade · 2021-12-29T11:28:26Z

packages/web-runtime/src/App.vue

-      }
-
-      return 'fade'
+      return this.sidebarNavItems.length && this.windowWidth >= 1200


perfect candidate for a shared helper isScreenM, isScreenXL, .... Not topic of this pr

packages/web-runtime/src/App.vue

tests/e2e/cucumber/step_definitions/app.files.ts

ownclouders · 2021-12-29T13:32:47Z

Results for oC10SharingExternalRoot https://drone.owncloud.com/owncloud/web/21440/41/1
The following scenarios passed on retry:

webUISharingExternalToRoot/federationSharing.feature:378

ownclouders · 2021-12-29T13:35:03Z

Results for oC10SharingAccept https://drone.owncloud.com/owncloud/web/21440/15/1
The following scenarios passed on retry:

webUISharingAcceptShares/acceptShares.feature:111

fschade

GO 👍 , changes get resolved in separat PR

kulmann · 2021-12-30T10:43:36Z

packages/web-runtime/src/components/FeedbackLink.vue

@@ -9,7 +9,7 @@
      :aria-label="ariaLabel"
      aria-describedby="oc-feedback-link-description"
    >
-      <oc-icon name="feedback" />
+      <oc-icon name="feedback" variation="inverse" />


Will not be inverse anymore as soon as the redesign is complete. Ok as intermediate solution.

sonarcloud · 2021-12-30T11:25:57Z

SonarCloud Quality Gate failed.

1 Bug
0 Vulnerabilities
1 Security Hotspot
3 Code Smells

69.2% Coverage
0.0% Duplication

lookacat force-pushed the redesign-topbar branch 3 times, most recently from 052da82 to 5427261 Compare December 2, 2021 15:04

pascalwengerter mentioned this pull request Dec 2, 2021

Implement new topbar design #6018

Closed

4 tasks

lookacat force-pushed the redesign-topbar branch from 5427261 to 68769b4 Compare December 3, 2021 08:23

kulmann reviewed Dec 3, 2021

View reviewed changes

packages/web-runtime/package.json Outdated Show resolved Hide resolved

lookacat force-pushed the redesign-topbar branch 2 times, most recently from 68769b4 to 1f16c66 Compare December 3, 2021 14:01

pascalwengerter reviewed Dec 3, 2021

View reviewed changes

lookacat force-pushed the redesign-topbar branch 2 times, most recently from 6c48ba1 to 96bee10 Compare December 7, 2021 12:26

pascalwengerter reviewed Dec 8, 2021

View reviewed changes

packages/web-runtime/src/App.vue Outdated Show resolved Hide resolved

lookacat force-pushed the redesign-topbar branch 2 times, most recently from 1a83c24 to 565e979 Compare December 8, 2021 14:38

lookacat changed the title ~~Redesign main layout~~ [full-ci] Redesign main layout Dec 9, 2021

lookacat force-pushed the redesign-topbar branch 9 times, most recently from 25abe17 to 7206cd0 Compare December 9, 2021 10:11

kulmann requested changes Dec 9, 2021

View reviewed changes

packages/web-runtime/src/App.vue Outdated Show resolved Hide resolved

lookacat marked this pull request as ready for review December 10, 2021 09:10

lookacat requested a review from fschade as a code owner December 10, 2021 09:10

lookacat requested a review from pascalwengerter December 10, 2021 09:59

pascalwengerter force-pushed the redesign-topbar branch from ab5aa4d to f9ec707 Compare December 28, 2021 16:33

lookacat and others added 12 commits December 28, 2021 17:36

WIP

e174e22

WIP WIP

rework topbar WIP

ff09316

fix top bar right side actions fix topbar & linting fix unittests remove inline style

persist navigation closed state

60f1e72

add blob transition for navigation

ecfceaf

add navigation open / close transition

898993d

add navigation hover effect

13e44c3

add hover effect

ce3f229

Bump ODS to 12.0.0-alpha4

a3fb367

Remove unused OcAppContent component

775e6f6

Remove vue2-touch-events dependency

0b286fe

Simplify new SidebarNav structure & usage

7d4f84a

pascalwengerter force-pushed the redesign-topbar branch from f9ec707 to 7d4f84a Compare December 28, 2021 16:38

fschade added the Status:Needs-Review Needs review from a maintainer label Dec 29, 2021

fschade requested changes Dec 29, 2021

View reviewed changes

Address code review, fix acceptance tests

1d8954a

Remove acceptance test checking for UserMenu user name string

92b2af5

fschade self-requested a review December 30, 2021 10:34

fschade approved these changes Dec 30, 2021

View reviewed changes

kulmann approved these changes Dec 30, 2021

View reviewed changes

Address code review, add ODS bump changelog item

54c2af0

kulmann merged commit 3d56800 into master Dec 30, 2021

delete-merged-branch bot deleted the redesign-topbar branch December 30, 2021 12:14

pascalwengerter mentioned this pull request Dec 31, 2021

Redesign Follow-up #6203

Closed

11 tasks

pascalwengerter mentioned this pull request Feb 9, 2022

Replace/remove obsolete Vue dependencies #6019

Closed

4 tasks

pascalwengerter mentioned this pull request May 5, 2022

Branding when sidebar is not visible #3520

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[full-ci] Redesign main layout #6086

[full-ci] Redesign main layout #6086

lookacat commented Dec 2, 2021 •

edited

update-docs bot commented Dec 2, 2021

pascalwengerter left a comment

lookacat commented Dec 6, 2021

fschade left a comment

fschade Dec 29, 2021 •

edited

fschade Dec 29, 2021 •

edited

fschade Dec 29, 2021 •

edited

ownclouders commented Dec 29, 2021

ownclouders commented Dec 29, 2021

fschade left a comment

kulmann Dec 30, 2021

sonarcloud bot commented Dec 30, 2021

[full-ci] Redesign main layout #6086

[full-ci] Redesign main layout #6086

Conversation

lookacat commented Dec 2, 2021 • edited

Description

Screenshots (if appropriate):

Types of changes

Checklist:

update-docs bot commented Dec 2, 2021

pascalwengerter left a comment

Choose a reason for hiding this comment

lookacat commented Dec 6, 2021

fschade left a comment

Choose a reason for hiding this comment

fschade Dec 29, 2021 • edited

Choose a reason for hiding this comment

fschade Dec 29, 2021 • edited

Choose a reason for hiding this comment

fschade Dec 29, 2021 • edited

Choose a reason for hiding this comment

ownclouders commented Dec 29, 2021

ownclouders commented Dec 29, 2021

fschade left a comment

Choose a reason for hiding this comment

kulmann Dec 30, 2021

Choose a reason for hiding this comment

sonarcloud bot commented Dec 30, 2021

lookacat commented Dec 2, 2021 •

edited

fschade Dec 29, 2021 •

edited

fschade Dec 29, 2021 •

edited

fschade Dec 29, 2021 •

edited