Use .conversejs instead of .converse-root

as the class that designates standalone Converse components.
2021-05-06 12:21:35 +02:00 · 2021-05-06 12:21:35 +02:00 · fdc81fa4ea
commit fdc81fa4ea
parent dd609c1cec
33 changed files with 57 additions and 57 deletions
--- 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 {
--- 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 {
--- 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
--- 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 {

--- 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;
--- 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);
--- 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;
--- 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);
--- 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;
    }
--- 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 {
--- 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 {
--- 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 {
--- 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;
--- 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 {
--- 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);
--- 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 {
--- 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){
--- a/src/plugins/muc-views/tests/component.js
+++ b/src/plugins/muc-views/tests/component.js
@ -19,7 +19,7 @@ describe("The <converse-muc> 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');
--- 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');
--- 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;
--- 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;
    }
--- 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;
--- 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;
--- 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 {
--- 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;
  }
 }
--- 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;
--- a/src/shared/styles/badges.scss
+++ b/src/shared/styles/badges.scss
@ -1,4 +1,4 @@
-.converse-root {
+.conversejs {
    @import "bootstrap/scss/badge";

    .badge {
--- 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";

--- 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 {
--- 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";
--- 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";
--- 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 {
--- 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);
    }