GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2025-12-12 09:10:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
Devaev Maxim 2020-07-18 10:51:20 +03:00
parent 325bf6b587
commit 6bd4fc769f
5 changed files with 125 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
web/kvm/index.html
View File

@ -328,6 +328,7 @@
<li class="right"><a class="menu-button" href="#"><img class="led-gray" data-dont-hide-menu id="hid-recorder-led" src="/share/svg/led-gear.svg">Macro &#8628;</a> <li class="right"><a class="menu-button" href="#"><img class="led-gray" data-dont-hide-menu id="hid-recorder-led" src="/share/svg/led-gear.svg">Macro &#8628;</a>
<div class="menu" data-dont-hide-menu> <div class="menu" data-dont-hide-menu>
<div class="text"><b>Record and play keyboard &amp; mouse actions<br></b><sub>For security reasons, the record will not saved on Pi-KVM</sub></div> <div class="text"><b>Record and play keyboard &amp; mouse actions<br></b><sub>For security reasons, the record will not saved on Pi-KVM</sub></div>
<hr>
<div class="buttons buttons-row"> <div class="buttons buttons-row">
<button class="row25" disabled data-force-hide-menu id="hid-recorder-record">&bull; Rec</button> <button class="row25" disabled data-force-hide-menu id="hid-recorder-record">&bull; Rec</button>
<button class="row25" disabled id="hid-recorder-stop">Stop</button> <button class="row25" disabled id="hid-recorder-stop">Stop</button>
@ -1188,56 +1189,59 @@
</tr> </tr>
</table><br> </table><br>
<div class="tabs"> <div class="tabs">
<input checked type="radio" name="about-tab-button" id="about-tab-meta-button"> <input checked type="radio" name="about-tab-button" id="about-tab-meta-button">
<label for="about-tab-meta-button">Meta</label> <label for="about-tab-meta-button">Meta</label>
<input type="radio" name="about-tab-button" id="about-tab-hw-button"> <div class="tab">
<label for="about-tab-hw-button">Hardware</label> <div class="code" id="about-meta"><span class="code-comment">No data</span>
<input type="radio" name="about-tab-button" id="about-tab-version-button"> </div>
<label for="about-tab-version-button">Version</label> </div>
<input type="radio" name="about-tab-button" id="about-tab-thanks-button"> <input type="radio" name="about-tab-button" id="about-tab-hw-button">
<label for="about-tab-thanks-button">Thanks</label> <label for="about-tab-hw-button">Hardware</label>
<div id="about-tab-meta-content"> <div class="tab">
<div class="code" id="about-meta"><span class="code-comment">No data</span></div> <div class="code" id="about-hw"><span class="code-comment">No data</span>
</div> </div>
<div id="about-tab-hw-content"> </div>
<div class="code" id="about-hw"><span class="code-comment">No data</span></div> <input type="radio" name="about-tab-button" id="about-tab-version-button">
</div> <label for="about-tab-version-button">Version</label>
<div id="about-tab-version-content"> <div class="tab">
<div class="code" id="about-version"><span class="code-comment">No data</span></div> <div class="code" id="about-version"><span class="code-comment">No data</span>
</div> </div>
<div id="about-tab-thanks-content"> </div>
<div class="code" id="about-thanks"><span class="code-comment">// These kind people donated money to the Pi-KVM project<br> <input type="radio" name="about-tab-button" id="about-tab-thanks-button">
// and supported the work on it. We are very grateful<br> <label for="about-tab-thanks-button">Thanks</label>
// for their help, and memorializing their names<br> <div class="tab">
// is the least we can do in gratitude.<br> <div class="code" id="about-thanks"><span class="code-comment">// These kind people donated money to the Pi-KVM project<br>
// If you also want to support this project,<br> // and supported the work on it. We are very grateful<br>
// you can use one of these services: // for their help, and memorializing their names<br>
<a target="_blank" href="https://www.patreon.com/pikvm">Patreon</a> // is the least we can do in gratitude.<br>
or <a target="_blank" href="https://www.paypal.me/mdevaev">PayPal</a>.</span> // If you also want to support this project,<br>
<ul> // you can use one of these services:
<li>Aleksei Brusianskii</li> <a target="_blank" href="https://www.patreon.com/pikvm">Patreon</a>
<li>Arthur Woimbée</li> or <a target="_blank" href="https://www.paypal.me/mdevaev">PayPal</a>.</span>
<li>Ben Gordon</li> <ul>
<li>Branden Shaulis</li> <li>Aleksei Brusianskii</li>
<li>Christof Maluck</li> <li>Arthur Woimbée</li>
<li>Corey Lista</li> <li>Ben Gordon</li>
<li>David Howell</li> <li>Branden Shaulis</li>
<li>Denis Yatsenko</li> <li>Christof Maluck</li>
<li>Ge Men</li> <li>Corey Lista</li>
<li>Grey Cynic</li> <li>David Howell</li>
<li>Jason Toland</li> <li>Denis Yatsenko</li>
<li>Jeff Bowman</li> <li>Ge Men</li>
<li>John McGovern</li> <li>Grey Cynic</li>
<li>Mark Gilbert</li> <li>Jason Toland</li>
<li>Mark Robinson</li> <li>Jeff Bowman</li>
<li>Mauricio Allende</li> <li>John McGovern</li>
<li>Michael Lynch</li> <li>Mark Gilbert</li>
<li>Samed Ozoglu</li> <li>Mark Robinson</li>
<li>Truman Kilen</li> <li>Mauricio Allende</li>
<li>Walter_Ego</li> <li>Michael Lynch</li>
</ul> <li>Samed Ozoglu</li>
</div> <li>Truman Kilen</li>
</div> <li>Walter_Ego</li>
</ul>
</div>
</div>
</div><br> </div><br>
<p class="text"> <p class="text">
Full documentation, source code, hardware schematics and legal information Full documentation, source code, hardware schematics and legal information

