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

Blurred menu

Browse Source
This commit is contained in:
Eduard Kuzmenko 2022-06-07 16:28:50 +04:00
parent 7351cf6a1d
commit deca72fde3
13 changed files with 159 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/buttonMenu.ts
View File

@ -5,12 +5,12 @@
*/ */
import cancelEvent from "../helpers/dom/cancelEvent"; import cancelEvent from "../helpers/dom/cancelEvent";
import { AttachClickOptions, attachClickEvent, CLICK_EVENT_NAME } from "../helpers/dom/clickEvent"; import { AttachClickOptions, attachClickEvent } from "../helpers/dom/clickEvent";
import findUpClassName from "../helpers/dom/findUpClassName";
import ListenerSetter from "../helpers/listenerSetter"; import ListenerSetter from "../helpers/listenerSetter";
import { FormatterArguments, i18n, LangPackKey } from "../lib/langPack"; import { FormatterArguments, i18n, LangPackKey } from "../lib/langPack";
import CheckboxField from "./checkboxField"; import CheckboxField from "./checkboxField";
import { closeBtnMenu } from "./misc"; import { closeBtnMenu } from "./misc";
import ripple from "./ripple";
export type ButtonMenuItemOptions = { export type ButtonMenuItemOptions = {
icon?: string, icon?: string,
@ -33,7 +33,7 @@ const ButtonMenuItem = (options: ButtonMenuItemOptions) => {
const {icon, text, onClick, checkboxField, noCheckboxClickListener} = options; const {icon, text, onClick, checkboxField, noCheckboxClickListener} = options;
const el = document.createElement('div'); const el = document.createElement('div');
el.className = 'btn-menu-item rp-overflow' + (icon ? ' tgico-' + icon : ''); el.className = 'btn-menu-item rp-overflow' + (icon ? ' tgico-' + icon : '');
ripple(el); // ripple(el);
let textElement = options.textElement; let textElement = options.textElement;
if(!textElement) { if(!textElement) {
@ -49,6 +49,12 @@ const ButtonMenuItem = (options: ButtonMenuItemOptions) => {
// * cancel mobile keyboard close // * cancel mobile keyboard close
onClick && attachClickEvent(el, /* CLICK_EVENT_NAME !== 'click' || keepOpen ? */ (e) => { onClick && attachClickEvent(el, /* CLICK_EVENT_NAME !== 'click' || keepOpen ? */ (e) => {
cancelEvent(e); cancelEvent(e);
const menu = findUpClassName(e.target, 'btn-menu');
if(menu && !menu.classList.contains('active')) {
return;
}
const result = onClick(e); const result = onClick(e);
if(result === false) { if(result === false) {

45
src/components/chat/contextMenu.ts
View File

@ -35,7 +35,7 @@ import PeerTitle from "../peerTitle";
import StackedAvatars from "../stackedAvatars"; import StackedAvatars from "../stackedAvatars";
import { IS_APPLE } from "../../environment/userAgent"; import { IS_APPLE } from "../../environment/userAgent";
import PopupReactedList from "../popups/reactedList"; import PopupReactedList from "../popups/reactedList";
import { ChatReactionsMenu } from "./reactionsMenu"; import { ChatReactionsMenu, REACTION_CONTAINER_SIZE } from "./reactionsMenu";
export default class ChatContextMenu { export default class ChatContextMenu {
private buttons: (ButtonMenuItemOptions & {verify: () => boolean, notDirect?: () => boolean, withSelection?: true, isSponsored?: true})[]; private buttons: (ButtonMenuItemOptions & {verify: () => boolean, notDirect?: () => boolean, withSelection?: true, isSponsored?: true})[];
@ -176,13 +176,44 @@ export default class ChatContextMenu {
const initResult = this.init(); const initResult = this.init();
element = initResult.element; element = initResult.element;
const {cleanup, destroy, menuPadding} = initResult; const {cleanup, destroy, menuPadding, reactionsMenu} = initResult;
let isReactionsMenuVisible = false;
if(reactionsMenu) {
const className = 'is-visible';
isReactionsMenuVisible = reactionsMenu.container.classList.contains(className);
if(isReactionsMenuVisible) reactionsMenu.container.classList.remove(className);
const offsetWidth = element.offsetWidth;
// if(reactionsMenu.scrollable.container.scrollWidth > offsetWidth) {
const INNER_CONTAINER_PADDING = 8;
const visibleLength = (offsetWidth - INNER_CONTAINER_PADDING) / REACTION_CONTAINER_SIZE;
const nextVisiblePart = visibleLength % 1;
const MIN_NEXT_VISIBLE_PART = 0.65;
if(nextVisiblePart < MIN_NEXT_VISIBLE_PART) {
const minWidth = (offsetWidth + (MIN_NEXT_VISIBLE_PART - nextVisiblePart) * REACTION_CONTAINER_SIZE) | 0;
element.style.minWidth = minWidth + 'px';
}
// }
}
const side: 'left' | 'right' = bubble.classList.contains('is-in') ? 'left' : 'right'; const side: 'left' | 'right' = bubble.classList.contains('is-in') ? 'left' : 'right';
//bubble.parentElement.append(element); //bubble.parentElement.append(element);
//appImManager.log('contextmenu', e, bubble, side); //appImManager.log('contextmenu', e, bubble, side);
positionMenu((e as TouchEvent).touches ? (e as TouchEvent).touches[0] : e as MouseEvent, element, side, menuPadding); positionMenu((e as TouchEvent).touches ? (e as TouchEvent).touches[0] : e as MouseEvent, element, side, menuPadding);
if(reactionsMenu) {
reactionsMenu.widthContainer.style.top = element.style.top;
reactionsMenu.widthContainer.style.left = element.style.left;
reactionsMenu.widthContainer.style.setProperty('--menu-width', element.offsetWidth + 'px');
element.parentElement.append(reactionsMenu.widthContainer);
if(isReactionsMenuVisible) void reactionsMenu.container.offsetLeft; // reflow
}
openBtnMenu(element, () => { openBtnMenu(element, () => {
if(reactionsMenu) {
reactionsMenu.container.classList.remove('is-visible');
}
this.mid = 0; this.mid = 0;
this.peerId = undefined; this.peerId = undefined;
this.target = null; this.target = null;
@ -194,6 +225,10 @@ export default class ChatContextMenu {
destroy(); destroy();
}, 300); }, 300);
}); });
if(isReactionsMenuVisible) {
reactionsMenu.container.classList.add('is-visible');
}
}; };
public cleanup() { public cleanup() {
@ -572,7 +607,7 @@ export default class ChatContextMenu {
const position: 'horizontal' | 'vertical' = (IS_APPLE || IS_TOUCH_SUPPORTED)/* && false */ ? 'horizontal' : 'vertical'; const position: 'horizontal' | 'vertical' = (IS_APPLE || IS_TOUCH_SUPPORTED)/* && false */ ? 'horizontal' : 'vertical';
reactionsMenu = this.reactionsMenu = new ChatReactionsMenu(this.appReactionsManager, position, this.middleware); reactionsMenu = this.reactionsMenu = new ChatReactionsMenu(this.appReactionsManager, position, this.middleware);
reactionsMenu.init(this.appMessagesManager.getGroupsFirstMessage(this.message)); reactionsMenu.init(this.appMessagesManager.getGroupsFirstMessage(this.message));
element.prepend(reactionsMenu.widthContainer); // element.prepend(reactionsMenu.widthContainer);
const size = 42; const size = 42;
const margin = 8; const margin = 8;
@ -602,8 +637,10 @@ export default class ChatContextMenu {
}, },
destroy: () => { destroy: () => {
element.remove(); element.remove();
reactionsMenu.widthContainer.remove();
}, },
menuPadding menuPadding,
reactionsMenu
}; };
} }

18
src/components/chat/reactionsMenu.ts
View File

@ -26,9 +26,9 @@ import { wrapSticker } from "../wrappers";
const REACTIONS_CLASS_NAME = 'btn-menu-reactions'; const REACTIONS_CLASS_NAME = 'btn-menu-reactions';
const REACTION_CLASS_NAME = REACTIONS_CLASS_NAME + '-reaction'; const REACTION_CLASS_NAME = REACTIONS_CLASS_NAME + '-reaction';
const REACTION_SIZE = 28; const REACTION_SIZE = 26;
const PADDING = 4; const PADDING = 4;
const REACTION_CONTAINER_SIZE = REACTION_SIZE + PADDING * 2; export const REACTION_CONTAINER_SIZE = REACTION_SIZE + PADDING * 2;
const CAN_USE_TRANSFORM = !IS_SAFARI; const CAN_USE_TRANSFORM = !IS_SAFARI;
@ -41,9 +41,9 @@ type ChatReactionsMenuPlayers = {
}; };
export class ChatReactionsMenu { export class ChatReactionsMenu {
public widthContainer: HTMLElement; public widthContainer: HTMLElement;
private container: HTMLElement; public container: HTMLElement;
private reactionsMap: Map<HTMLElement, ChatReactionsMenuPlayers>; private reactionsMap: Map<HTMLElement, ChatReactionsMenuPlayers>;
private scrollable: ScrollableBase; public scrollable: ScrollableBase;
private animationGroup: string; private animationGroup: string;
private middleware: ReturnType<typeof getMiddleware>; private middleware: ReturnType<typeof getMiddleware>;
private message: Message.message; private message: Message.message;
@ -67,11 +67,11 @@ export class ChatReactionsMenu {
reactionsScrollable.container.classList.add('no-scrollbar'); reactionsScrollable.container.classList.add('no-scrollbar');
['big'].forEach(type => { // ['big'].forEach(type => {
const bubble = document.createElement('div'); // const bubble = document.createElement('div');
bubble.classList.add(REACTIONS_CLASS_NAME + '-bubble', REACTIONS_CLASS_NAME + '-bubble-' + type); // bubble.classList.add(REACTIONS_CLASS_NAME + '-bubble', REACTIONS_CLASS_NAME + '-bubble-' + type);
reactionsContainer.append(bubble); // reactionsContainer.append(bubble);
}); // });
this.reactionsMap = new Map(); this.reactionsMap = new Map();
this.animationGroup = 'CHAT-MENU-REACTIONS-' + Date.now(); this.animationGroup = 'CHAT-MENU-REACTIONS-' + Date.now();

3
src/lib/rlottie/rlottiePlayer.ts
View File

@ -209,6 +209,9 @@ export default class RLottiePlayer extends EventListenerBase<{
} }
} }
this.width = Math.round(this.width);
this.height = Math.round(this.height);
//options.noCache = true; //options.noCache = true;
// * Cache frames params // * Cache frames params

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

@ -66,7 +66,7 @@ avatar-element {
} }
&.tgico-saved:before { &.tgico-saved:before {
font-size: calc(21px / var(--multiplier)) !important; // ! IMPORTANT IS TEMPORARY font-size: calc(25px / var(--multiplier)) !important; // ! IMPORTANT IS TEMPORARY
} }
&.tgico-reply_filled:before { &.tgico-reply_filled:before {

77
src/scss/partials/_button.scss
View File

@ -95,15 +95,17 @@
.btn-menu { .btn-menu {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
background-color: var(--surface-color); background-color: var(--menu-background-color);
z-index: 3; z-index: 3;
top: 100%; top: 100%;
padding: .5rem 0; padding: .3125rem 0;
border-radius: $border-radius-medium; border-radius: $border-radius-medium;
opacity: 0; opacity: 0;
transform: scale(.8) !important; transform: scale(.8) !important;
transition: opacity var(--btn-menu-transition), transform var(--btn-menu-transition), visibility var(--btn-menu-transition); transition: opacity var(--btn-menu-transition), transform var(--btn-menu-transition), visibility var(--btn-menu-transition);
font-size: 1rem; font-size: 1rem;
backdrop-filter: var(--menu-backdrop-filter);
min-width: 11.25rem;
&/* , &/* ,
&-reactions */ { &-reactions */ {
@ -123,11 +125,11 @@
transform: scale3d(1, 1, 1) !important; // * scale3d (NOT scale) will fix jumping text transform: scale3d(1, 1, 1) !important; // * scale3d (NOT scale) will fix jumping text
} }
&:not(.active) { /* &:not(.active) {
&, .btn-menu-item { &, .btn-menu-item {
pointer-events: none !important; pointer-events: none !important;
} }
} } */
&.bottom-left { &.bottom-left {
right: 0; right: 0;
@ -172,14 +174,14 @@
} }
&-item { &-item {
--padding-left: 1rem; --padding-left: .75rem;
--padding-right: 2.5rem; --padding-right: .75rem;
--icon-margin: 1.5rem; --icon-margin: 1.25rem;
--icon-size: 1.5rem; --icon-size: 1.25rem;
display: flex; display: flex;
position: relative; position: relative;
padding: 0 var(--padding-right) 0 var(--padding-left); padding: 0 var(--padding-right) 0 var(--padding-left);
height: 3rem; height: 2rem;
cursor: pointer !important; cursor: pointer !important;
pointer-events: all !important; pointer-events: all !important;
color: var(--primary-text-color); color: var(--primary-text-color);
@ -189,7 +191,25 @@
// text-overflow: ellipsis; // text-overflow: ellipsis;
align-items: center; align-items: center;
text-align: left; text-align: left;
line-height: var(--line-height); font-size: var(--font-size-14);
line-height: var(--line-height-14);
border-radius: .3125rem;
margin: 0 .3125rem;
font-weight: 500;
transform: scale(1);
@include animation-level(2) {
transition: transform var(--btn-menu-transition);
}
&:active {
transform: scale(.96);
}
// background-blend-mode: overlay, normal;
// @include hover() {
// background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), rgba(0, 0, 0, 0.05);
// }
@include hover-background-effect(); @include hover-background-effect();
@ -198,7 +218,7 @@
} }
&:before { &:before {
color: var(--secondary-text-color); color: var(--primary-text-color);
font-size: var(--icon-size); font-size: var(--icon-size);
} }
@ -222,6 +242,7 @@
&, &,
&-fake { &-fake {
margin-top: 1px;
pointer-events: none; pointer-events: none;
} }
@ -299,7 +320,7 @@
&-footer { &-footer {
height: 2.5rem; height: 2.5rem;
background: var(--background-color-true); // background: var(--background-color-true);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -320,32 +341,42 @@
display: block !important; display: block !important;
} }
.badge {
background-color: transparent;
color: var(--secondary-text-color);
}
&-reactions { &-reactions {
--inner-shadow-degree: 90deg; --inner-shadow-degree: 90deg;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
height: inherit; height: inherit;
border-radius: var(--height); border-radius: var(--height);
background-color: var(--surface-color); background-color: var(--menu-background-color);
position: absolute; position: absolute;
opacity: 0; opacity: 0;
transform: scale(.8); transform: scale(.8);
// filter: drop-shadow(0 .125rem .5rem rgba(0, 0, 0, .24)); backdrop-filter: var(--menu-backdrop-filter);
filter: drop-shadow(0 .125rem .5rem rgba(0, 0, 0, .24));
transform-origin: bottom left;
&-container { &-container {
--height: 2.625rem; --height: 2.25rem;
--bubble-side-offset: -2.25rem; --bubble-side-offset: 0rem;
--other-side-offset: -1.5rem; --other-side-offset: 0rem;
--width: calc(100% + (var(--bubble-side-offset) + var(--other-side-offset)) * -1); --width: calc(var(--menu-width) + (var(--bubble-side-offset) + var(--other-side-offset)) * -1);
position: absolute; // position: absolute;
top: calc((var(--height) + .5rem) * -1); margin-top: calc((var(--height) + .5rem) * -1);
width: var(--width); width: var(--width);
max-width: var(--width); max-width: var(--width);
left: var(--other-side-offset); margin-left: var(--other-side-offset);
// left: var(--bubble-side-offset); // left: var(--bubble-side-offset);
display: flex; display: flex;
justify-content: flex-end; // justify-content: flex-end;
justify-content: flex-start;
height: var(--height); height: var(--height);
position: fixed;
z-index: 4;
&-vertical { &-vertical {
top: var(--other-side-offset); top: var(--other-side-offset);
@ -440,7 +471,7 @@
} }
&-reaction { &-reaction {
--size: 1.75rem; --size: 1.625rem;
--padding-base: .25rem; --padding-base: .25rem;
--padding-vertical: 0rem; --padding-vertical: 0rem;
--padding-horizontal: var(--padding-base); --padding-horizontal: var(--padding-base);

28
src/scss/partials/_chat.scss
View File

@ -776,10 +776,24 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
.contextmenu { // .contextmenu {
box-shadow: none !important; // box-shadow: none !important;
filter: drop-shadow(0 .125rem .5rem var(--menu-box-shadow-color)); // filter: drop-shadow(0 .125rem .5rem var(--menu-box-shadow-color));
} // background: none !important;
// backdrop-filter: none !important;
// &:before {
// content: " ";
// position: absolute;
// top: 0;
// right: 0;
// bottom: 0;
// left: 0;
// backdrop-filter: var(--menu-backdrop-filter);
// background-color: var(--menu-background-color);
// border-radius: inherit;
// }
// }
} }
.chat-input-wrapper { .chat-input-wrapper {
@ -1169,7 +1183,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
.btn-menu { .btn-menu {
top: auto; top: auto;
bottom: calc(100% + 1.0625rem); bottom: calc(100% + .5rem);
left: 3.125rem; left: 3.125rem;
transform: scale(1) !important; transform: scale(1) !important;
@ -1182,7 +1196,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
.checkbox { .checkbox {
&-field { &-field {
--size: 1.5rem; --size: 1.25rem;
order: 0; order: 0;
margin: 0 var(--icon-margin) 0 0; margin: 0 var(--icon-margin) 0 0;
} }
@ -1194,7 +1208,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
} }
&-check use { &-check use {
stroke: var(--primary-color); stroke: var(--primary-text-color);
} }
} }
} }

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

@ -461,10 +461,7 @@ $bubble-beside-button-width: 38px;
} }
.forward { .forward {
svg { font-size: 1.25rem;
width: 22px;
height: 22px;
}
} }
/* &.is-group-first { /* &.is-group-first {

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

@ -317,7 +317,7 @@ input:focus, button:focus {
line-height: var(--height); line-height: var(--height);
@include animation-level(2) { @include animation-level(2) {
transition: background-color .2s ease-in-out, border-color .2s ease-in-out; transition: /* background-color .2s ease-in-out, */border-color .2s ease-in-out;
} }
@include hover() { @include hover() {

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

@ -315,7 +315,7 @@
} }
.btn-menu-item { .btn-menu-item {
padding-right: 1rem; padding-right: .375rem;
} }
.archived-count:empty { .archived-count:empty {

2
src/scss/partials/pages/_chats.scss
View File

@ -119,7 +119,7 @@
@include animation-level(2) { @include animation-level(2) {
.main-column { .main-column {
transition: var(--tabs-transition); transition: transform var(--tabs-transition), filter var(--tabs-transition);;
} }
} }
} }

25
src/scss/style.scss
View File

@ -91,7 +91,9 @@ $chat-input-inner-padding-handhelds: .25rem;
--esg-sticker-size: 80px; --esg-sticker-size: 80px;
--disabled-opacity: .3; --disabled-opacity: .3;
--round-video-size: 280px; --round-video-size: 280px;
--menu-box-shadow: 0px 2px 8px 1px var(--menu-box-shadow-color); --menu-box-shadow: 0px 0px 10px var(--menu-box-shadow-color);
--menu-background-color: rgba(var(--surface-color-rgb), .75);
--menu-backdrop-filter: blur(50px);
--font-monospace: 'Roboto Mono', monospace; --font-monospace: 'Roboto Mono', monospace;
--font-weight-bold: 500; --font-weight-bold: 500;
@ -179,7 +181,7 @@ $chat-input-inner-padding-handhelds: .25rem;
--surface-color: #fff; --surface-color: #fff;
--scrollbar-color: rgba(0, 0, 0, .2); --scrollbar-color: rgba(0, 0, 0, .2);
--section-box-shadow-color: rgba(0, 0, 0, .06); --section-box-shadow-color: rgba(0, 0, 0, .06);
--menu-box-shadow-color: rgba(0, 0, 0, .24); --menu-box-shadow-color: rgba(0, 0, 0, .15);
--input-search-background-color: #fff; --input-search-background-color: #fff;
--input-search-border-color: #dfe1e5; --input-search-border-color: #dfe1e5;
@ -1373,16 +1375,17 @@ hr {
} }
// ! TEMPORARY // ! TEMPORARY
.tgico-reply:before, // .tgico-reply:before,
.tgico-attach:before, // .tgico-attach:before,
.tgico-saved:before, // .tgico-saved:before,
.tgico-phone:before, // .tgico-phone:before,
.tgico-admin:before, .tgico-admin:before,
.tgico-message:before, // .tgico-message:before,
.tgico-fontsize:before, .tgico-fontsize:before
.tgico-forward:before, // .tgico-forward:before,
.tgico-reply_filled:before, // .tgico-reply_filled:before,
.tgico-forward_filled:before { // .tgico-forward_filled:before {
{
font-size: 20px !important; font-size: 20px !important;
padding: 2px; padding: 2px;
} }

6
src/scss/tgico/_style.scss
View File

@ -3,9 +3,9 @@
@font-face { @font-face {
font-family: '#{$tgico-font-family}'; font-family: '#{$tgico-font-family}';
src: src:
url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?1mzumm') format('truetype'), url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?5o4186') format('truetype'),
url('#{$tgico-font-path}/#{$tgico-font-family}.woff?1mzumm') format('woff'), url('#{$tgico-font-path}/#{$tgico-font-family}.woff?5o4186') format('woff'),
url('#{$tgico-font-path}/#{$tgico-font-family}.svg?1mzumm##{$tgico-font-family}') format('svg'); url('#{$tgico-font-path}/#{$tgico-font-family}.svg?5o4186##{$tgico-font-family}') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;