Redesign main layout followup

__fixtures__/sidebarNavItems.js

@@ -1,7 +1,7 @@
 export default [
   {
     name: "All files",
-    iconMaterial: "folder",
+    icon: "folder",
     route: {
       name: "files-personal",
       path: "/files/list/all"
@@ -10,7 +10,7 @@ export default [
   },
   {
     name: "Shared with me",
-    iconMaterial: "shared-with-me",
+    icon: "shared-with-me",
     route: {
       name: "files-shared-with-me",
       path: "/files/list/shared-with-me"
@@ -19,7 +19,7 @@ export default [
   },
   {
     name: "Shared with others",
-    iconMaterial: "shared-with-others",
+    icon: "shared-with-others",
     route: {
       name: "files-shared-with-others",
       path: "/files/list/shared-with-others"
@@ -28,7 +28,7 @@ export default [
   },
   {
     name: "Shared via link",
-    iconMaterial: "link",
+    icon: "link",
     route: {
       name: "files-shared-via-link",
       path: "/files/list/shared-via-link"
@@ -37,7 +37,7 @@ export default [
   },
   {
     name: "Deleted files",
-    iconMaterial: "delete",
+    icon: "delete",
     route: {
       name: "files-trashbin",
       path: "/files/list/trash-bin"

changelog/unreleased/enhancement-redesign-main-layout

@@ -7,3 +7,4 @@ 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
 https://github.com/owncloud/web/pull/6222
+https://github.com/owncloud/web/pull/6228

changelog/unreleased/enhancement-update-ods

@@ -1,6 +1,6 @@
-Enhancement: Update ODS to v12.0.0-alpha10
+Enhancement: Update ODS to v12.0.0-alpha12
 
-We updated the ownCloud Design System to version 12.0.0-alpha10. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+We updated the ownCloud Design System to version 12.0.0-alpha12. 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
@@ -27,4 +27,5 @@ We updated the ownCloud Design System to version 12.0.0-alpha10. Please refer to
 https://github.com/owncloud/web/pull/6086
 https://github.com/owncloud/web/pull/6142
 https://github.com/owncloud/web/pull/6213
-https://github.com/owncloud/owncloud-design-system/releases/tag/v12.0.0-alpha10
+https://github.com/owncloud/web/pull/6228
+https://github.com/owncloud/owncloud-design-system/releases/tag/v12.0.0-alpha12

packages/web-app-files/src/components/ActionMenuItem.vue

@@ -18,6 +18,7 @@
         v-else-if="action.icon"
         data-testid="action-icon"
         :name="action.icon"
+        :fill-type="action.iconFillType || 'fill'"
         size="medium"
       />
       <span class="oc-files-context-action-label" data-testid="action-label">{{

packages/web-app-files/src/components/AppBar/AppBar.vue

@@ -54,7 +54,7 @@
               padding-size="small"
             >
               <ul class="oc-list">
-                <li>
+                <li class="oc-my-xs">
                   <file-upload
                     :path="currentPath"
                     :headers="headers"

packages/web-app-files/src/components/AppBar/Upload/FileDrop.vue

@@ -1,27 +1,29 @@
 <template>
-  <vue-dropzone
-    v-if="dropzone"
-    id="oc-dropzone"
-    ref="ocDropzone"
-    class="oc-dropzone"
-    :options="ocDropzone_options"
-    :use-custom-slot="true"
-    :include-styling="false"
-    @vdropzone-drop="$_ocUpload_addDropToQueue"
-    @vdropzone-files-added="$_ocDropzone_dragEnd"
-    @vdropzone-file-added="$_ocDropzone_removeFiles"
-    @vdropzone-drag-leave="$_ocDropzone_dragEnd"
-  >
-    <oc-dropzone>
-      <translate> Drag and drop to upload content into current folder </translate>
-    </oc-dropzone>
-  </vue-dropzone>
+  <div v-if="dropzone" :class="[sidebarStateClass]">
+    <vue-dropzone
+      id="oc-dropzone"
+      ref="ocDropzone"
+      class="oc-dropzone-container"
+      :class="[sidebarStateClass]"
+      :options="ocDropzone_options"
+      :use-custom-slot="true"
+      :include-styling="false"
+      @vdropzone-drop="$_ocUpload_addDropToQueue"
+      @vdropzone-files-added="$_ocDropzone_dragEnd"
+      @vdropzone-file-added="$_ocDropzone_removeFiles"
+      @vdropzone-drag-leave="$_ocDropzone_dragEnd"
+    >
+      <oc-dropzone>
+        <translate> Drag and drop to upload content into current folder </translate>
+      </oc-dropzone>
+    </vue-dropzone>
+  </div>
 </template>
 <script>
 import vue2DropZone from 'vue2-dropzone'
 import 'vue2-dropzone/dist/vue2Dropzone.min.css'
 import Mixins from '../../../mixins'
-import { mapActions, mapGetters } from 'vuex'
+import { mapActions, mapGetters, mapState } from 'vuex'
 
 export default {
   components: {
@@ -49,7 +51,13 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('Files', ['dropzone'])
+    ...mapState(['navigation']),
+    ...mapGetters('Files', ['dropzone']),
+    sidebarStateClass() {
+      return this.navigation.closed
+        ? 'oc-dropzone-navigation-collapsed'
+        : 'oc-dropzone-navigation-expanded'
+    }
   },
   methods: {
     ...mapActions('Files', ['dragOver']),
@@ -65,23 +73,41 @@ export default {
 </script>
 
 <style lang="scss">
-.oc-dropzone {
+.oc-dropzone-navigation-collapsed,
+.oc-dropzone-navigation-expanded {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.oc-dropzone-container {
   position: fixed;
   top: 60px;
+  height: calc(100% - 60px - var(--oc-space-small));
   left: 0;
-  height: calc(100% - 60px);
   width: 100%;
   z-index: 3;
 
   // TODO: Remove vue-dropzone
-  .dz-message,
-  .oc-dropzone {
+  .dz-message {
     height: 100%;
   }
-
-  @media only screen and (min-width: 1200px) {
-    left: 300px;
-    width: calc(100% - 300px);
+  .oc-dropzone {
+    border-bottom-right-radius: 15px;
+    border-top-right-radius: 15px;
+    height: calc(100% - (2 * var(--oc-space-medium)));
+  }
+}
+@media only screen and (min-width: 640px) {
+  .oc-dropzone-navigation-collapsed > .oc-dropzone-container {
+    left: calc(65px + var(--oc-space-small));
+    width: calc(100% - 65px - (2 * var(--oc-space-small)));
+  }
+  .oc-dropzone-navigation-expanded > .oc-dropzone-container {
+    left: calc(var(--oc-size-width-medium) + var(--oc-space-small));
+    width: calc(100% - var(--oc-size-width-medium) - (2 * var(--oc-space-small)));
   }
 }
 </style>

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -36,7 +36,7 @@
           :aria-label="linkSharesLabel"
           @click="expandLinksPanel"
         >
-          <oc-icon name="links" />
+          <oc-icon name="link" fill-type="none" />
         </oc-button>
         <p class="oc-my-rm oc-mx-s" v-text="detailSharingInformation" />
       </div>

packages/web-app-files/src/components/SideBar/Links/PublicLinks/LinkInfo.vue

@@ -24,7 +24,7 @@
     <oc-grid gutter="small">
       <div>
         <oc-tag class="oc-files-file-link-role">
-          <oc-icon :name="roleTagIcon" />
+          <oc-icon :name="roleTagIcon.name" :fill-type="roleTagIcon.fillType || 'fill'" />
           {{ link.description }}
         </oc-tag>
       </div>
@@ -90,19 +90,19 @@ export default {
     roleTagIcon() {
       switch (this.link.description) {
         case 'Viewer':
-          return 'eye'
+          return { name: 'eye' }
 
         case 'Contributor':
-          return 'pencil'
+          return { name: 'pencil' }
 
         case 'Editor':
-          return 'pencil'
+          return { name: 'pencil' }
 
         case 'Uploader':
-          return 'file-add'
+          return { name: 'upload', fillType: 'line' }
 
         default:
-          return 'key'
+          return { name: 'key' }
       }
     },
 

packages/web-app-files/src/components/SideBar/SideBar.vue

@@ -72,7 +72,7 @@
                 appearance="raw"
                 @click="openPanel(panelSelect.app)"
               >
-                <oc-icon :name="panelSelect.icon" />
+                <oc-icon :name="panelSelect.icon" :fill-type="panelSelect.iconFillType || 'fill'" />
                 {{ panelSelect.component.title($gettext) }}
                 <oc-icon name="arrow-right-s" fill-type="line" />
               </oc-button>

packages/web-app-files/src/fileSideBars.js

@@ -42,7 +42,8 @@ export default [
   ({ router, multipleSelection, rootFolder }) => ({
     app: 'actions-item',
     component: FileActions,
-    icon: 'slideshow-2',
+    icon: 'slideshow-3',
+    iconFillType: 'line',
     default: isLocationCommonActive(router, 'files-common-trash'),
     get enabled() {
       return !multipleSelection && !rootFolder
@@ -66,7 +67,8 @@ export default [
   }),
   ({ capabilities, router, multipleSelection, rootFolder }) => ({
     app: 'links-item',
-    icon: 'links',
+    icon: 'link',
+    iconFillType: 'none',
     component: FileLinks,
     get enabled() {
       if (multipleSelection || rootFolder) return false

packages/web-app-files/src/index.js

@@ -36,15 +36,15 @@ const appInfo = {
 const navItems = [
   {
     name: $gettext('All files'),
-    iconMaterial: appInfo.icon,
+    icon: appInfo.icon,
     fillType: 'fill',
     route: {
       path: `/${appInfo.id}/spaces/`
     }
   },
   {
     name: $gettext('Favorites'),
-    iconMaterial: 'star',
+    icon: 'star',
     fillType: 'fill',
     route: {
       path: `/${appInfo.id}/favorites`
@@ -55,31 +55,31 @@ const navItems = [
   },
   {
     name: $gettext('Shared with me'),
-    iconMaterial: 'shared-with-me',
-    fillType: 'none',
+    icon: 'share-forward',
+    fillType: 'fill',
     route: {
       path: `/${appInfo.id}/shares/with-me`
     }
   },
   {
     name: $gettext('Shared with others'),
-    iconMaterial: 'shared-with-others',
-    fillType: 'none',
+    icon: 'reply',
+    fillType: 'fill',
     route: {
       path: `/${appInfo.id}/shares/with-others`
     }
   },
   {
     name: $gettext('Shared via link'),
-    iconMaterial: 'link',
+    icon: 'link',
     fillType: 'none',
     route: {
       path: `/${appInfo.id}/shares/via-link`
     }
   },
   {
     name: $gettext('Deleted files'),
-    iconMaterial: 'delete-bin-5',
+    icon: 'delete-bin-5',
     fillType: 'fill',
     route: {
       path: `/${appInfo.id}/trash`

packages/web-app-files/src/mixins/actions/createPublicLink.js

@@ -9,6 +9,7 @@ export default {
         {
           name: 'create-public-link',
           icon: quickActions.publicLink.icon,
+          iconFillType: quickActions.publicLink.iconFillType,
           label: () => this.$gettext('Create & copy public link'),
           handler: this.$_createPublicLink_trigger,
           isEnabled: ({ resources }) => {

packages/web-app-files/src/mixins/actions/downloadArchive.js

@@ -14,7 +14,7 @@ export default {
       return [
         {
           name: 'download-archive',
-          icon: 'folder-download',
+          icon: 'inbox-archive',
           handler: this.$_downloadArchive_trigger,
           label: () => {
             return this.$gettext('Download')

packages/web-app-files/src/mixins/actions/showActions.js

@@ -7,7 +7,8 @@ export default {
       return [
         {
           name: 'show-actions',
-          icon: 'slideshow',
+          icon: 'slideshow-3',
+          iconFillType: 'line',
           label: () => this.$gettext('All Actions'),
           handler: this.$_showActions_trigger,
           isEnabled: ({ resources }) => {

packages/web-app-files/src/mixins/actions/showDetails.js

@@ -8,6 +8,7 @@ export default {
         {
           name: 'show-details',
           icon: 'information',
+          iconFillType: 'line',
           label: () => this.$gettext('Details'),
           handler: this.$_showDetails_trigger,
           // we don't have details in the trashbin, yet.

packages/web-app-files/src/mixins/actions/showShares.js

@@ -9,6 +9,7 @@ export default {
         {
           name: 'show-shares',
           icon: quickActions.collaborators.icon,
+          iconFillType: quickActions.collaborators.iconFillType,
           label: () => this.$gettext('Share'),
           handler: this.$_showShares_trigger,
           isEnabled: ({ resources }) => {

packages/web-app-files/tests/unit/components/AppBar/Upload/FileDrop.spec.js

@@ -92,6 +92,11 @@ function createWrapper(options = {}) {
 
 function createStore(getters) {
   return new Vuex.Store({
+    state: {
+      navigation: {
+        closed: false
+      }
+    },
     modules: {
       Files: {
         namespaced: true,

packages/web-app-files/tests/unit/components/SideBar/Links/PublicLinks/LinkInfo.spec.js

@@ -107,7 +107,7 @@ describe('LinkInfo', () => {
       { role: 'Viewer', icon: 'eye' },
       { role: 'Editor', icon: 'pencil' },
       { role: 'Contributor', icon: 'pencil' },
-      { role: 'Uploader', icon: 'file-add' },
+      { role: 'Uploader', icon: 'upload' },
       { role: '*', icon: 'key' }
     ])('should set different role tag icon for different role types', (dataSet) => {
       const wrapper = getShallowWrapper({

packages/web-app-search/src/portals/SearchBar.vue

@@ -223,7 +223,7 @@ export default {
         background-color: var(--oc-color-background-muted);
         border: 1px solid rgba(75, 94, 120, 0.6);
         top: -20px;
-        z-index: 9999;
+        z-index: var(--oc-z-index-modal);
         min-width: 252px !important;
       }