MrBesen
/
tweb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adjust primary accent color 

'System' theme option
This commit is contained in:
Eduard Kuzmenko 2023-01-28 17:26:26 +04:00
parent c9423cae7b
commit e8c20d9d1e
7 changed files with 187 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
src/components/sidebarLeft/tabs/generalSettings.ts
View File

@ -9,7 +9,7 @@ import Button from '../../button';
import CheckboxField from '../../checkboxField';
import RadioField from '../../radioField';
import rootScope from '../../../lib/rootScope';
import {IS_APPLE} from '../../../environment/userAgent';
import {IS_APPLE, IS_SAFARI} from '../../../environment/userAgent';
import Row, {CreateRowFromCheckboxField} from '../../row';
import AppBackgroundTab from './background';
import {LangPackKey, _i18n} from '../../../lib/langPack';
@ -144,8 +144,27 @@ export default class AppGeneralSettingsTab extends SliderSuperTabEventable {
const themesContainer = scrollable.container;
themesContainer.classList.add('themes-container');
type K = {theme: Theme, player?: RLottiePlayer};
type K = {
container: HTMLElement,
theme: Theme,
player?: RLottiePlayer,
wallPaperContainers?: {[key in BaseTheme['_']]?: HTMLElement}
};
const themesMap = new Map<HTMLElement, K>();
let currentTheme = themeController.getTheme();
let isNight = themeController.isNight();
const applyThemeOnItem = (item: K) => {
themeController.applyTheme(item.theme, item.container);
const previous = item.container.querySelector('.background-item');
previous?.remove();
const wallPaperContainer = item.wallPaperContainers[isNight ? 'baseThemeNight' : 'baseThemeClassic']
if(wallPaperContainer) {
item.container.prepend(wallPaperContainer);
}
};
let lastOnFrameNo: (frameNo: number) => void;
@ -168,52 +187,66 @@ export default class AppGeneralSettingsTab extends SliderSuperTabEventable {
lastOnFrameNo?.(-1);
if(item.player && rootScope.settings.animationsEnabled) {
if(item.player.paused) {
item.player.stop(true);
}
if(IS_SAFARI) {
if(item.player.paused) {
item.player.restart();
}
} else {
if(item.player.paused) {
item.player.stop(true);
}
const pre = 'translateX(-50%) ';
item.player.el[0].style.transform = pre + 'scale(2)';
item.player.el[0].style.transform = 'scale(2)';
const onFrameNo = lastOnFrameNo = (frameNo) => {
if(item.player.maxFrame === frameNo || frameNo === -1) {
item.player.el[0].style.transform = '';
item.player.removeEventListener('enterFrame', onFrameNo);
const onFrameNo = lastOnFrameNo = (frameNo) => {
if(item.player.maxFrame === frameNo || frameNo === -1) {
item.player.el[0].style.transform = '';
item.player.removeEventListener('enterFrame', onFrameNo);
if(lastOnFrameNo === onFrameNo) {
lastOnFrameNo = undefined;
if(lastOnFrameNo === onFrameNo) {
lastOnFrameNo = undefined;
}
}
}
};
};
setTimeout(() => {
if(lastOnFrameNo !== onFrameNo) {
return;
}
setTimeout(() => {
if(lastOnFrameNo !== onFrameNo) {
return;
}
item.player.play();
item.player.addEventListener('enterFrame', onFrameNo);
}, 250);
item.player.play();
item.player.addEventListener('enterFrame', onFrameNo);
}, 250);
}
}
}, {listenerSetter: this.listenerSetter});
const promise = p.themes.then(async(themes) => {
const currentTheme = themeController.getTheme();
const isNight = themeController.isNight();
const availableBaseThemes: Set<BaseTheme['_']> = new Set(['baseThemeClassic', 'baseThemeNight']);
const promise = p.themes.then(async(themes) => {
const defaultThemes = themes.filter((theme) => theme.pFlags.default/* && theme.settings[0].message_colors.length === 1 */);
defaultThemes.unshift(DEFAULT_THEME);
const promises = defaultThemes.map(async(theme) => {
const baseTheme: BaseTheme['_'] = isNight ? 'baseThemeNight' : 'baseThemeClassic';
const wallpaper = theme.settings.find((settings) => settings.base_theme._ === baseTheme).wallpaper;
const result = AppBackgroundTab.addWallPaper(wallpaper);
const container = document.createElement('div');
const k: K = {
container,
theme,
wallPaperContainers: {}
};
const results = theme.settings
.filter((themeSettings) => availableBaseThemes.has(themeSettings.base_theme._))
.map((themeSettings) => {
const wallPaper = themeSettings.wallpaper;
const result = AppBackgroundTab.addWallPaper(wallPaper);
k.wallPaperContainers[themeSettings.base_theme._] = result.container;
return result;
});
const container = result.container;
const k: K = {theme};
themesMap.set(container, k);
themeController.applyTheme(theme, container);
applyThemeOnItem(k);
if(theme.id === currentTheme.id) {
container.classList.add('active');
@ -248,7 +281,7 @@ export default class AppGeneralSettingsTab extends SliderSuperTabEventable {
bubbleIn.classList.add('is-in');
bubble.classList.add('is-out');
loadPromises.push(result.loadPromise);
loadPromises.push(...results.map((result) => result.loadPromise));
container.classList.add('theme-container');
@ -270,8 +303,73 @@ export default class AppGeneralSettingsTab extends SliderSuperTabEventable {
promises.push(promise);
const form = document.createElement('form');
form.style.marginTop = '.5rem';
const name = 'theme';
const stateKey = 'settings.theme';
const dayRow = new Row({
radioField: new RadioField({
langKey: 'ThemeDay',
name,
value: 'day',
stateKey
})
});
const nightRow = new Row({
radioField: new RadioField({
langKey: 'ThemeNight',
name,
value: 'night',
stateKey
})
});
const systemRow = new Row({
radioField: new RadioField({
langKey: 'AutoNightSystemDefault',
name,
value: 'system',
stateKey
})
});
this.listenerSetter.add(rootScope)('settings_updated', ({key, value, settings}) => {
if(key === stateKey) {
rootScope.dispatchEvent('theme_change');
}
});
this.listenerSetter.add(rootScope)('theme_change', () => {
currentTheme = themeController.getTheme();
const newIsNight = themeController.isNight();
if(isNight === newIsNight) {
return;
}
isNight = newIsNight;
const lastActive = themesContainer.querySelector('.active');
if(lastActive) {
lastActive.classList.remove('active');
}
themesMap.forEach((item) => {
applyThemeOnItem(item);
if(item.theme.id === currentTheme.id) {
item.container.classList.add('active');
}
});
});
form.append(dayRow.container, nightRow.container, systemRow.container);
container.append(
themesContainer
themesContainer,
form
);
}

2
src/config/app.ts
View File

@ -21,7 +21,7 @@ const App = {
version: process.env.VERSION,
versionFull: process.env.VERSION_FULL,
build: +process.env.BUILD,
langPackVersion: '0.8.4',
langPackVersion: '0.8.5',
langPack: 'webk',
langPackCode: 'en',
domains: MAIN_DOMAINS,

31
src/helpers/themeController.ts
View File

@ -9,7 +9,7 @@ import type {Theme} from '../layer';
import type AppBackgroundTab from '../components/sidebarLeft/tabs/background';
import IS_TOUCH_SUPPORTED from '../environment/touchSupport';
import rootScope from '../lib/rootScope';
import {ColorRgb, getAccentColor, getAverageColor, getHexColorFromTelegramColor, getRgbColorFromTelegramColor, hexToRgb, hslaStringToHex, hsvToRgb, mixColors, rgbaToHexa, rgbaToHsla, rgbToHsv} from './color';
import {changeColorAccent, ColorRgb, getAccentColor, getAverageColor, getHexColorFromTelegramColor, getRgbColorFromTelegramColor, hexToRgb, hslaStringToHex, hsvToRgb, mixColors, rgbaToHexa, rgbaToHsla, rgbToHsv} from './color';
type AppColorName = 'primary-color' | 'message-out-primary-color' |
'surface-color' | 'danger-color' | 'primary-text-color' |
@ -268,32 +268,19 @@ export class ThemeController {
let hsvTemp1 = rgbToHsv(...hexToRgb(baseColors['primary-color'])); // primary base
let hsvTemp2 = rgbToHsv(...getRgbColorFromTelegramColor(themeSettings.accent_color)); // new primary
// const newAccentRgb = changeColorAccent(
// hsvTemp1,
// hsvTemp2,
// hexToRgb(baseColors['primary-color']),
// isNight
// // hexToRgb('#eeffde')
// );
// const newAccentHex = rgbaToHexa(newAccentRgb);
let h = getHexColorFromTelegramColor(themeSettings.accent_color);
if(isNight) {
const color = hexToRgb(h);
const mixed = mixColors(color, hexToRgb(baseColors['surface-color']), 0.84);
h = rgbaToHexa(mixed);
}
// console.log(h, newAccentHex);
// if(isNight) {
// h = newAccentHex;
// }
const newAccentRgb = changeColorAccent(
hsvTemp1,
hsvTemp2,
hexToRgb(baseColors['primary-color']),
!isNight
);
const newAccentHex = rgbaToHexa(newAccentRgb);
const {applyAppColor, finalize} = this.bindColorApplier({element});
applyAppColor({
name: 'primary-color',
hex: h,
// hex: newAccentHex,
hex: newAccentHex,
darkenAlpha: 0.04
});

3
src/lang.ts
View File

@ -889,6 +889,9 @@ const lang = {
'ChatThemeChangedTo': '%1$s changed the chat theme to %2$s',
'ChatThemeDisabled': '%1$s disabled the chat theme',
'ChatThemeDisabledYou': 'You disabled the chat theme',
'ThemeDay': 'Day',
'ThemeNight': 'Night',
'AutoNightSystemDefault': 'System Default',
// * macos
'AccountSettings.Filters': 'Chat Folders',

23
src/scripts/out/langPack.strings
View File

@ -88,6 +88,7 @@
"Permissions.NoExceptions" = "No exceptions";
"Permissions.ExceptionsCount_one" = "%d exception";
"Permissions.ExceptionsCount_other" = "%d exceptions";
"PWA.Install" = "Install App";
"Link.Available" = "Link is available";
"Link.Taken" = "Link is already taken";
"Link.Invalid" = "Link is invalid";
@ -98,6 +99,11 @@
"Popup.Unpin.HideTitle" = "Hide pinned messages";
"Popup.Unpin.HideDescription" = "Do you want to hide the pinned message bar? It wil stay hidden until a new message is pinned.";
"Popup.Unpin.Hide" = "Hide";
"Popup.Attach.GroupMedia" = "Group all media";
"Popup.Attach.UngroupMedia" = "Ungroup all media";
"Popup.Attach.AsMedia" = "Send as media";
"Popup.Attach.EnableSpoilers" = "Hide all with spoilers";
"Popup.Attach.RemoveSpoilers" = "Remove all spoilers";
"TwoStepAuth.EmailCodeChangeEmail" = "Change Email";
"MarkupTooltip.LinkPlaceholder" = "Enter URL...";
"MediaViewer.Context.Download" = "Download";
@ -772,6 +778,23 @@
"AreYouSureWebSessions" = "Are you sure you want to disconnect all websites where you logged in with Telegram?";
"ClearOtherWebSessionsHelp" = "You can log in on websites that support signing in with Telegram.";
"TerminateWebSessionInfo" = "Tap to disconnect from your Telegram account.";
"EnablePhotoSpoiler" = "Hide with spoiler";
"DisablePhotoSpoiler" = "Remove spoiler";
"LimitReachedFolders" = "You have reached the limit of **%1$d** folders. You can double the limit to **%2$d** folders by subscribing to **Telegram Premium**.";
"LimitReachedFoldersPremium" = "You have reached the limit of **%1$d** folders for this account.";
"LimitReachedFoldersLocked" = "You have reached the limit of **%1$d** folders for this account. We are working to let you increase this limit in the future.";
"FwdMessageToSavedMessages" = "Message forwarded to **Saved Messages**.";
"FwdMessagesToSavedMessages" = "Messages forwarded to **Saved Messages**.";
"ColorTheme" = "Color theme";
"SendAsFile" = "Send as file";
"SendAsFiles" = "Send as files";
"ChatThemeChangedYou" = "You changed the chat theme to %1$s";
"ChatThemeChangedTo" = "%1$s changed the chat theme to %2$s";
"ChatThemeDisabled" = "%1$s disabled the chat theme";
"ChatThemeDisabledYou" = "You disabled the chat theme";
"ThemeDay" = "Day";
"ThemeNight" = "Night";
"AutoNightSystemDefault" = "System Default";
"AccountSettings.Filters" = "Chat Folders";
"AccountSettings.Notifications" = "Notifications and Sounds";
"AccountSettings.PrivacyAndSecurity" = "Privacy and Security";

19
src/scss/partials/_themes.scss
View File

@ -32,6 +32,8 @@
width: 4.5rem;
flex: 0 0 auto;
position: relative;
display: flex;
justify-content: center;
// transform: scale(1);
// @include animation-level(2) {
@ -71,19 +73,30 @@
opacity: 1;
}
}
.background-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
}
}
&-emoticon {
position: absolute;
bottom: .5rem;
left: 50%;
transform: translateX(-50%) scale(1);
width: 1.75rem;
height: 1.75rem;
pointer-events: none;
transform-origin: center bottom;
z-index: 1;
html:not(.is-safari) & {
transform-origin: center bottom;
transform: scale(1);
}
@include animation-level(2) {
transition: transform var(--transition-standard-in);
}

6
src/scss/style.scss
View File

@ -223,7 +223,8 @@ $chat-input-inner-padding-handhelds: .25rem;
--secondary-color: #c4c9cc;
--avatar-online-color: #0ac630;
// --avatar-online-color: #0ac630;
--avatar-online-color: var(--primary-color);
// --avatar-color-top: var(--peer-avatar-saved-top);
// --avatar-color-bottom: var(--peer-avatar-saved-bottom);
--chatlist-status-color: var(--avatar-online-color);
@ -291,7 +292,8 @@ $chat-input-inner-padding-handhelds: .25rem;
--secondary-color: #707579;
--avatar-online-color: #0ac630;
// --avatar-online-color: #0ac630;
--avatar-online-color: var(--primary-color);
// --avatar-color-top: var(--peer-avatar-violet-top);
// --avatar-color-bottom: var(--peer-avatar-violet-bottom);
--chatlist-status-color: var(--primary-color);