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

Updating Converse upstream (with bootstrap5):

Browse Source 
* bootstrap 5 compatibility
* other Converse updates integration
* hack to get the sidebar work as with Converse v10.
* modal onHide was renamed close.
* fix slow mode infobox margin.
* fix margin
* shorter action label, for better dropdown UX.
This commit is contained in:
John Livingston
2024-08-05 15:54:03 +02:00
parent 33da4314af
commit 003cb24dd8
18 changed files with 99 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
conversejs/custom/index.js
View File

@ -8,14 +8,14 @@
* @description This files will override the original ConverseJS index.js file.
*/
import 'shared/styles/index.scss'
import './i18n/index.js'
import 'shared/registry.js'
import { CustomElement } from 'shared/components/element'
import { VIEW_PLUGINS } from './shared/constants.js'
import { _converse, converse } from '@converse/headless'
import 'shared/styles/index.scss'
/* START: Removable plugins
* ------------------------
* Any of the following plugin imports may be removed if the plugin is not needed

6
conversejs/custom/plugins/notes/templates/muc-note.js
View File

@ -67,7 +67,7 @@ export function tplMucNote (el, note) {
: ''
}
${_tplNoteForm(note)}
<fieldset class="form-group">
<fieldset>
<input type="submit" class="btn btn-primary" value="${__('Ok')}" />
<input type="button" class="btn btn-secondary button-cancel"
value="${__('Cancel')}" @click=${el.toggleEdit}
@ -81,7 +81,7 @@ function _tplNoteForm (note) {
// eslint-disable-next-line no-undef
const i18nNoteDesc = __(LOC_moderator_note_description)
return html`<fieldset class="form-group">
return html`<fieldset>
<textarea
class="form-control" name="description"
placeholder="${i18nNoteDesc}"
@ -116,7 +116,7 @@ export function tplMucCreateNoteForm (notesEl, occupant) {
: ''
}
${_tplNoteForm(undefined)}
<fieldset class="form-group">
<fieldset>
<input type="submit" class="btn btn-primary" value="${i18nOk}" />
<input type="button" class="btn btn-secondary button-cancel"
value="${i18nCancel}" @click=${notesEl.closeCreateNoteForm}

2
conversejs/custom/plugins/poll/components/poll-form-view.js
View File

@ -113,7 +113,7 @@ export default class MUCPollFormView extends CustomElement {
await api.sendIQ(iq)
if (this.modal) {
this.modal.onHide()
this.modal.close()
}
} catch (err) {
if (u.isErrorStanza(err)) {

4
conversejs/custom/plugins/poll/modals/poll-form.js
View File

@ -13,8 +13,8 @@ class PollFormModal extends BaseModal {
super.initialize()
}
onHide () {
super.onHide()
close () {
super.close()
api.modal.remove('livechat-converse-poll-form-modal')
}

2
conversejs/custom/plugins/poll/templates/poll-form.js
View File

@ -44,7 +44,7 @@ export function tplPollForm (el) {
${formFieldTemplates}
<fieldset class="buttons form-group">
<fieldset class="buttons">
<input type="submit" class="btn btn-primary" value="${i18nOk}" />
</fieldset>
</form>`

32
conversejs/custom/plugins/tasks/modals/templates/pick-task-list.js
View File

@ -19,22 +19,22 @@ export default function (el) {
return html`
<form class="converse-form converse-form--modal confirm" action="#" @submit=${ev => el.onPick(ev)}>
<div class="form-group">
<select class="form-control" name="tasklist">
${
repeat(muc.tasklists, (tasklist) => tasklist.get('id'), (tasklist) => {
return html`<option value="${tasklist.get('id')}">${tasklist.get('name')}</option>`
})
}
</select>
<small class="form-text text-muted">
${i18nMessage}
</small>
</div>
<fieldset>
<select class="form-control" name="tasklist">
${
repeat(muc.tasklists, (tasklist) => tasklist.get('id'), (tasklist) => {
return html`<option value="${tasklist.get('id')}">${tasklist.get('name')}</option>`
})
}
</select>
<small class="form-text text-muted">
${i18nMessage}
</small>
</fieldset>
<div class="form-group">
<button type="submit" class="btn btn-primary">${__('OK')}</button>
<input type="button" class="btn btn-secondary" data-dismiss="modal" value="${__('Cancel')}"/>
</div>
<fieldset>
<button type="submit" class="btn btn-primary">${__('OK')}</button>
<input type="button" class="btn btn-secondary" data-dismiss="modal" value="${__('Cancel')}"/>
</fieldset>
</form>`
}

4
conversejs/custom/plugins/tasks/templates/muc-task-lists.js
View File

@ -24,7 +24,7 @@ export default function tplMucTaskLists (el, tasklists) {
})
}
<form class="converse-form" @submit=${el.submitCreateTaskList}>
<div class="form-group">
<fieldset>
<label>
${i18nCreateTaskList}
<input type="text" value="" class="form-control" name="name" placeholder="${i18nTaskListName}" />
@ -34,6 +34,6 @@ export default function tplMucTaskLists (el, tasklists) {
? ''
: html`<div class="invalid-feedback d-block">${el.create_tasklist_error_message}</div>`
}
</div>
</fieldset>
</form>`
}

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

@ -45,7 +45,7 @@ export function tplMucTask (el, task) {
<div class="task-line draggables-line">
<form class="converse-form" @submit=${el.saveTask}>
${_tplTaskForm(task)}
<fieldset class="form-group">
<fieldset>
<input type="submit" class="btn btn-primary" value="${__('Ok')}" />
<input type="button" class="btn btn-secondary button-cancel"
value="${__('Cancel')}" @click=${el.toggleEdit}
@ -61,7 +61,7 @@ function _tplTaskForm (task) {
// eslint-disable-next-line no-undef
const i18nTaskDesc = __(LOC_task_description)
return html`<fieldset class="form-group">
return html`<fieldset>
<input type="text" name="name"
class="form-control" value="${task ? task.get('name') : ''}"
placeholder="${i18nTaskName}"
@ -80,7 +80,7 @@ export function tplMucAddTaskForm (tasklistEl, _tasklist) {
return html`
<form class="task-list-add-task converse-form" @submit=${tasklistEl.submitAddTask}>
${_tplTaskForm(undefined)}
<fieldset class="form-group">
<fieldset>
<input type="submit" class="btn btn-primary" value="${i18nOk}" />
<input type="button" class="btn btn-secondary button-cancel"
value="${i18nCancel}" @click=${tasklistEl.closeAddTaskForm}

4
conversejs/custom/shared/modals/livechat-external-login.js
View File

@ -20,8 +20,8 @@ class ExternalLoginModal extends BaseModal {
return __(LOC_login_using_external_account)
}
onHide () {
super.onHide()
close () {
super.close()
// kill the externalAuthGetResult handler if still there
try {
if (window.externalAuthGetResult) { window.externalAuthGetResult() }

3
conversejs/custom/shared/styles/_peertubetheme.scss
View File

@ -8,7 +8,7 @@
.dropdown-menu {
// Fixing all dropdown colors
--text-color: #212529; // default bootstrap color for dropdown-items
--text-color-lighten-15-percent: #8c8c8c; // default ConverseJS theme color
--inverse-link-color: #8c8c8c; // default ConverseJS theme color
background-color: #fff; // this is the default bootstrap color, used by ConverseJS
@ -27,6 +27,7 @@
border: 1px dashed var(--peertube-menu-background);
color: var(--peertube-main-foreground);
background-color: var(--peertube-main-background);
margin: 0 5px;
.livechat-hide-slow-mode-info-box {
cursor: pointer;

10
conversejs/custom/shared/styles/_variables.scss
View File

@ -35,6 +35,7 @@ body.converse-embedded converse-root.theme-peertube {
--foreground: var(--peertube-main-foreground);
--background: var(--peertube-main-background);
--subdued-color: #a8aba1;
--muc-color: var(--peertube-button-background);
--green: #3aa569; // only in this file
--redder-orange: #e77051; // only in this file
--orange: #e7a151; // only in this file
@ -55,7 +56,6 @@ body.converse-embedded converse-root.theme-peertube {
--text-shadow-color: var(--peertube-main-background); // FIXME: should be a little different from background
--text-color: var(--peertube-input-foreground);
--controlbox-text-color: var(--peertube-input-foreground); // Note: controlbox is not used
--text-color-lighten-15-percent: var(--peertube-input-foreground);
--message-text-color: var(--peertube-input-foreground);
--message-receipt-color: var(--green);
--save-button-color: var(--green);
@ -73,7 +73,6 @@ body.converse-embedded converse-root.theme-peertube {
--chat-correcting-color: var(--peertube-grey-background);
--chat-head-color-dark: #1e9652; // should not be used in this plugin
--chat-head-color-darker: #0e763b; // should not be used in this plugin
--chat-head-color-lighten-50-percent: #e7f7ee; // should not be used in this plugin
--chat-head-color: var(--green);
--chat-head-text-color: var(--peertube-input-foreground);
--chat-toolbar-btn-color: var(--peertube-button-background);
@ -106,7 +105,6 @@ body.converse-embedded converse-root.theme-peertube {
--controlbox-pane-background-color: #333;
--controlbox-pane-bg-hover-color: #464646;
--panel-divider-color: #333;
--chat-gutter: 0.5em;
--minimized-chats-width: 130px;
--mobile-chat-width: 100%;
--mobile-chat-height: 400px;
@ -119,9 +117,10 @@ body.converse-embedded converse-root.theme-peertube {
--chatroom-badge-color: var(--peertube-button-background);
--chatroom-badge-hover-color: var(--peertube-button-background);
--chatroom-correcting-color: var(--peertube-grey-background);
--chatroom-head-bg-color-dark: #d24e2b;
--chatroom-head-bg-color-dark: var(--peertube-button-background);
--chatroom-head-bg-color: var(--peertube-menu-background);
--chatroom-head-border-bottom: 1px solid var(--peertube-grey-foreground);
--chatroom-head-border-bottom: 0.15em solid var(--peertube-grey-foreground);
--chatroom-head-fg-color: var(--subdued-color);
--chatroom-head-button-color: #999;
--chatroom-head-color: var(--peertube-menu-foreground);
--chatroom-head-description-border-left: 1px solid #ddd;
@ -163,6 +162,7 @@ body.converse-embedded converse-root.theme-peertube {
--fullpage-chat-width: 100%;
--fullpage-emoji-picker-height: 300px;
--fullpage-max-chat-textarea-height: 15em;
--overlayed-chat-gutter: 1em;
--overlayed-chat-head-height: 55px;
--overlayed-chat-height: 450px;
--overlayed-chat-width: 300px;

41
conversejs/custom/shared/styles/livechat.scss
View File

@ -60,7 +60,7 @@ body.livechat-readonly.livechat-noscroll {
}
}
// Viewer mode
// Viewer mode (before the user has chosen its nickname)
.livechat-viewer-mode-content {
display: none;
@ -73,7 +73,7 @@ body.livechat-readonly.livechat-noscroll {
gap: 0.5em 10px;
align-items: baseline;
.form-group,
fieldset,
label {
margin-bottom: 0 !important; // replaced by the gap on .livechat-viewer-mode-content
}
@ -171,7 +171,8 @@ body.converse-embedded {
#peertube-plugin-livechat-container {
converse-muc-message-form {
// For an unknown reason, message field in truncated... so adding a bottom margin.
margin-bottom: 6px;
// We also add left and right margin, as Converse v11 adds a g-0 class on converse-muc-chatarea
margin: 0 1px 6px 5px;
}
}
@ -187,4 +188,38 @@ body.converse-embedded {
// So we must revert appearance:
appearance: revert !important;
}
.toolbar-buttons {
// Converse v11 removed the toggle_occupant button on the right.
// To add it back, we must ensure that this toolbar takes all the width, and
// that the toggle-occupants button is on the right.
flex-grow: 2;
.toggle-occupants {
// Cancelling the flex-grow from btn-group
flex-grow: 0 !important;
// This margin-left trick is to align the button on the right.
margin-left: auto !important;
order: 99;
}
}
// These CSS are tricks: Converse v11 tries to hide the MUC when screen width is under 768px.
// We don't want that, so we cancel the d-none.
// FIXME: these hacks should be temporary, waiting for some improvement on Converse.
converse-muc-chatarea {
.chat-area.d-none {
display: flex !important;
}
/* stylelint-disable-next-line no-descending-specificity */
converse-muc-sidebar {
width: auto !important;
.occupants {
width: 100%;
}
}
}
}

