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

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

@ -35,7 +35,7 @@ import PeerTitle from "../peerTitle";
import StackedAvatars from "../stackedAvatars";
import { IS_APPLE } from "../../environment/userAgent";
import PopupReactedList from "../popups/reactedList";
import { ChatReactionsMenu } from "./reactionsMenu";
import { ChatReactionsMenu, REACTION_CONTAINER_SIZE } from "./reactionsMenu";
export default class ChatContextMenu {
private buttons: (ButtonMenuItemOptions & {verify: () => boolean, notDirect?: () => boolean, withSelection?: true, isSponsored?: true})[];
@ -176,13 +176,44 @@ export default class ChatContextMenu {
const initResult = this.init();
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';
//bubble.parentElement.append(element);
//appImManager.log('contextmenu', e, bubble, side);
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, () => {
if(reactionsMenu) {
reactionsMenu.container.classList.remove('is-visible');
}
this.mid = 0;
this.peerId = undefined;
this.target = null;
@ -194,6 +225,10 @@ export default class ChatContextMenu {
destroy();
}, 300);
});
if(isReactionsMenuVisible) {
reactionsMenu.container.classList.add('is-visible');
}
};
public cleanup() {
@ -572,7 +607,7 @@ export default class ChatContextMenu {
const position: 'horizontal' | 'vertical' = (IS_APPLE || IS_TOUCH_SUPPORTED)/* && false */ ? 'horizontal' : 'vertical';
reactionsMenu = this.reactionsMenu = new ChatReactionsMenu(this.appReactionsManager, position, this.middleware);
reactionsMenu.init(this.appMessagesManager.getGroupsFirstMessage(this.message));
element.prepend(reactionsMenu.widthContainer);
// element.prepend(reactionsMenu.widthContainer);
const size = 42;
const margin = 8;
@ -602,8 +637,10 @@ export default class ChatContextMenu {
},
destroy: () => {
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 REACTION_CLASS_NAME = REACTIONS_CLASS_NAME + '-reaction';
const REACTION_SIZE = 28;
const REACTION_SIZE = 26;
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;
@ -41,9 +41,9 @@ type ChatReactionsMenuPlayers = {
};
export class ChatReactionsMenu {
public widthContainer: HTMLElement;
private container: HTMLElement;
public container: HTMLElement;
private reactionsMap: Map<HTMLElement, ChatReactionsMenuPlayers>;
private scrollable: ScrollableBase;
public scrollable: ScrollableBase;
private animationGroup: string;
private middleware: ReturnType<typeof getMiddleware>;
private message: Message.message;
@ -67,11 +67,11 @@ export class ChatReactionsMenu {
reactionsScrollable.container.classList.add('no-scrollbar');
['big'].forEach(type => {
const bubble = document.createElement('div');
bubble.classList.add(REACTIONS_CLASS_NAME + '-bubble', REACTIONS_CLASS_NAME + '-bubble-' + type);
reactionsContainer.append(bubble);
});
// ['big'].forEach(type => {
// const bubble = document.createElement('div');
// bubble.classList.add(REACTIONS_CLASS_NAME + '-bubble', REACTIONS_CLASS_NAME + '-bubble-' + type);
// reactionsContainer.append(bubble);
// });
this.reactionsMap = new Map();
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;
// * Cache frames params

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

@ -66,7 +66,7 @@ avatar-element {
}
&.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 {

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

@ -95,15 +95,17 @@
.btn-menu {
visibility: hidden;
position: absolute;
background-color: var(--surface-color);
background-color: var(--menu-background-color);
z-index: 3;
top: 100%;
padding: .5rem 0;
padding: .3125rem 0;
border-radius: $border-radius-medium;
opacity: 0;
transform: scale(.8) !important;
transition: opacity var(--btn-menu-transition), transform var(--btn-menu-transition), visibility var(--btn-menu-transition);
font-size: 1rem;
backdrop-filter: var(--menu-backdrop-filter);
min-width: 11.25rem;
&/* ,
&-reactions */ {
@ -123,11 +125,11 @@
transform: scale3d(1, 1, 1) !important; // * scale3d (NOT scale) will fix jumping text
}
&:not(.active) {
/* &:not(.active) {
&, .btn-menu-item {
pointer-events: none !important;
}
}
} */
&.bottom-left {
right: 0;
@ -172,14 +174,14 @@
}
&-item {
--padding-left: 1rem;
--padding-right: 2.5rem;
--icon-margin: 1.5rem;
--icon-size: 1.5rem;
--padding-left: .75rem;
--padding-right: .75rem;
--icon-margin: 1.25rem;
--icon-size: 1.25rem;
display: flex;
position: relative;
padding: 0 var(--padding-right) 0 var(--padding-left);
height: 3rem;
height: 2rem;
cursor: pointer !important;
pointer-events: all !important;
color: var(--primary-text-color);
@ -189,7 +191,25 @@
// text-overflow: ellipsis;
align-items: center;
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();
@ -198,7 +218,7 @@
}
&:before {
color: var(--secondary-text-color);
color: var(--primary-text-color);
font-size: var(--icon-size);
}
@ -222,6 +242,7 @@
&,
&-fake {
margin-top: 1px;
pointer-events: none;
}
@ -299,7 +320,7 @@
&-footer {
height: 2.5rem;
background: var(--background-color-true);
// background: var(--background-color-true);
display: flex;
align-items: center;
justify-content: center;
@ -320,32 +341,42 @@
display: block !important;
}
.badge {
background-color: transparent;
color: var(--secondary-text-color);
}
&-reactions {
--inner-shadow-degree: 90deg;
max-width: 100%;
max-height: 100%;
height: inherit;
border-radius: var(--height);
background-color: var(--surface-color);
background-color: var(--menu-background-color);
position: absolute;
opacity: 0;
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 {
--height: 2.625rem;
--bubble-side-offset: -2.25rem;
--other-side-offset: -1.5rem;
--width: calc(100% + (var(--bubble-side-offset) + var(--other-side-offset)) * -1);
position: absolute;
top: calc((var(--height) + .5rem) * -1);
--height: 2.25rem;
--bubble-side-offset: 0rem;
--other-side-offset: 0rem;
--width: calc(var(--menu-width) + (var(--bubble-side-offset) + var(--other-side-offset)) * -1);
// position: absolute;
margin-top: calc((var(--height) + .5rem) * -1);
width: var(--width);
max-width: var(--width);
left: var(--other-side-offset);
margin-left: var(--other-side-offset);
// left: var(--bubble-side-offset);
display: flex;
justify-content: flex-end;
// justify-content: flex-end;
justify-content: flex-start;
height: var(--height);
position: fixed;
z-index: 4;
&-vertical {
top: var(--other-side-offset);
@ -440,7 +471,7 @@
}
&-reaction {
--size: 1.75rem;
--size: 1.625rem;
--padding-base: .25rem;
--padding-vertical: 0rem;
--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;
}
.contextmenu {
box-shadow: none !important;
filter: drop-shadow(0 .125rem .5rem var(--menu-box-shadow-color));
}
// .contextmenu {
// box-shadow: none !important;
// 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 {
@ -1169,7 +1183,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
.btn-menu {
top: auto;
bottom: calc(100% + 1.0625rem);
bottom: calc(100% + .5rem);
left: 3.125rem;
transform: scale(1) !important;
@ -1182,7 +1196,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
.checkbox {
&-field {
--size: 1.5rem;
--size: 1.25rem;
order: 0;
margin: 0 var(--icon-margin) 0 0;
}
@ -1194,7 +1208,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
}
&-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 {
svg {
width: 22px;
height: 22px;
}
font-size: 1.25rem;
}
/* &.is-group-first {

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

@ -317,7 +317,7 @@ input:focus, button:focus {
line-height: var(--height);
@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() {

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

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

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

@ -119,7 +119,7 @@
@include animation-level(2) {
.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;
--disabled-opacity: .3;
--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-weight-bold: 500;
@ -179,7 +181,7 @@ $chat-input-inner-padding-handhelds: .25rem;
--surface-color: #fff;
--scrollbar-color: rgba(0, 0, 0, .2);
--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-border-color: #dfe1e5;
@ -1373,16 +1375,17 @@ hr {
}
// ! TEMPORARY
.tgico-reply:before,
.tgico-attach:before,
.tgico-saved:before,
.tgico-phone:before,
// .tgico-reply:before,
// .tgico-attach:before,
// .tgico-saved:before,
// .tgico-phone:before,
.tgico-admin:before,
.tgico-message:before,
.tgico-fontsize:before,
.tgico-forward:before,
.tgico-reply_filled:before,
.tgico-forward_filled:before {
// .tgico-message:before,
.tgico-fontsize:before
// .tgico-forward:before,
// .tgico-reply_filled:before,
// .tgico-forward_filled:before {
{
font-size: 20px !important;
padding: 2px;
}

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

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