Shortcuts menu

Frontend Angular 4/src/app/layout/matefun/matefun.component.html

@@ -13,22 +13,24 @@
                         [disabled]="!archivo.editable || archivo.estado=='Corregido' || archivo.estado == 'Entregado'"
                         *ngIf="archivo" [(ngModel)]="archivo.nombre" (keyup)="archivoModificado()" placeholder="nombre del archivo" />
 
-                        <button id="downloadFileButton" (click)="downloadFile()" style="margin-left: 10px; float: right;"  class="btn btn-sm btn-secondary" placement="bottom" ngbPopover="Exportar (Ctrl+E)" triggers="mouseenter:mouseleave" tiggers="click">
+                        <button style="margin-left: 5px; float: right;" id="shortcutsPopover" class="btn btn-sm btn-secondary" placement="bottom" [ngbPopover]=shortcutsPopoverContent #popover="ngbPopover" popoverTitle="Atajos del teclado" tiggers="click">
+                            <i class="fa fa-keyboard-o"></i>
+                        </button>
+                        <button id="downloadFileButton" (click)="downloadFile()" style="margin-left: 5px; float: right;"  class="btn btn-sm btn-secondary" placement="bottom" ngbPopover="Exportar (Ctrl+E)" triggers="mouseenter:mouseleave" tiggers="click">
                             <i class="fa fa-download "></i>
                         </button>
-
-                        <button style="margin-left: 10px; float: right;" id="popover" class="btn btn-sm btn-secondary" placement="bottom" [ngbPopover]=popoverContent #popover="ngbPopover" popoverTitle="Configuración" tiggers="click">
+                        <button style="margin-left: 5px; float: right;" id="popover" class="btn btn-sm btn-secondary" placement="bottom" [ngbPopover]=popoverContent #popover="ngbPopover" popoverTitle="Configuración" tiggers="click">
                             <i class="fa fa-gear"></i>
                         </button>
-                        <div style="margin-left: 10px; float: right;" ngbPopover="Guardar archivo (Ctrl+G)" triggers="mouseenter:mouseleave" placement="bottom" >
+                        <div style="margin-left: 5px; float: right;" ngbPopover="Guardar archivo (Ctrl+G)" triggers="mouseenter:mouseleave" placement="bottom" >
                             <button [disabled]="!modificado" (click)="guardarArchivo()" class="btn btn-sm btn-secondary" >
                                 <i class="fa fa-save"></i>
                             </button>
                         </div>
-                        <button style="margin-left: 10px; float: right;" (click)="reiniciarInterprete()" class="btn btn-sm btn-secondary" ngbPopover="Reiniciar intérprete (Ctrl+R)" triggers="mouseenter:mouseleave" placement="bottom">
+                        <button style="margin-left: 5px; float: right;" (click)="reiniciarInterprete()" class="btn btn-sm btn-secondary" ngbPopover="Reiniciar intérprete (Ctrl+R)" triggers="mouseenter:mouseleave" placement="bottom">
                             <i class="fa fa-refresh"></i>
                         </button>
-                        <button style="margin-left: 10px; float: right;" (click)="runCode()" class="btn btn-sm btn-secondary" ngbPopover="Cargar programa (Ctrl+P)" triggers="mouseenter:mouseleave" placement="bottom">
+                        <button style="margin-left: 5px; float: right;" (click)="runCode()" class="btn btn-sm btn-secondary" ngbPopover="Cargar programa (Ctrl+P)" triggers="mouseenter:mouseleave" placement="bottom">
                             <i class="fa fa-play"></i>
                         </button>
                         <button style="float: right;" (click)="seleccionarDirectorio()" class="btn btn-sm btn-secondary" ngbPopover="Nuevo archivo (Ctrl+A)" triggers="mouseenter:mouseleave" placement="bottom">
@@ -71,6 +73,19 @@
                                 </div>
                             </div>
                         </ng-template>
+                        <ng-template #shortcutsPopoverContent style="width: 15em">
+                            <div style="width: 15em">
+                                <div class="form-group">
+                                    <label><b>Ctrl+P</b> Ejecutar el código</label>
+                                    <label><b>Ctrl+A</b> Nuevo archivo</label>
+                                    <label><b>Ctrl+O</b> Abrir menú de opciones</label>
+                                    <label><b>Ctrl+E</b> Exportar archivo puntual</label>
+                                    <label><b>Ctrl+R</b> Reiniciar intérprete</label>
+                                    <label><b>Ctrl+G</b> Guardar archivo</label>
+                                    <label><b>Ctrl+Space</b> Autocompletar</label>
+                                </div>
+                            </div>
+                        </ng-template>
                     </form>
                 </div>
                 <codemirror class="codemirrorPrograma" [(ngModel)]="archivo.contenido" (keyup)="archivoModificado($event)" [config]="configCodeMirror" [ngStyle]="{'font-size': configCodeMirror.fontSize+'px'}">