Add account information panel

packages/mindplot/src/components/widget/AccountSettingsPanel.js

@@ -0,0 +1,69 @@
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+import $ from 'jquery';
+import ListToolbarPanel from './ListToolbarPanel';
+
+class AccountSettingsPanel extends ListToolbarPanel {
+  constructor(elemId) {
+    const model = {
+      getValue() {
+      },
+      setValue() {
+        window.location = '/c/logout';
+      },
+    };
+    super(elemId, model);
+  }
+
+  show() {
+    if (!this.isVisible()) {
+      this.fireEvent('show');
+      this._tip.show();
+    }
+  }
+
+  hide() {
+    if (this.isVisible()) {
+      this.fireEvent('hide');
+      this._tip.hide();
+    }
+  }
+
+  isTopicAction() {
+    return false;
+  }
+
+  isRelAction() {
+    return false;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  buildPanel() {
+    const content = $("<div class='toolbarPanel' id='accountSettingsPanel'></div>");
+    content[0].innerHTML = `
+        <p style='text-align:center;font-weight:bold;'>${global.accountName}</p>
+        <p>pveiga@wisemapping.com</p>
+        <div id="${global.accountMail}" model='logout' style='text-align:center'>
+          Logout
+        </div>
+    `;
+    return content;
+  }
+}
+
+export default AccountSettingsPanel;

packages/mindplot/src/components/widget/IMenu.js

@@ -32,6 +32,7 @@ class IMenu {
     this._mapId = mapId;
     this._mindmapUpdated = false;
     const me = this;
+
     // Register update events ...
     this._designer.addEvent('modelUpdate', () => {
       me.setRequireChange(true);

packages/mindplot/src/components/widget/ListToolbarPanel.js

@@ -27,12 +27,11 @@ class ListToolbarPanel extends ToolbarPaneItem {
 
   _initPanel() {
     // Register on toolbar elements ...
-    const me = this;
-    this.getPanelElem().children('div').bind('click', function click(event) {
+    this.getPanelElem().children('div').bind('click', (event) => {
       event.stopPropagation();
-      me.hide();
+      this.hide();
       const value = $defined($(this).attr('model')) ? $(this).attr('model') : $(this).attr('id');
-      me.getModel().setValue(value);
+      this.getModel().setValue(value);
     });
   }
 

packages/mindplot/src/components/widget/Menu.js

@@ -27,6 +27,7 @@ import ColorPalettePanel from './ColorPalettePanel';
 import ToolbarItem from './ToolbarItem';
 import KeyboardShortcutTooltip from './KeyboardShortcutTooltip';
 import KeyboardShortcutDialog from './KeyboardShortcutDialog';
+import AccountSettingsPanel from './AccountSettingsPanel';
 
 class Menu extends IMenu {
   constructor(designer, containerId, mapId, readOnly, baseUrl = '') {
@@ -413,14 +414,24 @@ class Menu extends IMenu {
       });
       Menu._registerTooltip('backToList', $msg('BACK_TO_MAP_LIST'));
     }
-    
+
+    // Account dialog ...
+    const accountSettings = $('#account');
+    if (accountSettings) {
+      accountSettings.bind('click', (event) => {
+        event.preventDefault();
+      });
+      this._toolbarElems.push(new AccountSettingsPanel('account'));
+      Menu._registerTooltip('account', $msg('ACCOUNT_SETTINGS'));
+    }
+
     this._registerEvents(designer);
   }
 
   _registerEvents(designer) {
     // Register on close events ...
-    this._toolbarElems.forEach((elem) => {
-      elem.addEvent('show', () => {
+    this._toolbarElems.forEach((panel) => {
+      panel.addEvent('show', () => {
         this.clear();
       });
     });
@@ -429,15 +440,15 @@ class Menu extends IMenu {
       const topics = designer.getModel().filterSelectedTopics();
       const rels = designer.getModel().filterSelectedRelationships();
 
-      this._toolbarElems.forEach((button) => {
-        const isTopicAction = button.isTopicAction();
-        const isRelAction = button.isRelAction();
+      this._toolbarElems.forEach((panel) => {
+        const isTopicAction = panel.isTopicAction();
+        const isRelAction = panel.isRelAction();
 
         if (isTopicAction || isRelAction) {
           if ((isTopicAction && topics.length !== 0) || (isRelAction && rels.length !== 0)) {
-            button.enable();
+            panel.enable();
           } else {
-            button.disable();
+            panel.disable();
           }
         }
       });

packages/mindplot/test/playground/map-render/css/header.less

@@ -41,7 +41,6 @@ div#toolbarRight {
     margin: 6px 10px;
     height: 100%;
 }
-
 #account {
     float: right;
     display: inline;
@@ -52,6 +51,10 @@ div#toolbarRight {
     height: 36px;
 }
 
+#accountSettingsPanel{
+    padding:10px 10px;
+}
+
 #share {
     margin: 0 30px;
 }

packages/mindplot/test/playground/map-render/html/editor.html

@@ -83,9 +83,6 @@
                 <div id="font" class="buttonContainer"></div>
             </div>
             <div id="toolbarRight">
-                <div id="account">
-                    <img src="images/account.svg"/>
-                </div>
                 <div id="share" class="actionButton">Share</div>
                 <div id="export" class="buttonOn">
                     <img src="images/export.svg" />
@@ -96,6 +93,9 @@
                 <div id="history" class="buttonOn">
                     <img src="images/history.svg" />
                 </div>
+                <div id="account">
+                    <img src="images/account.svg"/>
+                </div>
             </div>
         </div>
     </div>

packages/mindplot/test/playground/map-render/js/editor.js

@@ -3,6 +3,10 @@ import { buildDesigner, buildOptions } from '../../../../src/components/Designer
 import { PersistenceManager, LocalStorageManager } from '../../../../src';
 import LoadingModal from '../../../../src/components/widget/LoadingModal';
 
+// Account details ...
+global.accountName = 'Test User';
+global.accountEmail = 'test@example.com';
+
 const loadingModal = new LoadingModal();
 loadingModal.show();