Move shortcuts as dialog

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;

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;

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;

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;

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;

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;

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;

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;

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;
 }
 

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(`<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;

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();
 

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;
+}

packages/mindplot/test/playground/map-render/html/editor.html

@@ -102,7 +102,7 @@
   
     <!-- Side Actions -->
     <div id="floating-panel">
-        <div id="shotcuts" class="buttonExtOn">
+        <div id="keyboardShortcuts" class="buttonExtOn">
             <img src="images/keyboard.svg"/>
         </div>
         <div id="zoom-button">

packages/mindplot/test/playground/map-render/images/keyboard.svg

@@ -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>