update all uikit tooltips to use v-oc-tooltip

bump ods

changelog/unreleased/enhancement-oc-tooltip

@@ -0,0 +1,10 @@
+Enhancement: OcTooltip
+
+We've changed the tooltip implementation to use oc-tooltip directive from ODS instead of uikit's.
+
+https://github.com/owncloud/web/pull/5055
+https://github.com/owncloud/web/issues/4654
+https://github.com/owncloud/web/issues/2623
+https://github.com/owncloud/web/issues/4597
+https://github.com/owncloud/web/issues/4332
+https://github.com/owncloud/web/issues/4300

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

@@ -27,9 +27,9 @@
             <oc-button
               id="new-file-menu-btn"
               key="new-file-menu-btn-enabled"
+              v-oc-tooltip="_cannotCreateDialogText"
               variation="primary"
               appearance="filled"
-              :uk-tooltip="_cannotCreateDialogText"
               :disabled="isNewBtnDisabled"
             >
               <oc-icon name="add" />

packages/web-app-files/src/components/Collaborators/Collaborator.vue

@@ -61,9 +61,9 @@
             <div v-if="$_reshareInformation">
               <oc-tag
                 :id="$_resharerToggleId"
+                v-oc-tooltip="$gettext('Show resharer details')"
                 class="files-collaborators-collaborator-reshare-information"
                 type="button"
-                :uk-tooltip="$gettext('Show resharer details')"
               >
                 <oc-icon name="repeat" />
                 <translate :translate-params="{ resharer: $_reshareInformation }">
@@ -121,10 +121,10 @@
             </div>
             <div v-if="isIndirectShare">
               <oc-tag
+                v-oc-tooltip="viaTooltip"
                 type="router-link"
                 class="files-collaborators-collaborator-follow-via"
                 :to="viaRouterParams"
-                :uk-tooltip="viaTooltip"
               >
                 <oc-icon name="exit_to_app" />
                 <span
@@ -140,8 +140,8 @@
         <div class="uk-flex uk-flex-nowrap uk-flex-middle">
           <oc-button
             v-if="$_editButtonVisible"
+            v-oc-tooltip="editShareHint"
             :aria-label="editShareHint"
-            :uk-tooltip="editShareHint"
             appearance="raw"
             class="files-collaborators-collaborator-edit"
             @click="$emit('onEdit', collaborator)"
@@ -151,8 +151,8 @@
           <div>
             <oc-button
               v-if="$_deleteButtonVisible"
+              v-oc-tooltip="deleteShareHint"
               :aria-label="deleteShareHint"
-              :uk-tooltip="deleteShareHint"
               appearance="raw"
               class="files-collaborators-collaborator-delete"
               @click="$_removeShare"

packages/web-app-files/src/components/Collaborators/CollaboratorsEditOptions.vue

@@ -44,8 +44,8 @@
         <div
           v-if="canResetExpirationDate"
           id="files-collaborators-collaborator-expiration-delete"
+          v-oc-tooltip="expirationDateRemoveTooltip"
           class="uk-position-small uk-position-center-right oc-cursor-pointer"
-          :uk-tooltip="expirationDateRemoveTooltip"
           uk-close
           @click="resetExpirationDate"
         />

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

@@ -16,9 +16,9 @@
           <oc-td width="shrink">
             <div class="uk-button-group">
               <oc-button
+                v-oc-tooltip="$gettext('Restore older version')"
                 appearance="raw"
                 :aria-label="$gettext('Restore older version')"
-                :uk-tooltip="$gettext('Restore older version')"
                 @click="revertVersion(item)"
               >
                 <oc-icon name="restore" />
@@ -28,9 +28,9 @@
           <oc-td width="shrink">
             <div class="uk-button-group">
               <oc-button
+                v-oc-tooltip="$gettext('Download older version')"
                 appearance="raw"
                 :aria-label="$gettext('Download older version')"
-                :uk-tooltip="$gettext('Download older version')"
                 @click="downloadVersion(item)"
               >
                 <oc-icon name="cloud_download" />

packages/web-app-files/src/components/FilesLists/QuickActions.vue

@@ -3,8 +3,8 @@
     <oc-button
       v-for="action in filteredActions"
       :key="action.label"
+      v-oc-tooltip="$gettext(action.label)"
       :aria-label="$gettext(action.label)"
-      :uk-tooltip="$gettext(action.label)"
       appearance="raw"
       class="oc-mr-xs"
       :class="`files-quick-action-${action.id}`"

packages/web-app-files/src/components/PublicLinksSidebar/LinkActions.vue

@@ -3,17 +3,17 @@
     <oc-spinner v-if="removalInProgress" :aria-label="$gettext('Removing public link')" />
     <template v-else>
       <oc-button
+        v-oc-tooltip="editButtonLabel"
         :aria-label="editButtonLabel"
-        :uk-tooltip="editButtonLabel"
         appearance="raw"
         class="oc-files-file-link-edit oc-mr-xs"
         @click="editLink"
       >
         <oc-icon name="edit" />
       </oc-button>
       <oc-button
+        v-oc-tooltip="deleteButtonLabel"
         :aria-label="deleteButtonLabel"
-        :uk-tooltip="deleteButtonLabel"
         appearance="raw"
         class="oc-files-file-link-delete"
         @click="$_removeLink"

