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

Refactored avatar sizes

Browse Source 
Restrict zoom on iOS
This commit is contained in:
Eduard Kuzmenko 2020-12-14 02:19:36 +02:00
parent 285e56f233
commit 6495440618
22 changed files with 146 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/appMediaViewer.ts
View File

@ -95,7 +95,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
this.author.container.classList.add(MEDIA_VIEWER_CLASSNAME + '-author', 'no-select');
this.author.avatarEl = new AvatarElement();
this.author.avatarEl.classList.add(MEDIA_VIEWER_CLASSNAME + '-userpic');
this.author.avatarEl.classList.add(MEDIA_VIEWER_CLASSNAME + '-userpic', 'avatar-44');
this.author.nameEl = document.createElement('div');
this.author.nameEl.classList.add(MEDIA_VIEWER_CLASSNAME + '-name');

14
src/components/appSearch.ts
View File

@ -174,7 +174,12 @@ export default class AppSearch {
//////////this.log('contacts peer', peer);
const {dom} = appDialogsManager.addDialog(peerId, group.list, false);
const {dom} = appDialogsManager.addDialogNew({
dialog: peerId,
container: group.list,
drawStatus: false,
avatarSize: 48
});
if(showMembersCount && (peer.participants_count || peer.participants)) {
const regExp = new RegExp(`(${escapeRegExp(query)}|${escapeRegExp(searchIndexManager.cleanSearchText(query))})`, 'gi');
@ -256,7 +261,12 @@ export default class AppSearch {
history.forEach((msgId: number) => {
const message = appMessagesManager.getMessage(msgId);
const {dialog, dom} = appDialogsManager.addDialog(message.peerId, this.scrollable/* searchGroup.list */, false);
const {dialog, dom} = appDialogsManager.addDialogNew({
dialog: message.peerId,
container: this.scrollable/* searchGroup.list */,
drawStatus: false,
avatarSize: 48
});
appDialogsManager.setLastMessage(dialog, message, dom, query);
});

9
src/components/appSelectPeers.ts
View File

@ -316,7 +316,13 @@ export default class AppSelectPeers {
}
peerIds.forEach(peerId => {
const {dom} = appDialogsManager.addDialog(peerId, this.scrollable, false, false);
const {dom} = appDialogsManager.addDialogNew({
dialog: peerId,
container: this.scrollable,
drawStatus: false,
rippleEnabled: false,
avatarSize: 48
});
if(this.multiSelect) {
const selected = this.selected.has(peerId);
@ -355,6 +361,7 @@ export default class AppSelectPeers {
const avatarEl = document.createElement('avatar-element');
avatarEl.classList.add('selector-user-avatar', 'tgico');
avatarEl.setAttribute('dialog', '1');
avatarEl.classList.add('avatar-32');
div.dataset.key = '' + peerId;
if(typeof(peerId) === 'number') {

4
src/components/chat/markupTooltip.ts
View File

@ -130,6 +130,10 @@ export default class MarkupTooltip {
this.wrapper.append(tools1, tools2);
this.container.append(this.wrapper);
document.body.append(this.container);
window.addEventListener('resize', () => {
this.hide();
});
}
private applyLink(e: Event) {

1
src/components/chat/topbar.ts
View File

@ -144,6 +144,7 @@ export default class ChatTopbar {
this.avatarElement = new AvatarElement();
this.avatarElement.setAttribute('dialog', '1');
this.avatarElement.setAttribute('clickable', '');
this.avatarElement.classList.add('avatar-40');
this.subtitle = document.createElement('div');
this.subtitle.classList.add('info');

16
src/components/sidebarLeft/index.ts
View File

@ -217,7 +217,13 @@ export class AppSidebarLeft extends SidebarSlider {
//console.log('got top categories:', categories);
if(peers.length) {
peers.forEach((peerId) => {
appDialogsManager.addDialog(peerId, this.searchGroups.people.list, false, true, true);
appDialogsManager.addDialogNew({
dialog: peerId,
container: this.searchGroups.people.list,
drawStatus: false,
onlyFirstName: true,
avatarSize: 54
});
});
}
@ -347,7 +353,13 @@ export class AppSidebarLeft extends SidebarSlider {
this.recentSearchClearBtn.style.display = this.recentSearch.length ? '' : 'none';
this.recentSearch.slice(0, 20).forEach(peerId => {
let {dialog, dom} = appDialogsManager.addDialog(peerId, this.searchGroups.recent.list, false, true, false, true);
let {dialog, dom} = appDialogsManager.addDialogNew({
dialog: peerId,
container: this.searchGroups.recent.list,
drawStatus: false,
meAsSaved: true,
avatarSize: 48
});
dom.lastMessageSpan.innerText = peerId > 0 ? appUsersManager.getUserStatusString(peerId) : appChatsManager.getChatMembersString(peerId);
});

7
src/components/sidebarLeft/tabs/contacts.ts
View File

@ -90,7 +90,12 @@ export default class AppContactsTab implements SliderTab {
let arr = sorted.splice(0, pageCount); // надо splice!
arr.forEach(({user}) => {
let {dialog, dom} = appDialogsManager.addDialog(user.id, this.list, false);
let {dialog, dom} = appDialogsManager.addDialogNew({
dialog: user.id,
container: this.list,
drawStatus: false,
avatarSize: 48
});
let status = appUsersManager.getUserStatusString(user.id);
dom.lastMessageSpan.innerHTML = status == 'online' ? `<i>${status}</i>` : status;

9
src/components/sidebarLeft/tabs/editFolder.ts
View File

@ -189,7 +189,14 @@ export default class AppEditFolderTab implements SliderTab {
for(let i = 0, length = Math.min(peers.length, _length); i < length; ++i) {
const peerId = peers.shift();
const {dom} = appDialogsManager.addDialog(peerId, ul, false, false, undefined, true);
const {dom} = appDialogsManager.addDialogNew({
dialog: peerId,
container: ul,
drawStatus: false,
rippleEnabled: false,
meAsSaved: true,
avatarSize: 32
});
dom.lastMessageSpan.parentElement.remove();
}

8
src/components/sidebarLeft/tabs/includedChats.ts
View File

@ -101,7 +101,13 @@ export default class AppIncludedChatsTab implements SliderTab {
peerIds.forEach(peerId => {
//if(other.includes(peerId)) return;
const {dom} = appDialogsManager.addDialog(peerId, this.selector.scrollable, false, false);
const {dom} = appDialogsManager.addDialogNew({
dialog: peerId,
container: this.selector.scrollable,
drawStatus: false,
rippleEnabled: false,
avatarSize: 46
});
const selected = this.selector.selected.has(peerId);
dom.containerEl.insertAdjacentHTML('beforeend', this.checkbox(selected));

8
src/components/sidebarLeft/tabs/newGroup.ts
View File

@ -75,7 +75,13 @@ export default class AppNewGroupTab implements SliderTab {
appSidebarLeft.selectTab(AppSidebarLeft.SLIDERITEMSIDS.newGroup);
this.userIds.forEach(userId => {
let {dom} = appDialogsManager.addDialog(userId, this.searchGroup.list, false, false);
let {dom} = appDialogsManager.addDialogNew({
dialog: userId,
container: this.searchGroup.list,
drawStatus: false,
rippleEnabled: false,
avatarSize: 48
});
let subtitle = '';
subtitle = appUsersManager.getUserStatusString(userId);

9
src/components/sidebarRight/tabs/pollResults.ts
View File

@ -88,7 +88,14 @@ export default class AppPollResultsTab implements SliderTab {
appPollsManager.getVotes(mid, answer.option, offset, limit).then(votesList => {
votesList.votes.forEach(vote => {
const {dom} = appDialogsManager.addDialog(vote.user_id, list, false, false, undefined, false);
const {dom} = appDialogsManager.addDialogNew({
dialog: vote.user_id,
container: list,
drawStatus: false,
rippleEnabled: false,
meAsSaved: false,
avatarSize: 32
});
dom.lastMessageSpan.parentElement.remove();
});

6
src/index.hbs
View File

@ -5,7 +5,7 @@
<meta charset="utf-8">
<title>Telegram Web</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
@ -262,7 +262,7 @@
</div>
<div class="sidebar-content">
<div class="profile-content-wrapper scrollable scrollable-y">
<avatar-element class="profile-avatar" clickable></avatar-element>
<avatar-element class="profile-avatar avatar-120" clickable></avatar-element>
<div class="profile-name"></div>
<div class="profile-subtitle"></div>
<div class="profile-buttons">
@ -385,7 +385,7 @@
</div>
<div class="profile-content">
<div class="profile-content-wrapper">
<avatar-element class="profile-avatar" dialog="1" clickable></avatar-element>
<avatar-element class="profile-avatar avatar-120" dialog="1" clickable></avatar-element>
<div class="profile-name"></div>
<div class="profile-subtitle"></div>

9
src/lib/appManagers/appDialogsManager.ts
View File

@ -1108,12 +1108,13 @@ export class AppDialogsManager {
rippleEnabled?: boolean,
onlyFirstName?: boolean,
meAsSaved?: boolean,
append?: boolean
append?: boolean,
avatarSize?: number
}) {
return this.addDialog(options.dialog, options.container, options.drawStatus, options.rippleEnabled, options.onlyFirstName, options.meAsSaved, options.append);
return this.addDialog(options.dialog, options.container, options.drawStatus, options.rippleEnabled, options.onlyFirstName, options.meAsSaved, options.append, options.avatarSize);
}
public addDialog(_dialog: Dialog | number, container?: HTMLUListElement | Scrollable, drawStatus = true, rippleEnabled = true, onlyFirstName = false, meAsSaved = true, append = true) {
public addDialog(_dialog: Dialog | number, container?: HTMLUListElement | Scrollable, drawStatus = true, rippleEnabled = true, onlyFirstName = false, meAsSaved = true, append = true, avatarSize = 54) {
let dialog: Dialog;
if(typeof(_dialog) === 'number') {
@ -1147,7 +1148,7 @@ export class AppDialogsManager {
const avatarEl = new AvatarElement();
avatarEl.setAttribute('dialog', meAsSaved ? '1' : '0');
avatarEl.setAttribute('peer', '' + peerId);
avatarEl.classList.add('dialog-avatar');
avatarEl.classList.add('dialog-avatar', 'avatar-' + avatarSize);
if(drawStatus && peerId != rootScope.myId && dialog.peer) {
const peer = dialog.peer;

73
src/scss/partials/_avatar.scss
View File

@ -1,19 +1,25 @@
avatar-element {
--size: 54px;
--multiplier: 1;
color: #fff;
width: 54px;
height: 54px;
line-height: 54px;
width: var(--size);
height: var(--size);
line-height: var(--size);
border-radius: 50%;
background-color: $color-blue;
text-align: center;
font-size: 1.25em;
font-size: calc(1.25rem / var(--multiplier));
/* overflow: hidden; */
position: relative;
user-select: none;
text-transform: uppercase;
@include respond-to(handhelds) {
font-size: 14px;
&.tgico-savedmessages:before {
font-size: calc(26px / var(--multiplier));
}
&.tgico-avatar_deletedaccount:before {
font-size: calc(56px / var(--multiplier));
}
/* kostil */
@ -32,11 +38,6 @@ avatar-element {
}
}
&[class*=" tgico-"] {
line-height: 52px;
font-size: 28px;
}
path {
fill: white;
}
@ -54,11 +55,51 @@ avatar-element {
height: 14px;
}
&.tgico-avatar_deletedaccount {
font-size: 3rem;
}
&[clickable] {
cursor: pointer;
}
/* &.avatar-54 {
width: 54px;
height: 54px;
line-height: 54px;
font-size: 1.25rem;
&.tgico-savedmessages:before {
font-size: 26px;
}
&.tgico-avatar_deletedaccount:before {
font-size: 56px;
}
} */
&.avatar-120 {
--size: 120px;
--multiplier: 0.45;
}
&.avatar-48 {
--size: 48px;
--multiplier: 1.125;
}
&.avatar-46 {
--size: 46px;
--multiplier: 1.173913;
}
&.avatar-44 {
--size: 44px;
--multiplier: 1.227272;
}
&.avatar-40 {
--size: 40px;
--multiplier: 1.35;
}
&.avatar-32 {
--size: 32px;
--multiplier: 1.6875;
}
}

5
src/scss/partials/_chatBubble.scss
View File

@ -1302,6 +1302,7 @@ $bubble-margin: .25rem;
pointer-events: none; // do not show title
display: inline-flex;
z-index: 1;
cursor: default;
/* display: inline-flex;
align-items: center; */
@ -1473,7 +1474,7 @@ $bubble-margin: .25rem;
}
audio-element, poll-element {
white-space: nowrap; // * fix due to .message white-space prewrap
white-space: normal; // * fix due to .message white-space prewrap
}
}
@ -1744,7 +1745,7 @@ $bubble-margin: .25rem;
.time {
padding-right: 4px;
margin-left: -4px;
margin-left: -3px;
.inner {
color: $darkgreen;

17
src/scss/partials/_chatTopbar.scss
View File

@ -202,23 +202,6 @@
}
}
avatar-element {
width: 40px;
height: 40px;
line-height: 40px;
//font-size: 16px;
font-size: 16px;
flex: 0 0 auto;
&:before {
font-size: 20px;
}
&.tgico-avatar_deletedaccount:before {
font-size: 40px;
}
}
&.hide-pinned + .bubbles {
.bubbles-inner {
margin-bottom: .25rem;

5
src/scss/partials/_chatlist.scss
View File

@ -327,11 +327,6 @@
// use together like class="chatlist-container contacts-container"
.contacts-container, .search-group-contacts {
.dialog-avatar {
width: 48px;
height: 48px;
}
li {
//margin-bottom: 2px;
padding-bottom: 4px;

20
src/scss/partials/_leftSidebar.scss
View File

@ -211,11 +211,6 @@
max-width: 77px;
}
}
.dialog-avatar {
width: 54px;
height: 54px;
}
.dialog-title-details {
display: none;
@ -610,12 +605,6 @@
}
}
avatar-element {
height: 2rem;
width: 2rem;
font-size: .875rem;
}
.user-caption {
padding: 6px 28px;
}
@ -695,11 +684,6 @@
}
}
.dialog-avatar {
width: 2.875rem;
height: 2.875rem;
}
.user-caption {
padding: 0px 0px 0 14px;
margin-top: -2px;
@ -792,8 +776,8 @@
}
.dialog-avatar {
width: 46px;
height: 46px;
--size: 46px;
--multiplier: 1.173913;
}
li > .rp {

2
src/scss/partials/_mediaViewer.scss
View File

@ -37,8 +37,6 @@ $move-duration: .35s;
}
&-userpic {
width: 2.75rem;
height: 2.75rem;
position: absolute;
top: .5rem;
left: 1.25rem;

12
src/scss/partials/_rightSidebar.scss
View File

@ -221,10 +221,7 @@
}
&-avatar {
width: 120px;
height: 120px;
margin: 1px auto 10px;
font-size: 2.5rem !important;
//flex: 0 0 auto;
@include respond-to(handhelds) {
@ -232,10 +229,6 @@
width: 100px;
height: 100px;
}
&.tgico-avatar_deletedaccount {
font-size: 6rem !important;
}
}
&-name, &-subtitle, &-row, &-avatar {
@ -691,11 +684,6 @@
margin-top: 7px;
}
avatar-element {
width: 32px;
height: 32px;
}
.user-caption {
padding: 6px 28px;
}

8
src/scss/partials/_selector.scss
View File

@ -82,12 +82,9 @@
}
&-avatar {
height: 32px !important;
width: 32px !important;
float: left;
margin-right: 8px;
overflow: hidden;
font-size: 14px;
html.is-safari & {
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
@ -117,11 +114,6 @@
}
ul {
.dialog-avatar {
height: 48px;
width: 48px;
}
.user-caption {
padding: 1px 3.5px 1px 12px;
}

12
src/scss/style.scss
View File

@ -797,18 +797,6 @@ img.emoji {
}
}
#folders-container .rp avatar-element {
font-size: 20px;
&:before {
font-size: 26px;
}
&.tgico-avatar_deletedaccount:before {
font-size: 56px;
}
}
// .message .audio .preloader-container {
// @include respond-to(handhelds) {
// width: 30px;