update all uikit tooltips to use v-oc-tooltip

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,10 @@
             <oc-button
               id="new-file-menu-btn"
               key="new-file-menu-btn-enabled"
+              v-oc-tooltip="_cannotCreateDialogText"
+              :aria-label="_cannotCreateDialogText"
               variation="primary"
               appearance="filled"
-              :uk-tooltip="_cannotCreateDialogText"
               :disabled="isNewBtnDisabled"
             >
               <oc-icon name="add" />

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

@@ -68,7 +68,6 @@
                 :id="$_resharerToggleId"
                 class="files-collaborators-collaborator-reshare-information"
                 type="button"
-                :uk-tooltip="$gettext('Show resharer details')"
               >
                 <oc-icon name="repeat" />
                 <translate :translate-params="{ resharer: $_reshareInformation }">
@@ -133,10 +132,11 @@
             </li>
             <li v-if="isIndirectShare" class="oc-py-rm">
               <oc-tag
+                v-oc-tooltip="viaTooltip"
+                :aria-label="viaTooltip"
                 type="router-link"
                 class="files-collaborators-collaborator-follow-via"
                 :to="viaRouterParams"
-                :uk-tooltip="viaTooltip"
               >
                 <oc-icon name="exit_to_app" />
                 <span
@@ -152,8 +152,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)"
@@ -163,8 +163,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/src/components/ApplicationsMenu.vue

@@ -3,11 +3,12 @@
     <oc-button
       id="_appSwitcherButton"
       ref="menubutton"
+      v-oc-tooltip="applicationSwitcherLabel"
       appearance="raw"
       class="oc-topbar-menu-burger"
       :aria-label="applicationSwitcherLabel"
     >
-      <oc-icon :uk-tooltip="applicationSwitcherLabel" name="apps" class="uk-flex" />
+      <oc-icon 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'