mirror of
https://bitbucket.org/wisemapping/wisemapping-frontend.git
synced 2024-11-14 03:07:57 +01:00
Add account information panel
This commit is contained in:
parent
ce5c08bae4
commit
ab67b32af8
@ -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;
|
@ -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);
|
||||||
|
@ -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);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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();
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user