Начало Каталог Помощ
Регистрация Вход
im-changing.ru
/
converse.js
огледало от https://github.com/conversejs/converse.js.git
2
0
Разклонения 0
Файлове Задачи 0 Уики
Преглед на файлове

Move background into a component

JC Brand преди 8 месеца
родител
23331f41bc
ревизия
f411ed2861
променени са 14 файла, в които са добавени 134 реда и са изтрити 147 реда
Разделен изглед Покажи статистика за разликите
  1. 2 2
      dev.html
  2. 0 6
      src/plugins/chatboxviews/view.js
  3. 0 1
      src/plugins/fullscreen/styles/fullscreen.scss
  4. 28 0
      src/plugins/rootview/background.js
  5. 1 0
      src/plugins/rootview/index.js
  6. 85 0
      src/plugins/rootview/styles/background.scss
  7. 0 0
      src/plugins/rootview/templates/background_logo.js
  8. 0 134
      src/shared/styles/background.scss
  9. 0 1
      src/shared/styles/index.scss
  10. 3 1
      src/shared/styles/themes/classic.scss
  11. 2 1
      src/shared/styles/themes/cyberpunk.scss
  12. 2 1
      src/shared/styles/themes/dracula.scss
  13. 8 0
      src/types/plugins/rootview/background.d.ts
  14. 3 0
      src/types/plugins/rootview/templates/background_logo.d.ts

+ 2 - 2
dev.html
Целия файл 

@@ -16,9 +16,9 @@
 
 </head>
 
 
 <body class="reset" style="background-color: var(--global-background-color)">
 
-<div id="conversejs-bg"></div>
 
-<script>
 
