Reactions menu fixes

src/components/chat/contextMenu.ts

@@ -176,24 +176,26 @@ export default class ChatContextMenu {
 
     const initResult = this.init();
     element = initResult.element;
-    const {cleanup, destroy, menuPadding, reactionsMenu} = initResult;
+    const {cleanup, destroy, menuPadding, reactionsMenu, reactionsMenuPosition} = 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';
-        }
-      // }
+      if(reactionsMenuPosition === 'horizontal') {
+        const offsetSize = element[/* reactionsMenuPosition === 'vertical' ? 'offsetHeight' :  */'offsetWidth'];
+        // if(reactionsMenu.scrollable.container.scrollWidth > offsetWidth) {
+          const INNER_CONTAINER_PADDING = 8;
+          const visibleLength = (offsetSize - INNER_CONTAINER_PADDING) / REACTION_CONTAINER_SIZE;
+          const nextVisiblePart = visibleLength % 1;
+          const MIN_NEXT_VISIBLE_PART = 0.65;
+          if(nextVisiblePart < MIN_NEXT_VISIBLE_PART) {
+            const minSize = (offsetSize + (MIN_NEXT_VISIBLE_PART - nextVisiblePart) * REACTION_CONTAINER_SIZE) | 0;
+            element.style[/* reactionsMenuPosition === 'vertical' ? 'minHeight' :  */'minWidth'] = minSize + 'px';
+          }
+        // }
+      }
     }
     
     const side: 'left' | 'right' = bubble.classList.contains('is-in') ? 'left' : 'right';
@@ -204,7 +206,7 @@ export default class ChatContextMenu {
     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');
+      reactionsMenu.widthContainer.style.setProperty('--menu-width', element[reactionsMenuPosition === 'vertical' ? 'offsetHeight' : 'offsetWidth'] + 'px');
       element.parentElement.append(reactionsMenu.widthContainer);
       if(isReactionsMenuVisible) void reactionsMenu.container.offsetLeft; // reflow
     }
@@ -603,26 +605,28 @@ export default class ChatContextMenu {
 
     let menuPadding: MenuPositionPadding;
     let reactionsMenu: ChatReactionsMenu;
+    let reactionsMenuPosition: 'horizontal' | 'vertical';
     if(this.message._ === 'message' && !this.chat.selection.isSelecting && !this.message.pFlags.is_outgoing && !this.message.pFlags.is_scheduled) {
-      const position: 'horizontal' | 'vertical' = (IS_APPLE || IS_TOUCH_SUPPORTED)/*  && false */ ? 'horizontal' : 'vertical';
-      reactionsMenu = this.reactionsMenu = new ChatReactionsMenu(this.appReactionsManager, position, this.middleware);
+      reactionsMenuPosition = (IS_APPLE || IS_TOUCH_SUPPORTED)/*  && false */ ? 'horizontal' : 'vertical';
+      reactionsMenu = this.reactionsMenu = new ChatReactionsMenu(this.appReactionsManager, reactionsMenuPosition, this.middleware);
       reactionsMenu.init(this.appMessagesManager.getGroupsFirstMessage(this.message));
       // element.prepend(reactionsMenu.widthContainer);
 
-      const size = 42;
+      const size = 36;
       const margin = 8;
       const totalSize = size + margin;
-      if(position === 'vertical') {
+      const paddingLeft = 0, paddingRight = 0;
+      if(reactionsMenuPosition === 'vertical') {
         menuPadding = {
-          top: 24,
+          top: paddingLeft,
           // bottom: 36, // positionMenu will detect it itself somehow
           left: totalSize
         };
       } else {
         menuPadding = {
           top: totalSize,
-          right: 36,
-          left: 24
+          right: paddingRight,
+          left: paddingLeft
         };
       }
     }
@@ -640,7 +644,8 @@ export default class ChatContextMenu {
         reactionsMenu.widthContainer.remove();
       },
       menuPadding,
-      reactionsMenu
+      reactionsMenu,
+      reactionsMenuPosition
     };
   }
 

src/components/chat/input.ts

@@ -1418,7 +1418,7 @@ export default class ChatInput {
     buttons.forEach((button, idx) => {
       const peerId = peerIds[idx];
       const avatar = new AvatarElement();
-      avatar.classList.add('avatar-32', 'btn-menu-item-icon');
+      avatar.classList.add('avatar-26', 'btn-menu-item-icon');
       avatar.updateWithOptions({peerId});
 
       if(!idx) {

src/index.ts

@@ -124,8 +124,15 @@ document.addEventListener('DOMContentLoaded', async() => {
     }
   });
 
+  // restrict contextmenu on images (e.g. webp stickers)
+  document.addEventListener('contextmenu', (e) => {
+    if((e.target as HTMLElement).tagName === 'IMG' && !(window as any).appMediaViewer) {
+      cancelEvent(e);
+    }
+  });
+
   if(IS_FIREFOX) {
-    document.documentElement.classList.add('is-firefox');
+    document.documentElement.classList.add('is-firefox', 'no-backdrop');
   }
 
   if(IS_MOBILE) {

src/scss/components/_global.scss

@@ -25,7 +25,8 @@ a {
   -webkit-tap-highlight-color: transparent;
 }
 
-img, video {
+img, 
+video {
   -webkit-user-drag: none;
 }
 

src/scss/partials/_avatar.scss

@@ -209,6 +209,11 @@ avatar-element {
     --multiplier: 1.6875;
   }
 
+  &.avatar-26 {
+    --size: 26px;
+    --multiplier: 2.076923;
+  }
+
   &.avatar-24 {
     --size: 24px;
     --multiplier: 2.25;

src/scss/partials/_button.scss

@@ -107,6 +107,31 @@
   backdrop-filter: var(--menu-backdrop-filter);
   min-width: 11.25rem;
 
+  &-old {
+    padding: .5rem 0;
+    background-color: var(--surface-color);
+    backdrop-filter: none;
+    min-width: auto;
+
+    .btn-menu-item {
+      --padding-left: 1rem;
+      --padding-right: 2.5rem;
+      --icon-margin: 1.5rem;
+      --icon-size: 1.5rem;
+      height: 3rem;
+      line-height: var(--line-height-16);
+      font-size: var(--font-size-16);
+      border-radius: 0;
+      margin: 0;
+      font-weight: 400;
+      transform: none !important;
+
+      &:before {
+        color: var(--secondary-text-color);
+      }
+    }
+  }
+
   &/* ,
   &-reactions */ {
     box-shadow: var(--menu-box-shadow);
@@ -262,7 +287,7 @@
     }
 
     &-header {
-      color: var(--primary-color);
+      color: var(--secondary-text-color);
       height: 2rem;
       font-weight: var(--font-weight-bold);
       pointer-events: none !important;
@@ -364,9 +389,10 @@
       --height: 2.25rem;
       --bubble-side-offset: 0rem;
       --other-side-offset: 0rem;
+      --menu-offset: calc((var(--height) + .5rem) * -1);
       --width: calc(var(--menu-width) + (var(--bubble-side-offset) + var(--other-side-offset)) * -1);
       // position: absolute;
-      margin-top: calc((var(--height) + .5rem) * -1);
+      margin-top: var(--menu-offset);
       width: var(--width);
       max-width: var(--width);
       margin-left: var(--other-side-offset);
@@ -378,14 +404,29 @@
       position: fixed;
       z-index: 4;
 
+      .contextmenu.center-left + &,
+      .contextmenu.bottom-left + & {
+        .btn-menu-reactions {
+          transform-origin: bottom right !important;
+        }
+      }
+
+      .contextmenu.bottom-center + & {
+        .btn-menu-reactions {
+          transform-origin: bottom center !important;
+        }
+      }
+
       &-vertical {
-        top: var(--other-side-offset);
-        left: calc((var(--height) + .5rem) * -1);
+        // top: var(--other-side-offset);
+        // left: calc((var(--height) + .5rem) * -1);
         width: var(--height);
         height: var(--width);
         max-width: var(--height);
         max-height: var(--width);
         flex-direction: column;
+        margin-top: 0;
+        margin-left: var(--menu-offset);
         
         .btn-menu-reactions {
           --inner-shadow-degree: 180deg;
@@ -393,6 +434,7 @@
           height: auto;
           display: flex;
           flex-direction: column;
+          transform-origin: top right;
         }
 
         .btn-menu-reactions-reaction {

src/scss/partials/_chat.scss

@@ -1314,24 +1314,40 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
           transform: scale3d(1, 1, 1);
 
           &-item {
+            height: 2.25rem;
+
+            &-header {
+              height: 1.875rem;
+            }
+
             &-icon {
               margin-right: calc(var(--icon-margin) - .5rem);
 
               &.active:before {
-                --offset: -.25rem;
+                --offset: -.125rem;
                 content: " ";
                 position: absolute;
                 top: var(--offset);
                 right: var(--offset);
                 bottom: var(--offset);
                 left: var(--offset);
-                border: .125rem solid var(--primary-color);
+                border: .0625rem solid var(--primary-color);
                 border-radius: 50%;
               }
             }
 
             &-text {
               @include text-overflow();
+              // font-size: .875rem !important;
+              line-height: 1 !important;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+            }
+
+            &-subtitle {
+              font-size: .8125rem;
+              font-weight: 400;
             }
           }
         }

src/scss/partials/_scrollable.scss

@@ -31,6 +31,10 @@ html:not(.is-safari):not(.is-ios) {
   ::-webkit-scrollbar-corner {
     background-color: transparent;
   }
+
+  .scrollable:hover {
+    scrollbar-color: var(--scrollbar-color) rgba(0, 0, 0, 0);
+  }
   
   .scrollable:hover::-webkit-scrollbar {
     opacity: 1; // for safari
@@ -81,7 +85,7 @@ html:not(.is-safari):not(.is-ios) {
 
   &.scrollable-x {
     overflow-x: auto;
-    scrollbar-width: thin; // Firefox only
+    scrollbar-width: none; // Firefox only
     -ms-overflow-style: none;
   }
 
@@ -89,6 +93,8 @@ html:not(.is-safari):not(.is-ios) {
     overflow-y: auto;
     overflow-y: overlay;
     scrollbar-width: thin; // Firefox only
+    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
+    transition: scrollbar-color .3s ease;
     -ms-overflow-style: none;
     transform: translateZ(0);
 

src/scss/style.scss

@@ -404,6 +404,11 @@ html.is-ios {
   -webkit-touch-callout: none;
 }
 
+html.no-backdrop {
+  --menu-background-color: var(--surface-color);
+  --menu-backdrop-filter: none;
+}
+
 @supports(padding: unquote('max(0px)')) {
   html {
     padding: 0 unquote('min(16px, env(safe-area-inset-right))') 0 unquote('min(16px, env(safe-area-inset-left))');