[full-ci] Sprint 16 design fixes

changelog/unreleased/enhancement-design-improvements

@@ -0,0 +1,7 @@
+Enhancement: Design improvements
+
+We've fixed various design glitches and improved the overall look-and-feel of the UI.
+
+https://github.com/owncloud/web/issues/6492
+https://github.com/owncloud/web/issues/6555
+https://github.com/owncloud/web/pulls/6584

changelog/unreleased/enhancement-update-ods

@@ -1,15 +1,17 @@
-Enhancement: Update ODS to v13.0.0-rc.3
+Enhancement: Update ODS to v13.0.0-rc.4
 
-We updated the ownCloud Design System to version 13.0.0-rc.3. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
+We updated the ownCloud Design System to version 13.0.0-rc.4. Please refer to the full changelog in the ODS release (linked) for more details. Summary:
 
 - Change - Default type of OcButton: https//github.com/owncloud/owncloud-design-system/pull/2009
 - Change - Remove OcStatusIndicators from OcResource: https://github.com/owncloud/owncloud-design-system/pull/2014
 - Enhancement - Redesign OcStatusIndicators: https://github.com/owncloud/owncloud-design-system/pull/2014
 - Enhancement - Icons for drawio, ifc and odg resource types: https//github.com/owncloud/owncloud-design-system/pull/2005
 - Enhancement - Apply size property to oc-tag: https//github.com/owncloud/owncloud-design-system/pull/2011
+- Enhancement - Underline OcResourceName: https//github.com/owncloud/owncloud-design-system/pull/2019
 - Bugfix - Disabled OcSelect background: https//github.com/owncloud/owncloud-design-system/pull/2008
 - Bugfix - Icons/Thumbnails were only visible for clickable resources: https//github.com/owncloud/owncloud-design-system/pull/2007
 
 https://github.com/owncloud/web/pull/6540
 https://github.com/owncloud/web/pull/6600
-https://github.com/owncloud/owncloud-design-system/releases/tag/v13.0.0-rc.3
+https://github.com/owncloud/web/pull/6584
+https://github.com/owncloud/owncloud-design-system/releases/tag/v13.0.0-rc.4

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

@@ -3,8 +3,9 @@
     <component
       :is="action.componentType"
       v-bind="getComponentProps(action, items)"
-      :class="['oc-text-bold', action.class]"
+      :class="[action.class, 'action-menu-item']"
       data-testid="action-handler"
+      size="small"
       v-on="getComponentListeners(action, items)"
     >
       <oc-img
@@ -105,3 +106,15 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+.action-menu-item {
+  vertical-align: middle;
+  &:hover {
+    color: var(--oc-color-swatch-brand-hover);
+    text-decoration: underline;
+    .oc-icon > svg {
+      fill: var(--oc-color-swatch-brand-hover) !important;
+    }
+  }
+}
+</style>

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

@@ -17,7 +17,8 @@
           v-if="breadcrumbs.length"
           id="files-breadcrumb"
           data-testid="files-breadcrumbs"
-          class="oc-py-s"
+          class="oc-flex oc-flex-middle"
+          context-menu-padding="small"
           :items="breadcrumbs"
         >
           <template #contextMenu>
@@ -43,7 +44,7 @@
             @error="onFileError"
             @progress="onFileProgress"
           />
-          <size-info v-if="hasBulkActions && selectedFiles.length > 0" class="oc-mr oc-visible@l" />
+          <size-info v-if="hasBulkActions && selectedFiles.length > 0" class="oc-visible@l" />
           <batch-actions v-if="hasBulkActions" />
         </div>
       </div>
@@ -367,6 +368,11 @@ export default {
     display: flex;
     gap: var(--oc-space-small);
     justify-content: flex-end;
+    min-height: 3rem;
+  }
+
+  #files-breadcrumb {
+    min-height: 2rem;
   }
 }
 </style>

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

@@ -6,9 +6,10 @@
         key="new-file-menu-btn-enabled"
         v-oc-tooltip="newButtonTooltip"
         :aria-label="newButtonAriaLabel"
+        appearance="raw"
         variation="inverse"
         :disabled="uploadOrFileCreationBlocked"
-        class="oc-background-primary-gradient"
+        class="oc-background-primary-gradient oc-px-s"
       >
         <oc-icon name="add" />
         <translate>New</translate>
@@ -60,10 +61,11 @@
       <oc-button
         id="new-folder-btn"
         v-oc-tooltip="newButtonAriaLabel"
+        appearance="raw"
         variation="inverse"
         :aria-label="newButtonAriaLabel"
         :disabled="uploadOrFileCreationBlocked"
-        class="oc-background-primary-gradient oc-text-nowrap"
+        class="oc-background-primary-gradient oc-px-s oc-text-nowrap"
         @click="showCreateResourceModal"
       >
         <oc-icon name="resource-type-folder" />
@@ -546,4 +548,8 @@ export default {
     margin: 2px 0;
   }
 }
+#upload-list,
+#new-file-menu-drop {
+  min-width: 200px;
+}
 </style>

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

@@ -1,28 +1,29 @@
 <template>
-  <div class="oc-flex oc-flex-middle oc-text-nowrap">
+  <div class="oc-flex oc-flex-middle oc-text-nowrap size-info">
     <translate
       v-if="selectedResourcesSize !== '?'"
       key="multiple-select-info-with-size"
       :translate-n="selectedResourcesAmount"
       :translate-params="{ amount: selectedResourcesAmount, size: selectedResourcesSize }"
