Merge pull request #6086 from owncloud/redesign-topbar

[full-ci] Redesign main layout

__fixtures__/sidebarNavItems.js

@@ -0,0 +1,48 @@
+export default [
+ {
+ name: "All files",
+ iconMaterial: "folder",
+ route: {
+ name: "files-personal",
+ path: "/files/list/all"
+ },
+ active: true
+ },
+ {
+ name: "Shared with me",
+ iconMaterial: "shared-with-me",
+ route: {
+ name: "files-shared-with-me",
+ path: "/files/list/shared-with-me"
+ },
+ active: false
+ },
+ {
+ name: "Shared with others",
+ iconMaterial: "shared-with-others",
+ route: {
+ name: "files-shared-with-others",
+ path: "/files/list/shared-with-others"
+ },
+ active: false
+ },
+ {
+ name: "Shared via link",
+ iconMaterial: "link",
+ route: {
+ name: "files-shared-via-link",
+ path: "/files/list/shared-via-link"
+ },
+ active: false
+ },
+ {
+ name: "Deleted files",
+ iconMaterial: "delete",
+ route: {
+ name: "files-trashbin",
+ path: "/files/list/trash-bin"
+ },
+ active: false
+ }
+]
+

changelog/unreleased/enhancement-redesign-main-layout

@@ -0,0 +1,8 @@
+Enhancement: Redesign main layout
+
+We've started to implement the redesign by adjusting the sidebar,
+topbar and appswitcher.
+While doing so, we also removed the `vue2-touch-events` dependency.
+
+https://github.com/owncloud/web/issues/6036
+https://github.com/owncloud/web/pull/6086

changelog/unreleased/enhancement-update-ods

@@ -0,0 +1,17 @@
+Enhancement: Update ODS to v12.0.0-alpha5
+
+We updated the ownCloud Design System to version 12.0.0-alpha5. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+
+- Change - Do not sort in OcTable: https://github.com/owncloud/owncloud-design-system/pull/1825
+- Change - Remove OcAppSideBar component: https://github.com/owncloud/owncloud-design-system/pull/1810
+- Change - Remove OcAppBar component: https://github.com/owncloud/owncloud-design-system/pull/1810
+- Change - Remove oc-table-files from ods: https://github.com/owncloud/owncloud-design-system/pull/1817
+- Change - Move OcSidebarNav and OcSidebarNavItem to web: https://github.com/owncloud/owncloud-design-system/pull/6036
+- Change - Remove unused props for unstyled components: https://github.com/owncloud/owncloud-design-system/pull/1795
+- Enhancement - Fix OcAvatar line-height: https://github.com/owncloud/owncloud-design-system/pull/1810
+- Enhancement - Adjust OcSearchBar to new design: https://github.com/owncloud/owncloud-design-system/pull/1810
+- Enhancement - Add svg icon for spaces: https://github.com/owncloud/owncloud-design-system/pull/1846
+- Bugfix - Rename GhostElement: https://github.com/owncloud/owncloud-design-system/pull/1845
+
+https://github.com/owncloud/web/pull/6086
+https://github.com/owncloud/owncloud-design-system/releases/tag/v12.0.0-alpha5

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

