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