pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dark mode mostly done

Browse Source
This commit is contained in:
or-else
2025-06-13 16:26:48 +03:00
parent ff60b3902e
commit 6d02cc903c
32 changed files with 1367 additions and 545 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/config.js
+4
View File
@@ -148,3 +148,7 @@ export const SELF_AVATAR_URI = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS
// Toast display duration, milliseconds.
export const TOAST_DURATION = 3_000;
// Initial/default color scheme.
export const DEFAULT_COLOR_SCHEME = 'light dark';
src/i18n.min/en.json
+1 -1
View File
File diff suppressed because one or more lines are too long
src/i18n/ar.json
+35
View File
@@ -1738,5 +1738,40 @@
"description": "Menu item [Unpin] for un-pinning the message.",
"missing": false,
"obsolete": false
},
"color_schema_dark": {
"translation": "",
"defaultMessage": "Dark",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_light": {
"translation": "",
"defaultMessage": "Light",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_system": {
"translation": "",
"defaultMessage": "System default",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"label_color_schema": {
"translation": "",
"defaultMessage": "Theme:",
"description": "Label for selecting color scheme (dark, light) in Settings",
"missing": true,
"obsolete": false
},
"sidepanel_title_appearance": {
"translation": "",
"defaultMessage": "Appearance",
"description": "Sidepanel title for AccAppearanceView.",
"missing": true,
"obsolete": false
}
}
src/i18n/de.json
+35
View File
@@ -1738,5 +1738,40 @@
"description": "Notification that text has been copied to clipboard",
"missing": false,
"obsolete": false
},
"color_schema_dark": {
"translation": "",
"defaultMessage": "Dark",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_light": {
"translation": "",
"defaultMessage": "Light",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_system": {
"translation": "",
"defaultMessage": "System default",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"label_color_schema": {
"translation": "",
"defaultMessage": "Theme:",
"description": "Label for selecting color scheme (dark, light) in Settings",
"missing": true,
"obsolete": false
},
"sidepanel_title_appearance": {
"translation": "",
"defaultMessage": "Appearance",
"description": "Sidepanel title for AccAppearanceView.",
"missing": true,
"obsolete": false
}
}
src/i18n/en.json
+35
View File
@@ -1738,5 +1738,40 @@
"description": "Notification that text has been copied to clipboard",
"missing": false,
"obsolete": false
},
"color_schema_dark": {
"translation": "Dark",
"defaultMessage": "Dark",
"description": "Name of the color schema",
"missing": false,
"obsolete": false
},
"color_schema_light": {
"translation": "Light",
"defaultMessage": "Light",
"description": "Name of the color schema",
"missing": false,
"obsolete": false
},
"color_schema_system": {
"translation": "System default",
"defaultMessage": "System default",
"description": "Name of the color schema",
"missing": false,
"obsolete": false
},
"label_color_schema": {
"translation": "Theme:",
"defaultMessage": "Theme:",
"description": "Label for selecting color scheme (dark, light) in Settings",
"missing": false,
"obsolete": false
},
"sidepanel_title_appearance": {
"translation": "Appearance",
"defaultMessage": "Appearance",
"description": "Sidepanel title for AccAppearanceView.",
"missing": false,
"obsolete": false
}
}
src/i18n/es.json
+35
View File
@@ -1738,5 +1738,40 @@
"description": "Notification that text has been copied to clipboard",
"missing": false,
"obsolete": false
},
"color_schema_dark": {
"translation": "",
"defaultMessage": "Dark",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_light": {
"translation": "",
"defaultMessage": "Light",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_system": {
"translation": "",
"defaultMessage": "System default",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"label_color_schema": {
"translation": "",
"defaultMessage": "Theme:",
"description": "Label for selecting color scheme (dark, light) in Settings",
"missing": true,
"obsolete": false
},
"sidepanel_title_appearance": {
"translation": "",
"defaultMessage": "Appearance",
"description": "Sidepanel title for AccAppearanceView.",
"missing": true,
"obsolete": false
}
}
src/i18n/ex/base-en.json
+20
View File
@@ -211,6 +211,18 @@
"defaultMessage": "Code does not match",
"description": "Error message when the credential validation code is incorrect."
},
"color_schema_dark": {
"defaultMessage": "Dark",
"description": "Name of the color schema"
},
"color_schema_light": {
"defaultMessage": "Light",
"description": "Name of the color schema"
},
"color_schema_system": {
"defaultMessage": "System default",
"description": "Name of the color schema"
},
"contacts_not_found": {
"defaultMessage": "You have no chats<br />¯∖_(ツ)_/¯",
"description": "HTML message shown in ContactList when no contacts are found"
@@ -394,6 +406,10 @@
"defaultMessage": "Client:",
"description": "Label for a client version"
},
"label_color_schema": {
"defaultMessage": "Theme:",
"description": "Label for selecting color scheme (dark, light) in Settings"
},
"label_content_type": {
"defaultMessage": "Content type:",
"description": "Label for file content type (mime)"
@@ -868,6 +884,10 @@
"defaultMessage": "Account Settings",
"description": "Sidepanel title for AccountSettingsView."
},
"sidepanel_title_appearance": {
"defaultMessage": "Appearance",
"description": "Sidepanel title for AccAppearanceView."
},
"sidepanel_title_archive": {
"defaultMessage": "Archived Chats",
"description": "Sidepanel title for ContactsView-Archive."
src/i18n/fr.json
+35
View File
@@ -1738,5 +1738,40 @@
"description": "Notification that text has been copied to clipboard",
"missing": false,
"obsolete": false
},
"color_schema_dark": {
"translation": "",
"defaultMessage": "Dark",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_light": {
"translation": "",
"defaultMessage": "Light",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_system": {
"translation": "",
"defaultMessage": "System default",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"label_color_schema": {
"translation": "",
"defaultMessage": "Theme:",
"description": "Label for selecting color scheme (dark, light) in Settings",
"missing": true,
"obsolete": false
},
"sidepanel_title_appearance": {
"translation": "",
"defaultMessage": "Appearance",
"description": "Sidepanel title for AccAppearanceView.",
"missing": true,
"obsolete": false
}
}
src/i18n/ko.json
+35
View File
@@ -1738,5 +1738,40 @@
"description": "Notification that text has been copied to clipboard",
"missing": false,
"obsolete": false
},
"color_schema_dark": {
"translation": "",
"defaultMessage": "Dark",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_light": {
"translation": "",
"defaultMessage": "Light",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_system": {
"translation": "",
"defaultMessage": "System default",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"label_color_schema": {
"translation": "",
"defaultMessage": "Theme:",
"description": "Label for selecting color scheme (dark, light) in Settings",
"missing": true,
"obsolete": false
},
"sidepanel_title_appearance": {
"translation": "",
"defaultMessage": "Appearance",
"description": "Sidepanel title for AccAppearanceView.",
"missing": true,
"obsolete": false
}
}
src/i18n/ro.json
+35
View File
@@ -1738,5 +1738,40 @@
"description": "Notification that text has been copied to clipboard",
"missing": false,
"obsolete": false
},
"color_schema_dark": {
"translation": "",
"defaultMessage": "Dark",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_light": {
"translation": "",
"defaultMessage": "Light",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_system": {
"translation": "",
"defaultMessage": "System default",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"label_color_schema": {
"translation": "",
"defaultMessage": "Theme:",
"description": "Label for selecting color scheme (dark, light) in Settings",
"missing": true,
"obsolete": false
},
"sidepanel_title_appearance": {
"translation": "",
"defaultMessage": "Appearance",
"description": "Sidepanel title for AccAppearanceView.",
"missing": true,
"obsolete": false
}
}
src/i18n/ru.json
+35
View File
@@ -1738,5 +1738,40 @@
"description": "Notification that text has been copied to clipboard",
"missing": false,
"obsolete": false
},
"color_schema_dark": {
"translation": "",
"defaultMessage": "Dark",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_light": {
"translation": "",
"defaultMessage": "Light",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_system": {
"translation": "",
"defaultMessage": "System default",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"label_color_schema": {
"translation": "",
"defaultMessage": "Theme:",
"description": "Label for selecting color scheme (dark, light) in Settings",
"missing": true,
"obsolete": false
},
"sidepanel_title_appearance": {
"translation": "",
"defaultMessage": "Appearance",
"description": "Sidepanel title for AccAppearanceView.",
"missing": true,
"obsolete": false
}
}
src/i18n/th.json
+35
View File
@@ -1738,5 +1738,40 @@
"description": "Notification that text has been copied to clipboard",
"missing": false,
"obsolete": false
},
"color_schema_dark": {
"translation": "",
"defaultMessage": "Dark",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_light": {
"translation": "",
"defaultMessage": "Light",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_system": {
"translation": "",
"defaultMessage": "System default",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"label_color_schema": {
"translation": "",
"defaultMessage": "Theme:",
"description": "Label for selecting color scheme (dark, light) in Settings",
"missing": true,
"obsolete": false
},
"sidepanel_title_appearance": {
"translation": "",
"defaultMessage": "Appearance",
"description": "Sidepanel title for AccAppearanceView.",
"missing": true,
"obsolete": false
}
}
src/i18n/uk.json
+35
View File
@@ -1738,5 +1738,40 @@
"description": "Notification that text has been copied to clipboard",
"missing": false,
"obsolete": false
},
"color_schema_dark": {
"translation": "",
"defaultMessage": "Dark",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_light": {
"translation": "",
"defaultMessage": "Light",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_system": {
"translation": "",
"defaultMessage": "System default",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"label_color_schema": {
"translation": "",
"defaultMessage": "Theme:",
"description": "Label for selecting color scheme (dark, light) in Settings",
"missing": true,
"obsolete": false
},
"sidepanel_title_appearance": {
"translation": "",
"defaultMessage": "Appearance",
"description": "Sidepanel title for AccAppearanceView.",
"missing": true,
"obsolete": false
}
}
src/i18n/zh-TW.json
+35
View File
@@ -1738,5 +1738,40 @@
"description": "Notification that text has been copied to clipboard",
"missing": false,
"obsolete": false
},
"color_schema_dark": {
"translation": "",
"defaultMessage": "Dark",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_light": {
"translation": "",
"defaultMessage": "Light",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_system": {
"translation": "",
"defaultMessage": "System default",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"label_color_schema": {
"translation": "",
"defaultMessage": "Theme:",
"description": "Label for selecting color scheme (dark, light) in Settings",
"missing": true,
"obsolete": false
},
"sidepanel_title_appearance": {
"translation": "",
"defaultMessage": "Appearance",
"description": "Sidepanel title for AccAppearanceView.",
"missing": true,
"obsolete": false
}
}
src/i18n/zh.json
+35
View File
@@ -1738,5 +1738,40 @@
"description": "Notification that text has been copied to clipboard",
"missing": false,
"obsolete": false
},
"color_schema_dark": {
"translation": "",
"defaultMessage": "Dark",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_light": {
"translation": "",
"defaultMessage": "Light",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"color_schema_system": {
"translation": "",
"defaultMessage": "System default",
"description": "Name of the color schema",
"missing": true,
"obsolete": false
},
"label_color_schema": {
"translation": "",
"defaultMessage": "Theme:",
"description": "Label for selecting color scheme (dark, light) in Settings",
"missing": true,
"obsolete": false
},
"sidepanel_title_appearance": {
"translation": "",
"defaultMessage": "Appearance",
"description": "Sidepanel title for AccAppearanceView.",
"missing": true,
"obsolete": false
}
}
src/views/acc-notifications-view.jsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
import CheckBox from '../widgets/checkbox.jsx';
export default class EditAccountView extends React.PureComponent {
export default class AccNotificationsView extends React.PureComponent {
constructor(props) {
super(props);
src/views/account-settings-view.jsx
+4
View File
@@ -148,6 +148,10 @@ export default class AccountSettingsView extends React.Component {
</div>
<div className="hr" />
<div className="panel-form-column">
<a href="#" className="flat-button" onClick={e => {e.preventDefault(); this.props.onNavigate('appearance');}}>
<i className="material-icons">tune</i>&nbsp;<FormattedMessage id="sidepanel_title_appearance"
defaultMessage="Appearance" description="Sidepanel title for AccAppearanceView." />
</a>
<a href="#" className="flat-button" onClick={e => {e.preventDefault(); this.props.onNavigate('notif');}}>
<i className="material-icons">notifications</i>&nbsp;<FormattedMessage id="sidepanel_title_acc_notifications"
defaultMessage="Notifications" description="Sidepanel title for AccNotificationsView." />
src/views/messages-view.jsx
+1 -1
View File
@@ -1673,7 +1673,7 @@ class MessagesView extends React.Component {
onClick={this.goToLatestMessage}>
<i className="material-icons">arrow_downward</i>
</button>
<div id="messages-panel" ref={this.handleScrollReference}>
<div id="messages-panel" ref={this.handleScrollReference} color-scheme={this.props.colorSchema}>
<ul id="scroller" className={chatBoxClass}>
{messageNodes}
</ul>
src/views/sidepanel-view.jsx
+13
View File
@@ -9,6 +9,7 @@ import TopicCommonView from './topic-common-view.jsx';
const AccountSettingsView = React.lazy(_ => import('./account-settings-view.jsx'));
import ContactsView from './contacts-view.jsx';
const CreateAccountView = React.lazy(_ => import('./create-account-view.jsx'));
import AccAppearanceView from './acc-appearance-view.jsx';
import AccNotificationsView from './acc-notifications-view.jsx';
import AccSecurityView from './acc-security-view.jsx';
import AccSupportView from './acc-support-view.jsx';
@@ -60,6 +61,11 @@ const messages = defineMessages({
description: 'Sidepanel title for AccNotificationsView.',
defaultMessage: 'Notifications'
},
appearance: {
id: 'sidepanel_title_appearance',
description: 'Sidepanel title for AccAppearanceView.',
defaultMessage: 'Appearance'
},
support: {
id: 'sidepanel_title_acc_support',
description: 'Sidepanel title for AccSupportView.',
@@ -200,6 +206,13 @@ class SidepanelView extends React.PureComponent {
onUpdateTagsRequest={this.props.onUpdateAccountTags}
onError={this.props.onError} /> :
view === 'appearance' ?
<AccAppearanceView
colorSchema={this.props.colorSchema}
textSize={this.props.textSize}
onChangeColorSchema={this.props.onChangeColorSchema}
onChangeTextSize={this.props.onChangeTextSize} /> :
view === 'notif' ?
<AccNotificationsView
messageSounds={this.props.messageSounds}
src/views/tinode-web.jsx
+30 -4
View File
@@ -18,8 +18,8 @@ import InfoView from './info-view.jsx';
import MessagesView from './messages-view.jsx';
import SidepanelView from './sidepanel-view.jsx';
import { API_KEY, APP_NAME, DEFAULT_P2P_ACCESS_MODE, FORWARDED_PREVIEW_LENGTH, LOGGING_ENABLED,
MEDIA_BREAKPOINT, WAKE_UP_TICK, WAKE_UP_TIMEOUT } from '../config.js';
import { API_KEY, APP_NAME, DEFAULT_COLOR_SCHEME, DEFAULT_P2P_ACCESS_MODE, FORWARDED_PREVIEW_LENGTH,
LOGGING_ENABLED, MEDIA_BREAKPOINT, WAKE_UP_TICK, WAKE_UP_TIMEOUT } from '../config.js';
import { CALL_STATE_NONE, CALL_STATE_OUTGOING_INITATED,
CALL_STATE_INCOMING_RECEIVED, CALL_STATE_IN_PROGRESS,
CALL_HEAD_STARTED } from '../constants.js';
@@ -134,6 +134,8 @@ class TinodeWeb extends React.Component {
this.handleUpdatePasswordRequest = this.handleUpdatePasswordRequest.bind(this);
this.handleUpdateAccountTagsRequest = this.handleUpdateAccountTagsRequest.bind(this);
this.handleToggleIncognitoMode = this.handleToggleIncognitoMode.bind(this);
this.handleChangeColorSchema = this.handleChangeColorSchema.bind(this);
this.handleChangeTextSize = this.handleChangeTextSize.bind(this);
this.handleSettings = this.handleSettings.bind(this);
this.handleGlobalSettings = this.handleGlobalSettings.bind(this);
this.handleShowArchive = this.handleShowArchive.bind(this);
@@ -213,6 +215,8 @@ class TinodeWeb extends React.Component {
// "On" is the default, so saving the "off" state.
messageSounds: !settings.messageSoundsOff,
incognitoMode: false,
colorSchema: settings.colorSchema || DEFAULT_COLOR_SCHEME, // default: system default
textSize: settings.textSize || 10, // default size: 10pt
// Persistent request to enable alerts.
desktopAlerts: persist && !!settings.desktopAlerts,
// Enable / disable checkbox.
@@ -293,6 +297,8 @@ class TinodeWeb extends React.Component {
window.addEventListener('offline', this.handleOnlineOff);
window.addEventListener('hashchange', this.handleHashRoute);
document.documentElement.style.colorScheme = this.state.colorSchema;
// Process background notifications from the service worker.
if (typeof BroadcastChannel == 'function') {
const serviceWorkerChannel = new BroadcastChannel('tinode-sw');
@@ -517,7 +523,7 @@ class TinodeWeb extends React.Component {
if (hash.path && hash.path.length > 0) {
// Left-side panel selector.
if (['register','settings','edit','notif','security','support','general','crop',
if (['register','settings','edit','notif','appearance','security','support','general','crop',
'cred','reset','newtpk','archive','blocked','contacts',''].includes(hash.path[0])) {
newState.sidePanelSelected = hash.path[0];
} else {
@@ -1204,6 +1210,18 @@ class TinodeWeb extends React.Component {
});
}
handleChangeColorSchema(scheme) {
this.setState({colorSchema: scheme});
LocalStorageUtil.updateObject('settings', {colorSchema: scheme});
document.documentElement.style.colorScheme = scheme;
}
handleChangeTextSize(size) {
this.setState({textSize: size | 0});
LocalStorageUtil.updateObject('settings', {textSize: size});
document.documentElement.style.fontSize = `${size}pt`;
}
handleUpdateAccountTagsRequest(_, tags) {
this.tinode.getMeTopic().setMeta({tags: tags})
.catch(err => this.handleError(err.message, 'err'));
@@ -1316,7 +1334,7 @@ class TinodeWeb extends React.Component {
handleSidepanelCancel() {
const parsed = HashNavigation.parseUrlHash(window.location.hash);
let path = '';
if (['security','support','general','notif'].includes(parsed.path[0])) {
if (['security','support','general','notif','appearance'].includes(parsed.path[0])) {
path = 'edit';
} else if ('crop' == parsed.path[0]) {
path = 'general';
@@ -1470,6 +1488,9 @@ class TinodeWeb extends React.Component {
firebaseDelToken(this.fcm);
}
// Reset color scheme.
document.documentElement.style.colorScheme = DEFAULT_COLOR_SCHEME;
clearInterval(this.reconnectCountdown);
let cleared;
@@ -2059,6 +2080,8 @@ class TinodeWeb extends React.Component {
secureConnection={this.state.secureConnection}
serverVersion={this.state.serverVersion}
reqCredMethod={this.state.reqCredMethod}
textSize={this.state.textSize}
colorSchema={this.state.colorSchema}
onGlobalSettings={this.handleGlobalSettings}
onSignUp={this.handleNewAccount}
@@ -2073,6 +2096,8 @@ class TinodeWeb extends React.Component {
onTogglePushNotifications={this.toggleFCMToken}
onToggleMessageSounds={this.handleToggleMessageSounds}
onToggleIncognitoMode={this.handleToggleIncognitoMode}
onChangeColorSchema={this.handleChangeColorSchema}
onChangeTextSize={this.handleChangeTextSize}
onCredAdd={this.handleCredAdd}
onCredDelete={this.handleCredDelete}
onCredConfirm={this.handleCredConfirm}
@@ -2114,6 +2139,7 @@ class TinodeWeb extends React.Component {
serverVersion={this.state.serverVersion}
serverAddress={this.state.serverAddress}
applicationVisible={this.state.applicationVisible}
colorSchema={this.state.colorSchema}
forwardMessage={this.state.forwardMessage}
onCancelForwardMessage={this.handleHideForwardDialog}