New moderator app WIP:
* #144: moderator notes WIP, * plugin size: adding an API, * refactoring the code from the task app, to create a new MUC App system.
This commit is contained in:
@ -28,6 +28,11 @@ export default () => {
|
||||
<symbol id="icon-square-poll-horizontal" viewBox="0 0 448 512">
|
||||
<path d="M448 96c0-35.3-28.7-64-64-64L64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320zM256 160c0 17.7-14.3 32-32 32l-96 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l96 0c17.7 0 32 14.3 32 32zm64 64c17.7 0 32 14.3 32 32s-14.3 32-32 32l-192 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l192 0zM192 352c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0c17.7 0 32 14.3 32 32z"/>
|
||||
</symbol>
|
||||
|
||||
<!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
|
||||
<symbol id="icon-note-sticky" viewBox="0 0 448 512">
|
||||
<path d="M64 80c-8.8 0-16 7.2-16 16l0 320c0 8.8 7.2 16 16 16l224 0 0-80c0-17.7 14.3-32 32-32l80 0 0-224c0-8.8-7.2-16-16-16L64 80zM288 480L64 480c-35.3 0-64-28.7-64-64L0 96C0 60.7 28.7 32 64 32l320 0c35.3 0 64 28.7 64 64l0 224 0 5.5c0 17-6.7 33.3-18.7 45.3l-90.5 90.5c-12 12-28.3 18.7-45.3 18.7l-5.5 0z"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
`
|
||||
}
|
||||
|
77
conversejs/custom/shared/components/muc-app.js
Normal file
77
conversejs/custom/shared/components/muc-app.js
Normal file
@ -0,0 +1,77 @@
|
||||
// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import { CustomElement } from 'shared/components/element.js'
|
||||
import { api, _converse } from '@converse/headless'
|
||||
import './styles/muc-app.scss'
|
||||
|
||||
/**
|
||||
* Base class for MUC App custom elements (task app, notes app, ...).
|
||||
* This is an abstract class, should not be called directly.
|
||||
*/
|
||||
export class MUCApp extends CustomElement {
|
||||
enableSettingName = undefined // must be overloaded
|
||||
sessionStorangeShowKey = undefined // must be overloaded
|
||||
|
||||
static get properties () {
|
||||
return {
|
||||
model: { type: Object, attribute: true }, // mucModel
|
||||
show: { type: Boolean, attribute: false }
|
||||
}
|
||||
}
|
||||
|
||||
async initialize () {
|
||||
this.classList.add('livechat-converse-muc-app')
|
||||
this.show = this.enableSettingName &&
|
||||
api.settings.get(this.enableSettingName) &&
|
||||
this.sessionStorangeShowKey &&
|
||||
(window.sessionStorage?.getItem?.(this.sessionStorangeShowKey) === '1')
|
||||
|
||||
// we listen for livechatSizeChanged event,
|
||||
// and close all apps except the first if small or medium width.
|
||||
// Note: this will also be triggered when we first open the page
|
||||
this.listenTo(_converse, 'livechatSizeChanged', () => {
|
||||
if (!this.show || !api.livechat_size?.width_is(['small', 'medium'])) {
|
||||
return
|
||||
}
|
||||
// are we the first opened app?
|
||||
for (const el of document.querySelectorAll('.livechat-converse-muc-app')) {
|
||||
if (el === this) { break }
|
||||
if (!el.show) { continue }
|
||||
console.debug('The livechat size is small or medium, there is already an opened app, so closing myself', this)
|
||||
// ok, there is already an opened app.
|
||||
this.toggleApp() // we know we are open
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render () { // must be overloaded.
|
||||
return ''
|
||||
}
|
||||
|
||||
toggleApp () {
|
||||
this.show = !this.show
|
||||
if (this.sessionStorangeShowKey) {
|
||||
window.sessionStorage?.setItem?.(this.sessionStorangeShowKey, this.show ? '1' : '')
|
||||
}
|
||||
|
||||
if (
|
||||
this.show &&
|
||||
api.livechat_size?.width_is(['small', 'medium'])
|
||||
) {
|
||||
// When showing an App, if the screen width is small or medium, we hide the others.
|
||||
this._closeOtherApps()
|
||||
}
|
||||
}
|
||||
|
||||
_closeOtherApps () {
|
||||
document.querySelectorAll('.livechat-converse-muc-app').forEach((el) => {
|
||||
if (el !== this && el.show) {
|
||||
console.debug('Closing another app, because livechat width is small or medium', el)
|
||||
el.toggleApp()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
51
conversejs/custom/shared/components/styles/muc-app.scss
Normal file
51
conversejs/custom/shared/components/styles/muc-app.scss
Normal file
@ -0,0 +1,51 @@
|
||||
/*
|
||||
* SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only
|
||||
*/
|
||||
|
||||
.conversejs {
|
||||
.livechat-converse-muc-app {
|
||||
border: var(--occupants-border-left);
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
flex: 0 1 100%;
|
||||
padding: var(--occupants-padding);
|
||||
|
||||
.livechat-converse-muc-app-header {
|
||||
column-gap: 0.25em;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
font-family: var(--heading-font);
|
||||
padding-left: 0;
|
||||
margin-right: 1em;
|
||||
width: 100%;
|
||||
|
||||
h5 {
|
||||
color: var(--groupchats-header-color-dark);
|
||||
display: inline;
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.livechat-converse-muc-app-close {
|
||||
background: unset;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.livechat-converse-muc-app-body {
|
||||
padding-right: 2em; // let some place for the scrollbar.
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&[livechat-converse-root-width="small"],
|
||||
&[livechat-converse-root-width="medium"] {
|
||||
converse-muc-chatarea .livechat-converse-muc-app:not(.hidden) ~ * {
|
||||
// on small and medium width, we hide all subsequent siblings of the app
|
||||
// (when app is not hidden)
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
Reference in New Issue
Block a user