[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,10 @@
     <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"
+      appearance="raw"
+      size="small"
       v-on="getComponentListeners(action, items)"
     >
       <oc-img
@@ -105,3 +107,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

@@ -18,6 +18,7 @@
           id="files-breadcrumb"
           data-testid="files-breadcrumbs"
           class="oc-py-s"
+          context-menu-padding="small"
           :items="breadcrumbs"
         >
           <template #contextMenu>
@@ -43,8 +44,12 @@
             @error="onFileError"
             @progress="onFileProgress"
           />
-          <size-info v-if="hasBulkActions && selectedFiles.length > 0" class="oc-mr oc-visible@l" />
-          <batch-actions v-if="hasBulkActions" />
+          <size-info
+            v-if="hasBulkActions && selectedFiles.length > 0"
+            class="oc-mr-m oc-visible@l"
+            style="padding-bottom: calc(1rem + 1px)"
+          />
+          <batch-actions v-if="hasBulkActions" style="padding-bottom: calc(1rem + 1px)" />
         </div>
       </div>
     </div>

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

@@ -6,11 +6,11 @@
         key="new-file-menu-btn-enabled"
         v-oc-tooltip="newButtonTooltip"
         :aria-label="newButtonAriaLabel"
-        variation="inverse"
+        variation="raw"
         :disabled="uploadOrFileCreationBlocked"
         class="oc-background-primary-gradient"
       >
-        <oc-icon name="add" />
+        <oc-icon name="add" color="#ffffff" />
         <translate>New</translate>
       </oc-button>
       <oc-drop
@@ -530,6 +530,10 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+#new-file-menu-btn {
+  color: white;
+  border: 0;
+}
 #create-list {
   li {
     border: 1px solid transparent;
@@ -546,4 +550,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,11 +1,21 @@
 <template>
-  <div class="oc-flex oc-flex-middle oc-text-nowrap">
+  <div class="oc-flex oc-flex-middle oc-text-nowrap size-info">
+    <oc-button
+      id="files-clear-selection"
+      v-oc-tooltip="clearSelectionLabel"
+      :aria-label="clearSelectionLabel"
+      class="oc-mr-s"
+      appearance="raw"
+      @click="RESET_SELECTION"
+    >
+      <oc-icon name="close" />
+    </oc-button>
     <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 } items - %{ size }"
       translate-comment="Number of selected resources and their size displayed above the files list"
       >%{ amount } selected item - %{ size }
     </translate>
@@ -14,19 +24,10 @@
       key="multiple-select-info"
       :translate-n="selectedResourcesAmount"
       :translate-params="{ amount: selectedResourcesAmount }"
-      translate-plural="%{ amount } selected items"
+      translate-plural="%{ amount } items"
       translate-comment="Number of selected resources displayed above the files list"
       >%{ amount } selected item
     </translate>
-    <oc-button
-      id="files-clear-selection"
-      v-oc-tooltip="clearSelectionLabel"
-      :aria-label="clearSelectionLabel"
-      class="oc-ml"
-      @click="RESET_SELECTION"
-    >
-      <oc-icon name="close" />
-    </oc-button>
   </div>
 </template>
 
@@ -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/FilesList/ContextActions.vue

@@ -208,14 +208,11 @@ export default {
   text-align: left;
   white-space: normal;
 
-  li {
-    padding: 6px;
+  > li {
     &:hover {
       background-color: var(--oc-color-background-hover);
     }
-  }
 
-  > li {
     a,
     button,
     span {
@@ -227,6 +224,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)