fix(slack): Add button wrapper

toggl · May 27, 2024 · 82306be · 82306be
1 parent 13206d8
commit 82306be
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/src/content/slack.js b/src/content/slack.js
@@ -7,9 +7,9 @@
 
 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-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;
 
@@ -25,7 +25,12 @@ togglbutton.render('.p-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 => {
@@ -47,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/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;