phlux/mattermostest
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Move Settings Window into Modal (#3007)

Browse Source 
* Move Settings Window into modal

* Re-add for E2E tests
This commit is contained in:
Devin Binnie
2024-04-16 09:53:55 -04:00
committed by GitHub
parent d2414c286f
commit 02704177c0
17 changed files with 153 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/renderer/components/SettingsPage.tsx
View File

@@ -7,7 +7,7 @@
import 'renderer/css/settings.css';
import React from 'react';
import {FormCheck, Col, FormGroup, FormText, Container, Row, Button, FormControl} from 'react-bootstrap';
import {FormCheck, Col, FormGroup, FormText, Container, Row, Button, FormControl, Modal} from 'react-bootstrap';
import type {IntlShape} from 'react-intl';
import {FormattedMessage, injectIntl} from 'react-intl';
import type {ActionMeta, MultiValue} from 'react-select';
@@ -25,6 +25,8 @@ const CONFIG_TYPE_UPDATES = 'updates';
const CONFIG_TYPE_APP_OPTIONS = 'appOptions';
type Props = {
show: boolean;
onClose: () => void;
intl: IntlShape;
}
@@ -1228,35 +1230,36 @@ class SettingsPage extends React.PureComponent<Props, State> {
}
return (
<div
className='container-fluid'
style={{
height: '100%',
}}
<Modal
show={this.props.show}
id='settingsModal'
onHide={this.props.onClose}
>
<div
style={{
overflowY: 'auto',
height: '100%',
margin: '0 -15px',
}}
>
<div style={{position: 'relative'}}>
<h1 style={settingsPage.heading}>
<FormattedMessage
id='renderer.components.settingsPage.header'
defaultMessage='Settings'
/>
</h1>
<hr/>
</div>
<Container
className='settingsPage'
<Modal.Header closeButton={true}>
<Modal.Title>
<FormattedMessage
id='renderer.components.settingsPage.header'
defaultMessage='Settings'
/>
</Modal.Title>
</Modal.Header>
<Modal.Body>
<div
style={{
overflowY: 'auto',
height: '100%',
margin: '0 -15px',
}}
>
{waitForIpc}
</Container>
</div>
</div>
<Container
className='settingsPage'
>
{waitForIpc}
</Container>
</div>
</Modal.Body>
</Modal>
);
}
}

23
src/renderer/css/lazy/modals-dark.lazy.css
View File

@@ -2,4 +2,27 @@
body {
background-color: transparent;
}
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__control {
background: #242a30;
}
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__menu {
background: #242a30;
}
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__option {
background: #242a30;
}
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__option:hover {
background: rgba(255, 255, 255, 0.16);
}
#settingsModal .modal-body {
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--light) rgba(255, 255, 255, 0);
}

21
src/renderer/css/lazy/settings-dark.lazy.css
View File

@@ -1,21 +0,0 @@
@import '~bootstrap-dark/src/bootstrap-dark.css';
.ServerListItem:hover {
background: #242a30;
}
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__control {
background: #242a30;
}
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__menu {
background: #242a30;
}
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__option {
background: #242a30;
}
.SettingsPage__spellCheckerLocalesDropdown .SettingsPage__spellCheckerLocalesDropdown__option:hover {
background: rgba(255, 255, 255, 0.16);
}

22
src/renderer/css/settings.css
View File

@@ -41,3 +41,25 @@ body {
margin-left: 16px;
width: 50%;
}
#settingsModal .modal-content {
padding: 16px;
max-height: calc(100vh - 50px);
}
#settingsModal .modal-body {
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
scrollbar-color: var(--dark) rgba(255, 255, 255, 0);
}
#settingsModal .modal-header {
align-items: center;
}
@media (min-width: 862px) {
#settingsModal {
max-width: 786px;
}
}

24
src/renderer/settings.tsx → src/renderer/modals/settings/settings.tsx
View File

@@ -1,4 +1,3 @@
// Copyright (c) 2015-2016 Yuya Ochiai
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
@@ -9,27 +8,24 @@ import 'renderer/css/settings.css';
import React from 'react';
import ReactDOM from 'react-dom';
import darkStyles from 'renderer/css/lazy/settings-dark.lazy.css';
import SettingsPage from '../../components/SettingsPage';
import IntlProvider from '../../intl_provider';
import setupDarkMode from '../darkMode';
import SettingsPage from './components/SettingsPage';
import IntlProvider from './intl_provider';
setupDarkMode();
const setDarkMode = (darkMode: boolean) => {
if (darkMode) {
darkStyles.use();
} else {
darkStyles.unuse();
}
const onClose = () => {
window.desktop.modals.finishModal();
};
window.desktop.onDarkModeChange((darkMode) => setDarkMode(darkMode));
window.desktop.getDarkMode().then(setDarkMode);
const start = async () => {
ReactDOM.render(
(
<IntlProvider>
<SettingsPage/>
<SettingsPage
show={true}
onClose={onClose}
/>
</IntlProvider>
)
,