Blurred menu

src/components/buttonMenu.ts

@@ -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) {

src/components/chat/contextMenu.ts

@@ -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
     };
   }
 

src/components/chat/reactionsMenu.ts

@@ -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();

src/lib/rlottie/rlottiePlayer.ts

@@ -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

src/scss/partials/_avatar.scss

@@ -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 {

src/scss/partials/_button.scss

@@ -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);

src/scss/partials/_chat.scss

@@ -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);
             }
           }
         }

src/scss/partials/_chatBubble.scss

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

src/scss/partials/_input.scss

@@ -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() {

src/scss/partials/_leftSidebar.scss

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

src/scss/partials/pages/_chats.scss

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

src/scss/style.scss

@@ -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;
 }

src/scss/tgico/_style.scss

@@ -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;