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: 12px; 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 .prompt { 156 position: absolute; 157 margin-left: 35px; 158 line-height: 32px; 159 font-family: Helvetica; 160 font-size: 14px; 161 opacity: 0.6; 162 } 163 </style> 164 <div class="vessel"> 165 <div class="header"> 166 <div style="display: flex;flex-direction:column;margin-left:20px;flex: 1;"> 167 <div style="display: flex;align-items: center; flex: 1;"> 168 <span class="target">Target Platform:</span> 169 <div id="device-prompt"> 170 <span class="prompt"></span> 171 <select class="select" id = "device-select"></select> 172 </div> 173 <select class="device_version" id = "device-version"> 174 </select> 175 <lit-button style="width: 180px; height:32px" class="add" height="32px" width="164px" color="#0A59F7" 176 font_size="14px" border="1px solid #0A59F7" 177 padding="0 0 0 12px" justify_content="left" icon="add" margin_icon="0 10px 0 8px">Add HDC Device</lit-button> 178 <div style="display:flex;align-items:center"> 179 <lit-check-box id="use-extend-check" not-close></lit-check-box> 180 <span style="font-family: Helvetica;font-size: 16px;color:#000000;">Use local hdc</span> 181 </div> 182 <div class="header-right"> 183 <lit-button class="disconnect" style="margin-right: 30px" height="32px" width="96px" font_size="14px" 184 justify_content="center" color="#FFFFFF" 185 border_radius="16px" back='#0A59F7' opacity="0.6" border="0 solid">Disconnect</lit-button> 186 <lit-button class="record" 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"> 189 <span class="record_text">Record</span> 190 </lit-button> 191 <lit-button class="cancel" height="32px" width="96px" font_size="14px" justify_content="center" 192 color="#FFFFFF" border_radius="16px" back='#0A59F7' opacity="0.6" border="0 solid"> 193 <span class="record_text">Cancel</span> 194 </lit-button> 195 </div> 196 </div> 197 <div style="height:21px;"> 198 <span id="record_tip" style="display:none;height:21px;font-size: 16px;color:red;"> 199 </span> 200 </div> 201 </div> 202 <div class="span-col-2"> 203 <span class="header-des" id="hint">It looks like you didn't add any probes. Please add at least one</span> 204 </div> 205 </div> 206 <div class="body"> 207 <lit-main-menu-group class="menugroup" id= "menu-group" title="" nocollapsed radius></lit-main-menu-group> 208 <div id="app-content" class="content"> 209 </div> 210 </div> 211 </div> 212 `; 213
