linagora#12 Add handler icon to show what is draggable and pin messag…

…e and reply action are now in menu options
stephanevieira75 · Aug 25, 2020 · fc79dfe · fc79dfe
1 parent 64ded7e
commit fc79dfe
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 70 deletions.
diff --git a/twake/frontend/src/app/scenes/App/Popup/AddUser/AddUser.js b/twake/frontend/src/app/scenes/App/Popup/AddUser/AddUser.js
@@ -214,6 +214,7 @@ export default class AddUser extends Component {
           {this.props.inline && (
             <a
               className="returnBtn blue_link"
+              href="#"
               onClick={() => this.props.previous && this.props.previous()}
             >
               {this.state.i18n.t('general.back')}

diff --git a/twake/frontend/src/app/scenes/Apps/Messages/Message/Message.js b/twake/frontend/src/app/scenes/Apps/Messages/Message/Message.js
@@ -25,6 +25,7 @@ import './Message.scss';
 import MenusManager from 'services/Menus/MenusManager.js';
 import UserCard from 'app/components/UserCard/UserCard.js';
 import ChannelsService from 'services/channels/channels.js';
+import DragIndicatorRoundedIcon from '@material-ui/icons/DragIndicatorRounded';
 
 import FirstMessage from './Types/FirstMessage.js';
 
@@ -38,6 +39,7 @@ export default class Message extends Component {
       users_repository: Collections.get('users'),
       app_messages_service: MessagesService,
       is_hover: false,
+      is_hover_handler: false,
       is_selected: false,
       loading_interaction: false,
       userCard: false,
@@ -259,10 +261,16 @@ export default class Message extends Component {
             className={'message_bloc ' + className}
             onMouseOver={() => this.setState({ was_hover: true })}
           >
-            <div key="sender" className="sender">
+            {this.state.was_hover && (
+              <DragIndicatorRoundedIcon
+                className={'js-drag-handler handler-icon ' + (app ? 'is_app ' : '')}
+              />
+            )}
+
+            <div className="sender">
               {show_user && user && (
                 <div
-                  className={'user-image js-drag-handler ' + (app ? 'is_app ' : '')}
+                  className={'user-image ' + (app ? 'is_app ' : '')}
                   style={{
                     backgroundImage:
                       "url('" +
@@ -272,7 +280,7 @@ export default class Message extends Component {
                   }}
                 />
               )}
-              {!show_user && <div className="date js-drag-handler"></div>}
+              {!show_user && <div></div>}
             </div>
             <div key="container" className="container">
               <div className="message_container">

diff --git a/twake/frontend/src/app/scenes/Apps/Messages/Message/Message.scss b/twake/frontend/src/app/scenes/Apps/Messages/Message/Message.scss
@@ -27,7 +27,8 @@
       margin: -4px;
       margin-bottom: 8px;
 
-      .sender {
+      .sender,
+      .user-avatar {
         min-width: 16px;
       }
 
@@ -127,15 +128,10 @@
           margin-right: 5px;
         }
 
-        &:hover,
-        &.is_selected {
-          //background: #00000008;
-        }
-
         .sender {
           .user-image {
-            width: 16px;
-            height: 16px;
+            width: 20px;
+            height: 20px;
 
             &.is_app {
               border-radius: 2px;
@@ -146,15 +142,15 @@
 
       .sender {
         position: relative;
-        margin-right: 4px;
-        min-width: 24px;
+        margin-right: 6px;
 
         .user-image {
-          width: 24px;
-          height: 24px;
+          width: 28px;
+          height: 28px;
           background-size: cover;
           background-position: center;
-          border-radius: var(--default-border-radius);
+          border-radius: 50%;
+          margin-left: 5px;
 
           &.is_app {
             border-radius: var(--default-border-radius);
@@ -264,8 +260,28 @@
         }
       }
 
+      .handler-icon {
+        display: none;
+        position: absolute;
+        top: 50%;
+        left: -20px;
+        z-index: 1;
+        transform: translateY(-50%);
+
+        background: #ffffff;
+        color: $primary;
+
+        border-radius: 50%;
+        border: 1px solid var(--grey-background);
+        box-shadow: $small_box_shadow;
+
+        width: 28px;
+        height: 28px;
+      }
+
       &:hover > .container > .message_container .message_options,
-      &.is_selected > .container > .message_container .message_options {
+      &.is_selected > .container > .message_container .message_options,
+      &:hover > .handler-icon {
         display: flex;
       }
 
@@ -351,7 +367,6 @@
           }
 
           &.is_selected {
-            border: 1px solid $primary;
             color: $primary;
             background: $primary_background;
           }

diff --git a/twake/frontend/src/app/scenes/Apps/Messages/Message/MessageOptions.js b/twake/frontend/src/app/scenes/Apps/Messages/Message/MessageOptions.js
@@ -63,7 +63,7 @@ export default class MessageOptions extends Component {
                         MessagesService.react(
                           this.props.message,
                           emoji.shortname,
-                          this.props.messagesCollectionKey
+                          this.props.messagesCollectionKey,
                         );
                       }}
                     />
@@ -80,41 +80,9 @@ export default class MessageOptions extends Component {
             position="top"
           >
             <ReactionIcon className="m-icon-small" />
-          </Menu>
+          </Menu>,
         );
       }
-
-      if (!this.props.message.parent_message_id) {
-        if (
-          !(this.props.message.hidden_data || {}).disable_responses &&
-          !this.props.disableResponses
-        ) {
-          list.push(
-            <div
-              className="option_button"
-              onClick={() => MessagesService.startRespond(this.props.message)}
-            >
-              <Icon type="enter" className="m-icon-small" />
-            </div>
-          );
-        }
-        if (!(this.props.message.hidden_data || {}).disable_pin) {
-          list.push(
-            <div
-              className={'option_button ' + (this.props.message.pinned && 'selected')}
-              onClick={() =>
-                MessagesService.pinMessage(
-                  this.props.message,
-                  !this.props.message.pinned,
-                  this.props.messagesCollectionKey
-                )
-              }
-            >
-              <Icon type="map-pin-alt" className="m-icon-small" />
-            </div>
-          );
-        }
-      }
     }
 
     var menu = [];
@@ -141,7 +109,7 @@ export default class MessageOptions extends Component {
 
       var apps =
         WorkspacesApps.getApps().filter(
-          app => ((app.display || {}).messages_module || {}).action
+          app => ((app.display || {}).messages_module || {}).action,
         ) || [];
       if (apps.length > 0) {
         menu.push({ type: 'separator' });
@@ -178,6 +146,42 @@ export default class MessageOptions extends Component {
           WorkspaceUserRights.hasWorkspacePrivilege() &&
           (this.props.message.hidden_data || {}).allow_delete == 'administrators')
       ) {
+        if (!(this.props.message.hidden_data || {}).disable_pin) {
+          menu.push({
+            type: 'menu',
+            text: Languages.t(
+              !this.props.message.pinned
+                ? 'scenes.apps.messages.message.pin_button'
+                : 'scenes.apps.messages.message.unpin_button',
+              'Pin message',
+            ),
+            className: 'option_button',
+            onClick: () => {
+              MessagesService.pinMessage(
+                this.props.message,
+                !this.props.message.pinned,
+                this.props.messagesCollectionKey,
+              );
+            },
+          });
+        }
+
+        if (!this.props.message.parent_message_id) {
+          if (
+            !(this.props.message.hidden_data || {}).disable_responses &&
+            !this.props.disableResponses
+          ) {
+            menu.push({
+              type: 'menu',
+              text: Languages.t('scenes.apps.messages.message.reply_button'),
+              className: 'option_button',
+              onClick: () => {
+                MessagesService.startRespond(this.props.message);
+              },
+            });
+          }
+        }
+
         if (
           menu.length > 0 &&
           (!this.props.message.application_id || !this.props.message.responses_count)
@@ -200,7 +204,7 @@ export default class MessageOptions extends Component {
             className: 'error',
             onClick: () => {
               AlertManager.confirm(() =>
-                MessagesService.deleteMessage(this.props.message, this.props.messagesCollectionKey)
+                MessagesService.deleteMessage(this.props.message, this.props.messagesCollectionKey),
               );
             },
           });
@@ -218,7 +222,7 @@ export default class MessageOptions extends Component {
           position={'left'}
         >
           <EditIcon className="m-icon-small" />
-        </Menu>
+        </Menu>,
       );
     }
 

diff --git a/twake/frontend/src/app/services/channels/channels.js b/twake/frontend/src/app/services/channels/channels.js
@@ -465,14 +465,15 @@ class Channels extends Observable {
     } else if (channel.direct) {
       //Private chan
       var name = [];
-      channel.members.forEach(id => {
-        if (channel.members.length == 1 || id != CurrentUser.get().id) {
-          var user = Collections.get('users').find(id);
-          if (user) {
-            name.push('@' + user.username);
+      channel &&
+        channel.members.forEach(id => {
+          if (channel.members.length == 1 || id != CurrentUser.get().id) {
+            var user = Collections.get('users').find(id);
+            if (user) {
+              name.push('@' + user.username);
+            }
           }
-        }
-      });
+        });
       if (name.length == 0) {
         this._url_timeout = setTimeout(() => {
           this.updateURL();

diff --git a/twake/frontend/src/app/services/languages/locale/en.js b/twake/frontend/src/app/services/languages/locale/en.js
@@ -1202,7 +1202,8 @@ export default {
     'Invite your collaborators into your workspace.',
   'scenes.app.channelsbar.public_channel_label': 'Public channel',
   'scenes.app.channelsbar.private_channel_label': 'Private channel',
-  'scenes.app.channelsbar.private_channel_message': 'This is a public channel, all the workspace will be invited !',
+  'scenes.app.channelsbar.private_channel_message':
+    'This is a public channel, all the workspace will be invited !',
   'scenes.app.channelsbar.save_channel_button': 'Save',
   'scenes.app.channelsbar.sending_message_instruction': 'Send a first message in a discussion',
   'scenes.app.channelsbar.tutorial_alert': 'Never show this frame again?',
@@ -1550,9 +1551,11 @@ export default {
   'scenes.apps.messages.message.cancel_button': 'Cancel',
   'scenes.apps.messages.message.modify_button': 'Edit',
   'scenes.apps.messages.message.personal_message': 'Only you can see this message.',
+  'scenes.apps.messages.message.pin_button': 'Pin message',
+  'scenes.apps.messages.message.unpin_button': 'Un-pin message',
   'scenes.apps.messages.message.pinned': 'Pinned',
   'scenes.apps.messages.message.remove_button': 'Delete',
-  'scenes.apps.messages.message.reply_button': 'Answer',
+  'scenes.apps.messages.message.reply_button': 'Reply',
   'scenes.apps.messages.message.show_on_right': 'Show on the right',
   'scenes.apps.messages.message.save_button': 'Save',
   'scenes.apps.messages.message.show_button': 'Display',

diff --git a/twake/frontend/src/app/services/languages/locale/fr.js b/twake/frontend/src/app/services/languages/locale/fr.js
@@ -333,7 +333,7 @@ export default {
   'scenes.apps.calendar.event_view.no_reminder': 'Pas de rappel',
   'scenes.apps.calendar.event_view.article_the': 'le',
   'scenes.apps.calendar.event_view.article_at': 'à',
-  'scenes.apps.calendar.event_view.article_until': "à",
+  'scenes.apps.calendar.event_view.article_until': 'à',
   'scenes.apps.calendar.event_view.details': 'Détails',
   'scenes.apps.calendar.event_view.no_event_selected': 'Aucun événement sélectionné',
   'scenes.apps.calendar.event_view.description': 'Description',
@@ -1293,7 +1293,7 @@ export default {
   'scenes.app.popup.appsparameters.pages.app_grp_label': "Groupe d'applications",
   'scenes.app.popup.appsparameters.pages.app_informations':
     "Cette chaine de caractère permet d'identifier votre application et sera utilisée dans les commandes de message.",
-  'scenes.app.popup.appsparameters.pages.app_name_label': 'Nom de l\'application',
+  'scenes.app.popup.appsparameters.pages.app_name_label': "Nom de l'application",
   'scenes.app.popup.appsparameters.pages.app_modification_right':
     'Tous les gérants de cette entreprise pourront modifier cette application.',
   'scenes.app.popup.appsparameters.pages.app_privileges_information':
@@ -1613,6 +1613,8 @@ export default {
   'scenes.apps.messages.message.modify_button': 'Modifier',
   'scenes.apps.messages.message.personal_message': 'Vous seul pouvez voir ce message.',
   'scenes.apps.messages.message.pinned': 'Épinglé',
+  'scenes.apps.messages.message.unpin_button': 'Désépingler le message',
+  'scenes.apps.messages.message.pin_button': 'Épingler le message',
   'scenes.apps.messages.message.remove_button': 'Supprimer',
   'scenes.apps.messages.message.reply_button': 'Répondre',
   'scenes.apps.messages.message.show_on_right': 'Afficher à droite',

diff --git a/twake/frontend/src/app/services/user/current_user.js b/twake/frontend/src/app/services/user/current_user.js
@@ -42,7 +42,7 @@ class CurrentUser extends Observable {
             ConfiguratorsManager.closeConfigurator(data.application);
           }
         }
-      }
+      },
     );
   }
 
@@ -66,7 +66,7 @@ class CurrentUser extends Observable {
 
   updateTutorialStatus(key, set_false) {
     var user = this.get();
-    if(!user){
+    if (!user) {
       return;
     }
     if (!user.tutorial_status || user.tutorial_status.length == 0) {
@@ -105,7 +105,7 @@ class CurrentUser extends Observable {
     setTimeout(() => {
       var data = {
         preferences: JSON.parse(
-          JSON.stringify(Collections.get('users').find(Login.currentUserId).workspaces_preferences)
+          JSON.stringify(Collections.get('users').find(Login.currentUserId).workspaces_preferences),
         ),
       };
       var update = {
@@ -231,7 +231,7 @@ class CurrentUser extends Observable {
           text: Languages.t(
             'services.user.update_password_alert',
             [],
-            'Votre mot de passe a été mis à jour.'
+            'Votre mot de passe a été mis à jour.',
           ),
         });
       } else {