From fdc81fa4eae00948f661682f7204290782e305d3 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Thu, 6 May 2021 12:21:35 +0200 Subject: [PATCH] Use `.conversejs` instead of `.converse-root` as the class that designates standalone Converse components. --- src/modals/styles/_modal.scss | 2 +- .../bookmark-views/styles/bookmarks.scss | 4 ++-- src/plugins/chatboxviews/styles/chats.scss | 2 +- .../chatview/styles/chat-bottom-panel.scss | 2 +- src/plugins/chatview/styles/chat-head.scss | 2 +- src/plugins/chatview/styles/chatbox.scss | 2 +- src/plugins/chatview/styles/index.scss | 10 +++++----- src/plugins/controlbox/styles/_controlbox.scss | 6 +++--- src/plugins/fullscreen/styles/background.scss | 2 +- .../headlines-view/styles/headlines.scss | 4 ++-- src/plugins/minimize/styles/minimize.scss | 2 +- src/plugins/muc-views/styles/index.scss | 8 ++++---- .../muc-views/styles/muc-bottom-panel.scss | 2 +- src/plugins/muc-views/styles/muc-forms.scss | 2 +- src/plugins/muc-views/styles/muc-head.scss | 2 +- .../muc-views/styles/muc-occupants.scss | 2 +- src/plugins/muc-views/styles/muc.scss | 2 +- src/plugins/muc-views/tests/component.js | 2 +- src/plugins/rootview/root.js | 2 +- src/plugins/rosterview/styles/roster.scss | 2 +- .../autocomplete/styles/_autocomplete.scss | 6 +++--- src/shared/chat/styles/emoji.scss | 6 +++--- src/shared/chat/styles/toolbar.scss | 2 +- src/shared/chat/styles/unfurl.scss | 2 +- src/shared/styles/_core.scss | 18 +++++++++--------- src/shared/styles/_variables.scss | 4 ++-- src/shared/styles/badges.scss | 2 +- src/shared/styles/buttons.scss | 2 +- src/shared/styles/font-awesome.scss | 2 +- src/shared/styles/forms.scss | 2 +- src/shared/styles/index.scss | 2 +- src/shared/styles/lists.scss | 2 +- src/shared/styles/messages.scss | 2 +- 33 files changed, 57 insertions(+), 57 deletions(-) diff --git a/src/modals/styles/_modal.scss b/src/modals/styles/_modal.scss index 8a646bbdb..48d500086 100644 --- a/src/modals/styles/_modal.scss +++ b/src/modals/styles/_modal.scss @@ -2,7 +2,7 @@ @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; -.converse-root { +.conversejs { @import "bootstrap/scss/modal"; #converse-modals { diff --git a/src/plugins/bookmark-views/styles/bookmarks.scss b/src/plugins/bookmark-views/styles/bookmarks.scss index 45f220ae9..581c3e627 100644 --- a/src/plugins/bookmark-views/styles/bookmarks.scss +++ b/src/plugins/bookmark-views/styles/bookmarks.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { #controlbox { .bookmarks-toggle, .bookmarks-toggle .fa { color: var(--groupchats-header-color) !important; @@ -9,7 +9,7 @@ } } -.converse-root.fullscreen { +.conversejs.fullscreen { #controlbox { #chatrooms { .bookmarks-list { diff --git a/src/plugins/chatboxviews/styles/chats.scss b/src/plugins/chatboxviews/styles/chats.scss index cabc79c66..719e978bc 100644 --- a/src/plugins/chatboxviews/styles/chats.scss +++ b/src/plugins/chatboxviews/styles/chats.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { converse-chats { &.converse-chatboxes { z-index: 1031; // One more than bootstrap navbar diff --git a/src/plugins/chatview/styles/chat-bottom-panel.scss b/src/plugins/chatview/styles/chat-bottom-panel.scss index 32b732db3..ccc88c064 100644 --- a/src/plugins/chatview/styles/chat-bottom-panel.scss +++ b/src/plugins/chatview/styles/chat-bottom-panel.scss @@ -3,7 +3,7 @@ @import "bootstrap/scss/mixins"; @import "shared/styles/_variables.scss"; -.converse-root { +.conversejs { .chatbox { .bottom-panel { diff --git a/src/plugins/chatview/styles/chat-head.scss b/src/plugins/chatview/styles/chat-head.scss index b22c15239..00b61a28a 100644 --- a/src/plugins/chatview/styles/chat-head.scss +++ b/src/plugins/chatview/styles/chat-head.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { .chatbox { .chat-head { display: flex; diff --git a/src/plugins/chatview/styles/chatbox.scss b/src/plugins/chatview/styles/chatbox.scss index 5ba440ee8..9978fdb35 100644 --- a/src/plugins/chatview/styles/chatbox.scss +++ b/src/plugins/chatview/styles/chatbox.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { .chatbox { text-align: left; margin: 0 var(--chat-gutter); diff --git a/src/plugins/chatview/styles/index.scss b/src/plugins/chatview/styles/index.scss index 2f5260fd7..2bb3551c3 100644 --- a/src/plugins/chatview/styles/index.scss +++ b/src/plugins/chatview/styles/index.scss @@ -8,7 +8,7 @@ /* ******************* Overlay and embedded styles *************************** */ -.converse-root { +.conversejs { converse-chats.converse-embedded, converse-chats.converse-overlayed { .controlbox-head { @@ -80,7 +80,7 @@ } @include media-breakpoint-down(sm) { - .converse-root.converse-overlayed { + .conversejs.converse-overlayed { > .row { flex-direction: column; &.no-gutters { @@ -91,7 +91,7 @@ } -.converse-root { +.conversejs { converse-chats.converse-embedded, converse-chats.converse-fullscreen { .flyout { @@ -176,7 +176,7 @@ /* ******************* Fullpage styles *************************** */ -.converse-root { +.conversejs { converse-chats.converse-fullscreen { .chatbox-btn { font-size: var(--fullpage-chatbox-button-size); @@ -216,7 +216,7 @@ @include media-breakpoint-down(sm) { - .converse-root { + .conversejs { converse-chats:not(.converse-embedded) { > .row { flex-direction: row-reverse; diff --git a/src/plugins/controlbox/styles/_controlbox.scss b/src/plugins/controlbox/styles/_controlbox.scss index 3ec5d0f43..49860ae0e 100644 --- a/src/plugins/controlbox/styles/_controlbox.scss +++ b/src/plugins/controlbox/styles/_controlbox.scss @@ -4,7 +4,7 @@ @import "shared/styles/_variables.scss"; @import "shared/styles/_mixins.scss"; -.converse-root { +.conversejs { .oauth-providers { text-align: center; .oauth-provider { @@ -387,7 +387,7 @@ } } -.converse-root { +.conversejs { converse-chats { &.converse-overlayed { @@ -612,7 +612,7 @@ @include media-breakpoint-down(sm) { - .converse-root { + .conversejs { left: 0; right: 0; padding-left: env(safe-area-inset-left); diff --git a/src/plugins/fullscreen/styles/background.scss b/src/plugins/fullscreen/styles/background.scss index 203892bf3..bd966b03e 100644 --- a/src/plugins/fullscreen/styles/background.scss +++ b/src/plugins/fullscreen/styles/background.scss @@ -2,7 +2,7 @@ @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; -.converse-root-bg { +.conversejs-bg { .subdued { opacity: 0.35; } diff --git a/src/plugins/headlines-view/styles/headlines.scss b/src/plugins/headlines-view/styles/headlines.scss index d2665fb48..e3b430307 100644 --- a/src/plugins/headlines-view/styles/headlines.scss +++ b/src/plugins/headlines-view/styles/headlines.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { .chat-head-headline { background-color: var(--headline-head-color); } @@ -31,7 +31,7 @@ } } -.converse-root { +.conversejs { converse-chats { &.converse-fullscreen { .chatbox.headlines { diff --git a/src/plugins/minimize/styles/minimize.scss b/src/plugins/minimize/styles/minimize.scss index 374affc9d..417267632 100644 --- a/src/plugins/minimize/styles/minimize.scss +++ b/src/plugins/minimize/styles/minimize.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { converse-chats { &.converse-overlayed { converse-minimized-chats { diff --git a/src/plugins/muc-views/styles/index.scss b/src/plugins/muc-views/styles/index.scss index 122f3b0d9..4a4bf73f4 100644 --- a/src/plugins/muc-views/styles/index.scss +++ b/src/plugins/muc-views/styles/index.scss @@ -13,8 +13,8 @@ converse-muc-destroyed { height: 100%; } -.converse-root.converse-embedded, -.converse-root { +.conversejs.converse-embedded, +.conversejs { .badge--muc { background-color: var(--groupchats-header-color); } @@ -30,7 +30,7 @@ converse-muc-destroyed { /* ******************* Overlay styles *************************** */ -.converse-root { +.conversejs { converse-chats { &.converse-overlayed { .chatbox { @@ -162,7 +162,7 @@ converse-muc-destroyed { @include media-breakpoint-down(sm) { - .converse-root { + .conversejs { converse-chats.converse-mobile, converse-chats.converse-overlayed, converse-chats.converse-fullscreen { diff --git a/src/plugins/muc-views/styles/muc-bottom-panel.scss b/src/plugins/muc-views/styles/muc-bottom-panel.scss index 424116cff..70e8b2b37 100644 --- a/src/plugins/muc-views/styles/muc-bottom-panel.scss +++ b/src/plugins/muc-views/styles/muc-bottom-panel.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { converse-muc.chatroom { converse-muc-bottom-panel { display: contents; diff --git a/src/plugins/muc-views/styles/muc-forms.scss b/src/plugins/muc-views/styles/muc-forms.scss index 1db17322a..98a433c55 100644 --- a/src/plugins/muc-views/styles/muc-forms.scss +++ b/src/plugins/muc-views/styles/muc-forms.scss @@ -3,7 +3,7 @@ converse-muc-config-form { overflow: auto; } -.converse-root { +.conversejs { .chatroom { .box-flyout { .muc-form-container { diff --git a/src/plugins/muc-views/styles/muc-head.scss b/src/plugins/muc-views/styles/muc-head.scss index c1f42dba0..7c7acd178 100644 --- a/src/plugins/muc-views/styles/muc-head.scss +++ b/src/plugins/muc-views/styles/muc-head.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { converse-muc.chatroom { .chat-head-chatroom { color: var(--chatroom-head-color); diff --git a/src/plugins/muc-views/styles/muc-occupants.scss b/src/plugins/muc-views/styles/muc-occupants.scss index 80f223c23..d4e9e3ae4 100644 --- a/src/plugins/muc-views/styles/muc-occupants.scss +++ b/src/plugins/muc-views/styles/muc-occupants.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { converse-muc.chatroom { .box-flyout { .occupants { diff --git a/src/plugins/muc-views/styles/muc.scss b/src/plugins/muc-views/styles/muc.scss index e8ea6c1bb..82535f403 100644 --- a/src/plugins/muc-views/styles/muc.scss +++ b/src/plugins/muc-views/styles/muc.scss @@ -4,7 +4,7 @@ @import "plugins/chatview/styles/chatbox.scss"; @import "./muc-forms.scss"; -.converse-root { +.conversejs { .chatroom { width: var(--chatroom-width); @media screen and (max-height: $mobile-landscape-height){ diff --git a/src/plugins/muc-views/tests/component.js b/src/plugins/muc-views/tests/component.js index 6d967238c..ba5d5c702 100644 --- a/src/plugins/muc-views/tests/component.js +++ b/src/plugins/muc-views/tests/component.js @@ -19,7 +19,7 @@ describe("The component", function () { await u.waitUntil(() => (model.session.get('connection_status') === converse.ROOMSTATUS.ENTERED)); const span_el = document.createElement('span'); - span_el.classList.add('converse-root'); + span_el.classList.add('conversejs'); span_el.classList.add('converse-embedded'); const muc_el = document.createElement('converse-muc'); diff --git a/src/plugins/rootview/root.js b/src/plugins/rootview/root.js index 42303e854..ddf85a44e 100644 --- a/src/plugins/rootview/root.js +++ b/src/plugins/rootview/root.js @@ -18,7 +18,7 @@ class ConverseRoot extends CustomElement { connectedCallback () { super.connectedCallback(); - this.classList.add('converse-root'); + this.classList.add('conversejs'); this.classList.add(`converse-${api.settings.get('view_mode')}`); this.classList.add(`theme-${api.settings.get('theme')}`); this.setAttribute('id', 'conversejs'); diff --git a/src/plugins/rosterview/styles/roster.scss b/src/plugins/rosterview/styles/roster.scss index ecece2f63..18c961528 100644 --- a/src/plugins/rosterview/styles/roster.scss +++ b/src/plugins/rosterview/styles/roster.scss @@ -1,4 +1,4 @@ -.converse-root #converse-roster { +.conversejs #converse-roster { text-align: left; width: 100%; position: relative; diff --git a/src/shared/autocomplete/styles/_autocomplete.scss b/src/shared/autocomplete/styles/_autocomplete.scss index cb4fdec42..93ee2568a 100644 --- a/src/shared/autocomplete/styles/_autocomplete.scss +++ b/src/shared/autocomplete/styles/_autocomplete.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { [hidden] { display: none; } .visually-hidden { @@ -128,13 +128,13 @@ } } -.converse-root.converse-fullscreen { +.conversejs.converse-fullscreen { .suggestion-box__results--above { bottom: 4.5em; } } -.converse-root.converse-overlayed { +.conversejs.converse-overlayed { .suggestion-box__results--above { bottom: 3.5em; } diff --git a/src/shared/chat/styles/emoji.scss b/src/shared/chat/styles/emoji.scss index fe949e0b6..2de82a91c 100644 --- a/src/shared/chat/styles/emoji.scss +++ b/src/shared/chat/styles/emoji.scss @@ -2,7 +2,7 @@ @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; -.converse-root { +.conversejs { @import "bootstrap/scss/media"; .chatbox { @@ -192,7 +192,7 @@ } } -.converse-root { +.conversejs { converse-chats { &.converse-overlayed { converse-emoji-dropdown { @@ -268,7 +268,7 @@ } @include media-breakpoint-up(m) { - .converse-root { + .conversejs { .chatbox { converse-emoji-picker { max-width: 40em; diff --git a/src/shared/chat/styles/toolbar.scss b/src/shared/chat/styles/toolbar.scss index 5ad252ab4..4dd76ef91 100644 --- a/src/shared/chat/styles/toolbar.scss +++ b/src/shared/chat/styles/toolbar.scss @@ -2,7 +2,7 @@ @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; -.converse-root { +.conversejs { .send-button { border-radius: 0; diff --git a/src/shared/chat/styles/unfurl.scss b/src/shared/chat/styles/unfurl.scss index 81411aa30..45655b3b9 100644 --- a/src/shared/chat/styles/unfurl.scss +++ b/src/shared/chat/styles/unfurl.scss @@ -2,7 +2,7 @@ @import "bootstrap/scss/variables"; @import "shared/styles/_mixins.scss"; -.converse-root { +.conversejs { @import "bootstrap/scss/card"; .message { diff --git a/src/shared/styles/_core.scss b/src/shared/styles/_core.scss index 52f3266b7..c0d484b82 100644 --- a/src/shared/styles/_core.scss +++ b/src/shared/styles/_core.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { bottom: 0; height: 100%; position: fixed; @@ -447,7 +447,7 @@ font-size: 3.75em; } } - .converse-root:not(.converse-embedded) { + .conversejs:not(.converse-embedded) { .chatbox { .chat-body { border-radius: var(--chatbox-border-radius); @@ -461,33 +461,33 @@ @media screen and (min-width: 576px) { - .converse-root .offset-sm-2 { + .conversejs .offset-sm-2 { margin-left: 16.666667%; } } @media screen and (min-width: 768px) { - .converse-root .offset-md-2 { + .conversejs .offset-md-2 { margin-left: 16.666667%; } - .converse-root .offset-md-3 { + .conversejs .offset-md-3 { margin-left: 25%; } } @media screen and (min-width: 992px) { - .converse-root .offset-lg-2 { + .conversejs .offset-lg-2 { margin-left: 16.666667%; } - .converse-root .offset-lg-3 { + .conversejs .offset-lg-3 { margin-left: 25%; } } @media screen and (min-width: 1200px) { - .converse-root .offset-xl-2 { + .conversejs .offset-xl-2 { margin-left: 16.666667%; } } @media screen and (max-height: 450px) { - .converse-root { + .conversejs { left: 0; } } diff --git a/src/shared/styles/_variables.scss b/src/shared/styles/_variables.scss index 7d25c8027..b50596ce3 100644 --- a/src/shared/styles/_variables.scss +++ b/src/shared/styles/_variables.scss @@ -1,7 +1,7 @@ $mobile_landscape_height: 450px !default; $mobile_portrait_length: 480px !default; -.converse-root, .converse-root-bg, body.converse-fullscreen { +.conversejs, .conversejs-bg, body.converse-fullscreen { --subdued-color: #A8ABA1; --green: #3AA569; @@ -193,7 +193,7 @@ $mobile_portrait_length: 480px !default; --list-dot-circle-color: #f6dec1; // lighten($orange, 25%) } -.converse-root.theme-concord { +.conversejs.theme-concord { --avatar-border-radius: 10%; --avatar-border: 0px; --avatar-background-color: none; diff --git a/src/shared/styles/badges.scss b/src/shared/styles/badges.scss index 9eae9c9ac..45ba96bc1 100644 --- a/src/shared/styles/badges.scss +++ b/src/shared/styles/badges.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { @import "bootstrap/scss/badge"; .badge { diff --git a/src/shared/styles/buttons.scss b/src/shared/styles/buttons.scss index 1fc09953d..fd0ff6d85 100644 --- a/src/shared/styles/buttons.scss +++ b/src/shared/styles/buttons.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { @import "bootstrap/scss/buttons"; @import "bootstrap/scss/button-group"; diff --git a/src/shared/styles/font-awesome.scss b/src/shared/styles/font-awesome.scss index 4d12542ad..6813e0027 100644 --- a/src/shared/styles/font-awesome.scss +++ b/src/shared/styles/font-awesome.scss @@ -64,7 +64,7 @@ @import "@fortawesome/fontawesome-free/scss/icons"; @import "@fortawesome/fontawesome-free/scss/screen-reader"; -.converse-root, .converse-website { +.conversejs, .converse-website { /* Apparent font-awesome bug? The circle has some kind of bottom margin */ converse-icon:before { diff --git a/src/shared/styles/forms.scss b/src/shared/styles/forms.scss index f5e50e5e0..ccdbb64cd 100644 --- a/src/shared/styles/forms.scss +++ b/src/shared/styles/forms.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { @import "bootstrap/scss/forms"; @import "bootstrap/scss/input-group"; @import "bootstrap/scss/custom-forms"; diff --git a/src/shared/styles/index.scss b/src/shared/styles/index.scss index 0ac60e8fd..1c4a04b30 100644 --- a/src/shared/styles/index.scss +++ b/src/shared/styles/index.scss @@ -11,7 +11,7 @@ @import "./font-awesome.scss"; @import "mixins"; -.converse-root { +.conversejs { @import "bootstrap/scss/root"; @import "bootstrap/scss/reboot"; @import "bootstrap/scss/type"; diff --git a/src/shared/styles/lists.scss b/src/shared/styles/lists.scss index 53bfda9b3..857a35f4e 100644 --- a/src/shared/styles/lists.scss +++ b/src/shared/styles/lists.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { @import "bootstrap/scss/list-group"; .list-group-item.active { diff --git a/src/shared/styles/messages.scss b/src/shared/styles/messages.scss index cedd7ad8b..68aae034c 100644 --- a/src/shared/styles/messages.scss +++ b/src/shared/styles/messages.scss @@ -1,4 +1,4 @@ -.converse-root { +.conversejs { .styling-directive { color: var(--subdued-color); }