Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Preview windows when alt-tabbing #140

Merged
merged 1 commit into from
Jan 4, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions html5/css/menu-skin.css
Original file line number Diff line number Diff line change
Expand Up @@ -127,3 +127,53 @@ SOFTWARE.
;
}

#window_preview {
display: none;
width: 65%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 80000;
background-color: rgba(0, 0, 0, 0.7);
box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.5);
border-radius: 2px;
padding: 20px;
}

.slick-track {
display: flex !important;
}

.slick-slide {
margin: 7px;
}

.slick-current {
border-width: 3px;
box-shadow: 0px 0px 20px rgba(255, 255, 255, 65%);
border-radius: 2px;
border: rgba(255, 255, 255, 50%);
border-style: solid;

}

.window-preview-item-container {
display: inline-block;
height: 100%;
}

.window-preview-item-img {
display: inline-block;
width: 100%;
height: 100%;
}

.window-preview-item-text {
color: #FFF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: auto;
padding: 4px;
}
119 changes: 119 additions & 0 deletions html5/css/slick.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
/* Slider */
.slick-slider
{
position: relative;

display: block;
box-sizing: border-box;

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-list
{
position: relative;

display: block;
overflow: hidden;

margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.slick-track
{
position: relative;
top: 0;
left: 0;

display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;

content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}

.slick-slide
{
display: none;
float: left;

height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;

height: auto;

border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
50 changes: 13 additions & 37 deletions html5/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,10 @@
<link rel="stylesheet" type="text/css" href="css/menu-skin.css"/>
<link rel="stylesheet" type="text/css" href="css/icon.css"/>

<!-- slick carousel for window preview feature -->
<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<script type="text/javascript" src="js/lib/slick.js"></script>

<!-- simple-keyboard -->
<script type="application/javascript" src="js/lib/simple-keyboard.js"></script>
<link rel="stylesheet" href="css/simple-keyboard.css">
Expand Down Expand Up @@ -152,6 +156,8 @@
<img id="shadow_pointer" alt="shadow pointer">
</div>

<div id="window_preview"></div>

<div class="notifications">
</div>

Expand Down Expand Up @@ -1376,6 +1382,13 @@ <h2>Xpra Bug Report</h2>
toggle_keyboard();
});

// Configure Xpra tray window list right click behavior.
$("#open_windows_list").siblings("a").on('mousedown', (e) => {
if (e.buttons === 2) {
client.toggle_window_preview();
}
});

const screen_change_events = "webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange";
$(document).on(screen_change_events, function () {
const f_el = document.fullscreenElement || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement;
Expand Down Expand Up @@ -1415,43 +1428,6 @@ <h2>Xpra Bug Report</h2>
});
}

window.inAltTab = false;
window.altTabSelIndex = 0;

// Alt-Tab window switching support when in fullscreen mode.
window.addEventListener('keydown', (event) => {
if (event.type === 'keydown' && event.altKey && event.code === 'Tab') {
console.log("alt-tab pressed.");
window.inAltTab = true;

$('.Menu a[data-icon="filter"]').parent()[0].showMenu();

var window_ids = Object.keys(client.id_to_window);
window.altTabSelIndex = (window.altTabSelIndex + 1) % window_ids.length;
console.log(`alt-tab window ${window.altTabSelIndex + 1}/${window_ids.length}`);

var win = client.id_to_window[window_ids[window.altTabSelIndex]];

// Skip over the DESKTOP type windows.
if (client.is_window_desktop(win)) {
window.altTabSelIndex = (window.altTabSelIndex + 1) % window_ids.length;
win = client.id_to_window[window_ids[window.altTabSelIndex]];
}

client._window_set_focus(win);
}
});

window.addEventListener('keyup', (event) => {
if (event.type === 'keyup' && event.code === 'AltLeft' && window.inAltTab) {
console.log("alt-tab released.");

window.inAltTab = false;

$('.Menu a[data-icon="filter"]').parent()[0].hideMenu();
}
});

$(document).ready(function() {
clog("document is ready, browser is", navigator.platform, "64-bit:", Utilities.is_64bit());
const xhr = new XMLHttpRequest();
Expand Down
Loading