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: 90px; 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: 700; 135 overflow: hidden; 136 text-overflow: ellipsis; 137 white-space: nowrap; 138 display: block; 139 140 } 141 #hint { 142 display: none; 143 } 144 145 @keyframes textRoll { 146 0% { 147 left: 1%; 148 149 } 150 100% { 151 left:100%; 152 } 153 } 154 .cancel { 155 visibility: hidden; 156 } 157 .prompt { 158 position: absolute; 159 margin-left: 35px; 160 line-height: 32px; 161 font-family: Helvetica; 162 font-size: 14px; 163 opacity: 0.6; 164 } 165 </style> 166 <div class="vessel"> 167 <div class="header"> 168 <div style="display: flex;margin-left:20px;align-items: center; flex: 1;"> 169 <span class="target">Target Platform:</span> 170 <div id="device-prompt"> 171 <span class="prompt"></span> 172 <select class="select" id = "device-select"></select> 173 </div> 174 <select class="device_version" id = "device-version"> 175 </select> 176 <lit-button style="width: 180px; height:32px" class="add" height="32px" width="164px" color="#0A59F7" 177 font_size="14px" border="1px solid #0A59F7" 178 padding="0 0 0 12px" justify_content="left" icon="add" margin_icon="0 10px 0 8px">Add HDC Device</lit-button> 179 <div class="header-right"> 180 <lit-button class="disconnect" style="margin-right: 30px" height="32px" width="96px" font_size="14px" 181 justify_content="center" color="#FFFFFF" 182 border_radius="16px" back='#0A59F7' opacity="0.6" border="0 solid">Disconnect</lit-button> 183 <lit-button class="record" 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"> 186 <span class="record_text">Record</span> 187 </lit-button> 188 <lit-button class="cancel" height="32px" width="96px" font_size="14px" justify_content="center" 189 color="#FFFFFF" border_radius="16px" back='#0A59F7' opacity="0.6" border="0 solid"> 190 <span class="record_text">Cancel</span> 191 </lit-button> 192 </div> 193 </div> 194 <div class="span-col-2" > 195 <span class="header-des" id="hint">It looks like you didn't add any probes. Please add at least one</span> 196 </div> 197 </div> 198 <div class="body"> 199 <lit-main-menu-group class="menugroup" id= "menu-group" title="" nocollapsed radius></lit-main-menu-group> 200 <div id="app-content" class="content"> 201 </div> 202 </div> 203 </div> 204 `; 205