1
web/kvm/navbar-macro.pug
View File

@ -6,6 +6,7 @@ li(class="right")
div(class="text") div(class="text")
b Record and play keyboard &amp; mouse actions#[br] b Record and play keyboard &amp; mouse actions#[br]
sub For security reasons, the record will not saved on Pi-KVM sub For security reasons, the record will not saved on Pi-KVM
hr
div(class="buttons buttons-row") div(class="buttons buttons-row")
button(disabled data-force-hide-menu id="hid-recorder-record" class="row25") &bull; Rec button(disabled data-force-hide-menu id="hid-recorder-record" class="row25") &bull; Rec
button(disabled id="hid-recorder-stop" class="row25") Stop button(disabled id="hid-recorder-stop" class="row25") Stop

88
web/kvm/window-about.pug
View File

@ -1,3 +1,14 @@
mixin about_tab(name, title, checked=false)
- let button_id = `about-tab-${name}-button`
input(checked=checked type="radio" name="about-tab-button", id=button_id)
label(for=button_id) #{title}
div(class="tab")
div(id=`about-${name}` class="code")
if block
block
else
span(class="code-comment") No data
+window("about-window", "About", true, false) +window("about-window", "About", true, false)
div(id="about") div(id="about")
table table
@ -10,48 +21,41 @@
tr #[td(colspan="2" class="copyright") Copyright &copy; 2018 Pi-KVM Developers Team] tr #[td(colspan="2" class="copyright") Copyright &copy; 2018 Pi-KVM Developers Team]
br br
div(class="tabs") div(class="tabs")
each tab, index in ["Meta", "Hardware", "Version", "Thanks"] +about_tab("meta", "Meta", true)
- tab_id = `about-tab-${tab != "Hardware" ? tab.toLowerCase() : "hw"}-button` +about_tab("hw", "Hardware")
if index == 0 +about_tab("version", "Version")
input(checked type="radio" name="about-tab-button" id=tab_id)
else +about_tab("thanks", "Thanks")
input(type="radio" name="about-tab-button" id=tab_id) span(class="code-comment")
label(for=tab_id) #{tab} | // These kind people donated money to the Pi-KVM project#[br]
each tab in ["meta", "hw", "version"] | // and supported the work on it. We are very grateful#[br]
div(id=`about-tab-${tab}-content`) | // for their help, and memorializing their names#[br]
div(id=`about-${tab}` class="code") #[span(class="code-comment") No data] | // is the least we can do in gratitude.#[br]
div(id="about-tab-thanks-content") | // If you also want to support this project,#[br]
div(id="about-thanks" class="code") | // you can use one of these services:
span(class="code-comment") | #[a(target="_blank" href="https://www.patreon.com/pikvm") Patreon]
| // These kind people donated money to the Pi-KVM project#[br] | or #[a(target="_blank" href="https://www.paypal.me/mdevaev") PayPal].
| // and supported the work on it. We are very grateful#[br] ul
| // for their help, and memorializing their names#[br] li Aleksei Brusianskii
| // is the least we can do in gratitude.#[br] li Arthur Woimbée
| // If you also want to support this project,#[br] li Ben Gordon
| // you can use one of these services: li Branden Shaulis
| #[a(target="_blank" href="https://www.patreon.com/pikvm") Patreon] li Christof Maluck
| or #[a(target="_blank" href="https://www.paypal.me/mdevaev") PayPal]. li Corey Lista
ul li David Howell
li Aleksei Brusianskii li Denis Yatsenko
li Arthur Woimbée li Ge Men
li Ben Gordon li Grey Cynic
li Branden Shaulis li Jason Toland
li Christof Maluck li Jeff Bowman
li Corey Lista li John McGovern
li David Howell li Mark Gilbert
li Denis Yatsenko li Mark Robinson
li Ge Men li Mauricio Allende
li Grey Cynic li Michael Lynch
li Jason Toland li Samed Ozoglu
li Jeff Bowman li Truman Kilen
li John McGovern li Walter_Ego
li Mark Gilbert
li Mark Robinson
li Mauricio Allende
li Michael Lynch
li Samed Ozoglu
li Truman Kilen
li Walter_Ego
br br
p(class="text") p(class="text")
| Full documentation, source code, hardware schematics and legal information | Full documentation, source code, hardware schematics and legal information

