Merged in feature/new_editor_toolbar (pull request #27)

Feature/new editor toolbar

Approved-by: Matias Arriola
This commit is contained in:
Paulo Veiga 2022-01-07 16:32:12 +00:00 committed by Matias Arriola
commit 44617c3b4e
47 changed files with 565 additions and 210 deletions

View File

@ -79,7 +79,7 @@ export function buildOptions(options) {
};
const viewPort = {
height: Number.parseInt(window.innerHeight - 70, 10), // Footer and Header
height: Number.parseInt(window.innerHeight, 10),
width: Number.parseInt(window.innerWidth, 10),
};

View File

@ -55,7 +55,28 @@ const CA = {
LINK: 'Enllaç',
OPEN_LINK: 'Obrir Enllaç',
SESSION_EXPIRED: 'La seva sessió ha finalitzat. Si us plau, torni a connectar-se.',
DUMMY: '',
ACTION: 'Acció',
CREATE_SIBLING_TOPIC: 'Afegir tòpic germà',
CREATE_CHILD_TOPIC: 'Agfegir tòpic fill',
DELETE_TOPIC: 'Esborrar tòpic',
EDIT_TOPIC_TEXT: 'Editar text de tòpic',
JUST_START_TYPING: 'Comença a escriure',
CANCEL_TEXT_CHANGES: 'Cancel·la edició de text',
TOPIC_NAVIGATION: 'Navegació entre tòpics',
ARROW_KEYS: 'Fletxes del cursor',
SELECT_MULTIPLE_NODES: 'Seleccionar múltiples tòpics',
UNDO_EDITION: 'Revertir canvis',
REDO_EDITION: 'Refer canvis',
SELECT_ALL_TOPIC: 'Seleccionar tots els tòpics',
CHANGE_TEXT_BOLD: 'Canviar text a negreta',
SAVE_CHANGES: 'Desar els canvis',
CHANGE_TEXT_ITALIC: 'Canviar text a itàlica',
DESELECT_ALL_TOPIC: 'Revertir la selecció de tòpics',
COLLAPSE_CHILDREN: 'Col·lapsar fills',
KEYBOARD_SHORTCUTS_MSG: 'Els accessos directes poden ajudar-li a reduir temps, millorant la utilització del teclat.',
NAME: 'Nom',
COPY_AND_PASTE_TOPICS: 'Copiar i Enganxar tòpics',
MULTIPLE_LINES: 'Afegir múltiples linies de text',
};
export default CA;

View File

@ -54,7 +54,28 @@ const DE = {
CANCEL: 'Abbrechen',
LINK: 'Verbindung',
OPEN_LINK: 'Öffne URL',
DUMMY: '',
ACTION: 'Aktion',
CREATE_SIBLING_TOPIC: 'Erzeuge ein Schwester Thema',
CREATE_CHILD_TOPIC: 'Eryeuge ein Unterthema',
DELETE_TOPIC: 'Lösche Thema',
EDIT_TOPIC_TEXT: 'Editiere Thematext',
JUST_START_TYPING: 'Einfach mit der Eingabe beginnen',
CANCEL_TEXT_CHANGES: 'Textänderungen abbrechen',
TOPIC_NAVIGATION: 'Themen Navigation',
ARROW_KEYS: 'Pfeiltasten',
SELECT_MULTIPLE_NODES: 'Wähle mehrfache Knoten aus',
UNDO_EDITION: 'Änderungen rückgängig machen',
REDO_EDITION: 'Änderung nochmal ausführen',
SELECT_ALL_TOPIC: 'Wähle alle Themen aus',
CHANGE_TEXT_BOLD: 'Ändere Text in fette Schrift',
SAVE_CHANGES: 'Änderungen sichern',
CHANGE_TEXT_ITALIC: 'Ändere Text in kursive Schrift',
DESELECT_ALL_TOPIC: 'Deselektiere alle Themen',
COLLAPSE_CHILDREN: 'Kindknoten zusammenklappen',
KEYBOARD_SHORTCUTS_MSG: 'Tastenkürzel helfen Zeit zu sparen und erlauben die Arbeit nur mit der Tatstatur, s.d. Sie niemals die Hand von der Tastatur nehmen müßen, um die Maus zu bedienen.',
COPY_AND_PASTE_TOPICS: 'Kopieren und Einsetzen von Themen',
MULTIPLE_LINES: 'Füge mehrer Textzeilen hinzu',
};
export default DE;

View File

@ -56,7 +56,27 @@ const EN = {
OPEN_LINK: 'Open URL',
SESSION_EXPIRED: 'Your session has expired, please log-in again.',
URL_ERROR: 'URL not valid',
DUMMY: '',
ACTION: 'Action',
CREATE_SIBLING_TOPIC: 'Create Sibling Topic',
CREATE_CHILD_TOPIC: 'Create Child Topic',
DELETE_TOPIC: 'Delete Topic',
EDIT_TOPIC_TEXT: 'Edit Topic Text',
JUST_START_TYPING: 'Just start typing',
CANCEL_TEXT_CHANGES: 'Cancel Text Changes',
TOPIC_NAVIGATION: 'Topic Navigation',
ARROW_KEYS: 'Arrow Keys',
SELECT_MULTIPLE_NODES: 'Select Multiple Nodes',
UNDO_EDITION: 'Undo Edition',
REDO_EDITION: 'Redo Edition',
SELECT_ALL_TOPIC: 'Select All Topic',
CHANGE_TEXT_BOLD: 'Change Text Bold Type',
SAVE_CHANGES: 'Save Changes',
CHANGE_TEXT_ITALIC: 'Change Text Italic',
DESELECT_ALL_TOPIC: 'Deselect All Topic',
COLLAPSE_CHILDREN: 'Collapse Children',
KEYBOARD_SHORTCUTS_MSG: 'Keyboard shortcuts can help you save time by allowing you to never take your hands off the keyboard to use the mouse.',
COPY_AND_PASTE_TOPICS: 'Copy and Paste Topics',
MULTIPLE_LINES: 'Add multiple text lines',
};
export default EN;

View File

@ -55,6 +55,26 @@ const ES = {
LINK: 'Enlace',
OPEN_LINK: 'Abrir Enlace',
SESSION_EXPIRED: 'Su session ha expirado. Por favor, ingrese nuevamente.',
ACTION: 'Acción',
CREATE_SIBLING_TOPIC: 'Agregar Tópico Hermano',
CREATE_CHILD_TOPIC: 'Agregar Tópico Hijo',
DELETE_TOPIC: 'Borrar Tópico',
EDIT_TOPIC_TEXT: 'Editar Texto de Tópico',
JUST_START_TYPING: 'Comenza a escribir',
CANCEL_TEXT_CHANGES: 'Cancelar Edición de Texto',
TOPIC_NAVIGATION: 'Navegación Entre Tópicos',
ARROW_KEYS: 'Flechas Del Cursor',
SELECT_MULTIPLE_NODES: 'Selecciónar Multiples Tópicos',
UNDO_EDITION: 'Revertir Cambios',
REDO_EDITION: 'Rehacer Cambios',
SELECT_ALL_TOPIC: 'Seleccionar Todos los Tópicos',
CHANGE_TEXT_BOLD: 'Cambiar Texto a Negrita',
SAVE_CHANGES: 'Guardar los Cambios',
CHANGE_TEXT_ITALIC: 'Cambiar Texto a Italica',
DESELECT_ALL_TOPIC: 'Revertir Selección de Tópicos',
COLLAPSE_CHILDREN: 'Colapsar Hijos',
KEYBOARD_SHORTCUTS_MSG: 'Los accesos directos pueden ayudarte a salvar tiempo permitiéndote no sacar las manos del teclado para usar el mouse.',
};
export default ES;

View File

@ -53,6 +53,28 @@ const FR = {
REMOVE: 'Supprimer',
WRITE_YOUR_TEXT_HERE: 'Écrivez votre texte ici ...',
LINK: 'Lien',
ACTION: 'Action',
CREATE_SIBLING_TOPIC: 'Créer noeud même niveau',
CREATE_CHILD_TOPIC: 'Créer noeud enfant',
DELETE_TOPIC: 'Détruire noeud ',
EDIT_TOPIC_TEXT: 'Editer texte du noeud',
JUST_START_TYPING: 'Commencer saisie',
CANCEL_TEXT_CHANGES: 'Annuler changement texte',
TOPIC_NAVIGATION: 'Navigation sur les noeuds',
ARROW_KEYS: 'Touches flèches',
SELECT_MULTIPLE_NODES: 'Selection multiple de noeuds',
UNDO_EDITION: 'Annuler édition',
REDO_EDITION: 'Refaire édition',
SELECT_ALL_TOPIC: 'Sélection tous noeuds',
CHANGE_TEXT_BOLD: 'Caractères en gras',
SAVE_CHANGES: 'Enregistrer changements',
CHANGE_TEXT_ITALIC: 'Caractères en italique',
DESELECT_ALL_TOPIC: 'Deselection tous noeuds',
COLLAPSE_CHILDREN: 'Fermer enfants',
KEYBOARD_SHORTCUTS_MSG: 'Les raccourcis clavier vous font gagner du temps, en vous permettant de garder les mains sur le clavier sans utiliser la souris.',
COPY_AND_PASTE_TOPICS: 'Copier et coller les noeuds',
MULTIPLE_LINES: 'Ajouter plusieurs lignes de texte',
};
export default FR;

View File

@ -48,6 +48,27 @@ const PT_BR = {
RELATIONSHIP_COULD_NOT_BE_CREATED: 'A relação não pode ser criada. Uma relação pai deve ser selecionada primeiro.',
SELECTION_COPIED_TO_CLIPBOARD: 'Tópicos copiados ao clipboard.',
ONLY_ONE_TOPIC_MUST_BE_SELECTED_COLLAPSE: 'Tópicos filhos não podem ser colapsados. Só um tópico deve ser selecionado.',
ACTION: 'Ação',
CREATE_SIBLING_TOPIC: 'Criar tópico tronco',
CREATE_CHILD_TOPIC: 'Criar Tópico Filho',
DELETE_TOPIC: 'Deletar Tópico',
EDIT_TOPIC_TEXT: 'Editar Texto do Tópico',
JUST_START_TYPING: ' Comece apenas digitando',
CANCEL_TEXT_CHANGES: 'Cancelar Alterações no Texto',
TOPIC_NAVIGATION: 'Navegação de Tópico',
ARROW_KEYS: 'Setas de Navegação',
SELECT_MULTIPLE_NODES: 'Selecionar Múltiplos nós',
UNDO_EDITION: 'Desfazer Edição',
REDO_EDITION: 'REfazer Edição',
SELECT_ALL_TOPIC: 'SElecionar todos os Tópicos',
CHANGE_TEXT_BOLD: 'Mudar a fonte para negrito',
SAVE_CHANGES: 'Salvar alterações',
CHANGE_TEXT_ITALIC: 'Mudar texto Itálico',
DESELECT_ALL_TOPIC: 'Deselecionar todos os tópicos',
COLLAPSE_CHILDREN: 'Encolher Sub-Tópico',
KEYBOARD_SHORTCUTS_MSG: 'Atalhos de teclado podem ajud-alo a poupar tempo evitando que você precise tirar as mãos do teclado para usar o mouse.',
COPY_AND_PASTE_TOPICS: 'Copiar e colar tópicos',
MULTIPLE_LINES: 'Adicionar Múltiplas Linhas de Texto',
};
export default PT_BR;

View File

@ -48,6 +48,28 @@ const ZH_CN = {
CENTRAL_TOPIC_CAN_NOT_BE_DELETED: '不能删除根节点。',
RELATIONSHIP_COULD_NOT_BE_CREATED: '不能创建关系。 应先选择创建关系的一对上级节点。',
SELECTION_COPIED_TO_CLIPBOARD: '节点已拷贝到粘贴板。',
ACTION: '处理',
CREATE_SIBLING_TOPIC: '建立平行节点',
CREATE_CHILD_TOPIC: '建立子节点',
DELETE_TOPIC: '删除节点',
EDIT_TOPIC_TEXT: '编辑节点文本',
JUST_START_TYPING: '开始敲入文字吧',
CANCEL_TEXT_CHANGES: '取消文字修改',
TOPIC_NAVIGATION: '节点导航',
ARROW_KEYS: '方向键',
SELECT_MULTIPLE_NODES: '选择多个节点',
UNDO_EDITION: '撤销',
REDO_EDITION: '重做',
SELECT_ALL_TOPIC: '选择所有节点',
CHANGE_TEXT_BOLD: '设字体为粗体',
SAVE_CHANGES: '保存修改',
CHANGE_TEXT_ITALIC: '设字体为斜体',
DESELECT_ALL_TOPIC: '不选任何节点',
COLLAPSE_CHILDREN: '折叠子节点',
KEYBOARD_SHORTCUTS_MSG: '快捷键可以帮助你节约时间,使你的手不必离开键盘而去使用鼠标。',
COPY_AND_PASTE_TOPICS: '拷贝和粘贴节点',
MULTIPLE_LINES: '添加多行长文本',
};
export default ZH_CN;

View File

@ -48,6 +48,27 @@ const ZH_TW = {
CENTRAL_TOPIC_CAN_NOT_BE_DELETED: '不能刪除根節點。',
RELATIONSHIP_COULD_NOT_BE_CREATED: '不能創建關係。 應先選擇創建關係的一對上級節點。',
SELECTION_COPIED_TO_CLIPBOARD: '節點已拷貝到粘貼板。',
ACTION: '處理',
CREATE_SIBLING_TOPIC: '建立平行節點',
CREATE_CHILD_TOPIC: '建立子節點',
DELETE_TOPIC: '刪除節點',
EDIT_TOPIC_TEXT: '編輯節點文本',
JUST_START_TYPING: '開始敲入文字吧',
CANCEL_TEXT_CHANGES: '取消文字修改',
TOPIC_NAVIGATION: '節點導航',
ARROW_KEYS: '方向鍵',
SELECT_MULTIPLE_NODES: '選擇多個節點',
UNDO_EDITION: '撤銷',
REDO_EDITION: '重做',
SELECT_ALL_TOPIC: '選擇所有節點',
CHANGE_TEXT_BOLD: '設字體為粗體',
SAVE_CHANGES: '保存修改',
CHANGE_TEXT_ITALIC: '設字體為斜體',
DESELECT_ALL_TOPIC: '不選任何節點',
COLLAPSE_CHILDREN: '折疊子節點',
KEYBOARD_SHORTCUTS_MSG: '快捷鍵可以幫助你節約時間,使你的手不必離開鍵盤而去使用滑鼠。',
COPY_AND_PASTE_TOPICS: '拷貝和粘貼節點',
MULTIPLE_LINES: '添加多行長文本',
};
export default ZH_TW;

View File

@ -6,11 +6,6 @@ export const css = `
outline: none;
padding: 4px 0;
z-index: 20000;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

View File

@ -0,0 +1,135 @@
/*
* 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 BootstrapDialog from '../libraries/bootstrap/BootstrapDialog';
import { $msg } from '../Messages';
class KeyboardShortcutDialog extends BootstrapDialog {
constructor() {
super($msg('SHORTCUTS'), {
closeButton: true,
acceptButton: false,
});
this.setContent(`<div id="keyboardTable">
<table>
<colgroup>
<col width="40%"/>
<col width="30%"/>
<col width="30%"/>
</colgroup>
<thead>
<tr>
<th>${$msg('ACTION')}</th>
<th>Windows - Linux</th>
<th>Mac OS X</th>
</tr>
</thead>
<tbody>
<tr>
<td>${$msg('SAVE_CHANGES')}</td>
<td>Ctrl + s</td>
<td> + s</td>
</tr>
<tr>
<td>${$msg('CREATE_SIBLING_TOPIC')}</td>
<td>Enter</td>
<td>Enter</td>
</tr>
<tr>
<td>${$msg('CREATE_CHILD_TOPIC')}</td>
<td>Insert / Tab</td>
<td> + Enter / Tab</td>
</tr>
<tr>
<td>${$msg('DELETE_TOPIC')}</td>
<td>Delete</td>
<td>Delete</td>
</tr>
<tr>
<td>${$msg('EDIT_TOPIC_TEXT')}</td>
<td>${$msg('JUST_START_TYPING')} | F2</td>
<td>${$msg('JUST_START_TYPING')} | F2</td>
</tr>
<tr>
<td>${$msg('MULTIPLE_LINES')}</td>
<td>Ctrl + Enter</td>
<td> + Enter</td>
</tr>
<tr>
<td>${$msg('COPY_AND_PASTE_TOPICS')}</td>
<td>Ctrl + c/Ctrl + v</td>
<td> + c/ + v</td>
</tr>
<tr>
<td>${$msg('COLLAPSE_CHILDREN')}</td>
<td>Space bar</td>
<td>Space bar</td>
</tr>
<tr>
<td>${$msg('TOPIC_NAVIGATION')}</td>
<td>${$msg('ARROW_KEYS')}</td>
<td>${$msg('ARROW_KEYS')}</td>
</tr>
<tr>
<td>${$msg('SELECT_MULTIPLE_NODES')}</td>
<td>Ctrl + Mouse Click</td>
<td>Ctrl + Mouse Click</td>
</tr>
<tr>
<td>${$msg('UNDO_EDITION')}</td>
<td>Ctrl + z</td>
<td> + z</td>
</tr>
<tr>
<td>${$msg('REDO_EDITION')}</td>
<td>Ctrl + Shift + z</td>
<td> + Shift + z</td>
</tr>
<tr>
<td>${$msg('SELECT_ALL_TOPIC')}</td>
<td>Ctrl + a</td>
<td> + a</td>
</tr>
<tr>
<td>${$msg('CANCEL_TEXT_CHANGES')}</td>
<td>Esc</td>
<td>Esc</td>
</tr>
<tr>
<td>${$msg('DESELECT_ALL_TOPIC')}</td>
<td>Ctrl + Shift + a</td>
<td> + Shift + a</td>
</tr>
<tr>
<td>${$msg('CHANGE_TEXT_ITALIC')}</td>
<td>Ctrl + i</td>
<td> + i</td>
</tr>
<tr>
<td>${$msg('CHANGE_TEXT_BOLD')}</td>
<td>Ctrl + b</td>
<td> + b</td>
</tr>
</tbody>
</table>
</div>`);
this.show();
}
}
export default KeyboardShortcutDialog;

View File

@ -48,7 +48,6 @@ class KeyboardShortcutTooltip extends FloatingTip {
result.css({
padding: '3px 0px',
width: '100%',
color: 'white',
});
const textContainer = $('<div></div>').text(text);

View File

@ -26,6 +26,7 @@ import IconPanel from './IconPanel';
import ColorPalettePanel from './ColorPalettePanel';
import ToolbarItem from './ToolbarItem';
import KeyboardShortcutTooltip from './KeyboardShortcutTooltip';
import KeyboardShortcutDialog from './KeyboardShortcutDialog';
class Menu extends IMenu {
constructor(designer, containerId, mapId, readOnly, baseUrl = '') {
@ -399,35 +400,18 @@ class Menu extends IMenu {
const keyboardShortcut = $('#keyboardShortcuts');
if (keyboardShortcut) {
keyboardShortcut.bind('click', (event) => {
BootstrapDialogRequest.active = new BootstrapDialogRequest('c/keyboard', $msg('SHORTCUTS'), {
closeButton: true,
cancelButton: true,
});
BootstrapDialogRequest.active = new KeyboardShortcutDialog();
designer.onObjectFocusEvent();
event.preventDefault();
});
}
const videoElem = $('#tutorialVideo');
if (videoElem) {
const width = 900;
const height = 500;
const left = (window.screen.width / 2) - (width / 2);
const top = (window.screen.height / 2) - (height / 2);
videoElem.bind('click', (event) => {
window.open('https://www.youtube.com/tv?vq=medium#/watch?v=rKxZwNKs9cE', '_blank', `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=${width}, height=${height}, top=${top}, left=${left}`);
event.preventDefault();
});
}
}
_registerEvents(designer) {
const me = this;
// Register on close events ...
this._toolbarElems.forEach((elem) => {
elem.addEvent('show', () => {
me.clear();
this.clear();
});
});
@ -435,7 +419,7 @@ class Menu extends IMenu {
const topics = designer.getModel().filterSelectedTopics();
const rels = designer.getModel().filterSelectedRelationships();
me._toolbarElems.forEach((button) => {
this._toolbarElems.forEach((button) => {
const isTopicAction = button.isTopicAction();
const isRelAction = button.isRelAction();
@ -453,7 +437,7 @@ class Menu extends IMenu {
const topics = designer.getModel().filterSelectedTopics();
const rels = designer.getModel().filterSelectedRelationships();
me._toolbarElems.forEach((button) => {
this._toolbarElems.forEach((button) => {
const isTopicAction = button.isTopicAction();
const isRelAction = button.isRelAction();

View File

@ -35,7 +35,6 @@ class ToolbarNotifier {
this.container.data('transitioning', true);
this.container.text(msg);
this.container.css({
top: '5px',
left: ($(window).width() - this.container.width()) / 2 - 9,
});
this.container.show().fadeOut(5000);

View File

@ -50,7 +50,7 @@ class ToolbarPaneItem extends ToolbarItem {
className: 'toolbarPaneTip',
trigger: 'manual',
template:
'<div class="popover popoverGray" role="tooltip"><div class="arrow arrowGray"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
'<div class="popover" role="tooltip"><div class="arrow arrowGray"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
});
this._tip.addEvent('hide', () => {

View File

@ -14,17 +14,21 @@ body {
-ms-user-select: none;
user-select: none;
overflow: hidden;
position: fixed
}
div#mindplot {
position: relative;
top: @header-toolbar-height;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
overflow: hidden;
opacity: 1;
background-color: #f2f2f2;
background-image: linear-gradient(#ebe9e7 1px, transparent 1px), linear-gradient(to right, #ebe9e7 1px, #f2f2f2 1px);
background-size: 50px 50px;
}
div#small_error_icon {
@ -81,15 +85,6 @@ div.modalDialog {
border: 1px solid #999;
padding: 10px;
overflow: auto;
/* IE6-7 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
@ -125,16 +120,6 @@ div.shareModalDialog {
width: 550px;
}
#tutorialVideo {
background: url(../images/help.png) no-repeat left center;
padding-left: 19px;
}
#keyboardShortcuts {
background: url(../images/help.png) no-repeat left center;
padding-left: 19px;
}
.panelIcon {
width: 20px;
height: 20px;
@ -147,21 +132,75 @@ div.shareModalDialog {
background-color: #efefef;
}
.popoverBlack {
background: black;
}
.popoverBlack.bottom .arrow:after {
border-bottom-color: black;
}
.popoverGray {
background: #e4e2d2;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
border: 3px double #bebebe;
.popover {
max-width: none;
}
.popoverGray.bottom .arrow:after {
border-bottom-color: #e4e2d2;
#floating-panel {
position: fixed;
display: flex;
flex-direction: column;
align-items: flex-end;
bottom: 20px;
right: 20px;
}
div#bottom-logo {
position: fixed;
left: 20px;
bottom: 10px;
background: url(../images/logo-text-black.svg) no-repeat;
width: 90px;
height: 40px;
}
#zoom-button {
width: 40px;
border: 0;
}
#zoom-plus,
#zoom-minus {
height: 40px;
width: 40px;
background-repeat: no-repeat;
background-size: 40px 40px;
background-position: center;
cursor: pointer;
background-color: #FFF;
}
#zoom-plus {
border-radius: 8px 8px 0 0;
}
#zoom-minus {
border-radius: 0 0 8px 8px;
}
div#shotcuts > img{
margin: 20px 0;
width: 40px;
height: 40px;
}
#keyboardTable {
font-family: Arial, verdana, serif;
font-size: 13px;
width: 100%;
}
#keyboardTable td {
padding: 3px;
white-space: nowrap;
}
#keyboardTable th {
padding: 5px;
white-space: nowrap;
}
#keyboardTable th {
background-color: #000000;
color: #ffffff;
}

View File

@ -28,17 +28,6 @@ div#footer {
left: 0;
}
div#footerLogo {
width: 114px;
height: 56px;
position: absolute;
display: list-item;
list-style-image: url(../images/logo-xsmall.png);
list-style-position: inside;
right: 10px;
top: -30px;
}
div#zoomIn {
background: url(../images/zoom-in.png) no-repeat left top;
margin-top: 10px;

View File

@ -1,5 +1,5 @@
@header-height : 75px;
@header-toolbar-height : 35px;
@header-height : 0px;
@header-toolbar-height : 50px;
@header-info-height : @header-height - @header-toolbar-height;
div#header {
@ -11,29 +11,6 @@ div#header {
top: 0;
}
div#headerLogo {
background: url(../images/logo-small.png) no-repeat center top;
height: 40px;
width: 80px;
float: left;
padding-left: 20px;
}
div#headerInfo {
width: 100%;
height: @header-info-height;
color: white;
padding: 0px 0px
}
div#headerActions {
text-align: right;
margin-top: 13px;
padding-right: 10px;
color: white;
float: right;
}
div#headerActions span {
border-bottom: 3px solid rgb(247, 201, 49);
}
@ -43,78 +20,62 @@ div#headerActions a {
text-decoration: none;
}
div#headerMapTitle {
min-width: 200px;
height: @header-info-height - 13;
text-align: left;
padding-top: 13px;
padding-left: 50px;
color: white;
float: left;
font-style: italic;
}
div#headerMapTitle span {
padding: 4px 50px;
border: 1px solid rgb(90, 90, 90);
background-color: rgb(45, 45, 45);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
white-space: nowrap;
}
div#headerNotifier {
border: 1px solid rgb(241, 163, 39);
background-color: rgb(252, 235, 192);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
position: absolute;
position: fixed;
padding: 5px 9px;
color: back;
white-space: nowrap;
margin-top: 5px;
/*margin-top:-34px;*/
display: none;
/*right: 5px;*/
bottom: 10px;
}
div#toolbarRight {
float: right;
white-space: nowrap;
vertical-align: middle;
justify-content: center;
margin: 6px 10px;
height: 100%;
}
#account {
float: right;
display: inline;
}
#account >img {
width: 36x;
height: 36px;
}
#share {
margin: 0 30px;
}
.actionButton {
float: right;
cursor: pointer;
margin: 0px 10px;
font-family: Arial, Helvetica, sans-serif;
user-select: none;
vertical-align: middle;
justify-content: center;
padding: 10px 25px;
font-size: 15px;
min-width: 64px;
box-sizing: border-box;
font-weight: 600;
border-radius: 9px;
color: white;
background-color: #ffa800;
}
.actionButton:hover {
transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
@import "toolbar.less";
div#embFooter {
position: absolute;
height: 35px;
width: 100%;
bottom: 0;
left: 0;
border-top: 1px solid black;
background: #E5E5E5;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* FIXME: duplicate in mindmapList
---------------------------- Scrollbar --------------------------------- */
::-webkit-scrollbar {
width: 8px;
direction: rtl;
text-align: left;
position: relative;
left: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #eaeaea;
border-left: 1px solid #ccc;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #c6c6c6;
}
::-webkit-scrollbar-thumb:hover {
background-color: #08c;
}

View File

@ -1,16 +1,36 @@
div#toolbar {
width: 100%;
height: @header-toolbar-height;
background-color: rgb(229, 227, 209);
border-bottom: 3px double rgb(190, 190, 190);
border-top: 1px solid rgb(190, 190, 190);
padding: 0px 15px;
height: 50px;
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
background-color: #fff;
// TODO: make toolbar responsive
min-width: 900px;
overflow: hidden;
}
div#toolbar .buttonContainer {
height: @header-toolbar-height;
padding-top: 8px;
padding-right: 10px;
padding-left: 10px;
float: left;
margin-left: 5px;
border-left: 1px solid lightgray;
}
div#mapName >span {
border-radius: 4px;
float: left;
padding: 8px;
min-width: 30px;
font-weight: bold;
}
div#back {
background: url(../images/back-icon.svg) no-repeat center center;
height: 40px;
width: 80px;
float: left;
margin: 6px 0px;
}
/******************************************************************************************/
@ -35,17 +55,17 @@ div#toolbar .buttonOn:hover {
div#toolbar .buttonOn:hover {
cursor: pointer;
opacity: 1;
background: url(../images/btn-bg-hover.png) no-repeat center top;
// background: url(../images/btn-bg-hover.png) no-repeat center top;
}
div#toolbar .buttonOn {
opacity: 0.8;
background: url(../images/btn-bg-normal.png) no-repeat center top;
// background: url(../images/btn-bg-normal.png) no-repeat center top;
}
div#toolbar .buttonOff {
opacity: 0.4;
background: url(../images/btn-bg-normal.png) no-repeat center top;
// background: url(../images/btn-bg-normal.png) no-repeat center top;
}
div#exportAnchor {
@ -73,24 +93,24 @@ div#toolbar .buttonExtOn:hover {
div#toolbar .buttonExtOn:hover {
opacity: 1;
background: url(../images/btne-bg-hover.png) no-repeat center top;
// background: url(../images/btne-bg-hover.png) no-repeat center top;
}
div#toolbar .buttonExtActive {
opacity: 1;
background: url(../images/btne-bg-selected.png) no-repeat center top;
// background: url(../images/btne-bg-selected.png) no-repeat center top;
}
div#toolbar .buttonExtOn {
opacity: 0.8;
background: url(../images/btne-bg-normal.png) no-repeat center top;
cursor: pointer
// background: url(../images/btne-bg-normal.png) no-repeat center top;
}
div#toolbar .buttonExtOff {
opacity: 0.4;
background: url(../images/btne-bg-normal.png) no-repeat center top;
// background: url(../images/btne-bg-normal.png) no-repeat center top;
}
div#exportAnchor {

View File

@ -23,4 +23,8 @@ div#footer-desc {
div#footer-logo {
float: left;
height: 100px;
}
#floating-panel {
bottom: 80px;
}

View File

@ -11,12 +11,8 @@
<body>
<div id="header">
<div id="headerInfo">
<div id="headerActions"></div>
<div id="headerLogo"></div>
<div id="headerMapTitle">Title: <span>Welcome</span></div>
</div>
<div id="toolbar">
<a href="/c/maps/"><div id="back"></div></a>
<div id="editTab" class="tabContent">
<div id="persist" class="buttonContainer">
<div id="save" class="buttonOn">
@ -25,9 +21,6 @@
<div id="discard" class="buttonOn">
<img src="images/discard.svg" />
</div>
<div id="export" class="buttonOn">
<img src="images/export.svg" />
</div>
</div>
<div id="edit" class="buttonContainer">
<div id="undoEdition" class="buttonOn">
@ -37,18 +30,7 @@
<img src="images/redo.svg"/>
</div>
</div>
<div id="zoom" class="buttonContainer">
<div id="zoomOut" class="buttonOn">
<img src="images/zoom-out.svg"/>
</div>
<div id="zoomIn" class="buttonOn">
<img src="images/zoom-in.svg"/>
</div>
</div>
<div id="node" class="buttonContainer">
<div id="topicShape" class="buttonExtOn">
<img src="images/topic-shape.svg"/>
</div>
<div id="addTopic" class="buttonOn">
<img src="images/topic-add.svg"/>
</div>
@ -64,6 +46,11 @@
<div id="topicIcon" class="buttonExtOn">
<img src="images/topic-icon.svg"/>
</div>
<div id="topicShape" class="buttonExtOn">
<img src="images/topic-shape.svg"/>
</div>
</div>
<div id="node" class="buttonContainer">
<div id="topicNote" class="buttonOn" >
<img src="images/topic-note.svg"/>
</div>
@ -91,15 +78,45 @@
<img src="images/font-color.svg"/>
</div>
</div>
<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" />
</div>
<div id="print" class="buttonOn">
<img src="images/print.svg" />
</div>
<div id="history" class="buttonOn">
<img src="images/history.svg" />
</div>
</div>
</div>
<div id="headerNotifier"></div>
<div id="footer">
<div id="footerLogo"></div>
</div>
</div>
<div id="mindplot" onselectstart="return false;"></div>
<!-- Side Actions -->
<div id="floating-panel">
<div id="keyboardShortcuts" class="buttonExtOn">
<img src="images/keyboard.svg"/>
</div>
<div id="zoom-button">
<button id="zoom-plus">
<img src="images/add.svg" />
</button>
<button id="zoom-minus">
<img src="images/minus.svg" />
</button>
</div>
</div>
<div id="bottom-logo"></div>
<div id="headerNotifier"></div>
</body>
</html>

View File

@ -94,7 +94,6 @@
</div>
</div>
</div>
<div id="headerNotifier"></div>
</div>
<div id="mindplot" onselectstart="return false;"></div>

View File

@ -12,7 +12,18 @@
<body>
<div id="mindplot" onselectstart="return false;"></div>
<div id="floating-panel">
<div id="zoom-button">
<button id="zoom-plus">
<img src="images/add-icon.svg" />
</button>
<button id="zoom-minus">
<img src="images/minus-icon.svg" />
</button>
</div>
<div id="bottom-logo"></div>
</div>
<div id="footer">
<div id="footer-logo"><img src="../images/logo-small.svg" /></div>
<div id="footer-desc">

View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" style="color: black;">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"></path>
</svg>

After

Width:  |  Height:  |  Size: 382 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>

After

Width:  |  Height:  |  Size: 173 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"/></svg>

After

Width:  |  Height:  |  Size: 189 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 571 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 553 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>

After

Width:  |  Height:  |  Size: 381 B

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 3h2v2h-2V8zm0 3h2v2h-2v-2zM8 8h2v2H8V8zm0 3h2v2H8v-2zm-1 2H5v-2h2v2zm0-3H5V8h2v2zm9 7H8v-2h8v2zm0-4h-2v-2h2v2zm0-3h-2V8h2v2zm3 3h-2v-2h2v2zm0-3h-2V8h2v2z"/><path d="M0 0h24v24H0zm0 0h24v24H0z" fill="none"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="36" viewBox="0 0 24 24" width="36"><path d="M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 3h2v2h-2V8zm0 3h2v2h-2v-2zM8 8h2v2H8V8zm0 3h2v2H8v-2zm-1 2H5v-2h2v2zm0-3H5V8h2v2zm9 7H8v-2h8v2zm0-4h-2v-2h2v2zm0-3h-2V8h2v2zm3 3h-2v-2h2v2zm0-3h-2V8h2v2z"/><path d="M0 0h24v24H0zm0 0h24v24H0z" fill="none"/></svg>

Before

Width:  |  Height:  |  Size: 391 B

After

Width:  |  Height:  |  Size: 391 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.4 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13H5v-2h14v2z"/></svg>

After

Width:  |  Height:  |  Size: 155 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/></svg>

After

Width:  |  Height:  |  Size: 302 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/></svg>

Before

Width:  |  Height:  |  Size: 438 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/></svg>

Before

Width:  |  Height:  |  Size: 404 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/></svg>

Before

Width:  |  Height:  |  Size: 438 B

View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/></svg>

Before

Width:  |  Height:  |  Size: 404 B

View File

@ -15,6 +15,20 @@ designer.addEvent('loadSuccess', () => {
document.getElementById('mindplot').classList.add('ready');
});
const zoomInButton = document.getElementById('zoom-plus');
const zoomOutButton = document.getElementById('zoom-minus');
if (zoomInButton) {
zoomInButton.addEventListener('click', () => {
designer.zoomIn();
});
}
if (zoomOutButton) {
zoomOutButton.addEventListener('click', () => {
designer.zoomOut();
});
}
// Load map from XML file persisted on disk...
const mapId = 'welcome';
const persistence = PersistenceManager.getInstance();

View File

@ -14,6 +14,20 @@ designer.addEvent('loadSuccess', () => {
document.getElementById('mindplot').classList.add('ready');
});
const zoomInButton = document.getElementById('zoom-plus');
const zoomOutButton = document.getElementById('zoom-minus');
if (zoomInButton) {
zoomInButton.addEventListener('click', () => {
designer.zoomIn();
});
}
if (zoomOutButton) {
zoomOutButton.addEventListener('click', () => {
designer.zoomOut();
});
}
// Load map from XML file persisted on disk...
const persistence = PersistenceManager.getInstance();
const mindmap = persistence.load(mapId);