lzh/noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #725 from CendioOssman/rightbar

Browse Source 
Allow control bar to be moved to the right side
This commit is contained in:
Samuel Mannehed
2016-11-29 13:23:02 +01:00
committed by GitHub
parent 77bc3a551b cf348b7892
commit a8cc32d8b9
3 changed files with 118 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/styles/base.css
+60 -10
View File
@@ -244,37 +244,59 @@ input[type=button]:active, select:active {
:root.noVNC_connected #noVNC_control_bar_anchor.noVNC_idle {
opacity: 0.8;
}
#noVNC_control_bar_anchor.noVNC_right {
left: auto;
right: 0;
}
#noVNC_control_bar {
position: relative;
/* left: calc(-35px - 10px - 5px - 30px), but IE doesn't animate calc */
left: -80px;
left: -100%;
transition: 0.5s ease-in-out;
background-color: rgb(110, 132, 163);
border-radius: 0 10px 10px 0;
/* The extra border is to get a proper shadow */
border-color: rgb(110, 132, 163);
border-style: solid;
border-width: 0 0 0 30px;
}
#noVNC_control_bar.noVNC_open {
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
left: 0;
}
#noVNC_control_bar::before {
/* This extra element is to get a proper shadow */
content: "";
position: absolute;
z-index: -1;
height: 100%;
width: 30px;
left: -30px;
transition: box-shadow 0.5s ease-in-out;
}
#noVNC_control_bar.noVNC_open::before {
box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
}
.noVNC_right #noVNC_control_bar {
left: 100%;
border-radius: 10px 0 0 10px;
}
.noVNC_right #noVNC_control_bar.noVNC_open {
left: 0;
}
.noVNC_right #noVNC_control_bar::before {
visibility: hidden;
}
#noVNC_control_bar_handle {
position: absolute;
right: -15px;
left: -15px;
top: 0;
transform: translateY(35px);
width: 50px;
width: calc(100% + 30px);
height: 50px;
z-index: -2;
cursor: pointer;
border-radius: 0 5px 5px 0;
border-radius: 5px;
background-color: rgb(83, 99, 122);
background-image: url("../images/handle_bg.svg");
background-repeat: no-repeat;
@@ -283,7 +305,7 @@ input[type=button]:active, select:active {
}
#noVNC_control_bar_handle:after {
content: "";
transition: 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
background: url("../images/handle.svg");
position: absolute;
top: 22px; /* (50px-6px)/2 */
@@ -297,6 +319,17 @@ input[type=button]:active, select:active {
:root:not(.noVNC_connected) #noVNC_control_bar_handle {
display: none;
}
.noVNC_right #noVNC_control_bar_handle {
background-position: left;
}
.noVNC_right #noVNC_control_bar_handle:after {
left: 5px;
right: 0;
transform: translateX(1px) rotate(180deg);
}
.noVNC_right #noVNC_control_bar.noVNC_open #noVNC_control_bar_handle:after {
transform: none;
}
#noVNC_control_bar_handle div {
position: absolute;
right: -35px;
@@ -307,6 +340,10 @@ input[type=button]:active, select:active {
:root:not(.noVNC_touch) #noVNC_control_bar_handle div {
display: none;
}
.noVNC_right #noVNC_control_bar_handle div {
left: -35px;
right: auto;
}
#noVNC_control_bar .noVNC_scroll {
max-height: 100vh; /* Chrome is buggy with 100% */
@@ -314,6 +351,9 @@ input[type=button]:active, select:active {
overflow-y: auto;
padding: 0 10px 0 5px;
}
.noVNC_right #noVNC_control_bar .noVNC_scroll {
padding: 0 5px 0 10px;
}
/* General button style */
.noVNC_button {
@@ -379,6 +419,16 @@ input[type=button]:active, select:active {
opacity: 1;
transform: translateX(75px);
}
.noVNC_right .noVNC_vcenter {
left: auto;
right: 0;
}
.noVNC_right .noVNC_panel {
transform: translateX(-25px);
}
.noVNC_right .noVNC_panel.noVNC_open {
transform: translateX(-75px);
}
.noVNC_panel hr {
border: none;