From 13bf0e073df08d1107ca6e3223513df841ecb133 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Mon, 22 Aug 2022 16:09:34 +1000 Subject: [PATCH] feat: update design of the Notification Settings screen the preview button is not linked yet --- _locales/en/messages.json | 3 +- tools/updateI18nKeysType.py | 3 +- ts/components/leftpane/ActionsPanel.tsx | 2 +- .../SessionNotificationGroupSettings.tsx | 91 +++++++++++++++---- .../settings/SessionSettingListItem.tsx | 1 - .../settings/ZoomingSessionSlider.tsx | 4 +- .../section/CategoryConversations.tsx | 2 +- .../settings/section/CategoryPermissions.tsx | 6 +- .../settings/section/CategoryPrivacy.tsx | 10 +- ts/data/settings-key.ts | 2 + ts/interactions/conversationInteractions.ts | 4 +- ts/mains/main_renderer.tsx | 16 ++-- ts/types/LocalizerKeys.ts | 9 +- ts/util/notifications.ts | 6 +- ts/window.d.ts | 2 +- 15 files changed, 110 insertions(+), 51 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index f52e0259a..ab806e687 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -335,7 +335,8 @@ "appearanceSettingsTitle": "Appearance", "privacySettingsTitle": "Privacy", "notificationsSettingsTitle": "Notifications", - "notificationsSettingsContent": "Notifications Content", + "notificationsSettingsContent": "Notification Content", + "notificationPreview": "Preview", "recoveryPhraseEmpty": "Enter your recovery phrase", "displayNameEmpty": "Please enter a display name", "members": "$count$ members", diff --git a/tools/updateI18nKeysType.py b/tools/updateI18nKeysType.py index 42b37a8e8..11dfb29cf 100755 --- a/tools/updateI18nKeysType.py +++ b/tools/updateI18nKeysType.py @@ -1,8 +1,6 @@ #!/bin/python3 -# usage : ./tools/compareLocalizedStrings.py en de - import re from os import path, listdir from glob import glob @@ -23,6 +21,7 @@ with open(EN_FILE,'r') as jsonFile: stringToWrite += json.dumps(keys, sort_keys=True).replace(',', '\n |').replace('"', '\'')[1:-1] + stringToWrite += ';\n' # print(stringToWrite) with open(LOCALIZED_KEYS_FILE, "w") as typeFile: diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx index 37e6856a2..f989b986e 100644 --- a/ts/components/leftpane/ActionsPanel.tsx +++ b/ts/components/leftpane/ActionsPanel.tsx @@ -257,7 +257,7 @@ async function fetchReleaseFromFSAndUpdateMain() { async function askEnablingOpengroupPruningIfNeeded() { if (Storage.get(SettingsKey.settingsOpengroupPruning) === undefined) { const setSettingsAndCloseDialog = async (valueToSetPruningTo: boolean) => { - window.setSettingValue(SettingsKey.settingsOpengroupPruning, valueToSetPruningTo); + await window.setSettingValue(SettingsKey.settingsOpengroupPruning, valueToSetPruningTo); await window.setOpengroupPruning(valueToSetPruningTo); window.inboxStore?.dispatch(updateConfirmModal(null)); }; diff --git a/ts/components/settings/SessionNotificationGroupSettings.tsx b/ts/components/settings/SessionNotificationGroupSettings.tsx index 6e1f180f0..91744443e 100644 --- a/ts/components/settings/SessionNotificationGroupSettings.tsx +++ b/ts/components/settings/SessionNotificationGroupSettings.tsx @@ -1,42 +1,99 @@ import React from 'react'; +// tslint:disable-next-line: no-submodule-imports +import useUpdate from 'react-use/lib/useUpdate'; +import styled from 'styled-components'; +import { SettingsKey } from '../../data/settings-key'; +import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton'; import { SessionRadioGroup } from '../basic/SessionRadioGroup'; -import { SessionSettingsItemWrapper } from './SessionSettingListItem'; +import { SpacerLG } from '../basic/Text'; +import { SessionSettingsItemWrapper, SessionToggleWithDescription } from './SessionSettingListItem'; +// tslint:disable: use-simple-attributes + +enum NOTIFICATION { + MESSAGE = 'message', + NAME = 'name', + COUNT = 'count', + OFF = 'off', +} + +const StyledButtonContainer = styled.div` + display: flex; + width: min-content; + flex-direction: column; + padding-inline-start: var(--margins-lg); +`; export const SessionNotificationGroupSettings = (props: { hasPassword: boolean | null }) => { + const forceUpdate = useUpdate(); + if (props.hasPassword === null) { return null; } + const initialItem = + window.getSettingValue(SettingsKey.settingsNotification) || NOTIFICATION.MESSAGE; + + const notificationsAreEnabled = initialItem && initialItem !== NOTIFICATION.OFF; - const initialItem = window.getSettingValue('notification-setting') || 'message'; + const onClickPreview = () => { + if (!notificationsAreEnabled) { + return; + } + }; const items = [ { label: window.i18n('nameAndMessage'), - value: 'message', + value: NOTIFICATION.MESSAGE, }, { label: window.i18n('nameOnly'), - value: 'name', + value: NOTIFICATION.NAME, }, { label: window.i18n('noNameOrMessage'), - value: 'count', - }, - { - label: window.i18n('disableNotifications'), - value: 'off', + value: NOTIFICATION.COUNT, }, ]; + return ( - - { - window.setSettingValue('notification-setting', selectedRadioValue); + <> + { + await window.setSettingValue( + SettingsKey.settingsNotification, + notificationsAreEnabled ? NOTIFICATION.OFF : NOTIFICATION.MESSAGE + ); + forceUpdate(); }} + title={window.i18n('notificationsSettingsTitle')} + active={notificationsAreEnabled} /> - + {notificationsAreEnabled ? ( + + { + await window.setSettingValue(SettingsKey.settingsNotification, selectedRadioValue); + forceUpdate(); + }} + /> + + + + + + ) : null} + ); }; diff --git a/ts/components/settings/SessionSettingListItem.tsx b/ts/components/settings/SessionSettingListItem.tsx index 6c4253d2d..f247affb6 100644 --- a/ts/components/settings/SessionSettingListItem.tsx +++ b/ts/components/settings/SessionSettingListItem.tsx @@ -58,7 +58,6 @@ export const SessionSettingsItemWrapper = (props: { inline: boolean; title?: string; description?: string; - isTypingMessageItem?: boolean; children?: React.ReactNode; childrenDescription?: React.ReactNode; }) => { diff --git a/ts/components/settings/ZoomingSessionSlider.tsx b/ts/components/settings/ZoomingSessionSlider.tsx index b94c82a4b..a63ebaf3a 100644 --- a/ts/components/settings/ZoomingSessionSlider.tsx +++ b/ts/components/settings/ZoomingSessionSlider.tsx @@ -6,9 +6,9 @@ import { SessionSettingsItemWrapper } from './SessionSettingListItem'; export const ZoomingSessionSlider = (props: { onSliderChange?: (value: number) => void }) => { const forceUpdate = useUpdate(); - const handleSlider = (valueToForward: number) => { + const handleSlider = async (valueToForward: number) => { props?.onSliderChange?.(valueToForward); - window.setSettingValue('zoom-factor-setting', valueToForward); + await window.setSettingValue('zoom-factor-setting', valueToForward); window.updateZoomFactor(); forceUpdate(); }; diff --git a/ts/components/settings/section/CategoryConversations.tsx b/ts/components/settings/section/CategoryConversations.tsx index 94982293c..ff00eebf1 100644 --- a/ts/components/settings/section/CategoryConversations.tsx +++ b/ts/components/settings/section/CategoryConversations.tsx @@ -21,7 +21,7 @@ async function toggleCommunitiesPruning() { const newValue = !(await window.getOpengroupPruning()); // make sure to write it here too, as this is the value used on the UI to mark the toggle as true/false - window.setSettingValue(SettingsKey.settingsOpengroupPruning, newValue); + await window.setSettingValue(SettingsKey.settingsOpengroupPruning, newValue); await window.setOpengroupPruning(newValue); ToastUtils.pushRestartNeeded(); } catch (e) { diff --git a/ts/components/settings/section/CategoryPermissions.tsx b/ts/components/settings/section/CategoryPermissions.tsx index b13bdd36a..788be2f97 100644 --- a/ts/components/settings/section/CategoryPermissions.tsx +++ b/ts/components/settings/section/CategoryPermissions.tsx @@ -37,7 +37,7 @@ async function toggleStartInTray() { const newValue = !(await window.getStartInTray()); // make sure to write it here too, as this is the value used on the UI to mark the toggle as true/false - window.setSettingValue(SettingsKey.settingsStartInTray, newValue); + await window.setSettingValue(SettingsKey.settingsStartInTray, newValue); await window.setStartInTray(newValue); if (!newValue) { ToastUtils.pushRestartNeeded(); @@ -73,9 +73,9 @@ export const SettingsCategoryPermissions = (props: { hasPassword: boolean | null active={Boolean(window.getCallMediaPermissions())} /> { + onClickToggle={async () => { const old = Boolean(window.getSettingValue(SettingsKey.settingsAutoUpdate)); - window.setSettingValue(SettingsKey.settingsAutoUpdate, !old); + await window.setSettingValue(SettingsKey.settingsAutoUpdate, !old); forceUpdate(); }} title={window.i18n('autoUpdateSettingTitle')} diff --git a/ts/components/settings/section/CategoryPrivacy.tsx b/ts/components/settings/section/CategoryPrivacy.tsx index 1a4afb340..2a852e187 100644 --- a/ts/components/settings/section/CategoryPrivacy.tsx +++ b/ts/components/settings/section/CategoryPrivacy.tsx @@ -28,7 +28,7 @@ function displayPasswordModal( async function toggleLinkPreviews() { const newValue = !window.getSettingValue(SettingsKey.settingsLinkPreview); - window.setSettingValue(SettingsKey.settingsLinkPreview, newValue); + await window.setSettingValue(SettingsKey.settingsLinkPreview, newValue); if (!newValue) { await Data.createOrUpdateItem({ id: hasLinkPreviewPopupBeenDisplayed, value: false }); } else { @@ -63,9 +63,9 @@ export const SettingsCategoryPrivacy = (props: { return ( <> { + onClickToggle={async () => { const old = Boolean(window.getSettingValue(SettingsKey.settingsReadReceipt)); - window.setSettingValue(SettingsKey.settingsReadReceipt, !old); + await window.setSettingValue(SettingsKey.settingsReadReceipt, !old); forceUpdate(); }} title={window.i18n('readReceiptSettingTitle')} @@ -73,9 +73,9 @@ export const SettingsCategoryPrivacy = (props: { active={window.getSettingValue(SettingsKey.settingsReadReceipt)} /> { + onClickToggle={async () => { const old = Boolean(window.getSettingValue(SettingsKey.settingsTypingIndicator)); - window.setSettingValue(SettingsKey.settingsTypingIndicator, !old); + await window.setSettingValue(SettingsKey.settingsTypingIndicator, !old); forceUpdate(); }} title={window.i18n('typingIndicatorsSettingTitle')} diff --git a/ts/data/settings-key.ts b/ts/data/settings-key.ts index e0c1135e1..e9b08738a 100644 --- a/ts/data/settings-key.ts +++ b/ts/data/settings-key.ts @@ -7,6 +7,7 @@ const settingsSpellCheck = 'spell-check'; const settingsLinkPreview = 'link-preview-setting'; const settingsStartInTray = 'start-in-tray-setting'; const settingsOpengroupPruning = 'prune-setting'; +const settingsNotification = 'notification-setting'; export const SettingsKey = { settingsReadReceipt, @@ -17,4 +18,5 @@ export const SettingsKey = { settingsLinkPreview, settingsStartInTray, settingsOpengroupPruning, + settingsNotification, }; diff --git a/ts/interactions/conversationInteractions.ts b/ts/interactions/conversationInteractions.ts index 17725689c..05234b099 100644 --- a/ts/interactions/conversationInteractions.ts +++ b/ts/interactions/conversationInteractions.ts @@ -497,8 +497,8 @@ export async function showLinkSharingConfirmationModalDialog(e: any) { title: window.i18n('linkPreviewsTitle'), message: window.i18n('linkPreviewsConfirmMessage'), okTheme: SessionButtonColor.Danger, - onClickOk: () => { - window.setSettingValue('link-preview-setting', true); + onClickOk: async () => { + await window.setSettingValue('link-preview-setting', true); }, onClickClose: async () => { await Data.createOrUpdateItem({ id: hasLinkPreviewPopupBeenDisplayed, value: true }); diff --git a/ts/mains/main_renderer.tsx b/ts/mains/main_renderer.tsx index bf4050059..4388752cc 100644 --- a/ts/mains/main_renderer.tsx +++ b/ts/mains/main_renderer.tsx @@ -275,14 +275,6 @@ async function start() { const prevLaunchCount = window.getSettingValue('launch-count'); // tslint:disable-next-line: restrict-plus-operands const launchCount = !prevLaunchCount ? 1 : prevLaunchCount + 1; - window.setSettingValue('launch-count', launchCount); - - // On first launch - if (launchCount === 1) { - // Initialise default settings - window.setSettingValue('hide-menu-bar', true); - window.setSettingValue('link-preview-setting', false); - } window.setTheme = newTheme => { window.Events.setThemeSetting(newTheme); @@ -351,6 +343,14 @@ async function start() { openInbox(); } }; + await window.setSettingValue('launch-count', launchCount); + + // On first launch + if (launchCount === 1) { + // Initialise default settings + await window.setSettingValue('hide-menu-bar', true); + await window.setSettingValue('link-preview-setting', false); + } WhisperEvents.on('openInbox', () => { openInbox(); diff --git a/ts/types/LocalizerKeys.ts b/ts/types/LocalizerKeys.ts index 947fc9748..ed9bf551d 100644 --- a/ts/types/LocalizerKeys.ts +++ b/ts/types/LocalizerKeys.ts @@ -22,7 +22,7 @@ export type LocalizerKeys = | 'timerOption_10_seconds_abbreviated' | 'enterDisplayName' | 'connectToServerFail' - | 'disableNotifications' + | 'moreInformation' | 'publicChatExists' | 'noMediaUntilApproved' | 'passwordViewTitle' @@ -67,6 +67,7 @@ export type LocalizerKeys = | 'conversationsSettingsTitle' | 'tookAScreenshot' | 'from' + | 'requestsSubtitle' | 'thisMonth' | 'next' | 'addModerators' @@ -85,7 +86,7 @@ export type LocalizerKeys = | 'windowMenuZoom' | 'allUsersAreRandomly...' | 'cameraPermissionNeeded' - | 'requestsSubtitle' + | 'notificationsSettingsContent' | 'ringing' | 'closedGroupInviteSuccessTitle' | 'accept' @@ -153,7 +154,7 @@ export type LocalizerKeys = | 'removeAccountPasswordDescription' | 'establishingConnection' | 'noModeratorsToRemove' - | 'moreInformation' + | 'youHaveANewFriendRequest' | 'offline' | 'appearanceSettingsTitle' | 'mainMenuView' @@ -223,6 +224,7 @@ export type LocalizerKeys = | 'timerOption_10_seconds' | 'helpSettingsTitle' | 'openMessageRequestInboxDescription' + | 'notificationPreview' | 'noteToSelf' | 'failedToAddAsModerator' | 'disabledDisappearingMessages' @@ -414,7 +416,6 @@ export type LocalizerKeys = | 'youLeftTheGroup' | 'theyChangedTheTimer' | 'userBanned' - | 'youHaveANewFriendRequest' | 'addACaption' | 'timerOption_5_seconds_abbreviated' | 'removeFromModerators' diff --git a/ts/util/notifications.ts b/ts/util/notifications.ts index 2da362886..1696c4ec6 100644 --- a/ts/util/notifications.ts +++ b/ts/util/notifications.ts @@ -1,4 +1,4 @@ -import _ from 'lodash'; +import { debounce, last } from 'lodash'; import { getStatus } from '../notifications'; import { UserSetting } from '../notifications/getStatus'; import { isMacOS } from '../OS'; @@ -41,7 +41,7 @@ let currentNotifications: Array = []; // to manually close them. This introduces a minimum amount of time between calls, // and batches up the quick successive update() calls we get from an incoming // read sync, which might have a number of messages referenced inside of it. -const debouncedUpdate = _.debounce(update, 2000); +const debouncedUpdate = debounce(update, 2000); const fastUpdate = update; function clear() { @@ -156,7 +156,7 @@ function update() { return; } - const lastNotification = _.last(currentNotifications); + const lastNotification = last(currentNotifications); if (!lastNotification) { return; diff --git a/ts/window.d.ts b/ts/window.d.ts index c07742648..c615de956 100644 --- a/ts/window.d.ts +++ b/ts/window.d.ts @@ -31,7 +31,7 @@ declare global { clipboard: any; dcodeIO: any; getSettingValue: (id: string, comparisonValue?: any) => any; - setSettingValue: (id: string, value: any) => void; + setSettingValue: (id: string, value: any) => Promise; i18n: LocalizerType; log: any;