fix(slack): Fix toggl button disappeared on channel toolbar (#2303)

* fix(slack): Fix toggl button disappeared on channel toolbar * Update origins.js * fix(slack): Add button wrapper * feat(hubspot): Update origins.js * Update origins.js --------- Co-authored-by: Izon Thomaz Mielke <[email protected]>
toggl · May 28, 2024 · 935a2be · 935a2be
1 parent 19805fc
commit 935a2be
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 13 deletions.
diff --git a/src/content/hubspot.js b/src/content/hubspot.js
@@ -1,7 +1,7 @@
 /**
  * @name Hubspot
  * @urlAlias hubspot.com
- * @urlRegex *://*.atlassian.com/*
+ * @urlRegex *://app.hubspot.com/*
  */
 'use strict';
 
@@ -13,11 +13,11 @@ togglbutton.render(
       const $description = $('div[data-selenium-test="ticket-highlight-details"] h3');
       return $description.textContent.trim();
     }
-    
+
     function tagsSelector () {
       const pipeline = $('div#pipeline-select') ? $('div#pipeline-select').textContent.trim(): '';
       const stage = $('div#stage-select') ? $('div#stage-select').textContent.trim(): '';
-    
+
       return [pipeline, stage];
     }
     const link = togglbutton.createTimerLink({

diff --git a/src/content/slack.js b/src/content/slack.js
@@ -1,11 +1,15 @@
+/**
+ * @name Slack
+ * @urlAlias slack.com
+ * @urlRegex *://*.slack.com/*
+ */
 'use strict';
-/* global togglbutton, $ */
 
 const getTextContent = (element) => element ? element.textContent.trim() : '';
 
-const getWorkspaceName = () => getTextContent($('.p-ia__sidebar_header__team_name_text'));
+const getWorkspaceName = () => getTextContent($('.p-ia4_home_header_menu__team_name'));
 
-togglbutton.render('.p-ia__view_header:not(.toggl)', { observe: true }, (elem) => {
+togglbutton.render('.p-view_header__actions:not(.toggl)', { observe: true }, (elem) => {
   const description = $('[data-qa="channel_name"]');
   const isRendered = $('.toggl-button', elem) != null;
 
@@ -21,7 +25,12 @@ togglbutton.render('.p-ia__view_header:not(.toggl)', { observe: true }, (elem) =
     buttonType: 'minimal'
   });
 
-  elem.insertBefore(link, elem.lastChild);
+  const button = document.createElement('button');
+
+  button.className = 'c-button-unstyled c-icon_button c-icon_button--size_medium p-toggle_channel_space_action_button display_flex align_items_center p-toggle_channel_space_action_button--text p-toggle_channel_space_action--overlay c-icon_button--default';
+  button.appendChild(link);
+
+  elem.insertBefore(button, elem.firstChild);
 });
 
 togglbutton.render('.c-message_kit__hover:not(.toggl)', { observe: true }, elem => {
@@ -43,8 +52,6 @@ togglbutton.render('.c-message_kit__hover:not(.toggl)', { observe: true }, elem
   });
 
   const button = document.createElement('button');
-  const buttonContainer = document.createElement('span');
-  buttonContainer.className = 'slack-message-container';
 
   button.className = 'c-button-unstyled c-icon_button c-icon_button--light c-icon_button--size_small c-message_actions__button';
   button.setAttribute('type', 'button');

diff --git a/src/origins.js b/src/origins.js
@@ -291,7 +291,7 @@ export default {
     name: 'Helpscout'
   },
   'hubspot.com': {
-    url: '*://*.atlassian.com/*',
+    url: '*://app.hubspot.com/*',
     name: 'Hubspot',
     file: 'hubspot.js'
   },
@@ -537,7 +537,8 @@ export default {
   },
   'slack.com': {
     url: '*://*.slack.com/*',
-    name: 'Slack'
+    name: 'Slack',
+    file: 'slack.js'
   },
   'sourcelair.com': {
     url: '*://*.sourcelair.com/*',

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -920,14 +920,24 @@ li > .toggl-button.phabricator {
 /********* SLACK *********/
 .toggl-button.slack-message:not(.toggl-button-edit-form-button) {
   position: relative;
-  top: 2px;
+  top: 1px;
   width: 16px;
-  height: 16px;
+  height: 17px;
   padding-left: 0;
   background-size: 100%;
   background-position: center bottom;
 }
 
+.toggl .p-toggle_channel_space_action_button {
+  margin-right: 8px;
+}
+
+.toggl-button.slack.min {
+  width: 18px;
+  height: 18px;
+  margin-top: 2px;
+}
+
 .slack-message-container {
   position: relative;
   display: inline-flex;