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 {UrlUtils} from 'common/url_utils';
20
21@Component({
22  selector: 'shortcuts-panel',
23  template: `
24    <h2 class="dialog-title" mat-dialog-title>
25      <span> ESSENTIAL SHORTCUTS </span>
26      <button mat-dialog-close class="close-button" mat-icon-button>
27        <mat-icon> close </mat-icon>
28      </button>
29    </h2>
30    <mat-dialog-content>
31      <div class="mat-title"> Timeline </div>
32      <div class="grouped-shortcuts">
33        <div class="key-shortcut even-width mat-body-1">
34          <div class="key"> W </div>
35          <span class="action"> Zoom in </span>
36        </div>
37        <div class="key-shortcut even-width mat-body-1">
38          <div class="key"> S </div>
39          <span class="action"> Zoom out </span>
40        </div>
41        <div class="key-shortcut even-width mat-body-1">
42          <div class="key"> A </div>
43          <span class="action"> Move slider left </span>
44        </div>
45        <div class="key-shortcut even-width mat-body-1">
46          <div class="key"> D </div>
47          <span class="action"> Move slider right </span>
48        </div>
49        <div class="pointer-shortcut mat-body-1">
50          <mat-icon class="trackpad-icon" svgIcon="trackpad_right_click"></mat-icon>
51          <span class="action">
52            <span class="italic-text"> Right click </span>
53            <span> Open context menu for bookmarks </span>
54          </span>
55        </div>
56        <div class="pointer-shortcut mat-body-1">
57          <mat-icon class="trackpad-icon enlarge" svgIcon="trackpad_vertical_scroll"></mat-icon>
58          <span class="action">
59            <span class="italic-text"> Vertical Scroll </span>
60            <span> Zoom in/out </span>
61          </span>
62        </div>
63        <div class="pointer-shortcut mat-body-1">
64          <mat-icon class="trackpad-icon tall enlarge" svgIcon="trackpad_horizontal_scroll"></mat-icon>
65          <span class="action">
66            <span class="italic-text"> Horizontal Scroll </span>
67            <span> Move slider left/right </span>
68          </span>
69        </div>
70      </div>
71
72      <div class="shortcuts-row">
73        <div class="shortcuts-row-section">
74          <div class="mat-title"> 3D View </div>
75          <div class="grouped-shortcuts">
76            <div class="pointer-shortcut mat-body-1">
77              <mat-icon class="trackpad-icon enlarge" svgIcon="trackpad_vertical_scroll"></mat-icon>
78              <span class="action">
79                <span class="italic-text"> Vertical Scroll </span>
80                <span> Zoom in/out </span>
81              </span>
82            </div>
83          </div>
84        </div>
85
86        <div class="shortcuts-row-section">
87          <div class="mat-title"> Global </div>
88          <div class="grouped-shortcuts">
89            <div class="key-shortcut mat-body-1">
90              <div class="key"> <mat-icon class="material-symbols-outlined"> arrow_left_alt </mat-icon> </div>
91              <span class="action"> Previous state </span>
92            </div>
93            <div class="key-shortcut mat-body-1">
94              <div class="key"> <mat-icon class="material-symbols-outlined"> arrow_right_alt </mat-icon> </div>
95              <span class="action"> Next state </span>
96            </div>
97          </div>
98        </div>
99      </div>
100    </mat-dialog-content>
101  `,
102  styles: [
103    `
104      .dialog-title {
105        display: flex;
106        justify-content: space-between;
107      }
108      .close-button {
109        width: 24px;
110        height: 24px;
111        line-height: 24px;
112      }
113      .shortcuts-row {
114        display: flex;
115        flex-direction: row;
116        width: 80%;
117        justify-content: space-between;
118      }
119      .grouped-shortcuts {
120        display: flex;
121        flex-wrap: wrap;
122        flex-direction: row;
123        justify-content: space-between;
124      }
125      .key-shortcut, .pointer-shortcut {
126        display: flex;
127        flex-direction: row;
128        padding: 12px 0px;
129      }
130      .key-shortcut {
131        align-items: center;
132      }
133      .key-shortcut.even-width {
134        min-width: 202px;
135      }
136      .pointer-shortcut:not(:has(.tall)) {
137        align-items: center;
138      }
139      .pointer-shortcut:has(.tall) {
140        align-items: end;
141      }
142      .key, .trackpad-icon {
143        display: flex;
144        align-items: center;
145        justify-content: center;
146        margin: 0px 4px;
147      }
148      .key {
149        border-radius: 8px;
150        width: 35px;
151        height: 35px;
152        background-color: var(--icon-accent-color);
153        border: 1px solid #7e7e7e;
154        font-size: 18px;
155      }
156      .trackpad-icon {
157        width: 40px;
158        height: 40px;
159      }
160      .enlarge {
161        height: 55px;
162        width: 55px;
163      }
164      .action {
165        padding: 12px;
166        display: flex;
167        flex-direction: column;
168      }
169      .italic-text {
170        font-style: italic;
171      }
172    `,
173  ],
174})
175export class ShortcutsComponent {
176  constructor(
177    @Inject(MatIconRegistry) private matIconRegistry: MatIconRegistry,
178    @Inject(DomSanitizer) private domSanitizer: DomSanitizer,
179  ) {
180    this.matIconRegistry.addSvgIcon(
181      'trackpad_right_click',
182      this.domSanitizer.bypassSecurityTrustResourceUrl(
183        UrlUtils.getRootUrl() + 'trackpad_right_click.svg',
184      ),
185    );
186    this.matIconRegistry.addSvgIcon(
187      'trackpad_vertical_scroll',
188      this.domSanitizer.bypassSecurityTrustResourceUrl(
189        UrlUtils.getRootUrl() + 'trackpad_vertical_scroll.svg',
190      ),
191    );
192    this.matIconRegistry.addSvgIcon(
193      'trackpad_horizontal_scroll',
194      this.domSanitizer.bypassSecurityTrustResourceUrl(
195        UrlUtils.getRootUrl() + 'trackpad_horizontal_scroll.svg',
196      ),
197    );
198  }
199}
200