Dropdown generalisation and simplification

background.html

@@ -702,6 +702,8 @@
   <script type='text/javascript' src='js/views/toast_view.js'></script>
   <script type='text/javascript' src='js/views/session_toast_view.js'></script>
   <script type='text/javascript' src='js/views/session_toggle_view.js'></script>
+  <script type='text/javascript' src='js/views/session_modal_view.js'></script>
+  <script type='text/javascript' src='js/views/session_dropdown_view.js'></script>
   <script type='text/javascript' src='js/views/file_input_view.js'></script>
   <script type='text/javascript' src='js/views/list_view.js'></script>
   <script type='text/javascript' src='js/views/contact_list_view.js'></script>

js/background.js

@@ -819,6 +819,7 @@
         type: options.type || '',
       };
 
+
       // Give all toasts an ID. User may define.
       const toastID = params.id;
       const toast = !!toastID && window.toasts.get(toastID);
@@ -831,8 +832,10 @@
           new Whisper.SessionToastView({
             el: $('#session-toast-container'),
           })
+          
         );
 
+
         window.toasts.get(toastID).render();
         window.toasts.get(toastID).update(params);
       }

js/modules/signal.js

@@ -53,6 +53,7 @@ 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 {
   SessionRegistrationView,
 } = require('../../ts/components/session/SessionRegistrationView');
@@ -254,6 +255,7 @@ exports.setup = (options = {}) => {
     SessionToast,
     SessionToggle,
     SessionModal,
+    SessionDropdown,
     MediaGallery,
     Message,
     MessageBody,

js/views/conversation_view.js

@@ -1375,11 +1375,11 @@
 
       if (!isAllOurs && !isModerator) {
         window.pushToast({
-          title: i18n('messageDeletionForbidden'),
+         title: i18n('messageDeletionForbidden'),
-          type: 'error',
+         type: 'error',
-          id: 'messageDeletionForbidden',
+         id: 'messageDeletionForbidden',
         });
-
+                
         return;
       }
 

js/views/session_dropdown_view.js

@@ -0,0 +1,38 @@
+/* global Whisper */
+
+// eslint-disable-next-line func-names
+(function() {
+    'use strict';
+  
+    window.Whisper = window.Whisper || {};
+  
+    Whisper.SessionDropdownView = Whisper.View.extend({
+      initialize(options) {
+        this.props = {
+            items: options.items,
+        };
+
+        this.render();
+      },
+  
+      render() {
+        this.dropdownView = new Whisper.ReactWrapperView({
+          className: 'session-dropdown-wrapper',
+          Component: window.Signal.Components.SessionDropdown,
+          props: this.props,
+        });
+  
+        this.$el.append(this.dropdownView.el);
+      },
+    
+      openDropdown() {
+        
+      },
+  
+      closeDropdown() {
+        
+      },
+
+    });
+  })();
+  

stylesheets/_session.scss

@@ -562,7 +562,39 @@ label {
 }
 
 
+// .react-contextmenu {
+//   padding: 0px;
+//   margin: 0px;
+
+//   border: none !important;
+//   border-radius: 0px;
+// }
+
+// .react-contextmenu-item {
+//   display: flex;
+//   align-items: center;
+
+//   height: 25px;
+//   padding: 0px 10px;
+
+//   background-color: #1B1B1B;
+
+//   color: $session-color-white;
+//   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;
+  top: 50px;
+  left: 50px;
   display: inline-block;
 
   ul {
@@ -603,5 +635,4 @@ label {
       }
     }
   }
-
 }

stylesheets/_session_theme_dark.scss

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

ts/components/UserDetailsDialog.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Avatar } from './Avatar';
 
