feat: added theming to the about page
This commit is contained in:
William Grant
parent
59e29a38d4
commit
adf370997e
32
about.html
32
about.html
|
|
@ -15,40 +15,10 @@
|
|||
style-src 'self' 'unsafe-inline';"
|
||||
/>
|
||||
<link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
background-color: var(--background-primary-color);
|
||||
color: var(--text-primary-color);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 1em;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-primary-color);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img src="images/session/session_icon.png" width="250" height="250" />
|
||||
|
||||
<div class="version"></div>
|
||||
<div class="commitHash"></div>
|
||||
<div class="environment"></div>
|
||||
<div>
|
||||
<a href="https://getsession.org">getsession.org</a>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<a class="privacy" href="https://getsession.org/privacy-policy">Privacy Policy</a><br />
|
||||
<a class="privacy" href="https://getsession.org/terms-of-service/">Terms of Service</a>
|
||||
</div>
|
||||
|
||||
<div id="root"></div>
|
||||
<script type="text/javascript">
|
||||
require('./ts/mains/about_start.js');
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -8,13 +8,25 @@ const config = url.parse(window.location.toString(), true).query;
|
|||
const { locale } = config;
|
||||
const localeMessages = ipcRenderer.sendSync('locale-data');
|
||||
|
||||
window.React = require('react');
|
||||
window.ReactDOM = require('react-dom');
|
||||
|
||||
window.theme = config.theme;
|
||||
window.i18n = i18n.setupi18n(locale, localeMessages);
|
||||
|
||||
window.getEnvironment = () => config.environment;
|
||||
window.getVersion = () => config.version;
|
||||
window.getCommitHash = () => config.commitHash;
|
||||
window.getAppInstance = () => config.appInstance;
|
||||
|
||||
const { AboutView } = require('./ts/components/AboutView');
|
||||
|
||||
window.Signal = {
|
||||
Components: {
|
||||
AboutView,
|
||||
},
|
||||
};
|
||||
|
||||
window.closeAbout = () => ipcRenderer.send('close-about');
|
||||
|
||||
window.i18n = i18n.setupi18n(locale, localeMessages);
|
||||
|
||||
require('./ts/util/logging');
|
||||
|
|
|
|||
|
|
@ -150,11 +150,6 @@ window.readyForUpdates = () => {
|
|||
ipc.send('ready-for-updates');
|
||||
};
|
||||
|
||||
ipc.on('get-primary-color-setting', () => {
|
||||
const primaryColor = window.Events.getPrimaryColorSetting();
|
||||
ipc.send('get-success-primary-color-setting', primaryColor);
|
||||
});
|
||||
|
||||
ipc.on('get-theme-setting', () => {
|
||||
const theme = window.Events.getThemeSetting();
|
||||
ipc.send('get-success-theme-setting', theme);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { switchThemeTo } from '../session/utils/Theme';
|
||||
import { SessionTheme } from '../themes/SessionTheme';
|
||||
|
||||
const StyledContent = styled.div`
|
||||
background-color: var(--background-primary-color);
|
||||
color: var(--text-primary-color);
|
||||
text-align: center;
|
||||
|
||||
font-family: var(--font-default);
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
padding: 12px;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-primary-color);
|
||||
}
|
||||
`;
|
||||
|
||||
export const AboutView = () => {
|
||||
// Add debugging metadata - environment if not production, app instance name
|
||||
const states = [];
|
||||
|
||||
if (window.getEnvironment() !== 'production') {
|
||||
states.push(window.getEnvironment());
|
||||
}
|
||||
if (window.getAppInstance()) {
|
||||
states.push(window.getAppInstance());
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if ((window as any).theme) {
|
||||
void switchThemeTo((window as any).theme, null, false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SessionTheme>
|
||||
<StyledContent>
|
||||
<img src="images/session/session_icon.png" width="250" height="250" />
|
||||
|
||||
<div className="version">{`v${window.getVersion()}`}</div>
|
||||
<div className="commitHash">{window.getCommitHash() || ''}</div>
|
||||
<div className="environment">{states.join(' - ')}</div>
|
||||
<div>
|
||||
<a href="https://getsession.org">getsession.org</a>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<a className="privacy" href="https://getsession.org/privacy-policy">
|
||||
Privacy Policy
|
||||
</a>
|
||||
<br />
|
||||
<a className="privacy" href="https://getsession.org/terms-of-service/">
|
||||
Terms of Service
|
||||
</a>
|
||||
</div>
|
||||
</StyledContent>
|
||||
</SessionTheme>
|
||||
);
|
||||
};
|
||||
|
|
@ -299,7 +299,7 @@ export const ReactListModal = (props: Props): ReactElement => {
|
|||
dispatch(updateReactListModal(null));
|
||||
};
|
||||
|
||||
const handleClearReactions = (event: any) => {
|
||||
const handleClearReactions = () => {
|
||||
handleClose();
|
||||
dispatch(
|
||||
updateReactClearAllModal({
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
// Add version and commit hash
|
||||
|
||||
global.setTimeout(() => {
|
||||
const version = document.getElementsByClassName('version').item(0);
|
||||
|
||||
const commit = document.getElementsByClassName('commitHash').item(0);
|
||||
const environment = document.getElementsByClassName('environment').item(0);
|
||||
|
||||
// Add debugging metadata - environment if not production, app instance name
|
||||
const states = [];
|
||||
|
||||
if (window.getEnvironment() !== 'production') {
|
||||
states.push(window.getEnvironment());
|
||||
}
|
||||
if (window.getAppInstance()) {
|
||||
states.push(window.getAppInstance());
|
||||
}
|
||||
if (version) {
|
||||
// tslint:disable: no-inner-html
|
||||
version.innerHTML = `v${window.getVersion()}`;
|
||||
}
|
||||
|
||||
if (commit) {
|
||||
commit.innerHTML = window.getCommitHash() || '';
|
||||
}
|
||||
|
||||
if (environment) {
|
||||
environment.innerHTML = states.join(' - ');
|
||||
}
|
||||
}, 1000);
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
/* global $, Whisper */
|
||||
// const $body = $(document.body);
|
||||
|
||||
import React from 'react';
|
||||
import { AboutView } from '../components/AboutView';
|
||||
|
||||
window.ReactDOM.render(<AboutView />, document.getElementById('root'));
|
||||
|
|
@ -596,6 +596,7 @@ async function showAbout() {
|
|||
return;
|
||||
}
|
||||
|
||||
const theme = await getThemeFromMainWindow();
|
||||
const options = {
|
||||
width: 500,
|
||||
height: 500,
|
||||
|
|
@ -618,13 +619,14 @@ async function showAbout() {
|
|||
|
||||
captureClicks(aboutWindow);
|
||||
|
||||
await aboutWindow.loadURL(prepareURL([getAppRootPath(), 'about.html']));
|
||||
await aboutWindow.loadURL(prepareURL([getAppRootPath(), 'about.html'], { theme }));
|
||||
|
||||
aboutWindow.on('closed', () => {
|
||||
aboutWindow = null;
|
||||
});
|
||||
|
||||
aboutWindow.once('ready-to-show', () => {
|
||||
aboutWindow?.setBackgroundColor('#000');
|
||||
aboutWindow?.show();
|
||||
});
|
||||
}
|
||||
|
|
@ -641,8 +643,6 @@ async function showDebugLogWindow() {
|
|||
return;
|
||||
}
|
||||
|
||||
// TODO Theming - Use on debug and about pages
|
||||
const primaryColor = await getPrimaryColorFromMainWindow();
|
||||
const theme = await getThemeFromMainWindow();
|
||||
const size = mainWindow.getSize();
|
||||
const options = {
|
||||
|
|
@ -669,7 +669,6 @@ async function showDebugLogWindow() {
|
|||
|
||||
captureClicks(debugLogWindow);
|
||||
|
||||
// TODO Theming - Check if it needs the priary color
|
||||
await debugLogWindow.loadURL(prepareURL([getAppRootPath(), 'debug_log.html'], { theme }));
|
||||
|
||||
debugLogWindow.on('closed', () => {
|
||||
|
|
@ -1102,15 +1101,6 @@ ipc.on('set-auto-update-setting', async (_event, enabled) => {
|
|||
}
|
||||
});
|
||||
|
||||
async function getPrimaryColorFromMainWindow() {
|
||||
return new Promise(resolve => {
|
||||
ipc.once('get-success-primary-color-setting', (_event, value) => {
|
||||
resolve(value);
|
||||
});
|
||||
mainWindow?.webContents.send('get-primary-color-setting');
|
||||
});
|
||||
}
|
||||
|
||||
async function getThemeFromMainWindow() {
|
||||
return new Promise(resolve => {
|
||||
ipc.once('get-success-theme-setting', (_event, value) => {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,14 @@ import { ThemeStateType } from '../../themes/colors';
|
|||
import { switchHtmlToDarkTheme, switchHtmlToLightTheme } from '../../themes/SessionTheme';
|
||||
import { switchTheme } from '../../themes/switchTheme';
|
||||
|
||||
export async function switchThemeTo(theme: ThemeStateType, dispatch: Dispatch | null) {
|
||||
await window.setTheme(theme);
|
||||
export async function switchThemeTo(
|
||||
theme: ThemeStateType,
|
||||
dispatch: Dispatch | null,
|
||||
mainWindow: boolean = true
|
||||
) {
|
||||
if (mainWindow) {
|
||||
await window.setTheme(theme);
|
||||
}
|
||||
|
||||
let newTheme: ThemeStateType | null = null;
|
||||
|
||||
|
|
@ -30,9 +36,10 @@ export async function switchThemeTo(theme: ThemeStateType, dispatch: Dispatch |
|
|||
window.log.warn('Unsupported theme: ', theme);
|
||||
}
|
||||
|
||||
switchTheme(theme);
|
||||
|
||||
if (newTheme) {
|
||||
dispatch?.(applyTheme(newTheme));
|
||||
switchTheme(newTheme, mainWindow);
|
||||
if (dispatch) {
|
||||
dispatch?.(applyTheme(newTheme));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1687,11 +1687,14 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) {
|
|||
document.documentElement.style.setProperty('--input-border-color', 'var(--border-color)');
|
||||
}
|
||||
|
||||
export async function switchTheme(theme: ThemeStateType) {
|
||||
const selectedPrimaryColor = await window.Events.getPrimaryColorSetting();
|
||||
const primaryColor =
|
||||
(selectedPrimaryColor && (COLORS.PRIMARY as any)[`${selectedPrimaryColor.toUpperCase()}`]) ||
|
||||
null;
|
||||
export async function switchTheme(theme: ThemeStateType, mainWindow: boolean = true) {
|
||||
let primaryColor = null;
|
||||
|
||||
if (mainWindow) {
|
||||
const selectedPrimaryColor = await window.Events.getPrimaryColorSetting();
|
||||
primaryColor =
|
||||
selectedPrimaryColor && (COLORS.PRIMARY as any)[`${selectedPrimaryColor.toUpperCase()}`];
|
||||
}
|
||||
|
||||
switch (theme) {
|
||||
case 'classic-light':
|
||||
|
|
|
|||
Loading…
Reference in New Issue