4
conversejs/custom/templates/muc-bottom-panel.js
View File

@ -97,7 +97,7 @@ const tplViewerMode = (o) => {
<div class="livechat-viewer-mode-content chatroom-form-container">
<form class="converse-form chatroom-form" @submit=${ev => setNickname(ev, model)}>
<label>${i18nHeading}</label>
<fieldset class="form-group">
<fieldset>
<input type="text"
required
name="nick"
@ -105,7 +105,7 @@ const tplViewerMode = (o) => {
class="form-control"
placeholder="${i18nNickname}"/>
</fieldset>
<fieldset class="form-group">
<fieldset>
<input type="submit" class="btn btn-primary" name="join" value="${i18nJoin}"/>
</fieldset>
</form>

4
conversejs/custom/templates/muc.js
View File

@ -17,12 +17,12 @@ export default (o) => {
${
o.model
? html`
<converse-muc-heading jid="${o.model.get('jid')}" class="chat-head chat-head-chatroom row no-gutters">
<converse-muc-heading jid="${o.model.get('jid')}" class="chat-head chat-head-chatroom row g-0">
</converse-muc-heading>
<livechat-converse-muc-terms .model=${o.model} termstype="global"></livechat-converse-muc-terms>
<livechat-converse-muc-terms .model=${o.model} termstype="muc"></livechat-converse-muc-terms>
<livechat-converse-muc-poll .model=${o.model}></livechat-converse-muc-poll>
<div class="chat-body chatroom-body row no-gutters">${getChatRoomBodyTemplate(o)}</div>`
<div class="chat-body chatroom-body row g-0">${getChatRoomBodyTemplate(o)}</div>`
: ''}
</div>`
}