[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

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",