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 TraceRowConfigHtml = ` 16 <style> 17 :host([hidden]) { 18 visibility: hidden; 19 } 20 :host{ 21 visibility: visible; 22 background-color: #F6F6F6; 23 cursor: auto; 24 } 25 .config-title { 26 height: 100px; 27 border-top: 1px solid #D5D5D5; 28 background-color: #0A59F7; 29 display: flex; 30 align-items: center; 31 padding: 0 20px; 32 } 33 .title-text { 34 font-family: Helvetica-Bold; 35 font-size: 16px; 36 color: #FFFFFF; 37 text-align: left; 38 font-weight: 700; 39 margin-right: auto; 40 } 41 .config-close { 42 text-align: right; 43 cursor: pointer; 44 opacity: 1; 45 } 46 .config-close:hover { 47 opacity: 0.7; 48 } 49 .title_div{ 50 display: flex; 51 flex-direction: row; 52 align-items: center; 53 padding-left: 15px; 54 padding-right: 20px; 55 background-color: #F6F6F6; 56 height: 3.4em; 57 flex-wrap: nowrap; 58 } 59 .config-scene-select { 60 height: auto; 61 max-height: 120px; 62 overflow-y: auto; 63 background: #FFFFFF; 64 overflow-x: hidden; 65 border-radius: 5px; 66 border: solid 1px #e0e0e0; 67 } 68 :host([temp_config]) .config-chart-select { 69 height: auto; 70 overflow-y: auto; 71 display: block; 72 padding: 0px; 73 } 74 .config-chart-select { 75 display: grid; 76 height: inherit; 77 padding: 10px 30px; 78 background: #FFFFFF; 79 overflow-y: scroll; 80 overflow-x: hidden; 81 border-radius: 5px; 82 border: solid 1px #e0e0e0; 83 grid-template-columns: auto auto; 84 grid-template-rows: repeat(auto-fit, 35px); 85 } 86 .config-img { 87 margin-right: 12px; 88 } 89 .chart-option-div { 90 height: 35px; 91 line-height: 35px; 92 overflow: hidden; 93 text-overflow: ellipsis; 94 } 95 .scene-option-div { 96 height: 35px; 97 line-height: 35px; 98 margin-left: 28px; 99 } 100 .subsystem-div { 101 height: 35px; 102 line-height: 35px; 103 margin-left: 10px; 104 text-overflow: ellipsis; 105 overflow: hidden; 106 } 107 .chart-option { 108 height: 35px; 109 line-height: 35px; 110 margin-left: 75px; 111 white-space: nowrap; 112 text-overflow: ellipsis; 113 overflow: hidden; 114 } 115 input{ 116 border: 0; 117 outline: none; 118 background-color: transparent; 119 cursor: pointer; 120 -webkit-user-select:none; 121 -moz-user-select:none; 122 user-select:none; 123 display: inline-flex; 124 width:100%; 125 color: rgba(0,0,0,0.6); 126 } 127 .multipleSelect{ 128 outline: none; 129 font-size: 1rem; 130 -webkit-user-select:none; 131 -moz-user-select:none; 132 position: relative; 133 display: flex; 134 align-items: center; 135 justify-content: space-between; 136 user-select:none; 137 width: 80%; 138 margin-top: 2px; 139 color: #ffffff; 140 cursor: pointer; 141 line-height: 40px; 142 text-align: center; 143 border:1px solid #dcdcdc; 144 border-radius:16px; 145 background-color: #FFFFFF; 146 height: 30px; 147 } 148 .expand-icon:not([expansion]) { 149 transform: rotateZ(-90deg); 150 } 151 .layout { 152 display: grid; 153 grid-template-columns: 80% 20%; 154 } 155 .scene-check-box { 156 justify-self: center; 157 height: 100%; 158 } 159 .temp-icon { 160 padding-top:6px; 161 margin-left: 20px; 162 width: 20px; 163 } 164 #resetTemplate { 165 color:#999; 166 margin-left: 20px; 167 border:1px solid #d9caca; 168 border-radius: 10px; 169 } 170 #resetTemplate:hover { 171 background-color:#999; 172 color:#666; 173 } 174 </style> 175 <div class="config-title"> 176 <span class="title-text">Display Template</span> 177 <lit-icon class="config-close" name="close" title="Config Close" size="20"> 178 </lit-icon> 179 </div> 180 <div class="config-scene" style="display: contents;"> 181 <div class="title_div"> 182 <img class="config-img" title="Template Select" src="img/config_scene.png"> 183 <div>Template Select</div> 184 </div> 185 </div> 186 <div class="config-select config-scene-select" id="scene-select"></div> 187 <div class="config-chart" style="display: contents;"> 188 <div class="title_div" style='justify-content: space-between;'> 189 <div style='display: flex;align-items: center'> 190 <img class="config-img" title="Timeline Details" src="img/config_chart.png" style="width:24px;height: 24px"> 191 <div id="config_title">Timeline Details</div> 192 <button class="resetTemplate" id="resetTemplate">reset</button> 193 </div> 194 <div style='display: flex;'> 195 <div class="multipleSelect" tabindex="0"> 196 <div class="multipleRoot" id="select" style="width:100%"> 197 <input id="singleInput"/> 198 </div> 199 <lit-icon class="icon" name='search' color="#c3c3c3" style="margin-right: 10px;"></lit-icon> 200 </div> 201 <div style='display: flex;align-items: center;'> 202 <lit-icon id="switch-button" class="temp-icon" title="Show subSystem template" name="restore" size="30"></lit-icon> 203 <lit-icon id="open-file-icon" class="temp-icon" style="margin-left: 20px;display: none;" 204 name="open-file" title="upload json" size="30"></lit-icon> 205 <input id="open-temp-file" style="display:none;pointer-events: none;" type="file"/> 206 <lit-icon id="export-file-icon" class="temp-icon" title="export json" style="margin-left: 20px; 207 display: none;" size="30" name="download-file"></lit-icon> 208 </div> 209 </div> 210 </div> 211 </div> 212 <div class="config-select config-chart-select" id="chart-select"> 213 </div> 214`; 215
