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

Task lists WIP:

Browse Source 
* responsive for the task app
This commit is contained in:
John Livingston 2024-05-12 15:38:11 +02:00
parent 0c4a5999f8
commit 5c9733147b
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
2 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
conversejs/custom/plugins/tasks/styles/muc-task-app.scss
View File

@ -30,4 +30,13 @@
overflow-y: auto;
}
}
&[livechat-converse-root-width="small"],
&[livechat-converse-root-width="medium"] {
converse-muc-chatarea livechat-converse-muc-task-app:not(.hidden) ~ * {
// on small and medium width, we hide all subsequent siblings of the task app
// (when app is not hidden)
display: none !important;
}
}
}

22
conversejs/custom/plugins/tasks/templates/muc-task-app.js
View File

@ -2,22 +2,30 @@ 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'
if (!mucModel) {
// should not happen
el.classList.add('hidden') // we must do this, otherwise will have CSS side effects
return html``
}
if (!mucModel.tasklists) {
// too soon, not initialized yet (this will happen)
el.classList.add('hidden') // we must do this, otherwise will have CSS side effects
return html``
}
el.style.display = ''
if (!el.show) {
el.classList.add('hidden')
return html``
}
el.classList.remove('hidden')
// 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}>
<button class="livechat-converse-muc-app-close" @click=${el.toggleApp} title="${__('Close')}">
<converse-icon class="fa fa-times" size="1em"></converse-icon>
</button>
</div>