diff --git a/packages/mindplot/src/components/DesignerBuilder.js b/packages/mindplot/src/components/DesignerBuilder.js index 09156ed8..d9527f63 100644 --- a/packages/mindplot/src/components/DesignerBuilder.js +++ b/packages/mindplot/src/components/DesignerBuilder.js @@ -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), }; diff --git a/packages/mindplot/src/components/lang/ca.js b/packages/mindplot/src/components/lang/ca.js index 5682d468..d0b4c339 100644 --- a/packages/mindplot/src/components/lang/ca.js +++ b/packages/mindplot/src/components/lang/ca.js @@ -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; diff --git a/packages/mindplot/src/components/lang/de.js b/packages/mindplot/src/components/lang/de.js index f2589a21..796f69b6 100644 --- a/packages/mindplot/src/components/lang/de.js +++ b/packages/mindplot/src/components/lang/de.js @@ -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; diff --git a/packages/mindplot/src/components/lang/en.js b/packages/mindplot/src/components/lang/en.js index c9bd8c6d..e9935337 100644 --- a/packages/mindplot/src/components/lang/en.js +++ b/packages/mindplot/src/components/lang/en.js @@ -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; diff --git a/packages/mindplot/src/components/lang/es.js b/packages/mindplot/src/components/lang/es.js index b1a4a24f..b532aaac 100644 --- a/packages/mindplot/src/components/lang/es.js +++ b/packages/mindplot/src/components/lang/es.js @@ -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; diff --git a/packages/mindplot/src/components/lang/fr.js b/packages/mindplot/src/components/lang/fr.js index dcc4ce4f..c11c535a 100644 --- a/packages/mindplot/src/components/lang/fr.js +++ b/packages/mindplot/src/components/lang/fr.js @@ -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; diff --git a/packages/mindplot/src/components/lang/pt_BR.js b/packages/mindplot/src/components/lang/pt_BR.js index c35819bc..5017fb3f 100644 --- a/packages/mindplot/src/components/lang/pt_BR.js +++ b/packages/mindplot/src/components/lang/pt_BR.js @@ -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; diff --git a/packages/mindplot/src/components/lang/zh_CN.js b/packages/mindplot/src/components/lang/zh_CN.js index 5d056929..2e83727a 100644 --- a/packages/mindplot/src/components/lang/zh_CN.js +++ b/packages/mindplot/src/components/lang/zh_CN.js @@ -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; diff --git a/packages/mindplot/src/components/lang/zh_TW.js b/packages/mindplot/src/components/lang/zh_TW.js index 9f899171..95ecf63c 100644 --- a/packages/mindplot/src/components/lang/zh_TW.js +++ b/packages/mindplot/src/components/lang/zh_TW.js @@ -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; diff --git a/packages/mindplot/src/components/widget/ColorPaletteHtml.js b/packages/mindplot/src/components/widget/ColorPaletteHtml.js index 98372d8e..3b3906d0 100644 --- a/packages/mindplot/src/components/widget/ColorPaletteHtml.js +++ b/packages/mindplot/src/components/widget/ColorPaletteHtml.js @@ -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; } diff --git a/packages/mindplot/src/components/widget/KeyboardShortcutDialog.js b/packages/mindplot/src/components/widget/KeyboardShortcutDialog.js new file mode 100644 index 00000000..1bab17b0 --- /dev/null +++ b/packages/mindplot/src/components/widget/KeyboardShortcutDialog.js @@ -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(`
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
${$msg('ACTION')}Windows - LinuxMac OS X
${$msg('SAVE_CHANGES')}Ctrl + s⌘ + s
${$msg('CREATE_SIBLING_TOPIC')}EnterEnter
${$msg('CREATE_CHILD_TOPIC')}Insert / Tab⌘ + Enter / Tab
${$msg('DELETE_TOPIC')}DeleteDelete
${$msg('EDIT_TOPIC_TEXT')}${$msg('JUST_START_TYPING')} | F2${$msg('JUST_START_TYPING')} | F2
${$msg('MULTIPLE_LINES')}Ctrl + Enter⌘ + Enter
${$msg('COPY_AND_PASTE_TOPICS')}Ctrl + c/Ctrl + v⌘ + c/⌘ + v
${$msg('COLLAPSE_CHILDREN')}Space barSpace bar
${$msg('TOPIC_NAVIGATION')}${$msg('ARROW_KEYS')}${$msg('ARROW_KEYS')}
${$msg('SELECT_MULTIPLE_NODES')}Ctrl + Mouse ClickCtrl + Mouse Click
${$msg('UNDO_EDITION')}Ctrl + z⌘ + z
${$msg('REDO_EDITION')}Ctrl + Shift + z⌘ + Shift + z
${$msg('SELECT_ALL_TOPIC')}Ctrl + a⌘ + a
${$msg('CANCEL_TEXT_CHANGES')}EscEsc
${$msg('DESELECT_ALL_TOPIC')}Ctrl + Shift + a⌘ + Shift + a
${$msg('CHANGE_TEXT_ITALIC')}Ctrl + i⌘ + i
${$msg('CHANGE_TEXT_BOLD')}Ctrl + b⌘ + b
+
`); + this.show(); + } +} + +export default KeyboardShortcutDialog; diff --git a/packages/mindplot/src/components/widget/KeyboardShortcutTooltip.js b/packages/mindplot/src/components/widget/KeyboardShortcutTooltip.js index 5333756f..187c312c 100644 --- a/packages/mindplot/src/components/widget/KeyboardShortcutTooltip.js +++ b/packages/mindplot/src/components/widget/KeyboardShortcutTooltip.js @@ -48,7 +48,6 @@ class KeyboardShortcutTooltip extends FloatingTip { result.css({ padding: '3px 0px', width: '100%', - color: 'white', }); const textContainer = $('
').text(text); diff --git a/packages/mindplot/src/components/widget/Menu.js b/packages/mindplot/src/components/widget/Menu.js index 93be901b..04dfbba8 100644 --- a/packages/mindplot/src/components/widget/Menu.js +++ b/packages/mindplot/src/components/widget/Menu.js @@ -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(); diff --git a/packages/mindplot/src/components/widget/ToolbarNotifier.js b/packages/mindplot/src/components/widget/ToolbarNotifier.js index bcb32da0..f0c62b5c 100644 --- a/packages/mindplot/src/components/widget/ToolbarNotifier.js +++ b/packages/mindplot/src/components/widget/ToolbarNotifier.js @@ -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); diff --git a/packages/mindplot/src/components/widget/ToolbarPaneItem.js b/packages/mindplot/src/components/widget/ToolbarPaneItem.js index 891cb609..aeaad0a6 100644 --- a/packages/mindplot/src/components/widget/ToolbarPaneItem.js +++ b/packages/mindplot/src/components/widget/ToolbarPaneItem.js @@ -50,7 +50,7 @@ class ToolbarPaneItem extends ToolbarItem { className: 'toolbarPaneTip', trigger: 'manual', template: - '', + '', }); this._tip.addEvent('hide', () => { diff --git a/packages/mindplot/test/playground/map-render/css/editor.less b/packages/mindplot/test/playground/map-render/css/editor.less index f5dc7337..f4fc191d 100644 --- a/packages/mindplot/test/playground/map-render/css/editor.less +++ b/packages/mindplot/test/playground/map-render/css/editor.less @@ -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; } \ No newline at end of file diff --git a/packages/mindplot/test/playground/map-render/css/embedded.less b/packages/mindplot/test/playground/map-render/css/embedded.less index 98ddd4e8..7a1f0bae 100644 --- a/packages/mindplot/test/playground/map-render/css/embedded.less +++ b/packages/mindplot/test/playground/map-render/css/embedded.less @@ -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; diff --git a/packages/mindplot/test/playground/map-render/css/header.less b/packages/mindplot/test/playground/map-render/css/header.less index 8148144e..84ccfc1e 100644 --- a/packages/mindplot/test/playground/map-render/css/header.less +++ b/packages/mindplot/test/playground/map-render/css/header.less @@ -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; -} \ No newline at end of file diff --git a/packages/mindplot/test/playground/map-render/css/toolbar.less b/packages/mindplot/test/playground/map-render/css/toolbar.less index f3bb3142..d44f3ab1 100644 --- a/packages/mindplot/test/playground/map-render/css/toolbar.less +++ b/packages/mindplot/test/playground/map-render/css/toolbar.less @@ -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 { diff --git a/packages/mindplot/test/playground/map-render/css/viewmode.less b/packages/mindplot/test/playground/map-render/css/viewmode.less index dc7c7d33..3e1905a5 100644 --- a/packages/mindplot/test/playground/map-render/css/viewmode.less +++ b/packages/mindplot/test/playground/map-render/css/viewmode.less @@ -23,4 +23,8 @@ div#footer-desc { div#footer-logo { float: left; height: 100px; +} + +#floating-panel { + bottom: 80px; } \ No newline at end of file diff --git a/packages/mindplot/test/playground/map-render/html/editor.html b/packages/mindplot/test/playground/map-render/html/editor.html index a52d848c..aa216806 100644 --- a/packages/mindplot/test/playground/map-render/html/editor.html +++ b/packages/mindplot/test/playground/map-render/html/editor.html @@ -11,12 +11,8 @@
+ + +
+
+ +
+
+ + +
+
+ +
+ \ No newline at end of file diff --git a/packages/mindplot/test/playground/map-render/html/embedded.html b/packages/mindplot/test/playground/map-render/html/embedded.html index f52bf4aa..78ff5b8a 100644 --- a/packages/mindplot/test/playground/map-render/html/embedded.html +++ b/packages/mindplot/test/playground/map-render/html/embedded.html @@ -94,7 +94,6 @@ -
diff --git a/packages/mindplot/test/playground/map-render/html/viewmode.html b/packages/mindplot/test/playground/map-render/html/viewmode.html index c9ca7192..a503db1f 100644 --- a/packages/mindplot/test/playground/map-render/html/viewmode.html +++ b/packages/mindplot/test/playground/map-render/html/viewmode.html @@ -12,7 +12,18 @@
- +
+
+ + +
+ +
+