Major rework of context menus

js/background.js

@@ -802,8 +802,10 @@
       appView.openConversation(groupId, {});
     };
 
-
+    window.generateID = () =>
-    window.generateID = () => Math.random().toString(36).substring(3);
+      Math.random()
+        .toString(36)
+        .substring(3);
 
     window.toasts = new Map();
     window.pushToast = options => {

js/modules/signal.js

@@ -53,7 +53,9 @@ const { UserDetailsDialog } = require('../../ts/components/UserDetailsDialog');
 const { SessionToast } = require('../../ts/components/session/SessionToast');
 const { SessionToggle } = require('../../ts/components/session/SessionToggle');
 const { SessionModal } = require('../../ts/components/session/SessionModal');
-const { SessionDropdown } = require('../../ts/components/session/SessionDropdown');
+const {
+  SessionDropdown,
+} = require('../../ts/components/session/SessionDropdown');
 const {
   SessionRegistrationView,
 } = require('../../ts/components/session/SessionRegistrationView');

js/views/session_dropdown_view.js

@@ -25,14 +25,8 @@
       this.$el.append(this.dropdownView.el);
     },
 
-      openDropdown() {
+    openDropdown() {},
-        
-      },
-  
-      closeDropdown() {
-        
-      },
 
+    closeDropdown() {},
   });
 })();
-  

stylesheets/_session.scss

@@ -60,7 +60,7 @@ $session-opaque-dark-3: rgba(0, 0, 0, 0.5);
 $session-color-white: #fff;
 $session-color-dark-grey: #353535;
 $session-color-black: #000;
-$session-color-danger: #FF453A;
+$session-color-danger: #ff453a;
 $session-color-primary: $session-shade-13;
 $session-color-secondary: $session-shade-16;
 
@@ -561,35 +561,34 @@ label {
   }
 }
 
+.react-contextmenu {
+  padding: 0px;
+  margin: 0px;
 
-// .react-contextmenu {
+  border: none !important;
-//   padding: 0px;
+  border-radius: 0px;
-//   margin: 0px;
+}
-
-//   border: none !important;
-//   border-radius: 0px;
-// }
-
-// .react-contextmenu-item {
-//   display: flex;
-//   align-items: center;
 
-//   height: 25px;
+.react-contextmenu-item {
-//   padding: 0px 10px;
+  display: flex;
+  align-items: center;
 
-//   background-color: #1B1B1B;
+  height: 25px;
+  padding: 0px 10px;
 
-//   color: $session-color-white;
+  background-color: #1b1b1b;
-//   font-family: 'Wasa';
-//   font-size: 12px;
-//   line-height: $session-icon-size-sm;
-//   font-weight: 700;
 
-//   &--active, &--selected{
+  color: $session-color-white;
-//     background-color: $session-shade-7 !important;
+  font-family: 'Wasa';
-//   }
+  font-size: 12px;
-// }
+  line-height: $session-icon-size-sm;
+  font-weight: 700;
 
+  &--active,
+  &--selected {
+    background-color: $session-shade-7 !important;
+  }
+}
 
 .session-dropdown {
   position: absolute;
@@ -608,7 +607,7 @@ label {
 
       height: 25px;
       padding-right: 7px;
-      background-color: #1B1B1B;
+      background-color: #1b1b1b;
 
       color: $session-color-white;
       font-family: 'Wasa';
@@ -626,7 +625,8 @@ label {
         margin-left: 6px;
       }
 
-      &.active, &:hover{
+      &.active,
+      &:hover {
         background-color: $session-shade-7;
       }
 

stylesheets/_session_theme_dark.scss

@@ -53,6 +53,4 @@
       margin-left: 5px;
     }
   }
-  
 }
-

ts/components/ConversationListItem.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { isEmpty } from 'lodash';
 import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu';
@@ -12,9 +13,6 @@ import { TypingAnimation } from './conversation/TypingAnimation';
 
 import { Colors, LocalizerType } from '../types/Util';
 