9
web/share/css/kvm/about.css
View File

@ -41,13 +41,6 @@ div#about td.copyright {
font-size: 0.8em; font-size: 0.8em;
} }
div#about div#about-meta, div#about-hw, div#about-version, div#about-thanks { div#about div.tabs div.tab div.code {
height: 250px; height: 250px;
} }
#about-tab-meta-button:checked~#about-tab-meta-content,
#about-tab-hw-button:checked~#about-tab-hw-content,
#about-tab-version-button:checked~#about-tab-version-content,
#about-tab-thanks-button:checked~#about-tab-thanks-content {
display: block;
}

29
web/share/css/tabs.css
View File

@ -20,28 +20,45 @@
*****************************************************************************/ *****************************************************************************/
div.tabs>input[type="radio"] { div.tabs {
display: flex;
flex-wrap: wrap;
}
div.tabs input[type="radio"] {
display: none; display: none;
} }
div.tabs>div { div.tabs div.tab {
order: 99;
display: none; display: none;
border: var(--border-default-thin); border: var(--border-default-thin);
padding: 10px 10px; padding: 10px 10px;
width: 100%;
} }
div.tabs>label { div.tabs label {
display: inline-block; order: 1;
display: block;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
user-select: none; user-select: none;
border: var(--border-default-thin); border-top: var(--border-default-thin);
border-left: var(--border-default-thin);
padding: 4px 8px; padding: 4px 8px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
top: 1px; top: 1px;
} }
div.tabs>input[type="radio"]:checked+label { div.tabs label:last-of-type {
border-right: var(--border-default-thin);
}
div.tabs input[type="radio"]:checked+label {
background-color: var(--cs-control-default-bg); background-color: var(--cs-control-default-bg);
} }
div.tabs input[type="radio"]:checked+label+.tab {
display: block;
}