matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Task lists WIP:

Browse Source 
* front-end: task are no more in a dialog
This commit is contained in:
John Livingston 2024-05-11 17:37:20 +02:00
parent 8aa12eb575
commit d6aefb61c4
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
13 changed files with 138 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
conversejs/builtin.ts
View File

@ -190,6 +190,13 @@ async function initConverse (
params.livechat_mini_muc_head = true // we must replace the muc-head by the custom buttons toolbar.
}
if (chatIncludeMode === 'peertube-video' || chatIncludeMode === 'peertube-fullpage') {
// We enable task list only if we are in the peertube interface.
// Technically it would work in 'chat-only' mode, but i don't want to add too many things to test
// (and i now there is some CSS bugs in the task list).
params.livechat_task_list_enabled = true
}
try {
if (window.reconnectConverse) { // this is set in the livechatSpecificsPlugin
window.reconnectConverse(params)

31
conversejs/custom/plugins/tasks/components/muc-task-app-view.js Normal file
View File

@ -0,0 +1,31 @@
import { api } from '@converse/headless/core'
import { CustomElement } from 'shared/components/element.js'
import { tplMUCTaskApp } from '../templates/muc-task-app.js'
import '../styles/muc-task-app.scss'
/**
* Custom Element to display the Task Application.
*/
export default class MUCTaskApp extends CustomElement {
static get properties () {
return {
model: { type: Object, attribute: true }, // mucModel
show: { type: Boolean, attribute: false }
}
}
async initialize () {
this.show = false
}
render () {
return tplMUCTaskApp(this, this.model)
}
toggleApp () {
this.show = !this.show
}
}
api.elements.define('livechat-converse-muc-task-app', MUCTaskApp)

6
conversejs/custom/plugins/tasks/muc-task-list-view.js → conversejs/custom/plugins/tasks/components/muc-task-list-view.js
View File

@ -1,6 +1,6 @@
import { CustomElement } from 'shared/components/element.js'
import { api } from '@converse/headless/core'
import tplMucTaskList from './templates/muc-task-list'
import tplMucTaskList from '../templates/muc-task-list'
import { __ } from 'i18n'
export default class MUCTaskListView extends CustomElement {
@ -69,9 +69,7 @@ export default class MUCTaskListView extends CustomElement {
// eslint-disable-next-line no-undef
const i18nConfirmDelete = __(LOC_task_list_delete_confirm)
// FIXME: when tasks are in a modal, api.confirm replaces the modal. This is not ok.
// const result = await api.confirm(i18nConfirmDelete)
const result = confirm(i18nConfirmDelete)
const result = await api.confirm(i18nConfirmDelete)
if (!result) { return }
try {

6
conversejs/custom/plugins/tasks/muc-task-lists-view.js → conversejs/custom/plugins/tasks/components/muc-task-lists-view.js
View File

@ -1,10 +1,10 @@
import { CustomElement } from 'shared/components/element.js'
import { api } from '@converse/headless/core'
import tplMucTaskLists from './templates/muc-task-lists'
import tplMucTaskLists from '../templates/muc-task-lists'
import { __ } from 'i18n'
import './styles/muc-task-lists.scss'
import './styles/muc-task-drag.scss'
import '../styles/muc-task-lists.scss'
import '../styles/muc-task-drag.scss'
export default class MUCTaskListsView extends CustomElement {
currentDraggedTask = null

8
conversejs/custom/plugins/tasks/muc-task-view.js → conversejs/custom/plugins/tasks/components/muc-task-view.js
View File

@ -1,9 +1,9 @@
import { CustomElement } from 'shared/components/element.js'
import { api } from '@converse/headless/core'
import { tplMucTask } from './templates/muc-task'
import { tplMucTask } from '../templates/muc-task'
import { __ } from 'i18n'
import './styles/muc-tasks.scss'
import '../styles/muc-tasks.scss'
export default class MUCTaskView extends CustomElement {
static get properties () {
@ -78,9 +78,7 @@ export default class MUCTaskView extends CustomElement {
// eslint-disable-next-line no-undef
const i18nConfirmDelete = __(LOC_task_delete_confirm)
// FIXME: when tasks are in a modal, api.confirm replaces the modal. This is not ok.
// const result = await api.confirm(i18nConfirmDelete)
const result = confirm(i18nConfirmDelete)
const result = await api.confirm(i18nConfirmDelete)
if (!result) { return }
try {

14
conversejs/custom/plugins/tasks/index.js
View File

@ -4,12 +4,10 @@ import { ChatRoomTaskList } from './task-list.js'
import { ChatRoomTasks } from './tasks.js'
import { getHeadingButtons, initOrDestroyChatRoomTaskLists } from './utils.js'
import { XMLNS_TASK, XMLNS_TASKLIST } from './constants.js'
import './muc-task-view.js' // FIXME: here or in another file?
import './muc-task-list-view.js' // FIXME: here or in another file?
import './muc-task-lists-view.js' // FIXME: here or in another file?
import './modals/muc-task-lists.js' // FIXME: here or in another file?
// TODO: add a client disco feature (using api.listen.on('addClientFeatures' ...)).
import './components/muc-task-view.js' // FIXME: here or in another file?
import './components/muc-task-list-view.js' // FIXME: here or in another file?
import './components/muc-task-lists-view.js' // FIXME: here or in another file?
import './components/muc-task-app-view.js' // FIXME: here or in another file?
converse.plugins.add('livechat-converse-tasks', {
dependencies: ['converse-muc', 'converse-disco'], // TODO: add converse-pubsub
@ -19,6 +17,10 @@ converse.plugins.add('livechat-converse-tasks', {
_converse.ChatRoomTaskList = ChatRoomTaskList
_converse.ChatRoomTasks = ChatRoomTasks
_converse.api.settings.extend({
livechat_task_list_enabled: false
})
_converse.api.listen.on('chatRoomInitialized', muc => {
muc.session.on('change:connection_status', _session => {
// When joining a room, initializing the TaskLists object (if user has access),

18
conversejs/custom/plugins/tasks/modals/muc-task-lists.js
View File

@ -1,18 +0,0 @@
import BaseModal from '../../../../src/plugins/modal/modal.js'
import { api } from '../../../../src/headless/core.js'
import { html } from 'lit'
import { __ } from 'i18n'
export default class mucTaskListsModal extends BaseModal {
renderModal () {
const muc = this.model
return html`<livechat-converse-muc-task-lists .model=${muc.tasklists}></livechat-converse-muc-task-lists>`
}
getModalTitle () {
// eslint-disable-next-line no-undef
return __(LOC_tasks)
}
}
api.elements.define('livechat-converse-muc-task-lists-modal', mucTaskListsModal)

33
conversejs/custom/plugins/tasks/styles/muc-task-app.scss Normal file
View File

@ -0,0 +1,33 @@
.conversejs {
livechat-converse-muc-task-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 {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
font-family: var(--heading-font);
padding-left: 0;
margin-right: 1em;
width: 100%;
h5 {
display: inline;
color: var(--groupchats-header-color-dark);
}
.livechat-converse-muc-app-close {
border: 0;
}
}
.livechat-converse-muc-app-body {
padding-right: 2em; // let some place for the scrollbar.
overflow-y: auto;
}
}
}

27
conversejs/custom/plugins/tasks/templates/muc-task-app.js Normal file
View File

@ -0,0 +1,27 @@
import { html } from 'lit'
import { __ } from 'i18n'
export function tplMUCTaskApp (el, mucModel) {
if (!mucModel) { return html`` } // should not happen
if (!mucModel.tasklists) { return html`` } // too soon, not initialized.
if (!el.show) {
el.style.display = 'none'
return html``
}
el.style.display = ''
// eslint-disable-next-line no-undef
const i18nTasks = __(LOC_tasks)
return html`
<div class="livechat-converse-muc-app-header">
<h5>${i18nTasks}</h5>
<button class="livechat-converse-muc-app-close" @click=${el.toggleApp}>
<converse-icon class="fa fa-times" size="1em"></converse-icon>
</button>
</div>
<div class="livechat-converse-muc-app-body">
<livechat-converse-muc-task-lists .model=${mucModel.tasklists}></livechat-converse-muc-task-lists>
</div>`
}

11
conversejs/custom/plugins/tasks/utils.js
View File

@ -20,9 +20,9 @@ export function getHeadingButtons (view, buttons) {
i18n_text: __(LOC_tasks),
handler: async (ev) => {
ev.preventDefault()
ev.stopPropagation()
// opening the muc task lists view:
api.modal.show('livechat-converse-muc-task-lists-modal', { model: muc })
// opening or closing the muc task app:
const taskAppEl = ev.target.closest('converse-root').querySelector('livechat-converse-muc-task-app')
taskAppEl.toggleApp()
},
a_class: '',
icon_class: 'fa-list', // FIXME
@ -89,6 +89,11 @@ export function initOrDestroyChatRoomTaskLists (mucModel) {
return _destroyChatRoomTaskLists(mucModel)
}
if (!api.settings.get('livechat_task_list_enabled')) {
// Feature disabled, no need to handle tasks.
return _destroyChatRoomTaskLists(mucModel)
}
if (mucModel.session.get('connection_status') !== converse.ROOMSTATUS.ENTERED) {
return _destroyChatRoomTaskLists(mucModel)
}

13
conversejs/custom/templates/muc-chatarea.js Normal file
View File

@ -0,0 +1,13 @@
import { api } from '@converse/headless/core'
import tplMUCChatarea from '../../src/plugins/muc-views/templates/muc-chatarea.js'
import { html } from 'lit'
export default (o) => {
return html`
${
o?.model && api.settings.get('livechat_task_list_enabled')
? html`<livechat-converse-muc-task-app .model=${o.model}></livechat-converse-muc-task-app>`
: ''
}
${tplMUCChatarea(o)}`
}

1
conversejs/custom/webpack.livechat.js
View File

@ -37,6 +37,7 @@ module.exports = merge(prod, {
'./templates/muc-bottom-panel.js': path.resolve('custom/templates/muc-bottom-panel.js'),
'./templates/muc-head.js': path.resolve(__dirname, 'custom/templates/muc-head.js'),
'../../templates/background_logo.js$': path.resolve(__dirname, 'custom/templates/background_logo.js'),
'./templates/muc-chatarea.js': path.resolve('custom/templates/muc-chatarea.js'),
'../templates/icons.js': path.resolve(__dirname, 'custom/shared/components/font-awesome.js'),

3
conversejs/lib/plugins/livechat-specific.ts
View File

@ -85,7 +85,8 @@ export const livechatSpecificsPlugin = {
'livechat_external_auth_oidc_buttons',
'livechat_external_auth_reconnect_mode',
'livechat_mini_muc_head',
'livechat_specific_external_authent'
'livechat_specific_external_authent',
'livechat_task_list_enabled'
]) {
_converse.api.settings.set(k, params[k])
}