MM-45981_Desktop: Add Server Screen: Improve Onboarding screens (#2243)
This commit is contained in:
Julian Mondragón
GitHub
parent
c12dc3d6ae
commit
c3493b09ff
107
e2e/specs/server_management/configure_server_modal.test.js
Normal file
107
e2e/specs/server_management/configure_server_modal.test.js
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
|
||||
const env = require('../../modules/environment');
|
||||
const {asyncSleep} = require('../../modules/utils');
|
||||
|
||||
describe('Configure Server Modal', function desc() {
|
||||
this.timeout(30000);
|
||||
|
||||
beforeEach(async () => {
|
||||
env.createTestUserDataDir();
|
||||
env.cleanTestConfig();
|
||||
await asyncSleep(1000);
|
||||
|
||||
this.app = await env.getApp();
|
||||
|
||||
configureServerModal = this.app.windows().find((window) => window.url().includes('welcomeScreen'));
|
||||
await configureServerModal.click('#getStartedWelcomeScreen');
|
||||
|
||||
await asyncSleep(1000);
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
if (this.app) {
|
||||
await this.app.close();
|
||||
}
|
||||
await env.clearElectronInstances();
|
||||
});
|
||||
|
||||
let configureServerModal;
|
||||
|
||||
it('MM-T5115 should not be valid if no display name has been set', async () => {
|
||||
await configureServerModal.type('#input_name', '');
|
||||
|
||||
const connectButtonDisabled = await configureServerModal.getAttribute('#connectConfigureServer', 'disabled');
|
||||
(connectButtonDisabled === '').should.be.true;
|
||||
});
|
||||
|
||||
it('MM-T5116 should not be valid if no URL has been set', async () => {
|
||||
await configureServerModal.type('#input_url', '');
|
||||
|
||||
const connectButtonDisabled = await configureServerModal.getAttribute('#connectConfigureServer', 'disabled');
|
||||
(connectButtonDisabled === '').should.be.true;
|
||||
});
|
||||
|
||||
it('MM-T5117 should be valid if display name and URL are set', async () => {
|
||||
await configureServerModal.type('#input_name', 'TestTeam');
|
||||
await configureServerModal.type('#input_url', 'http://example.org');
|
||||
|
||||
const connectButtonDisabled = await configureServerModal.getAttribute('#connectConfigureServer', 'disabled');
|
||||
(connectButtonDisabled === '').should.be.false;
|
||||
});
|
||||
|
||||
it('MM-T5118 should not be valid if an invalid URL has been set', async () => {
|
||||
await configureServerModal.type('#input_name', 'TestTeam');
|
||||
await configureServerModal.type('#input_url', 'lorem.ipsum.dolor.sit.amet');
|
||||
|
||||
await configureServerModal.click('#connectConfigureServer');
|
||||
|
||||
await asyncSleep(1000);
|
||||
|
||||
const errorClass = await configureServerModal.getAttribute('#customMessage_url', 'class');
|
||||
errorClass.should.contain('Input___error');
|
||||
|
||||
const connectButtonDisabled = await configureServerModal.getAttribute('#connectConfigureServer', 'disabled');
|
||||
(connectButtonDisabled === '').should.be.true;
|
||||
});
|
||||
|
||||
it('MM-T5119 should add the team to the config file', async () => {
|
||||
await configureServerModal.type('#input_name', 'TestTeam');
|
||||
await configureServerModal.type('#input_url', 'http://example.org');
|
||||
|
||||
await configureServerModal.click('#connectConfigureServer');
|
||||
|
||||
await asyncSleep(1000);
|
||||
|
||||
const existing = Boolean(await this.app.windows().find((window) => window.url().includes('welcomeScreen')));
|
||||
existing.should.be.false;
|
||||
|
||||
const savedConfig = JSON.parse(fs.readFileSync(env.configFilePath, 'utf8'));
|
||||
savedConfig.teams.should.deep.contain({
|
||||
url: 'http://example.org',
|
||||
name: 'TestTeam',
|
||||
index: null,
|
||||
order: 0,
|
||||
tabs: [
|
||||
{
|
||||
name: 'TAB_MESSAGING',
|
||||
order: 0,
|
||||
isOpen: true,
|
||||
},
|
||||
{
|
||||
name: 'TAB_FOCALBOARD',
|
||||
order: 1,
|
||||
},
|
||||
{
|
||||
name: 'TAB_PLAYBOOKS',
|
||||
order: 2,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -133,10 +133,9 @@ describe('Welcome Screen Modal', function desc() {
|
|||
it('MM-T4983 should be able to click the get started button and be redirected to new server modal', async () => {
|
||||
await welcomeScreenModal.click('#getStartedWelcomeScreen');
|
||||
|
||||
const newServerModal = await this.app.waitForEvent('window', {
|
||||
predicate: (window) => window.url().includes('newServer'),
|
||||
});
|
||||
const modalTitle = await newServerModal.innerText('#newServerModal .modal-title');
|
||||
modalTitle.should.equal('Add Server');
|
||||
await asyncSleep(1000);
|
||||
|
||||
const modalCardTitle = await welcomeScreenModal.innerText('.ConfigureServer .ConfigureServer__card-title');
|
||||
modalCardTitle.should.equal('Enter your server details');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
12
i18n/en.json
12
i18n/en.json
|
|
@ -122,6 +122,15 @@
|
|||
"main.windows.mainWindow.minimizeToTray.dialog.title": "Minimize to Tray",
|
||||
"renderer.components.autoSaveIndicator.saved": "Saved",
|
||||
"renderer.components.autoSaveIndicator.saving": "Saving...",
|
||||
"renderer.components.configureServer.cardtitle": "Enter your server details",
|
||||
"renderer.components.configureServer.connect.default": "Connect",
|
||||
"renderer.components.configureServer.connect.saving": "Connecting…",
|
||||
"renderer.components.configureServer.name.info": "The name that will be displayed in your server list",
|
||||
"renderer.components.configureServer.name.placeholder": "Server display name",
|
||||
"renderer.components.configureServer.subtitle": "Set up your first server to connect to your<br></br>team’s communication hub",
|
||||
"renderer.components.configureServer.title": "Let’s connect to a server",
|
||||
"renderer.components.configureServer.url.info": "The URL of your Mattermost server",
|
||||
"renderer.components.configureServer.url.placeholder": "Server URL",
|
||||
"renderer.components.errorView.cannotConnectToAppName": "Cannot connect to {appName}",
|
||||
"renderer.components.errorView.havingTroubleConnecting": "We're having trouble connecting to {appName}. We'll continue to try and establish a connection.",
|
||||
"renderer.components.errorView.refreshThenVerify": "If refreshing this page (Ctrl+R or Command+R) does not work please verify that:",
|
||||
|
|
@ -129,6 +138,7 @@
|
|||
"renderer.components.errorView.troubleshooting.computerIsConnected": "Your computer is connected to the internet.",
|
||||
"renderer.components.errorView.troubleshooting.urlIsCorrect.appNameIsCorrect": "The {appName} URL <link>{url}</link> is correct",
|
||||
"renderer.components.extraBar.back": "Back",
|
||||
"renderer.components.input.required": "This field is required",
|
||||
"renderer.components.mainPage.contextMenu.ariaLabel": "Context menu",
|
||||
"renderer.components.mainPage.downloadingUpdate": "Downloading update. {percentDone}% of {total} @ {speed}/s",
|
||||
"renderer.components.mainPage.titleBar": "Mattermost",
|
||||
|
|
@ -149,6 +159,8 @@
|
|||
"renderer.components.removeServerModal.body": "This will remove the server from your Desktop App but will not delete any of its data - you can add the server back to the app at any time.",
|
||||
"renderer.components.removeServerModal.confirm": "Confirm you wish to remove the {serverName} server?",
|
||||
"renderer.components.removeServerModal.title": "Remove Server",
|
||||
"renderer.components.saveButton.save": "Save",
|
||||
"renderer.components.saveButton.saving": "Saving",
|
||||
"renderer.components.settingsPage.afterRestart": "Setting takes effect after restarting the app.",
|
||||
"renderer.components.settingsPage.appLanguage": "Set app language (beta)",
|
||||
"renderer.components.settingsPage.appLanguage.description": "Chooses the language that the Desktop App will use for menu items and popups. Still in beta, some languages will be missing translation strings.",
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ export const DEVELOPMENT = 'development';
|
|||
|
||||
export const SECOND = 1000;
|
||||
export const RELOAD_INTERVAL = 5 * SECOND;
|
||||
export const MODAL_TRANSITION_TIMEOUT = 400;
|
||||
|
||||
export const MAX_SERVER_RETRIES = 3;
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@ function isValidURI(testURL: string) {
|
|||
return Boolean(isUri(testURL));
|
||||
}
|
||||
|
||||
function startsWithProtocol(testURL: string) {
|
||||
return Boolean((/^https?:\/\/.*/).test(testURL.trim()));
|
||||
}
|
||||
|
||||
function parseURL(inputURL: URL | string) {
|
||||
if (inputURL instanceof URL) {
|
||||
return inputURL;
|
||||
|
|
@ -237,4 +241,5 @@ export default {
|
|||
isChannelExportUrl,
|
||||
isUrlType,
|
||||
cleanPathName,
|
||||
startsWithProtocol,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -246,6 +246,7 @@ describe('main/app/intercom', () => {
|
|||
Config.set.mockImplementation((name, value) => {
|
||||
Config[name] = value;
|
||||
});
|
||||
Config.teams = JSON.parse(JSON.stringify([]));
|
||||
});
|
||||
|
||||
it('should show welcomeScreen modal', async () => {
|
||||
|
|
@ -253,7 +254,7 @@ describe('main/app/intercom', () => {
|
|||
ModalManager.addModal.mockReturnValue(promise);
|
||||
|
||||
handleWelcomeScreenModal();
|
||||
expect(ModalManager.addModal).toHaveBeenCalledWith('welcomeScreen', '/some/index.html', '/some/preload.js', {}, {}, true);
|
||||
expect(ModalManager.addModal).toHaveBeenCalledWith('welcomeScreen', '/some/index.html', '/some/preload.js', [], {}, true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -238,10 +238,16 @@ export function handleWelcomeScreenModal() {
|
|||
if (!mainWindow) {
|
||||
return;
|
||||
}
|
||||
const modalPromise = ModalManager.addModal('welcomeScreen', html, modalPreload, {}, mainWindow, true);
|
||||
const modalPromise = ModalManager.addModal<TeamWithIndex[], Team>('welcomeScreen', html, modalPreload, Config.teams.map((team, index) => ({...team, index})), mainWindow, Config.teams.length === 0);
|
||||
if (modalPromise) {
|
||||
modalPromise.then(() => {
|
||||
handleNewServerModal();
|
||||
modalPromise.then((data) => {
|
||||
const teams = Config.teams;
|
||||
const order = teams.length;
|
||||
const newTeam = getDefaultTeamWithTabsFromTeam({...data, order});
|
||||
teams.push(newTeam);
|
||||
Config.set('teams', teams);
|
||||
updateServerInfos([newTeam]);
|
||||
WindowManager.switchServer(newTeam.name, true);
|
||||
}).catch((e) => {
|
||||
// e is undefined for user cancellation
|
||||
if (e) {
|
||||
|
|
|
|||
198
src/renderer/assets/svg/womanLaptop.svg
Normal file
198
src/renderer/assets/svg/womanLaptop.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 52 KiB |
361
src/renderer/components/ConfigureServer.tsx
Normal file
361
src/renderer/components/ConfigureServer.tsx
Normal file
|
|
@ -0,0 +1,361 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React, {useState, useCallback, useEffect} from 'react';
|
||||
import {useIntl, FormattedMessage} from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import {TeamWithIndex} from 'types/config';
|
||||
|
||||
import womanLaptop from 'renderer/assets/svg/womanLaptop.svg';
|
||||
|
||||
import Header from 'renderer/components/Header';
|
||||
import Input, {STATUS, SIZE} from 'renderer/components/Input';
|
||||
import LoadingBackground from 'renderer/components/LoadingScreen/LoadingBackground';
|
||||
import SaveButton from 'renderer/components/SaveButton/SaveButton';
|
||||
|
||||
import {PING_DOMAIN, PING_DOMAIN_RESPONSE} from 'common/communication';
|
||||
import {MODAL_TRANSITION_TIMEOUT} from 'common/utils/constants';
|
||||
import urlUtils from 'common/utils/url';
|
||||
|
||||
import 'renderer/css/components/Button.scss';
|
||||
import 'renderer/css/components/ConfigureServer.scss';
|
||||
import 'renderer/css/components/LoadingScreen.css';
|
||||
|
||||
type ConfigureServerProps = {
|
||||
currentTeams: TeamWithIndex[];
|
||||
team?: TeamWithIndex;
|
||||
mobileView?: boolean;
|
||||
darkMode?: boolean;
|
||||
messageTitle?: string;
|
||||
messageSubtitle?: string;
|
||||
cardTitle?: string;
|
||||
alternateLinkMessage?: string;
|
||||
alternateLinkText?: string;
|
||||
alternateLinkURL?: string;
|
||||
onConnect: (data: TeamWithIndex) => void;
|
||||
};
|
||||
|
||||
function ConfigureServer({
|
||||
currentTeams,
|
||||
team,
|
||||
mobileView,
|
||||
darkMode,
|
||||
messageTitle,
|
||||
messageSubtitle,
|
||||
cardTitle,
|
||||
alternateLinkMessage,
|
||||
alternateLinkText,
|
||||
alternateLinkURL,
|
||||
onConnect,
|
||||
}: ConfigureServerProps) {
|
||||
const {formatMessage} = useIntl();
|
||||
|
||||
const {
|
||||
name: prevName,
|
||||
url: prevURL,
|
||||
order = 0,
|
||||
index = NaN,
|
||||
} = team || {};
|
||||
|
||||
const [transition, setTransition] = useState<'inFromRight' | 'outToLeft'>();
|
||||
const [name, setName] = useState(prevName || '');
|
||||
const [url, setUrl] = useState(prevURL || '');
|
||||
const [nameError, setNameError] = useState('');
|
||||
const [urlError, setURLError] = useState('');
|
||||
const [showContent, setShowContent] = useState(false);
|
||||
const [waiting, setWaiting] = useState(false);
|
||||
|
||||
const canSave = name && url && !nameError && !urlError;
|
||||
|
||||
useEffect(() => {
|
||||
setTransition('inFromRight');
|
||||
setShowContent(true);
|
||||
}, []);
|
||||
|
||||
const checkProtocolInURL = (checkURL: string): Promise<string> => {
|
||||
if (urlUtils.startsWithProtocol(checkURL)) {
|
||||
return Promise.resolve(checkURL);
|
||||
}
|
||||
|
||||
return new Promise((resolve) => {
|
||||
let eventCount = 0;
|
||||
|
||||
const handler = (event: {data: {type: string; data: string | Error}}) => {
|
||||
let newURL = checkURL;
|
||||
|
||||
if (event.data.type === PING_DOMAIN_RESPONSE) {
|
||||
if (event.data.data instanceof Error) {
|
||||
console.error(`Could not ping url: ${checkURL}`);
|
||||
} else {
|
||||
newURL = `${event.data.data}://${checkURL}`;
|
||||
setUrl(newURL);
|
||||
}
|
||||
|
||||
window.removeEventListener('message', handler);
|
||||
resolve(newURL);
|
||||
} else if (eventCount >= 3) {
|
||||
window.removeEventListener('message', handler);
|
||||
resolve(newURL);
|
||||
}
|
||||
|
||||
eventCount++;
|
||||
};
|
||||
|
||||
window.addEventListener('message', handler);
|
||||
window.postMessage({type: PING_DOMAIN, data: checkURL}, window.location.href);
|
||||
});
|
||||
};
|
||||
|
||||
const validateName = () => {
|
||||
const newName = name.trim();
|
||||
|
||||
if (!newName) {
|
||||
return formatMessage({
|
||||
id: 'renderer.components.newTeamModal.error.nameRequired',
|
||||
defaultMessage: 'Name is required.',
|
||||
});
|
||||
}
|
||||
|
||||
if (currentTeams.find(({name: existingName}) => existingName === newName)) {
|
||||
return formatMessage({
|
||||
id: 'renderer.components.newTeamModal.error.serverNameExists',
|
||||
defaultMessage: 'A server with the same name already exists.',
|
||||
});
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
const validateURL = async (fullURL: string) => {
|
||||
if (!fullURL) {
|
||||
return formatMessage({
|
||||
id: 'renderer.components.newTeamModal.error.urlRequired',
|
||||
defaultMessage: 'URL is required.',
|
||||
});
|
||||
}
|
||||
|
||||
if (!urlUtils.startsWithProtocol(fullURL)) {
|
||||
return formatMessage({
|
||||
id: 'renderer.components.newTeamModal.error.urlNeedsHttp',
|
||||
defaultMessage: 'URL should start with http:// or https://.',
|
||||
});
|
||||
}
|
||||
|
||||
if (!urlUtils.isValidURL(fullURL)) {
|
||||
return formatMessage({
|
||||
id: 'renderer.components.newTeamModal.error.urlIncorrectFormatting',
|
||||
defaultMessage: 'URL is not formatted correctly.',
|
||||
});
|
||||
}
|
||||
|
||||
if (currentTeams.find(({url: existingURL}) => existingURL === fullURL)) {
|
||||
return formatMessage({
|
||||
id: 'renderer.components.newTeamModal.error.serverUrlExists',
|
||||
defaultMessage: 'A server with the same URL already exists.',
|
||||
});
|
||||
}
|
||||
|
||||
return '';
|
||||
};
|
||||
|
||||
const handleNameOnChange = ({target: {value}}: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setName(value);
|
||||
|
||||
if (nameError) {
|
||||
setNameError('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleURLOnChange = ({target: {value}}: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setUrl(value);
|
||||
|
||||
if (urlError) {
|
||||
setURLError('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnSaveButtonClick = (e: React.MouseEvent) => {
|
||||
submit(e);
|
||||
};
|
||||
|
||||
const handleOnCardEnterKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
submit(e);
|
||||
}
|
||||
};
|
||||
|
||||
const submit = async (e: React.MouseEvent | React.KeyboardEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!canSave || waiting) {
|
||||
return;
|
||||
}
|
||||
|
||||
setWaiting(true);
|
||||
|
||||
const nameError = validateName();
|
||||
|
||||
if (nameError) {
|
||||
setTransition(undefined);
|
||||
setNameError(nameError);
|
||||
setWaiting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const fullURL = await checkProtocolInURL(url.trim());
|
||||
const urlError = await validateURL(fullURL);
|
||||
|
||||
if (urlError) {
|
||||
setTransition(undefined);
|
||||
setURLError(urlError);
|
||||
setWaiting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setTransition('outToLeft');
|
||||
|
||||
setTimeout(() => {
|
||||
onConnect({
|
||||
url: fullURL,
|
||||
name,
|
||||
index,
|
||||
order,
|
||||
});
|
||||
}, MODAL_TRANSITION_TIMEOUT);
|
||||
};
|
||||
|
||||
const getAlternateLink = useCallback(() => {
|
||||
if (!alternateLinkURL || !alternateLinkMessage || !alternateLinkText) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classNames('alternate-link', transition, {'alternate-link-inverted': darkMode})}>
|
||||
<span className='alternate-link__message'>
|
||||
{alternateLinkMessage}
|
||||
</span>
|
||||
<a
|
||||
className={classNames(
|
||||
'link-button link-small-button alternate-link__link',
|
||||
{'link-button-inverted': darkMode},
|
||||
)}
|
||||
href={alternateLinkURL}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
>
|
||||
{alternateLinkText}
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}, [transition, darkMode, alternateLinkURL, alternateLinkMessage, alternateLinkText]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'LoadingScreen',
|
||||
{'LoadingScreen--darkMode': darkMode},
|
||||
'ConfigureServer',
|
||||
{'ConfigureServer-inverted': darkMode},
|
||||
)}
|
||||
>
|
||||
<LoadingBackground/>
|
||||
<Header
|
||||
darkMode={darkMode}
|
||||
alternateLink={mobileView ? getAlternateLink() : undefined}
|
||||
/>
|
||||
{showContent && (
|
||||
<div className='ConfigureServer__body'>
|
||||
{!mobileView && getAlternateLink()}
|
||||
<div className='ConfigureServer__content'>
|
||||
<div className={classNames('ConfigureServer__message', transition)}>
|
||||
<h1 className='ConfigureServer__message-title'>
|
||||
{messageTitle || formatMessage({id: 'renderer.components.configureServer.title', defaultMessage: 'Let’s connect to a server'})}
|
||||
</h1>
|
||||
<p className='ConfigureServer__message-subtitle'>
|
||||
{messageSubtitle || (
|
||||
<FormattedMessage
|
||||
id='renderer.components.configureServer.subtitle'
|
||||
defaultMessage='Set up your first server to connect to your<br></br>team’s communication hub'
|
||||
values={{
|
||||
br: (x: React.ReactNode) => (<><br/>{x}</>),
|
||||
}}
|
||||
/>)
|
||||
}
|
||||
</p>
|
||||
<div className='ConfigureServer__message-img'>
|
||||
<img
|
||||
src={womanLaptop}
|
||||
draggable={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classNames('ConfigureServer__card', transition, {'with-error': nameError || urlError})}>
|
||||
<div
|
||||
className='ConfigureServer__card-content'
|
||||
onKeyDown={handleOnCardEnterKeyDown}
|
||||
tabIndex={0}
|
||||
>
|
||||
<p className='ConfigureServer__card-title'>
|
||||
{cardTitle || formatMessage({id: 'renderer.components.configureServer.cardtitle', defaultMessage: 'Enter your server details'})}
|
||||
</p>
|
||||
<div className='ConfigureServer__card-form'>
|
||||
<Input
|
||||
name='name'
|
||||
className='ConfigureServer__card-form-input'
|
||||
type='text'
|
||||
inputSize={SIZE.LARGE}
|
||||
value={name}
|
||||
onChange={handleNameOnChange}
|
||||
customMessage={nameError ? ({
|
||||
type: STATUS.ERROR,
|
||||
value: nameError,
|
||||
}) : ({
|
||||
type: STATUS.INFO,
|
||||
value: formatMessage({id: 'renderer.components.configureServer.name.info', defaultMessage: 'The name that will be displayed in your server list'}),
|
||||
})}
|
||||
placeholder={formatMessage({id: 'renderer.components.configureServer.name.placeholder', defaultMessage: 'Server display name'})}
|
||||
disabled={waiting}
|
||||
darkMode={darkMode}
|
||||
/>
|
||||
<Input
|
||||
name='url'
|
||||
className='ConfigureServer__card-form-input'
|
||||
containerClassName='ConfigureServer__card-form-input-container'
|
||||
type='text'
|
||||
inputSize={SIZE.LARGE}
|
||||
value={url}
|
||||
onChange={handleURLOnChange}
|
||||
customMessage={urlError ? ({
|
||||
type: STATUS.ERROR,
|
||||
value: urlError,
|
||||
}) : ({
|
||||
type: STATUS.INFO,
|
||||
value: formatMessage({id: 'renderer.components.configureServer.url.info', defaultMessage: 'The URL of your Mattermost server'}),
|
||||
})}
|
||||
placeholder={formatMessage({id: 'renderer.components.configureServer.url.placeholder', defaultMessage: 'Server URL'})}
|
||||
disabled={waiting}
|
||||
darkMode={darkMode}
|
||||
/>
|
||||
<SaveButton
|
||||
id='connectConfigureServer'
|
||||
extraClasses='ConfigureServer__card-form-button'
|
||||
saving={waiting}
|
||||
onClick={handleOnSaveButtonClick}
|
||||
defaultMessage={formatMessage({id: 'renderer.components.configureServer.connect.default', defaultMessage: 'Connect'})}
|
||||
savingMessage={formatMessage({id: 'renderer.components.configureServer.connect.saving', defaultMessage: 'Connecting…'})}
|
||||
disabled={!canSave}
|
||||
darkMode={darkMode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className='ConfigureServer__footer'/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ConfigureServer;
|
||||
197
src/renderer/components/Input.tsx
Normal file
197
src/renderer/components/Input.tsx
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React, {useState, useEffect} from 'react';
|
||||
import {useIntl} from 'react-intl';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import 'renderer/css/components/Input.scss';
|
||||
|
||||
export enum STATUS {
|
||||
NONE = 'none',
|
||||
SUCCESS = 'success',
|
||||
INFO = 'info',
|
||||
WARNING = 'warning',
|
||||
ERROR = 'error',
|
||||
}
|
||||
|
||||
export enum SIZE {
|
||||
MEDIUM = 'medium',
|
||||
LARGE = 'large',
|
||||
}
|
||||
|
||||
export type CustomMessageInputType = {
|
||||
type: 'info' | 'error' | 'warning' | 'success';
|
||||
value: string;
|
||||
} | null;
|
||||
|
||||
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
||||
required?: boolean;
|
||||
hasError?: boolean;
|
||||
addon?: React.ReactElement;
|
||||
textPrefix?: string;
|
||||
inputPrefix?: JSX.Element;
|
||||
inputSuffix?: JSX.Element;
|
||||
label?: string;
|
||||
containerClassName?: string;
|
||||
wrapperClassName?: string;
|
||||
inputClassName?: string;
|
||||
limit?: number;
|
||||
useLegend?: boolean;
|
||||
customMessage?: CustomMessageInputType;
|
||||
inputSize?: SIZE;
|
||||
darkMode?: boolean;
|
||||
}
|
||||
|
||||
const Input = React.forwardRef((
|
||||
{
|
||||
name,
|
||||
value,
|
||||
label,
|
||||
placeholder,
|
||||
useLegend = true,
|
||||
className,
|
||||
hasError,
|
||||
required,
|
||||
addon,
|
||||
textPrefix,
|
||||
inputPrefix,
|
||||
inputSuffix,
|
||||
containerClassName,
|
||||
wrapperClassName,
|
||||
inputClassName,
|
||||
limit,
|
||||
customMessage,
|
||||
maxLength,
|
||||
inputSize = SIZE.MEDIUM,
|
||||
disabled,
|
||||
darkMode,
|
||||
onFocus,
|
||||
onBlur,
|
||||
onChange,
|
||||
...otherProps
|
||||
}: InputProps,
|
||||
ref?: React.Ref<HTMLInputElement>,
|
||||
) => {
|
||||
const {formatMessage} = useIntl();
|
||||
|
||||
const [focused, setFocused] = useState(false);
|
||||
const [customInputLabel, setCustomInputLabel] = useState<CustomMessageInputType>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (customMessage !== undefined && customMessage !== null && customMessage.value !== '') {
|
||||
setCustomInputLabel(customMessage);
|
||||
}
|
||||
}, [customMessage]);
|
||||
|
||||
const handleOnFocus = (event: React.FocusEvent<HTMLInputElement>) => {
|
||||
setFocused(true);
|
||||
|
||||
if (onFocus) {
|
||||
onFocus(event);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnBlur = (event: React.FocusEvent<HTMLInputElement>) => {
|
||||
setFocused(false);
|
||||
validateInput();
|
||||
|
||||
if (onBlur) {
|
||||
onBlur(event);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setCustomInputLabel(null);
|
||||
|
||||
if (onChange) {
|
||||
onChange(event);
|
||||
}
|
||||
};
|
||||
|
||||
const validateInput = () => {
|
||||
if (!required || (value !== null && value !== '')) {
|
||||
return;
|
||||
}
|
||||
const validationErrorMsg = formatMessage({id: 'renderer.components.input.required', defaultMessage: 'This field is required'});
|
||||
setCustomInputLabel({type: STATUS.ERROR, value: validationErrorMsg});
|
||||
};
|
||||
|
||||
const showLegend = Boolean(focused || value);
|
||||
const error = customInputLabel?.type === 'error';
|
||||
const limitExceeded = limit && value && !Array.isArray(value) ? value.toString().length - limit : 0;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'Input_container',
|
||||
containerClassName,
|
||||
{
|
||||
disabled,
|
||||
'Input_container-inverted': darkMode,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<fieldset
|
||||
className={classNames('Input_fieldset', className, {
|
||||
Input_fieldset___error: error || hasError || limitExceeded > 0,
|
||||
Input_fieldset___legend: showLegend,
|
||||
})}
|
||||
>
|
||||
{useLegend && (
|
||||
<legend className={classNames('Input_legend', {Input_legend___focus: showLegend})}>
|
||||
{showLegend ? label || placeholder : null}
|
||||
</legend>
|
||||
)}
|
||||
<div className={classNames('Input_wrapper', wrapperClassName)}>
|
||||
{inputPrefix}
|
||||
{textPrefix && <span>{textPrefix}</span>}
|
||||
<input
|
||||
ref={ref}
|
||||
id={`input_${name || ''}`}
|
||||
className={classNames('Input', inputSize, inputClassName, {Input__focus: showLegend})}
|
||||
value={value}
|
||||
placeholder={focused ? (label && placeholder) || label : label || placeholder}
|
||||
name={name}
|
||||
disabled={disabled}
|
||||
{...otherProps}
|
||||
maxLength={limit ? undefined : maxLength}
|
||||
onFocus={handleOnFocus}
|
||||
onBlur={handleOnBlur}
|
||||
onChange={handleOnChange}
|
||||
/>
|
||||
{limitExceeded > 0 && (
|
||||
<span className='Input_limit-exceeded'>
|
||||
{'-'}{limitExceeded}
|
||||
</span>
|
||||
)}
|
||||
{inputSuffix}
|
||||
</div>
|
||||
{addon}
|
||||
</fieldset>
|
||||
{customInputLabel && (
|
||||
<div
|
||||
id={`customMessage_${name || ''}`}
|
||||
className={`Input___customMessage Input___${customInputLabel.type}`}
|
||||
>
|
||||
{customInputLabel.type !== STATUS.INFO && (
|
||||
<i
|
||||
className={classNames(`icon ${customInputLabel.type}`, {
|
||||
'icon-alert-outline': customInputLabel.type === STATUS.WARNING,
|
||||
'icon-alert-circle-outline': customInputLabel.type === STATUS.ERROR,
|
||||
'icon-check': customInputLabel.type === STATUS.SUCCESS,
|
||||
|
||||
// No icon wanted for info in desktop. Kept for further reference with Input component in webapp
|
||||
// 'icon-information-outline': customInputLabel.type === STATUS.INFO,
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
<span>{customInputLabel.value}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default Input;
|
||||
28
src/renderer/components/SaveButton/LoadingSpinner.tsx
Normal file
28
src/renderer/components/SaveButton/LoadingSpinner.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import 'renderer/css/components/LoadingSpinner.scss';
|
||||
|
||||
type Props = {
|
||||
text: React.ReactNode;
|
||||
}
|
||||
|
||||
export default class LoadingSpinner extends React.PureComponent<Props> {
|
||||
public static defaultProps: Props = {
|
||||
text: null,
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<span
|
||||
id='loadingSpinner'
|
||||
className={'LoadingSpinner' + (this.props.text ? ' with-text' : '')}
|
||||
>
|
||||
<span className='spinner'/>
|
||||
{this.props.text}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
29
src/renderer/components/SaveButton/LoadingWrapper.tsx
Normal file
29
src/renderer/components/SaveButton/LoadingWrapper.tsx
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import LoadingSpinner from './LoadingSpinner';
|
||||
|
||||
type Props = {
|
||||
loading: boolean;
|
||||
text: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default class LoadingWrapper extends React.PureComponent<Props> {
|
||||
public static defaultProps: Props = {
|
||||
loading: true,
|
||||
text: null,
|
||||
children: null,
|
||||
}
|
||||
|
||||
public render() {
|
||||
const {text, loading, children} = this.props;
|
||||
if (!loading) {
|
||||
return children;
|
||||
}
|
||||
|
||||
return <LoadingSpinner text={text}/>;
|
||||
}
|
||||
}
|
||||
74
src/renderer/components/SaveButton/SaveButton.tsx
Normal file
74
src/renderer/components/SaveButton/SaveButton.tsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import {FormattedMessage} from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import LoadingWrapper from './LoadingWrapper';
|
||||
|
||||
import 'renderer/css/components/Button.scss';
|
||||
|
||||
type Props = {
|
||||
saving: boolean;
|
||||
disabled?: boolean;
|
||||
id?: string;
|
||||
onClick: (e: React.MouseEvent) => void;
|
||||
savingMessage?: React.ReactNode;
|
||||
defaultMessage?: React.ReactNode;
|
||||
extraClasses?: string;
|
||||
darkMode?: boolean;
|
||||
}
|
||||
|
||||
const SaveButton = ({
|
||||
id,
|
||||
defaultMessage = (
|
||||
<FormattedMessage
|
||||
id='renderer.components.saveButton.save'
|
||||
defaultMessage='Save'
|
||||
/>
|
||||
),
|
||||
disabled,
|
||||
extraClasses,
|
||||
saving,
|
||||
savingMessage = (
|
||||
<FormattedMessage
|
||||
id='renderer.components.saveButton.saving'
|
||||
defaultMessage='Saving'
|
||||
/>
|
||||
),
|
||||
darkMode,
|
||||
onClick,
|
||||
}: Props) => {
|
||||
const handleOnClick = (e: React.MouseEvent) => {
|
||||
if (saving) {
|
||||
return;
|
||||
}
|
||||
|
||||
onClick(e);
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
id={id}
|
||||
className={classNames(
|
||||
'primary-button primary-large-button',
|
||||
{
|
||||
'primary-button-inverted': darkMode,
|
||||
},
|
||||
extraClasses && extraClasses,
|
||||
)}
|
||||
disabled={disabled}
|
||||
onClick={handleOnClick}
|
||||
>
|
||||
<LoadingWrapper
|
||||
loading={saving}
|
||||
text={savingMessage}
|
||||
>
|
||||
<span>{defaultMessage}</span>
|
||||
</LoadingWrapper>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default SaveButton;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React, {useMemo} from 'react';
|
||||
import React, {useState, useEffect, useMemo} from 'react';
|
||||
import {useIntl, FormattedMessage} from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
|
||||
|
|
@ -14,6 +14,8 @@ import Carousel from 'renderer/components/Carousel';
|
|||
import Header from 'renderer/components/Header';
|
||||
import LoadingBackground from 'renderer/components/LoadingScreen/LoadingBackground';
|
||||
|
||||
import {MODAL_TRANSITION_TIMEOUT} from 'common/utils/constants';
|
||||
|
||||
import WelcomeScreenSlide from './WelcomeScreenSlide';
|
||||
|
||||
import 'renderer/css/components/Button.scss';
|
||||
|
|
@ -31,6 +33,13 @@ function WelcomeScreen({
|
|||
}: WelcomeScreenProps) {
|
||||
const {formatMessage} = useIntl();
|
||||
|
||||
const [transition, setTransition] = useState<'outToLeft'>();
|
||||
const [showContent, setShowContent] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setShowContent(true);
|
||||
}, []);
|
||||
|
||||
const slides = useMemo(() => [
|
||||
{
|
||||
key: 'welcome',
|
||||
|
|
@ -97,7 +106,11 @@ function WelcomeScreen({
|
|||
], []);
|
||||
|
||||
const handleOnGetStartedClick = () => {
|
||||
onGetStarted();
|
||||
setTransition('outToLeft');
|
||||
|
||||
setTimeout(() => {
|
||||
onGetStarted();
|
||||
}, MODAL_TRANSITION_TIMEOUT);
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -110,37 +123,39 @@ function WelcomeScreen({
|
|||
>
|
||||
<LoadingBackground/>
|
||||
<Header darkMode={darkMode}/>
|
||||
<div className='WelcomeScreen__body'>
|
||||
<div className='WelcomeScreen__content'>
|
||||
<Carousel
|
||||
slides={slides.map(({key, title, subtitle, image, main}) => ({
|
||||
key,
|
||||
content: (
|
||||
<WelcomeScreenSlide
|
||||
key={key}
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
image={image}
|
||||
isMain={main}
|
||||
darkMode={darkMode}
|
||||
/>
|
||||
),
|
||||
}))}
|
||||
darkMode={darkMode}
|
||||
/>
|
||||
<button
|
||||
id='getStartedWelcomeScreen'
|
||||
className={classNames(
|
||||
'WelcomeScreen__button',
|
||||
'primary-button primary-medium-button',
|
||||
{'primary-button-inverted': darkMode},
|
||||
)}
|
||||
onClick={handleOnGetStartedClick}
|
||||
>
|
||||
{formatMessage({id: 'renderer.components.welcomeScreen.button.getStarted', defaultMessage: 'Get Started'})}
|
||||
</button>
|
||||
{showContent && (
|
||||
<div className={classNames('WelcomeScreen__body', transition)}>
|
||||
<div className='WelcomeScreen__content'>
|
||||
<Carousel
|
||||
slides={slides.map(({key, title, subtitle, image, main}) => ({
|
||||
key,
|
||||
content: (
|
||||
<WelcomeScreenSlide
|
||||
key={key}
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
image={image}
|
||||
isMain={main}
|
||||
darkMode={darkMode}
|
||||
/>
|
||||
),
|
||||
}))}
|
||||
darkMode={darkMode}
|
||||
/>
|
||||
<button
|
||||
id='getStartedWelcomeScreen'
|
||||
className={classNames(
|
||||
'WelcomeScreen__button',
|
||||
'primary-button primary-medium-button',
|
||||
{'primary-button-inverted': darkMode},
|
||||
)}
|
||||
onClick={handleOnGetStartedClick}
|
||||
>
|
||||
{formatMessage({id: 'renderer.components.welcomeScreen.button.getStarted', defaultMessage: 'Get Started'})}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className='WelcomeScreen__footer'/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,27 @@
|
|||
:root {
|
||||
--away-indicator-dark: #c79e3f;
|
||||
--button-bg: #166de0;
|
||||
--button-color: #fff;
|
||||
--center-channel-bg: #fff;
|
||||
--center-channel-color: #3d3c40;
|
||||
--center-channel-text: #3f4350;
|
||||
--error-text: #d24b4e;
|
||||
--link-color: #2389d7;
|
||||
--online-indicator: #06d6a0;
|
||||
--sidebar-text-active-border: #579eff;
|
||||
--denim-button-bg: #1c58d9;
|
||||
--denim-sidebar-active-border: #5d89ea;
|
||||
--denim-sidebar-header-bg: #192A4D;
|
||||
--title-color-indigo-500: #1e325c;
|
||||
|
||||
--button-color-rgb: 255, 255, 255;
|
||||
--center-channel-color-rgb: 61, 60, 64;
|
||||
--center-channel-text-rgb: 63, 67, 80;
|
||||
--link-color-inverted-rgb: 129, 163, 239;
|
||||
--denim-button-bg-rgb: 28, 88, 217;
|
||||
--denim-sidebar-header-bg-rgb: 25, 42, 77;
|
||||
--secondary-blue-rgb: 34, 64, 109;
|
||||
--onyx-center-channel-text-rgb: 221, 223, 228;
|
||||
|
||||
--elevation-5: 0 12px 32px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
|
|
|||
81
src/renderer/css/_mixins.scss
Normal file
81
src/renderer/css/_mixins.scss
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
@mixin inFromRight($start) {
|
||||
@keyframes inFromRight#{$start} {
|
||||
0% {
|
||||
transform: translateX(#{$start + '%'});
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin inFromLeft($start) {
|
||||
@keyframes inFromLeft#{$start} {
|
||||
0% {
|
||||
transform: translateX(#{'-' + $start + '%'});
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin outToLeft($end) {
|
||||
@keyframes outToLeft#{$end} {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(#{'-' + $end + '%'});
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin outToRight($end) {
|
||||
@keyframes outToRight#{$end} {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(#{$end + '%'});
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin shake-horizontally {
|
||||
animation: shake-horizontally 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
@keyframes shake-horizontally {
|
||||
10%,
|
||||
90% {
|
||||
transform: translate3d(-1px, 0, 0);
|
||||
}
|
||||
|
||||
20%,
|
||||
80% {
|
||||
transform: translate3d(2px, 0, 0);
|
||||
}
|
||||
|
||||
30%,
|
||||
50%,
|
||||
70% {
|
||||
transform: translate3d(-4px, 0, 0);
|
||||
}
|
||||
|
||||
40%,
|
||||
60% {
|
||||
transform: translate3d(4px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -58,8 +58,8 @@
|
|||
}
|
||||
|
||||
&:disabled {
|
||||
background: rgba(var(--center-channel-text-rgb), 0.08);
|
||||
color: rgba(var(--center-channel-text-rgb), 0.32);
|
||||
background: rgba(var(--button-color-rgb), 0.08);
|
||||
color: rgba(var(--button-color-rgb), 0.32);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -85,6 +85,50 @@
|
|||
}
|
||||
}
|
||||
|
||||
.link-button {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
color: var(--link-color);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: rgba(var(--center-channel-color-rgb), 0.32);
|
||||
cursor: not-allowed;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.link-button-inverted {
|
||||
color: rgb(var(--link-color-inverted-rgb));
|
||||
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: var(--denim-sidebar-active-border);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: rgba(var(--link-color-inverted-rgb), 0.32);
|
||||
}
|
||||
}
|
||||
|
||||
.link-small-button {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '../_mixins.scss';
|
||||
|
||||
.Carousel {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
|
@ -34,61 +36,25 @@
|
|||
}
|
||||
|
||||
.inFromRight {
|
||||
animation: inFromRight 0.4s ease-in-out;
|
||||
@include inFromRight(30);
|
||||
|
||||
animation: inFromRight30 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.inFromLeft {
|
||||
animation: inFromLeft 0.4s ease-in-out;
|
||||
@include inFromLeft(30);
|
||||
|
||||
animation: inFromLeft30 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.outToRight {
|
||||
animation: outToRight 0.4s ease-in-out;
|
||||
@include outToRight(30);
|
||||
|
||||
animation: outToRight30 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
.outToLeft {
|
||||
animation: outToLeft 0.4s ease-in-out;
|
||||
}
|
||||
@include outToLeft(30);
|
||||
|
||||
@keyframes inFromRight {
|
||||
0% {
|
||||
transform: translateX(30%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
animation: outToLeft30 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes inFromLeft {
|
||||
0% {
|
||||
transform: translateX(-30%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes outToRight {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(30%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes outToLeft {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-30%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
341
src/renderer/css/components/ConfigureServer.scss
Normal file
341
src/renderer/css/components/ConfigureServer.scss
Normal file
|
|
@ -0,0 +1,341 @@
|
|||
@import url("../_css_variables.scss");
|
||||
@import url("../fonts.css");
|
||||
@import '../_mixins.scss';
|
||||
|
||||
.alternate-link {
|
||||
margin-left: auto;
|
||||
margin-bottom: 18px;
|
||||
font-family: 'Open Sans';
|
||||
|
||||
.alternate-link__message {
|
||||
color: var(--center-channel-text);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.alternate-link__link {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
&.inFromRight {
|
||||
@include inFromRight(40);
|
||||
|
||||
animation: inFromRight40 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
&.outToLeft {
|
||||
@include outToLeft(40);
|
||||
|
||||
animation: outToLeft40 0.4s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.alternate-link-inverted {
|
||||
.alternate-link__message {
|
||||
color: var(--button-color);
|
||||
}
|
||||
}
|
||||
|
||||
.ConfigureServer {
|
||||
flex-direction: column;
|
||||
z-index: 20;
|
||||
|
||||
* {
|
||||
z-index: 21;
|
||||
}
|
||||
|
||||
.ConfigureServer__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
font-family: 'Open Sans';
|
||||
|
||||
.ConfigureServer__content {
|
||||
display: flex;
|
||||
height: fit-content;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 42px;
|
||||
|
||||
.ConfigureServer__message {
|
||||
display: flex;
|
||||
width: 540px;
|
||||
flex-flow: column;
|
||||
align-self: flex-start;
|
||||
z-index: 22;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
.ConfigureServer__message-title {
|
||||
padding-right: 60px;
|
||||
color: var(--title-color-indigo-500);
|
||||
font-family: 'Metropolis';
|
||||
font-size: 80px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.05em;
|
||||
line-height: 88px;
|
||||
}
|
||||
|
||||
.ConfigureServer__message-subtitle {
|
||||
color: rgba(var(--center-channel-text-rgb), 0.72);
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.ConfigureServer__message-img {
|
||||
position: relative;
|
||||
align-self: flex-end;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
bottom: -230px;
|
||||
left: -225px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.inFromRight {
|
||||
.ConfigureServer__message-title,
|
||||
.ConfigureServer__message-subtitle {
|
||||
@include inFromRight(30);
|
||||
|
||||
animation: inFromRight30 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.ConfigureServer__message-img img {
|
||||
@include inFromRight(70);
|
||||
|
||||
animation: inFromRight70 0.5s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.outToLeft {
|
||||
.ConfigureServer__message-title,
|
||||
.ConfigureServer__message-subtitle {
|
||||
@include outToLeft(30);
|
||||
|
||||
animation: outToLeft30 0.4s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ConfigureServer__message-img img {
|
||||
@include outToLeft(70);
|
||||
|
||||
animation: outToLeft70 0.4s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ConfigureServer__card {
|
||||
width: 540px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(var(--center-channel-text-rgb), 0.08);
|
||||
margin-left: 60px;
|
||||
background-color: var(--center-channel-bg);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--elevation-5);
|
||||
|
||||
.ConfigureServer__card-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-flow: column;
|
||||
padding: 48px 56px;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.ConfigureServer__card-title {
|
||||
color: var(--center-channel-text);
|
||||
font-family: 'Metropolis';
|
||||
font-size: 22px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
line-height: 28px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.ConfigureServer__card-form {
|
||||
.ConfigureServer__card-form-input-container {
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.ConfigureServer__card-form-button {
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.inFromRight {
|
||||
@include inFromRight(40);
|
||||
|
||||
animation: inFromRight40 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
&.outToLeft {
|
||||
@include outToLeft(40);
|
||||
|
||||
animation: outToLeft40 0.4s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.with-error {
|
||||
@include shake-horizontally;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ConfigureServer__footer {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.ConfigureServer-inverted {
|
||||
.ConfigureServer__body .ConfigureServer__content {
|
||||
.ConfigureServer__message {
|
||||
.ConfigureServer__message-title {
|
||||
color: var(--button-color);
|
||||
}
|
||||
|
||||
.ConfigureServer__message-subtitle {
|
||||
color: rgba(var(--button-color-rgb), 0.72);
|
||||
}
|
||||
}
|
||||
|
||||
.ConfigureServer__card {
|
||||
border: 1px solid rgba(var(--button-color-rgb), 0.08);
|
||||
background-color: var(--denim-sidebar-header-bg);
|
||||
|
||||
.ConfigureServer__card-content .ConfigureServer__card-title {
|
||||
color: var(--button-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1680px) {
|
||||
.ConfigureServer {
|
||||
.ConfigureServer__body .ConfigureServer__content {
|
||||
.ConfigureServer__message,
|
||||
.ConfigureServer__card {
|
||||
width: 610px;
|
||||
}
|
||||
|
||||
.ConfigureServer__message .ConfigureServer__message-title {
|
||||
padding-right: 130px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1199px) {
|
||||
.alternate-link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ConfigureServer {
|
||||
.ConfigureServer__body .ConfigureServer__content {
|
||||
flex-direction: column;
|
||||
|
||||
.ConfigureServer__message,
|
||||
.ConfigureServer__card {
|
||||
width: 640px;
|
||||
}
|
||||
|
||||
.ConfigureServer__message {
|
||||
align-self: center;
|
||||
padding: 24px;
|
||||
|
||||
.ConfigureServer__message-title {
|
||||
padding-right: 210px;
|
||||
font-size: 64px;
|
||||
line-height: 76px;
|
||||
}
|
||||
|
||||
.ConfigureServer__message-subtitle {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ConfigureServer__message-img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ConfigureServer__card {
|
||||
border: none;
|
||||
margin: 0;
|
||||
background-color: unset;
|
||||
box-shadow: none;
|
||||
|
||||
.ConfigureServer__card-content {
|
||||
padding: 16px 24px;
|
||||
|
||||
.ConfigureServer__card-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ConfigureServer__card-form {
|
||||
.ConfigureServer__card-form-input {
|
||||
margin-top: 0;
|
||||
background-color: var(--center-channel-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ConfigureServer-inverted {
|
||||
.ConfigureServer__body .ConfigureServer__content .ConfigureServer__card {
|
||||
.ConfigureServer__card-content .ConfigureServer__card-form {
|
||||
.ConfigureServer__card-form-input {
|
||||
background-color: var(--denim-sidebar-header-bg);
|
||||
}
|
||||
|
||||
.disabled .ConfigureServer__card-form-input {
|
||||
background-color: rgba(var(--denim-sidebar-header-bg-rgb), 0.54);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 699px) {
|
||||
.ConfigureServer {
|
||||
.ConfigureServer__body {
|
||||
margin: auto 0;
|
||||
|
||||
.ConfigureServer__content {
|
||||
min-width: 375px;
|
||||
|
||||
.ConfigureServer__card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ConfigureServer__message {
|
||||
width: auto;
|
||||
align-self: flex-start;
|
||||
padding: 24px;
|
||||
|
||||
.ConfigureServer__message-title {
|
||||
max-width: 271px;
|
||||
padding-right: 0;
|
||||
font-size: 45px;
|
||||
line-height: 56px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
254
src/renderer/css/components/Input.scss
Normal file
254
src/renderer/css/components/Input.scss
Normal file
|
|
@ -0,0 +1,254 @@
|
|||
@import url("../_css_variables.scss");
|
||||
@import '~@mattermost/compass-icons/css/compass-icons.css';
|
||||
|
||||
.error {
|
||||
color: var(--error-text);
|
||||
}
|
||||
|
||||
.info {
|
||||
color: var(--sidebar-text-active-border);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--away-indicator-dark);
|
||||
}
|
||||
|
||||
.success {
|
||||
color: var(--online-indicator);
|
||||
}
|
||||
|
||||
.Input_container {
|
||||
width: 100%;
|
||||
|
||||
.Input {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
color: var(--center-channel-color);
|
||||
background-color: unset;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
outline: 0;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(var(--center-channel-text-rgb), 0.64);
|
||||
}
|
||||
|
||||
&.Input__focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.large {
|
||||
height: 42px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.Input_wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 0 16px;
|
||||
margin: 2px 0;
|
||||
color: rgba(var(--center-channel-color-rgb), 0.56);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.Input_limit-exceeded {
|
||||
align-self: center;
|
||||
margin-left: 16px;
|
||||
color: var(--error-text);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.Input-border-error {
|
||||
border-color: var(--error-text);
|
||||
}
|
||||
|
||||
.Input___error,
|
||||
.Input___customMessage,
|
||||
.Input___info {
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
|
||||
i {
|
||||
height: 14px;
|
||||
align-self: baseline;
|
||||
margin-right: 7px;
|
||||
font-size: 14px;
|
||||
|
||||
&::before {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Input___error {
|
||||
@extend .error;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.Input___warning {
|
||||
@extend .warning;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.Input___success {
|
||||
@extend .success;
|
||||
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.Input___info {
|
||||
color: rgba(var(--center-channel-color-rgb), 0.56);
|
||||
|
||||
> span.valid {
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.Input_fieldset {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1px;
|
||||
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
|
||||
border-radius: 4px;
|
||||
color: rgba(var(--secondary-blue-rgb), 0.4);
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(var(--center-channel-color-rgb), 0.48);
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--button-bg);
|
||||
box-shadow: inset 0 0 0 1px var(--button-bg);
|
||||
color: var(--button-bg);
|
||||
|
||||
.Input_legend {
|
||||
color: var(--button-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Input_legend {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: -8px;
|
||||
display: flex;
|
||||
width: auto;
|
||||
padding: 0 4px;
|
||||
border: none;
|
||||
margin-left: 12px;
|
||||
background-color: var(--center-channel-bg);
|
||||
color: rgba(var(--center-channel-color-rgb), 0.64);
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
transition-duration: 0.15s;
|
||||
transition-property: opacity, transform;
|
||||
transition-timing-function: ease-in-out;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.Input_legend___focus {
|
||||
padding: 0 4px;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.Input_fieldset {
|
||||
border-color: rgba(var(--center-channel-color-rgb), 0.16);
|
||||
background-color: rgba(var(--center-channel-color-rgb), 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Input_container-inverted {
|
||||
.Input {
|
||||
color: var(--button-color);
|
||||
background-color: unset;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(var(--button-color-rgb), 0.56);
|
||||
}
|
||||
}
|
||||
|
||||
.Input_wrapper {
|
||||
color: rgba(var(--button-color-rgb), 0.56);
|
||||
}
|
||||
|
||||
.Input___info {
|
||||
color: rgba(var(--button-color-rgb), 0.56);
|
||||
}
|
||||
|
||||
.Input_fieldset {
|
||||
background-color: var(--denim-sidebar-header-bg);
|
||||
border: 1px solid rgba(var(--onyx-center-channel-text-rgb), 0.16);
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(var(--onyx-center-channel-text-rgb), 0.48);
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--onyx-center-channel-text-rgb);
|
||||
box-shadow: inset 0 0 0 1px var(--onyx-center-channel-text-rgb);
|
||||
color: var(--button-color);
|
||||
|
||||
.Input_legend {
|
||||
color: var(--button-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Input_legend {
|
||||
background-color: var(--denim-sidebar-header-bg);
|
||||
color: rgba(var(--button-color-rgb), 0.64);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.Input_fieldset {
|
||||
background: rgba(var(--button-color-rgb), 0.08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Input_container {
|
||||
.Input_fieldset___error {
|
||||
border-color: var(--error-text);
|
||||
color: var(--error-text);
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--error-text);
|
||||
box-shadow: inset 0 0 0 1px var(--error-text);
|
||||
color: var(--error-text);
|
||||
|
||||
.Input_legend {
|
||||
color: var(--error-text);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--error-text);
|
||||
}
|
||||
|
||||
.Input_legend {
|
||||
color: var(--error-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
36
src/renderer/css/components/LoadingSpinner.scss
Normal file
36
src/renderer/css/components/LoadingSpinner.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
@import url("../fonts.css");
|
||||
|
||||
@keyframes spin-fw {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
.LoadingSpinner {
|
||||
.spinner {
|
||||
margin-right: 3px;
|
||||
animation: spin-fw 1s infinite steps(8);
|
||||
width: 1.28571429em;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
font-family: 'FontAwesome';
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
&::before {
|
||||
content: '\f110';
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
&.with-text {
|
||||
.spinner {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@import '../_mixins.scss';
|
||||
|
||||
.WelcomeScreen {
|
||||
flex-direction: column;
|
||||
z-index: 20;
|
||||
|
|
@ -25,6 +27,13 @@
|
|||
margin-top: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
&.outToLeft {
|
||||
@include outToLeft(40);
|
||||
|
||||
animation: outToLeft40 0.4s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.WelcomeScreen__footer {
|
||||
|
|
|
|||
|
|
@ -81,3 +81,10 @@
|
|||
font-weight: 300;
|
||||
src: url('../../assets/fonts/Metropolis-LightItalic.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url('../../assets/fonts/fontawesome-webfont.woff') format('woff');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
import React, {useEffect, useState} from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import {TeamWithIndex} from 'types/config';
|
||||
import {ModalMessage} from 'types/modals';
|
||||
|
||||
import {
|
||||
|
|
@ -11,22 +12,37 @@ import {
|
|||
GET_MODAL_UNCLOSEABLE,
|
||||
GET_DARK_MODE,
|
||||
DARK_MODE_CHANGE,
|
||||
MODAL_INFO,
|
||||
} from 'common/communication';
|
||||
import IntlProvider from 'renderer/intl_provider';
|
||||
import WelcomeScreen from '../../components/WelcomeScreen';
|
||||
import ConfigureServer from '../../components/ConfigureServer';
|
||||
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
const onGetStarted = () => {
|
||||
window.postMessage({type: MODAL_RESULT}, window.location.href);
|
||||
const MOBILE_SCREEN_WIDTH = 1200;
|
||||
|
||||
const onConnect = (data: TeamWithIndex) => {
|
||||
window.postMessage({type: MODAL_RESULT, data}, window.location.href);
|
||||
};
|
||||
|
||||
const WelcomeScreenModalWrapper = () => {
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
const [getStarted, setGetStarted] = useState(false);
|
||||
const [mobileView, setMobileView] = useState(false);
|
||||
const [currentTeams, setCurrentTeams] = useState<TeamWithIndex[]>([]);
|
||||
|
||||
const handleWindowResize = () => {
|
||||
setMobileView(window.innerWidth < MOBILE_SCREEN_WIDTH);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
window.postMessage({type: GET_MODAL_UNCLOSEABLE}, window.location.href);
|
||||
window.postMessage({type: GET_DARK_MODE}, window.location.href);
|
||||
|
||||
handleWindowResize();
|
||||
|
||||
window.addEventListener('resize', handleWindowResize);
|
||||
window.addEventListener('message', handleMessageEvent);
|
||||
|
||||
return () => {
|
||||
|
|
@ -34,23 +50,43 @@ const WelcomeScreenModalWrapper = () => {
|
|||
};
|
||||
}, []);
|
||||
|
||||
const handleMessageEvent = (event: {data: ModalMessage<boolean>}) => {
|
||||
if (event.data.type === DARK_MODE_CHANGE) {
|
||||
setDarkMode(event.data.data);
|
||||
const handleMessageEvent = (event: {data: ModalMessage<boolean | Electron.Rectangle | TeamWithIndex[]>}) => {
|
||||
switch (event.data.type) {
|
||||
case DARK_MODE_CHANGE:
|
||||
setDarkMode(event.data.data as boolean);
|
||||
break;
|
||||
case MODAL_INFO:
|
||||
setCurrentTeams(event.data.data as TeamWithIndex[]);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const onGetStarted = () => {
|
||||
setGetStarted(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<IntlProvider>
|
||||
<WelcomeScreen
|
||||
darkMode={darkMode}
|
||||
onGetStarted={onGetStarted}
|
||||
/>
|
||||
{getStarted ? (
|
||||
<ConfigureServer
|
||||
mobileView={mobileView}
|
||||
darkMode={darkMode}
|
||||
currentTeams={currentTeams}
|
||||
onConnect={onConnect}
|
||||
/>
|
||||
) : (
|
||||
<WelcomeScreen
|
||||
darkMode={darkMode}
|
||||
onGetStarted={onGetStarted}
|
||||
/>
|
||||
)}
|
||||
</IntlProvider>
|
||||
);
|
||||
};
|
||||
|
||||
const start = async () => {
|
||||
const start = () => {
|
||||
ReactDOM.render(
|
||||
<WelcomeScreenModalWrapper/>,
|
||||
document.getElementById('app'),
|
||||
|
|
|
|||
Loading…
Reference in a new issue