Merged in feature/new_editor_toolbar (pull request #27)
Feature/new editor toolbar Approved-by: Matias Arriola
@ -79,7 +79,7 @@ export function buildOptions(options) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const viewPort = {
|
const viewPort = {
|
||||||
height: Number.parseInt(window.innerHeight - 70, 10), // Footer and Header
|
height: Number.parseInt(window.innerHeight, 10),
|
||||||
width: Number.parseInt(window.innerWidth, 10),
|
width: Number.parseInt(window.innerWidth, 10),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -55,7 +55,28 @@ const CA = {
|
|||||||
LINK: 'Enllaç',
|
LINK: 'Enllaç',
|
||||||
OPEN_LINK: 'Obrir Enllaç',
|
OPEN_LINK: 'Obrir Enllaç',
|
||||||
SESSION_EXPIRED: 'La seva sessió ha finalitzat. Si us plau, torni a connectar-se.',
|
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;
|
export default CA;
|
||||||
|
@ -54,7 +54,28 @@ const DE = {
|
|||||||
CANCEL: 'Abbrechen',
|
CANCEL: 'Abbrechen',
|
||||||
LINK: 'Verbindung',
|
LINK: 'Verbindung',
|
||||||
OPEN_LINK: 'Öffne URL',
|
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;
|
export default DE;
|
||||||
|
@ -56,7 +56,27 @@ const EN = {
|
|||||||
OPEN_LINK: 'Open URL',
|
OPEN_LINK: 'Open URL',
|
||||||
SESSION_EXPIRED: 'Your session has expired, please log-in again.',
|
SESSION_EXPIRED: 'Your session has expired, please log-in again.',
|
||||||
URL_ERROR: 'URL not valid',
|
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;
|
export default EN;
|
||||||
|
@ -55,6 +55,26 @@ const ES = {
|
|||||||
LINK: 'Enlace',
|
LINK: 'Enlace',
|
||||||
OPEN_LINK: 'Abrir Enlace',
|
OPEN_LINK: 'Abrir Enlace',
|
||||||
SESSION_EXPIRED: 'Su session ha expirado. Por favor, ingrese nuevamente.',
|
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;
|
export default ES;
|
||||||
|
@ -53,6 +53,28 @@ const FR = {
|
|||||||
REMOVE: 'Supprimer',
|
REMOVE: 'Supprimer',
|
||||||
WRITE_YOUR_TEXT_HERE: 'Écrivez votre texte ici ...',
|
WRITE_YOUR_TEXT_HERE: 'Écrivez votre texte ici ...',
|
||||||
LINK: 'Lien',
|
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;
|
export default FR;
|
||||||
|
@ -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.',
|
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.',
|
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.',
|
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;
|
export default PT_BR;
|
||||||
|
@ -48,6 +48,28 @@ const ZH_CN = {
|
|||||||
CENTRAL_TOPIC_CAN_NOT_BE_DELETED: '不能删除根节点。',
|
CENTRAL_TOPIC_CAN_NOT_BE_DELETED: '不能删除根节点。',
|
||||||
RELATIONSHIP_COULD_NOT_BE_CREATED: '不能创建关系。 应先选择创建关系的一对上级节点。',
|
RELATIONSHIP_COULD_NOT_BE_CREATED: '不能创建关系。 应先选择创建关系的一对上级节点。',
|
||||||
SELECTION_COPIED_TO_CLIPBOARD: '节点已拷贝到粘贴板。',
|
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;
|
export default ZH_CN;
|
||||||
|
@ -48,6 +48,27 @@ const ZH_TW = {
|
|||||||
CENTRAL_TOPIC_CAN_NOT_BE_DELETED: '不能刪除根節點。',
|
CENTRAL_TOPIC_CAN_NOT_BE_DELETED: '不能刪除根節點。',
|
||||||
RELATIONSHIP_COULD_NOT_BE_CREATED: '不能創建關係。 應先選擇創建關係的一對上級節點。',
|
RELATIONSHIP_COULD_NOT_BE_CREATED: '不能創建關係。 應先選擇創建關係的一對上級節點。',
|
||||||
SELECTION_COPIED_TO_CLIPBOARD: '節點已拷貝到粘貼板。',
|
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;
|
export default ZH_TW;
|
||||||
|
@ -6,11 +6,6 @@ export const css = `
|
|||||||
outline: none;
|
outline: none;
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
z-index: 20000;
|
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;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
@ -48,7 +48,6 @@ class KeyboardShortcutTooltip extends FloatingTip {
|
|||||||
result.css({
|
result.css({
|
||||||
padding: '3px 0px',
|
padding: '3px 0px',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
color: 'white',
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const textContainer = $('<div></div>').text(text);
|
const textContainer = $('<div></div>').text(text);
|
||||||
|
@ -26,6 +26,7 @@ import IconPanel from './IconPanel';
|
|||||||
import ColorPalettePanel from './ColorPalettePanel';
|
import ColorPalettePanel from './ColorPalettePanel';
|
||||||
import ToolbarItem from './ToolbarItem';
|
import ToolbarItem from './ToolbarItem';
|
||||||
import KeyboardShortcutTooltip from './KeyboardShortcutTooltip';
|
import KeyboardShortcutTooltip from './KeyboardShortcutTooltip';
|
||||||
|
import KeyboardShortcutDialog from './KeyboardShortcutDialog';
|
||||||
|
|
||||||
class Menu extends IMenu {
|
class Menu extends IMenu {
|
||||||
constructor(designer, containerId, mapId, readOnly, baseUrl = '') {
|
constructor(designer, containerId, mapId, readOnly, baseUrl = '') {
|
||||||
@ -399,35 +400,18 @@ class Menu extends IMenu {
|
|||||||
const keyboardShortcut = $('#keyboardShortcuts');
|
const keyboardShortcut = $('#keyboardShortcuts');
|
||||||
if (keyboardShortcut) {
|
if (keyboardShortcut) {
|
||||||
keyboardShortcut.bind('click', (event) => {
|
keyboardShortcut.bind('click', (event) => {
|
||||||
BootstrapDialogRequest.active = new BootstrapDialogRequest('c/keyboard', $msg('SHORTCUTS'), {
|
BootstrapDialogRequest.active = new KeyboardShortcutDialog();
|
||||||
closeButton: true,
|
|
||||||
cancelButton: true,
|
|
||||||
});
|
|
||||||
designer.onObjectFocusEvent();
|
designer.onObjectFocusEvent();
|
||||||
event.preventDefault();
|
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) {
|
_registerEvents(designer) {
|
||||||
const me = this;
|
|
||||||
// Register on close events ...
|
// Register on close events ...
|
||||||
this._toolbarElems.forEach((elem) => {
|
this._toolbarElems.forEach((elem) => {
|
||||||
elem.addEvent('show', () => {
|
elem.addEvent('show', () => {
|
||||||
me.clear();
|
this.clear();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -435,7 +419,7 @@ class Menu extends IMenu {
|
|||||||
const topics = designer.getModel().filterSelectedTopics();
|
const topics = designer.getModel().filterSelectedTopics();
|
||||||
const rels = designer.getModel().filterSelectedRelationships();
|
const rels = designer.getModel().filterSelectedRelationships();
|
||||||
|
|
||||||
me._toolbarElems.forEach((button) => {
|
this._toolbarElems.forEach((button) => {
|
||||||
const isTopicAction = button.isTopicAction();
|
const isTopicAction = button.isTopicAction();
|
||||||
const isRelAction = button.isRelAction();
|
const isRelAction = button.isRelAction();
|
||||||
|
|
||||||
@ -453,7 +437,7 @@ class Menu extends IMenu {
|
|||||||
const topics = designer.getModel().filterSelectedTopics();
|
const topics = designer.getModel().filterSelectedTopics();
|
||||||
const rels = designer.getModel().filterSelectedRelationships();
|
const rels = designer.getModel().filterSelectedRelationships();
|
||||||
|
|
||||||
me._toolbarElems.forEach((button) => {
|
this._toolbarElems.forEach((button) => {
|
||||||
const isTopicAction = button.isTopicAction();
|
const isTopicAction = button.isTopicAction();
|
||||||
const isRelAction = button.isRelAction();
|
const isRelAction = button.isRelAction();
|
||||||
|
|
||||||
|
@ -35,7 +35,6 @@ class ToolbarNotifier {
|
|||||||
this.container.data('transitioning', true);
|
this.container.data('transitioning', true);
|
||||||
this.container.text(msg);
|
this.container.text(msg);
|
||||||
this.container.css({
|
this.container.css({
|
||||||
top: '5px',
|
|
||||||
left: ($(window).width() - this.container.width()) / 2 - 9,
|
left: ($(window).width() - this.container.width()) / 2 - 9,
|
||||||
});
|
});
|
||||||
this.container.show().fadeOut(5000);
|
this.container.show().fadeOut(5000);
|
||||||
|
@ -50,7 +50,7 @@ class ToolbarPaneItem extends ToolbarItem {
|
|||||||
className: 'toolbarPaneTip',
|
className: 'toolbarPaneTip',
|
||||||
trigger: 'manual',
|
trigger: 'manual',
|
||||||
template:
|
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', () => {
|
this._tip.addEvent('hide', () => {
|
||||||
|
@ -14,17 +14,21 @@ body {
|
|||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: fixed
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div#mindplot {
|
div#mindplot {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
top: @header-toolbar-height;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border: 0;
|
border: 0;
|
||||||
overflow: hidden;
|
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 {
|
div#small_error_icon {
|
||||||
@ -81,15 +85,6 @@ div.modalDialog {
|
|||||||
border: 1px solid #999;
|
border: 1px solid #999;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
overflow: auto;
|
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;
|
-webkit-background-clip: padding-box;
|
||||||
-moz-background-clip: padding-box;
|
-moz-background-clip: padding-box;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
@ -125,16 +120,6 @@ div.shareModalDialog {
|
|||||||
width: 550px;
|
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 {
|
.panelIcon {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
@ -147,21 +132,75 @@ div.shareModalDialog {
|
|||||||
background-color: #efefef;
|
background-color: #efefef;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popoverBlack {
|
.popover {
|
||||||
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;
|
|
||||||
max-width: none;
|
max-width: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popoverGray.bottom .arrow:after {
|
#floating-panel {
|
||||||
border-bottom-color: #e4e2d2;
|
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;
|
||||||
}
|
}
|
@ -28,17 +28,6 @@ div#footer {
|
|||||||
left: 0;
|
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 {
|
div#zoomIn {
|
||||||
background: url(../images/zoom-in.png) no-repeat left top;
|
background: url(../images/zoom-in.png) no-repeat left top;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
@header-height : 75px;
|
@header-height : 0px;
|
||||||
@header-toolbar-height : 35px;
|
@header-toolbar-height : 50px;
|
||||||
@header-info-height : @header-height - @header-toolbar-height;
|
@header-info-height : @header-height - @header-toolbar-height;
|
||||||
|
|
||||||
div#header {
|
div#header {
|
||||||
@ -11,29 +11,6 @@ div#header {
|
|||||||
top: 0;
|
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 {
|
div#headerActions span {
|
||||||
border-bottom: 3px solid rgb(247, 201, 49);
|
border-bottom: 3px solid rgb(247, 201, 49);
|
||||||
}
|
}
|
||||||
@ -43,78 +20,62 @@ div#headerActions a {
|
|||||||
text-decoration: none;
|
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 {
|
div#headerNotifier {
|
||||||
border: 1px solid rgb(241, 163, 39);
|
border: 1px solid rgb(241, 163, 39);
|
||||||
background-color: rgb(252, 235, 192);
|
background-color: rgb(252, 235, 192);
|
||||||
-moz-border-radius: 3px;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
position: absolute;
|
position: fixed;
|
||||||
padding: 5px 9px;
|
padding: 5px 9px;
|
||||||
color: back;
|
color: back;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
/*margin-top:-34px;*/
|
|
||||||
display: none;
|
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";
|
@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;
|
|
||||||
}
|
|
@ -1,16 +1,36 @@
|
|||||||
div#toolbar {
|
div#toolbar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: @header-toolbar-height;
|
height: 50px;
|
||||||
background-color: rgb(229, 227, 209);
|
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
|
||||||
border-bottom: 3px double rgb(190, 190, 190);
|
background-color: #fff;
|
||||||
border-top: 1px solid rgb(190, 190, 190);
|
// TODO: make toolbar responsive
|
||||||
padding: 0px 15px;
|
min-width: 900px;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
div#toolbar .buttonContainer {
|
div#toolbar .buttonContainer {
|
||||||
height: @header-toolbar-height;
|
height: @header-toolbar-height;
|
||||||
|
padding-top: 8px;
|
||||||
|
padding-right: 10px;
|
||||||
|
padding-left: 10px;
|
||||||
float: left;
|
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 {
|
div#toolbar .buttonOn:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
opacity: 1;
|
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 {
|
div#toolbar .buttonOn {
|
||||||
opacity: 0.8;
|
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 {
|
div#toolbar .buttonOff {
|
||||||
opacity: 0.4;
|
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 {
|
div#exportAnchor {
|
||||||
@ -73,24 +93,24 @@ div#toolbar .buttonExtOn:hover {
|
|||||||
|
|
||||||
div#toolbar .buttonExtOn:hover {
|
div#toolbar .buttonExtOn:hover {
|
||||||
opacity: 1;
|
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 {
|
div#toolbar .buttonExtActive {
|
||||||
opacity: 1;
|
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 {
|
div#toolbar .buttonExtOn {
|
||||||
opacity: 0.8;
|
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 {
|
div#toolbar .buttonExtOff {
|
||||||
opacity: 0.4;
|
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 {
|
div#exportAnchor {
|
||||||
|
@ -23,4 +23,8 @@ div#footer-desc {
|
|||||||
div#footer-logo {
|
div#footer-logo {
|
||||||
float: left;
|
float: left;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#floating-panel {
|
||||||
|
bottom: 80px;
|
||||||
}
|
}
|
@ -11,12 +11,8 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="header">
|
<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">
|
<div id="toolbar">
|
||||||
|
<a href="/c/maps/"><div id="back"></div></a>
|
||||||
<div id="editTab" class="tabContent">
|
<div id="editTab" class="tabContent">
|
||||||
<div id="persist" class="buttonContainer">
|
<div id="persist" class="buttonContainer">
|
||||||
<div id="save" class="buttonOn">
|
<div id="save" class="buttonOn">
|
||||||
@ -25,9 +21,6 @@
|
|||||||
<div id="discard" class="buttonOn">
|
<div id="discard" class="buttonOn">
|
||||||
<img src="images/discard.svg" />
|
<img src="images/discard.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div id="export" class="buttonOn">
|
|
||||||
<img src="images/export.svg" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="edit" class="buttonContainer">
|
<div id="edit" class="buttonContainer">
|
||||||
<div id="undoEdition" class="buttonOn">
|
<div id="undoEdition" class="buttonOn">
|
||||||
@ -37,18 +30,7 @@
|
|||||||
<img src="images/redo.svg"/>
|
<img src="images/redo.svg"/>
|
||||||
</div>
|
</div>
|
||||||
</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="node" class="buttonContainer">
|
||||||
<div id="topicShape" class="buttonExtOn">
|
|
||||||
<img src="images/topic-shape.svg"/>
|
|
||||||
</div>
|
|
||||||
<div id="addTopic" class="buttonOn">
|
<div id="addTopic" class="buttonOn">
|
||||||
<img src="images/topic-add.svg"/>
|
<img src="images/topic-add.svg"/>
|
||||||
</div>
|
</div>
|
||||||
@ -64,6 +46,11 @@
|
|||||||
<div id="topicIcon" class="buttonExtOn">
|
<div id="topicIcon" class="buttonExtOn">
|
||||||
<img src="images/topic-icon.svg"/>
|
<img src="images/topic-icon.svg"/>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="topicShape" class="buttonExtOn">
|
||||||
|
<img src="images/topic-shape.svg"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="node" class="buttonContainer">
|
||||||
<div id="topicNote" class="buttonOn" >
|
<div id="topicNote" class="buttonOn" >
|
||||||
<img src="images/topic-note.svg"/>
|
<img src="images/topic-note.svg"/>
|
||||||
</div>
|
</div>
|
||||||
@ -91,15 +78,45 @@
|
|||||||
<img src="images/font-color.svg"/>
|
<img src="images/font-color.svg"/>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
|
||||||
<div id="headerNotifier"></div>
|
|
||||||
<div id="footer">
|
|
||||||
<div id="footerLogo"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="mindplot" onselectstart="return false;"></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>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
@ -94,7 +94,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="headerNotifier"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="mindplot" onselectstart="return false;"></div>
|
<div id="mindplot" onselectstart="return false;"></div>
|
||||||
|
@ -12,7 +12,18 @@
|
|||||||
<body>
|
<body>
|
||||||
<div id="mindplot" onselectstart="return false;"></div>
|
<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">
|
||||||
<div id="footer-logo"><img src="../images/logo-small.svg" /></div>
|
<div id="footer-logo"><img src="../images/logo-small.svg" /></div>
|
||||||
<div id="footer-desc">
|
<div id="footer-desc">
|
||||||
|
@ -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 |
@ -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 |
@ -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 |
Before Width: | Height: | Size: 571 B |
Before Width: | Height: | Size: 553 B |
Before Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 1.0 KiB |
Before Width: | Height: | Size: 1.2 KiB |
@ -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 |
@ -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 |
Before Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 7.4 KiB |
After Width: | Height: | Size: 7.0 KiB |
Before Width: | Height: | Size: 13 KiB |
@ -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 |
@ -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 |
@ -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 |
@ -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 |
@ -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 |
@ -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 |
@ -15,6 +15,20 @@ designer.addEvent('loadSuccess', () => {
|
|||||||
document.getElementById('mindplot').classList.add('ready');
|
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...
|
// Load map from XML file persisted on disk...
|
||||||
const mapId = 'welcome';
|
const mapId = 'welcome';
|
||||||
const persistence = PersistenceManager.getInstance();
|
const persistence = PersistenceManager.getInstance();
|
||||||
|
@ -14,6 +14,20 @@ designer.addEvent('loadSuccess', () => {
|
|||||||
document.getElementById('mindplot').classList.add('ready');
|
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...
|
// Load map from XML file persisted on disk...
|
||||||
const persistence = PersistenceManager.getInstance();
|
const persistence = PersistenceManager.getInstance();
|
||||||
const mindmap = persistence.load(mapId);
|
const mindmap = persistence.load(mapId);
|
||||||
|