1/* 2 * Copyright (C) 2024 The Android Open Source Project 3 * 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the License at 7 * 8 * http://www.apache.org/licenses/LICENSE-2.0 9 * 10 * Unless required by applicable law or agreed to in writing, software 11 * distributed under the License is distributed on an "AS IS" BASIS, 12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 * See the License for the specific language governing permissions and 14 * limitations under the License. 15 */ 16import {Component, Inject} from '@angular/core'; 17import {MatIconRegistry} from '@angular/material/icon'; 18import {DomSanitizer} from '@angular/platform-browser'; 19import {overlayPanelStyles} from 'app/styles/overlay_panel.styles'; 20import {UrlUtils} from 'common/url_utils'; 21 22@Component({ 23 selector: 'shortcuts-panel', 24 template: ` 25 <h2 class="dialog-title" mat-dialog-title> 26 <span> ESSENTIAL SHORTCUTS </span> 27 <button mat-dialog-close class="close-button" mat-icon-button> 28 <mat-icon> close </mat-icon> 29 </button> 30 </h2> 31 <mat-dialog-content> 32 <div class="mat-title"> Timeline </div> 33 <div class="grouped-shortcuts"> 34 <div class="key-shortcut even-width mat-body-1"> 35 <div class="key"> W </div> 36 <span class="action"> Zoom in </span> 37 </div> 38 <div class="key-shortcut even-width mat-body-1"> 39 <div class="key"> S </div> 40 <span class="action"> Zoom out </span> 41 </div> 42 <div class="key-shortcut even-width mat-body-1"> 43 <div class="key"> A </div> 44 <span class="action"> Move slider left </span> 45 </div> 46 <div class="key-shortcut even-width mat-body-1"> 47 <div class="key"> D </div> 48 <span class="action"> Move slider right </span> 49 </div> 50 <div class="pointer-shortcut mat-body-1"> 51 <mat-icon class="trackpad-icon" svgIcon="trackpad_right_click"></mat-icon> 52 <span class="action"> 53 <span class="italic-text"> Right click </span> 54 <span> Open context menu for bookmarks </span> 55 </span> 56 </div> 57 <div class="pointer-shortcut mat-body-1"> 58 <mat-icon class="trackpad-icon enlarge" svgIcon="trackpad_vertical_scroll"></mat-icon> 59 <span class="action"> 60 <span class="italic-text"> Vertical Scroll </span> 61 <span> Zoom in/out </span> 62 </span> 63 </div> 64 <div class="pointer-shortcut mat-body-1"> 65 <mat-icon class="trackpad-icon tall enlarge" svgIcon="trackpad_horizontal_scroll"></mat-icon> 66 <span class="action"> 67 <span class="italic-text"> Horizontal Scroll </span> 68 <span> Move slider left/right </span> 69 </span> 70 </div> 71 </div> 72 73 <div class="shortcuts-row"> 74 <div class="shortcuts-row-section"> 75 <div class="mat-title"> 3D View </div> 76 <div class="grouped-shortcuts"> 77 <div class="pointer-shortcut mat-body-1"> 78 <mat-icon class="trackpad-icon enlarge" svgIcon="trackpad_vertical_scroll"></mat-icon> 79 <span class="action"> 80 <span class="italic-text"> Vertical Scroll </span> 81 <span> Zoom in/out </span> 82 </span> 83 </div> 84 </div> 85 </div> 86 87 <div class="shortcuts-row-section"> 88 <div class="mat-title"> Global </div> 89 <div class="grouped-shortcuts"> 90 <div class="key-shortcut mat-body-1"> 91 <div class="key"> <mat-icon class="material-symbols-outlined"> arrow_left_alt </mat-icon> </div> 92 <span class="action"> Previous state </span> 93 </div> 94 <div class="key-shortcut mat-body-1"> 95 <div class="key"> <mat-icon class="material-symbols-outlined"> arrow_right_alt </mat-icon> </div> 96 <span class="action"> Next state </span> 97 </div> 98 </div> 99 </div> 100 </div> 101 </mat-dialog-content> 102 `, 103 styles: [ 104 ` 105 .dialog-title { 106 display: flex; 107 justify-content: space-between; 108 } 109 .shortcuts-row { 110 display: flex; 111 flex-direction: row; 112 width: 80%; 113 justify-content: space-between; 114 } 115 .grouped-shortcuts { 116 display: flex; 117 flex-wrap: wrap; 118 flex-direction: row; 119 justify-content: space-between; 120 } 121 .key-shortcut, .pointer-shortcut { 122 display: flex; 123 flex-direction: row; 124 padding: 12px 0px; 125 } 126 .key-shortcut { 127 align-items: center; 128 } 129 .key-shortcut.even-width { 130 min-width: 202px; 131 } 132 .pointer-shortcut:not(:has(.tall)) { 133 align-items: center; 134 } 135 .pointer-shortcut:has(.tall) { 136 align-items: end; 137 } 138 .key, .trackpad-icon { 139 display: flex; 140 align-items: center; 141 justify-content: center; 142 margin: 0px 4px; 143 } 144 .key { 145 border-radius: 8px; 146 width: 35px; 147 height: 35px; 148 background-color: var(--icon-accent-color); 149 border: 1px solid #7e7e7e; 150 font-size: 18px; 151 } 152 .trackpad-icon { 153 width: 40px; 154 height: 40px; 155 } 156 .enlarge { 157 height: 55px; 158 width: 55px; 159 } 160 .action { 161 padding: 12px; 162 display: flex; 163 flex-direction: column; 164 } 165 .italic-text { 166 font-style: italic; 167 } 168 `, 169 overlayPanelStyles, 170 ], 171}) 172export class ShortcutsComponent { 173 constructor( 174 @Inject(MatIconRegistry) private matIconRegistry: MatIconRegistry, 175 @Inject(DomSanitizer) private domSanitizer: DomSanitizer, 176 ) { 177 this.matIconRegistry.addSvgIcon( 178 'trackpad_right_click', 179 this.domSanitizer.bypassSecurityTrustResourceUrl( 180 UrlUtils.getRootUrl() + 'trackpad_right_click.svg', 181 ), 182 ); 183 this.matIconRegistry.addSvgIcon( 184 'trackpad_vertical_scroll', 185 this.domSanitizer.bypassSecurityTrustResourceUrl( 186 UrlUtils.getRootUrl() + 'trackpad_vertical_scroll.svg', 187 ), 188 ); 189 this.matIconRegistry.addSvgIcon( 190 'trackpad_horizontal_scroll', 191 this.domSanitizer.bypassSecurityTrustResourceUrl( 192 UrlUtils.getRootUrl() + 'trackpad_horizontal_scroll.svg', 193 ), 194 ); 195 } 196} 197