+<converse-bg></converse-bg>
 
 
+<script>
 
     converse.plugins.add('converse-debug', {
 
         initialize () {
 
             const { _converse } = this;

+ 0 - 6
src/plugins/chatboxviews/view.js
Целия файл 

@@ -1,6 +1,4 @@
 
-import { render } from 'lit';
 
 import { api, _converse } from '@converse/headless';
 
-import tplBackgroundLogo from '../../templates/background_logo.js';
 
 import tplChats from './templates/chats.js';
 
 import { CustomElement } from 'shared/components/element.js';
 
 
@@ -26,10 +24,6 @@ class ConverseChats extends CustomElement {
 
         this.listenTo(settings, 'change:view_mode', () => this.requestUpdate())
 
         this.listenTo(settings, 'change:singleton', () => this.requestUpdate())
 
 
-        const bg = document.getElementById('conversejs-bg');
 
-        if (bg && !bg.innerHTML.trim()) {
 
-            render(tplBackgroundLogo(), bg);
 
-        }
 
         const body = document.querySelector('body');
 
         body.classList.add(`converse-${api.settings.get('view_mode')}`);

+ 0 - 1
src/plugins/fullscreen/styles/fullscreen.scss
Целия файл 

@@ -1,5 +1,4 @@
 
 body.converse-fullscreen {
 
     margin: 0;
 
-    background-color: var(--global-background-color);
 
     overflow: hidden;
 
 }

+ 28 - 0
src/plugins/rootview/background.js
Целия файл 

@@ -0,0 +1,28 @@
 
+import { api } from '@converse/headless';
 
+import { CustomElement } from 'shared/components/element.js';
 
+import tplBackground from './templates/background_logo.js';
 
+import { getTheme } from './utils.js';
 
+
 
+import './styles/background.scss';
 
+
 
+
 
+class ConverseBackground extends CustomElement {
 
+
 
+    initialize() {
 
+        this.setClasses();
 
+    }
 
+
 
+    render() {
 
+        return api.settings.get('view_mode') === 'fullscreen' && tplBackground();
 
+    }
 
+
 
+    setClasses () {
 
+        this.classList.add(`theme-${getTheme()}`);
 
+        this.requestUpdate();
 
+    }
 
+}
 
+
 
+
 
+api.elements.define('converse-bg', ConverseBackground);
 
+
 
+export default ConverseBackground;

+ 1 - 0
src/plugins/rootview/index.js
Целия файл 

@@ -1,4 +1,5 @@
 
 import ConverseRoot from './root.js';
 
+import ConverseBackground from './background.js';
 
 import { api, converse } from '@converse/headless';
 
 import { ensureElement } from './utils.js';

+ 85 - 0
src/plugins/rootview/styles/background.scss
Целия файл 

@@ -0,0 +1,85 @@
 
+@import "bootstrap/scss/functions";
 
+@import "bootstrap/scss/variables";
 
+@import "bootstrap/scss/maps";
 
+@import "bootstrap/scss/mixins";
 
+@import "bootstrap/scss/utilities";
 
+
 
+converse-bg {
 
+    display: inline-block;
 
+    height: 100vh;
 
+    width: 100vw;
 
+    background-color: var(--global-background-color);
 
+
 
+    .subdued {
 
+        opacity: 0.35;
 
+    }
 
+    .converse-brand {
 
+        margin-top: 25vh;
 
+        display: flex;
 
+        justify-content: space-between;
 
+        animation-name: fadein;
 
+        animation-fill-mode: forwards;
 
+        animation-duration: 5s;
 
+        animation-timing-function: ease;
 
+    }
 
+    .converse-brand__text {
 
+        color: var(--foreground);
 
+        font-family: var(--branding-font);
 
+        font-weight: normal;
 
+        text-align: center;
 
+        font-size: 140%;
 
+        margin-left: 0.2em;
 
+        .byline {
 
+            margin: 0;
 
+            font-family: var(--heading-font);
 
+            font-size: 0.3em;
 
+            opacity: 0.55;
 
+            margin-bottom: 2em;
 
+            margin-left: -2.7em;
 
+            word-spacing: 5px;
 
+        }
 
+    }
 
+
 
+    @include media-breakpoint-down(sm) {
 
+        .converse-brand {
 
+            display: none;
 
+        }
 
+    }
 
+
 
+    .converse-brand__padding {
 
+        @include make-col-ready();
 
+        @include media-breakpoint-up(md) {
 
+            @include make-col(4);
 
+        }
 
+        @include media-breakpoint-up(lg) {
 
+            @include make-col(3);
 
+        }
 
+        @include media-breakpoint-up(xl) {
 
+            @include make-col(2);
 
+        }
 
+        padding: 0;
 
+    }
 
+
 
+    .converse-brand__heading {
 
+        @include make-col-ready();
 
+        @include media-breakpoint-up(md) {
 
+            font-size: 4em;
 
+            @include make-col(8);
 
+        }
 
+        @include media-breakpoint-up(lg) {
 
+            font-size: 5em;
 
+            @include make-col(9);
 
+        }
 
+        @include media-breakpoint-up(xl) {
 
+            font-size: 6em;
 
+            @include make-col(10);
 
+        }
 
+        padding: 0;
 
+        display: flex;
 
+        justify-content: center;
 
+        margin: auto;
 
+        svg {
 
+            margin-top: 0.3em;
 
+        }
 
+    }
 
+}

+ 0 - 0
src/templates/background_logo.js → src/plugins/rootview/templates/background_logo.js
Целия файл


+ 0 - 134
src/shared/styles/background.scss
Целия файл 

@@ -1,134 +0,0 @@
 
-@import "bootstrap/scss/functions";
 
-@import "bootstrap/scss/variables";
 
-@import "bootstrap/scss/mixins";
 
-
 
-#conversejs-bg {
 
-    .subdued {
 
-        opacity: 0.35;
 
-    }
 
-    .converse-brand {
 
-        display: flex;
 
-        justify-content: space-between;
 
-        animation-name: fadein;
 
-        animation-fill-mode: forwards;
 
-        animation-duration: 5s;
 
-        animation-timing-function: ease;
 
-    }
 
-    .converse-brand__text {
 
-        color: #ffffff;
 
-        font-family: var(--branding-font);
 
-        font-weight: normal;
 
-        text-align: center;
 
-        font-size: 140%;
 
-        margin-left: 0.2em;
 
-        .byline {
 
-            margin: 0;
 
-            font-family: var(--heading-font);
 
-            font-size: 0.3em;
 
-            opacity: 0.55;
 
-            margin-bottom: 2em;
 
-            margin-left: -2.7em;
 
-            word-spacing: 5px;
 
-        }
 
-    }
 
-
 
-    @media screen and (max-width: $mobile-portrait-length) {
 
-        .converse-brand {
 
-            display: none;
 
-        }
 
-    }
 
-    @include media-breakpoint-down(sm) {
 
-        .converse-brand {
 
-            display: none;
 
-        }
 
-    }
 
-}
 
-
 
-.converse-fullscreen {
 
-    #conversejs-bg {
 
-        .converse-brand {
 
-            margin-top: 15vh;
 
-        }
 
-
 
-        .converse-brand__padding {
 
-            @include make-col-ready();
 
-            @include media-breakpoint-up(md) {
 
-                @include make-col(4);
 
-            }
 
-            @include media-breakpoint-up(lg) {
 
-                @include make-col(3);
 
-            }
 
-            @include media-breakpoint-up(xl) {
 
-                @include make-col(2);
 
-            }
 
-            padding: 0;
 
-        }
 
-
 
-        .converse-brand__heading {
 
-            @include make-col-ready();
 
-            @include media-breakpoint-up(md) {
 
-                font-size: 4em;
 
-                @include make-col(8);
 
-            }
 
-            @include media-breakpoint-up(lg) {
 
-                font-size: 5em;
 
-                @include make-col(9);
 
-            }
 
-            @include media-breakpoint-up(xl) {
 
-                font-size: 6em;
 
-                @include make-col(10);
 
-            }
 
-            padding: 0;
 
-            display: flex;
 
-            justify-content: center;
 
-            margin: auto;
 
-            svg {
 
-                margin-top: 0.3em;
 
-            }
 
-        }
 
-    }
 
-}
 
-
 
-.converse-overlayed {
 
-    #conversejs-bg {
 
-        height: 100vh;
 
-        width: 100vw;
 
-        background-color: var(--global-background-color);
 
-        .converse-brand__padding {
 
-            @include make-col-ready();
 
-            @include media-breakpoint-up(md) {
 
-                @include make-col(2);
 
-            }
 
-            @include media-breakpoint-up(lg) {
 
-                @include make-col(1);
 
-            }
 
-            @include media-breakpoint-up(xl) {
 
-                @include make-col(1);
 
-            }
 
-            padding: 0;
 
-        }
 
-
 
-        .converse-brand__heading {
 
-            @include make-col-ready();
 
-            @include media-breakpoint-up(md) {
 
-                font-size: 4em;
 
-                @include make-col(8);
 
-            }
 
-            @include media-breakpoint-up(lg) {
 
-                font-size: 5em;
 
-                @include make-col(10);
 
-            }
 
-            @include media-breakpoint-up(xl) {
 
-                font-size: 6em;
 
-                @include make-col(10);
 
-            }
 
-            padding: 0;
 
-            display: flex;
 
-            justify-content: center;
 
-            margin: auto;
 
-            svg {
 
-                margin-top: 0.3em;
 
-            }
 
-        }
 
-    }
 
-}

+ 0 - 1
src/shared/styles/index.scss
Целия файл 

@@ -66,5 +66,4 @@ $prefix: 'converse-';
 
 @import "forms";
 
 @import "lists";
 
 @import "messages";
 
-@import "background";
 
 @import "fonts";

+ 3 - 1
src/shared/styles/themes/classic.scss
Целия файл 

@@ -1,4 +1,6 @@
 
-.conversejs, .conversejs-bg, #conversejs-bg, body.converse-fullscreen {
 
+body.converse-fullscreen,
 
+converse-bg.theme-classic,
 
+converse-root.theme-classic {
 
     // Theme-defined variables:
 
     --green: #3AA569;
 
     --dark-green: #1E9652;

+ 2 - 1
src/shared/styles/themes/cyberpunk.scss
Целия файл 

@@ -1,4 +1,5 @@
 
-.conversejs.theme-cyberpunk {
 
+converse-bg.theme-cyberpunk,
 
+converse-root.theme-cyberpunk {
 
     // Theme-defined variables:
 
     // https://bootswatch.com/vapor
 
     $theme: 'vapor' !default;

+ 2 - 1
src/shared/styles/themes/dracula.scss
Целия файл 

@@ -1,4 +1,5 @@
 
-.conversejs.theme-dracula {
 
+converse-bg.theme-dracula,
 
+converse-root.theme-dracula {
 
     // Theme-defined variables:
 
     // https://draculatheme.com

+ 8 - 0
src/types/plugins/rootview/background.d.ts
Целия файл 

@@ -0,0 +1,8 @@
 
+export default ConverseBackground;
 
+declare class ConverseBackground extends CustomElement {
 
+    initialize(): void;
 
+    render(): import("lit").TemplateResult<1>;
 
+    setClasses(): void;
 
+}
 
+import { CustomElement } from "shared/components/element.js";
 
+//# sourceMappingURL=background.d.ts.map

+ 3 - 0
src/types/plugins/rootview/templates/background_logo.d.ts
Целия файл 

@@ -0,0 +1,3 @@
 
+declare function _default(): import("lit").TemplateResult<1>;
 
+export default _default;
 
+//# sourceMappingURL=background_logo.d.ts.map