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 SpRecordTraceHtml = ` 17 <style> 18 :host{ 19 display: block; 20 height: 100%; 21 width: 100%; 22 background-color: var(--dark-background5,#F6F6F6); 23 } 24 .vessel { 25 background-color: var( 26 --dark-background5,#F6F6F6); 27 height:100%; 28 } 29 30 .header { 31 display: flex; 32 background-color: var(--dark-background3,#FFFFFF); 33 width: 100%; 34 height: 100px; 35 } 36 37 .span-col-2{ 38 margin-right: 20px; 39 display: flex; 40 flex-direction: column; 41 justify-content: center; 42 } 43 44 .header-right { 45 display: flex; 46 margin-left: auto; 47 margin-right: 5%; 48 } 49 .header-des{ 50 font-family: PingFangSC-Regular; 51 font-size: 1em; 52 color: #999999; 53 text-align: left; 54 font-weight: 400; 55 } 56 57 .target { 58 opacity: 0.9; 59 font-family: Helvetica; 60 font-size: 14px; 61 color: var(--dark-color2,#000000); 62 line-height: 16px; 63 font-weight: 400; 64 white-space:nowrap; 65 align-self: center; 66 } 67 68 .select{ 69 width: 300px; 70 height: 32px; 71 margin-left: 14px; 72 margin-right: 10px; 73 border: 1px solid var(--dark-color1,#4D4D4D); 74 background: var(--dark-background1,#ffffff); 75 font-size: 14px; 76 border-radius: 16px; 77 opacity: 0.6; 78 -webkit-appearance: none; 79 font-family: Helvetica; 80 color: var(--dark-color1,#000000); 81 line-height: 20px; 82 font-weight: 400; 83 padding: 5px 10px 5px 10px; 84 text-align: center; 85 background: url('img/down.png') no-repeat 96% center; 86 } 87 .device_version { 88 width: 200px; 89 height: 32px; 90 margin-left: 5px; 91 margin-right: 24px; 92 background: var(--dark-background1,#ffffff); 93 border: 1px solid var(--dark-color1,#4D4D4D); 94 border-radius: 16px; 95 opacity: 0.6; 96 font-family: Helvetica; 97 font-size: 14px; 98 color: var(--dark-color1,#000000); 99 text-align: center; 100 line-height: 20px; 101 font-weight: 400; 102 padding: 5px 10px 5px 10px; 103 -webkit-appearance: none; 104 background: url('img/down.png') no-repeat 96% center; 105 } 106 .body{ 107 width: 90%; 108 height:80vh; 109 margin-left: 3%; 110 margin-top: 2%; 111 margin-bottom: 2%; 112 display: grid; 113 grid-template-columns: min-content 1fr; 114 background-color: var(--dark-background3,#FFFFFF); 115 border-radius: 16px 16px 16px 16px; 116 } 117 118 .menugroup{ 119 height: 100%; 120 background: var(--dark-background3,#FFFFFF); 121 } 122 .menuitem{ 123 background: var(--dark-background3,#FFFFFF); 124 } 125 .content{ 126 background: var(--dark-background3,#FFFFFF); 127 border-style: none none none solid; 128 border-width: 1px; 129 border-color: rgba(166,164,164,0.2); 130 border-radius: 0px 16px 16px 0px; 131 } 132 :host([show_hint]) #hint { 133 color: #DB5860; 134 font-weight: 600; 135 font-size: 14px; 136 overflow: hidden; 137 text-overflow: ellipsis; 138 white-space: nowrap; 139 display: block; 140 141 } 142 #hint { 143 display: none; 144 } 145 146 @keyframes textRoll { 147 0% { 148 left: 1%; 149 150 } 151 100% { 152 left:100%; 153 } 154 } 155 .cancel { 156 display: none; 157 } 158 .prompt { 159 position: absolute; 160 margin-left: 35px; 161 line-height: 32px; 162 font-family: Helvetica; 163 font-size: 14px; 164 opacity: 0.6; 165 } 166 </style> 167 <div class="vessel"> 168 <div class="header"> 169 <div style="display: flex;flex-direction:column;margin-left:20px;flex: 1;"> 170 <div style="display: flex;align-items: center; flex: 1;"> 171 <span class="target">Target Platform:</span> 172 <div id="device-prompt"> 173 <span class="prompt"></span> 174 <select class="select" id = "device-select"></select> 175 </div> 176 <select class="device_version" id = "device-version"> 177 </select> 178 <lit-button style="width: 180px; height:32px" class="add" height="32px" width="164px" color="#0A59F7" 179 font_size="14px" border="1px solid #0A59F7" 180 padding="0 0 0 12px" justify_content="left" icon="add" margin_icon="0 10px 0 8px">Add HDC Device</lit-button> 181 <div style="display:flex;align-items:center"> 182 <lit-check-box id="use-extend-check" not-close></lit-check-box> 183 <span style="font-family: Helvetica;font-size: 16px;color:#000000;">Use local hdc</span> 184 </div> 185 <div class="header-right"> 186 <lit-button class="disconnect" style="margin-right: 30px" height="32px" width="96px" font_size="14px" 187 justify_content="center" color="#FFFFFF" 188 border_radius="16px" back='#0A59F7' opacity="0.6" border="0 solid">Disconnect</lit-button> 189 <lit-button class="record" style="margin-right: 30px" height="32px" width="96px" font_size="14px" 190 justify_content="center" color="#FFFFFF" 191 border_radius="16px" back='#0A59F7' opacity="0.6" border="0 solid"> 192 <span class="record_text">Record</span> 193 </lit-button> 194 <lit-button class="cancel" height="32px" width="96px" font_size="14px" justify_content="center" 195 color="#FFFFFF" border_radius="16px" back='#0A59F7' opacity="0.6" border="0 solid"> 196 <span class="record_text">Cancel</span> 197 </lit-button> 198 </div> 199 </div> 200 <div style="height:21px;"> 201 <span id="record_tip" style="display:none;height:21px;font-size: 16px;color:red;"> 202 </span> 203 </div> 204 </div> 205 <div class="span-col-2"> 206 <span class="header-des" id="hint">It looks like you didn't add any probes. Please add at least one</span> 207 </div> 208 </div> 209 <div class="body"> 210 <lit-main-menu-group class="menugroup" id= "menu-group" title="" nocollapsed radius></lit-main-menu-group> 211 <div id="app-content" class="content"> 212 </div> 213 </div> 214 </div> 215 `; 216
