• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16export const SpKeyboardHtml = `
17<style>
18.root{
19  position: relative;
20}
21.shadow-box{
22  position:absolute;
23  width: 100%;
24  height : 100%;
25  background-color: rgba(0, 0, 0, 0.8);
26}
27.sp-keyboard-vessel {
28  width: 100%;
29  height: 100%;
30  display: flex;
31  justify-content: center;
32  align-items: center;
33}
34.body{
35  width: 50%;
36  background-color: #fff;
37  padding: 30px;
38  z-index: 9000;
39  max-height: 600px;
40  overflow-y: scroll;
41}
42.title{
43  margin: 0;
44  position:absolute;
45}
46header {
47  position: relative;
48  width: 100%;
49  height: 31px;
50  line-height: 31px;
51}
52.close-icon{
53  cursor: pointer;
54  position: absolute;
55  right: 19px;
56}
57main{
58  font-size: 12px;
59  font-weight: 700;
60  margin: 50px 0 30px 0;
61}
62table{
63  margin-bottom: 15px;
64}
65.help table tr{
66  font-size: 16px;
67}
68.help table td{
69  min-width: 250px;
70  font-weight: 500;
71}
72.keycap{
73  background-color: #fafbfc;
74  border:1px solid #d1d5da;
75  border-bottom-color: #c6cbd1;
76  border-radius:3px;
77  box-shadow: inset 0 -1px 0 #c6cbd1;
78  color: #444d56;
79  display: inline-block;
80  vertical-align: middle;
81  line-height: 20px;
82  padding:3px 7px;
83  font-weight: 500;
84}
85.mouse-ctr tr{
86  line-height: 27px;
87}
88.describe-td{
89  font-weight: 200!important;
90}
91</style>
92<div class="sp-keyboard-vessel">
93<div class='shadow-box'></div>
94 <div class="body">
95  <header style="display">
96    <h2 class="title">SmartPerf help</h3>
97    <a class="close-icon"> ✕ </a>
98  </header>
99  <main>
100    <div class="help">
101      <h2>Navigation</h2>
102      <table>
103        <tr>
104          <td>
105            <div class="keycap">w</div> /
106            <div class="keycap">s</div>
107          </td>
108          <td class="describe-td">放大/缩小</td>
109        </tr>
110        <tr>
111        <td>
112          <div class="keycap">a</div> /
113          <div class="keycap">d</div>
114        </td>
115        <td class="describe-td">左移/右移</td>
116      </tr>
117      </table>
118      <h2>Mouse Controls</h2>
119      <table class="mouse-ctr">
120        <tr>
121          <td>Click</td>
122          <td class="describe-td">点选</td>
123        </tr>
124        <tr>
125          <td>Click + Drag</td>
126          <td class="describe-td">框选</td>
127        </tr>
128        <tr>
129        <tr>
130          <td>Ctrl + Scroll wheel</td>
131          <td class="describe-td">放大/缩小</td>
132        </tr>
133          <td>Ctrl + Click + Drag</td>
134          <td class="describe-td">拖拽左移/右移</td>
135        </tr>
136      </table>
137      <h2>Making SQL queries from the query page</h2>
138      <table>
139        <tr>
140          <td>
141            <div class="keycap">Ctrl</div> +
142            <div class="keycap">Enter</div>
143          </td>
144          <td class="describe-td">在数据库查询界面写好查询语句后进行查询</td>
145        </tr>
146      </table>
147      <h2>Other</h2>
148      <table>
149        <tr>
150          <td>
151            <div class="keycap">f</div> (with event selected)
152          </td>
153          <td class="describe-td">聚焦</td>
154        </tr>
155        <tr>
156          <td>
157            <div class="keycap">m</div> (with event or area selected)
158          </td>
159          <td class="describe-td">临时框选标记</td>
160        </tr>
161        <tr>
162          <td>
163            <div class="keycap">Shift</div> +
164            <div class="keycap">m</div> (with event or area selected)
165          </td>
166          <td class="describe-td">永久框选标记</td>
167        </tr>
168        <tr>
169          <td>
170            <div class="keycap">Ctrl</div> +
171            <div class="keycap">,</div> /
172            <div class="keycap">.</div>
173          </td>
174          <td class="describe-td">定位到上一个/下一个旗子标记的时间点</td>
175        </tr>
176        <tr>
177          <td>
178            <div class="keycap">Ctrl</div> +
179            <div class="keycap">[</div> /
180            <div class="keycap">]</div>
181          </td>
182          <td class="describe-td">定位到上一个/下一个用shift + m 框选的位置</td>
183        </tr>
184        <tr>
185          <td>
186            <div class="keycap">?</div>
187          </td>
188          <td class="describe-td">展示快捷方式</td>
189        </tr>
190        <tr>
191          <td>
192            <div class="keycap">v</div>
193          </td>
194          <td class="describe-td">展示/隐藏Vsync信号</td>
195        </tr>
196      </table>
197    </div>
198  </main>
199 </div>
200</div>
201`;
202