Slow Mode WIP (#192): button to close the info box

This commit is contained in:
John Livingston 2024-02-16 15:44:39 +01:00
parent 3d9237624d
commit 5828cdeea4
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
2 changed files with 30 additions and 1 deletions

View File

@ -21,6 +21,11 @@
border-top: var(--chatroom-message-input-border-top);
color: var(--peertube-main-foreground);
background-color: var(--peertube-main-background);
.livechat-hide-slow-mode-info-box {
cursor: pointer;
font-size: var(--font-size-small);
}
}
converse-chat-toolbar {

View File

@ -23,12 +23,23 @@ class SlowMode extends CustomElement {
}
}
hideInfoBox = false
async connectedCallback () {
super.connectedCallback()
this.model = _converse.chatboxes.get(this.jid)
await this.model.initialized
let previousDuration = this.model.config.get('slow_mode_duration')
this.listenTo(this.model.config, 'change:slow_mode_duration', () => {
if (this.hideInfoBox) {
const duration = this.model.config.get('slow_mode_duration')
if (duration !== previousDuration) {
previousDuration = duration
// Duration changed, opening the infobox again.
this.hideInfoBox = false
}
}
this.requestUpdate()
})
}
@ -37,12 +48,25 @@ class SlowMode extends CustomElement {
if (!(parseInt(this.model.config.get('slow_mode_duration')) > 0)) { // This includes NaN, for which ">0"===false
return html``
}
if (this.hideInfoBox) {
return html``
}
return html`
<converse-icon class="fa fa-info-circle" size="1.2em"></converse-icon>
${__(
'Slow mode is enabled, users can send a message every %1$s seconds.',
this.model.config.get('slow_mode_duration')
)}`
)}
<i class="livechat-hide-slow-mode-info-box" @click=${this.closeSlowModeInfoBox}>
<converse-icon class="fa fa-times" size="1em"></converse-icon>
</i>`
}
closeSlowModeInfoBox (ev) {
ev?.preventDefault?.()
ev?.stopPropagation?.()
this.hideInfoBox = true
this.requestUpdate()
}
}
api.elements.define('livechat-slow-mode', SlowMode)