From 3bd22523fccbb53080cf837c4ad5c48e0f3b27d6 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Tue, 4 Jan 2022 12:15:02 -0800 Subject: [PATCH 01/15] Zoom WIP --- .../playground/map-render/css/editor.less | 31 +++++++++++++++++++ .../playground/map-render/html/editor.html | 15 +++------ .../playground/map-render/images/add-icon.svg | 1 + .../map-render/images/minus-icon.svg | 1 + 4 files changed, 37 insertions(+), 11 deletions(-) create mode 100644 packages/mindplot/test/playground/map-render/images/add-icon.svg create mode 100644 packages/mindplot/test/playground/map-render/images/minus-icon.svg diff --git a/packages/mindplot/test/playground/map-render/css/editor.less b/packages/mindplot/test/playground/map-render/css/editor.less index 11681a19..ce8f21b3 100644 --- a/packages/mindplot/test/playground/map-render/css/editor.less +++ b/packages/mindplot/test/playground/map-render/css/editor.less @@ -163,4 +163,35 @@ div.shareModalDialog { .popoverGray.bottom .arrow:after { border-bottom-color: #e4e2d2; +} + +#zoom-button { + height: 100px; + width: 50px; + border: 0; + position: absolute; + bottom: 100px; + right:10px; +} + +#zoom-plus, +#zoom-minus { + height: 50px; + width: 50px; + background-repeat: no-repeat; + background-size: 40px 40px; + background-position: center; + cursor: pointer; + background-color: lightgray; + z-index: 1000; +} + +#zoom-plus { + border-radius: 8px 8px 0 0; + background-image: url('../images/add-icon.svg') +} + +#zoom-minus { + border-radius: 0 0 8px 8px; + background-image: url('../images/minus-icon.svg') } \ 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 e5c0c670..8b17e619 100644 --- a/packages/mindplot/test/playground/map-render/html/editor.html +++ b/packages/mindplot/test/playground/map-render/html/editor.html @@ -46,14 +46,6 @@ -
-
- -
-
- -
-
@@ -103,9 +95,10 @@
- + +
+ +
diff --git a/packages/mindplot/test/playground/map-render/images/add-icon.svg b/packages/mindplot/test/playground/map-render/images/add-icon.svg new file mode 100644 index 00000000..ddb7eeef --- /dev/null +++ b/packages/mindplot/test/playground/map-render/images/add-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/mindplot/test/playground/map-render/images/minus-icon.svg b/packages/mindplot/test/playground/map-render/images/minus-icon.svg new file mode 100644 index 00000000..7dd812a8 --- /dev/null +++ b/packages/mindplot/test/playground/map-render/images/minus-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file From 33b08cf3a0a2b020fa0f336ef86534c9d4ba9260 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Wed, 5 Jan 2022 18:58:45 -0800 Subject: [PATCH 02/15] Update background --- .../playground/map-render/css/editor.less | 4 ++ .../playground/map-render/css/header.less | 38 +------------------ .../playground/map-render/css/toolbar.less | 17 ++++++--- .../playground/map-render/html/editor.html | 14 +------ .../map-render/images/logo-text-black.svg | 3 ++ 5 files changed, 21 insertions(+), 55 deletions(-) create mode 100644 packages/mindplot/test/playground/map-render/images/logo-text-black.svg diff --git a/packages/mindplot/test/playground/map-render/css/editor.less b/packages/mindplot/test/playground/map-render/css/editor.less index f5dc7337..ed3f4c18 100644 --- a/packages/mindplot/test/playground/map-render/css/editor.less +++ b/packages/mindplot/test/playground/map-render/css/editor.less @@ -25,6 +25,10 @@ div#mindplot { 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 { diff --git a/packages/mindplot/test/playground/map-render/css/header.less b/packages/mindplot/test/playground/map-render/css/header.less index 8148144e..6d839bd3 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); } @@ -83,17 +60,6 @@ div#headerNotifier { @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 { diff --git a/packages/mindplot/test/playground/map-render/css/toolbar.less b/packages/mindplot/test/playground/map-render/css/toolbar.less index f3bb3142..1a941ab7 100644 --- a/packages/mindplot/test/playground/map-render/css/toolbar.less +++ b/packages/mindplot/test/playground/map-render/css/toolbar.less @@ -1,16 +1,21 @@ 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; + padding: 8px 15px; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1); + background-color: #fff; } div#toolbar .buttonContainer { height: @header-toolbar-height; float: left; - margin-left: 5px; + margin-left: 20px; +} +div#logo-text { + background: url(../images/logo-text-black.svg) no-repeat center top; + height: 40px; + width: 80px; + float: left; } /******************************************************************************************/ diff --git a/packages/mindplot/test/playground/map-render/html/editor.html b/packages/mindplot/test/playground/map-render/html/editor.html index a52d848c..168eceba 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 @@
From 360b482d2d148bc13bfd5b6c0a60a9521e36f774 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Thu, 6 Jan 2022 19:22:25 -0800 Subject: [PATCH 13/15] Sort icons --- .../mindplot/test/playground/map-render/html/editor.html | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/mindplot/test/playground/map-render/html/editor.html b/packages/mindplot/test/playground/map-render/html/editor.html index 77b30b68..57ddb1c8 100644 --- a/packages/mindplot/test/playground/map-render/html/editor.html +++ b/packages/mindplot/test/playground/map-render/html/editor.html @@ -31,9 +31,6 @@
-
- -
@@ -49,6 +46,11 @@
+
+ +
+
+
From d97af3c1b1a7cee63e07ab81a811ded620f88d42 Mon Sep 17 00:00:00 2001 From: Paulo Gustavo Veiga Date: Thu, 6 Jan 2022 21:36:48 -0800 Subject: [PATCH 14/15] Move shortcuts as dialog --- packages/mindplot/src/components/lang/ca.js | 23 ++- packages/mindplot/src/components/lang/de.js | 23 ++- packages/mindplot/src/components/lang/en.js | 22 ++- packages/mindplot/src/components/lang/es.js | 20 +++ packages/mindplot/src/components/lang/fr.js | 22 +++ .../mindplot/src/components/lang/pt_BR.js | 21 +++ .../mindplot/src/components/lang/zh_CN.js | 22 +++ .../mindplot/src/components/lang/zh_TW.js | 21 +++ .../src/components/widget/ColorPaletteHtml.js | 5 - .../widget/KeyboardShortcutDialog.js | 135 ++++++++++++++++++ .../mindplot/src/components/widget/Menu.js | 13 +- .../playground/map-render/css/editor.less | 20 +++ .../playground/map-render/html/editor.html | 2 +- .../playground/map-render/images/keyboard.svg | 2 +- 14 files changed, 333 insertions(+), 18 deletions(-) create mode 100644 packages/mindplot/src/components/widget/KeyboardShortcutDialog.js 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/Menu.js b/packages/mindplot/src/components/widget/Menu.js index 6d2d2029..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,10 +400,7 @@ 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(); }); @@ -410,11 +408,10 @@ class Menu extends IMenu { } _registerEvents(designer) { - const me = this; // Register on close events ... this._toolbarElems.forEach((elem) => { elem.addEvent('show', () => { - me.clear(); + this.clear(); }); }); @@ -422,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(); @@ -440,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/test/playground/map-render/css/editor.less b/packages/mindplot/test/playground/map-render/css/editor.less index d1a04abb..f4fc191d 100644 --- a/packages/mindplot/test/playground/map-render/css/editor.less +++ b/packages/mindplot/test/playground/map-render/css/editor.less @@ -184,3 +184,23 @@ div#shotcuts > img{ 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/html/editor.html b/packages/mindplot/test/playground/map-render/html/editor.html index 57ddb1c8..aa216806 100644 --- a/packages/mindplot/test/playground/map-render/html/editor.html +++ b/packages/mindplot/test/playground/map-render/html/editor.html @@ -102,7 +102,7 @@
-
+
diff --git a/packages/mindplot/test/playground/map-render/images/keyboard.svg b/packages/mindplot/test/playground/map-render/images/keyboard.svg index acef629a..c3b8e54a 100644 --- a/packages/mindplot/test/playground/map-render/images/keyboard.svg +++ b/packages/mindplot/test/playground/map-render/images/keyboard.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file From 33718263a75e0c02ab7df412ea9c4ee50df65ff7 Mon Sep 17 00:00:00 2001 From: Matias Arriola Date: Fri, 7 Jan 2022 13:19:43 -0300 Subject: [PATCH 15/15] Add min-width and overflow hidden to toolbar to avoid line break in lower res --- packages/mindplot/test/playground/map-render/css/toolbar.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/mindplot/test/playground/map-render/css/toolbar.less b/packages/mindplot/test/playground/map-render/css/toolbar.less index 6527a3a3..d44f3ab1 100644 --- a/packages/mindplot/test/playground/map-render/css/toolbar.less +++ b/packages/mindplot/test/playground/map-render/css/toolbar.less @@ -3,6 +3,9 @@ div#toolbar { 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 {