Add feature to display service name under service icon when the toggle for it is enabled in the settings (#2136)

Co-authored-by: AnjithPaul <anjithpaul.mec@gmail.com>

10 files changed, 50 insertions, 2 deletions

diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index fc33a3c58..2bae57648 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -69,6 +69,7 @@ class Sidebar extends Component {
     toggleAudio: PropTypes.func.isRequired,
     toggleDarkMode: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showServiceNameSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
     deleteService: PropTypes.func.isRequired,
     updateService: PropTypes.func.isRequired,
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index 69a12e982..3049b6efa 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -21,6 +21,7 @@ class TabBarSortableList extends Component {
     hibernateService: PropTypes.func.isRequired,
     wakeUpService: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showServiceNameSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   };
 
@@ -39,6 +40,7 @@ class TabBarSortableList extends Component {
       wakeUpService,
       openSettings,
       showMessageBadgeWhenMutedSetting,
+      showServiceNameSetting,
       showMessageBadgesEvenWhenMuted,
     } = this.props;
 
@@ -65,6 +67,7 @@ class TabBarSortableList extends Component {
             openSettings={openSettings}
             showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting}
             showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted}
+            showServiceNameSetting={showServiceNameSetting}
           />
         ))}
       </ul>
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 455d2549a..3ea6c5da2 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -132,6 +132,7 @@ class TabItem extends Component {
     hibernateService: PropTypes.func.isRequired,
     wakeUpService: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showServiceNameSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
     stores: PropTypes.shape({
       settings: PropTypes.instanceOf(SettingsStore).isRequired,
@@ -219,6 +220,7 @@ class TabItem extends Component {
       wakeUpService,
       openSettings,
       showMessageBadgeWhenMutedSetting,
+      showServiceNameSetting,
       showMessageBadgesEvenWhenMuted,
     } = this.props;
     const { intl } = this.props;
@@ -347,6 +349,7 @@ class TabItem extends Component {
           'is-active': service.isActive,
           'has-custom-icon': service.hasCustomIcon,
           'is-disabled': !service.isEnabled,
+          'is-label-enabled': showServiceNameSetting,
         })}
         onClick={clickHandler}
         onContextMenu={() => menu.popup()}
@@ -356,8 +359,12 @@ class TabItem extends Component {
             : ''
         }`}
       >
-      
-        <img src={service.icon} className="tab-item__icon" alt="" />
+
+        {showServiceNameSetting? <div>
+          <img src={service.icon} className="tab-item__icon" alt="" />
+          <span className="tab-item__label">{service.name}</span>
+        </div> : <img src={service.icon} className="tab-item__icon" alt="" />}
+
         {notificationBadge}
         {errorBadge}
         {IS_SERVICE_DEBUGGING_ENABLED && (
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index 4ab0e8611..94d6f33c1 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -23,6 +23,7 @@ class TabBar extends Component {
     wakeUpService: PropTypes.func.isRequired,
     useVerticalStyle: PropTypes.bool.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showServiceNameSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   };
 
@@ -82,6 +83,7 @@ class TabBar extends Component {
       deleteService,
       useVerticalStyle,
       showMessageBadgeWhenMutedSetting,
+      showServiceNameSetting,
       showMessageBadgesEvenWhenMuted,
     } = this.props;
 
@@ -110,6 +112,7 @@ class TabBar extends Component {
           lockAxis={axis}
           helperClass="is-reordering"
           showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting}
+          showServiceNameSetting={showServiceNameSetting}
           showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted}
         />
       </div>
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 7b028b757..60bd91493 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -511,6 +511,7 @@ class EditSettingsForm extends Component {
             {this.state.activeSetttingsTab === 'appearance' && (
               <div>
                 <Toggle field={form.$('showDisabledServices')} />
+                <Toggle field={form.$('showServiceName')} />
                 <Toggle field={form.$('showMessageBadgeWhenMuted')} />
 
                 {isMac && <Toggle field={form.$('showDragArea')} />}
diff --git a/src/config.ts b/src/config.ts
index dfedbe6f5..15567bf66 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -193,6 +193,7 @@ export const DEFAULT_APP_SETTINGS = {
   clipboardNotifications: true,
   notifyTaskBarOnMessage: false,
   showDisabledServices: true,
+  showServiceName: false,
   showMessageBadgeWhenMuted: true,
   showDragArea: false,
   enableSpellchecking: true,
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 0d566525d..6b6f97e46 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -122,6 +122,9 @@ class AppLayoutContainer extends Component {
         showMessageBadgeWhenMutedSetting={
           settings.all.app.showMessageBadgeWhenMuted
         }
+        showServiceNameSetting={
+          settings.all.app.showServiceName
+        }
         showMessageBadgesEvenWhenMuted={ui.showMessageBadgesEvenWhenMuted}
         isTodosServiceActive={services.isTodosServiceActive || false}
       />
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index de0714870..76c525045 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -197,6 +197,10 @@ const messages = defineMessages({
     id: 'settings.app.form.showDisabledServices',
     defaultMessage: 'Display disabled services tabs',
   },
+  showServiceName: {
+    id: 'settings.app.form.showServiceName',
+    defaultMessage: 'Display service name under the icon',
+  },
   showMessageBadgeWhenMuted: {
     id: 'settings.app.form.showMessagesBadgesWhenMuted',
     defaultMessage: 'Show unread message badge when notifications are disabled',
@@ -301,6 +305,7 @@ class EditSettingsScreen extends Component {
           settingsData.enableGlobalHideShortcut,
         ),
         showDisabledServices: Boolean(settingsData.showDisabledServices),
+        showServiceName: Boolean(settingsData.showServiceName),
         darkMode: Boolean(settingsData.darkMode),
         adaptableDarkMode: Boolean(settingsData.adaptableDarkMode),
         universalDarkMode: Boolean(settingsData.universalDarkMode),
@@ -558,6 +563,11 @@ class EditSettingsScreen extends Component {
           value: settings.all.app.showDisabledServices,
           default: DEFAULT_APP_SETTINGS.showDisabledServices,
         },
+        showServiceName: {
+          label: intl.formatMessage(messages.showServiceName),
+          value: settings.all.app.showServiceName,
+          default: DEFAULT_APP_SETTINGS.showServiceName,
+        },
         showMessageBadgeWhenMuted: {
           label: intl.formatMessage(messages.showMessageBadgeWhenMuted),
           value: settings.all.app.showMessageBadgeWhenMuted,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index d5cf072f6..2544d2a00 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -241,6 +241,7 @@
   "settings.app.form.showDisabledServices": "Display disabled services tabs",
   "settings.app.form.showDragArea": "Show draggable area on window",
   "settings.app.form.showMessagesBadgesWhenMuted": "Show unread message badge when notifications are disabled",
+  "settings.app.form.showServiceName": "Display service name under the icon",
   "settings.app.form.splitMode": "Enable Split View Mode",
   "settings.app.form.startMinimized": "Start minimized",
   "settings.app.form.universalDarkMode": "Enable universal Dark Mode",
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
index b7f1a9e11..ab7cee08d 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -1,6 +1,8 @@
 @import './config.scss';
 
 .theme__dark .tab-item {
+  color: $dark-theme-text-color;
+
   &.is-active {
     background: $dark-theme-gray;
 
@@ -54,6 +56,22 @@
     }
   }
 
+  &.is-label-enabled{
+    height: min-content;
+    overflow: hidden;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+
+  .tab-item__label {
+    display: block;
+    margin-top: 6px;
+    font-size: 11px;
+    padding-left: 4px;
+    padding-right: 4px;
+    line-height: 13px;
+  }
+
   &.is-disabled .tab-item__icon {
     filter: grayscale(100%) opacity(0.2);
   }