r4sas
/
tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Theme changes

master
morethanwords 4 years ago
parent
b655c08908
commit
bf1b057e8b
8 changed files with 99 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/components/chat/chat.ts
  2. 2
      src/index.hbs
  3. 24
      src/lib/appManagers/appDialogsManager.ts
  4. 9
      src/lib/appManagers/appImManager.ts
  5. 9
      src/lib/appManagers/appStateManager.ts
  6. 4
      src/scss/partials/_chat.scss
  7. 40
      src/scss/partials/_chatlist.scss
  8. 11
      src/scss/style.scss

6
src/components/chat/chat.ts
Unescape View File

@ -86,6 +86,12 @@ export default class Chat extends EventListenerBase<{
const item = document.createElement('div'); const item = document.createElement('div');
item.classList.add('chat-background-item'); item.classList.add('chat-background-item');
const theme = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme);
if(theme.background.type === 'color') {
item.style.backgroundColor = theme.background.color;
item.style.backgroundImage = 'none';
}
return new Promise<void>((resolve) => { return new Promise<void>((resolve) => {
const cb = () => { const cb = () => {
const prev = this.backgroundEl.children[this.backgroundEl.childElementCount - 1] as HTMLElement; const prev = this.backgroundEl.children[this.backgroundEl.childElementCount - 1] as HTMLElement;

2
src/index.hbs
Unescape View File

@ -74,6 +74,8 @@
<path id="logo" fill-rule="evenodd" d="M80,0 C124.18278,0 160,35.81722 160,80 C160,124.18278 124.18278,160 80,160 C35.81722,160 0,124.18278 0,80 C0,35.81722 35.81722,0 80,0 Z M114.262551,46.4516129 L114.123923,46.4516129 C111.089589,46.5056249 106.482806,48.0771432 85.1289541,56.93769 L81.4133571,58.4849956 C72.8664779,62.0684477 57.2607933,68.7965125 34.5963033,78.66919 C30.6591745,80.2345564 28.5967328,81.765936 28.4089783,83.2633288 C28.0626453,86.0254269 31.8703852,86.959903 36.7890378,88.5302703 L38.2642674,89.0045258 C42.3926354,90.314406 47.5534685,91.7248852 50.3250916,91.7847532 C52.9151948,91.8407003 55.7944784,90.8162976 58.9629426,88.7115451 L70.5121776,80.9327422 C85.6657026,70.7535853 93.6285785,65.5352892 94.4008055,65.277854 L94.6777873,65.216416 C95.1594319,65.1213105 95.7366278,65.0717596 96.1481181,65.4374337 C96.6344248,65.8695939 96.5866185,66.6880224 96.5351057,66.9075859 C96.127514,68.6448691 75.2839361,87.6143392 73.6629144,89.2417998 L73.312196,89.6016896 C68.7645143,94.2254793 63.9030972,97.1721503 71.5637945,102.355193 L73.3593638,103.544598 C79.0660342,107.334968 82.9483395,110.083813 88.8107882,113.958377 L90.3875424,114.996094 C95.0654739,118.061953 98.7330313,121.697601 103.562866,121.253237 C105.740839,121.052855 107.989107,119.042224 109.175465,113.09692 L109.246762,112.727987 C112.002037,98.0012935 117.417883,66.09303 118.669527,52.9443975 C118.779187,51.7924073 118.641237,50.318088 118.530455,49.6708963 L118.474159,49.3781963 C118.341081,48.7651315 118.067967,48.0040758 117.346762,47.4189793 C116.412565,46.6610871 115.002114,46.4638844 114.262551,46.4516129 Z"/> <path id="logo" fill-rule="evenodd" d="M80,0 C124.18278,0 160,35.81722 160,80 C160,124.18278 124.18278,160 80,160 C35.81722,160 0,124.18278 0,80 C0,35.81722 35.81722,0 80,0 Z M114.262551,46.4516129 L114.123923,46.4516129 C111.089589,46.5056249 106.482806,48.0771432 85.1289541,56.93769 L81.4133571,58.4849956 C72.8664779,62.0684477 57.2607933,68.7965125 34.5963033,78.66919 C30.6591745,80.2345564 28.5967328,81.765936 28.4089783,83.2633288 C28.0626453,86.0254269 31.8703852,86.959903 36.7890378,88.5302703 L38.2642674,89.0045258 C42.3926354,90.314406 47.5534685,91.7248852 50.3250916,91.7847532 C52.9151948,91.8407003 55.7944784,90.8162976 58.9629426,88.7115451 L70.5121776,80.9327422 C85.6657026,70.7535853 93.6285785,65.5352892 94.4008055,65.277854 L94.6777873,65.216416 C95.1594319,65.1213105 95.7366278,65.0717596 96.1481181,65.4374337 C96.6344248,65.8695939 96.5866185,66.6880224 96.5351057,66.9075859 C96.127514,68.6448691 75.2839361,87.6143392 73.6629144,89.2417998 L73.312196,89.6016896 C68.7645143,94.2254793 63.9030972,97.1721503 71.5637945,102.355193 L73.3593638,103.544598 C79.0660342,107.334968 82.9483395,110.083813 88.8107882,113.958377 L90.3875424,114.996094 C95.0654739,118.061953 98.7330313,121.697601 103.562866,121.253237 C105.740839,121.052855 107.989107,119.042224 109.175465,113.09692 L109.246762,112.727987 C112.002037,98.0012935 117.417883,66.09303 118.669527,52.9443975 C118.779187,51.7924073 118.641237,50.318088 118.530455,49.6708963 L118.474159,49.3781963 C118.341081,48.7651315 118.067967,48.0040758 117.346762,47.4189793 C116.412565,46.6610871 115.002114,46.4638844 114.262551,46.4516129 Z"/>
<path id="poll-line" d="M4.47,5.33v13.6c0,4.97,4.03,9,9,9h458.16"/> <path id="poll-line" d="M4.47,5.33v13.6c0,4.97,4.03,9,9,9h458.16"/>
<path id="check" fill="none" d="M 4.7071 12.2929 l 5 5 c 0.3905 0.3905 1.0237 0.3905 1.4142 0 l 11 -11" /> <path id="check" fill="none" d="M 4.7071 12.2929 l 5 5 c 0.3905 0.3905 1.0237 0.3905 1.4142 0 l 11 -11" />
<path id="verified-background" d="M12.3 2.9c.1.1.2.1.3.2.7.6 1.3 1.1 2 1.7.3.2.6.4.9.4.9.1 1.7.2 2.6.2.5 0 .6.1.7.7.1.9.1 1.8.2 2.6 0 .4.2.7.4 1 .6.7 1.1 1.3 1.7 2 .3.4.3.5 0 .8-.5.6-1.1 1.3-1.6 1.9-.3.3-.5.7-.5 1.2-.1.8-.2 1.7-.2 2.5 0 .4-.2.5-.6.6-.8 0-1.6.1-2.5.2-.5 0-1 .2-1.4.5-.6.5-1.3 1.1-1.9 1.6-.3.3-.5.3-.8 0-.7-.6-1.4-1.2-2-1.8-.3-.2-.6-.4-.9-.4-.9-.1-1.8-.2-2.7-.2-.4 0-.5-.2-.6-.5 0-.9-.1-1.7-.2-2.6 0-.4-.2-.8-.4-1.1-.6-.6-1.1-1.3-1.6-2-.4-.4-.3-.5 0-1 .6-.6 1.1-1.3 1.7-1.9.3-.3.4-.6.4-1 0-.8.1-1.6.2-2.5 0-.5.1-.6.6-.6.9-.1 1.7-.1 2.6-.2.4 0 .7-.2 1-.4.7-.6 1.4-1.2 2.1-1.7.1-.2.3-.3.5-.2z" />
<path id="verified-check" d="M16.4 10.1l-.2.2-5.4 5.4c-.1.1-.2.2-.4 0l-2.6-2.6c-.2-.2-.1-.3 0-.4.2-.2.5-.6.7-.6.3 0 .5.4.7.6l1.1 1.1c.2.2.3.2.5 0l4.3-4.3c.2-.2.4-.3.6 0 .1.2.3.3.4.5.2 0 .3.1.3.1z" />
<symbol id="message-tail-filled" viewBox="0 0 11 20"> <symbol id="message-tail-filled" viewBox="0 0 11 20">
<g transform="translate(9 -14)" fill="inherit" fill-rule="evenodd"> <g transform="translate(9 -14)" fill="inherit" fill-rule="evenodd">
<path d="M-6 16h6v17c-.193-2.84-.876-5.767-2.05-8.782-.904-2.325-2.446-4.485-4.625-6.48A1 1 0 01-6 16z" transform="matrix(1 0 0 -1 0 49)" id="corner-fill" fill="inherit"/> <path d="M-6 16h6v17c-.193-2.84-.876-5.767-2.05-8.782-.904-2.325-2.446-4.485-4.625-6.48A1 1 0 01-6 16z" transform="matrix(1 0 0 -1 0 49)" id="corner-fill" fill="inherit"/>

24
src/lib/appManagers/appDialogsManager.ts
Unescape View File

@ -1291,9 +1291,7 @@ export class AppDialogsManager {
if(peer?.pFlags?.verified) { if(peer?.pFlags?.verified) {
titleSpanContainer.classList.add('is-verified'); titleSpanContainer.classList.add('is-verified');
const i = document.createElement('i'); titleSpanContainer.append(generateVerifiedIcon());
i.classList.add('verified-icon');
titleSpanContainer.append(i);
} }
//} //}
@ -1414,6 +1412,26 @@ export class AppDialogsManager {
} }
} }
export function generateVerifiedIcon() {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttributeNS(null, 'viewBox', '0 0 24 24');
svg.setAttributeNS(null, 'width', '24');
svg.setAttributeNS(null, 'height', '24');
svg.classList.add('verified-icon');
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttributeNS(null, 'href', '#verified-background');
use.classList.add('verified-background');
const use2 = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use2.setAttributeNS(null, 'href', '#verified-check');
use2.classList.add('verified-check');
svg.append(use, use2);
return svg;
}
const appDialogsManager = new AppDialogsManager(); const appDialogsManager = new AppDialogsManager();
MOUNT_CLASS_TO.appDialogsManager = appDialogsManager; MOUNT_CLASS_TO.appDialogsManager = appDialogsManager;
export default appDialogsManager; export default appDialogsManager;

9
src/lib/appManagers/appImManager.ts
Unescape View File

@ -222,10 +222,12 @@ export class AppImManager {
public setCurrentBackground(broadcastEvent = false) { public setCurrentBackground(broadcastEvent = false) {
const theme = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme); const theme = rootScope.settings.themes.find(t => t.name === rootScope.settings.theme);
const defaultTheme = AppStateManager.STATE_INIT.settings.themes.find(t => t.name === theme.name);
if(theme.background.slug) {
const defaultTheme = AppStateManager.STATE_INIT.settings.themes.find(t => t.name === theme.name);
const isDefaultBackground = theme.background.blur === defaultTheme.background.blur && const isDefaultBackground = theme.background.blur === defaultTheme.background.blur &&
theme.background.slug === defaultTheme.background.slug; theme.background.slug === defaultTheme.background.slug;
if(!isDefaultBackground) { if(!isDefaultBackground) {
return this.getBackground(theme.background.slug).then((url) => { return this.getBackground(theme.background.slug).then((url) => {
return this.setBackground(url, broadcastEvent); return this.setBackground(url, broadcastEvent);
@ -233,11 +235,12 @@ export class AppImManager {
theme.background = copy(defaultTheme.background); // * reset background theme.background = copy(defaultTheme.background); // * reset background
return this.setBackground('', true); return this.setBackground('', true);
}); });
} else {
return this.setBackground('', broadcastEvent);
} }
} }
return this.setBackground('', broadcastEvent);
}
private getBackground(slug: string) { private getBackground(slug: string) {
if(this.backgroundPromises[slug]) return this.backgroundPromises[slug]; if(this.backgroundPromises[slug]) return this.backgroundPromises[slug];
return this.backgroundPromises[slug] = appDownloadManager.cacheStorage.getFile('backgrounds/' + slug).then(blob => { return this.backgroundPromises[slug] = appDownloadManager.cacheStorage.getFile('backgrounds/' + slug).then(blob => {

9
src/lib/appManagers/appStateManager.ts
Unescape View File

@ -137,6 +137,7 @@ export const STATE_INIT: State = {
background: { background: {
type: 'color', type: 'color',
blur: false, blur: false,
color: '#0f0f0f',
highlightningColor: 'hsla(0, 0%, 3.82353%, 0.4)' highlightningColor: 'hsla(0, 0%, 3.82353%, 0.4)'
} }
}], }],
@ -213,12 +214,10 @@ export class AppStateManager extends EventListenerBase<{
state.chats = chats; state.chats = chats;
} }
validateInitObject(STATE_INIT, state);
if(!state.settings.hasOwnProperty('themes') && state.settings.background) { if(!state.settings.hasOwnProperty('themes') && state.settings.background) {
const theme = state.settings.themes.find(t => t.name === STATE_INIT.settings.theme); const theme = STATE_INIT.settings.themes.find(t => t.name === STATE_INIT.settings.theme);
if(theme) { if(theme) {
theme.background = state.settings.background; theme.background = copy(state.settings.background);
} }
} }
@ -226,6 +225,8 @@ export class AppStateManager extends EventListenerBase<{
state.settings.theme = state.settings.nightTheme ? 'night' : 'day'; state.settings.theme = state.settings.nightTheme ? 'night' : 'day';
} }
validateInitObject(STATE_INIT, state);
this.state = state; this.state = state;
this.state.version = STATE_VERSION; this.state.version = STATE_VERSION;

4
src/scss/partials/_chat.scss
Unescape View File

@ -780,7 +780,7 @@ $chat-helper-size: 39px;
} }
@include respond-to(handhelds) { @include respond-to(handhelds) {
--padding-vertical: .5px; --padding-vertical: 1px;
--padding-horizontal: #{$chat-padding-handhelds}; --padding-horizontal: #{$chat-padding-handhelds};
} }
@ -789,7 +789,7 @@ $chat-helper-size: 39px;
} }
@include respond-to(esg-bottom) { @include respond-to(esg-bottom) {
--padding-vertical: .5px; --padding-vertical: 1px;
--padding-horizontal: #{$chat-padding-handhelds}; --padding-horizontal: #{$chat-padding-handhelds};
} }

40
src/scss/partials/_chatlist.scss
Unescape View File

@ -197,7 +197,39 @@ ul.chatlist {
@include respond-to(not-handhelds) { @include respond-to(not-handhelds) {
&.active { &.active {
background: var(--light-secondary-text-color); //background: var(--light-secondary-text-color);
background: var(--primary-color) !important;
.user-caption,
.tgico-chatspinned:before,
//.user-title:after,
.user-title,
b,
.message-status {
color: #fff;
}
.user-title:after {
color: rgba(255, 255, 255, .7);
}
.verified-background {
fill: #fff !important;
}
.verified-check {
fill: var(--primary-color) !important;
}
.dialog-avatar.is-online:after {
background-color: #fff;
border-color: var(--primary-color);
}
.badge.unread {
background-color: #fff !important;
color: var(--primary-color);
}
} }
} }
} }
@ -219,6 +251,10 @@ ul.chatlist {
&:not(:empty), &.tgico-pinnedchat { &:not(:empty), &.tgico-pinnedchat {
margin-left: .5rem; margin-left: .5rem;
} }
&.unread {
transition: none;
}
} }
} }
} }
@ -259,8 +295,6 @@ ul.chatlist {
.verified-icon { .verified-icon {
flex: 0 0 auto; flex: 0 0 auto;
content: " ";
background: url(assets/img/icon-verified.svg);
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-left: .125rem; margin-left: .125rem;

11
src/scss/style.scss
Unescape View File

@ -199,7 +199,8 @@ html.night {
--message-checkbox-border-color: #fff; --message-checkbox-border-color: #fff;
--message-secondary-color: var(--secondary-color); --message-secondary-color: var(--secondary-color);
@include splitColor(message-out-background-color, #ae582d, true, true); //@include splitColor(message-out-background-color, #ae582d, true, true);
@include splitColor(message-out-background-color, #878afd, true, true);
--message-out-link-color: #fff; --message-out-link-color: #fff;
--message-out-primary-color: #fff; --message-out-primary-color: #fff;
--message-out-audio-play-button-color: var(--message-out-background-color); --message-out-audio-play-button-color: var(--message-out-background-color);
@ -1162,3 +1163,11 @@ middle-ellipsis-element {
top: 0; top: 0;
z-index: -1; z-index: -1;
} }
.verified-check {
fill: #fff;
}
.verified-background {
fill: #33a8e5;
}

Write Preview
Loading…
Cancel
Save