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

pikvm/pikvm#631: option to hide navbar

Browse Source
This commit is contained in:
Maxim Devaev 2022-08-01 18:39:36 +03:00
parent 9c5fd210f2
commit 241bd6e19a
4 changed files with 55 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/kvm/index.html
View File

@ -743,10 +743,12 @@
<button class="window-button-close"><b>&times;</b></button> <button class="window-button-close"><b>&times;</b></button>
<button class="window-button-maximize">&#9744;</button> <button class="window-button-maximize">&#9744;</button>
<button class="window-button-original">&bull;</button> <button class="window-button-original">&bull;</button>
<button class="window-button-enter-full-tab">&#9650;</button>
<button class="window-button-full-screen">&#10530;</button> <button class="window-button-full-screen">&#10530;</button>
</div> </div>
<div id="stream-info"></div> <div id="stream-info"></div>
<div class="stream-box-offline" id="stream-box"><img id="stream-image" src="/share/png/blank-stream.png"> <div class="stream-box-offline" id="stream-box">
<button class="window-button-exit-full-tab">&#9660;</button><img id="stream-image" src="/share/png/blank-stream.png">
<video class="hidden" id="stream-video" autoplay playsinline muted></video> <video class="hidden" id="stream-video" autoplay playsinline muted></video>
<div id="stream-fullscreen-active"></div> <div id="stream-fullscreen-active"></div>
</div> </div>

2
web/kvm/window-stream.pug
View File

@ -7,11 +7,13 @@ div(id="stream-window" class="window window-resizable")
button(class="window-button-close") #[b &times;] button(class="window-button-close") #[b &times;]
button(class="window-button-maximize") &#9744; button(class="window-button-maximize") &#9744;
button(class="window-button-original") &bull; button(class="window-button-original") &bull;
button(class="window-button-enter-full-tab") &#9650;
button(class="window-button-full-screen") &#10530; button(class="window-button-full-screen") &#10530;
div(id="stream-info") div(id="stream-info")
div(id="stream-box" class="stream-box-offline") div(id="stream-box" class="stream-box-offline")
button(class="window-button-exit-full-tab") &#9660;
img(id="stream-image" src=`${png_dir}/blank-stream.png`) img(id="stream-image" src=`${png_dir}/blank-stream.png`)
video(id="stream-video" class="hidden" autoplay playsinline muted) video(id="stream-video" class="hidden" autoplay playsinline muted)
div(id="stream-fullscreen-active") div(id="stream-fullscreen-active")

34
web/share/css/window.css
View File

@ -74,6 +74,16 @@ div.window:-webkit-full-screen {
height: 100% !important; height: 100% !important;
padding: 0px !important; padding: 0px !important;
} }
div.window.window-full-tab {
border: 0px;
border-radius: 0px;
resize: none !important;
top: 0px !important;
left: 0px !important;
width: 100% !important;
height: 100% !important;
padding: 0px !important;
}
div.window div.window-header { div.window div.window-header {
overflow: hidden; overflow: hidden;
@ -112,6 +122,7 @@ div.window div.window-header-grabbed {
} }
div.window div.window-header button.window-button-full-screen, div.window div.window-header button.window-button-full-screen,
div.window div.window-header button.window-button-enter-full-tab,
div.window div.window-header button.window-button-original, div.window div.window-header button.window-button-original,
div.window div.window-header button.window-button-maximize, div.window div.window-header button.window-button-maximize,
div.window div.window-header button.window-button-close { div.window div.window-header button.window-button-close {
@ -126,6 +137,9 @@ div.window div.window-header button.window-button-close {
display: inline-block; display: inline-block;
} }
div.window div.window-header button.window-button-full-screen { div.window div.window-header button.window-button-full-screen {
right: 180px;
}
div.window div.window-header button.window-button-enter-full-tab {
right: 135px; right: 135px;
} }
div.window div.window-header button.window-button-original { div.window div.window-header button.window-button-original {
@ -138,6 +152,23 @@ div.window div.window-header button.window-button-close {
right: 0px; right: 0px;
} }
div.window button.window-button-exit-full-tab {
width: 50px;
height: 10px;
left: calc(50% - 25px);
font-size: 8px;
position: absolute;
opacity: 0.5;
border-radius: 0px;
visibility: hidden;
}
div.window button.window-button-exit-full-tab:hover {
opacity: 1;
}
div.window.window-full-tab button.window-button-exit-full-tab {
visibility: visible !important;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* iPad */ /* iPad */
div.window { div.window {
@ -150,6 +181,9 @@ div.window div.window-header button.window-button-close {
height: 35px !important; height: 35px !important;
} }
div.window div.window-header button.window-button-full-screen, div.window div.window-header button.window-button-full-screen,
div.window div.window-header button.window-button-enter-full-tab,
div.window div.window-header button.window-button-original,
div.window div.window-header button.window-button-maximize,
div.window div.window-header button.window-button-close { div.window div.window-header button.window-button-close {
height: 40px !important; height: 40px !important;
} }

16
web/share/js/wm.js
View File

@ -107,6 +107,22 @@ function __WindowManager() {
}); });
} }
let el_enter_full_tab_button = el_window.querySelector(".window-header .window-button-enter-full-tab");
let el_exit_full_tab_button = el_window.querySelector(".window-button-exit-full-tab");
if (el_enter_full_tab_button && el_exit_full_tab_button) {
el_enter_full_tab_button.title = "Stretch to the entire tab";
let toggle_full_tab = function(enabled) {
el_window.classList.toggle("window-full-tab", enabled);
__activateLastWindow(el_window);
let el_navbar = $("navbar");
if (el_navbar) {
tools.hidden.setVisible(el_navbar, !enabled);
}
};
tools.el.setOnClick(el_enter_full_tab_button, () => toggle_full_tab(true));
tools.el.setOnClick(el_exit_full_tab_button, () => toggle_full_tab(false));
}
let el_full_screen_button = el_window.querySelector(".window-header .window-button-full-screen"); let el_full_screen_button = el_window.querySelector(".window-header .window-button-full-screen");
if (el_full_screen_button && __getFullScreenFunction(el_window)) { if (el_full_screen_button && __getFullScreenFunction(el_window)) {
el_full_screen_button.title = "Go to full-screen mode"; el_full_screen_button.title = "Go to full-screen mode";