From 955f2abeb2c093515e6dd0026b4072145a2be6b6 Mon Sep 17 00:00:00 2001 From: Vishnu017 <39431453+Vishnu017@users.noreply.github.com> Date: Tue, 26 Oct 2021 20:37:56 +0530 Subject: Add feature to display service name under service icon when the toggle for it is enabled in the settings (#2136) Co-authored-by: AnjithPaul --- src/components/layout/Sidebar.js | 1 + src/components/services/tabs/TabBarSortableList.js | 3 +++ src/components/services/tabs/TabItem.js | 11 +++++++++-- src/components/services/tabs/Tabbar.js | 3 +++ src/components/settings/settings/EditSettingsForm.js | 1 + src/config.ts | 1 + src/containers/layout/AppLayoutContainer.js | 3 +++ src/containers/settings/EditSettingsScreen.js | 10 ++++++++++ src/i18n/locales/en-US.json | 1 + src/styles/tabs.scss | 18 ++++++++++++++++++ 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} /> ))} 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 { : '' }`} > - - + + {showServiceNameSetting?
+ + {service.name} +
: } + {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} /> 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' && (
+ {isMac && } 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); } -- cgit v1.2.3-54-g00ecf