Make userlist state consistent on mobile and desktop

This commit is contained in:
Pavel Djundik 2018-06-27 10:05:37 +03:00
parent b5390f1ef3
commit d63f0ccc50
3 changed files with 25 additions and 19 deletions

View file

@ -510,8 +510,8 @@ kbd {
opacity: 1;
}
#viewport.rt #chat .userlist {
display: none;
#viewport.userlist-open #chat .userlist {
display: flex;
}
#sidebar {
@ -1051,14 +1051,10 @@ background on hover (unless active) */
-webkit-overflow-scrolling: touch;
}
#viewport.rt .chat {
right: 0;
}
#chat .userlist {
border-left: 1px solid #e7e7e7;
width: 180px;
display: flex;
display: none;
flex-direction: column;
flex-shrink: 0;
touch-action: pan-y;
@ -2413,8 +2409,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
transition: transform 0.2s;
}
#viewport.rt #chat .userlist {
display: flex;
#viewport.userlist-open #chat .userlist {
transform: translateX(0);
}

View file

@ -28,10 +28,6 @@ $(function() {
const viewport = $("#viewport");
function storeSidebarVisibility(name, state) {
if ($(window).outerWidth() < utils.mobileViewportPixels) {
return;
}
storage.set(name, state);
utils.togglePreviewMoreButtonsIfNeeded();
@ -40,20 +36,26 @@ $(function() {
// If sidebar overlay is visible and it is clicked, close the sidebar
$("#sidebar-overlay").on("click", () => {
slideoutMenu.toggle(false);
storeSidebarVisibility("thelounge.state.sidebar", false);
if ($(window).outerWidth() >= utils.mobileViewportPixels) {
storeSidebarVisibility("thelounge.state.sidebar", false);
}
});
$("#windows").on("click", "button.lt", () => {
const isOpen = !slideoutMenu.isOpen();
slideoutMenu.toggle(isOpen);
storeSidebarVisibility("thelounge.state.sidebar", isOpen);
if ($(window).outerWidth() >= utils.mobileViewportPixels) {
storeSidebarVisibility("thelounge.state.sidebar", isOpen);
}
});
viewport.on("click", ".rt", function() {
const isOpen = !viewport.hasClass("rt");
const isOpen = !viewport.hasClass("userlist-open");
viewport.toggleClass("rt", isOpen);
viewport.toggleClass("userlist-open", isOpen);
chat.find(".chan.active .chat").trigger("keepToBottom");
storeSidebarVisibility("thelounge.state.userlist", isOpen);

View file

@ -41,12 +41,21 @@ socket.on("init", function(data) {
slideoutMenu.enable();
const viewport = $("#viewport");
const viewportWidth = $(window).outerWidth();
let isUserlistOpen = storage.get("thelounge.state.userlist");
if ($(window).outerWidth() >= utils.mobileViewportPixels) {
if (viewportWidth >= utils.mobileViewportPixels) {
slideoutMenu.toggle(storage.get("thelounge.state.sidebar") === "true");
viewport.toggleClass("rt", storage.get("thelounge.state.userlist") === "true");
}
// If The Lounge is opened on a small screen (less than 1024px), and we don't have stored
// user list state, close it by default
if (viewportWidth >= 1024 && isUserlistOpen !== "true" && isUserlistOpen !== "false") {
isUserlistOpen = "true";
}
viewport.toggleClass("userlist-open", isUserlistOpen === "true");
$(document.body).removeClass("signed-out");
$("#loading").remove();
$("#sign-in").remove();