Improve sharing tab style & add icons

__fixtures__/sidebarNavItems.js

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

changelog/unreleased/bugfix-iframe-border

@@ -0,0 +1,6 @@
+Bugfix: Remove iFrame border
+
+We fixed a UI issue which showed small borders around iFrames, e.g. in the external app.
+
+https://github.com/owncloud/web/issues/6555
+https://github.com/owncloud/web/pull/6573

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

package.json

@@ -124,7 +124,7 @@
     "ts-jest": "^27.1.3",
     "ts-node": "^10.5.0",
     "tslib": "^2.2.0",
-    "typescript": "^4.5.5",
+    "typescript": "^4.6.2",
     "url-search-params-polyfill": "^8.0.0",
     "vue-jest": "^3.0.7",
     "vue-template-compiler": "^2.6.12",

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-mr-m oc-py-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 shares-nav-mobile"
               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>
@@ -40,8 +45,9 @@ import {
   locationSharesWithMe,
   locationSharesWithOthers
 } from '../../router/shares'
-import { computed, getCurrentInstance } from '@vue/composition-api'
+import { computed, getCurrentInstance, unref } from '@vue/composition-api'
 import { useRouter } from 'web-pkg/src/composables'
+import { useActiveLocation } from '../../composables'
 
 export default {
   setup() {
@@ -55,21 +61,33 @@ export default {
       routes[route.name] = router.getRoutes().find((r) => r.name === route.name)
       return routes
     }, {})
+    const sharesWithMeActive = useActiveLocation(isLocationSharesActive, locationSharesWithMe.name)
+    const sharesWithOthersActive = useActiveLocation(
+      isLocationSharesActive,
+      locationSharesWithOthers.name
+    )
+    const sharesViaLinkActive = useActiveLocation(
+      isLocationSharesActive,
+      locationSharesViaLink.name
+    )
     const navItems = computed(() => [
       {
+        icon: 'share-forward',
         to: sharesRoutes[locationSharesWithMe.name].path,
         text: $gettext('Shared with me'),
-        active: isLocationSharesActive(router, 'files-shares-with-me')
+        active: unref(sharesWithMeActive)
       },
       {
+        icon: 'reply',
         to: sharesRoutes[locationSharesWithOthers.name].path,
         text: $gettext('Shared with others'),
-        active: isLocationSharesActive(router, 'files-shares-with-others')
+        active: unref(sharesWithOthersActive)
       },
       {
+        icon: 'link',
         to: sharesRoutes[locationSharesViaLink.name].path,
         text: $gettext('Shared via link'),
-        active: isLocationSharesActive(router, 'files-shares-via-link')
+        active: unref(sharesViaLinkActive)
       }
     ])
     return {
@@ -79,7 +97,35 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.router-link-active {
-  text-decoration: underline;
+#shares-navigation {
+  a {
+    gap: var(--oc-space-medium);
+    width: 100%;
+
+    &:focus,
+    &:hover {
+      text-decoration: none;
+    }
+
+    &.shares-nav-mobile {
+      justify-content: flex-start;
+    }
+
+    .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-mr-m oc-py-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-mr-m oc-py-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-mr-m oc-py-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 shares-nav-mobile"><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 shares-nav-mobile"><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 shares-nav-mobile"><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>

packages/web-runtime/package.json

@@ -51,7 +51,7 @@
     "vuex-persist": "3.1.3",
     "vuex-router-sync": "^5.0.0",
     "web-pkg": "*",
-    "webdav": "4.6.0",
+    "webdav": "4.8.0",
     "webfontloader": "^1.6.28",
     "xml-js": "^1.6.11"
   },

packages/web-runtime/src/App.vue

@@ -202,4 +202,8 @@ body {
   max-height: 100vh;
   overflow-y: hidden;
 }
+
+iframe {
+  border: 0;
+}
 </style>

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'
     }
   }

yarn.lock

@@ -3419,12 +3419,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:^0.21.1":
-  version: 0.21.3
-  resolution: "axios@npm:0.21.3"
+"axios@npm:^0.24.0":
+  version: 0.24.0
+  resolution: "axios@npm:0.24.0"
   dependencies:
-    follow-redirects: ^1.14.0
-  checksum: fdcac33adb0330e127ab0e58f8d9fb7470b49dbfb0aba251ff54f146f2fc7d9362e3300581b6c98d2ea3b8db958ed099c831c3c7832ae79b14f517d5947a029a
+    follow-redirects: ^1.14.4
+  checksum: 468cf496c08a6aadfb7e699bebdac02851e3043d4e7d282350804ea8900e30d368daa6e3cd4ab83b8ddb5a3b1e17a5a21ada13fc9cebd27b74828f47a4236316
   languageName: node
   linkType: hard
 
@@ -6408,13 +6408,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"follow-redirects@npm:^1.14.0, follow-redirects@npm:^1.14.7":
-  version: 1.14.7
-  resolution: "follow-redirects@npm:1.14.7"
+"follow-redirects@npm:^1.14.4, follow-redirects@npm:^1.14.7":
+  version: 1.14.9
+  resolution: "follow-redirects@npm:1.14.9"
   peerDependenciesMeta:
     debug:
       optional: true
-  checksum: f6d03e5e30877431065bca0d1b2e3db93949eb799d368a5c07ea8a4b71205f0349a3f8f0191bf13a07c93885522834dca1dc8e527dc99a772c6911fba24edc5f
+  checksum: f5982e0eb481818642492d3ca35a86989c98af1128b8e1a62911a3410621bc15d2b079e8170b35b19d3bdee770b73ed431a257ed86195af773771145baa57845
   languageName: node
   linkType: hard
 
@@ -9172,16 +9172,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.1.22, nanoid@npm:^3.1.23":
-  version: 3.1.23
-  resolution: "nanoid@npm:3.1.23"
-  bin:
-    nanoid: bin/nanoid.cjs
-  checksum: 8fa8dc3283a4fa159700a36cb22f61197547c8155831cb74f1b9c51fbc29ea80c136fd91001468d147a31d3a77f884958aec6c1beabac903c89780acacca9327
-  languageName: node
-  linkType: hard
-
-"nanoid@npm:^3.3.1":
+"nanoid@npm:^3.1.22, nanoid@npm:^3.3.1":
   version: 3.3.1
   resolution: "nanoid@npm:3.3.1"
   bin:
@@ -10636,18 +10627,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.1.10, postcss@npm:^8.3.6":
-  version: 8.3.6
-  resolution: "postcss@npm:8.3.6"
-  dependencies:
-    colorette: ^1.2.2
-    nanoid: ^3.1.23
-    source-map-js: ^0.6.2
-  checksum: ff55b91bea21f42c2a94d77fd05c3f66dd15889c68506cf1dbb9cdee8c3b9e9d0e219bcbc6e61a107bd63e3cac0670176486e2a5794c106a4e1b9babceb79317
-  languageName: node
-  linkType: hard
-
-"postcss@npm:^8.3.11":
+"postcss@npm:^8.1.10, postcss@npm:^8.3.11, postcss@npm:^8.3.6":
   version: 8.4.7
   resolution: "postcss@npm:8.4.7"
   dependencies:
@@ -11748,7 +11728,7 @@ __metadata:
     ts-jest: ^27.1.3
     ts-node: ^10.5.0
     tslib: ^2.2.0
-    typescript: ^4.5.5
+    typescript: ^4.6.2
     url-search-params-polyfill: ^8.0.0
     vue: ^2.6.10
     vue-jest: ^3.0.7
@@ -12078,13 +12058,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:^0.6.2":
-  version: 0.6.2
-  resolution: "source-map-js@npm:0.6.2"
-  checksum: 9c8151a29e00fd8d3ba87709fdf9a9ce48313d653f4a29a39b4ae53d346ac79e005de624796ff42eff55cbaf26d2e87f4466001ca87831d400d818c5cf146a0e
-  languageName: node
-  linkType: hard
-
 "source-map-js@npm:^1.0.2":
   version: 1.0.2
   resolution: "source-map-js@npm:1.0.2"
@@ -13021,23 +12994,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^4.5.5":
-  version: 4.5.5
-  resolution: "typescript@npm:4.5.5"
+"typescript@npm:^4.6.2":
+  version: 4.6.2
+  resolution: "typescript@npm:4.6.2"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 506f4c919dc8aeaafa92068c997f1d213b9df4d9756d0fae1a1e7ab66b585ab3498050e236113a1c9e57ee08c21ec6814ca7a7f61378c058d79af50a4b1f5a5e
+  checksum: 8a44ed7e6f6c4cb1ebe8cf236ecda2fb119d84dcf0fbd77e707b2dfea1bbcfc4e366493a143513ce7f57203c75da9d4e20af6fe46de89749366351046be7577c
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@^4.5.5#~builtin<compat/typescript>":
-  version: 4.5.5
-  resolution: "typescript@patch:typescript@npm%3A4.5.5#~builtin<compat/typescript>::version=4.5.5&hash=ddd1e8"
+"typescript@patch:typescript@^4.6.2#~builtin<compat/typescript>":
+  version: 4.6.2
+  resolution: "typescript@patch:typescript@npm%3A4.6.2#~builtin<compat/typescript>::version=4.6.2&hash=ddd1e8"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 9cdde4aae20b2904431f3f2ca8acaf3b0cc52faddf68aa88b288c9d0520221817da43783a756fce7ab9360033ada0371c3ff93dfc4bdb4b13f6e9bac64e1658d
+  checksum: efb83260a22ee49d4c8bdc59b3cefe54fdf51d6f563f5c3a35aa3d5e46fb12f3f1d33a36d6f9f64171e567ead1847e99cb612d0a9a74e7d44e16cad9d0bbc937
   languageName: node
   linkType: hard
 
@@ -13176,7 +13149,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"url-parse@npm:^1.5.1, url-parse@npm:^1.5.7":
+"url-parse@npm:^1.5.3, url-parse@npm:^1.5.7":
   version: 1.5.10
   resolution: "url-parse@npm:1.5.10"
   dependencies:
@@ -13637,17 +13610,17 @@ __metadata:
     vuex-persist: 3.1.3
     vuex-router-sync: ^5.0.0
     web-pkg: "*"
-    webdav: 4.6.0
+    webdav: 4.8.0
     webfontloader: ^1.6.28
     xml-js: ^1.6.11
   languageName: unknown
   linkType: soft
 
-"webdav@npm:4.6.0":
-  version: 4.6.0
-  resolution: "webdav@npm:4.6.0"
+"webdav@npm:4.8.0":
+  version: 4.8.0
+  resolution: "webdav@npm:4.8.0"
   dependencies:
-    axios: ^0.21.1
+    axios: ^0.24.0
     base-64: ^1.0.0
     fast-xml-parser: ^3.19.0
     he: ^1.2.0
@@ -13658,8 +13631,8 @@ __metadata:
     nested-property: ^4.0.0
     path-posix: ^1.0.0
     url-join: ^4.0.1
-    url-parse: ^1.5.1
-  checksum: 17d445757e43f7c8ea05cebac23978441ee568174c65b8d324b41689d942c036840e135480cf656562dda80e8e4c0fe6b581d5f9db79c5966ff6717dd57f6011
+    url-parse: ^1.5.3
+  checksum: be3f04c359b8f8800febfd18ca5e05258503180f3da7f804630a09bb19b69c0a558182f9bc427daee23785ddd0066a916f740c775de1ca3762981b09f2f1478a
   languageName: node
   linkType: hard