UX: Added tooltips to topic admin menu (#7146)

* UX: Added tooltips to topic admin menu

* FIX: Prettyfied code

* FIX: Fixed typo

* Update config/locales/client.en.yml

Co-Authored-By: venarius <tim.lange@online.de>

app/assets/javascripts/discourse/widgets/topic-admin-menu.js.es6

@@ -16,6 +16,7 @@ createWidget("admin-menu-button", {
         action: attrs.action,
         icon: attrs.icon,
         label: attrs.fullLabel || `topic.${attrs.label}`,
+        title: attrs.title,
         secondaryAction: "hideAdminMenu"
       })
     );
@@ -136,7 +137,8 @@ export default createWidget("topic-admin-menu", {
       buttonClass: "btn-default",
       action: "toggleMultiSelect",
       icon: "tasks",
-      label: "actions.multi_select"
+      label: "actions.multi_select",
+      title: "topic.actions.multi_select_tooltip"
     });
 
     const topic = attrs.topic;
@@ -148,7 +150,8 @@ export default createWidget("topic-admin-menu", {
         buttonClass: "btn-danger",
         action: "deleteTopic",
         icon: "far-trash-alt",
-        label: "actions.delete"
+        label: "actions.delete",
+        title: "topic.actions.delete_tooltip"
       });
     }
 
@@ -158,7 +161,8 @@ export default createWidget("topic-admin-menu", {
         buttonClass: "btn-default",
         action: "recoverTopic",
         icon: "undo",
-        label: "actions.recover"
+        label: "actions.recover",
+        title: "topic.actions.recover_tooltip"
       });
     }
 
@@ -168,7 +172,8 @@ export default createWidget("topic-admin-menu", {
         buttonClass: "btn-default",
         action: "toggleClosed",
         icon: "unlock",
-        label: "actions.open"
+        label: "actions.open",
+        title: "topic.actions.open_tooltip"
       });
     } else {
       buttons.push({
@@ -176,7 +181,8 @@ export default createWidget("topic-admin-menu", {
         buttonClass: "btn-default",
         action: "toggleClosed",
         icon: "lock",
-        label: "actions.close"
+        label: "actions.close",
+        title: "topic.actions.close_tooltip"
       });
     }
 
@@ -185,7 +191,8 @@ export default createWidget("topic-admin-menu", {
       buttonClass: "btn-default",
       action: "showTopicStatusUpdate",
       icon: "far-clock",
-      label: "actions.timed_update"
+      label: "actions.timed_update",
+      title: "topic.actions.timed_update_tooltip"
     });
 
     const isPrivateMessage = topic.get("isPrivateMessage");
@@ -197,7 +204,10 @@ export default createWidget("topic-admin-menu", {
         buttonClass: "btn-default",
         action: "showFeatureTopic",
         icon: "thumbtack",
-        label: featured ? "actions.unpin" : "actions.pin"
+        label: featured ? "actions.unpin" : "actions.pin",
+        title: featured
+          ? "topic.actions.unpin_tooltip"
+          : "topic.actions.pin_tooltip"
       });
     }
 
@@ -207,7 +217,8 @@ export default createWidget("topic-admin-menu", {
         buttonClass: "btn-default",
         action: "showChangeTimestamp",
         icon: "calendar-alt",
-        label: "change_timestamp.title"
+        label: "change_timestamp.title",
+        title: "topic.change_timestamp.tooltip"
       });
     }
 
@@ -216,7 +227,8 @@ export default createWidget("topic-admin-menu", {
       buttonClass: "btn-default",
       action: "resetBumpDate",
       icon: "anchor",
-      label: "actions.reset_bump_date"
+      label: "actions.reset_bump_date",
+      title: "topic.actions.reset_bump_date_tooltip"
     });
 
     if (!isPrivateMessage) {
@@ -225,7 +237,10 @@ export default createWidget("topic-admin-menu", {
         buttonClass: "btn-default",
         action: "toggleArchived",
         icon: "folder",
-        label: topic.get("archived") ? "actions.unarchive" : "actions.archive"
+        label: topic.get("archived") ? "actions.unarchive" : "actions.archive",
+        title: topic.get("archived")
+          ? "topic.actions.unarchive_tooltip"
+          : "topic.actions.archive_tooltip"
       });
     }
 
