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

Trying better UI for the slow mode info box.

Browse Source
This commit is contained in:
John Livingston 2024-02-22 16:05:12 +01:00
parent 3a9c17fba8
commit 26846b3eda
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
2 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,8 +17,8 @@
.chatbox { .chatbox {
// Slow mode info box // Slow mode info box
livechat-slow-mode { .livechat-slow-mode-info-box {
border-top: var(--chatroom-message-input-border-top); border: 1px dashed var(--peertube-menu-background);
color: var(--peertube-main-foreground); color: var(--peertube-main-foreground);
background-color: var(--peertube-main-background); background-color: var(--peertube-main-background);
@ -29,6 +29,7 @@
} }
converse-chat-toolbar { converse-chat-toolbar {
border-top: none !important; // removing border, to avoid confusing the toolbar with an input field.
color: var(--peertube-main-foreground); color: var(--peertube-main-foreground);
background-color: var(--peertube-main-background); background-color: var(--peertube-main-background);
} }

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

@ -51,7 +51,7 @@ class SlowMode extends CustomElement {
if (this.hideInfoBox) { if (this.hideInfoBox) {
return html`` return html``
} }
return html` return html`<div class="livechat-slow-mode-info-box">
<converse-icon class="fa fa-info-circle" size="1.2em"></converse-icon> <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.', 'Slow mode is enabled, users can send a message every %1$s seconds.',
@ -59,7 +59,8 @@ class SlowMode extends CustomElement {
)} )}
<i class="livechat-hide-slow-mode-info-box" @click=${this.closeSlowModeInfoBox}> <i class="livechat-hide-slow-mode-info-box" @click=${this.closeSlowModeInfoBox}>
<converse-icon class="fa fa-times" size="1em"></converse-icon> <converse-icon class="fa fa-times" size="1em"></converse-icon>
</i>` </i>
</div>`
} }
closeSlowModeInfoBox (ev) { closeSlowModeInfoBox (ev) {