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 @@