Improve sharing tab style & add icons

__fixtures__/sidebarNavItems.js

@@ -27,4 +27,3 @@ export default [
  active: false
  }
 ]
-

changelog/unreleased/enhancement-shares-overview

@@ -6,4 +6,6 @@ In the process, we have also renamed the "All files" page to the "Personal" page
 this is the user's personal space since shares (and potentially other shared spaces) live elsewhere.
 
 https://github.com/owncloud/web/issues/6440
+https://github.com/owncloud/web/issues/6570
 https://github.com/owncloud/web/pull/6512
+https://github.com/owncloud/web/pull/6573

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

@@ -4,11 +4,11 @@
  <li v-for="navItem in navItems" :key="`shares-navigation-desktop-${navItem.to}`">
  <oc-button
  type="router-link"
- class="oc-mr-s"
+ class="oc-mx-s oc-p-s shares-nav-desktop"
  appearance="raw"
- :variation="navItem.active ? 'primary' : 'passive'"
  :to="navItem.to"
  >
+ <oc-icon size="small" :name="navItem.icon" />
  <span v-text="navItem.text" />
  </oc-button>
  </li>
@@ -20,10 +20,15 @@
  <li v-for="navItem in navItems" :key="`shares-navigation-mobile-${navItem.to}`">
  <oc-button
  type="router-link"
+ class="oc-my-xs"
  appearance="raw"
- :variation="navItem.active ? 'primary' : 'passive'"
  :to="navItem.to"
+ :class="{ 'oc-background-primary-gradient': navItem.active }"
+ :variation="navItem.active ? 'inverse' : 'passive'"
  >
+ <span class="icon-box" :class="{ 'icon-box-active': navItem.active }">
+ <oc-icon :name="navItem.icon" />
+ </span>
  <span v-text="navItem.text" />
  </oc-button>
  </li>
@@ -56,17 +61,21 @@ export default {
  return routes
  }, {})
  const navItems = computed(() => [
+ // computed aka not reactive?
  {
+ icon: 'share-forward',
  to: sharesRoutes[locationSharesWithMe.name].path,
  text: $gettext('Shared with me'),
  active: isLocationSharesActive(router, 'files-shares-with-me')
  },
  {
+ icon: 'reply',
  to: sharesRoutes[locationSharesWithOthers.name].path,
  text: $gettext('Shared with others'),
  active: isLocationSharesActive(router, 'files-shares-with-others')
  },
  {
+ icon: 'link',
  to: sharesRoutes[locationSharesViaLink.name].path,
  text: $gettext('Shared via link'),
  active: isLocationSharesActive(router, 'files-shares-via-link')
@@ -79,7 +88,32 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.router-link-active {
- text-decoration: underline;
+#shares-navigation {
+ a {
+ gap: var(--oc-space-medium);
+ justify-content: flex-start;
+ width: 100%;
+
+ &:focus,
+ &:hover {
+ text-decoration: none;
+ }
+
+ .icon-box {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ width: 40px;
+ height: 40px;
+ }
+ .icon-box-active {
+ box-shadow: 2px 0 6px rgba(0, 0, 0, 0.14);
+ }
+ }
+
+ .shares-nav-desktop.router-link-active {
+ border-bottom: 2px solid var(--oc-color-swatch-primary-default) !important;
+ border-radius: 0;
+ }
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
- <div>
+ <div class="oc-flex">
  <oc-button
  id="files-view-options-btn"
  key="files-view-options-btn"

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

@@ -4,13 +4,19 @@ exports[`SharesNavigation component renders a shares navigation for both mobile
 <nav id="shares-navigation" aria-label="Shares pages navigation" class="oc-py-s">
  <ul class="oc-list oc-my-rm oc-mx-rm oc-flex oc-visible@s">
  <li>
- <oc-button-stub type="router-link" size="medium" to="/files/shares/with-me/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mr-s"><span>Shared with me</span></oc-button-stub>
+ <oc-button-stub type="router-link" size="medium" to="/files/shares/with-me/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mx-s oc-p-s shares-nav-desktop">
+ <oc-icon-stub name="info" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span>Shared with me</span>
+ </oc-button-stub>
  </li>
  <li>
- <oc-button-stub type="router-link" size="medium" to="/files/shares/with-others/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mr-s"><span>Shared with others</span></oc-button-stub>
+ <oc-button-stub type="router-link" size="medium" to="/files/shares/with-others/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mx-s oc-p-s shares-nav-desktop">
+ <oc-icon-stub name="info" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span>Shared with others</span>
+ </oc-button-stub>
  </li>
  <li>
- <oc-button-stub type="router-link" size="medium" to="/files/shares/via-link/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mr-s"><span>Shared via link</span></oc-button-stub>
+ <oc-button-stub type="router-link" size="medium" to="/files/shares/via-link/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-mx-s oc-p-s shares-nav-desktop">
+ <oc-icon-stub name="info" filltype="fill" accessiblelabel="" type="span" size="small" variation="passive" color=""></oc-icon-stub> <span>Shared via link</span>
+ </oc-button-stub>
  </li>
  </ul>
  <div class="oc-hidden@s">
@@ -19,13 +25,13 @@ exports[`SharesNavigation component renders a shares navigation for both mobile
  <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">
  <li>
- <oc-button-stub type="router-link" size="medium" to="/files/shares/with-me/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Shared with me</span></oc-button-stub>
+ <oc-button-stub type="router-link" size="medium" to="/files/shares/with-me/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-my-xs"><span class="icon-box"><oc-icon-stub name="info" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub></span> <span>Shared with me</span></oc-button-stub>
  </li>
  <li>
- <oc-button-stub type="router-link" size="medium" to="/files/shares/with-others/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Shared with others</span></oc-button-stub>
+ <oc-button-stub type="router-link" size="medium" to="/files/shares/with-others/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-my-xs"><span class="icon-box"><oc-icon-stub name="info" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub></span> <span>Shared with others</span></oc-button-stub>
  </li>
  <li>
- <oc-button-stub type="router-link" size="medium" to="/files/shares/via-link/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium"><span>Shared via link</span></oc-button-stub>
+ <oc-button-stub type="router-link" size="medium" to="/files/shares/via-link/" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="oc-my-xs"><span class="icon-box"><oc-icon-stub name="info" filltype="fill" accessiblelabel="" type="span" size="medium" variation="passive" color=""></oc-icon-stub></span> <span>Shared via link</span></oc-button-stub>
  </li>
  </ul>
  </div>

tests/acceptance/pageObjects/appBarActions.js

@@ -38,7 +38,7 @@ module.exports = {
  locateStrategy: 'xpath'
  },
  sharesSubPageButton: {
- selector: '//nav[@id="shares-navigation"]/ul/li/a[.="%s"]',
+ selector: '//nav[@id="shares-navigation"]//*[.="%s"]',
  locateStrategy: 'xpath'
  }
  }