-import { SessionDropdown } from './session/SessionDropdown';
-import { SessionDropDownItemType } from './session/SessionDropdownItem';
-
 export type PropsData = {
   id: string;
   phoneNumber: string;
@@ -191,78 +189,36 @@ export class ConversationListItem extends React.PureComponent<Props> {
     const blockTitle = isBlocked ? i18n('unblockUser') : i18n('blockUser');
     const blockHandler = isBlocked ? onUnblockContact : onBlockContact;
 
-    
-    const items = [
-      {
-        content: blockTitle,
-        display: true,//!isPublic && !isMe,
-        onClick: blockHandler
-      },
-      {
-        content: i18n('changeNickname'),
-        display: true,//!isPublic && !isMe,
-        onClick: onChangeNickname,
-      },
-      {
-        content: i18n('clearNickname'),
-        display: true,//!isPublic && !isMe && hasNickname,
-        onClick: onClearNickname,
-      },
-      {
-        content: i18n('copyPublicKey'),
-        display: true,//!isPublic,
-        onClick: onCopyPublicKey,
-      },
-      {
-        content: i18n('deleteMessages'),
-        onClick: onDeleteMessages,
-      },
-      {
-        content: i18n('deleteContact'),
-        display: true,//!isMe && isClosable && !isPublic,
-        onClick: onDeleteContact,
-      },
-      {
-        content: i18n('deletePublicChannel'),
-        display: true,//!isMe && isClosable && !isPublic,
-        type: SessionDropDownItemType.Default,
-        onClick: onDeleteContact,
-      },
-    ];
-
-    
     return (
-      <SessionDropdown items={items}/>
+      <ContextMenu id={triggerId}>
+        {!isPublic && !isMe ? (
+          <MenuItem onClick={blockHandler}>{blockTitle}</MenuItem>
+        ) : null}
+        {!isPublic && !isMe ? (
+          <MenuItem onClick={onChangeNickname}>
+            {i18n('changeNickname')}
+          </MenuItem>
+        ) : null}
+        {!isPublic && !isMe && hasNickname ? (
+          <MenuItem onClick={onClearNickname}>{i18n('clearNickname')}</MenuItem>
+        ) : null}
+        {!isPublic ? (
+          <MenuItem onClick={onCopyPublicKey}>{i18n('copyPublicKey')}</MenuItem>
+        ) : null}
+        <MenuItem onClick={onDeleteMessages}>{i18n('deleteMessages')}</MenuItem>
+        {!isMe && isClosable ? (
+          !isPublic ? (
+            <MenuItem onClick={onDeleteContact}>
+              {i18n('deleteContact')}
+            </MenuItem>
+          ) : (
+            <MenuItem onClick={onDeleteContact}>
+              {i18n('deletePublicChannel')}
+            </MenuItem>
+          )
+        ) : null}
+      </ContextMenu>
     );
-      // <ContextMenu id={triggerId}>
-      //   {!isPublic && !isMe ? (
-      //     <MenuItem onClick={blockHandler}>{blockTitle}</MenuItem>
-      //   ) : null}
-      //   {!isPublic && !isMe ? (
-      //     <MenuItem onClick={onChangeNickname}>
-      //       {i18n('changeNickname')}
-      //     </MenuItem>
-      //   ) : null}
-      //   {!isPublic && !isMe && hasNickname ? (
-      //     <MenuItem onClick={onClearNickname}>{i18n('clearNickname')}</MenuItem>
-      //   ) : null}
-      //   {!isPublic ? (
-      //     <MenuItem onClick={onCopyPublicKey}>{i18n('copyPublicKey')}</MenuItem>
-      //   ) : null}
-      //   <MenuItem onClick={onDeleteMessages}>{i18n('deleteMessages')}</MenuItem>
-      //   {!isMe && isClosable ? (
-      //     !isPublic ? (
-      //       <MenuItem onClick={onDeleteContact}>
-      //         {i18n('deleteContact')}
-      //       </MenuItem>
-      //     ) : (
-      //       <MenuItem onClick={onDeleteContact}>
-      //         {i18n('deletePublicChannel')}
-      //       </MenuItem>
-      //     )
-      //   ) : null}
-      // </ContextMenu>
-    //);
   }
 
   public renderMessage() {

ts/components/UserDetailsDialog.tsx

@@ -37,7 +37,7 @@ export class UserDetailsDialog extends React.Component<Props> {
 
     const items = [
       {
-        content: "sdgsdfg",
+        content: 'sdgsdfg',
         display: true, //!isPublic && !isMe,
       },
       {

ts/components/conversation/ConversationHeader.tsx

@@ -22,6 +22,8 @@ import {
   SessionButtonType,
 } from '../session/SessionButton';
 
+import { SessionDropdownTrigger } from '../session/SessionDropdownTrigger';
+
 interface TimerOption {
   name: string;
   value: number;
@@ -245,12 +247,12 @@ export class ConversationHeader extends React.Component<Props> {
     }
 
     return (
-      <ContextMenuTrigger id={triggerId} ref={this.menuTriggerRef}>
+      <SessionDropdownTrigger>
         <SessionIconButton
           iconType={SessionIconType.Ellipses}
           iconSize={SessionIconSize.Large}
         />
-      </ContextMenuTrigger>
+      </SessionDropdownTrigger>
     );
   }
 

ts/components/session/SessionDropdown.tsx

@@ -2,36 +2,66 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { SessionIconType } from './icon/';
-import { SessionDropdownItem, SessionDropDownItemType } from './SessionDropdownItem';
+import {
+  SessionDropdownItem,
+  SessionDropDownItemType,
+} from './SessionDropdownItem';
 
 // THIS IS A FUTURE-PROOFING ELEMENT TO REPLACE ELECTRON CONTEXTMENUS IN PRELOAD.JS
 
+interface State {
+  x: number;
+  y: number;
+  isVisible: boolean;
+}
+
 interface Props {
-    id?: string,
+  id?: string;
+  onClick?: any;
+  relativeTo: string | Array<number>;
   items: Array<{
-        content: string,
+    content: string;
-        id?: string,
+    id?: string;
-        icon?: SessionIconType | null,
+    icon?: SessionIconType | null;
-        type?: SessionDropDownItemType,
+    type?: SessionDropDownItemType;
-        active?: boolean,
+    active?: boolean;
-        onClick?: any,
+    onClick?: any;
-        display?: boolean,
+    display?: boolean;
-      }>,
+  }>;
 }
 
-export class SessionDropdown extends React.PureComponent<Props> {
+export class SessionDropdown extends React.Component<Props, State> {
-  
   constructor(props: any) {
     super(props);
+
+    this.state = {
+      x: 0,
+      y: 0,
+      isVisible: false,
+    };
+  }
+
+  public show() {
+    this.setState({
+      isVisible: true,
+    });
+  }
+
+  public hide() {
+    this.setState({
+      isVisible: false,
+    });
   }
 
   public render() {
     const { items } = this.props;
+    const { isVisible } = this.state;
 
     return (
       <div className={classNames('session-dropdown')}>
         <ul>
-            {items.map((item: any) => {
+          {isVisible
+            ? items.map((item: any) => {
                 return item.display ? (
                   <SessionDropdownItem
                     id={item.id}
@@ -41,13 +71,11 @@ export class SessionDropdown extends React.PureComponent<Props> {
                     active={item.active}
                     onClick={item.onClick}
                   />
-                ) : null
+                ) : null;
-              }
+              })
-            )}
+            : null}
         </ul>
       </div>
     );
   }
-
 }
-

ts/components/session/SessionDropdownItem.tsx

@@ -1,23 +1,21 @@
-
 import React from 'react';
 import classNames from 'classnames';
 
 import { SessionIcon, SessionIconSize, SessionIconType } from './icon/';
 import { generateID } from './tools/ComponentTools';
 
-
 export enum SessionDropDownItemType {
   Default = 'default',
   Danger = 'danger',
 }
 
 interface Props {
-  id: string,
+  id: string;
-  content: string,
+  content: string;
-  type: SessionDropDownItemType,
+  type: SessionDropDownItemType;
-  icon: SessionIconType | null,
+  icon: SessionIconType | null;
-  active: boolean,
+  active: boolean;
-  onClick: any,
+  onClick: any;
 }
 
 export class SessionDropdownItem extends React.PureComponent<Props> {
@@ -41,17 +39,15 @@ export class SessionDropdownItem extends React.PureComponent<Props> {
       <li
         id={id}
         className={classNames(active ? 'active' : '', type || '')}
+        role="button"
         onClick={this.clickHandler}
       >
-            { icon ? <SessionIcon
+        {icon ? (
-                iconType = { icon }
+          <SessionIcon iconType={icon} iconSize={SessionIconSize.Small} />
-                iconSize = { SessionIconSize.Small }
+        ) : (
-                />
+          ''
-                : ''
+        )}
-            }
+        <div className="item-content">{content}</div>
-            <div className="item-content">
-                {content}
-            </div>
       </li>
     );
   }
@@ -63,6 +59,3 @@ export class SessionDropdownItem extends React.PureComponent<Props> {
     }
   }
 }
-
-
-

ts/components/session/SessionDropdownTrigger.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface Props {
+  //mouseButton: Number;
+  posX: number;
+  posY: number;
+}
+
+export class SessionDropdownTrigger extends React.Component<Props> {
+  public static defaultProps = {
+    //mouseButton: 2, // 0 is left click, 2 is right click
+    posX: 0,
+    posY: 0,
+  };
+  constructor(props: any) {
+    super(props);
+  }
+
+  public handleDropdownClick = (event: any) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    let x = event.clientX || (event.touches && event.touches[0].pageX);
+    let y = event.clientY || (event.touches && event.touches[0].pageY);
+
+    if (this.props.posX) {
+      x -= this.props.posX;
+    }
+    if (this.props.posY) {
+      y -= this.props.posY;
+    }
+  };
+
+  public render() {
+    return <div role="button" onClick={this.handleDropdownClick} />;
+  }
+}

ts/components/session/tools/ComponentTools.tsx

@@ -2,6 +2,7 @@
 
 export function generateID() {
   // Generates a unique ID for your component
-    return Math.random().toString(36).substring(3);
+  const buffer = new Uint32Array(10);
-}
 
+  return window.crypto.getRandomValues(buffer)[0].toString();
+}