@@ -110,8 +110,6 @@ main {
 }
 
 .files-list-wrapper {
- height: 100%;
- max-height: 100%;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr;

packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap

@@ -3,10 +3,9 @@
 exports[`List component when no resource is found should show no-content-message component 1`] = `
 <div class="files-search-result">
  <div class="uk-height-1-1 uk-flex uk-flex-column uk-flex-center uk-flex-middle uk-text-center files-empty">
- <div class="oc-icon oc-icon-xxl oc-icon-passive"><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" version="1.0" viewBox="0 0 16 16" height="16" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" aria-hidden="true" focusable="false">
- <g xmlns="http://www.w3.org/2000/svg" transform="matrix(.86667 0 0 .86667 -172.05 -864.43)">
- <path d="m200.2 999.72c-0.28913 0-0.53125 0.2421-0.53125 0.53117v12.784c0 0.2985 0.23264 0.5312 0.53125 0.5312h15.091c0.2986 0 0.53124-0.2327 0.53124-0.5312l0.0004-10.474c0-0.2889-0.24211-0.5338-0.53124-0.5338l-7.5457 0.0005-2.3076-2.3078z"></path>
- </g>
+ <div class="oc-icon oc-icon-xxl oc-icon-passive"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+ <path xmlns="http://www.w3.org/2000/svg" fill="none" d="M0 0h24v24H0z"></path>
+ <path xmlns="http://www.w3.org/2000/svg" d="M12.414 5H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2z"></path>
  </svg></div>
  <div class="oc-text-muted uk-text-large">
  <p class="oc-text-muted"><span data-msgid="No search term entered" data-current-language="en_US">No search term entered</span></p>
@@ -19,10 +18,9 @@ exports[`List component when no resource is found should show no-content-message
 exports[`List component when no search term is entered should show no-content-message component 1`] = `
 <div class="files-search-result">
  <div class="uk-height-1-1 uk-flex uk-flex-column uk-flex-center uk-flex-middle uk-text-center files-empty">
- <div class="oc-icon oc-icon-xxl oc-icon-passive"><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" version="1.0" viewBox="0 0 16 16" height="16" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" aria-hidden="true" focusable="false">
- <g xmlns="http://www.w3.org/2000/svg" transform="matrix(.86667 0 0 .86667 -172.05 -864.43)">
- <path d="m200.2 999.72c-0.28913 0-0.53125 0.2421-0.53125 0.53117v12.784c0 0.2985 0.23264 0.5312 0.53125 0.5312h15.091c0.2986 0 0.53124-0.2327 0.53124-0.5312l0.0004-10.474c0-0.2889-0.24211-0.5338-0.53124-0.5338l-7.5457 0.0005-2.3076-2.3078z"></path>
- </g>
+ <div class="oc-icon oc-icon-xxl oc-icon-passive"><svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+ <path xmlns="http://www.w3.org/2000/svg" fill="none" d="M0 0h24v24H0z"></path>
+ <path xmlns="http://www.w3.org/2000/svg" d="M12.414 5H21a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h7.414l2 2z"></path>
  </svg></div>
  <div class="oc-text-muted uk-text-large">
  <p class="oc-text-muted"><span data-msgid="No search term entered" data-current-language="en_US">No search term entered</span></p>

packages/web-app-markdown-editor/src/App.vue

@@ -1,5 +1,5 @@
 <template>
- <main id="markdown-editor">
+ <main id="markdown-editor" class="oc-mx-s oc-my-s">
  <markdown-editor-app-bar />
  <oc-notifications>
  <oc-notification-message

packages/web-app-media-viewer/src/App.vue

@@ -359,9 +359,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#mediaviewer {
- min-height: 100vh;
-}
 .media-viewer-player {
  max-width: 90vw;
  height: 70vh;

packages/web-runtime/package.json

@@ -14,7 +14,7 @@
  "lodash-es": "^4.17.21",
  "luxon": "^2.0.0",
  "oidc-client": "1.11.5",
- "owncloud-design-system": "12.0.0-alpha3",
+ "owncloud-design-system": "12.0.0-alpha4",
  "owncloud-sdk": "1.0.0-2296",
  "p-queue": "^6.1.1",
  "popper-max-size-modifier": "^0.2.0",
@@ -38,7 +38,6 @@
  "vue-router": "^3.1.3",
  "vue-scrollto": "^2.15.0",
  "vue-select": "^3.13.2",
- "vue2-touch-events": "^3.2.2",
  "vuex": "^3.6.2",
  "vuex-extensions": "^1.1.5",
  "vuex-persist": "3.1.3",