From bc76a5d577264b872febcac00c3c465be958f6d9 Mon Sep 17 00:00:00 2001 From: Jean Brito Date: Thu, 22 Sep 2022 10:01:03 -0700 Subject: [PATCH] chore: Improve settings panel (#2510) * chore: Add settings to the settings panel * make minimize on close dependent of tray icon setting * add pt-BR translations --- src/i18n/en.i18n.json | 14 +++++- src/i18n/pt-BR.i18n.json | 14 +++++- src/servers/preload/serverAllowedRedirects.ts | 1 - src/ui/actions.ts | 19 +++++--- src/ui/components/SettingsView/GeneralTab.tsx | 6 +++ .../SettingsView/features/MenuBar.tsx | 44 +++++++++++++++++++ .../SettingsView/features/MinimizeOnClose.tsx | 4 ++ .../SettingsView/features/SideBar.tsx | 44 +++++++++++++++++++ .../SettingsView/features/TrayIcon.tsx | 44 +++++++++++++++++++ src/ui/reducers/isMenuBarEnabled.ts | 10 +++-- src/ui/reducers/isSideBarEnabled.ts | 7 ++- src/ui/reducers/isTrayIconEnabled.ts | 10 +++-- 12 files changed, 202 insertions(+), 15 deletions(-) create mode 100644 src/ui/components/SettingsView/features/MenuBar.tsx create mode 100644 src/ui/components/SettingsView/features/SideBar.tsx create mode 100644 src/ui/components/SettingsView/features/TrayIcon.tsx diff --git a/src/i18n/en.i18n.json b/src/i18n/en.i18n.json index 12ec8b6442..b0826c7950 100644 --- a/src/i18n/en.i18n.json +++ b/src/i18n/en.i18n.json @@ -192,6 +192,18 @@ "minimizeOnClose": { "title": "Minimize on close", "description": "When closed the app will be minimized, otherwise it will quit the application. Tray Icon need to be disabled to this take effect." + }, + "menubar": { + "title": "Menu bar", + "description": "Show menu bar on the top of the window." + }, + "sidebar": { + "title": "Sidebar", + "description": "Show sidebar on the left of the window with the Server List, Downloads and Settings." + }, + "trayIcon": { + "title": "Tray Icon", + "description": "Show tray icon on the system tray. If tray icon is active the app will be hidden to tray on close. Otherwise it will quit the application." } } }, @@ -303,4 +315,4 @@ "unreadMention": "Unread mentions", "noUnreadMessage": "No unread messages" } -} \ No newline at end of file +} diff --git a/src/i18n/pt-BR.i18n.json b/src/i18n/pt-BR.i18n.json index e1c8287ce0..9d7f7d1701 100644 --- a/src/i18n/pt-BR.i18n.json +++ b/src/i18n/pt-BR.i18n.json @@ -187,6 +187,18 @@ "minimizeOnClose": { "title": "Minimizar ao fechar", "description": "Quando fechado o aplicativo será minimizado para a barra de tarefas, senão será fechado. Ícone da bandeja precisa estar desativado para que isto funcione." + }, + "menubar" : { + "title": "Barra de menus", + "description": "Mostra a barra de menus no topo da aplicação" + }, + "sidebar" : { + "title": "Barra lateral", + "description": "Mostra a barra na lateral da janela com a lista de servidores, downloads e configurações." + }, + "trayIcon": { + "title": "Ícone da bandeja", + "description": "Mostra um ícone na bandeja do sistema para acessar rapidamente a aplicação. Se o ícone da bandeja estiver ativado, a aplicação será minimizada para a barra de tarefas ao ser fechada. Por outro lado se o ícone da bandeja estiver desativado, a aplicação será finalizada ao ser fechada." } } }, @@ -298,4 +310,4 @@ "unreadMention": "Menções não lidas", "noUnreadMessage": "Nenhuma mensagem" } -} \ No newline at end of file +} diff --git a/src/servers/preload/serverAllowedRedirects.ts b/src/servers/preload/serverAllowedRedirects.ts index 2141bd90f3..426e72c5cc 100644 --- a/src/servers/preload/serverAllowedRedirects.ts +++ b/src/servers/preload/serverAllowedRedirects.ts @@ -6,7 +6,6 @@ import { getServerUrl } from './urls'; export const setServerAllowedRedirects = ( allowedRedirects: Server['allowedRedirects'] ): void => { - console.log('setServerAllowedRedirects', allowedRedirects); dispatch({ type: WEBVIEW_ALLOWED_REDIRECTS_CHANGED, payload: { diff --git a/src/ui/actions.ts b/src/ui/actions.ts index edf3b38d25..bfcc76a113 100644 --- a/src/ui/actions.ts +++ b/src/ui/actions.ts @@ -74,6 +74,12 @@ export const SETTINGS_SET_INTERNALVIDEOCHATWINDOW_OPT_IN_CHANGED = 'settings/set-internalvideochatwindow-opt-in-changed'; export const SETTINGS_SET_MINIMIZE_ON_CLOSE_OPT_IN_CHANGED = 'settings/set-minimize-on-close-opt-in-changed'; +export const SETTINGS_SET_IS_TRAY_ICON_ENABLED_CHANGED = + 'settings/set-is-tray-icon-enabled-changed'; +export const SETTINGS_SET_IS_SIDE_BAR_ENABLED_CHANGED = + 'settings/set-is-side-bar-enabled-changed'; +export const SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED = + 'settings/set-is-menu-bar-enabled-changed'; export type UiActionTypeToPayloadMap = { [ABOUT_DIALOG_DISMISSED]: void; @@ -97,11 +103,11 @@ export type UiActionTypeToPayloadMap = { [SIDE_BAR_SERVER_SELECTED]: Server['url']; [SIDE_BAR_SERVERS_SORTED]: Server['url'][]; [TOUCH_BAR_FORMAT_BUTTON_TOUCHED]: - | 'bold' - | 'italic' - | 'strike' - | 'inline_code' - | 'multi_line'; + | 'bold' + | 'italic' + | 'strike' + | 'inline_code' + | 'multi_line'; [TOUCH_BAR_SELECT_SERVER_TOUCHED]: string; [UPDATE_DIALOG_DISMISSED]: void; [UPDATE_DIALOG_INSTALL_BUTTON_CLICKED]: void; @@ -141,4 +147,7 @@ export type UiActionTypeToPayloadMap = { [SETTINGS_SET_HARDWARE_ACCELERATION_OPT_IN_CHANGED]: boolean; [SETTINGS_SET_INTERNALVIDEOCHATWINDOW_OPT_IN_CHANGED]: boolean; [SETTINGS_SET_MINIMIZE_ON_CLOSE_OPT_IN_CHANGED]: boolean; + [SETTINGS_SET_IS_TRAY_ICON_ENABLED_CHANGED]: boolean; + [SETTINGS_SET_IS_SIDE_BAR_ENABLED_CHANGED]: boolean; + [SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED]: boolean; }; diff --git a/src/ui/components/SettingsView/GeneralTab.tsx b/src/ui/components/SettingsView/GeneralTab.tsx index d20cea114d..beb9293640 100644 --- a/src/ui/components/SettingsView/GeneralTab.tsx +++ b/src/ui/components/SettingsView/GeneralTab.tsx @@ -4,8 +4,11 @@ import React, { FC } from 'react'; import { FlashFrame } from './features/FlashFrame'; import { HardwareAcceleration } from './features/HardwareAcceleration'; import { InternalVideoChatWindow } from './features/InternalVideoChatWindow'; +import { MenuBar } from './features/MenuBar'; import { MinimizeOnClose } from './features/MinimizeOnClose'; import { ReportErrors } from './features/ReportErrors'; +import { SideBar } from './features/SideBar'; +import { TrayIcon } from './features/TrayIcon'; export const GeneralTab: FC = () => ( @@ -14,7 +17,10 @@ export const GeneralTab: FC = () => ( + {process.platform === 'win32' && } + + {process.platform !== 'darwin' && } ); diff --git a/src/ui/components/SettingsView/features/MenuBar.tsx b/src/ui/components/SettingsView/features/MenuBar.tsx new file mode 100644 index 0000000000..b3ada3a15a --- /dev/null +++ b/src/ui/components/SettingsView/features/MenuBar.tsx @@ -0,0 +1,44 @@ +import { ToggleSwitch, Field } from '@rocket.chat/fuselage'; +import React, { ChangeEvent, Dispatch, FC, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useDispatch, useSelector } from 'react-redux'; + +import { RootAction } from '../../../../store/actions'; +import { RootState } from '../../../../store/rootReducer'; +import { SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED } from '../../../actions'; + +type Props = { + className?: string; +}; + +export const MenuBar: FC = (props) => { + const isMenuBarEnabled = useSelector( + ({ isMenuBarEnabled }: RootState) => isMenuBarEnabled + ); + const dispatch = useDispatch>(); + const { t } = useTranslation(); + const handleChange = useCallback( + (event: ChangeEvent) => { + const isChecked = event.currentTarget.checked; + dispatch({ + type: SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED, + payload: isChecked, + }); + }, + [dispatch] + ); + + return ( + + + + + {t('settings.options.menubar.title')} + + + + {t('settings.options.menubar.description')} + + + ); +}; diff --git a/src/ui/components/SettingsView/features/MinimizeOnClose.tsx b/src/ui/components/SettingsView/features/MinimizeOnClose.tsx index 91ab8984c3..789cc36416 100644 --- a/src/ui/components/SettingsView/features/MinimizeOnClose.tsx +++ b/src/ui/components/SettingsView/features/MinimizeOnClose.tsx @@ -15,6 +15,9 @@ export const MinimizeOnClose: FC = (props) => { const isMinimizeOnCloseEnabled = useSelector( ({ isMinimizeOnCloseEnabled }: RootState) => isMinimizeOnCloseEnabled ); + const isTrayIconEnabled = useSelector( + ({ isTrayIconEnabled }: RootState) => isTrayIconEnabled + ); const dispatch = useDispatch>(); const { t } = useTranslation(); const handleChange = useCallback( @@ -32,6 +35,7 @@ export const MinimizeOnClose: FC = (props) => { diff --git a/src/ui/components/SettingsView/features/SideBar.tsx b/src/ui/components/SettingsView/features/SideBar.tsx new file mode 100644 index 0000000000..cf0438846f --- /dev/null +++ b/src/ui/components/SettingsView/features/SideBar.tsx @@ -0,0 +1,44 @@ +import { ToggleSwitch, Field } from '@rocket.chat/fuselage'; +import React, { ChangeEvent, Dispatch, FC, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useDispatch, useSelector } from 'react-redux'; + +import { RootAction } from '../../../../store/actions'; +import { RootState } from '../../../../store/rootReducer'; +import { SETTINGS_SET_IS_SIDE_BAR_ENABLED_CHANGED } from '../../../actions'; + +type Props = { + className?: string; +}; + +export const SideBar: FC = (props) => { + const isSideBarEnabled = useSelector( + ({ isSideBarEnabled }: RootState) => isSideBarEnabled + ); + const dispatch = useDispatch>(); + const { t } = useTranslation(); + const handleChange = useCallback( + (event: ChangeEvent) => { + const isChecked = event.currentTarget.checked; + dispatch({ + type: SETTINGS_SET_IS_SIDE_BAR_ENABLED_CHANGED, + payload: isChecked, + }); + }, + [dispatch] + ); + + return ( + + + + + {t('settings.options.sidebar.title')} + + + + {t('settings.options.sidebar.description')} + + + ); +}; diff --git a/src/ui/components/SettingsView/features/TrayIcon.tsx b/src/ui/components/SettingsView/features/TrayIcon.tsx new file mode 100644 index 0000000000..4db4f95ada --- /dev/null +++ b/src/ui/components/SettingsView/features/TrayIcon.tsx @@ -0,0 +1,44 @@ +import { ToggleSwitch, Field } from '@rocket.chat/fuselage'; +import React, { ChangeEvent, Dispatch, FC, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { useDispatch, useSelector } from 'react-redux'; + +import { RootAction } from '../../../../store/actions'; +import { RootState } from '../../../../store/rootReducer'; +import { SETTINGS_SET_IS_TRAY_ICON_ENABLED_CHANGED } from '../../../actions'; + +type Props = { + className?: string; +}; + +export const TrayIcon: FC = (props) => { + const isTrayIconEnabled = useSelector( + ({ isTrayIconEnabled }: RootState) => isTrayIconEnabled + ); + const dispatch = useDispatch>(); + const { t } = useTranslation(); + const handleChange = useCallback( + (event: ChangeEvent) => { + const isChecked = event.currentTarget.checked; + dispatch({ + type: SETTINGS_SET_IS_TRAY_ICON_ENABLED_CHANGED, + payload: isChecked, + }); + }, + [dispatch] + ); + + return ( + + + + + {t('settings.options.trayIcon.title')} + + + + {t('settings.options.trayIcon.description')} + + + ); +}; diff --git a/src/ui/reducers/isMenuBarEnabled.ts b/src/ui/reducers/isMenuBarEnabled.ts index 29bd616906..8897626caf 100644 --- a/src/ui/reducers/isMenuBarEnabled.ts +++ b/src/ui/reducers/isMenuBarEnabled.ts @@ -2,10 +2,14 @@ import { Reducer } from 'redux'; import { APP_SETTINGS_LOADED } from '../../app/actions'; import { ActionOf } from '../../store/actions'; -import { MENU_BAR_TOGGLE_IS_MENU_BAR_ENABLED_CLICKED } from '../actions'; +import { + MENU_BAR_TOGGLE_IS_MENU_BAR_ENABLED_CLICKED, + SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED, +} from '../actions'; type IsMenuBarEnabledAction = | ActionOf + | ActionOf | ActionOf; export const isMenuBarEnabled: Reducer = ( @@ -13,9 +17,9 @@ export const isMenuBarEnabled: Reducer = ( action ) => { switch (action.type) { - case MENU_BAR_TOGGLE_IS_MENU_BAR_ENABLED_CLICKED: { + case SETTINGS_SET_IS_MENU_BAR_ENABLED_CHANGED: + case MENU_BAR_TOGGLE_IS_MENU_BAR_ENABLED_CLICKED: return action.payload; - } case APP_SETTINGS_LOADED: { const { isMenuBarEnabled = state } = action.payload; diff --git a/src/ui/reducers/isSideBarEnabled.ts b/src/ui/reducers/isSideBarEnabled.ts index bf3f7f7cf3..65e56e05c0 100644 --- a/src/ui/reducers/isSideBarEnabled.ts +++ b/src/ui/reducers/isSideBarEnabled.ts @@ -2,10 +2,14 @@ import { Reducer } from 'redux'; import { APP_SETTINGS_LOADED } from '../../app/actions'; import { ActionOf } from '../../store/actions'; -import { MENU_BAR_TOGGLE_IS_SIDE_BAR_ENABLED_CLICKED } from '../actions'; +import { + MENU_BAR_TOGGLE_IS_SIDE_BAR_ENABLED_CLICKED, + SETTINGS_SET_IS_SIDE_BAR_ENABLED_CHANGED, +} from '../actions'; type IsSideBarEnabledAction = | ActionOf + | ActionOf | ActionOf; export const isSideBarEnabled: Reducer = ( @@ -13,6 +17,7 @@ export const isSideBarEnabled: Reducer = ( action ) => { switch (action.type) { + case SETTINGS_SET_IS_SIDE_BAR_ENABLED_CHANGED: case MENU_BAR_TOGGLE_IS_SIDE_BAR_ENABLED_CLICKED: return action.payload; diff --git a/src/ui/reducers/isTrayIconEnabled.ts b/src/ui/reducers/isTrayIconEnabled.ts index 050ee1ba3b..ff6b6daae6 100644 --- a/src/ui/reducers/isTrayIconEnabled.ts +++ b/src/ui/reducers/isTrayIconEnabled.ts @@ -2,10 +2,14 @@ import { Reducer } from 'redux'; import { APP_SETTINGS_LOADED } from '../../app/actions'; import { ActionOf } from '../../store/actions'; -import { MENU_BAR_TOGGLE_IS_TRAY_ICON_ENABLED_CLICKED } from '../actions'; +import { + MENU_BAR_TOGGLE_IS_TRAY_ICON_ENABLED_CLICKED, + SETTINGS_SET_IS_TRAY_ICON_ENABLED_CHANGED, +} from '../actions'; type IsTrayIconEnabledAction = | ActionOf + | ActionOf | ActionOf; export const isTrayIconEnabled: Reducer = ( @@ -13,9 +17,9 @@ export const isTrayIconEnabled: Reducer = ( action ) => { switch (action.type) { - case MENU_BAR_TOGGLE_IS_TRAY_ICON_ENABLED_CLICKED: { + case SETTINGS_SET_IS_TRAY_ICON_ENABLED_CHANGED: + case MENU_BAR_TOGGLE_IS_TRAY_ICON_ENABLED_CLICKED: return action.payload; - } case APP_SETTINGS_LOADED: { const { isTrayIconEnabled = state } = action.payload;