Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Use .converse-root class instead of #conversejs id

Browse Source
This commit is contained in:
JC Brand 2021-04-30 17:33:50 +02:00
parent 4bdafb8ea3
commit 9c11e0dc32
34 changed files with 58 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/modals/styles/_modal.scss
View File

@ -2,7 +2,7 @@
@import "bootstrap/scss/variables"; @import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins"; @import "bootstrap/scss/mixins";
#conversejs { .converse-root {
@import "bootstrap/scss/modal"; @import "bootstrap/scss/modal";
#converse-modals { #converse-modals {

4
src/plugins/bookmark-views/styles/bookmarks.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
#controlbox { #controlbox {
.bookmarks-toggle, .bookmarks-toggle .fa { .bookmarks-toggle, .bookmarks-toggle .fa {
color: var(--groupchats-header-color) !important; color: var(--groupchats-header-color) !important;
@ -9,7 +9,7 @@
} }
} }
#conversejs.fullscreen { .converse-root.fullscreen {
#controlbox { #controlbox {
#chatrooms { #chatrooms {
.bookmarks-list { .bookmarks-list {

2
src/plugins/chatboxviews/styles/chats.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
converse-chats { converse-chats {
&.converse-chatboxes { &.converse-chatboxes {
z-index: 1031; // One more than bootstrap navbar z-index: 1031; // One more than bootstrap navbar

2
src/plugins/chatview/styles/chat-bottom-panel.scss
View File

@ -3,7 +3,7 @@
@import "bootstrap/scss/mixins"; @import "bootstrap/scss/mixins";
@import "shared/styles/_variables.scss"; @import "shared/styles/_variables.scss";
#conversejs { .converse-root {
.chatbox { .chatbox {
.bottom-panel { .bottom-panel {

2
src/plugins/chatview/styles/chat-head.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
.chatbox { .chatbox {
.chat-head { .chat-head {
display: flex; display: flex;

2
src/plugins/chatview/styles/chatbox.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
.chatbox { .chatbox {
text-align: left; text-align: left;
margin: 0 var(--chat-gutter); margin: 0 var(--chat-gutter);

10
src/plugins/chatview/styles/index.scss
View File

@ -8,7 +8,7 @@
/* ******************* Overlay and embedded styles *************************** */ /* ******************* Overlay and embedded styles *************************** */
#conversejs { .converse-root {
converse-chats.converse-embedded, converse-chats.converse-embedded,
converse-chats.converse-overlayed { converse-chats.converse-overlayed {
.controlbox-head { .controlbox-head {
@ -80,7 +80,7 @@
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
#conversejs.converse-overlayed { .converse-root.converse-overlayed {
> .row { > .row {
flex-direction: column; flex-direction: column;
&.no-gutters { &.no-gutters {
@ -91,7 +91,7 @@
} }
#conversejs { .converse-root {
converse-chats.converse-embedded, converse-chats.converse-embedded,
converse-chats.converse-fullscreen { converse-chats.converse-fullscreen {
.flyout { .flyout {
@ -176,7 +176,7 @@
/* ******************* Fullpage styles *************************** */ /* ******************* Fullpage styles *************************** */
#conversejs { .converse-root {
converse-chats.converse-fullscreen { converse-chats.converse-fullscreen {
.chatbox-btn { .chatbox-btn {
font-size: var(--fullpage-chatbox-button-size); font-size: var(--fullpage-chatbox-button-size);
@ -216,7 +216,7 @@
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
#conversejs { .converse-root {
converse-chats:not(.converse-embedded) { converse-chats:not(.converse-embedded) {
> .row { > .row {
flex-direction: row-reverse; flex-direction: row-reverse;

6
src/plugins/controlbox/styles/_controlbox.scss
View File

@ -4,7 +4,7 @@
@import "shared/styles/_variables.scss"; @import "shared/styles/_variables.scss";
@import "shared/styles/_mixins.scss"; @import "shared/styles/_mixins.scss";
#conversejs { .converse-root {
.oauth-providers { .oauth-providers {
text-align: center; text-align: center;
.oauth-provider { .oauth-provider {
@ -387,7 +387,7 @@
} }
} }
#conversejs { .converse-root {
converse-chats { converse-chats {
&.converse-overlayed { &.converse-overlayed {
@ -612,7 +612,7 @@
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
#conversejs { .converse-root {
left: 0; left: 0;
right: 0; right: 0;
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);

2
src/plugins/fullscreen/styles/background.scss
View File

@ -2,7 +2,7 @@
@import "bootstrap/scss/variables"; @import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins"; @import "bootstrap/scss/mixins";
#conversejs-bg { .converse-root-bg {
.subdued { .subdued {
opacity: 0.35; opacity: 0.35;
} }

4
src/plugins/headlines-view/styles/headlines.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
.chat-head-headline { .chat-head-headline {
background-color: var(--headline-head-color); background-color: var(--headline-head-color);
} }
@ -31,7 +31,7 @@
} }
} }
#conversejs { .converse-root {
converse-chats { converse-chats {
&.converse-fullscreen { &.converse-fullscreen {
.chatbox.headlines { .chatbox.headlines {

2
src/plugins/minimize/styles/minimize.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
converse-chats { converse-chats {
&.converse-overlayed { &.converse-overlayed {
converse-minimized-chats { converse-minimized-chats {

8
src/plugins/muc-views/styles/index.scss
View File

@ -13,8 +13,8 @@ converse-muc-destroyed {
height: 100%; height: 100%;
} }
#conversejs.converse-embedded, .converse-root.converse-embedded,
#conversejs { .converse-root {
.badge--muc { .badge--muc {
background-color: var(--groupchats-header-color); background-color: var(--groupchats-header-color);
} }
@ -30,7 +30,7 @@ converse-muc-destroyed {
/* ******************* Overlay styles *************************** */ /* ******************* Overlay styles *************************** */
#conversejs { .converse-root {
converse-chats { converse-chats {
&.converse-overlayed { &.converse-overlayed {
.chatbox { .chatbox {
@ -162,7 +162,7 @@ converse-muc-destroyed {
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
#conversejs { .converse-root {
converse-chats.converse-mobile, converse-chats.converse-mobile,
converse-chats.converse-overlayed, converse-chats.converse-overlayed,
converse-chats.converse-fullscreen { converse-chats.converse-fullscreen {

2
src/plugins/muc-views/styles/muc-bottom-panel.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
converse-muc.chatroom { converse-muc.chatroom {
converse-muc-bottom-panel { converse-muc-bottom-panel {
display: contents; display: contents;

2
src/plugins/muc-views/styles/muc-forms.scss
View File

@ -3,7 +3,7 @@ converse-muc-config-form {
overflow: auto; overflow: auto;
} }
#conversejs { .converse-root {
.chatroom { .chatroom {
.box-flyout { .box-flyout {
.muc-form-container { .muc-form-container {

2
src/plugins/muc-views/styles/muc-head.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
converse-muc.chatroom { converse-muc.chatroom {
.chat-head-chatroom { .chat-head-chatroom {
color: var(--chatroom-head-color); color: var(--chatroom-head-color);

2
src/plugins/muc-views/styles/muc-occupants.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
converse-muc.chatroom { converse-muc.chatroom {
.box-flyout { .box-flyout {
.occupants { .occupants {

2
src/plugins/muc-views/styles/muc.scss
View File

@ -4,7 +4,7 @@
@import "plugins/chatview/styles/chatbox.scss"; @import "plugins/chatview/styles/chatbox.scss";
@import "./muc-forms.scss"; @import "./muc-forms.scss";
#conversejs { .converse-root {
.chatroom { .chatroom {
width: var(--chatroom-width); width: var(--chatroom-width);
@media screen and (max-height: $mobile-landscape-height){ @media screen and (max-height: $mobile-landscape-height){

34
src/plugins/rootview.js
View File

@ -1,34 +0,0 @@
import { api, converse } from "@converse/headless/core";
const u = converse.env.utils;
converse.plugins.add('converse-rootview', {
initialize () {
api.settings.extend({
'auto_insert': true
});
function ensureElement () {
if (!api.settings.get('auto_insert')) {
return;
}
const root = api.settings.get('root');
if (!root.querySelector('converse-root#conversejs')) {
const el = document.createElement('converse-root');
el.setAttribute('id', 'conversejs');
u.addClass(`theme-${api.settings.get('theme')}`, el);
const body = root.querySelector('body');
if (body) {
body.appendChild(el);
} else {
root.appendChild(el); // Perhaps inside a web component?
}
}
}
api.listen.on('chatBoxesInitialized', ensureElement);
}
});

2
src/plugins/rootview/root.js
View File

@ -18,7 +18,9 @@ class ConverseRoot extends CustomElement {
connectedCallback () { connectedCallback () {
super.connectedCallback(); super.connectedCallback();
this.classList.add('converse-root');
this.classList.add(`converse-${api.settings.get('view_mode')}`); this.classList.add(`converse-${api.settings.get('view_mode')}`);
this.classList.add(`theme-${api.settings.get('theme')}`);
this.setAttribute('id', 'conversejs'); this.setAttribute('id', 'conversejs');
} }
} }

5
src/plugins/rootview/utils.js
View File

@ -1,6 +1,5 @@
import { api, converse } from '@converse/headless/core'; import { api } from '@converse/headless/core';
const u = converse.env.utils;
export function ensureElement () { export function ensureElement () {
if (!api.settings.get('auto_insert')) { if (!api.settings.get('auto_insert')) {
@ -9,8 +8,6 @@ export function ensureElement () {
const root = api.settings.get('root'); const root = api.settings.get('root');
if (!root.querySelector('converse-root#conversejs')) { if (!root.querySelector('converse-root#conversejs')) {
const el = document.createElement('converse-root'); const el = document.createElement('converse-root');
el.setAttribute('id', 'conversejs');
u.addClass(`theme-${api.settings.get('theme')}`, el);
const body = root.querySelector('body'); const body = root.querySelector('body');
if (body) { if (body) {
body.appendChild(el); body.appendChild(el);

2
src/plugins/rosterview/styles/roster.scss
View File

@ -1,4 +1,4 @@
#conversejs #converse-roster { .converse-root #converse-roster {
text-align: left; text-align: left;
width: 100%; width: 100%;
position: relative; position: relative;

6
src/shared/autocomplete/styles/_autocomplete.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
[hidden] { display: none; } [hidden] { display: none; }
.visually-hidden { .visually-hidden {
@ -128,13 +128,13 @@
} }
} }
#conversejs.converse-fullscreen { .converse-root.converse-fullscreen {
.suggestion-box__results--above { .suggestion-box__results--above {
bottom: 4.5em; bottom: 4.5em;
} }
} }
#conversejs.converse-overlayed { .converse-root.converse-overlayed {
.suggestion-box__results--above { .suggestion-box__results--above {
bottom: 3.5em; bottom: 3.5em;
} }

6
src/shared/chat/styles/emoji.scss
View File

@ -2,7 +2,7 @@
@import "bootstrap/scss/variables"; @import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins"; @import "bootstrap/scss/mixins";
#conversejs { .converse-root {
@import "bootstrap/scss/media"; @import "bootstrap/scss/media";
.chatbox { .chatbox {
@ -192,7 +192,7 @@
} }
} }
#conversejs { .converse-root {
converse-chats { converse-chats {
&.converse-overlayed { &.converse-overlayed {
converse-emoji-dropdown { converse-emoji-dropdown {
@ -268,7 +268,7 @@
} }
@include media-breakpoint-up(m) { @include media-breakpoint-up(m) {
#conversejs { .converse-root {
.chatbox { .chatbox {
converse-emoji-picker { converse-emoji-picker {
max-width: 40em; max-width: 40em;

2
src/shared/chat/styles/toolbar.scss
View File

@ -2,7 +2,7 @@
@import "bootstrap/scss/variables"; @import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins"; @import "bootstrap/scss/mixins";
#conversejs { .converse-root {
.send-button { .send-button {
border-radius: 0; border-radius: 0;

2
src/shared/chat/styles/unfurl.scss
View File

@ -2,7 +2,7 @@
@import "bootstrap/scss/variables"; @import "bootstrap/scss/variables";
@import "shared/styles/_mixins.scss"; @import "shared/styles/_mixins.scss";
#conversejs { .converse-root {
@import "bootstrap/scss/card"; @import "bootstrap/scss/card";
.message { .message {

18
src/shared/styles/_core.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
bottom: 0; bottom: 0;
height: 100%; height: 100%;
position: fixed; position: fixed;
@ -447,7 +447,7 @@
font-size: 3.75em; font-size: 3.75em;
} }
} }
#conversejs:not(.converse-embedded) { .converse-root:not(.converse-embedded) {
.chatbox { .chatbox {
.chat-body { .chat-body {
border-radius: var(--chatbox-border-radius); border-radius: var(--chatbox-border-radius);
@ -461,33 +461,33 @@
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
#conversejs .offset-sm-2 { .converse-root .offset-sm-2 {
margin-left: 16.666667%; margin-left: 16.666667%;
} }
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
#conversejs .offset-md-2 { .converse-root .offset-md-2 {
margin-left: 16.666667%; margin-left: 16.666667%;
} }
#conversejs .offset-md-3 { .converse-root .offset-md-3 {
margin-left: 25%; margin-left: 25%;
} }
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
#conversejs .offset-lg-2 { .converse-root .offset-lg-2 {
margin-left: 16.666667%; margin-left: 16.666667%;
} }
#conversejs .offset-lg-3 { .converse-root .offset-lg-3 {
margin-left: 25%; margin-left: 25%;
} }
} }
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
#conversejs .offset-xl-2 { .converse-root .offset-xl-2 {
margin-left: 16.666667%; margin-left: 16.666667%;
} }
} }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#conversejs { .converse-root {
left: 0; left: 0;
} }
} }

4
src/shared/styles/_variables.scss
View File

@ -1,7 +1,7 @@
$mobile_landscape_height: 450px !default; $mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default; $mobile_portrait_length: 480px !default;
#conversejs, #conversejs-bg, body.converse-fullscreen { .converse-root, .converse-root-bg, body.converse-fullscreen {
--subdued-color: #A8ABA1; --subdued-color: #A8ABA1;
--green: #3AA569; --green: #3AA569;
@ -193,7 +193,7 @@ $mobile_portrait_length: 480px !default;
--list-dot-circle-color: #f6dec1; // lighten($orange, 25%) --list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
} }
#conversejs.theme-concord { .converse-root.theme-concord {
--avatar-border-radius: 10%; --avatar-border-radius: 10%;
--avatar-border: 0px; --avatar-border: 0px;
--avatar-background-color: none; --avatar-background-color: none;

2
src/shared/styles/badges.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
@import "bootstrap/scss/badge"; @import "bootstrap/scss/badge";
.badge { .badge {

2
src/shared/styles/buttons.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
@import "bootstrap/scss/buttons"; @import "bootstrap/scss/buttons";
@import "bootstrap/scss/button-group"; @import "bootstrap/scss/button-group";

2
src/shared/styles/font-awesome.scss vendored
View File

@ -64,7 +64,7 @@
@import "@fortawesome/fontawesome-free/scss/icons"; @import "@fortawesome/fontawesome-free/scss/icons";
@import "@fortawesome/fontawesome-free/scss/screen-reader"; @import "@fortawesome/fontawesome-free/scss/screen-reader";
#conversejs, .converse-website { .converse-root, .converse-website {
/* Apparent font-awesome bug? The circle has some kind of bottom margin */ /* Apparent font-awesome bug? The circle has some kind of bottom margin */
converse-icon:before { converse-icon:before {

2
src/shared/styles/forms.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
@import "bootstrap/scss/forms"; @import "bootstrap/scss/forms";
@import "bootstrap/scss/input-group"; @import "bootstrap/scss/input-group";
@import "bootstrap/scss/custom-forms"; @import "bootstrap/scss/custom-forms";

2
src/shared/styles/index.scss
View File

@ -11,7 +11,7 @@
@import "./font-awesome.scss"; @import "./font-awesome.scss";
@import "mixins"; @import "mixins";
#conversejs { .converse-root {
@import "bootstrap/scss/root"; @import "bootstrap/scss/root";
@import "bootstrap/scss/reboot"; @import "bootstrap/scss/reboot";
@import "bootstrap/scss/type"; @import "bootstrap/scss/type";

2
src/shared/styles/lists.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
@import "bootstrap/scss/list-group"; @import "bootstrap/scss/list-group";
.list-group-item.active { .list-group-item.active {

2
src/shared/styles/messages.scss
View File

@ -1,4 +1,4 @@
#conversejs { .converse-root {
.styling-directive { .styling-directive {
color: var(--subdued-color); color: var(--subdued-color);
} }