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/mixins";
#conversejs {
.converse-root {
@import "bootstrap/scss/modal";
#converse-modals {

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

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

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

@ -1,4 +1,4 @@
#conversejs {
.converse-root {
converse-chats {
&.converse-chatboxes {
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 "shared/styles/_variables.scss";
#conversejs {
.converse-root {
.chatbox {
.bottom-panel {

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

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

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

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

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

@ -8,7 +8,7 @@
/* ******************* Overlay and embedded styles *************************** */
#conversejs {
.converse-root {
converse-chats.converse-embedded,
converse-chats.converse-overlayed {
.controlbox-head {
@ -80,7 +80,7 @@
}
@include media-breakpoint-down(sm) {
#conversejs.converse-overlayed {
.converse-root.converse-overlayed {
> .row {
flex-direction: column;
&.no-gutters {
@ -91,7 +91,7 @@
}
#conversejs {
.converse-root {
converse-chats.converse-embedded,
converse-chats.converse-fullscreen {
.flyout {
@ -176,7 +176,7 @@
/* ******************* Fullpage styles *************************** */
#conversejs {
.converse-root {
converse-chats.converse-fullscreen {
.chatbox-btn {
font-size: var(--fullpage-chatbox-button-size);
@ -216,7 +216,7 @@
@include media-breakpoint-down(sm) {
#conversejs {
.converse-root {
converse-chats:not(.converse-embedded) {
> .row {
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/_mixins.scss";
#conversejs {
.converse-root {
.oauth-providers {
text-align: center;
.oauth-provider {
@ -387,7 +387,7 @@
}
}
#conversejs {
.converse-root {
converse-chats {
&.converse-overlayed {
@ -612,7 +612,7 @@
@include media-breakpoint-down(sm) {
#conversejs {
.converse-root {
left: 0;
right: 0;
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/mixins";
#conversejs-bg {
.converse-root-bg {
.subdued {
opacity: 0.35;
}

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

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

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

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

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

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

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

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

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

@ -1,4 +1,4 @@
#conversejs {
.converse-root {
converse-muc.chatroom {
.chat-head-chatroom {
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 {
.box-flyout {
.occupants {

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

@ -4,7 +4,7 @@
@import "plugins/chatview/styles/chatbox.scss";
@import "./muc-forms.scss";
#conversejs {
.converse-root {
.chatroom {
width: var(--chatroom-width);
@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 () {
super.connectedCallback();
this.classList.add('converse-root');
this.classList.add(`converse-${api.settings.get('view_mode')}`);
this.classList.add(`theme-${api.settings.get('theme')}`);
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 () {
if (!api.settings.get('auto_insert')) {
@ -9,8 +8,6 @@ export function ensureElement () {
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);

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,7 +1,7 @@
$mobile_landscape_height: 450px !default;
$mobile_portrait_length: 480px !default;
#conversejs, #conversejs-bg, body.converse-fullscreen {
.converse-root, .converse-root-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%)
}
#conversejs.theme-concord {
.converse-root.theme-concord {
--avatar-border-radius: 10%;
--avatar-border: 0px;
--avatar-background-color: none;

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

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

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

@ -1,4 +1,4 @@
#conversejs {
.converse-root {
@import "bootstrap/scss/buttons";
@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/screen-reader";
#conversejs, .converse-website {
.converse-root, .converse-website {
/* Apparent font-awesome bug? The circle has some kind of bottom margin */
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/input-group";
@import "bootstrap/scss/custom-forms";

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

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

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

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

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

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