From f85699b314e6fdb28315613cc5909b68bcd33a51 Mon Sep 17 00:00:00 2001 From: Maximilian Mader Date: Tue, 9 Aug 2022 23:30:32 +0200 Subject: [PATCH] Add a user and room list overlay for the smartphone UI --- files/style/be.bastelstu.chat.scss | 58 +++++----- files_wcf/js/Bastelstu.be/Chat/Helper.js | 18 +++- .../Chat/Ui/Settings/RoomListButton.js | 101 ++++++++++++++++++ .../Chat/Ui/Settings/SmiliesButton.js | 8 +- .../Chat/Ui/Settings/UserListButton.js | 96 +++++++++++++++++ language/de.xml | 2 + language/en.xml | 2 + templates/quickSettings.tpl | 2 + templates/smileyPicker.tpl | 2 +- 9 files changed, 258 insertions(+), 31 deletions(-) create mode 100644 files_wcf/js/Bastelstu.be/Chat/Ui/Settings/RoomListButton.js create mode 100644 files_wcf/js/Bastelstu.be/Chat/Ui/Settings/UserListButton.js diff --git a/files/style/be.bastelstu.chat.scss b/files/style/be.bastelstu.chat.scss index b2d7cd6..d6bf752 100644 --- a/files/style/be.bastelstu.chat.scss +++ b/files/style/be.bastelstu.chat.scss @@ -495,30 +495,21 @@ $chatEmbedMaxWidth: 400px; margin-left: 5px; } - #smileyPickerContainer { - #smilies-text { - @if variable_exists(wcfContentContainerBackground) { - background-color: $wcfContentContainerBackground; - } @else { - // Compatibility with API_VERSION 3.0 - background-color: rgba(255, 255, 255, 1); - } + #chatUserList, + [data-box-identifier='be.bastelstu.chat.roomListSidebar'] { + .modalCloseButton { + margin: 0 -10px -20px -10px; + } + } - border: 1px solid $wcfContentBorderInner; - padding: 20px; - margin-top: 20px; - margin-bottom: 20px; - - > .smileyList { - overflow: auto; - } + @include screen-md-down { + #smileyPickerContainer[data-show='true'] > div { + margin: 0; } - #smileyPickerCloseButton { - display: none; - } - - @include screen-md-down { + #smileyPickerContainer, + #chatUserList, + [data-box-identifier='be.bastelstu.chat.roomListSidebar'] { &[data-show='true'] { position: fixed; top: 0; @@ -530,7 +521,9 @@ $chatEmbedMaxWidth: 400px; flex-direction: column; pointer-events: all; - #smileyPickerCloseButton { + background-color: $wcfContentBackground; + + .modalCloseButton { background-color: $wcfSidebarBackground; color: $wcfSidebarLink; display: block; @@ -540,12 +533,11 @@ $chatEmbedMaxWidth: 400px; cursor: pointer; } - #smilies-text { + > div { border-top: none; border-right: none; border-left: none; - margin: 0; height: 0; flex: 1 1 auto; position: relative; @@ -576,6 +568,24 @@ $chatEmbedMaxWidth: 400px; } } + #smileyPickerContainer { + > .messageTabMenuContent { + background-color: $wcfContentContainerBackground; + border: 1px solid $wcfContentBorderInner; + padding: 20px; + margin-top: 20px; + margin-bottom: 20px; + + > .smileyList { + overflow: auto; + } + } + + .modalCloseButton { + display: none; + } + } + #chatAttachmentUploadDialog { .attachmentPreview { text-align: center; diff --git a/files_wcf/js/Bastelstu.be/Chat/Helper.js b/files_wcf/js/Bastelstu.be/Chat/Helper.js index 392f1c3..3f65b0e 100644 --- a/files_wcf/js/Bastelstu.be/Chat/Helper.js +++ b/files_wcf/js/Bastelstu.be/Chat/Helper.js @@ -1,10 +1,10 @@ /* - * Copyright (c) 2010-2021 Tim Düsterhus. + * Copyright (c) 2010-2022 Tim Düsterhus. * * Use of this software is governed by the Business Source License * included in the LICENSE file. * - * Change Date: 2026-03-10 + * Change Date: 2026-08-10 * * On the date above, in accordance with the Business Source * License, use of this software will be governed by version 2 @@ -377,6 +377,20 @@ define(['WoltLabSuite/Core/Date/Util', 'WoltLabSuite/Core/Language'], function ( return out } + + static getElementSiblings(element) { + if (!element || !element.parentNode) { + return + } + + const children = [ ...element.parentNode.children ] + const index = children.indexOf(element); + + return [ + ...children.slice(0, index), + ...children.slice(index + 1) + ] + } } return Helper diff --git a/files_wcf/js/Bastelstu.be/Chat/Ui/Settings/RoomListButton.js b/files_wcf/js/Bastelstu.be/Chat/Ui/Settings/RoomListButton.js new file mode 100644 index 0000000..3835311 --- /dev/null +++ b/files_wcf/js/Bastelstu.be/Chat/Ui/Settings/RoomListButton.js @@ -0,0 +1,101 @@ +/* + * Copyright (c) 2010-2022 Tim Düsterhus. + * + * Use of this software is governed by the Business Source License + * included in the LICENSE file. + * + * Change Date: 2026-08-10 + * + * On the date above, in accordance with the Business Source + * License, use of this software will be governed by version 2 + * or later of the General Public License. + */ + +define([ + '../../Helper', + './Button', + 'WoltLabSuite/Core/Dom/Util', + 'WoltLabSuite/Core/Language', + 'WoltLabSuite/Core/Ui/Screen' +], function ( + Helper, + Button, + DomUtil, + Language, + UiScreen +) { + 'use strict' + + const DEPENDENCIES = [].concat(Button.DEPENDENCIES || []) + class RoomListButton extends Button { + constructor(element, ...superDeps) { + super(element, ...superDeps) + + this.roomList = document.querySelector(`[data-box-identifier='be.bastelstu.chat.roomListSidebar']`) + if (!this.roomList) { + element.remove() + return + } + + this.open = false + this.sidebar = document.querySelector('.sidebar') + + UiScreen.on('screen-xs', { + match: () => this.enableMobile(), + unmatch: () => this.disableMobile(), + setup: () => this.enableMobile(), + }) + } + + enableMobile() { + this.element.parentElement.hidden = false + } + + disableMobile() { + if (this.open) { + this.show(false) + } + + this.element.parentElement.hidden = true + } + + show(doShow = true) { + if (doShow) { + this.open = true + this.sidebar.style.setProperty('display', 'contents', ''); + + for (let sibling of Helper.getElementSiblings(this.roomList)) { + DomUtil.hide(sibling) + } + + this.closeButton = document.createElement('span') + this.closeButton.classList.add('modalCloseButton') + this.closeButton.innerText = Language.get('wcf.global.button.close') + this.closeButton.addEventListener('click', () => this.show(false)) + this.roomList.appendChild(this.closeButton) + + this.roomList.dataset.show = 'true' + } + else { + delete this.roomList.dataset.show + this.closeButton.remove() + + for (let sibling of Helper.getElementSiblings(this.roomList)) { + DomUtil.show(sibling) + } + + this.sidebar.style.removeProperty('display') + this.open = false + } + } + + async onClick(event) { + super.onClick(event) + + this.show(!this.open) + } + } + RoomListButton.DEPENDENCIES = DEPENDENCIES + + return RoomListButton +}) diff --git a/files_wcf/js/Bastelstu.be/Chat/Ui/Settings/SmiliesButton.js b/files_wcf/js/Bastelstu.be/Chat/Ui/Settings/SmiliesButton.js index e2f1a20..c58280a 100644 --- a/files_wcf/js/Bastelstu.be/Chat/Ui/Settings/SmiliesButton.js +++ b/files_wcf/js/Bastelstu.be/Chat/Ui/Settings/SmiliesButton.js @@ -1,10 +1,10 @@ /* - * Copyright (c) 2010-2021 Tim Düsterhus. + * Copyright (c) 2010-2022 Tim Düsterhus. * * Use of this software is governed by the Business Source License * included in the LICENSE file. * - * Change Date: 2026-03-10 + * Change Date: 2026-08-10 * * On the date above, in accordance with the Business Source * License, use of this software will be governed by version 2 @@ -97,7 +97,7 @@ define(['./ToggleButton', 'WoltLabSuite/Core/Ui/Screen'], function ( enableMobile() { this.mobile = true - elHide(this.element) + elHide(this.element.parentElement) elShow(this.shadowToggleButton) // Do not show the overlay when the viewport changes @@ -114,7 +114,7 @@ define(['./ToggleButton', 'WoltLabSuite/Core/Ui/Screen'], function ( disableMobile() { this.mobile = false - elShow(this.element) + elShow(this.element.parentElement) elHide(this.shadowToggleButton) UiScreen.scrollEnable() diff --git a/files_wcf/js/Bastelstu.be/Chat/Ui/Settings/UserListButton.js b/files_wcf/js/Bastelstu.be/Chat/Ui/Settings/UserListButton.js new file mode 100644 index 0000000..6061bd9 --- /dev/null +++ b/files_wcf/js/Bastelstu.be/Chat/Ui/Settings/UserListButton.js @@ -0,0 +1,96 @@ +/* + * Copyright (c) 2010-2022 Tim Düsterhus. + * + * Use of this software is governed by the Business Source License + * included in the LICENSE file. + * + * Change Date: 2026-08-10 + * + * On the date above, in accordance with the Business Source + * License, use of this software will be governed by version 2 + * or later of the General Public License. + */ + +define([ + '../../Helper', + './Button', + 'WoltLabSuite/Core/Dom/Util', + 'WoltLabSuite/Core/Language', + 'WoltLabSuite/Core/Ui/Screen' +], function ( + Helper, + Button, + DomUtil, + Language, + UiScreen +) { + 'use strict' + + const DEPENDENCIES = [].concat(Button.DEPENDENCIES || []) + class UserListButton extends Button { + constructor(element, ...superDeps) { + super(element, ...superDeps) + + this.open = false + this.userList = document.getElementById('chatUserList') + this.sidebar = document.querySelector('.sidebar') + + UiScreen.on('screen-xs', { + match: () => this.enableMobile(), + unmatch: () => this.disableMobile(), + setup: () => this.enableMobile(), + }) + } + + enableMobile() { + this.element.parentElement.hidden = false + } + + disableMobile() { + if (this.open) { + this.show(false) + } + + this.element.parentElement.hidden = true + } + + show(doShow = true) { + if (doShow) { + this.open = true + this.sidebar.style.setProperty('display', 'contents', ''); + + for (let sibling of Helper.getElementSiblings(this.userList)) { + DomUtil.hide(sibling) + } + + this.closeButton = document.createElement('span') + this.closeButton.classList.add('modalCloseButton') + this.closeButton.innerText = Language.get('wcf.global.button.close') + this.closeButton.addEventListener('click', () => this.show(false)) + this.userList.appendChild(this.closeButton) + + this.userList.dataset.show = 'true' + } + else { + delete this.userList.dataset.show + this.closeButton.remove() + + for (let sibling of Helper.getElementSiblings(this.userList)) { + DomUtil.show(sibling) + } + + this.sidebar.style.removeProperty('display') + this.open = false + } + } + + async onClick(event) { + super.onClick(event) + + this.show(!this.open) + } + } + UserListButton.DEPENDENCIES = DEPENDENCIES + + return UserListButton +}) diff --git a/language/de.xml b/language/de.xml index 090c6a8..c0fa35b 100644 --- a/language/de.xml +++ b/language/de.xml @@ -124,6 +124,8 @@ + + diff --git a/language/en.xml b/language/en.xml index b9bf422..8a865b9 100644 --- a/language/en.xml +++ b/language/en.xml @@ -124,6 +124,8 @@ + + diff --git a/templates/quickSettings.tpl b/templates/quickSettings.tpl index 83da260..033fcc7 100644 --- a/templates/quickSettings.tpl +++ b/templates/quickSettings.tpl @@ -4,6 +4,8 @@
  • {lang}chat.room.button.fullscreen{/lang}
  • {lang}chat.room.button.notifications{/lang}
  • {lang}chat.room.button.autoscroll{/lang}
    • + + {event name='buttons'} diff --git a/templates/smileyPicker.tpl b/templates/smileyPicker.tpl index f1d70e1..a68eb0b 100644 --- a/templates/smileyPicker.tpl +++ b/templates/smileyPicker.tpl @@ -1,6 +1,6 @@ {if MODULE_SMILEY && !$smileyCategories|empty} {/if} \ No newline at end of file