-      translate-plural="%{ amount } selected items - %{ size }"
+      translate-plural="%{ amount } selected - %{ size }"
       translate-comment="Number of selected resources and their size displayed above the files list"
-      >%{ amount } selected item - %{ size }
+      >%{ amount } selected - %{ size }
     </translate>
     <translate
       v-else
       key="multiple-select-info"
       :translate-n="selectedResourcesAmount"
       :translate-params="{ amount: selectedResourcesAmount }"
-      translate-plural="%{ amount } selected items"
+      translate-plural="%{ amount } selected"
       translate-comment="Number of selected resources displayed above the files list"
-      >%{ amount } selected item
+      >%{ amount } selected
     </translate>
     <oc-button
       id="files-clear-selection"
       v-oc-tooltip="clearSelectionLabel"
       :aria-label="clearSelectionLabel"
-      class="oc-ml"
+      class="oc-ml-m"
+      appearance="outline"
       @click="RESET_SELECTION"
     >
       <oc-icon name="close" />
@@ -66,3 +67,8 @@ export default {
   }
 }
 </script>
+<style lang="scss">
+.size-info span {
+  color: var(--oc-color-swatch-passive-default);
+}
+</style>

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

@@ -14,7 +14,10 @@
       </li>
     </oc-list>
     <div class="oc-hidden@s">
-      <oc-button id="shares_navigation_mobile" appearance="raw" v-text="$gettext('Shares pages')" />
+      <oc-button id="shares_navigation_mobile" appearance="raw">
+        <span v-text="currentNavItem.text" />
+        <oc-icon name="arrow-down-s" fill-type="line" size="small" />
+      </oc-button>
       <oc-drop toggle="#shares_navigation_mobile" mode="click" close-on-click padding-size="small">
         <oc-list>
           <li v-for="navItem in navItems" :key="`shares-navigation-mobile-${navItem.to}`">
@@ -90,7 +93,9 @@ export default {
         active: unref(sharesViaLinkActive)
       }
     ])
+    const currentNavItem = computed(() => unref(navItems).find((navItem) => navItem.active))
     return {
+      currentNavItem,
       navItems
     }
   }

packages/web-app-files/src/components/FilesList/ContextActions.vue

@@ -208,14 +208,12 @@ export default {
   text-align: left;
   white-space: normal;
 
-  li {
+  > li {
     padding: 6px;
     &:hover {
       background-color: var(--oc-color-background-hover);
     }
-  }
 
-  > li {
     a,
     button,
     span {
@@ -227,6 +225,11 @@ export default {
       vertical-align: top;
       width: 100%;
       text-align: left;
+
+      &:hover {
+        color: var(--oc-color-swatch-passive-default);
+        text-decoration: none !important;
+      }
     }
   }
 

packages/web-app-files/src/components/FilesList/ResourceTable.vue

@@ -284,7 +284,7 @@ export default {
     hover: {
       type: Boolean,
       required: false,
-      default: false
+      default: true
     },
     /**
      * Show that the table is sorted by this column (no actual sorting takes place)

packages/web-app-files/tests/unit/components/AppBar/SelectedResources/SizeInfo.spec.js

@@ -55,7 +55,7 @@ describe('SizeInfo component', () => {
         expect(translate.props().translateN).toEqual(selectedCount)
         expect(translate.props().translateParams.amount).toEqual(selectedCount)
         expect(translate.props().translateParams.size).toEqual(totalSize + ' B')
-        expect(translate.text()).toEqual('%{ amount } selected item - %{ size }')
+        expect(translate.text()).toEqual('%{ amount } selected - %{ size }')
       }
     )
     it('should have selected number count but not size if item size is NaN', () => {
@@ -71,7 +71,7 @@ describe('SizeInfo component', () => {
       expect(translate.props().translateN).toEqual(1)
       expect(translate.props().translateParams.amount).toEqual(1)
       expect(translate.props().translateParams.size).toBeFalsy()
-      expect(translate.text()).toEqual('%{ amount } selected item')
+      expect(translate.text()).toEqual('%{ amount } selected')
     })
     it('should trigger "RESET_SELECTION" if clear button is clicked', () => {
       const spyResetSelection = jest.spyOn(SizeInfo.methods, 'RESET_SELECTION').mockImplementation()

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

@@ -49,8 +49,10 @@ function getWrapper() {
           active: false
         }
       ]
+      const currentNavItem = navItems[0]
       return {
-        navItems
+        navItems,
+        currentNavItem
       }
     },
     router,

packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.js.snap

@@ -20,7 +20,9 @@ exports[`SharesNavigation component renders a shares navigation for both mobile
     </li>
   </ul>
   <div class="oc-hidden@s">
-    <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="shares_navigation_mobile">Shares pages</oc-button-stub>
+    <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" id="shares_navigation_mobile"><span>Shared with me</span>
+      <oc-icon-stub name="arrow-down-s" filltype="line" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub>
+    </oc-button-stub>
     <div id="oc-drop-3" class="oc-drop oc-box-shadow-medium oc-rounded">
       <div class="oc-card oc-card-body oc-rounded oc-background-secondary oc-p-s">
         <ul class="oc-list oc-my-rm oc-mx-rm">