From d217c76647a96e2b94e0584e8fc89ce4da70982a Mon Sep 17 00:00:00 2001 From: Vincent Date: Wed, 15 Jan 2020 13:49:07 +1100 Subject: [PATCH] mergable settingsview --- _locales/en/messages.json | 4 +- js/background.js | 16 +- preload.js | 5 +- stylesheets/_session.scss | 12 +- ts/components/MainViewController.tsx | 16 +- .../session/LeftPaneSettingSection.tsx | 9 +- ts/components/session/RegistrationTabs.tsx | 4 +- ts/components/session/SessionButton.tsx | 3 +- ts/components/session/SessionConfirm.tsx | 12 +- ts/components/session/SessionRadio.tsx | 17 +- ts/components/session/SessionRadioGroup.tsx | 37 ++-- ts/components/session/SessionSeedModal.tsx | 62 +++--- .../settings/SessionSettingListItem.tsx | 26 +-- .../session/settings/SessionSettings.tsx | 182 +++++++++--------- .../settings/SessionSettingsHeader.tsx | 6 +- ts/global.d.ts | 2 +- 16 files changed, 202 insertions(+), 211 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 534ed9e7a..2e5e9b971 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1843,10 +1843,10 @@ "message": "Dark", "description": "Label text for dark theme" }, - "themeToggleTitle" : { + "themeToggleTitle": { "message": "Light Mode" }, - "themeToggleDescription" : { + "themeToggleDescription": { "message": "Choose the theme best suited to you" }, "noteToSelf": { diff --git a/js/background.js b/js/background.js index 504912f6a..4486f241e 100644 --- a/js/background.js +++ b/js/background.js @@ -907,23 +907,21 @@ }; window.toggleMenuBar = () => { - const newValue = ! window.getSettingValue('hide-menu-bar'); + const newValue = !window.getSettingValue('hide-menu-bar'); window.Events.setHideMenuBar(newValue); - } + }; window.toggleSpellCheck = () => { - const newValue = ! window.getSettingValue('spell-check'); + const newValue = !window.getSettingValue('spell-check'); window.Events.setSpellCheck(newValue); - } + }; window.toggleLinkPreview = () => { - const newValue = ! window.getSettingValue('link-preview-setting'); + const newValue = !window.getSettingValue('link-preview-setting'); window.Events.setLinkPreviewSetting(newValue); - } + }; - window.toggleMediaPermissions= () => { - - } + window.toggleMediaPermissions = () => {}; window.sendGroupInvitations = (serverInfo, pubkeys) => { pubkeys.forEach(async pubkey => { diff --git a/preload.js b/preload.js index 429fa18e2..b5f61fefc 100644 --- a/preload.js +++ b/preload.js @@ -185,18 +185,17 @@ ipc.on('remove-dark-overlay', () => { } }); - window.getSettingValue = (settingID, comparisonValue = null) => { // Comparison value allows you to pull boolean values from any type. // Eg. window.getSettingValue('theme', 'light') // returns 'false' when the value is 'dark'. const settingVal = window.storage.get(settingID); return comparisonValue ? !!settingVal === comparisonValue : settingVal; -} +}; window.setSettingValue = (settingID, value) => { window.storage.put(settingID, value); -} +}; installGetter('device-name', 'getDeviceName'); diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 9c607e285..9be9c8917 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -1011,8 +1011,8 @@ label { font-weight: 100; @include session-color-subtle($session-color-white); } - - &__content{ + + &__content { label { @include session-color-subtle($session-color-white); } @@ -1076,7 +1076,6 @@ label { } } - .session-radio-group fieldset { border: none; margin-left: $session-margin-sm; @@ -1088,7 +1087,7 @@ label { } .session-radio { - input[type="radio"] { + input[type='radio'] { border: 0; opacity: 0; padding: 0; @@ -1101,11 +1100,11 @@ label { } label:before { - content: ""; + content: ''; display: inline-block; width: 0.5em; height: 0.5em; - margin-right: 0.80em; + margin-right: 0.8em; border-radius: 100%; vertical-align: -3px; border: 2px solid rgba($session-color-white, 0.6); @@ -1127,4 +1126,3 @@ label { transition: all $session-transition-duration ease; } } - diff --git a/ts/components/MainViewController.tsx b/ts/components/MainViewController.tsx index 18815160b..db80fa560 100644 --- a/ts/components/MainViewController.tsx +++ b/ts/components/MainViewController.tsx @@ -6,23 +6,21 @@ import { SettingsView, } from './session/settings/SessionSettings'; -export class MainViewController { - constructor() {} - - static renderMessageView() { +export const MainViewController = { + renderMessageView: () => { ReactDOM.render(, document.getElementById('main-view')); - } + }, - static renderSettingsView(category: SessionSettingCategory) { + renderSettingsView: (category: SessionSettingCategory) => { ReactDOM.render( , document.getElementById('main-view') ); - } -} + }, +}; export class MessageView extends React.Component { - render() { + public render() { return (
diff --git a/ts/components/session/LeftPaneSettingSection.tsx b/ts/components/session/LeftPaneSettingSection.tsx index 39c85f160..e10089818 100644 --- a/ts/components/session/LeftPaneSettingSection.tsx +++ b/ts/components/session/LeftPaneSettingSection.tsx @@ -15,15 +15,13 @@ import { SessionIcon, SessionIconSize, SessionIconType } from './icon'; import { SessionSearchInput } from './SessionSearchInput'; import { SessionSettingCategory } from './settings/SessionSettings'; -export interface Props {} - export interface State { settingCategory: SessionSettingCategory; searchQuery: string; } -export class LeftPaneSettingSection extends React.Component { - public constructor(props: Props) { +export class LeftPaneSettingSection extends React.Component { + public constructor(props: any) { super(props); this.state = { @@ -72,7 +70,8 @@ export class LeftPaneSettingSection extends React.Component { 'left-pane-setting-category-list-item', item.id === this.state.settingCategory ? 'active' : '' )} - onClick={() => this.setCategory(item.id)} + role="link" + onClick={(): void => this.setCategory(item.id)} >
{item.title} diff --git a/ts/components/session/RegistrationTabs.tsx b/ts/components/session/RegistrationTabs.tsx index 0c570c7f0..64d68486d 100644 --- a/ts/components/session/RegistrationTabs.tsx +++ b/ts/components/session/RegistrationTabs.tsx @@ -505,7 +505,7 @@ export class RegistrationTabs extends React.Component<{}, State> { private renderTermsConditionAgreement() { // FIXME - console.log( + window.log.info( 'FIXME: add link to our Terms and Conditions and privacy statement' ); @@ -718,7 +718,7 @@ export class RegistrationTabs extends React.Component<{}, State> { ); const onError = async (error: any) => { - window.console.error(error); + window.log.error.error(error); await this.resetRegistration(); }; diff --git a/ts/components/session/SessionButton.tsx b/ts/components/session/SessionButton.tsx index 3c63087b8..9b51f4091 100644 --- a/ts/components/session/SessionButton.tsx +++ b/ts/components/session/SessionButton.tsx @@ -47,6 +47,7 @@ export class SessionButton extends React.PureComponent { const { buttonType, buttonColor, text, disabled } = this.props; const buttonTypes = []; + const onClickFn = disabled ? () => null : this.clickHandler; buttonTypes.push(buttonType); if (buttonType.includes('-outline')) { @@ -62,7 +63,7 @@ export class SessionButton extends React.PureComponent { disabled && 'disabled' )} role="button" - onClick={disabled ? () => null : this.clickHandler} + onClick={onClickFn} > {this.props.children || text}
diff --git a/ts/components/session/SessionConfirm.tsx b/ts/components/session/SessionConfirm.tsx index 8b6dc2f85..561f2127e 100644 --- a/ts/components/session/SessionConfirm.tsx +++ b/ts/components/session/SessionConfirm.tsx @@ -46,6 +46,10 @@ export class SessionConfirm extends React.Component { const cancelText = this.props.cancelText || window.i18n('cancel'); const showHeader = !!this.props.title; + const messageSubText = messageSub + ? 'session-confirm-main-message' + : 'text-subtle'; + return ( { {!showHeader &&
}
- - {message} - + {message} {messageSub && ( {messageSub} diff --git a/ts/components/session/SessionRadio.tsx b/ts/components/session/SessionRadio.tsx index 14436e028..9e6c69814 100644 --- a/ts/components/session/SessionRadio.tsx +++ b/ts/components/session/SessionRadio.tsx @@ -15,32 +15,32 @@ interface State { export class SessionRadio extends React.PureComponent { public static defaultProps = { onClick: () => null, - } + }; constructor(props: any) { super(props); this.clickHandler = this.clickHandler.bind(this); - + this.state = { active: this.props.active, - } + }; } public render() { const active = this.state.active; const { label, group, value } = this.props; - return ( -
+
- +
); } @@ -53,7 +53,6 @@ export class SessionRadio extends React.PureComponent { this.setState({ active: !this.state.active, }); - } } } diff --git a/ts/components/session/SessionRadioGroup.tsx b/ts/components/session/SessionRadioGroup.tsx index 4a256f3a4..fba60a4f5 100644 --- a/ts/components/session/SessionRadioGroup.tsx +++ b/ts/components/session/SessionRadioGroup.tsx @@ -24,30 +24,29 @@ export class SessionRadioGroup extends React.PureComponent { this.state = { activeItem: this.props.initalItem, - } + }; } public render() { const { items, group } = this.props; - + return ( -
+
- { items.map(item => { - return ( - - ); - }) - } + {items.map(item => { + const itemIsActive = item.value === this.state.activeItem; + + return ( + + ); + })}
); @@ -55,7 +54,7 @@ export class SessionRadioGroup extends React.PureComponent { private clickHandler() { if (this.props.onClick) { - this.props.onClick(); + this.props.onClick(); } } } diff --git a/ts/components/session/SessionSeedModal.tsx b/ts/components/session/SessionSeedModal.tsx index 38208a0ce..4342ef95d 100644 --- a/ts/components/session/SessionSeedModal.tsx +++ b/ts/components/session/SessionSeedModal.tsx @@ -40,6 +40,37 @@ export class SessionSeedModal extends React.Component { window.addEventListener('keyup', this.onEnter); } + public render() { + const i18n = window.i18n; + + this.checkHasPassword(); + this.getSeed().ignore(); + + const { onClose } = this.props; + const { hasPassword, passwordValid } = this.state; + const loading = this.state.loadingPassword || this.state.loadingSeed; + + return ( + <> + {!loading && ( + null} + onClose={onClose} + > +
+ + {hasPassword && !passwordValid ? ( + <>{this.renderPasswordView()} + ) : ( + <>{this.renderSeedView()} + )} + + )} + + ); + } + private renderPasswordView() { const maxPasswordLen = 64; const error = this.state.error; @@ -109,37 +140,6 @@ export class SessionSeedModal extends React.Component { ); } - public render() { - const i18n = window.i18n; - - this.checkHasPassword(); - this.getSeed().ignore(); - - const { onClose } = this.props; - const { hasPassword, passwordValid } = this.state; - const loading = this.state.loadingPassword || this.state.loadingSeed; - - return ( - <> - {!loading && ( - null} - onClose={onClose} - > -
- - {hasPassword && !passwordValid ? ( - <>{this.renderPasswordView()} - ) : ( - <>{this.renderSeedView()} - )} - - )} - - ); - } - private confirmPassword() { const passwordHash = this.state.passwordHash; const passwordValue = $('#seed-input-password').val(); diff --git a/ts/components/session/settings/SessionSettingListItem.tsx b/ts/components/session/settings/SessionSettingListItem.tsx index 219695bf6..54d466775 100644 --- a/ts/components/session/settings/SessionSettingListItem.tsx +++ b/ts/components/session/settings/SessionSettingListItem.tsx @@ -20,8 +20,8 @@ interface Props { export class SessionSettingListItem extends React.Component { public static defaultProps = { inline: true, - } - + }; + public constructor(props: Props) { super(props); this.state = {}; @@ -30,20 +30,17 @@ export class SessionSettingListItem extends React.Component { } public render(): JSX.Element { - const { - title, - description, - type, - value, - content, - } = this.props; + const { title, description, type, value, content } = this.props; - const inline = ![SessionSettingType.Options, SessionSettingType.Slider].includes(type); + const inline = ![ + SessionSettingType.Options, + SessionSettingType.Slider, + ].includes(type); return (
-
-
{title}
+
+
{title}
{description && (
@@ -55,7 +52,10 @@ export class SessionSettingListItem extends React.Component {
{type === SessionSettingType.Toggle && (
- +
)} diff --git a/ts/components/session/settings/SessionSettings.tsx b/ts/components/session/settings/SessionSettings.tsx index 3f25d5c89..8719ec966 100644 --- a/ts/components/session/settings/SessionSettings.tsx +++ b/ts/components/session/settings/SessionSettings.tsx @@ -40,88 +40,90 @@ export class SettingsView extends React.Component { // ID corresponds to instalGetter parameters in preload.js // They are NOT arbitrary; add with caution const localSettings = [ - { - id: 'theme-setting', - title: window.i18n('themeToggleTitle'), - description: 'Choose the theme best suited to you', - hidden: true, - comparisonValue: 'light', - type: SessionSettingType.Toggle, - category: SessionSettingCategory.General, - setFn: window.toggleTheme, - content: {}, - }, - { - id: 'hide-menu-bar', - title: window.i18n('hideMenuBarTitle'), - description: window.i18n('hideMenuBarDescription'), - hidden: !Settings.isHideMenuBarSupported(), - type: SessionSettingType.Toggle, - category: SessionSettingCategory.General, - setFn: window.toggleMenuBar, - content: {}, - }, - { - id: 'spell-check', - title: window.i18n('spellCheckTitle'), - description: window.i18n('spellCheckDescription'), - hidden: false, - type: SessionSettingType.Toggle, - category: SessionSettingCategory.General, - setFn: window.toggleSpellCheck, - content: {}, - }, - { - id: 'link-preview-setting', - title: window.i18n('linkPreviewsTitle'), - description: window.i18n('linkPreviewDescription'), - hidden: false, - type: SessionSettingType.Toggle, - category: SessionSettingCategory.General, - setFn: window.toggleLinkPreview, - content: {}, - }, + { + id: 'theme-setting', + title: window.i18n('themeToggleTitle'), + description: 'Choose the theme best suited to you', + hidden: true, + comparisonValue: 'light', + type: SessionSettingType.Toggle, + category: SessionSettingCategory.General, + setFn: window.toggleTheme, + content: {}, + }, + { + id: 'hide-menu-bar', + title: window.i18n('hideMenuBarTitle'), + description: window.i18n('hideMenuBarDescription'), + hidden: !Settings.isHideMenuBarSupported(), + type: SessionSettingType.Toggle, + category: SessionSettingCategory.General, + setFn: window.toggleMenuBar, + content: {}, + }, + { + id: 'spell-check', + title: window.i18n('spellCheckTitle'), + description: window.i18n('spellCheckDescription'), + hidden: false, + type: SessionSettingType.Toggle, + category: SessionSettingCategory.General, + setFn: window.toggleSpellCheck, + content: {}, + }, + { + id: 'link-preview-setting', + title: window.i18n('linkPreviewsTitle'), + description: window.i18n('linkPreviewDescription'), + hidden: false, + type: SessionSettingType.Toggle, + category: SessionSettingCategory.General, + setFn: window.toggleLinkPreview, + content: {}, + }, - { - id: 'notification-setting', - title: window.i18n('notificationSettingsDialog'), - type: SessionSettingType.Options, - category: SessionSettingCategory.Notifications, - setFn: () => this.setOptionsSetting('notification-setting'), - content: { - options: { - group: 'notification-setting', - initalItem: window.getSettingValue('notification-setting'), - items: [{ - label: window.i18n('nameAndMessage'), - value: 'message' - },{ - label: window.i18n('nameOnly'), - value: 'name' - },{ - label: window.i18n('noNameOrMessage'), - value: 'count' - },{ - label: window.i18n('disableNotifications'), - value: 'off' - }], - }, - }, + { + id: 'notification-setting', + title: window.i18n('notificationSettingsDialog'), + type: SessionSettingType.Options, + category: SessionSettingCategory.Notifications, + setFn: () => this.setOptionsSetting('notification-setting'), + content: { + options: { + group: 'notification-setting', + initalItem: window.getSettingValue('notification-setting'), + items: [ + { + label: window.i18n('nameAndMessage'), + value: 'message', + }, + { + label: window.i18n('nameOnly'), + value: 'name', + }, + { + label: window.i18n('noNameOrMessage'), + value: 'count', + }, + { + label: window.i18n('disableNotifications'), + value: 'off', + }, + ], + }, }, - - - { - id: 'media-permissions', - title: window.i18n('mediaPermissionsTitle'), - description: window.i18n('mediaPermissionsDescription'), - hidden: false, - type: SessionSettingType.Toggle, - category: SessionSettingCategory.Permissions, - setFn: window.toggleMediaPermissions, - content: {}, }, - + { + id: 'media-permissions', + title: window.i18n('mediaPermissionsTitle'), + description: window.i18n('mediaPermissionsDescription'), + hidden: false, + type: SessionSettingType.Toggle, + category: SessionSettingCategory.Permissions, + setFn: window.toggleMediaPermissions, + content: {}, + }, ]; return ( @@ -129,21 +131,24 @@ export class SettingsView extends React.Component { {localSettings.map(setting => { const { category } = this.props; const renderSettings = setting.category === category; + const description = setting.description || ''; + const comparisonValue = setting.comparisonValue || null; return (
- {renderSettings && !(setting.hidden) && ( - { - this.updateSetting(setting); + this.updateSetting(setting); }} content={setting.content || undefined} - /> - )} + /> + )}
); })} @@ -165,11 +170,10 @@ export class SettingsView extends React.Component { } public updateSetting(item: any) { - // If there's a custom afterClick function, // execute it instead of automatically updating settings if (item.setFn) { - item.setFn(); + item.setFn(); } else { if (item.type === SessionSettingType.Toggle) { // If no custom afterClick function given, alter values in storage here @@ -178,12 +182,10 @@ export class SettingsView extends React.Component { window.setSettingValue(item.id, newValue); } } - } - public setOptionsSetting(settingID: string){ + public setOptionsSetting(settingID: string) { const selectedValue = $(`#${settingID} .session-radio input:checked`).val(); window.setSettingValue(settingID, selectedValue); } - } diff --git a/ts/components/session/settings/SessionSettingsHeader.tsx b/ts/components/session/settings/SessionSettingsHeader.tsx index 34fa071b5..1337955a9 100644 --- a/ts/components/session/settings/SessionSettingsHeader.tsx +++ b/ts/components/session/settings/SessionSettingsHeader.tsx @@ -12,14 +12,14 @@ export class SettingsHeader extends React.Component { $('.left-pane-setting-section .session-search-input input').focus(); } - render() { + public render() { const category = String(this.props.category); const categoryTitlePrefix = category[0].toUpperCase() + category.substr(1); // Remove 's' on the end to keep words in singular form const categoryTitle = categoryTitlePrefix[categoryTitlePrefix.length - 1] === 's' - ? categoryTitlePrefix.slice(0, -1) + ' Settings' - : categoryTitlePrefix + ' Settings'; + ? `${categoryTitlePrefix.slice(0, -1)} Settings` + : `${categoryTitlePrefix} Settings`; return (
diff --git a/ts/global.d.ts b/ts/global.d.ts index d9f420fa5..9c44ffb1d 100644 --- a/ts/global.d.ts +++ b/ts/global.d.ts @@ -15,6 +15,7 @@ interface Window { setPassword: any; textsecure: any; Session: any; + log: any; i18n: any; friends: any; generateID: any; @@ -31,7 +32,6 @@ interface Window { toggleMediaPermissions: any; getSettingValue: any; setSettingValue: any; - } interface Promise {