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:
John Livingston
2024-07-29 18:58:02 +02:00
parent 34da786b65
commit 074e688ed8
20 changed files with 496 additions and 32 deletions

View File

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

View 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()
}
})
}
}

View 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;
}
}
}