Move shortcuts as dialog

This commit is contained in:
Paulo Gustavo Veiga 2022-01-06 21:36:48 -08:00
parent 360b482d2d
commit d97af3c1b1
14 changed files with 333 additions and 18 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -48,6 +48,27 @@ const PT_BR = {
RELATIONSHIP_COULD_NOT_BE_CREATED: 'A relação não pode ser criada. Uma relação pai deve ser selecionada primeiro.', 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;

View File

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

View File

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

View File

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

View File

@ -0,0 +1,135 @@
/*
* Copyright [2021] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import BootstrapDialog from '../libraries/bootstrap/BootstrapDialog';
import { $msg } from '../Messages';
class KeyboardShortcutDialog extends BootstrapDialog {
constructor() {
super($msg('SHORTCUTS'), {
closeButton: true,
acceptButton: false,
});
this.setContent(`<div id="keyboardTable">
<table>
<colgroup>
<col width="40%"/>
<col width="30%"/>
<col width="30%"/>
</colgroup>
<thead>
<tr>
<th>${$msg('ACTION')}</th>
<th>Windows - Linux</th>
<th>Mac OS X</th>
</tr>
</thead>
<tbody>
<tr>
<td>${$msg('SAVE_CHANGES')}</td>
<td>Ctrl + s</td>
<td> + s</td>
</tr>
<tr>
<td>${$msg('CREATE_SIBLING_TOPIC')}</td>
<td>Enter</td>
<td>Enter</td>
</tr>
<tr>
<td>${$msg('CREATE_CHILD_TOPIC')}</td>
<td>Insert / Tab</td>
<td> + Enter / Tab</td>
</tr>
<tr>
<td>${$msg('DELETE_TOPIC')}</td>
<td>Delete</td>
<td>Delete</td>
</tr>
<tr>
<td>${$msg('EDIT_TOPIC_TEXT')}</td>
<td>${$msg('JUST_START_TYPING')} | F2</td>
<td>${$msg('JUST_START_TYPING')} | F2</td>
</tr>
<tr>
<td>${$msg('MULTIPLE_LINES')}</td>
<td>Ctrl + Enter</td>
<td> + Enter</td>
</tr>
<tr>
<td>${$msg('COPY_AND_PASTE_TOPICS')}</td>
<td>Ctrl + c/Ctrl + v</td>
<td> + c/ + v</td>
</tr>
<tr>
<td>${$msg('COLLAPSE_CHILDREN')}</td>
<td>Space bar</td>
<td>Space bar</td>
</tr>
<tr>
<td>${$msg('TOPIC_NAVIGATION')}</td>
<td>${$msg('ARROW_KEYS')}</td>
<td>${$msg('ARROW_KEYS')}</td>
</tr>
<tr>
<td>${$msg('SELECT_MULTIPLE_NODES')}</td>
<td>Ctrl + Mouse Click</td>
<td>Ctrl + Mouse Click</td>
</tr>
<tr>
<td>${$msg('UNDO_EDITION')}</td>
<td>Ctrl + z</td>
<td> + z</td>
</tr>
<tr>
<td>${$msg('REDO_EDITION')}</td>
<td>Ctrl + Shift + z</td>
<td> + Shift + z</td>
</tr>
<tr>
<td>${$msg('SELECT_ALL_TOPIC')}</td>
<td>Ctrl + a</td>
<td> + a</td>
</tr>
<tr>
<td>${$msg('CANCEL_TEXT_CHANGES')}</td>
<td>Esc</td>
<td>Esc</td>
</tr>
<tr>
<td>${$msg('DESELECT_ALL_TOPIC')}</td>
<td>Ctrl + Shift + a</td>
<td> + Shift + a</td>
</tr>
<tr>
<td>${$msg('CHANGE_TEXT_ITALIC')}</td>
<td>Ctrl + i</td>
<td> + i</td>
</tr>
<tr>
<td>${$msg('CHANGE_TEXT_BOLD')}</td>
<td>Ctrl + b</td>
<td> + b</td>
</tr>
</tbody>
</table>
</div>`);
this.show();
}
}
export default KeyboardShortcutDialog;

View File

@ -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,10 +400,7 @@ 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();
}); });
@ -410,11 +408,10 @@ class Menu extends IMenu {
} }
_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();
}); });
}); });
@ -422,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();
@ -440,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();

View File

@ -184,3 +184,23 @@ div#shotcuts > img{
height: 40px; height: 40px;
} }
#keyboardTable {
font-family: Arial, verdana, serif;
font-size: 13px;
width: 100%;
}
#keyboardTable td {
padding: 3px;
white-space: nowrap;
}
#keyboardTable th {
padding: 5px;
white-space: nowrap;
}
#keyboardTable th {
background-color: #000000;
color: #ffffff;
}

View File

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

View File

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

Before

Width:  |  Height:  |  Size: 391 B

After

Width:  |  Height:  |  Size: 391 B