Merge pull request #2599 from thelounge/xpaw/userlist
Make userlist state consistent on mobile and desktop
This commit is contained in:
commit
21c4dea8a9
@ -510,8 +510,8 @@ kbd {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#viewport.rt #chat .userlist {
|
#viewport.userlist-open #chat .userlist {
|
||||||
display: none;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar {
|
#sidebar {
|
||||||
@ -1051,14 +1051,10 @@ background on hover (unless active) */
|
|||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
|
|
||||||
#viewport.rt .chat {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#chat .userlist {
|
#chat .userlist {
|
||||||
border-left: 1px solid #e7e7e7;
|
border-left: 1px solid #e7e7e7;
|
||||||
width: 180px;
|
width: 180px;
|
||||||
display: flex;
|
display: none;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
touch-action: pan-y;
|
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;
|
transition: transform 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#viewport.rt #chat .userlist {
|
#viewport.userlist-open #chat .userlist {
|
||||||
display: flex;
|
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -28,10 +28,6 @@ $(function() {
|
|||||||
const viewport = $("#viewport");
|
const viewport = $("#viewport");
|
||||||
|
|
||||||
function storeSidebarVisibility(name, state) {
|
function storeSidebarVisibility(name, state) {
|
||||||
if ($(window).outerWidth() < utils.mobileViewportPixels) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
storage.set(name, state);
|
storage.set(name, state);
|
||||||
|
|
||||||
utils.togglePreviewMoreButtonsIfNeeded();
|
utils.togglePreviewMoreButtonsIfNeeded();
|
||||||
@ -40,20 +36,26 @@ $(function() {
|
|||||||
// If sidebar overlay is visible and it is clicked, close the sidebar
|
// If sidebar overlay is visible and it is clicked, close the sidebar
|
||||||
$("#sidebar-overlay").on("click", () => {
|
$("#sidebar-overlay").on("click", () => {
|
||||||
slideoutMenu.toggle(false);
|
slideoutMenu.toggle(false);
|
||||||
|
|
||||||
|
if ($(window).outerWidth() >= utils.mobileViewportPixels) {
|
||||||
storeSidebarVisibility("thelounge.state.sidebar", false);
|
storeSidebarVisibility("thelounge.state.sidebar", false);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#windows").on("click", "button.lt", () => {
|
$("#windows").on("click", "button.lt", () => {
|
||||||
const isOpen = !slideoutMenu.isOpen();
|
const isOpen = !slideoutMenu.isOpen();
|
||||||
|
|
||||||
slideoutMenu.toggle(isOpen);
|
slideoutMenu.toggle(isOpen);
|
||||||
|
|
||||||
|
if ($(window).outerWidth() >= utils.mobileViewportPixels) {
|
||||||
storeSidebarVisibility("thelounge.state.sidebar", isOpen);
|
storeSidebarVisibility("thelounge.state.sidebar", isOpen);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
viewport.on("click", ".rt", function() {
|
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");
|
chat.find(".chan.active .chat").trigger("keepToBottom");
|
||||||
storeSidebarVisibility("thelounge.state.userlist", isOpen);
|
storeSidebarVisibility("thelounge.state.userlist", isOpen);
|
||||||
|
|
||||||
|
@ -41,12 +41,21 @@ socket.on("init", function(data) {
|
|||||||
slideoutMenu.enable();
|
slideoutMenu.enable();
|
||||||
|
|
||||||
const viewport = $("#viewport");
|
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");
|
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");
|
$(document.body).removeClass("signed-out");
|
||||||
$("#loading").remove();
|
$("#loading").remove();
|
||||||
$("#sign-in").remove();
|
$("#sign-in").remove();
|
||||||
|
Loading…
Reference in New Issue
Block a user