Add account information panel

This commit is contained in:
Paulo Gustavo Veiga 2022-01-07 17:27:00 -08:00
parent ce5c08bae4
commit ab67b32af8
7 changed files with 103 additions and 16 deletions

View File

@ -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;

View File

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

View File

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

View File

@ -27,6 +27,7 @@ import ColorPalettePanel from './ColorPalettePanel';
import ToolbarItem from './ToolbarItem'; import ToolbarItem from './ToolbarItem';
import KeyboardShortcutTooltip from './KeyboardShortcutTooltip'; import KeyboardShortcutTooltip from './KeyboardShortcutTooltip';
import KeyboardShortcutDialog from './KeyboardShortcutDialog'; import KeyboardShortcutDialog from './KeyboardShortcutDialog';
import AccountSettingsPanel from './AccountSettingsPanel';
class Menu extends IMenu { class Menu extends IMenu {
constructor(designer, containerId, mapId, readOnly, baseUrl = '') { constructor(designer, containerId, mapId, readOnly, baseUrl = '') {
@ -414,13 +415,23 @@ class Menu extends IMenu {
Menu._registerTooltip('backToList', $msg('BACK_TO_MAP_LIST')); 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); this._registerEvents(designer);
} }
_registerEvents(designer) { _registerEvents(designer) {
// Register on close events ... // Register on close events ...
this._toolbarElems.forEach((elem) => { this._toolbarElems.forEach((panel) => {
elem.addEvent('show', () => { panel.addEvent('show', () => {
this.clear(); this.clear();
}); });
}); });
@ -429,15 +440,15 @@ class Menu extends IMenu {
const topics = designer.getModel().filterSelectedTopics(); const topics = designer.getModel().filterSelectedTopics();
const rels = designer.getModel().filterSelectedRelationships(); const rels = designer.getModel().filterSelectedRelationships();
this._toolbarElems.forEach((button) => { this._toolbarElems.forEach((panel) => {
const isTopicAction = button.isTopicAction(); const isTopicAction = panel.isTopicAction();
const isRelAction = button.isRelAction(); const isRelAction = panel.isRelAction();
if (isTopicAction || isRelAction) { if (isTopicAction || isRelAction) {
if ((isTopicAction && topics.length !== 0) || (isRelAction && rels.length !== 0)) { if ((isTopicAction && topics.length !== 0) || (isRelAction && rels.length !== 0)) {
button.enable(); panel.enable();
} else { } else {
button.disable(); panel.disable();
} }
} }
}); });

View File

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

View File

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

View File

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