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 */ 15export const TraceRowHtml = ` 16 <style> 17 *{ 18 box-sizing: border-box; 19 } 20 :host(:not([row-hidden])){ 21 box-sizing: border-box; 22 display: flex; 23 flex-direction: column; 24 width: 100%; 25 height: min-content; 26 } 27 :host([row-hidden]){ 28 width: 100%; 29 display: none; 30 } 31 .root{ 32 height: 100%; 33 width: 100%; 34 display: grid; 35 grid-template-rows: 100%; 36 grid-template-columns: 248px 1fr; 37 border-bottom: 1px solid var(--dark-border1,#dadada); 38 border-right: 1px solid var(--dark-border1,#ffffff); 39 box-sizing: border-box; 40 } 41 .root .drag{ 42 background-color: var(--dark-background1,#eee); 43 box-shadow: 0 4px 12px -4px #999 inset; 44 } 45 .root .line-top{ 46 box-shadow: 0 4px 2px -1px #4d7ab3 inset; 47 transition: all 0.2s; 48 } 49 .root .line-bottom{ 50 box-shadow: 0 -4px 2px -1px #4d7ab3 inset; 51 transition: all 0.2s; 52 } 53 .describe{ 54 box-sizing: border-box; 55 border-right: 1px solid var(--dark-border1,#c9d0da); 56 background-color: var(--dark-background5,#ffffff); 57 align-items: center; 58 position: relative; 59 } 60 .panel{ 61 width: 100%; 62 height: 100%; 63 overflow: visible; 64 background-color: transparent; 65 display: block; 66 } 67 .panel-vessel{ 68 width: 100%; 69 position: relative; 70 pointer-events: none; 71 } 72 .name{ 73 color: var(--dark-color1,#4b5766); 74 margin-left: 10px; 75 font-size: .9rem; 76 font-weight: normal; 77 flex: 1; 78 max-height: 100%; 79 text-align: left; 80 overflow: hidden; 81 user-select: none; 82 text-overflow: ellipsis; 83 white-space:nowrap; 84 max-width: 190px; 85 } 86 :host([highlight]) .name{ 87 color: #4b5766; 88 } 89 .icon{ 90 color: var(--dark-color1,#151515); 91 margin-left: 10px; 92 } 93 .describe:hover { 94 cursor: pointer; 95 } 96 :host([folder]) .describe:hover > .icon{ 97 color:#ecb93f; 98 margin-left: 10px; 99 } 100 :host([folder]){ 101 /*background-color: var(--dark-background1,#f5fafb);*/ 102 } 103 :host(:not([folder])){ 104 /*background-color: var(--dark-background,#FFFFFF);*/ 105 } 106 :host(:not([folder]):not([children])) { 107 } 108 :host(:not([folder]):not([children])) .icon{ 109 display: none; 110 } 111 :host(:not([folder])[children]) .icon{ 112 display: none; 113 color:#fff 114 } 115 116 :host(:not([folder])[children]) .name{ 117 } 118 :host([sticky]) { 119 position: sticky; 120 top: 0; 121 z-index: 1; 122 } 123 :host([expansion]) { 124 background-color: var(--bark-expansion,#0C65D1); 125 opacity:0.8; 126 } 127 :host([expansion]) .name,:host([expansion]) .icon{ 128 color: #fff; 129 } 130 :host([expansion]) .describe{ 131 border-right: 0px; 132 background-color: var(--bark-expansion,#0C65D1); 133 } 134 :host([expansion]:not(sleeping)) .panel-vessel{ 135 display: none; 136 } 137 :host([expansion]) .children{ 138 flex-direction: column; 139 width: 100%; 140 } 141 :host([expansion]) .icon{ 142 transform: rotateZ(0deg); 143 } 144 :host(:not([expansion])) .children{ 145 display: none; 146 flex-direction: column; 147 width: 100%; 148 } 149 :host(:not([expansion])) .icon{ 150 transform: rotateZ(-90deg); 151 } 152 :host([sleeping]) .describe{ 153 display: none; 154 } 155 :host([sleeping]) .panel-vessel{ 156 display: none; 157 } 158 :host([sleeping]) .children{ 159 display: none; 160 } 161 :host(:not([sleeping])) .describe{ 162 display: flex;; 163 } 164 :host(:not([sleeping])) .panel-vessel{ 165 display: block; 166 } 167 :host(:not([sleeping])) .children{ 168 display: flex; 169 } 170 :host([folder]) .lit-check-box{ 171 display: none; 172 } 173 :host(:not([check-type])) .lit-check-box{ 174 display: none; 175 } 176 :host(:not([collect-type])) { 177 /*position:static;*/ 178 } 179 :host([collect-type][collect-group='1']) .collect{ 180 display: block; 181 color: #5291FF; 182 } 183 :host([collect-type][collect-group='2']) .collect{ 184 display: block; 185 color: #f56940; 186 } 187 :host(:not([collect-type])) .collect{ 188 display: none; 189 color: var(--dark-icon,#666666); 190 } 191 .collect{ 192 margin-right: 5px; 193 } 194 :host(:not([folder])) .describe:hover .collect{ 195 display: block; 196 } 197 .popover{ 198 color: var(--dark-color1,#4b5766); 199 display: none; 200 justify-content: center; 201 align-items: center; 202 margin-right: 5px; 203 } 204 .setting{ 205 position:absolute; 206 left: 225px; 207 } 208 .radio{ 209 margin-right: 10px; 210 } 211 #setting{ 212 color: var(--dark-color1,#606060); 213 } 214 :host([expansion]) #setting{ 215 color: #FFFFFF; 216 } 217 :host([highlight]) .flash{ 218 background-color: #ffe263; 219 } 220 #listprocess::-webkit-scrollbar{ 221 width: 6px; 222 } 223 /*定义滑块 内阴影+圆角*/ 224 #listprocess::-webkit-scrollbar-thumb 225 { 226 border-radius: 6px; 227 background-color: var(--dark-background7,#e7c9c9); 228 } 229 /*func expand css*/ 230 :host([row-type="func"]) .name{ 231 cursor: pointer; 232 } 233 :host([func-expand='false']) .name{ 234 color: #00a3f5; 235 } 236 .lit-check-box{ 237 margin-right: 25px; 238 } 239 :host([row-setting='enable'][check-type]) .lit-check-box{ 240 margin-right: 25px; 241 } 242 :host([row-setting='enable'][check-type='-1']) .collect{ 243 margin-right: 20px; 244 } 245 :host([row-setting='enable']) #rowSetting{ 246 display: flex; 247 } 248 :host([row-setting='enable']:not([check-type='-1'])) .collect{ 249 margin-right: 5px; 250 } 251 :host([row-setting='checkFile']) #rowCheckFile{ 252 display:flex; 253 } 254 :host([row-setting='checkFile']) #myfolder{ 255 color:#4b5766; 256 } 257 .upload { 258 position: absolute; 259 color: var(--dark-icon,#333333); 260 right: 5px; 261 margin-top: 4px; 262 } 263 </style> 264 <div class="root"> 265 <div class="describe flash" style="position: relative"> 266 <label class="name"></label> 267 <lit-icon class="collect" name="star-fill" size="19"></lit-icon> 268 <lit-check-box class="lit-check-box"></lit-check-box> 269 </div> 270 </div> 271 `; 272