@@ -235,7 +250,10 @@ export default createWidget("topic-admin-menu", {
       buttonClass: "btn-default",
       action: "toggleVisibility",
       icon: visible ? "far-eye-slash" : "far-eye",
-      label: visible ? "actions.invisible" : "actions.visible"
+      label: visible ? "actions.invisible" : "actions.visible",
+      title: visible
+        ? "topic.actions.invisible_tooltip"
+        : "topic.actions.visible_tooltip"
     });
 
     if (details.get("can_convert_topic")) {
@@ -246,7 +264,12 @@ export default createWidget("topic-admin-menu", {
           ? "convertToPublicTopic"
           : "convertToPrivateMessage",
         icon: isPrivateMessage ? "comment" : "envelope",
-        label: isPrivateMessage ? "actions.make_public" : "actions.make_private"
+        label: isPrivateMessage
+          ? "actions.make_public"
+          : "actions.make_private",
+        title: isPrivateMessage
+          ? "topic.actions.make_public_tooltip"
+          : "topic.actions.make_private_tooltip"
       });
     }
 
@@ -255,7 +278,8 @@ export default createWidget("topic-admin-menu", {
         action: "showModerationHistory",
         buttonClass: "btn-default",
         icon: "list",
-        fullLabel: "admin.flags.moderation_history"
+        fullLabel: "admin.flags.moderation_history",
+        title: "admin.flags.moderation_history_tooltip"
       });
     }
 

config/locales/client.en.yml

@@ -1927,21 +1927,36 @@ en:
 
       actions:
         recover: "Un-Delete Topic"
+        recover_tooltip: "Restores the topic."
         delete: "Delete Topic"
+        delete_tooltip: "Marks the topic as deleted."
         open: "Open Topic"
+        open_tooltip: "Marks the topic as open and allows new replies."
         close: "Close Topic"
+        close_tooltip: "Marks the topic as closed and prevents new replies."
         multi_select: "Select Posts…"
+        multi_select_tooltip: "Toggles multiselect mode in which multiple posts can be selected."
         timed_update: "Set Topic Timer..."
+        timed_update_tooltip: "Opens a new window in which a timer for different actions can be set."
         pin: "Pin Topic…"
+        pin_tooltip: "Opens a window in which the topic can be featured in different ways."
         unpin: "Un-Pin Topic…"
+        unpin_tooltip: "Unpins the topic and it will no longer be featured."
         unarchive: "Unarchive Topic"
+        unarchive_tooltip: "Unfreezes the topic and allows interacting with it."
         archive: "Archive Topic"
+        archive_tooltip: "Freezes the topic and prevents interacting with it."
         invisible: "Make Unlisted"
+        invisible_tooltip: "Prevents the inclusion of the topic in lists and digest emails."
         visible: "Make Listed"
+        visible_tooltip: "Marks the topic as visible and includes the topic in lists and digest emails."
         reset_read: "Reset Read Data"
         make_public: "Make Public Topic"
+        make_public_tooltip: "Converts to public topic and makes it visible for other users."
         make_private: "Make Personal Message"
+        make_private_tooltip: "Converts to personal message and makes it invisible for other users."
         reset_bump_date: "Reset Bump Date"
+        reset_bump_date_tooltip: "Puts the topic back into chronological order according to when it was originally created."
 
       feature:
         pin: "Pin Topic"
@@ -2099,6 +2114,7 @@ en:
 
       change_timestamp:
         title: "Change Timestamp..."
+        tooltip: "Opens a window in which the timestamp can be changed."
         action: "change timestamp"
         invalid_timestamp: "Timestamp cannot be in the future."
         error: "There was an error changing the timestamp of the topic."
@@ -2974,6 +2990,7 @@ en:
         old_posts: "Old Flagged Posts"
         topics: "Flagged Topics"
         moderation_history: "Moderation History"
+        moderation_history_tooltip: "Shows the moderation history."
 
         agree: "Agree"
         agree_title: "Confirm this flag as valid and correct"