Browse Source

New premium & verified icons

Handle peer flags change (premium, verified, etc)
master
Eduard Kuzmenko 2 years ago
parent
commit
5758e08291
  1. 15
      src/components/chat/topbar.ts
  2. 2
      src/components/generatePremiumIcon.ts
  3. 10
      src/components/generateTitleIcons.ts
  4. 30
      src/components/generateVerifiedIcon.ts
  5. 8
      src/components/peerProfile.ts
  6. 34
      src/components/peerTitle.ts
  7. 6
      src/index.hbs
  8. 29
      src/lib/appManagers/appChatsManager.ts
  9. 16
      src/lib/appManagers/appDialogsManager.ts
  10. 30
      src/lib/appManagers/appUsersManager.ts
  11. 19
      src/scss/partials/_chatlist.scss
  12. 24
      src/scss/partials/_profile.scss
  13. 48
      src/scss/style.scss
  14. 61
      src/scss/tgico/_style.scss
  15. 211
      src/scss/tgico/_variables.scss

15
src/components/chat/topbar.ts

@ -34,14 +34,12 @@ import replaceContent from "../../helpers/dom/replaceContent"; @@ -34,14 +34,12 @@ import replaceContent from "../../helpers/dom/replaceContent";
import { ChatFull, Chat as MTChat, GroupCall } from "../../layer";
import PopupPickUser from "../popups/pickUser";
import PopupPeer from "../popups/peer";
import { fastRaf } from "../../helpers/schedulers";
import AppEditContactTab from "../sidebarRight/tabs/editContact";
import appMediaPlaybackController from "../appMediaPlaybackController";
import IS_GROUP_CALL_SUPPORTED from "../../environment/groupCallSupport";
import IS_CALL_SUPPORTED from "../../environment/callSupport";
import { CallType } from "../../lib/calls/types";
import PopupMute from "../popups/mute";
import generateTitleIcons from "../generateTitleIcons";
import { AppManagers } from "../../lib/appManagers/managers";
import hasRights from "../../lib/appManagers/utils/chats/hasRights";
import wrapPeerTitle from "../wrappers/peerTitle";
@ -794,12 +792,13 @@ export default class ChatTopbar { @@ -794,12 +792,13 @@ export default class ChatTopbar {
if(count === undefined) titleEl = i18n('Loading');
else titleEl = i18n('Chat.Title.Comments', [count]);
} else if(this.chat.type === 'chat') {
[titleEl, icons] = await Promise.all([
[titleEl/* , icons */] = await Promise.all([
wrapPeerTitle({
peerId,
dialog: true
dialog: true,
withIcons: true
}),
generateTitleIcons(peerId)
// generateTitleIcons(peerId)
]);
if(!middleware()) {
@ -809,9 +808,9 @@ export default class ChatTopbar { @@ -809,9 +808,9 @@ export default class ChatTopbar {
return () => {
replaceContent(this.title, titleEl);
if(icons) {
this.title.append(...icons);
}
// if(icons) {
// this.title.append(...icons);
// }
};
}

2
src/components/generatePremiumIcon.ts

@ -1,5 +1,5 @@ @@ -1,5 +1,5 @@
export default function generatePremiumIcon() {
const span = document.createElement('span');
span.classList.add('premium-icon', 'tgico-favourites');
span.classList.add('premium-icon', 'tgico-star');
return span;
}

10
src/components/generateTitleIcons.ts

@ -7,13 +7,13 @@ @@ -7,13 +7,13 @@
import { Chat, User } from "../layer";
import rootScope from "../lib/rootScope";
import generateFakeIcon from "./generateFakeIcon";
// import generatePremiumIcon from "./generatePremiumIcon";
import generatePremiumIcon from "./generatePremiumIcon";
import generateVerifiedIcon from "./generateVerifiedIcon";
export default async function generateTitleIcons(peerId: PeerId) {
const elements: Element[] = [];
const peer: Chat | User = await rootScope.managers.appPeersManager.getPeer(peerId);
if((peer as Chat.channel)?.pFlags?.verified) {
if((peer as Chat.channel).pFlags.verified) {
elements.push(generateVerifiedIcon());
}
@ -21,9 +21,9 @@ export default async function generateTitleIcons(peerId: PeerId) { @@ -21,9 +21,9 @@ export default async function generateTitleIcons(peerId: PeerId) {
elements.push(generateFakeIcon((peer as User.user).pFlags.scam));
}
// if((peer as User.user).pFlags.premium) {
// elements.push(generatePremiumIcon());
// }
if((peer as User.user).pFlags.premium) {
elements.push(generatePremiumIcon());
}
return elements;
}

30
src/components/generateVerifiedIcon.ts

@ -1,19 +1,29 @@ @@ -1,19 +1,29 @@
export default function generateVerifiedIcon() {
const span = document.createElement('span');
span.classList.add('verified-icon', 'tgico');
const size = 26; // 24
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');
svg.setAttributeNS(null, 'viewBox', `0 0 ${size} ${size}`);
svg.setAttributeNS(null, 'width', `${size}`);
svg.setAttributeNS(null, 'height', `${size}`);
svg.classList.add('verified-icon-svg');
const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use.setAttributeNS(null, 'href', '#verified-background');
use.classList.add('verified-background');
use.setAttributeNS(null, 'href', '#verified-icon-background');
use.classList.add('verified-icon-background');
const use2 = document.createElementNS('http://www.w3.org/2000/svg', 'use');
use2.setAttributeNS(null, 'href', '#verified-check');
use2.classList.add('verified-check');
use2.setAttributeNS(null, 'href', '#verified-icon-check');
use2.classList.add('verified-icon-check');
// svg.append(use, use2);
svg.append(use2, use);
svg.append(use, use2);
span.append(svg);
return svg;
return span;
// const span = document.createElement('span');
// span.classList.add('verified-icon', 'tgico-verified_filled');
// return span;
}

8
src/components/peerProfile.ts

@ -19,7 +19,6 @@ import wrapRichText from "../lib/richTextProcessor/wrapRichText"; @@ -19,7 +19,6 @@ import wrapRichText from "../lib/richTextProcessor/wrapRichText";
import rootScope from "../lib/rootScope";
import AvatarElement from "./avatar";
import CheckboxField from "./checkboxField";
import generateTitleIcons from "./generateTitleIcons";
import PeerProfileAvatars from "./peerProfileAvatars";
import Row from "./row";
import Scrollable from "./scrollable";
@ -358,16 +357,17 @@ export default class PeerProfile { @@ -358,16 +357,17 @@ export default class PeerProfile {
this.fillNotifications(),
this.setMoreDetails(),
(async() => {
const [element, icons] = await Promise.all([
const [element/* , icons */] = await Promise.all([
wrapPeerTitle({
peerId,
dialog: this.isDialog,
withIcons: true
}),
generateTitleIcons(peerId)
// generateTitleIcons(peerId)
]);
replaceContent(this.name, element);
this.name.append(...icons);
// this.name.append(...icons);
})(),
this.setPeerStatus(true)
]);

34
src/components/peerTitle.ts

@ -13,6 +13,7 @@ import setInnerHTML from "../helpers/dom/setInnerHTML"; @@ -13,6 +13,7 @@ import setInnerHTML from "../helpers/dom/setInnerHTML";
import { AppManagers } from "../lib/appManagers/managers";
import wrapEmojiText from "../lib/richTextProcessor/wrapEmojiText";
import getPeerTitle from "./wrappers/getPeerTitle";
import generateTitleIcons from "./generateTitleIcons";
export type PeerTitleOptions = {
peerId?: PeerId,
@ -21,7 +22,8 @@ export type PeerTitleOptions = { @@ -21,7 +22,8 @@ export type PeerTitleOptions = {
onlyFirstName?: boolean,
dialog?: boolean,
limitSymbols?: number,
managers?: AppManagers
managers?: AppManagers,
withIcons?: boolean
};
const weakMap: WeakMap<HTMLElement, PeerTitle> = new WeakMap();
@ -47,6 +49,8 @@ export default class PeerTitle { @@ -47,6 +49,8 @@ export default class PeerTitle {
private dialog = false;
private limitSymbols: number;
private managers: AppManagers;
private hasInner: boolean;
private withIcons: boolean;
constructor(options?: PeerTitleOptions) {
this.element = document.createElement('span');
@ -92,15 +96,35 @@ export default class PeerTitle { @@ -92,15 +96,35 @@ export default class PeerTitle {
return;
}
if(this.peerId === undefined) {
this.peerId = NULL_PEER_ID;
}
this.peerId ??= NULL_PEER_ID;
let hasInner: boolean;
if(this.peerId !== rootScope.myId || !this.dialog) {
const managers = this.managers ?? rootScope.managers;
setInnerHTML(this.element, await getPeerTitle(this.peerId, this.plainText, this.onlyFirstName, this.limitSymbols, managers));
const [title, icons] = await Promise.all([
getPeerTitle(this.peerId, this.plainText, this.onlyFirstName, this.limitSymbols, managers),
this.withIcons && generateTitleIcons(this.peerId)
]);
if(icons?.length) {
const inner = document.createElement('span');
inner.classList.add('peer-title-inner');
hasInner = true;
setInnerHTML(inner, title);
const fragment = document.createDocumentFragment();
fragment.append(inner, ...icons);
setInnerHTML(this.element, fragment);
} else {
setInnerHTML(this.element, title);
}
} else {
replaceContent(this.element, i18n(this.onlyFirstName ? 'Saved' : 'SavedMessages'));
}
if(this.hasInner !== hasInner) {
this.hasInner = hasInner;
this.element.classList.toggle('with-icons', hasInner);
}
}
}

6
src/index.hbs

@ -95,8 +95,10 @@ @@ -95,8 +95,10 @@
<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="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" />
<path id="verified-icon-background" fill-rule="evenodd" clip-rule="evenodd" d="m14.378741 1.509638 1.818245 1.818557c.365651.365716.861601.571194 1.378741.571259l2.574273.000312c1.01361.000117 1.846494.773578 1.940861 1.762436l.008905.187798-.000312 2.5727c-.000065.517322.205439 1.013454.571259 1.379222l1.819649 1.819337c.714441.713427.759174 1.843179.134563 2.609139l-.134797.148109-1.819181 1.8182502c-.365963.3657823-.571558.8620196-.571493 1.3794456l.000312 2.5737972c.000559 1.0136048-.772668 1.846676-1.7615 1.9412861l-.188266.0084786-2.573792-.0003107c-.517426-.0000624-1.013675.2055248-1.379456.5714956l-1.818245 1.8191823c-.71331.7145515-1.843049.7594886-2.609113.1349998l-.148135-.1347645-1.8193435-1.8196542c-.3657628-.3658252-.8618987-.5713214-1.3792103-.571259l-2.5727052.0003107c-1.0136048.0001222-1.846676-.7731321-1.9412861-1.761968l-.0089492-.1877967-.0003107-2.5742678c-.0000624-.5171478-.2055495-1.0130926-.571259-1.3787397l-1.8185622-1.8182515c-.7139886-.713869-.758706-1.843647-.1340846-2.609607l.1338493-.148109 1.8190328-1.81935c.3655665-.365625.5709613-.861471.5710237-1.378494l.0003107-2.573181c.0006006-1.076777.8734635-1.949636 1.9502353-1.950234l2.5731758-.000312c.5170321-.000065 1.0128768-.205452 1.3785044-.571025l1.8193448-1.819038c.761592-.761449 1.996254-.761345 2.757716.000247zm3.195309 8.047806c-.426556-.34125-1.032655-.306293-1.417455.060333l-.099151.108173-4.448444 5.55815-1.7460313-1.74707-.1104961-.096564c-.4229264-.32188-1.0291801-.289692-1.4154413.096564-.3862612.386269-.4184492.992511-.0965653 1.41544l.0965653.1105 2.5999987 2.5999987.109876.0961467c.419874.320359 1.015131.2873897 1.397071-.0773773l.098579-.107692 5.2-6.4999961.083772-.120484c.273208-.455884.174278-1.054885-.252278-1.396122z" />
<path id="verified-icon-check" d="M8 8H18V18H8V8Z" />
{{!-- <path id="verified-icon-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-icon-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">
<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"/>

29
src/lib/appManagers/appChatsManager.ts

@ -151,31 +151,30 @@ export class AppChatsManager extends AppManager { @@ -151,31 +151,30 @@ export class AppChatsManager extends AppManager {
this.usernames[searchUsername] = chat.id;
} */
let changedPhoto = false, changedTitle = false;
const peerId = chat.id.toPeerId(true);
if(oldChat === undefined) {
this.chats[chat.id] = chat;
} else {
const oldPhotoId = ((oldChat as Chat.chat).photo as ChatPhoto.chatPhoto)?.photo_id;
const newPhotoId = ((chat as Chat.chat).photo as ChatPhoto.chatPhoto)?.photo_id;
if(oldPhotoId !== newPhotoId) {
changedPhoto = true;
}
const changedPhoto = oldPhotoId !== newPhotoId;
if(oldChat.title !== chat.title) {
changedTitle = true;
}
const changedTitle = oldChat.title !== chat.title;
const changedAnyBadge = (oldChat as Chat.channel).pFlags.verified !== (chat as Chat.channel).pFlags.verified ||
(oldChat as Chat.channel).pFlags.scam !== (chat as Chat.channel).pFlags.scam ||
(oldChat as Chat.channel).pFlags.fake !== (chat as Chat.channel).pFlags.fake;
safeReplaceObject(oldChat, chat);
this.rootScope.dispatchEvent('chat_update', chat.id);
}
const peerId = chat.id.toPeerId(true);
if(changedPhoto) {
this.rootScope.dispatchEvent('avatar_update', peerId);
}
if(changedTitle) {
this.rootScope.dispatchEvent('peer_title_edit', peerId);
if(changedPhoto) {
this.rootScope.dispatchEvent('avatar_update', peerId);
}
if(changedTitle || changedAnyBadge) {
this.rootScope.dispatchEvent('peer_title_edit', peerId);
}
}
if(this.peersStorage.isPeerNeeded(peerId)) {

16
src/lib/appManagers/appDialogsManager.ts

@ -52,7 +52,6 @@ import IS_GROUP_CALL_SUPPORTED from "../../environment/groupCallSupport"; @@ -52,7 +52,6 @@ import IS_GROUP_CALL_SUPPORTED from "../../environment/groupCallSupport";
import mediaSizes from "../../helpers/mediaSizes";
import appNavigationController, { NavigationItem } from "../../components/appNavigationController";
import assumeType from "../../helpers/assumeType";
import generateTitleIcons from "../../components/generateTitleIcons";
import appMediaPlaybackController from "../../components/appMediaPlaybackController";
import setInnerHTML from "../../helpers/dom/setInnerHTML";
import { AppManagers } from "./managers";
@ -2070,7 +2069,8 @@ export class AppDialogsManager { @@ -2070,7 +2069,8 @@ export class AppDialogsManager {
fromName,
dialog: meAsSaved,
onlyFirstName,
plainText: false
plainText: false,
withIcons: true
});
if(loadPromises) {
@ -2086,13 +2086,13 @@ export class AppDialogsManager { @@ -2086,13 +2086,13 @@ export class AppDialogsManager {
// for muted icon
titleSpanContainer.classList.add('tgico'); // * эта строка будет актуальна только для !container, но ладно
const titleIconsPromise = generateTitleIcons(peerId).then((elements) => {
titleSpanContainer.append(...elements);
});
// const titleIconsPromise = generateTitleIcons(peerId).then((elements) => {
// titleSpanContainer.append(...elements);
// });
if(loadPromises) {
loadPromises.push(titleIconsPromise);
}
// if(loadPromises) {
// loadPromises.push(titleIconsPromise);
// }
//}
const span = document.createElement('span');

30
src/lib/appManagers/appUsersManager.ts

@ -503,21 +503,21 @@ export class AppUsersManager extends AppManager { @@ -503,21 +503,21 @@ export class AppUsersManager extends AppManager {
//user.sortStatus = user.pFlags.bot ? -1 : this.getUserStatusForSort(user.status);
let changedPhoto = false, changedTitle = false;
if(oldUser === undefined) {
this.users[userId] = user;
} else {
if(user.first_name !== oldUser.first_name
const changedTitle = user.first_name !== oldUser.first_name
|| user.last_name !== oldUser.last_name
|| user.username !== oldUser.username) {
changedTitle = true;
}
|| user.username !== oldUser.username;
const oldPhotoId = (oldUser.photo as UserProfilePhoto.userProfilePhoto)?.photo_id;
const newPhotoId = (user.photo as UserProfilePhoto.userProfilePhoto)?.photo_id;
if(oldPhotoId !== newPhotoId) {
changedPhoto = true;
}
const changedPhoto = oldPhotoId !== newPhotoId;
const changedAnyBadge = oldUser.pFlags.premium !== user.pFlags.premium ||
oldUser.pFlags.verified !== user.pFlags.verified ||
oldUser.pFlags.scam !== user.pFlags.scam ||
oldUser.pFlags.fake !== user.pFlags.fake;
/* if(user.pFlags.bot && user.bot_info_version !== oldUser.bot_info_version) {
@ -532,14 +532,14 @@ export class AppUsersManager extends AppManager { @@ -532,14 +532,14 @@ export class AppUsersManager extends AppManager {
if(wasContact !== newContact) {
this.onContactUpdated(userId, newContact, wasContact);
}
}
if(changedPhoto) {
this.rootScope.dispatchEvent('avatar_update', user.id.toPeerId());
}
if(changedTitle) {
this.rootScope.dispatchEvent('peer_title_edit', user.id.toPeerId());
if(changedPhoto) {
this.rootScope.dispatchEvent('avatar_update', user.id.toPeerId());
}
if(changedTitle || changedAnyBadge) {
this.rootScope.dispatchEvent('peer_title_edit', user.id.toPeerId());
}
}
this.checkPremium(user);

19
src/scss/partials/_chatlist.scss

@ -266,7 +266,9 @@ ul.chatlist { @@ -266,7 +266,9 @@ ul.chatlist {
//.user-title:after,
.user-title,
.message-status,
.text-highlight {
.text-highlight,
.premium-icon,
.verified-icon {
color: #fff;
}
@ -283,12 +285,15 @@ ul.chatlist { @@ -283,12 +285,15 @@ ul.chatlist {
color: rgba(255, 255, 255, .7);
}
.verified-background {
fill: #fff !important;
}
.verified-check {
fill: var(--primary-color) !important;
.verified-icon {
&-background {
fill: #fff !important;
}
&-check {
// fill: var(--primary-color) !important;
visibility: hidden;
}
}
.dialog-avatar.is-online:after,

24
src/scss/partials/_profile.scss

@ -111,11 +111,27 @@ @@ -111,11 +111,27 @@
--color: #fff;
}
.premium-icon {
color: #fff;
}
.verified-icon {
&-background {
fill: #fff;
}
&-check {
visibility: hidden;
}
}
.profile-name {
margin-bottom: -1px;
}
.profile-subtitle {
.profile-subtitle,
.verified-icon,
.premium-icon {
opacity: .7;
}
@ -302,9 +318,9 @@ @@ -302,9 +318,9 @@
@include text-overflow(false);
}
.verified-icon {
margin-bottom: 3px;
}
// .verified-icon {
// margin-bottom: 3px;
// }
.sidebar-left-section-content > & {
justify-content: center;

48
src/scss/style.scss

@ -1468,14 +1468,6 @@ hr { @@ -1468,14 +1468,6 @@ hr {
z-index: -1;
}
.verified-check {
fill: #fff;
}
.verified-background {
fill: #33a8e5;
}
.navigable-list {
.active {
background-color: var(--light-secondary-text-color);
@ -1591,18 +1583,35 @@ hr { @@ -1591,18 +1583,35 @@ hr {
}
.verified-icon {
flex: 0 0 auto;
width: 1.25rem;
height: 1.25rem;
margin-left: .125rem;
&-svg {
width: 1rem;
height: 1rem;
}
&-check {
fill: #fff;
}
&-background {
fill: var(--primary-color);
}
}
.verified-icon,
.premium-icon {
flex: 0 0 auto;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
margin-left: .125rem;
width: 1.25rem;
height: 1.25rem;
margin-left: .25rem;
line-height: 1 !important;
}
.premium-icon {
color: var(--primary-color);
margin-top: -.0625rem;
}
.badge-fake {
@ -1617,6 +1626,17 @@ hr { @@ -1617,6 +1626,17 @@ hr {
margin: 0 .25rem;
}
.peer-title {
&.with-icons {
display: flex;
align-items: center;
}
&-inner {
@include text-overflow();
}
}
.movable-element {
--size: .5rem;
position: relative;

61
src/scss/tgico/_style.scss

@ -3,9 +3,9 @@ @@ -3,9 +3,9 @@
@font-face {
font-family: '#{$tgico-font-family}';
src:
url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?js2svd') format('truetype'),
url('#{$tgico-font-path}/#{$tgico-font-family}.woff?js2svd') format('woff'),
url('#{$tgico-font-path}/#{$tgico-font-family}.svg?js2svd##{$tgico-font-family}') format('svg');
url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?h1cbu') format('truetype'),
url('#{$tgico-font-path}/#{$tgico-font-family}.woff?h1cbu') format('woff'),
url('#{$tgico-font-path}/#{$tgico-font-family}.svg?h1cbu##{$tgico-font-family}') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
@ -487,6 +487,36 @@ @@ -487,6 +487,36 @@
content: $tgico-left;
}
}
.tgico-limit_chat {
&:before {
content: $tgico-limit_chat;
}
}
.tgico-limit_chats {
&:before {
content: $tgico-limit_chats;
}
}
.tgico-limit_file {
&:before {
content: $tgico-limit_file;
}
}
.tgico-limit_folders {
&:before {
content: $tgico-limit_folders;
}
}
.tgico-limit_link {
&:before {
content: $tgico-limit_link;
}
}
.tgico-limit_pin {
&:before {
content: $tgico-limit_pin;
}
}
.tgico-link {
&:before {
content: $tgico-link;
@ -712,6 +742,26 @@ @@ -712,6 +742,26 @@
content: $tgico-poll;
}
}
.tgico-premium_addone {
&:before {
content: $tgico-premium_addone;
}
}
.tgico-premium_double {
&:before {
content: $tgico-premium_double;
}
}
.tgico-premium_lock {
&:before {
content: $tgico-premium_lock;
}
}
.tgico-premium_unlock {
&:before {
content: $tgico-premium_unlock;
}
}
.tgico-previous {
&:before {
content: $tgico-previous;
@ -867,6 +917,11 @@ @@ -867,6 +917,11 @@
content: $tgico-sport;
}
}
.tgico-star {
&:before {
content: $tgico-star;
}
}
.tgico-stickers {
&:before {
content: $tgico-stickers;

211
src/scss/tgico/_variables.scss

@ -89,104 +89,115 @@ $tgico-language: "\e957"; @@ -89,104 +89,115 @@ $tgico-language: "\e957";
$tgico-largepause: "\e958";
$tgico-largeplay: "\e959";
$tgico-left: "\e95a";
$tgico-link: "\e95b";
$tgico-listscreenshare: "\e95c";
$tgico-livelocation: "\e95d";
$tgico-location: "\e95e";
$tgico-lock: "\e95f";
$tgico-lockoff: "\e960";
$tgico-loginlogodesktop: "\e961";
$tgico-loginlogomobile: "\e962";
$tgico-logout: "\e963";
$tgico-mention: "\e964";
$tgico-menu: "\e965";
$tgico-message: "\e966";
$tgico-messageunread: "\e967";
$tgico-microphone: "\e968";
$tgico-microphone_crossed: "\e969";
$tgico-microphone_crossed_filled: "\e96a";
$tgico-microphone_filled: "\e96b";
$tgico-minus: "\e96c";
$tgico-monospace: "\e96d";
$tgico-more: "\e96e";
$tgico-mute: "\e96f";
$tgico-muted: "\e970";
$tgico-newchannel: "\e971";
$tgico-newchat_filled: "\e972";
$tgico-newgroup: "\e973";
$tgico-newprivate: "\e974";
$tgico-next: "\e975";
$tgico-noncontacts: "\e976";
$tgico-nosound: "\e977";
$tgico-passwordoff: "\e978";
$tgico-pause: "\e979";
$tgico-permissions: "\e97a";
$tgico-phone: "\e97b";
$tgico-pin: "\e97c";
$tgico-pinlist: "\e97d";
$tgico-pinned_filled: "\e97e";
$tgico-pinnedchat: "\e97f";
$tgico-pip: "\e980";
$tgico-play: "\e981";
$tgico-playback_05: "\e982";
$tgico-playback_15: "\e983";
$tgico-playback_1x: "\e984";
$tgico-playback_2x: "\e985";
$tgico-plus: "\e986";
$tgico-poll: "\e987";
$tgico-previous: "\e988";
$tgico-radiooff: "\e989";
$tgico-radioon: "\e98a";
$tgico-reactions: "\e98b";
$tgico-readchats: "\e98c";
$tgico-recent: "\e98d";
$tgico-replace: "\e98e";
$tgico-reply: "\e98f";
$tgico-reply_filled: "\e990";
$tgico-rightpanel: "\e991";
$tgico-rotate_left: "\e992";
$tgico-rotate_right: "\e993";
$tgico-saved: "\e994";
$tgico-savedmessages: "\e995";
$tgico-schedule: "\e996";
$tgico-scheduled: "\e997";
$tgico-search: "\e998";
$tgico-select: "\e999";
$tgico-send: "\e99a";
$tgico-send2: "\e99b";
$tgico-sending: "\e99c";
$tgico-sendingerror: "\e99d";
$tgico-settings: "\e99e";
$tgico-settings_filled: "\e99f";
$tgico-sharescreen_filled: "\e9a0";
$tgico-shipping: "\e9a1";
$tgico-shuffle: "\e9a2";
$tgico-smallscreen: "\e9a3";
$tgico-smile: "\e9a4";
$tgico-spoiler: "\e9a5";
$tgico-sport: "\e9a6";
$tgico-stickers: "\e9a7";
$tgico-stop: "\e9a8";
$tgico-strikethrough: "\e9a9";
$tgico-textedit: "\e9aa";
$tgico-tip: "\e9ab";
$tgico-tools: "\e9ac";
$tgico-unarchive: "\e9ad";
$tgico-underline: "\e9ae";
$tgico-unmute: "\e9af";
$tgico-unpin: "\e9b0";
$tgico-unread: "\e9b1";
$tgico-up: "\e9b2";
$tgico-user: "\e9b3";
$tgico-username: "\e9b4";
$tgico-videocamera: "\e9b5";
$tgico-videocamera_crossed_filled: "\e9b6";
$tgico-videocamera_filled: "\e9b7";
$tgico-videochat: "\e9b8";
$tgico-volume_down: "\e9b9";
$tgico-volume_mute: "\e9ba";
$tgico-volume_off: "\e9bb";
$tgico-volume_up: "\e9bc";
$tgico-zoomin: "\e9bd";
$tgico-zoomout: "\e9be";
$tgico-limit_chat: "\e95b";
$tgico-limit_chats: "\e95c";
$tgico-limit_file: "\e95d";
$tgico-limit_folders: "\e95e";
$tgico-limit_link: "\e95f";
$tgico-limit_pin: "\e960";
$tgico-link: "\e961";
$tgico-listscreenshare: "\e962";
$tgico-livelocation: "\e963";
$tgico-location: "\e964";
$tgico-lock: "\e965";
$tgico-lockoff: "\e966";
$tgico-loginlogodesktop: "\e967";
$tgico-loginlogomobile: "\e968";
$tgico-logout: "\e969";
$tgico-mention: "\e96a";
$tgico-menu: "\e96b";
$tgico-message: "\e96c";
$tgico-messageunread: "\e96d";
$tgico-microphone: "\e96e";
$tgico-microphone_crossed: "\e96f";
$tgico-microphone_crossed_filled: "\e970";
$tgico-microphone_filled: "\e971";
$tgico-minus: "\e972";
$tgico-monospace: "\e973";
$tgico-more: "\e974";
$tgico-mute: "\e975";
$tgico-muted: "\e976";
$tgico-newchannel: "\e977";
$tgico-newchat_filled: "\e978";
$tgico-newgroup: "\e979";
$tgico-newprivate: "\e97a";
$tgico-next: "\e97b";
$tgico-noncontacts: "\e97c";
$tgico-nosound: "\e97d";
$tgico-passwordoff: "\e97e";
$tgico-pause: "\e97f";
$tgico-permissions: "\e980";
$tgico-phone: "\e981";
$tgico-pin: "\e982";
$tgico-pinlist: "\e983";
$tgico-pinned_filled: "\e984";
$tgico-pinnedchat: "\e985";
$tgico-pip: "\e986";
$tgico-play: "\e987";
$tgico-playback_05: "\e988";
$tgico-playback_15: "\e989";
$tgico-playback_1x: "\e98a";
$tgico-playback_2x: "\e98b";
$tgico-plus: "\e98c";
$tgico-poll: "\e98d";
$tgico-premium_addone: "\e98e";
$tgico-premium_double: "\e98f";
$tgico-premium_lock: "\e990";
$tgico-premium_unlock: "\e991";
$tgico-previous: "\e992";
$tgico-radiooff: "\e993";
$tgico-radioon: "\e994";
$tgico-reactions: "\e995";
$tgico-readchats: "\e996";
$tgico-recent: "\e997";
$tgico-replace: "\e998";
$tgico-reply: "\e999";
$tgico-reply_filled: "\e99a";
$tgico-rightpanel: "\e99b";
$tgico-rotate_left: "\e99c";
$tgico-rotate_right: "\e99d";
$tgico-saved: "\e99e";
$tgico-savedmessages: "\e99f";
$tgico-schedule: "\e9a0";
$tgico-scheduled: "\e9a1";
$tgico-search: "\e9a2";
$tgico-select: "\e9a3";
$tgico-send: "\e9a4";
$tgico-send2: "\e9a5";
$tgico-sending: "\e9a6";
$tgico-sendingerror: "\e9a7";
$tgico-settings: "\e9a8";
$tgico-settings_filled: "\e9a9";
$tgico-sharescreen_filled: "\e9aa";
$tgico-shipping: "\e9ab";
$tgico-shuffle: "\e9ac";
$tgico-smallscreen: "\e9ad";
$tgico-smile: "\e9ae";
$tgico-spoiler: "\e9af";
$tgico-sport: "\e9b0";
$tgico-star: "\e9b1";
$tgico-stickers: "\e9b2";
$tgico-stop: "\e9b3";
$tgico-strikethrough: "\e9b4";
$tgico-textedit: "\e9b5";
$tgico-tip: "\e9b6";
$tgico-tools: "\e9b7";
$tgico-unarchive: "\e9b8";
$tgico-underline: "\e9b9";
$tgico-unmute: "\e9ba";
$tgico-unpin: "\e9bb";
$tgico-unread: "\e9bc";
$tgico-up: "\e9bd";
$tgico-user: "\e9be";
$tgico-username: "\e9bf";
$tgico-videocamera: "\e9c0";
$tgico-videocamera_crossed_filled: "\e9c1";
$tgico-videocamera_filled: "\e9c2";
$tgico-videochat: "\e9c3";
$tgico-volume_down: "\e9c4";
$tgico-volume_mute: "\e9c5";
$tgico-volume_off: "\e9c6";
$tgico-volume_up: "\e9c7";
$tgico-zoomin: "\e9c8";
$tgico-zoomout: "\e9c9";

Loading…
Cancel
Save