-import { SessionDropdown, SessionDropDownType } from './session/SessionDropdown';
+import { SessionDropdown } from './session/SessionDropdown';
-import { SessionIconType } from './session/icon';
 
 declare global {
   interface Window {
@@ -35,41 +34,41 @@ export class UserDetailsDialog extends React.Component<Props> {
 
     const cancelText = i18n('cancel');
     const startConversation = i18n('startConversation');
-
+    
     const items = [
       {
-        id: "myid1",
+        content: "sdgsdfg",
-        content: "Copy Chat ID",
+        display: true,//!isPublic && !isMe,
-        icon: SessionIconType.Eye,
+      },
-        type: SessionDropDownType.Default,
+      {
-        active: false
+        content: i18n('changeNickname'),
+        display: true,//!isPublic && !isMe,
+      },
+      {
+        content: i18n('clearNickname'),
+        display: true,//!isPublic && !isMe && hasNickname,
       },
       {
-        id: "myid1",
+        content: i18n('copyPublicKey'),
-        content: "Invite Friends",
+        display: false,//!isPublic,
-        icon: null,
-        type: SessionDropDownType.Default,
-        active: false
       },
       {
-        id: "myid1",
+        content: i18n('deleteMessages'),
-        content: "Clear Chat History",
-        icon: SessionIconType.Check,
-        type: SessionDropDownType.Default,
-        active: true
       },
       {
-        id: "myid1",
+        content: i18n('deleteContact'),
-        content: "Leave Group",
+        display: true,//!isMe && isClosable && !isPublic,
-        icon: SessionIconType.Check,
+      },
-        type: SessionDropDownType.Danger,
+      {
-        active: false
+        content: i18n('deletePublicChannel'),
+        display: true,//!isMe && isClosable && !isPublic,
       },
     ];
-    
+
     return (
       <div className="content">
-        <SessionDropdown items={items} />
+        <SessionDropdown items={items}/>
+
         <div className="avatar-center">
           <div className="avatar-center-inner">{this.renderAvatar()}</div>
         </div>

ts/components/session/SessionDropdown.tsx

@@ -1,23 +1,26 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { SessionDropdownItem, SessionDropDownItemType } from './SessionDropdownItem';
 import { SessionIconType } from './icon/';
+import { SessionDropdownItem, SessionDropDownItemType } from './SessionDropdownItem';
 
+// THIS IS A FUTURE-PROOFING ELEMENT TO REPLACE ELECTRON CONTEXTMENUS IN PRELOAD.JS
 
 interface Props {
+    id?: string,
     items: Array<{
-        id: string,
         content: string,
-        icon: SessionIconType | null,
+        id?: string,
-        type: SessionDropDownItemType,
+        icon?: SessionIconType | null,
-        active: boolean,
+        type?: SessionDropDownItemType,
+        active?: boolean,
+        onClick?: any,
+        display?: boolean,
       }>,
   }
 
 export class SessionDropdown extends React.PureComponent<Props> {
-  public static readonly defaultProps = SessionDropdownItem.defaultProps;
+  
-      
   constructor(props: any) {
     super(props);
   }
@@ -28,13 +31,18 @@ export class SessionDropdown extends React.PureComponent<Props> {
     return (
       <div className={classNames('session-dropdown')}>
         <ul>
-            {items.map((item: any) => <SessionDropdownItem
+            {items.map((item: any) => {
-                    id={item.id}
+                return item.display ? (
-                    content={item.content}
+                    <SessionDropdownItem
-                    icon={item.icon}
+                        id={item.id}
-                    type={item.type}
+                        content={item.content}
-                    active={item.active}
+                        icon={item.icon}
-                />
+                        type={item.type}
+                        active={item.active}
+                        onClick={item.onClick}
+                    />
+                ) : null
+              }
             )}
         </ul>
       </div>

ts/components/session/SessionDropdownItem.tsx

@@ -24,6 +24,8 @@ export class SessionDropdownItem extends React.PureComponent<Props> {
     public static defaultProps = {
       id: generateID(),
       type: SessionDropDownItemType.Default,
+      icon: null,
+      active: false,
       onClick: () => null,
     };