supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2599 from thelounge/xpaw/userlist

Browse Source 
Make userlist state consistent on mobile and desktop
This commit is contained in:
Jérémie Astori 2018-07-06 01:29:23 -04:00 committed by GitHub
commit 21c4dea8a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/css/style.css
View File

@ -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);
} }

18
client/js/lounge.js
View File

@ -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);
storeSidebarVisibility("thelounge.state.sidebar", false);
if ($(window).outerWidth() >= utils.mobileViewportPixels) {
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);
storeSidebarVisibility("thelounge.state.sidebar", isOpen);
if ($(window).outerWidth() >= utils.mobileViewportPixels) {
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);

13
client/js/socket-events/init.js
View File

@ -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();