Merge pull request #1055 from nextcloud/backport/1051/stable25

[stable25] Replace custom tooltips with native tooltips

js/activity-sidebar.js.LICENSE.txt

@@ -53,8 +53,6 @@ object-assign
 
 /*! For license information please see NcUserBubble.js.LICENSE.txt */
 
-/*! For license information please see Tooltip.js.LICENSE.txt */
-
 /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

js/feedSettings.js

@@ -57,11 +57,7 @@ $(function() {
 	var clipboard = new Clipboard('#rssurl .icon-clippy');
 	clipboard.on('success', function(e) {
 		$input = $(e.trigger);
-		$input.tooltip({placement: 'top', trigger: 'manual', title: t('core', 'Copied!')});
-		$input.tooltip('show');
-		_.delay(function() {
-			$input.tooltip('hide');
-		}, 3000);
+		OC.Notification.show(t('core', 'Copied!'), {type: 'success'});
 	});
 	clipboard.on('error', function (e) {
 		$input = $(e.trigger);
@@ -73,16 +69,7 @@ $(function() {
 		} else {
 			actionMsg = t('core', 'Press Ctrl-C to copy.');
 		}
-
-		$input.tooltip({
-			placement: 'top',
-			trigger: 'manual',
-			title: actionMsg
-		});
-		$input.tooltip('show');
-		_.delay(function () {
-			$input.tooltip('hide');
-		}, 3000);
+		OC.Notification.show(actionMsg, {type: 'error'});
 	});
 
 	OCA.Activity.FeedSettings.init();

js/script.js

@@ -203,9 +203,7 @@ $(function(){
 				}
 
 				var content = '<div class="section activity-section group" data-date="' + escapeHTML(dayOfYear) + '">' + "\n"
-					+'	<h2>'+"\n"
-					+'		<span class="has-tooltip" title="' + escapeHTML(dateOfDay) + '">' + escapeHTML(displayDate) + '</span>' + "\n"
-					+'	</h2>' + "\n"
+					+'	<h2 aria-label="' + escapeHTML(dateOfDay) + '" title="' + escapeHTML(dateOfDay) + '">' + escapeHTML(displayDate) + '</h2>' + "\n"
 					+'	<div class="boxcontainer">' + "\n"
 					+'	</div>' + "\n"
 					+'</div>';
@@ -245,7 +243,8 @@ $(function(){
 				+ ((activity.link) ? '			</a>' + "\n" : '')
 				+ '		</div>' + "\n"
 
-				+'		<span class="activitytime has-tooltip live-relative-timestamp" data-timestamp="' + activity.timestamp + '" title="' + escapeHTML(OC.Util.formatDate(activity.timestamp)) + '">' + "\n"
+				+'		<span class="activitytime live-relative-timestamp" data-timestamp="' + activity.timestamp + '" aria-label="' + escapeHTML(OC.Util.formatDate(activity.timestamp)) + '"'
+				+			'title="' + escapeHTML(OC.Util.formatDate(activity.timestamp)) + '">' + "\n"
 				+ '			' + escapeHTML(OC.Util.relativeModifiedDate(activity.timestamp)) + "\n"
 				+'		</span>' + "\n";
 
@@ -304,9 +303,6 @@ $(function(){
 				self.processElements($subject);
 			});
 
-			$element.find('.has-tooltip').tooltip({
-				placement: 'bottom'
-			});
 		}
 	};
 

js/templates.js

@@ -52,12 +52,12 @@ templates['file'] = template({"compiler":[8,">= 4.3.0"],"main":function(containe
         return undefined
     };
 
-  return "<a class=\"filename has-tooltip\" href=\""
-    + alias4(((helper = (helper = lookupProperty(helpers,"link") || (depth0 != null ? lookupProperty(depth0,"link") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"link","hash":{},"data":data,"loc":{"start":{"line":1,"column":38},"end":{"line":1,"column":46}}}) : helper)))
+  return "<a class=\"filename\" href=\""
+    + alias4(((helper = (helper = lookupProperty(helpers,"link") || (depth0 != null ? lookupProperty(depth0,"link") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"link","hash":{},"data":data,"loc":{"start":{"line":1,"column":26},"end":{"line":1,"column":34}}}) : helper)))
     + "\" title=\""
-    + alias4(((helper = (helper = lookupProperty(helpers,"title") || (depth0 != null ? lookupProperty(depth0,"title") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"title","hash":{},"data":data,"loc":{"start":{"line":1,"column":55},"end":{"line":1,"column":64}}}) : helper)))
+    + alias4(((helper = (helper = lookupProperty(helpers,"title") || (depth0 != null ? lookupProperty(depth0,"title") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"title","hash":{},"data":data,"loc":{"start":{"line":1,"column":43},"end":{"line":1,"column":52}}}) : helper)))
     + "\">"
-    + alias4(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data,"loc":{"start":{"line":1,"column":66},"end":{"line":1,"column":74}}}) : helper)))
+    + alias4(((helper = (helper = lookupProperty(helpers,"name") || (depth0 != null ? lookupProperty(depth0,"name") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data,"loc":{"start":{"line":1,"column":54},"end":{"line":1,"column":62}}}) : helper)))
     + "</a>\n";
 },"useData":true});
 templates['fileNoPath'] = template({"compiler":[8,">= 4.3.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -82,10 +82,10 @@ templates['fileRoot'] = template({"compiler":[8,">= 4.3.0"],"main":function(cont
         return undefined
     };
 
-  return "<a class=\"filename has-tooltip\" href=\""
-    + alias4(((helper = (helper = lookupProperty(helpers,"link") || (depth0 != null ? lookupProperty(depth0,"link") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"link","hash":{},"data":data,"loc":{"start":{"line":1,"column":38},"end":{"line":1,"column":46}}}) : helper)))
+  return "<a class=\"filename\" href=\""
+    + alias4(((helper = (helper = lookupProperty(helpers,"link") || (depth0 != null ? lookupProperty(depth0,"link") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"link","hash":{},"data":data,"loc":{"start":{"line":1,"column":26},"end":{"line":1,"column":34}}}) : helper)))
     + "\" title=\""
-    + alias4(((helper = (helper = lookupProperty(helpers,"homeTXT") || (depth0 != null ? lookupProperty(depth0,"homeTXT") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"homeTXT","hash":{},"data":data,"loc":{"start":{"line":1,"column":55},"end":{"line":1,"column":66}}}) : helper)))
+    + alias4(((helper = (helper = lookupProperty(helpers,"homeTXT") || (depth0 != null ? lookupProperty(depth0,"homeTXT") : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"homeTXT","hash":{},"data":data,"loc":{"start":{"line":1,"column":43},"end":{"line":1,"column":54}}}) : helper)))
     + "\"><span class=\"icon icon-home\"></span></a>\n";
 },"useData":true});
 templates['openGraph'] = template({"1":function(container,depth0,helpers,partials,data) {

js/templates/file.handlebars

@@ -1 +1 @@
-<a class="filename has-tooltip" href="{{link}}" title="{{title}}">{{name}}</a>
+<a class="filename" href="{{link}}" title="{{title}}">{{name}}</a>

js/templates/fileRoot.handlebars

@@ -1 +1 @@
-<a class="filename has-tooltip" href="{{link}}" title="{{homeTXT}}"><span class="icon icon-home"></span></a>
+<a class="filename" href="{{link}}" title="{{homeTXT}}"><span class="icon icon-home"></span></a>

package.json

@@ -23,9 +23,9 @@
     "lint:fix": "eslint --ext .js,.vue src --fix",
     "stylelint": "stylelint css/*.css css/*.scss src/**/*.scss src/**/*.vue",
     "stylelint:fix": "stylelint css/*.css css/*.scss src/**/*.scss src/**/*.vue --fix",
-    "test": "NODE_ENV=test jest --passWithNoTests src/",
-    "test:coverage": "NODE_ENV=test jest --coverage src/",
-    "test:update-snapshots": "NODE_ENV=test jest --updateSnapshot"
+    "test": "TZ=CET NODE_ENV=test jest --passWithNoTests src/",
+    "test:coverage": "TZ=CET NODE_ENV=test jest --coverage src/",
+    "test:update-snapshots": "TZ=CET NODE_ENV=test jest --updateSnapshot"
   },
   "engines": {
     "node": "^16.0.0",

src/components/Activity.vue

@@ -32,15 +32,14 @@
 			<RichText class="activity-entry__content__message" :text="messageText" :arguments="messageArguments" />
 		</div>
 
-		<span v-tooltip.bottom="activity.formattedDate" class="activity-entry__date">{{ dateFromNow }}</span>
+		<span :title="activity.formattedDate" :aria-label="activity.formattedDate" class="activity-entry__date">{{ dateFromNow }}</span>
 	</li>
 </template>
 
 <script>
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcUserBubble from '@nextcloud/vue/dist/Components/NcUserBubble.js'
 import RichText from '@nextcloud/vue-richtext'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import ActivityModel from '../models/ActivityModel.js'
 
@@ -63,9 +62,6 @@ export default {
 		NcAvatar,
 		RichText,
 	},
-	directives: {
-		tooltip: Tooltip,
-	},
 	props: {
 		/**
 		 * The activity to render.

src/components/richArgumentsTypes/FileRichArgument.vue

@@ -22,20 +22,16 @@
 <template>
 	<span class="rich-text-file">
 		<a v-if="!isRoot && parentPathIsRoot" :href="link">{{ name }}</a>
-		<a v-if="!isRoot && !parentPathIsRoot" v-tooltip.bottom="t('activity', 'in {path}', {path: parentFolder})" :href="link">{{ name }}</a>
-		<span v-if="isRoot" v-tooltip.bottom="t('activity', 'Home')" class="icon-home" />
+		<a v-if="!isRoot && !parentPathIsRoot" :title="t('activity', 'in {path}', {path: parentFolder})" :aria-label="t('activity', 'in {path}', {path: parentFolder})" :href="link">{{ name }}</a>
+		<span v-if="isRoot" :title="t('activity', 'Home')" aria-label="t('activity', 'Home')" class="icon-home" />
 	</span>
 </template>
 
 <script>
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import { dirname, isSamePath } from '@nextcloud/paths'
 
 export default {
 	name: 'FileRichArgument',
-	directives: {
-		tooltip: Tooltip,
-	},
 	props: {
 		name: {
 			type: String,

src/tests/__snapshots__/Activity.test.js.snap

@@ -11,12 +11,12 @@ exports[`Display correct information for changes 1`] = `
     </div>
     <div class="activity-entry__content">
       <div data-v-a8ade67f="" class="activity-entry__content__subject rich-text--wrapper">
-        <div data-v-a8ade67f="">You changed <span data-v-a8ade67f="" class="rich-text-file rich-text--component"><!----> <a href="http://localhost:8080/index.php/f/776">Test file - renamed.md</a> <!----></span></div>
+        <div data-v-a8ade67f="">You changed <span data-v-a8ade67f="" class="rich-text-file rich-text--component"><!----> <a title="" aria-label="" href="http://localhost:8080/index.php/f/776">Test file - renamed.md</a> <!----></span></div>
       </div>
       <div data-v-a8ade67f="" class="activity-entry__content__message rich-text--wrapper">
         <div data-v-a8ade67f=""></div>
       </div>
-    </div> <span class="activity-entry__date v-popper--has-tooltip">11 days ago</span>
+    </div> <span title="April 29, 2021 10:51 AM" aria-label="April 29, 2021 10:51 AM" class="activity-entry__date">11 days ago</span>
   </li>
 </div>
 `;
@@ -37,7 +37,7 @@ exports[`Display correct information for comments 1`] = `
       <div data-v-a8ade67f="" class="activity-entry__content__message rich-text--wrapper">
         <div data-v-a8ade67f="">A comment</div>
       </div>
-    </div> <span class="activity-entry__date v-popper--has-tooltip">11 days ago</span>
+    </div> <span title="April 29, 2021 11:04 AM" aria-label="April 29, 2021 11:04 AM" class="activity-entry__date">11 days ago</span>
   </li>
 </div>
 `;
@@ -53,12 +53,12 @@ exports[`Display correct information for creations 1`] = `
     </div>
     <div class="activity-entry__content">
       <div data-v-a8ade67f="" class="activity-entry__content__subject rich-text--wrapper">
-        <div data-v-a8ade67f="">You created <span data-v-a8ade67f="" class="rich-text-file rich-text--component"><!----> <a href="http://localhost:8080/index.php/f/776">Test file.md</a> <!----></span></div>
+        <div data-v-a8ade67f="">You created <span data-v-a8ade67f="" class="rich-text-file rich-text--component"><!----> <a title="" aria-label="" href="http://localhost:8080/index.php/f/776">Test file.md</a> <!----></span></div>
       </div>
       <div data-v-a8ade67f="" class="activity-entry__content__message rich-text--wrapper">
         <div data-v-a8ade67f=""></div>
       </div>
-    </div> <span class="activity-entry__date v-popper--has-tooltip">11 days ago</span>
+    </div> <span title="April 29, 2021 10:49 AM" aria-label="April 29, 2021 10:49 AM" class="activity-entry__date">11 days ago</span>
   </li>
 </div>
 `;
@@ -79,7 +79,7 @@ exports[`Display correct information for favorites 1`] = `
       <div data-v-a8ade67f="" class="activity-entry__content__message rich-text--wrapper">
         <div data-v-a8ade67f=""></div>
       </div>
-    </div> <span class="activity-entry__date v-popper--has-tooltip">11 days ago</span>
+    </div> <span title="April 29, 2021 10:52 AM" aria-label="April 29, 2021 10:52 AM" class="activity-entry__date">11 days ago</span>
   </li>
 </div>
 `;
@@ -95,12 +95,12 @@ exports[`Display correct information for moves 1`] = `
     </div>
     <div class="activity-entry__content">
       <div data-v-a8ade67f="" class="activity-entry__content__subject rich-text--wrapper">
-        <div data-v-a8ade67f="">You moved <span data-v-a8ade67f="" class="rich-text-file rich-text--component"><!----> <a href="http://localhost:8080/index.php/f/776">Test file.md</a> <!----></span> to <span data-v-a8ade67f="" class="rich-text-file rich-text--component"><!----> <a href="http://localhost:8080/index.php/f/753">Documents</a> <!----></span></div>
+        <div data-v-a8ade67f="">You moved <span data-v-a8ade67f="" class="rich-text-file rich-text--component"><!----> <a title="" aria-label="" href="http://localhost:8080/index.php/f/776">Test file.md</a> <!----></span> to <span data-v-a8ade67f="" class="rich-text-file rich-text--component"><!----> <a title="" aria-label="" href="http://localhost:8080/index.php/f/753">Documents</a> <!----></span></div>
       </div>
       <div data-v-a8ade67f="" class="activity-entry__content__message rich-text--wrapper">
         <div data-v-a8ade67f=""></div>
       </div>
-    </div> <span class="activity-entry__date v-popper--has-tooltip">11 days ago</span>
+    </div> <span title="April 29, 2021 10:49 AM" aria-label="April 29, 2021 10:49 AM" class="activity-entry__date">11 days ago</span>
   </li>
 </div>
 `;
@@ -116,12 +116,12 @@ exports[`Display correct information for renames 1`] = `
     </div>
     <div class="activity-entry__content">
       <div data-v-a8ade67f="" class="activity-entry__content__subject rich-text--wrapper">
-        <div data-v-a8ade67f="">You renamed <span data-v-a8ade67f="" class="rich-text-file rich-text--component"><!----> <a href="http://localhost:8080/index.php/f/776">Test file - renamed.md</a> <!----></span> to <span data-v-a8ade67f="" class="rich-text-file rich-text--component"><!----> <a href="http://localhost:8080/index.php/f/776">Test file - renamed - looooooooong.md</a> <!----></span></div>
+        <div data-v-a8ade67f="">You renamed <span data-v-a8ade67f="" class="rich-text-file rich-text--component"><!----> <a title="" aria-label="" href="http://localhost:8080/index.php/f/776">Test file - renamed.md</a> <!----></span> to <span data-v-a8ade67f="" class="rich-text-file rich-text--component"><!----> <a title="" aria-label="" href="http://localhost:8080/index.php/f/776">Test file - renamed - looooooooong.md</a> <!----></span></div>
       </div>
       <div data-v-a8ade67f="" class="activity-entry__content__message rich-text--wrapper">
         <div data-v-a8ade67f=""></div>
       </div>
-    </div> <span class="activity-entry__date v-popper--has-tooltip">11 days ago</span>
+    </div> <span title="April 29, 2021 11:12 AM" aria-label="April 29, 2021 11:12 AM" class="activity-entry__date">11 days ago</span>
   </li>
 </div>
 `;
@@ -142,7 +142,7 @@ exports[`Display correct information for shares 1`] = `
       <div data-v-a8ade67f="" class="activity-entry__content__message rich-text--wrapper">
         <div data-v-a8ade67f=""></div>
       </div>
-    </div> <span class="activity-entry__date v-popper--has-tooltip">11 days ago</span>
+    </div> <span title="April 29, 2021 10:49 AM" aria-label="April 29, 2021 10:49 AM" class="activity-entry__date">11 days ago</span>
   </li>
 </div>
 `;
@@ -163,7 +163,7 @@ exports[`Display correct information for tags 1`] = `
       <div data-v-a8ade67f="" class="activity-entry__content__message rich-text--wrapper">
         <div data-v-a8ade67f=""></div>
       </div>
-    </div> <span class="activity-entry__date v-popper--has-tooltip">11 days ago</span>
+    </div> <span title="April 29, 2021 10:50 AM" aria-label="April 29, 2021 10:50 AM" class="activity-entry__date">11 days ago</span>
   </li>
 </div>
 `;
@@ -184,7 +184,7 @@ exports[`Display correct information for unfavorites 1`] = `
       <div data-v-a8ade67f="" class="activity-entry__content__message rich-text--wrapper">
         <div data-v-a8ade67f=""></div>
       </div>
-    </div> <span class="activity-entry__date v-popper--has-tooltip">11 days ago</span>
+    </div> <span title="April 29, 2021 10:52 AM" aria-label="April 29, 2021 10:52 AM" class="activity-entry__date">11 days ago</span>
   </li>
 </div>
 `;