初始化提交
This commit is contained in:
王立帮
47
common/templates/html/app.html
Normal file
47
common/templates/html/app.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .mixly-nav {
|
||||
width: 100%;
|
||||
height: var(--nav-height);
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .mixly-workspace {
|
||||
width: 100%;
|
||||
height: calc(100vh - var(--nav-height) - var(--footer-height));
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .mixly-footerbar {
|
||||
width: 100%;
|
||||
height: var(--footer-height);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .mixly-footerbar {
|
||||
background-color: rgb(0, 122, 204);
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .mixly-footerbar {
|
||||
background-color: rgb(0 150 136);
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
<div class="mixly-nav"></div>
|
||||
<div class="mixly-workspace"></div>
|
||||
<div class="mixly-footerbar"></div>
|
||||
</div>
|
||||
6
common/templates/html/context-menu-item.html
Normal file
6
common/templates/html/context-menu-item.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<div class="menu-line">
|
||||
<label>{{d.name}} </label>
|
||||
{{# if (d.hotKey) { }}
|
||||
<label>{{d.hotKey}}</label>
|
||||
{{# } }}
|
||||
</div>
|
||||
8
common/templates/html/editor/editor-blockly.html
Normal file
8
common/templates/html/editor/editor-blockly.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}"></div>
|
||||
25
common/templates/html/editor/editor-code.html
Normal file
25
common/templates/html/editor/editor-code.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<style>
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"],
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .ace_gutter {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"],
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .ace_gutter {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .ace_gutter {
|
||||
border-right-style: solid;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .ace_gutter {
|
||||
border-right-color: #c9c9c9;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .ace_gutter {
|
||||
border-right-color: rgba(128, 128, 128, 0.35);
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}" class="editor page-item"></div>
|
||||
28
common/templates/html/editor/editor-manager.html
Normal file
28
common/templates/html/editor/editor-manager.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .tabs {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .body {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
<div class="tabs"></div>
|
||||
<div class="body"></div>
|
||||
</div>
|
||||
11
common/templates/html/editor/editor-md-btns.html
Normal file
11
common/templates/html/editor/editor-md-btns.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<div class="group">
|
||||
<button m-id="code" class="layui-btn layui-btn-xs layui-btn-primary m-btn">
|
||||
<i class="icon-puzzle"></i>代码
|
||||
</button>
|
||||
<button m-id="mixture" class="layui-btn layui-btn-xs layui-btn-primary m-btn">
|
||||
<i class="icon-cube"></i>混合
|
||||
</button>
|
||||
<button m-id="preview" class="layui-btn layui-btn-xs layui-btn-primary m-btn self-adaption-btn">
|
||||
<i class="icon-code"></i>预览
|
||||
</button>
|
||||
</div>
|
||||
52
common/templates/html/editor/editor-md.html
Normal file
52
common/templates/html/editor/editor-md.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .editor-code {
|
||||
display: none;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .editor-preview {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .editor-preview > .markdown-body {
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
padding: 20px;
|
||||
border-style: solid;
|
||||
border-width: 0 0 0 1px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .editor-preview > .markdown-body * {
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .editor-preview > .markdown-body {
|
||||
border-color: #c9c9c9;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .editor-preview > .markdown-body {
|
||||
border-color: rgba(128, 128, 128, 0.35);
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
<div class="editor-code"></div>
|
||||
<div class="editor-preview">
|
||||
<div class="markdown-body">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
15
common/templates/html/editor/editor-mix-btns.html
Normal file
15
common/templates/html/editor/editor-mix-btns.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<div class="group">
|
||||
<!-- <button m-id="deps" class="layui-btn layui-btn-xs layui-btn-primary m-btn">
|
||||
<i class="layui-icon layui-icon-component"></i>依赖
|
||||
</button>
|
||||
<div class="line"></div> -->
|
||||
<button m-id="block" class="layui-btn layui-btn-xs layui-btn-primary m-btn self-adaption-btn">
|
||||
<i class="icon-puzzle"></i>{{ d.block }}
|
||||
</button>
|
||||
<button m-id="mixture" class="layui-btn layui-btn-xs layui-btn-primary m-btn">
|
||||
<i class="icon-cube"></i>{{ d.mix }}
|
||||
</button>
|
||||
<button m-id="code" class="layui-btn layui-btn-xs layui-btn-primary m-btn">
|
||||
<i class="icon-code"></i>{{ d.code }}
|
||||
</button>
|
||||
</div>
|
||||
34
common/templates/html/editor/editor-mix.html
Normal file
34
common/templates/html/editor/editor-mix.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .editor-blockly {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .editor-code {
|
||||
display: none;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
border-left: 1px;
|
||||
border-left-style: solid;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .editor-code {
|
||||
border-color: #c9c9c9;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .editor-code {
|
||||
border-color: rgba(128, 128, 128, 0.35);
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}" class="editor">
|
||||
<div class="editor-blockly"></div>
|
||||
<div class="editor-code"></div>
|
||||
</div>
|
||||
36
common/templates/html/editor/editor-tab.html
Normal file
36
common/templates/html/editor/editor-tab.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
height: 28px;
|
||||
z-index: 3;
|
||||
padding: 0px;
|
||||
border-width: 1px 0px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #c9c9c9;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] {
|
||||
background-color: #252526;
|
||||
border-color: rgba(128, 128, 128, 0.35);
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .chrome-tabs-content {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .x-scrollbar__content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}" class="chrome-tabs">
|
||||
<div class="chrome-tabs-content"></div>
|
||||
</div>
|
||||
13
common/templates/html/editor/editor-unknown.html
Normal file
13
common/templates/html/editor/editor-unknown.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
<label>该文件暂无有效解析器解析</label>
|
||||
</div>
|
||||
35
common/templates/html/editor/editor-welcome.html
Normal file
35
common/templates/html/editor/editor-welcome.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .mixly-font {
|
||||
font-family: 'ravie';
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .mixly-font {
|
||||
color: #b1b1b1;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .mixly-font {
|
||||
color: #3c3c3c;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
<label class="mixly-font">Mixly</label>
|
||||
</div>
|
||||
142
common/templates/html/file-tree.html
Normal file
142
common/templates/html/file-tree.html
Normal file
@@ -0,0 +1,142 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .progress {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
border-radius: 0;
|
||||
display: none;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .progress > .bar {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .progress > .bar {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .progress > .bar {
|
||||
background-color: #1e1e1e !important;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .progress > .bar::before {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .progress > .bar::before {
|
||||
background-color: var(--app-light-color);
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .progress > .bar::before {
|
||||
background-color: var(--app-dark-color);
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .folder-title {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
border: 1px solid;
|
||||
border-color: transparent;
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .folder-title:focus {
|
||||
background: #d7daeb;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .folder-title:focus {
|
||||
background: #5a5959;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .folder-title > * {
|
||||
line-height: 24px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .folder-title > .mixly-icon.triangle {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .folder-title > .mixly-icon.folder:before {
|
||||
margin: 0 0.2em;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .folder-title > .name {
|
||||
font-family: Segoe WPC,Segoe UI,Microsoft YaHei,sans-serif;
|
||||
font-size: 12px !important;
|
||||
padding-left: 2px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .children {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .children .jstree,
|
||||
div[m-id="{{d.mId}}"] > .children .jstree-container-ul {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .jstree-container-ul > .jstree-node {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .jstree-node > .jstree-wholerow {
|
||||
border: 1px solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .folder-title.active,
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] .jstree-node.active > .jstree-wholerow {
|
||||
border-color: var(--app-light-color) !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .folder-title.active,
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] .jstree-node.active > .jstree-wholerow {
|
||||
border-color: var(--app-dark-color) !important;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: transparent;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
<div class="ui swinging indeterminate progress">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<button type="root" class="folder-title layui-btn layui-btn-xs layui-btn-primary">
|
||||
<i class="mixly-icon triangle codicon-chevron-right"></i>
|
||||
<i class="mixly-icon folder foldericon-root-default"></i>
|
||||
<p class="name"></p>
|
||||
</button>
|
||||
<div class="children"></div>
|
||||
<div class="mask"></div>
|
||||
</div>
|
||||
93
common/templates/html/footerbar.html
Normal file
93
common/templates/html/footerbar.html
Normal file
@@ -0,0 +1,93 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] p {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .footerbar-item {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
font-size:12px;
|
||||
line-height:12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .footerbar-item > div {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .footerbar-item > div > a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .footerbar-item > button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
margin: 0 5px;
|
||||
padding: 3px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .footerbar-item > button > a {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
<div class="footerbar-item">
|
||||
<button m-title="{{d.example}}" class="example layui-btn layui-btn-xs layui-btn-primary m-btn">
|
||||
<a class="icon-doc-text">{{ d.example }}</a>
|
||||
</button>
|
||||
<div id="mixly-footer-cursor" style="display: none;">
|
||||
<div>
|
||||
<p>{{ d.row }} </p>
|
||||
<p id="mixly-footer-row">1</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>, {{ d.column }} </p>
|
||||
<p id="mixly-footer-column">1</p>
|
||||
</div>
|
||||
<div style="display: none;">
|
||||
<p>, {{ d.selected }} </p>
|
||||
<p id="mixly-footer-selected"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footerbar-item">
|
||||
<div>
|
||||
<a class='icon-code'></a>
|
||||
<p class="code-lang">{{ d.unknown }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<a class='icon-microchip'></a>
|
||||
<p id="mixly-footer-boardname"></p>
|
||||
<div id="mixly-footer-port-div" style="display: none;">
|
||||
<p> {{d.on}} </p>
|
||||
<p id="mixly-footer-port"></p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="board-config layui-btn layui-btn-xs layui-btn-primary m-btn">
|
||||
<a class="icon-cog">{{ d.config }}</a>
|
||||
</button>
|
||||
<button class="message layui-btn layui-btn-xs layui-btn-primary m-btn">
|
||||
<a class="icon-bell">{{ d.message }}</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
102
common/templates/html/footerlayer/footerlayer-board-config.html
Normal file
102
common/templates/html/footerlayer/footerlayer-board-config.html
Normal file
@@ -0,0 +1,102 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] button.title {
|
||||
white-space: nowrap;
|
||||
margin: 2px 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] button.title > p {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] button.title {
|
||||
background-color: #ffffff;
|
||||
border: 1px #fff;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] button.title:hover {
|
||||
color: #a5a5a5;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] button.title {
|
||||
background-color: #252525;
|
||||
border: 1px transparent;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] button.title:hover {
|
||||
color: var(--lay-color-text-2);
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] button.option {
|
||||
margin: 2px 0px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] button.option {
|
||||
background-color: var(--app-light-color);
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] button.option {
|
||||
background-color: #007ACC;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .select2-selection--single {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .select2-selection--single > span {
|
||||
line-height: 24px !important;
|
||||
height: 24px !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] .select2-container--open .select2-selection--single {
|
||||
outline: 1px solid var(--app-light-color);
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] .select2-container--open .select2-selection--single {
|
||||
outline: 1px solid var(--app-dark-color);
|
||||
}
|
||||
|
||||
.footer-layer-board-config .footer-layer-btn.reset {
|
||||
font-size: 13px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] > body > .select2-container > .select2-board-config {
|
||||
outline: 1px solid var(--app-light-color);
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] > body > .select2-container > .select2-board-config {
|
||||
outline: 1px solid var(--app-dark-color);
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
{{# layui.each(d.options, function(index, item){ }}
|
||||
<button
|
||||
mid="{{ item.key }}-label"
|
||||
class="layui-btn layui-btn-fluid layui-btn-xs title">
|
||||
<p>{{ item.name }}</p>
|
||||
</button>
|
||||
<p> : </p>
|
||||
<select mid="{{ item.key }}"></select>
|
||||
{{# }); }}
|
||||
</div>
|
||||
53
common/templates/html/footerlayer/footerlayer-example.html
Normal file
53
common/templates/html/footerlayer/footerlayer-example.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<style>
|
||||
/* 示例 */
|
||||
.footer-layer-example .layui-tree * {
|
||||
box-sizing: unset !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] .footer-layer-example .layui-tree-txt {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] .footer-layer-example .layui-tree-icon .layui-icon {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] .footer-layer-example .layui-tree-txt {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] .footer-layer-example .layui-tree-icon .layui-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer-layer-example .layui-tree-icon {
|
||||
border: none !important;
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
font-size: 16px !important;
|
||||
margin: 0 10px !important;
|
||||
}
|
||||
|
||||
.footer-layer-example .layui-tree-icon .layui-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.footer-layer-example .layui-tree-iconClick {
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
margin: 0 3px 0 10px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] .footer-layer-example .layui-tree-iconClick {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] .footer-layer-example .layui-tree-iconClick {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer-layer-example .layui-tree-iconClick .layui-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
<div class="example-tree-body" style="width:100%;height:100%;"></div>
|
||||
@@ -0,0 +1,23 @@
|
||||
<div class="toast show text-bg-{{ d.style }}" role="alert" aria-live="assertive" aria-atomic="true" style="margin-bottom: 8px;">
|
||||
<div class="toast-header">
|
||||
<img src="{{ d.src }}" width="22" height="22" class="rounded me-2">
|
||||
<strong class="me-auto">{{-d.name}}</strong>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
{{-d.message}}
|
||||
{{# if (d.btns && d.btns.length) { }}
|
||||
<div class="mt-2 pt-2 border-top btns">
|
||||
{{# if (d.checkbox.show) { }}
|
||||
<div class="form-check form-check-inline">
|
||||
<input class="form-check-input" type="checkbox" value="" id="{{-d.checkbox.id}}" {{d.checkbox.checked}}>
|
||||
<label class="form-check-label" for="{{-d.checkbox.id}}">{{d.checkbox.title}}</label>
|
||||
</div>
|
||||
{{# } }}
|
||||
{{# layui.each(d.btns, function(index, item){ }}
|
||||
<button type="button" m-id="{{ item.mId }}" class="btn btn-{{ item.style }} btn-sm">{{ item.text }}</button>
|
||||
{{# }); }}
|
||||
</div>
|
||||
{{# } }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="toast show text-bg-{{ d.style }}" role="alert" aria-live="assertive" aria-atomic="true" style="margin-bottom: 8px;">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">
|
||||
{{-d.message}}
|
||||
</div>
|
||||
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,2 @@
|
||||
<div class="toast-container bottom-0 end-0" style="position:relative;">
|
||||
</div>
|
||||
29
common/templates/html/footerlayer/footerlayer.html
Normal file
29
common/templates/html/footerlayer/footerlayer.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<div class="footer-layer">
|
||||
<div class="footer-layer-content mixly-scrollbar">
|
||||
<div class="layui-layer-title">
|
||||
{{# layui.each(d.btns, function(index, item) { }}
|
||||
<i
|
||||
class="footer-layer-btn layui-icon {{= item.icon }} {{= item.class }}"
|
||||
title="{{= item.title }}"
|
||||
></i>
|
||||
{{# }); }}
|
||||
<i
|
||||
class="footer-layer-btn layui-icon layui-icon-close close"
|
||||
title="{{ d.close }}"
|
||||
></i>
|
||||
</div>
|
||||
<div class="footer-layer-body"
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 5px;
|
||||
font-size: 14px;
|
||||
"
|
||||
>
|
||||
{{- d.content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
284
common/templates/html/lib-manager-div.html
Normal file
284
common/templates/html/lib-manager-div.html
Normal file
@@ -0,0 +1,284 @@
|
||||
<div id="libs-menu" class="layui-layer-wrap">
|
||||
<style type="text/css">
|
||||
#libs-menu .layui-nav-tree .layui-nav-item > a {
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
#libs-menu-left {
|
||||
width: 119px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] #libs-menu-left {
|
||||
background-color: #ffffff;
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] #libs-menu-left {
|
||||
border-right: 1px solid #454343;
|
||||
}
|
||||
|
||||
#libs-menu-options {
|
||||
margin: 5px;
|
||||
width: 110px;
|
||||
border-left-width: 10px;
|
||||
}
|
||||
|
||||
#libs-menu-body {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
left: 120px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] #libs-menu-body {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#libs-menu-top {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
#libs-menu-bottom {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] #libs-menu-bottom {
|
||||
background-color: #ffffff;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] #libs-menu-bottom {
|
||||
border-top: 1px solid #454343;
|
||||
}
|
||||
|
||||
#libs-menu-btn-group {
|
||||
float: right;
|
||||
padding-top: 4px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#libs-menu .layui-table-header {
|
||||
border-right-width: 5px !important;
|
||||
}
|
||||
|
||||
.menu-body {
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#libs-menu .layui-nav > li,
|
||||
#libs-menu .layui-nav > li > a {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] #libs-menu .layui-bg-cyan {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] #libs-menu .layui-nav .layui-this a {
|
||||
color: #fff !important;
|
||||
background-color: var(--app-light-color);
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] #libs-menu .layui-nav .layui-nav-item a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] #libs-menu .layui-nav-tree .layui-nav-item:hover {
|
||||
background-color: #f2f2f2;
|
||||
transition: 0.5s all;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] #libs-menu .layui-bg-cyan {
|
||||
background-color: #2a2a2b !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] #libs-menu .layui-nav .layui-this a {
|
||||
color: #fff !important;
|
||||
background-color: var(--lay-color-normal);
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] #libs-menu .layui-nav .layui-nav-item a {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] #libs-menu .layui-nav-tree .layui-nav-item:hover {
|
||||
background-color: #afa7a7;
|
||||
transition: 0.5s all;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] #libs-menu .layui-table-tool {
|
||||
background-color: #fff;
|
||||
top: 1px;
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] #libs-menu .layui-table-tool {
|
||||
background-color: #6c6969;
|
||||
top: 1px;
|
||||
border-bottom-width: 0px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] #libs-menu .layui-table-box {
|
||||
bottom: 1px;
|
||||
border: 4px solid #f8f8f8;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] #libs-menu .layui-table-box {
|
||||
bottom: 1px;
|
||||
border: 4px solid #302d2d;
|
||||
}
|
||||
</style>
|
||||
<div id="libs-menu-top">
|
||||
<div id="libs-menu-left">
|
||||
<ul
|
||||
id="libs-menu-options"
|
||||
class="layui-nav layui-nav-tree layui-bg-cyan layui-inline"
|
||||
lay-filter="libs-menu-filter"
|
||||
>
|
||||
<li class="layui-nav-item layui-this" lay-id="import">
|
||||
<a m-id="0" href="javascript:;">{{d.importBoard}}</a>
|
||||
</li>
|
||||
<li class="layui-nav-item" lay-id="delete">
|
||||
<a m-id="1" href="javascript:;">{{d.delBoard}}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="libs-menu-body">
|
||||
<div class="menu-body layui-show" style="height: 100%">
|
||||
<div
|
||||
class="layui-tab layui-tab-brief"
|
||||
id="import-lib-page"
|
||||
lay-filter="import-lib-page-filter"
|
||||
lay-unauto
|
||||
style="margin: 0px;height: 100%;"
|
||||
>
|
||||
<ul
|
||||
class="layui-tab-title"
|
||||
style="
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
height: 40px;
|
||||
right: 0px;
|
||||
"
|
||||
>
|
||||
<li class="layui-this" lay-id="mixly" id="import-mixly-lib">
|
||||
{{d.mixlyLib}}
|
||||
</li>
|
||||
<li lay-id="code" id="import-code-lib">
|
||||
{{d.codeLib}}
|
||||
</li>
|
||||
<div class="layui-btn-group" style="float: right;padding: 5px;">
|
||||
<button type="button" class="layui-btn layui-btn-sm self-adaption-btn" title="{{d.cloudImport}}" m-id="cloud-import">
|
||||
<i class="icon-download-cloud-1"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm self-adaption-btn" title="{{d.localImport}}" m-id="local-import">
|
||||
<i class="icon-download-2"></i>
|
||||
</button>
|
||||
</div>
|
||||
</ul>
|
||||
<div
|
||||
class="layui-tab-content"
|
||||
style="
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 40px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
overflow: auto;
|
||||
"
|
||||
>
|
||||
<div class="layui-tab-item layui-show">
|
||||
<div
|
||||
class="layui-hide"
|
||||
id="import-mixly-lib-page"
|
||||
lay-filter="import-mixly-lib-page-filter"
|
||||
></div>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<div
|
||||
class="layui-hide"
|
||||
id="import-code-lib-page"
|
||||
lay-filter="import-code-lib-page-filter"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-body" style="height: 100%">
|
||||
<div
|
||||
class="layui-tab layui-tab-brief"
|
||||
id="del-lib-page"
|
||||
lay-filter="del-lib-page-filter"
|
||||
lay-unauto
|
||||
style="margin: 0px;height: 100%;"
|
||||
>
|
||||
<ul
|
||||
class="layui-tab-title"
|
||||
style="
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
height: 40px;
|
||||
right: 0px;
|
||||
"
|
||||
>
|
||||
<li class="layui-this" lay-id="mixly" id="del-mixly-lib">
|
||||
{{d.mixlyLib}}
|
||||
</li>
|
||||
<li lay-id="code" id="del-code-lib">
|
||||
{{d.codeLib}}
|
||||
</li>
|
||||
<div class="layui-btn-group" style="float: right;padding: 5px;">
|
||||
<button type="button" class="layui-btn layui-btn-sm self-adaption-btn" title="{{d.openFolder}}" m-id="open-folder">
|
||||
<i class="icon-folder-open-empty"></i>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-sm self-adaption-btn" title="{{d.del}}" m-id="del">
|
||||
<i class="icon-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</ul>
|
||||
<div
|
||||
class="layui-tab-content"
|
||||
style="
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 40px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
overflow: auto;
|
||||
"
|
||||
>
|
||||
<div class="layui-tab-item layui-show">
|
||||
<div
|
||||
class="layui-hide"
|
||||
id="del-mixly-lib-page"
|
||||
lay-filter="del-mixly-lib-page-filter"
|
||||
></div>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<div
|
||||
class="layui-hide"
|
||||
id="del-code-lib-page"
|
||||
lay-filter="del-code-lib-page-filter"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="libs-menu-bottom"></div>
|
||||
</div>
|
||||
12
common/templates/html/loader-div.html
Normal file
12
common/templates/html/loader-div.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<div id="mixly-loader-div" style="display:none; margin:12px" align="center">
|
||||
<div style="
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
">
|
||||
<progress id="mixly-loader" class="mixly-progress"></progress>
|
||||
<button id="mixly-loader-btn" class="layui-btn layui-btn-xs self-adaption-btn" style="margin-left: 10px;">{{d.btnName}}</button>
|
||||
</div>
|
||||
</div>
|
||||
13
common/templates/html/nav/board-selector-div.html
Normal file
13
common/templates/html/nav/board-selector-div.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<style>
|
||||
.select2-dropdown.mixly-{{d.mId}} {
|
||||
width: 100% !important;
|
||||
transform: translate(calc(-50% + 75px), calc((var(--nav-height) - var(--nav-select-height)) / 2));
|
||||
}
|
||||
|
||||
body > .select2-container:has(.mixly-{{d.mId}}) {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-name: layui-upbit;
|
||||
}
|
||||
</style>
|
||||
<select m-id={{d.mId}} id="boards-type"></select>
|
||||
8
common/templates/html/nav/nav-btn.html
Normal file
8
common/templates/html/nav/nav-btn.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<button
|
||||
type="button"
|
||||
class="layui-btn layui-btn-xs layui-btn-primary mixly-nav"
|
||||
title="{{d.title}}"
|
||||
m-id="{{d.mId}}"
|
||||
>
|
||||
<a class="{{d.icon}}">{{d.text}}</a>
|
||||
</button>
|
||||
8
common/templates/html/nav/nav-item-container.html
Normal file
8
common/templates/html/nav/nav-item-container.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<li class="layui-nav-item mixly-scrollbar" lay-unselect m-id={{d.mId}}>
|
||||
<a style="white-space: nowrap;">
|
||||
{{d.text}}
|
||||
</a>
|
||||
<dl class="layui-nav-child layui-nav-child-r">
|
||||
<!-- 二级菜单 -->
|
||||
</dl>
|
||||
</li>
|
||||
3
common/templates/html/nav/nav-item.html
Normal file
3
common/templates/html/nav/nav-item.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<dd lay-unselect>
|
||||
<a class="mixly-nav {{d.icon}}" m-id="{{d.mId}}">{{d.text}}</a>
|
||||
</dd>
|
||||
325
common/templates/html/nav/nav.html
Normal file
325
common/templates/html/nav/nav.html
Normal file
@@ -0,0 +1,325 @@
|
||||
<style>
|
||||
ul[m-id="{{d.mId}}"] {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
height: var(--nav-height);
|
||||
max-height: var(--nav-height);
|
||||
color: var(--lay-color-white) !important;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] button {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] button {
|
||||
border-color: transparent;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] ul[m-id="{{d.mId}}"] button:active {
|
||||
border: 1px solid var(--app-light-color) !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] ul[m-id="{{d.mId}}"] button:active {
|
||||
border: 1px solid #2f4056 !important;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] ul[m-id="{{d.mId}}"] button:hover {
|
||||
box-shadow: 2px 0px 5px #7b7171;
|
||||
/*box-shadow: none;*/
|
||||
border-color: #19897f;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] ul[m-id="{{d.mId}}"] button:hover {
|
||||
box-shadow: 2px 0px 5px #303030;
|
||||
/*box-shadow: none;*/
|
||||
border-color: #434242;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] button:hover a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] button > a {
|
||||
color: rgba(255,255,255,.7);
|
||||
-webkit-transition: all .3s;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] ul[m-id="{{d.mId}}"] button > a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] .layui-nav-child {
|
||||
max-height: calc(100vh - var(--nav-height) - 12px);
|
||||
line-height: 30px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] ul[m-id="{{d.mId}}"] {
|
||||
background-color: var(--app-light-color) !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] ul[m-id="{{d.mId}}"] {
|
||||
background-color: #3c3c3c !important;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] .layui-nav-item {
|
||||
line-height: var(--nav-height);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] .layui-nav-child {
|
||||
top: calc(var(--nav-height) + 1px);
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] dl {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.layui-nav .layui-nav-item a {
|
||||
padding: 0 17px !important;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] > div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] .left-btn-container {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] .left-btn-container button {
|
||||
height: var(--nav-left-btn-height);
|
||||
font-size: calc(var(--nav-left-btn-font-size) + 4px);
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] .right-area,
|
||||
ul[m-id="{{d.mId}}"] .right-menu-container {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] .right-btn-container,
|
||||
ul[m-id="{{d.mId}}"] .dropdown-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] .dropdown-container > * {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] .right-btn-container button {
|
||||
padding: 0;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] .right-btn-container button > a {
|
||||
font-size: 18px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] .layui-nav-item dd {
|
||||
margin: 0;
|
||||
font-family: Segoe WPC,Segoe UI,Microsoft YaHei,sans-serif;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] .layui-nav-item dd > a {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
border-radius: 5px;
|
||||
box-sizing: content-box;
|
||||
padding: 5px 10px !important;
|
||||
margin: 0px 5px;
|
||||
border-radius: 5px;
|
||||
min-width: 60px;
|
||||
font-family: Segoe WPC,Segoe UI,Microsoft YaHei,sans-serif;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] .layui-nav-item dd > a {
|
||||
transition: none;
|
||||
-webkit-transition: none;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] .layui-nav-item dd > a:hover {
|
||||
transition: none;
|
||||
-webkit-transition: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] ul[m-id="{{d.mId}}"] .layui-nav-item dd > a:hover {
|
||||
background-color: var(--app-light-color);
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] ul[m-id="{{d.mId}}"] .layui-nav-item dd > a:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] ul[m-id="{{d.mId}}"] hr {
|
||||
border-bottom: 1px solid #000 !important;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] ul[m-id="{{d.mId}}"] hr {
|
||||
border-bottom: 1px solid #fff !important;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
|
||||
ul[m-id="{{d.mId}}"] > .editor-btn-container {
|
||||
line-height: 22px;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
margin: 4px;
|
||||
padding: 0 2px;
|
||||
border: 1px solid rgba(204, 204, 204, 0.2);
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] > .editor-btn-container > .copyright {
|
||||
font-family: "YaHei Consolas Hybrid", "Microsoft Yahei Light", "Arial";
|
||||
font-size: 12px;
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] > .editor-btn-container.empty {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
line-height: unset;
|
||||
font-size: unset;
|
||||
margin: unset;
|
||||
padding: unset;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] > .editor-btn-container .group {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] > .editor-btn-container .group > .line {
|
||||
height: 12px;
|
||||
width: 1px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] > .editor-btn-container .group > button {
|
||||
border-radius: 4px;
|
||||
padding: 0 2px;
|
||||
margin: 0 4px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] > .editor-btn-container .group > .self-adaption-btn {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] ul[m-id="{{d.mId}}"] > .editor-btn-container .group > .self-adaption-btn {
|
||||
background-color: #118d81 !important;
|
||||
border-color: #22857b;
|
||||
box-shadow: 2px 0px 5px #7b7171;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] ul[m-id="{{d.mId}}"] > .editor-btn-container .group > .self-adaption-btn {
|
||||
box-shadow: 2px 0px 5px #303030;
|
||||
}
|
||||
|
||||
.select2-dropdown.mixly-{{d.mId}} li {
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] select + .select2 > .selection > .select2-selection {
|
||||
border-radius: 3px !important;
|
||||
outline: 0;
|
||||
-webkit-appearance: none;
|
||||
transition: all .3s;
|
||||
-webkit-transition: all .3s;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] ul[m-id="{{d.mId}}"] select + .select2 > .selection > .select2-selection {
|
||||
background-color: #009f90;
|
||||
border-color: #009f90;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] ul[m-id="{{d.mId}}"] select + .select2 > .selection > .select2-selection {
|
||||
background-color: var(--lay-color-fill-2);
|
||||
border-color: var(--lay-color-border-1);
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] ul[m-id="{{d.mId}}"] select + .select2 > .selection > .select2-selection:hover {
|
||||
border-color: #037a6f;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] ul[m-id="{{d.mId}}"] select + .select2 > .selection > .select2-selection:hover {
|
||||
border-color: #1f1f1f;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] select + .select2 > .selection > .select2-selection > .select2-selection__rendered {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] select + .select2 > .selection > .select2-selection > .select2-selection__arrow b {
|
||||
border-color: #fff transparent transparent transparent;
|
||||
}
|
||||
|
||||
ul[m-id="{{d.mId}}"] select + .select2-container--open > .selection > .select2-selection > .select2-selection__arrow b {
|
||||
border-color: transparent transparent #fff transparent;
|
||||
}
|
||||
</style>
|
||||
<ul class="layui-nav" lay-filter="nav-filter" m-id="{{d.mId}}" lay-bar="disabled">
|
||||
<div>
|
||||
<!--自适应时显示的按钮-->
|
||||
<div class="left-btn-container">
|
||||
<!--返回主页面按钮-->
|
||||
<button
|
||||
type="button"
|
||||
m-id="home-btn"
|
||||
class="layui-btn layui-btn-xs layui-btn-primary mixly-nav"
|
||||
>Mixly</button>
|
||||
</div>
|
||||
<!--自适应时的更多按钮-->
|
||||
<li class="layui-nav-item mixly-scrollbar" style="display:none;" lay-unselect>
|
||||
<a style="white-space: nowrap;">{{ d.more }}</a>
|
||||
<dl class="layui-nav-child left-btn-ext-container">
|
||||
<!-- 二级菜单 -->
|
||||
</dl>
|
||||
</li>
|
||||
</div>
|
||||
<div class="editor-btn-container">
|
||||
<a class="copyright">Copyright © Mixly Team@BNU, CHINA</a>
|
||||
</div>
|
||||
<div class="right-area">
|
||||
<div class="right-btn-container"></div>
|
||||
<div class="dropdown-container"></div>
|
||||
<div class="right-menu-container"></div>
|
||||
</div>
|
||||
</ul>
|
||||
13
common/templates/html/nav/port-selector-div.html
Normal file
13
common/templates/html/nav/port-selector-div.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<style>
|
||||
.select2-dropdown.mixly-{{d.mId}} {
|
||||
width: 100% !important;
|
||||
transform: translate(calc(-50% + 50px), calc((var(--nav-height) - var(--nav-select-height)) / 2));
|
||||
}
|
||||
|
||||
body > .select2-container:has(.mixly-{{d.mId}}) {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-name: layui-upbit;
|
||||
}
|
||||
</style>
|
||||
<select m-id={{d.mId}} id="ports-type"></select>
|
||||
26
common/templates/html/parse-mix-error-div.html
Normal file
26
common/templates/html/parse-mix-error-div.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<div id="parse-mix-error-div" style="width:100%;height:100%;">
|
||||
<style type="text/css">
|
||||
html[data-bs-theme=dark] #parse-mix-error-div > div:nth-child(3) {
|
||||
border-top:1px solid #454343;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] #parse-mix-error-div > div:nth-child(3) {
|
||||
border-top:1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
<div class="layui-form" lay-filter="parse-mix-error-filter" style="position:absolute;left:0px;width:100%;top:0px;bottom:5px;overflow-y:auto;">
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-md12" style="padding:5px;">
|
||||
<blockquote class="layui-elem-quote layui-quote-nm" style="padding:5px;height:115px;overflow-y:auto;user-select: text;">{{-d.text}}</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div style="text-align:center;">
|
||||
<button class="layui-btn layui-btn-normal parse-mix-error-btn" m-id="0">{{d.btn1Name}}</button>
|
||||
<button class="layui-btn layui-btn-normal parse-mix-error-btn" m-id="1">{{d.btn2Name}}</button>
|
||||
<button class="layui-btn layui-btn-normal parse-mix-error-btn" m-id="2">{{d.btn3Name}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:absolute;bottom:0px;left:0px;height:5px;width:100%;"></div>
|
||||
</div>
|
||||
18
common/templates/html/progress-bar-div.html
Normal file
18
common/templates/html/progress-bar-div.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md12">
|
||||
<div class="layui-card layui-panel" id="{{d.panelId}}">
|
||||
<div class="layui-card-header">{{d.name}}</div>
|
||||
<div class="layui-card-body">
|
||||
<div style="padding: 0px;position: relative;height: 25px;">
|
||||
<div class="layui-progress" lay-filter="{{d.progressFilter}}" lay-showPercent="yes" style="position: absolute;left: 5px;right: 25px;top: 12px;display: inline-block;">
|
||||
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
|
||||
</div>
|
||||
<div style="display: inline-block;position: absolute;right: 5px;top: 2px;">
|
||||
<i id="{{d.progressStatusId}}" class="progress-status layui-icon layui-icon-close-fill"
|
||||
style="font-size: 15px; color: #1E9FFF;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
215
common/templates/html/read-bitmap-div.html
Normal file
215
common/templates/html/read-bitmap-div.html
Normal file
@@ -0,0 +1,215 @@
|
||||
<div id="read-bitmap-div">
|
||||
<style type="text/css">
|
||||
/* 设置滚动条宽高 */
|
||||
#read-bitmap-div ::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
/* 设置滚动条滑槽 */
|
||||
#read-bitmap-div ::-webkit-scrollbar-track {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
/* 设置滚动条滑块 */
|
||||
html[data-bs-theme=light] #read-bitmap-div ::-webkit-scrollbar-thumb {
|
||||
background-color: #C3C1C1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] #read-bitmap-div ::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #AEB2AF;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] #read-bitmap-div ::-webkit-scrollbar-thumb:active {
|
||||
background-color: #989998;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] #read-bitmap-div ::-webkit-scrollbar-thumb {
|
||||
background-color: #989998;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] #read-bitmap-div ::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #AEB2AF;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] #read-bitmap-div ::-webkit-scrollbar-thumb:active {
|
||||
background-color: #C3C1C1;
|
||||
}
|
||||
|
||||
#read-bitmap-div > div {
|
||||
|
||||
}
|
||||
|
||||
#test-bitmap-form label {
|
||||
height: 25px;
|
||||
line-height: 8px;
|
||||
}
|
||||
|
||||
#test-bitmap-form input {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
#test-bitmap-form .layui-input-block {
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
#read-bitmap-div-img-container {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
#read-bitmap-div-img-container > div {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#read-bitmap-div-img-container > div > div:nth-child(1) {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#read-bitmap-div-img-container > div > div:nth-child(2) {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#read-bitmap-div-img-container > div > div:nth-child(2) > div:nth-child(1) {
|
||||
border-width: 1px 0.5px 1px 1px !important;
|
||||
}
|
||||
|
||||
#read-bitmap-div-img-container > div > div:nth-child(2) > div:nth-child(2) {
|
||||
border-width: 1px 1px 1px 0.5px !important;
|
||||
}
|
||||
|
||||
#read-bitmap-div-img-container > div > div:nth-child(2) > div {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] #read-bitmap-div-img-container > div > div:nth-child(2) > div {
|
||||
border: solid #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] #read-bitmap-div-img-container > div > div:nth-child(2) > div {
|
||||
border: solid #000;
|
||||
}
|
||||
|
||||
#read-bitmap-div-message {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
font-size: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] #read-bitmap-div-message {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] #read-bitmap-div-message {
|
||||
background-color: #eee;
|
||||
}
|
||||
</style>
|
||||
<div id="read-bitmap-div-img-container">
|
||||
<div>
|
||||
<div>
|
||||
<div class="layui-form layui-form-pane">
|
||||
<div class="layui-form-item layui-form-text" style="margin-bottom: 0px;">
|
||||
<label class="layui-form-label">宽度</label>
|
||||
<input type="text" name="title" autocomplete="off" class="layui-input" value="100" m-id="0">
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">高度</label>
|
||||
<input type="text" name="title" autocomplete="off" class="layui-input" value="100" m-id="1">
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text" style="margin-bottom: 5px;">
|
||||
<div class="layui-input-block" style="width: 100%;">
|
||||
<button class="layui-btn layui-btn-normal layui-btn-xs" m-id="0">{{d.btn1Name}}</button>
|
||||
<button class="layui-btn layui-btn-normal layui-btn-xs" m-id="1">{{d.btn2Name}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div style="
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
">
|
||||
<h6>输入图像</h6>
|
||||
</div>
|
||||
<div style="
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
">
|
||||
<div id="read-bitmap-div-input-img" style="
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
">
|
||||
<h6>输出图像</h6>
|
||||
</div>
|
||||
<div style="
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
">
|
||||
<div id="read-bitmap-div-output-img" style="
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="read-bitmap-div-message">
|
||||
</div>
|
||||
</div>
|
||||
56
common/templates/html/search-div.html
Normal file
56
common/templates/html/search-div.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 33px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > input {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
height: 30px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > input {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > input:focus {
|
||||
border-color: var(--app-light-color) !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > input:focus {
|
||||
border-color: var(--app-dark-color) !important;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > i {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
right: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > i.disabled {
|
||||
color: #c7cbcf;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > i.disabled {
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="{{d.search}}"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
class="layui-input"
|
||||
>
|
||||
<i class="codicon-search-fuzzy layui-anim disabled"></i>
|
||||
</div>
|
||||
14
common/templates/html/selector-div.html
Normal file
14
common/templates/html/selector-div.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<div class="layui-form" id="mixly-selector-div" style="display: none;">
|
||||
<div class="layui-form-item">
|
||||
<div id="mixly-selector-type-div">
|
||||
<select id="mixly-selector-type">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div style="text-align:center;">
|
||||
<button id="mixly-selector-btn1" class="layui-btn layui-btn-normal" onclick="">{{d.btn1Name}}</button>
|
||||
<button id="mixly-selector-btn2" class="layui-btn layui-btn-normal" onclick="">{{d.btn2Name}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
135
common/templates/html/serial-tool.html
Normal file
135
common/templates/html/serial-tool.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<div id="{{ d.moveId }}" style="height: 10px;width: 100%;"></div>
|
||||
<div class="layui-tab mixly-scrollbar" lay-filter="{{ d.tabFilter }}" lay-unauto style="width: 100%;height: 100%;margin-top: 0px;margin-bottom: 0px;position: relative;">
|
||||
<ul class="layui-tab-title" style="position: absolute;left: 0px;top: 0px;height: 40px;right: 0px;">
|
||||
<li class="layui-this" lay-id="0">{{ d.Msg.monitor }}</li>
|
||||
<li lay-id="1">{{ d.Msg.visualization }}</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content" style="position: absolute;left: 0px;top: 40px;bottom: 10px;right: 0px;overflow: auto;padding-bottom: 0px;">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label" style="height: 44px;padding-top: 1px;padding-bottom: 1px;">
|
||||
<p style="display:inline;">{{ d.Msg.serial }}</p>
|
||||
<input style="display:none;">
|
||||
<input id="{{ d.setDtrId }}" type="checkbox" title="DTR" lay-filter="{{ d.setDtrFilter }}" lay-skin="primary" {{ d.dtr }}>
|
||||
<input id="{{ d.setRtsId }}" type="checkbox" title="RTS" lay-filter="{{ d.setRtsFilter }}" lay-skin="primary" {{ d.rts }}>
|
||||
</label>
|
||||
<div style="position: relative; height: 38px;">
|
||||
<div style="position: absolute; left: 0px; right: 64px;">
|
||||
<div class="layui-input-inline" style="width:50%;clear:none;">
|
||||
<select id="{{ d.selectPortId }}" lay-verify="required" lay-filter="{{ d.selectPortFilter }}"></select>
|
||||
</div>
|
||||
<div class="layui-input-inline" style="width:50%;clear:none;">
|
||||
<select id="{{ d.selectBaudId }}" lay-filter="{{ d.selectBaudFilter }}">
|
||||
{{# layui.each(d.baudRates, function(index, baud) { }}
|
||||
{{# if (baud === d.selectedBaud) { }}
|
||||
<option value="{{ baud }}" selected>{{ baud }}</option>
|
||||
{{# } else { }}
|
||||
<option value="{{ baud }}">{{ baud }}</option>
|
||||
{{# } }}
|
||||
{{# }); }}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button id="{{ d.connectBtnId }}" class="layui-btn layui-btn-normal" style="position: absolute; right: 0px; width: 64px;" lay-filter="{{ d.connectBtnFilter }}">{{ d.Msg.open }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label" style="height: 44px;padding-top: 1px;padding-bottom: 1px;">
|
||||
<p style="display:inline;">{{ d.Msg.sendData }}</p>
|
||||
<input style="display:none;">
|
||||
<input id="{{ d.sendTypeId }}" type="checkbox" title="{{ d.Msg.string }}" lay-filter="{{ d.sendTypeFilter }}" lay-skin="primary" checked>
|
||||
</label>
|
||||
<div style="position: relative; height: 38px;">
|
||||
<div class="layui-input-inline" style="position: absolute; right: 128px; left: 0px;clear: none;">
|
||||
<input id="{{ d.sendId }}" type="text" name="title" placeholder="{{ d.Msg.input }}" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-input-inline" style="position: absolute; right: 64px; width: 64px;clear: none;">
|
||||
<select id="{{ d.sendWithId }}" lay-filter="{{ d.sendWithFilter }}">
|
||||
<option value="no">no</option>
|
||||
<option value="\n">\n</option>
|
||||
<option value="\r">\r</option>
|
||||
<option value="\r\n" selected>\r\n</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="{{ d.sendBtnId }}" class="layui-btn layui-btn-normal" style="position: absolute; right: 0px; width: 64px;">{{ d.Msg.send }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label" style="height: 44px;padding-top: 1px;padding-bottom: 1px;">
|
||||
<p style="display:inline;">{{ d.Msg.receiveData }}</p>
|
||||
<input style="display:none;">
|
||||
<input id="{{ d.receiveTypeId }}" type="checkbox" title="{{ d.Msg.string }}" lay-filter="{{ d.receiveTypeFilter }}" lay-skin="primary" checked>
|
||||
<input id="{{ d.scrollId }}" type="checkbox" title="{{ d.Msg.scroll }}" lay-filter="{{ d.scrollFilter }}" lay-skin="primary" checked>
|
||||
</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea
|
||||
readonly
|
||||
id="{{ d.receiveId }}"
|
||||
name="desc"
|
||||
wrap="off"
|
||||
spellcheck="false"
|
||||
placeholder="{{ d.output }}"
|
||||
class="layui-textarea"
|
||||
style="height: 220px;"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<div style="text-align: center;">
|
||||
<button id="{{ d.clearBtnId }}" class="layui-btn layui-btn-danger">{{ d.Msg.clear }}</button>
|
||||
{{# if (d.ctrlCBtn) { }}
|
||||
<button id="{{ d.ctrlCBtnId }}" class="layui-btn layui-btn-danger">{{ d.Msg.interrupt }}</button>
|
||||
{{# } }}
|
||||
{{# if (d.ctrlDBtn) { }}
|
||||
<button id="{{ d.ctrlDBtnId }}" class="layui-btn layui-btn-danger">{{ d.Msg.reset }}</button>
|
||||
{{# } }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-tab-item">
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<div class="layui-input-inline" style="width:15%;clear:none;">
|
||||
<label class="layui-form-label">{{ d.Msg.min }}</label>
|
||||
<input id="{{ d.yMinId }}" type="text" name="title" autocomplete="off" class="layui-input" value="{{ d.yMin }}">
|
||||
</div>
|
||||
<div class="layui-input-inline" style="width:15%;clear:none;">
|
||||
<label class="layui-form-label">{{ d.Msg.max }}</label>
|
||||
<input id="{{ d.yMaxId }}" type="text" name="title" autocomplete="off" class="layui-input" value="{{ d.yMax }}">
|
||||
</div>
|
||||
<div class="layui-input-inline" style="width:15%;clear:none;">
|
||||
<label class="layui-form-label">{{ d.Msg.pointNum }}</label>
|
||||
<select id="{{ d.pointNumId }}" lay-filter="{{ d.selectPointNumFilter }}">
|
||||
{{# for (var pointNum of d.pointList) { }}
|
||||
{{# if (pointNum === d.pointNum) { }}
|
||||
<option value="{{ pointNum }}" selected>{{ pointNum }}</option>
|
||||
{{# } else { }}
|
||||
<option value="{{ pointNum }}">{{ pointNum }}</option>
|
||||
{{# } }}
|
||||
{{# } }}
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline" style="width:55%;clear:none;">
|
||||
<label class="layui-form-label">{{ d.Msg.sendData }}</label>
|
||||
<div style="position: relative;width: 100%;height: 38px;">
|
||||
<div class="layui-input-inline" style="position: absolute;left: 0px;right: 128px;clear: none;bottom: 0px;top: 0px;">
|
||||
<input id="{{ d.chartSendId }}" type="text" name="title" placeholder="{{ d.Msg.input }}" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-input-inline" style="position: absolute;right: 64px;width: 64px;clear: none;bottom: 0px;top: 0px;">
|
||||
<select id="{{ d.chartSendWithId }}">
|
||||
<option value="no">no</option>
|
||||
<option value="\n">\n</option>
|
||||
<option value="\r">\r</option>
|
||||
<option value="\r\n" selected>\r\n</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="{{ d.chartSendBtnId }}" class="layui-btn layui-btn-normal" style="position: absolute;right: 0px;width: 64px;">{{ d.Msg.send }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text" style="padding-top: 25px;">
|
||||
<div id="{{ d.dataDrawId }}" style="width: 100%;overflow-x: auto;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
36
common/templates/html/sidebar/left-sidebars-manager.html
Normal file
36
common/templates/html/sidebar/left-sidebars-manager.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .tabs {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 23px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .body {
|
||||
position: absolute;
|
||||
left: 23px;
|
||||
right: 0px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .body {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .body {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
<div class="tabs"></div>
|
||||
<div class="body"></div>
|
||||
</div>
|
||||
80
common/templates/html/sidebar/left-sidebars-tab.html
Normal file
80
common/templates/html/sidebar/left-sidebars-tab.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
width: 23px;
|
||||
z-index: 3;
|
||||
padding: 0px;
|
||||
border-width: 0px 1px 0px 0px;
|
||||
border-style: solid;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #c9c9c9;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] {
|
||||
background-color: #252526;
|
||||
border-color: rgba(128, 128, 128, 0.35);
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .x-scrollbar__content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .chrome-tab {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: unset;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .chrome-tab > .chrome-tab-background {
|
||||
top: 1px;
|
||||
bottom: 1px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .chrome-tab[active] > .chrome-tab-background {
|
||||
border-width: 0 0 0 2px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .chrome-tab > .chrome-tab-content {
|
||||
padding: 2px 0;
|
||||
height: fit-content;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .chrome-tab > .chrome-tab-content > .chrome-tab-title {
|
||||
writing-mode: tb-rl;
|
||||
overflow: visible;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .chrome-tab > .chrome-tab-dividers {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
div[m-id="{{d.mId}}"] .chrome-tab > .chrome-tab-dividers::before,
|
||||
div[m-id="{{d.mId}}"] .chrome-tab > .chrome-tab-dividers::after {
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0.5px;
|
||||
width: 100%;
|
||||
background: #a9adb0;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}" class="chrome-tabs">
|
||||
<div class="chrome-tabs-content">
|
||||
</div>
|
||||
</div>
|
||||
36
common/templates/html/sidebar/right-sidebars-manager.html
Normal file
36
common/templates/html/sidebar/right-sidebars-manager.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .body {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 23px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .body {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .body {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .tabs {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 23px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
<div class="body"></div>
|
||||
<div class="tabs"></div>
|
||||
</div>
|
||||
80
common/templates/html/sidebar/right-sidebars-tab.html
Normal file
80
common/templates/html/sidebar/right-sidebars-tab.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
width: 23px;
|
||||
z-index: 3;
|
||||
padding: 0px;
|
||||
border-width: 0px 0px 0px 1px;
|
||||
border-style: solid;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #c9c9c9;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] {
|
||||
background-color: #252526;
|
||||
border-color: rgba(128, 128, 128, 0.35);
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .x-scrollbar__content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .chrome-tab {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: unset;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .chrome-tab > .chrome-tab-background {
|
||||
top: 1px;
|
||||
bottom: 1px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .chrome-tab[active] > .chrome-tab-background {
|
||||
border-width: 0 2px 0 0;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .chrome-tab > .chrome-tab-content {
|
||||
padding: 2px 0;
|
||||
height: fit-content;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .chrome-tab > .chrome-tab-content > .chrome-tab-title {
|
||||
writing-mode: tb-rl;
|
||||
overflow: visible;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .chrome-tab > .chrome-tab-dividers {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
div[m-id="{{d.mId}}"] .chrome-tab > .chrome-tab-dividers::before,
|
||||
div[m-id="{{d.mId}}"] .chrome-tab > .chrome-tab-dividers::after {
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 0.5px;
|
||||
width: 100%;
|
||||
background: #a9adb0;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}" class="chrome-tabs">
|
||||
<div class="chrome-tabs-content">
|
||||
</div>
|
||||
</div>
|
||||
75
common/templates/html/sidebar/sidebar-libs.html
Normal file
75
common/templates/html/sidebar/sidebar-libs.html
Normal file
@@ -0,0 +1,75 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .layui-panel {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .layui-panel > .background {
|
||||
width: 100%;
|
||||
padding: 32px;
|
||||
border: 1px solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] .layui-panel > .background {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] .layui-panel > .background {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] .layui-panel > .background:focus {
|
||||
border-color: var(--app-light-color);
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] .layui-panel > .background:focus {
|
||||
border-color: var(--app-dark-color);
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] .layui-panel > .background:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] .layui-panel > .background:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .layui-panel > .content {
|
||||
padding: 32px;
|
||||
border: 1px solid;
|
||||
border-color: transparent;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
<div m-id={{d.mId}}>
|
||||
<div class="layui-panel panel-item">
|
||||
<button class="background">面板任意内容</button>
|
||||
</div>
|
||||
<div class="layui-panel panel-item">
|
||||
<button class="background">面板任意内容</button>
|
||||
</div>
|
||||
<div class="layui-panel panel-item">
|
||||
<button class="background">面板任意内容</button>
|
||||
</div>
|
||||
<div class="layui-panel panel-item">
|
||||
<button class="background">面板任意内容</button>
|
||||
</div>
|
||||
<div class="layui-panel panel-item">
|
||||
<button class="background">面板任意内容</button>
|
||||
</div>
|
||||
<div class="layui-panel panel-item">
|
||||
<button class="background">面板任意内容</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > button {
|
||||
margin: 15px;
|
||||
max-width: 200px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff !important;
|
||||
height: 25px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
<button class="layui-btn layui-btn-xs m-btn self-adaption-btn">打开文件夹</button>
|
||||
</div>
|
||||
122
common/templates/html/sidebar/sidebar-local-storage.html
Normal file
122
common/templates/html/sidebar/sidebar-local-storage.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .progress {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .progress,
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .progress .bar-bg {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .progress,
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .progress .bar-bg {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .progress > .ui-mprogress > .indeter-bar {
|
||||
background-color: var(--app-light-color);
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .progress > .ui-mprogress > .indeter-bar {
|
||||
background-color: var(--app-dark-color);
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .folder-title {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
border: 1px solid;
|
||||
border-color: transparent;
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .folder-title:focus {
|
||||
background: #d7daeb;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .folder-title:focus {
|
||||
background: #5a5959;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .folder-title > * {
|
||||
line-height: 24px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .folder-title > .mixly-icon.triangle {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .folder-title > .mixly-icon.folder:before {
|
||||
margin: 0 0.2em;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .folder-title > .name {
|
||||
font-family: Segoe WPC,Segoe UI,Microsoft YaHei,sans-serif;
|
||||
font-size: 12px !important;
|
||||
padding-left: 2px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .children {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .children .jstree,
|
||||
div[m-id="{{d.mId}}"] > .children .jstree-container-ul {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .jstree-container-ul > .jstree-node {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .jstree-node > .jstree-wholerow {
|
||||
border: 1px solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .folder-title.active,
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] .jstree-node.active > .jstree-wholerow {
|
||||
border-color: var(--app-light-color) !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .folder-title.active,
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] .jstree-node.active > .jstree-wholerow {
|
||||
border-color: var(--app-dark-color) !important;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
<div class="progress"></div>
|
||||
<button type="root" class="folder-title layui-btn layui-btn-xs layui-btn-primary">
|
||||
<i class="mixly-icon triangle codicon-chevron-right"></i>
|
||||
<i class="mixly-icon folder foldericon-root-default"></i>
|
||||
<p class="name"></p>
|
||||
</button>
|
||||
<div class="children"></div>
|
||||
</div>
|
||||
@@ -0,0 +1,26 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > div {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > div {
|
||||
background: url('../common/css/svg/empty/empty-light.svg');
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > div {
|
||||
background: url('../common/css/svg/empty/empty-dark.svg');
|
||||
background-size: 100% auto;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}" class="page-item">
|
||||
<div></div>
|
||||
</div>
|
||||
25
common/templates/html/statusbar/statusbar-ampy-open-fs.html
Normal file
25
common/templates/html/statusbar/statusbar-ampy-open-fs.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > button {
|
||||
margin: 15px;
|
||||
max-width: 200px;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #fff !important;
|
||||
height: 25px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
<button class="layui-btn layui-btn-xs m-btn self-adaption-btn">{{ d.loadBoardFS }}</button>
|
||||
</div>
|
||||
31
common/templates/html/statusbar/statusbar-ampy.html
Normal file
31
common/templates/html/statusbar/statusbar-ampy.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .file-tree {
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
border-right-width: 1px;
|
||||
border-right-style: solid;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .file-tree {
|
||||
border-right-color: #c9c9c9;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .file-tree {
|
||||
border-right-color: rgba(128, 128, 128, 0.35);
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .editor {
|
||||
width: 85%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}" class="page-item">
|
||||
<div class="file-tree"></div>
|
||||
<div class="editor"></div>
|
||||
</div>
|
||||
142
common/templates/html/statusbar/statusbar-fs-panel.html
Normal file
142
common/templates/html/statusbar/statusbar-fs-panel.html
Normal file
@@ -0,0 +1,142 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
height: fit-content;
|
||||
margin: 0px 20px 20px 20px;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] input {
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] {
|
||||
box-shadow: 0 0 5px 1px #ddd;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] {
|
||||
box-shadow: 0 0 5px 1px #111;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] input:focus,
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] select:focus {
|
||||
border-color: var(--app-light-color) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] input:focus,
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] select:focus {
|
||||
border-color: var(--app-dark-color) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .card-header {
|
||||
position: relative;
|
||||
padding: 5px 0px;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .card-header > .layui-icon {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .card-header > .progress {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
display: none;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .card-header > .progress > .bar {
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .card-header > .progress > .bar {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .card-header > .progress > .bar {
|
||||
background-color: #1e1e1e !important;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .card-header > .progress > .bar::before {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .card-header > .progress > .bar::before {
|
||||
background-color: var(--app-light-color);
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .card-header > .progress > .bar::before {
|
||||
background-color: var(--app-dark-color);
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .card-body {
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .card-body .input-group {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .card-body .input-group .input-group-text {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .select2 > .selection * {
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
color: var(--bs-body-color) !important;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .select2 > .selection > .select2-selection {
|
||||
border-radius: 0.25rem;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border: var(--bs-border-width) solid var(--bs-border-color);
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}" class="card text-center">
|
||||
<div class="card-header">
|
||||
{{ d.mapFolder }}
|
||||
<i class="close-btn layui-icon layui-icon-close"></i>
|
||||
<div class="ui swinging indeterminate progress">
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-4 mb-3">
|
||||
<div class="input-group flex-nowrap input-group-sm">
|
||||
<span class="input-group-text">{{ d.comment }}</span>
|
||||
<input class="form-control form-control-sm" type="text" placeholder="{{ d.commentInfo }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3 mb-3">
|
||||
<div class="input-group flex-nowrap input-group-sm">
|
||||
<span class="input-group-text">{{ d.filesystem }}</span>
|
||||
<select class="fs-type form-select"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5 mb-3">
|
||||
<div class="input-group flex-nowrap input-group-sm">
|
||||
<span class="input-group-text">{{ d.path }}</span>
|
||||
<input class="folder-input form-control form-control-sm" type="text" placeholder="{{ d.mapFolder }}" disabled>
|
||||
<button type="button" class="folder-btn btn btn-primary btn-sm self-adaption-btn m-btn">{{ d.selectFolder }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-center">
|
||||
<button class="download-btn btn btn-primary btn-sm self-adaption-btn m-btn" type="button">{{ d.download }}</button>
|
||||
<button class="upload-btn btn btn-primary btn-sm self-adaption-btn m-btn" type="button">{{ d.upload }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
34
common/templates/html/statusbar/statusbar-fs.html
Normal file
34
common/templates/html/statusbar/statusbar-fs.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<style>
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] * {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] * {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 20px 0px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: transparent !important;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}" class="mixly-scrollbar page-item">
|
||||
<div class="content">
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-center">
|
||||
<button class="manage-btn btn btn-primary btn-sm self-adaption-btn m-btn" type="button">{{ d.new }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mask"></div>
|
||||
</div>
|
||||
88
common/templates/html/statusbar/statusbar-libs-mix.html
Normal file
88
common/templates/html/statusbar/statusbar-libs-mix.html
Normal file
@@ -0,0 +1,88 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .menu {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .menu > .cloud {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .menu .layui-panel {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .menu .layui-panel > .background {
|
||||
width: 100%;
|
||||
padding: 32px;
|
||||
border: 1px solid;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .menu .layui-panel > .background {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .menu .layui-panel > .background {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .menu .layui-panel > .background:focus {
|
||||
border-color: var(--app-light-color);
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .menu .layui-panel > .background:focus {
|
||||
border-color: var(--app-dark-color);
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .menu .layui-panel > .background:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .menu .layui-panel > .background:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .menu .layui-panel > .content {
|
||||
padding: 32px;
|
||||
border: 1px solid;
|
||||
border-color: transparent;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}" lay-filter="{{d.mId}}" class="page-item mixly-scrollbar">
|
||||
<div class="menu">
|
||||
<div class="local">
|
||||
<div class="layui-panel panel-item">
|
||||
<button class="background">本地导入</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cloud">
|
||||
<div class="layui-panel panel-item">
|
||||
<button class="background">面板任意内容</button>
|
||||
</div>
|
||||
<div class="layui-panel panel-item">
|
||||
<button class="background">面板任意内容</button>
|
||||
</div>
|
||||
<div class="layui-panel panel-item">
|
||||
<button class="background">面板任意内容</button>
|
||||
</div>
|
||||
<div class="layui-panel panel-item">
|
||||
<button class="background">面板任意内容</button>
|
||||
</div>
|
||||
<div class="layui-panel panel-item">
|
||||
<button class="background">面板任意内容</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info"></div>
|
||||
</div>
|
||||
113
common/templates/html/statusbar/statusbar-serial-chart.html
Normal file
113
common/templates/html/statusbar/statusbar-serial-chart.html
Normal file
@@ -0,0 +1,113 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .item {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .col-sm-4 {
|
||||
width: 240px;
|
||||
margin-top: 0px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .setting {
|
||||
top: 0px;
|
||||
font-weight: bold;
|
||||
margin: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .setting * {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .setting * {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .setting input:focus,
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .setting select:focus {
|
||||
border-color: var(--app-light-color) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .setting input:focus,
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .setting select:focus {
|
||||
border-color: var(--app-dark-color) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .setting .input-group {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .setting .input-group .input-group-text {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .setting .select2 > .selection * {
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
color: var(--bs-body-color) !important;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .setting .select2 > .selection > .select2-selection {
|
||||
border-radius: 0.25rem;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border: var(--bs-border-width) solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .figure {
|
||||
top: 40px;
|
||||
bottom: 0px;
|
||||
min-height: 80px;
|
||||
margin: 0 0 10px 10px
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .figure {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .figure {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}" class="page-item mixly-scrollbar">
|
||||
<div class="item setting row g-3">
|
||||
<div class="col-sm-4">
|
||||
<div class="input-group flex-nowrap input-group-sm">
|
||||
<span class="input-group-text">{{ d.pointsNum }}</span>
|
||||
<select class="point-num form-select">
|
||||
<option value="100" selected>100</option>
|
||||
<option value="200">200</option>
|
||||
<option value="300">300</option>
|
||||
<option value="400">400</option>
|
||||
<option value="500">500</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="input-group flex-nowrap input-group-sm">
|
||||
<span class="input-group-text">{{ d.yMin }}</span>
|
||||
<input class="y-min form-control form-control-sm" type="text" value="0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="input-group flex-nowrap input-group-sm">
|
||||
<span class="input-group-text">{{ d.yMax }}</span>
|
||||
<input class="y-max form-control form-control-sm" type="text" value="100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item figure"></div>
|
||||
</div>
|
||||
77
common/templates/html/statusbar/statusbar-serial-output.html
Normal file
77
common/templates/html/statusbar/statusbar-serial-output.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .setting {
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
width: fit-content;
|
||||
height: 23px;
|
||||
z-index: 1;
|
||||
border-radius: 2px;
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .setting {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .setting {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .setting label {
|
||||
height: 18px;
|
||||
font-size: 10px;
|
||||
padding: 2px;
|
||||
margin: 2px;
|
||||
line-height: 15px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .setting label {
|
||||
border-color: #c9c9c9;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .setting label {
|
||||
border-color: rgba(128, 128, 128, 0.35);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .setting .m-btn:hover,
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .setting .btn-check:checked+.btn {
|
||||
background-color: var(--app-light-color);
|
||||
border-color: var(--app-light-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .setting .m-btn:hover,
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .setting .btn-check:checked+.btn {
|
||||
background-color: var(--app-dark-color);
|
||||
border-color: var(--app-dark-color);
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .body {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}" class="page-item">
|
||||
<div class="setting">
|
||||
<label class="empty m-btn btn btn-outline-primary">{{ d.empty }}</label><br>
|
||||
<input type="checkbox" class="btn-check scroll" id="{{ d.mId }}-scroll" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="{{ d.mId }}-scroll">{{ d.scroll }}</label><br>
|
||||
<input type="checkbox" class="btn-check timestamp" id="{{ d.mId }}-timestamp" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="{{ d.mId }}-timestamp">{{ d.timestamp }}</label><br>
|
||||
<input type="checkbox" class="btn-check hex" id="{{ d.mId }}-hex" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="{{ d.mId }}-hex">HEX</label><br>
|
||||
</div>
|
||||
<div class="body"></div>
|
||||
</div>
|
||||
177
common/templates/html/statusbar/statusbar-serial.html
Normal file
177
common/templates/html/statusbar/statusbar-serial.html
Normal file
@@ -0,0 +1,177 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .content {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 25px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .send {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
height: 25px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .send > .box {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
font-size: 13px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .send > .box > input {
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding-left: 5px;
|
||||
padding-right: 100px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .send > .box > .setting {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .send > .box > .setting label {
|
||||
height: 18px;
|
||||
font-size: 10px;
|
||||
padding: 2px;
|
||||
margin: auto 5px auto 0px;
|
||||
line-height: 15px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .send > .box > .setting label {
|
||||
border-color: #c9c9c9;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .send > .box > .setting label {
|
||||
border-color: rgba(128, 128, 128, 0.35);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .send > .box > .setting .btn-check:checked+.btn {
|
||||
background-color: var(--app-light-color);
|
||||
border-color: var(--app-light-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .send > .box > .setting .btn-check:checked+.btn {
|
||||
background-color: var(--app-dark-color);
|
||||
border-color: var(--app-dark-color);
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .send > .select2 {
|
||||
border-style: solid;
|
||||
border-width: 1px 1px 1px 0;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .send > *,
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .send > .box > input,
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .send .select2-selection--single {
|
||||
border-color: #c9c9c9;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .send > *,
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .send > .box > input,
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .send .select2-selection--single {
|
||||
border-color: rgba(128, 128, 128, 0.35);
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .send .select2-selection--single {
|
||||
height: 23px;
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .send .select2-selection--single > span {
|
||||
height: 23px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .send > .setting-menu > option:checked {
|
||||
color: white;
|
||||
background-color: var(--app-light-color);
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .send > .setting-menu > option:checked {
|
||||
color: white;
|
||||
background-color: var(--app-dark-color);
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .send > .box > input:focus {
|
||||
border-color: var(--app-light-color) !important;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .send > .box > input:focus {
|
||||
border-color: var(--app-dark-color) !important;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{ d.mId }}">
|
||||
<div class="content"></div>
|
||||
<div class="send">
|
||||
<div class="box">
|
||||
<input type="text" placeholder="{{d.sendInfo}}" autocomplete="off" disabled>
|
||||
<div class="setting">
|
||||
<input type="checkbox" class="btn-check hex" id="{{ d.mId }}-hex" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="{{ d.mId }}-hex">HEX</label><br>
|
||||
<input type="checkbox" class="btn-check dtr" id="{{ d.mId }}-dtr" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="{{ d.mId }}-dtr">DTR</label><br>
|
||||
<input type="checkbox" class="btn-check rts" id="{{ d.mId }}-rts" autocomplete="off">
|
||||
<label class="btn btn-outline-primary" for="{{ d.mId }}-rts">RTS</label><br>
|
||||
</div>
|
||||
</div>
|
||||
<select data-id="send-with" class="setting-menu" style="width: 60px;">
|
||||
<option value="no">no</option>
|
||||
<option value="\n">\n</option>
|
||||
<option value="\r">\r</option>
|
||||
<option value="\r\n" selected>\r\n</option>
|
||||
</select>
|
||||
<select data-id="baud" class="setting-menu" style="margin-right: 2px;border-right-width: 0;width: 90px;">
|
||||
<option value="300">300</option>
|
||||
<option value="600">600</option>
|
||||
<option value="750">750</option>
|
||||
<option value="1200">1200</option>
|
||||
<option value="2400">2400</option>
|
||||
<option value="4800">4800</option>
|
||||
<option value="9600" selected>9600</option>
|
||||
<option value="19200">19200</option>
|
||||
<option value="31250">31250</option>
|
||||
<option value="38400">38400</option>
|
||||
<option value="57600">57600</option>
|
||||
<option value="74880">74880</option>
|
||||
<option value="115200">115200</option>
|
||||
<option value="230400">230400</option>
|
||||
<option value="250000">250000</option>
|
||||
<option value="460800">460800</option>
|
||||
<option value="500000">500000</option>
|
||||
<option value="921600">921600</option>
|
||||
<option value="1000000">1000000</option>
|
||||
<option value="2000000">2000000</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
35
common/templates/html/statusbar/statusbars-manager.html
Normal file
35
common/templates/html/statusbar/statusbars-manager.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .tabs {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 23px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .body {
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] > .body {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] > .body {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
<div class="tabs"></div>
|
||||
<div class="body"></div>
|
||||
</div>
|
||||
59
common/templates/html/statusbar/statusbars-tab.html
Normal file
59
common/templates/html/statusbar/statusbars-tab.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: 23px;
|
||||
z-index: 3;
|
||||
padding: 0px;
|
||||
border-width: 1px 0px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] {
|
||||
background-color: #f8f8f8;
|
||||
border-color: #c9c9c9;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] {
|
||||
background-color: #252526;
|
||||
border-color: rgba(128, 128, 128, 0.35);
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .chrome-tabs-content {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .x-scrollbar__content {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .operation > button {
|
||||
padding: 0 3px;
|
||||
margin-left: 2px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] > .statusbar-close {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}" class="chrome-tabs">
|
||||
<div class="chrome-tabs-content">
|
||||
</div>
|
||||
<div class="operation statusbar-dropdown-menu">
|
||||
<button type="button" class="layui-btn layui-btn-xs m-btn tab-btn statusbar-btn">
|
||||
<i class="layui-icon layui-icon-addition"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="operation statusbar-close">
|
||||
<button type="button" class="layui-btn layui-btn-xs m-btn tab-btn statusbar-btn">
|
||||
<i class="layui-icon layui-icon-close"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
103
common/templates/html/workspace.html
Normal file
103
common/templates/html/workspace.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<style>
|
||||
div[m-id="{{d.mId}}"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .drag-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .drag-v-left {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .drag-v-right {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .sidebars-container {
|
||||
position: relative;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
display: none;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .sidebars-container > .sidebars {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .sidebars-container > .left-sidebars {
|
||||
border-width: 0px 1px 0px 0px;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .sidebars-container > .right-sidebars {
|
||||
border-width: 0px 0px 0px 1px;
|
||||
}
|
||||
|
||||
html[data-bs-theme=light] div[m-id="{{d.mId}}"] .sidebars-container > .sidebars {
|
||||
border-color: #c9c9c9;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
html[data-bs-theme=dark] div[m-id="{{d.mId}}"] .sidebars-container > .sidebars {
|
||||
border-color: rgba(128, 128, 128, 0.35);
|
||||
background-color: #252526;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .drag-h {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .drag-h > .editors {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
div[m-id="{{d.mId}}"] .drag-h > .statusbars {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<div m-id="{{d.mId}}">
|
||||
<div class="drag-v-left">
|
||||
<div class="sidebars-container">
|
||||
<div class="sidebars left-sidebars"></div>
|
||||
</div>
|
||||
<div class="drag-item">
|
||||
<div class="drag-v-right">
|
||||
<div class="drag-item">
|
||||
<div class="drag-h">
|
||||
<div class="editors"></div>
|
||||
<div class="statusbars"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebars-container">
|
||||
<div class="sidebars right-sidebars"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user