packages/web-app-files/src/components/PublicLinksSidebar/LinkInfo.vue

@@ -13,8 +13,8 @@
           v-text="link.url"
         />
         <oc-button
+          v-oc-tooltip="copyLabel"
           :aria-label="copyLabel"
-          :uk-tooltip="copyLabel"
           appearance="raw"
           class="oc-files-file-link-copy-url"
         >
@@ -57,10 +57,10 @@
       </div>
       <div v-if="link.indirect">
         <oc-tag
+          v-oc-tooltip="viaTooltip"
           type="router-link"
           class="oc-files-file-link-via"
           :to="viaRouterParams"
-          :uk-tooltip="viaTooltip"
         >
           <oc-icon name="exit_to_app" />
           <span class="uk-text-truncate files-file-links-link-via-label" v-text="viaLabel" />

packages/web-app-files/src/components/PublicLinksSidebar/PrivateLinkItem.vue

@@ -4,7 +4,7 @@
     <p v-translate class="oc-text-muted oc-my-rm">Only invited people can use this link.</p>
     <div class="uk-width-1-1 uk-flex uk-flex-middle">
       <a :href="link" target="_blank" class="uk-text-truncate" v-text="link" />
-      <oc-button :aria-label="copyLabel" :uk-tooltip="copyLabel" appearance="raw" class="oc-ml-s">
+      <oc-button v-oc-tooltip="copyLabel" :aria-label="copyLabel" appearance="raw" class="oc-ml-s">
         <oc-icon
           v-if="linkCopied"
           id="files-sidebar-private-link-icon-copied"

packages/web-runtime/package.json

@@ -14,9 +14,10 @@
     "luxon": "^1.22.0",
     "moment": "^2.24.0",
     "oidc-client": "1.10.1",
-    "owncloud-design-system": "^6.3.0",
+    "owncloud-design-system": "^6.0.0",
     "owncloud-sdk": "^1.0.0-740",
     "p-queue": "^6.1.1",
+    "tippy.js": "^6.3.1",
     "tus-js-client": "^1.8.0",
     "uikit": "3.5.16",
     "vue": "^2.6.10",

packages/web-runtime/src/components/ApplicationsMenu.vue

@@ -7,7 +7,7 @@
       class="oc-topbar-menu-burger"
       :aria-label="applicationSwitcherLabel"
     >
-      <oc-icon :uk-tooltip="applicationSwitcherLabel" name="apps" class="uk-flex" />
+      <oc-icon v-oc-tooltip="applicationSwitcherLabel" name="apps" class="uk-flex" />
     </oc-button>
     <oc-drop
       ref="menu"

packages/web-runtime/src/components/Notifications.vue

@@ -2,9 +2,9 @@
   <div id="oc-notification">
     <oc-button
       id="oc-notification-bell"
+      v-oc-tooltip="notificationsLabel"
       appearance="raw"
       :aria-label="notificationsLabel"
-      :uk-tooltip="notificationsLabel"
     >
       <oc-icon class="oc-cursor-pointer uk-flex uk-flex-middle" name="bell" />
     </oc-button>

packages/web-runtime/src/index.js

@@ -1,7 +1,8 @@
+// --- Styles ---
+import 'vue-resize/dist/vue-resize.css'
+
 // --- Libraries and Plugins ---
 import Vue from './vue'
-import 'vue-resize/dist/vue-resize.css'
-import VueResize from 'vue-resize'
 
 // --- Components ---
 import App from './App.vue'
@@ -15,6 +16,7 @@ import store from './store'
 import router from './router'
 
 // --- Plugins ----
+import VueResize from 'vue-resize'
 import VueEvents from 'vue-events'
 import VueRouter from 'vue-router'
 import VueClipboard from 'vue-clipboard2'

yarn.lock

@@ -1100,6 +1100,11 @@
     "@nodelib/fs.scandir" "2.1.4"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.8.3":
+  version "2.9.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
+  integrity sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==
+
 "@rollup/plugin-commonjs@^17.0.0":
   version "17.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-17.1.0.tgz#757ec88737dffa8aa913eb392fade2e45aef2a2d"
@@ -7689,7 +7694,7 @@ ospec@3.1.0:
   dependencies:
     glob "^7.1.3"
 
-owncloud-design-system@^6.3.0:
+owncloud-design-system@^6.0.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/owncloud-design-system/-/owncloud-design-system-6.3.0.tgz#46186e2f7ecd81408a7f2d44a49f0ef16829e5cf"
   integrity sha512-KHIvUnJVlPhvSset1osLPa8E7w6dOtTrjLtQ3O//Tj1+bZAvvXSnRDuC8tuwlZmxXXM9uQpK8bC4Mosy90fqXw==
@@ -10282,6 +10287,13 @@ tinycolor2@^1.1.2:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
   integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
 
+tippy.js@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.1.tgz#3788a007be7015eee0fd589a66b98fb3f8f10181"
+  integrity sha512-JnFncCq+rF1dTURupoJ4yPie5Cof978inW6/4S6kmWV7LL9YOSEVMifED3KdrVPEG+Z/TFH2CDNJcQEfaeuQww==
+  dependencies:
+    "@popperjs/core" "^2.8.3"
+
 title-case@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa"