Contextmenu left trigger fix for messageview

stylesheets/_modules.scss

@@ -1421,8 +1421,6 @@
 // Module: Conversation Header
 
 .module-conversation-header {
-  padding-left: 16px;
-  padding-right: 16px;
   display: flex;
   flex-direction: row;
   align-items: center;

stylesheets/_session.scss

@@ -430,7 +430,7 @@ $session-element-border-green: 4px solid $session-color-green;
 
 @mixin standard-icon-button() {
   color: $session-color-white;
-  opacity: 0.9;
+  opacity: 0.6;
 
   &:hover {
     opacity: 1;
@@ -439,6 +439,7 @@ $session-element-border-green: 4px solid $session-color-green;
 
 .module-conversation-header__title-flex,
 .module-conversation-header__title {
+  font-family: Wasa;
   width: 100%;
   display: flex;
 
@@ -489,9 +490,9 @@ label {
   @include standard-icon-button();
 }
 
-.module-conversation-header,
-.message-selection-overlay {
-  height: $session-conversation-header-height;
+.module-conversation-header {
+  position: relative;
+  padding: 0px $session-margin-lg 0px $session-margin-sm
 }
 
 .title-wrapper {
@@ -1176,4 +1177,5 @@ button.module-scroll-down {
   &-selected {
     background-color: $session-shade-8;
   }
-}
+}
+

ts/components/conversation/ConversationHeader.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Avatar } from '../Avatar';
 import { Colors, LocalizerType } from '../../types/Util';
-import { ContextMenu, MenuItem, SubMenu } from 'react-contextmenu';
+import { ContextMenu, ContextMenuTrigger, MenuItem, SubMenu } from 'react-contextmenu';
 
 import {
   SessionIconButton,
@@ -243,7 +243,7 @@ export class ConversationHeader extends React.Component<Props> {
     );
   }
 
-  public renderOptions() {
+  public renderOptions(triggerId: string) {
     const { showBackButton } = this.props;
 
     if (showBackButton) {
@@ -251,12 +251,13 @@ export class ConversationHeader extends React.Component<Props> {
     }
 
     return (
-      <>
-        <SessionIconButton
-          iconType={SessionIconType.Ellipses}
-          iconSize={SessionIconSize.Large}
-        />
-      </>
+      <ContextMenuTrigger id={triggerId} ref={this.menuTriggerRef} holdToDisplay={1}>
+          <SessionIconButton
+            iconType={SessionIconType.Ellipses}
+            iconSize={SessionIconSize.Large}
+            onClick={this.showMenuBound}
+          />
+      </ContextMenuTrigger>
     );
   }
 
@@ -277,7 +278,7 @@ export class ConversationHeader extends React.Component<Props> {
 
     const isPrivateGroup = isGroup && !isPublic;
 
-    const copyIdLabel = isGroup ? i18n('copyChatId') : i18n('copyPublicKey');
+    const copyIdLabel = isGroup ? i18n('copyChatId') : i18n('copyPublicKey');   
 
     return (
       <ContextMenu id={triggerId}>
@@ -347,7 +348,7 @@ export class ConversationHeader extends React.Component<Props> {
           {this.renderBackButton()}
           <div className="module-conversation-header__title-container">
             <div className="module-conversation-header__title-flex">
-              {this.renderOptions()}
+              {this.renderOptions(triggerId)}
               {this.renderTitle()}
               {isPrivateGroup ? this.renderMemberCount() : null}
             </div>

ts/components/session/icon/Icons.tsx

@@ -95,7 +95,7 @@ export const icons = {
   [SessionIconType.Ellipses]: {
     path:
       'M30,16c4.411,0,8-3.589,8-8s-3.589-8-8-8s-8,3.589-8,8S25.589,16,30,16z M30,22c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S34.411,22,30,22z M30,44c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S34.411,44,30,44z',
-    viewBox: '-5 0 65 65',
+    viewBox: '-5 -5 65 65',
   },
   [SessionIconType.Emoji]: {
     path: