Startseite Erkunden Hilfe
Registrieren Anmelden
im-changing.ru
/
converse.js
Mirror von https://github.com/conversejs/converse.js.git
2
0
Fork 0
Dateien Issues 0 Wiki
Quellcode durchsuchen

Add new config option `show_background`.

It's now possible to show the Converse logo and background also in
overlayed view mode.
JC Brand vor 10 Monaten
Ursprung
cf71d7c90d
Commit
e03fc79871
13 geänderte Dateien mit 94 neuen und 93 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 2 0
      CHANGES.md
  2. 1 1
      dev.html
  3. 8 0
      docs/source/configuration.rst
  4. 2 1
      fullscreen.html
  5. 2 1
      src/headless/plugins/headlines/feed.js
  6. 1 1
      src/plugins/rootview/background.js
  7. 4 3
      src/plugins/rootview/index.js
  8. 2 15
      src/plugins/rootview/styles/background.scss
  9. 1 0
      src/plugins/rootview/styles/root.scss
  10. 69 70
      src/plugins/rootview/templates/background_logo.js
  11. 1 0
      src/plugins/rootview/templates/root.js
  12. 0 1
      src/shared/styles/themes/cyberpunk.scss
  13. 1 0
      webpack.html

+ 2 - 0
CHANGES.md
Datei anzeigen 

@@ -37,6 +37,8 @@
 
 - Improved accessibility.
 
 - New "getOccupantActionButtons" hook, so that plugins can add actions on MUC occupants.
 
 
+- New config option [stanza_timeout](https://conversejs.org/docs/html/configuration.html#show-background)
 
+
 
 ### Breaking changes:
 
 
 - Remove the old `_converse.BootstrapModal` in favor of `_converse.BaseModal` which is a web component.

+ 1 - 1
dev.html
Datei anzeigen 

@@ -16,7 +16,6 @@
 
 </head>
 
 
 <body class="reset" style="background-color: var(--global-background-color)">
 
-<converse-bg></converse-bg>
 
 
 <script>
 
     converse.plugins.add('converse-debug', {
 
@@ -33,6 +32,7 @@
 
         enable_smacks: true,
 
         loglevel: 'debug',
 
         prune_messages_above: 100,
 
+        show_background: true,
 
         message_archiving: 'always',
 
         muc_respect_autojoin: true,
 
         muc_show_logs_before_join: true,

+ 8 - 0
docs/source/configuration.rst
Datei anzeigen 

@@ -1953,6 +1953,14 @@ purpose of this setting is merely to turn on or off the sending of the
 
 individual markers.
 
 
 
+show_background
 
+---------------
 
+
 
+* Default: ``true``
 
+
 
+Wether a background with the Converse logo should be shown.
 
+
 
+
 
 show_chat_state_notifications
 
 -----------------------------

+ 2 - 1
fullscreen.html
Datei anzeigen 

@@ -55,7 +55,8 @@
 
         auto_reconnect: true,
 
         bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
 
         message_archiving: 'always',
 
-        view_mode: 'fullscreen'
 
+        view_mode: 'fullscreen',
 
+        show_background: true,
 
     });
 
 </script>
 
 </body>

+ 2 - 1
src/headless/plugins/headlines/feed.js
Datei anzeigen 

@@ -1,5 +1,6 @@
 
 import ChatBox from '../../plugins/chat/model.js';
 
 import api from "../../shared/api/index.js";
 
+import { isUniView } from '../../utils/session.js';
 
 import { HEADLINES_TYPE } from '../../shared/constants.js';
 
 
 
@@ -14,7 +15,7 @@ export default class HeadlinesFeed extends ChatBox {
 
     defaults () {
 
         return {
 
             'bookmarked': false,
 
-            'hidden': ['mobile', 'fullscreen'].includes(api.settings.get("view_mode")),
 
+            'hidden': isUniView() && !api.settings.get('singleton'),
 
             'message_type': 'headline',
 
             'num_unread': 0,
 
             'time_opened': this.get('time_opened') || (new Date()).getTime(),

+ 1 - 1
src/plugins/rootview/background.js
Datei anzeigen 

@@ -13,7 +13,7 @@ class ConverseBackground extends CustomElement {
 
     }
 
 
     render() {
 
-        return api.settings.get('view_mode') === 'fullscreen' && tplBackground();
 
+        return tplBackground();
 
     }
 
 
     setClasses () {

+ 4 - 3
src/plugins/rootview/index.js
Datei anzeigen 

@@ -12,9 +12,10 @@ converse.plugins.add('converse-rootview', {
 
         // Refer to docs/source/configuration.rst for explanations of these
 
         // configuration settings.
 
         api.settings.extend({
 
-            'auto_insert': true,
 
-            'theme': 'classic',
 
-            'dark_theme': 'dracula',
 
+            auto_insert: true,
 
+            theme: 'classic',
 
+            dark_theme: 'dracula',
 
+            show_background: false,
 
         });
 
 
         api.listen.on('chatBoxesInitialized', ensureElement);

+ 2 - 15
src/plugins/rootview/styles/background.scss
Datei anzeigen 

@@ -50,20 +50,6 @@ converse-bg {
 
         }
 
     }
 
 
-    .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) {
 
@@ -79,11 +65,12 @@ converse-bg {
 
             @include make-col(10);
 
         }
 
         padding: 0;
 
+        padding-top: 15%;
 
         display: flex;
 
         justify-content: center;
 
         margin: auto;
 
         svg {
 
-            margin-top: 0.3em;
 
+            margin-top: 0.4em;
 
         }
 
     }
 
 }

+ 1 - 0
src/plugins/rootview/styles/root.scss
Datei anzeigen 

@@ -3,6 +3,7 @@ converse-root {
 
     &.converse-overlayed,
 
     &.converse-mobile {
 
         bottom: 0;
 
+        left: 0;
 
         height: 100%;
 
         padding-left: env(safe-area-inset-left);
 
         padding-right: env(safe-area-inset-right);

+ 69 - 70
src/plugins/rootview/templates/background_logo.js
Datei anzeigen 

@@ -3,78 +3,77 @@ import { html } from 'lit';
 
 import { api } from '@converse/headless';
 
 
 export default () => html`
 
-	${api.settings.get('theme') === 'cyberpunk'
 
-		? html` <section class="moving-grid">
 
-				<div class="container">
 
-					<div class="static-lines">${[...Array(20).keys()].map(() => html`<div class="vert"></div> `)}</div>
 
-					<div class="moving-lines">${[...Array(60).keys()].map(() => html`<div class="horz"></div> `)}</div>
 
-				</div>
 
-			</section>`
 
-		: ''}
 
+    ${api.settings.get('theme') === 'cyberpunk'
 
+        ? html` <section class="moving-grid">
 
+              <div class="container">
 
+                  <div class="static-lines">${[...Array(20).keys()].map(() => html`<div class="vert"></div> `)}</div>
 
+                  <div class="moving-lines">${[...Array(60).keys()].map(() => html`<div class="horz"></div> `)}</div>
 
+              </div>
 
+          </section>`
 
+        : ''}
 
 
-	<div class="inner-content converse-brand row">
 
-		<div class="converse-brand__padding"></div>
 
-		<div class="converse-brand__heading">
 
-			<svg
 
-				height="200px"
 
-				xmlns="http://www.w3.org/2000/svg"
 
-				xmlns:xlink="http://www.w3.org/1999/xlink"
 
-				viewBox="0 0 364 364"
 
-				version="1.1"
 
-			>
 
-				<title>Logo Converse</title>
 
-				<defs>
 
-					<linearGradient
 
-						id="gradient"
 
-						x1="92.14"
 
-						y1="27.64"
 
-						x2="267.65"
 
-						y2="331.62"
 
-						gradientUnits="userSpaceOnUse"
 
-					>
 
-						<stop offset="0" stop-color="#fff1d1" />
 
-						<stop offset="0.05" stop-color="#fae8c1" />
 
-						<stop offset="0.15" stop-color="#f0d5a1" />
 
-						<stop offset="0.27" stop-color="#e7c687" />
 
-						<stop offset="0.4" stop-color="#e1bb72" />
 
-						<stop offset="0.54" stop-color="#dcb264" />
 
-						<stop offset="0.71" stop-color="#daad5c" />
 
-						<stop offset="1" stop-color="#d9ac59" />
 
-					</linearGradient>
 
-					<filter id="shadow">
 
-						<feGaussianBlur in="SourceAlpha" stdDeviation="2.3" result="blur1" />
 
-						<feOffset in="blur1" dx="3" dy="3" result="blur2" />
 
-						<feColorMatrix
 
-							in="blur2"
 
-							type="matrix"
 
-							result="blur3"
 
-							values="1 0 0 0 0.1
 
+    <div class="inner-content converse-brand row">
 
+        <div class="converse-brand__heading">
 
+            <svg
 
+                height="160px"
 
+                xmlns="http://www.w3.org/2000/svg"
 
+                xmlns:xlink="http://www.w3.org/1999/xlink"
 
+                viewBox="0 0 364 364"
 
+                version="1.1"
 
+            >
 
+                <title>Logo Converse</title>
 
+                <defs>
 
+                    <linearGradient
 
+                        id="gradient"
 
+                        x1="92.14"
 
+                        y1="27.64"
 
+                        x2="267.65"
 
+                        y2="331.62"
 
+                        gradientUnits="userSpaceOnUse"
 
+                    >
 
+                        <stop offset="0" stop-color="#fff1d1" />
 
+                        <stop offset="0.05" stop-color="#fae8c1" />
 
+                        <stop offset="0.15" stop-color="#f0d5a1" />
 
+                        <stop offset="0.27" stop-color="#e7c687" />
 
+                        <stop offset="0.4" stop-color="#e1bb72" />
 
+                        <stop offset="0.54" stop-color="#dcb264" />
 
+                        <stop offset="0.71" stop-color="#daad5c" />
 
+                        <stop offset="1" stop-color="#d9ac59" />
 
+                    </linearGradient>
 
+                    <filter id="shadow">
 
+                        <feGaussianBlur in="SourceAlpha" stdDeviation="2.3" result="blur1" />
 
+                        <feOffset in="blur1" dx="3" dy="3" result="blur2" />
 
+                        <feColorMatrix
 
+                            in="blur2"
 
+                            type="matrix"
 
+                            result="blur3"
 
+                            values="1 0 0 0 0.1
 
                                     0 1 0 0 0.1
 
                                     0 0 1 0 0.1
 
                                     0 0 0 1 0"
 
-						/>
 
-						<feMerge>
 
-							<feMergeNode in="blur3" />
 
-							<feMergeNode in="SourceGraphic" />
 
-						</feMerge>
 
-					</filter>
 
-				</defs>
 
-				<g filter="url(#shadow)">
 
-					<path
 
-						d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z"
 
-						fill="#d9ac59"
 
-					/>
 
-					<path
 
-						d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z"
 
-						fill="url(#gradient)"
 
-					/>
 
-				</g>
 
-			</svg>
 
-			<span class="converse-brand__text">
 
-				<span>converse<span class="subdued">.js</span></span>
 
-				<p class="byline">messaging freedom</p>
 
-			</span>
 
-		</div>
 
-		${api.settings.get('view_mode') === 'overlayed' ? html`<div class="converse-brand__padding"></div>` : ''}
 
-	</div>
 
+                        />
 
+                        <feMerge>
 
+                            <feMergeNode in="blur3" />
 
+                            <feMergeNode in="SourceGraphic" />
 
+                        </feMerge>
 
+                    </filter>
 
+                </defs>
 
+                <g filter="url(#shadow)">
 
+                    <path
 
+                        d="M221.46,103.71c0,18.83-29.36,18.83-29.12,0C192.1,84.88,221.46,84.88,221.46,103.71Z"
 
+                        fill="#d9ac59"
 
+                    />
 
+                    <path
 
+                        d="M179.9,4.15A175.48,175.48,0,1,0,355.38,179.63,175.48,175.48,0,0,0,179.9,4.15Zm-40.79,264.5c-.23-17.82,27.58-17.82,27.58,0S138.88,286.48,139.11,268.65ZM218.6,168.24A79.65,79.65,0,0,1,205.15,174a12.76,12.76,0,0,0-6.29,4.65L167.54,222a1.36,1.36,0,0,1-2.46-.8v-35.8a2.58,2.58,0,0,0-3.06-2.53c-15.43,3-30.23,7.7-42.73,19.94-38.8,38-29.42,105.69,16.09,133.16a162.25,162.25,0,0,1-91.47-67.27C-3.86,182.26,34.5,47.25,138.37,25.66c46.89-9.75,118.25,5.16,123.73,62.83C265.15,120.64,246.56,152.89,218.6,168.24Z"
 
+                        fill="url(#gradient)"
 
+                    />
 
+                </g>
 
+            </svg>
 
+            <span class="converse-brand__text">
 
+                <span>converse<span class="subdued">.js</span></span>
 
+                <p class="byline">messaging freedom</p>
 
+            </span>
 
+        </div>
 
+        ${api.settings.get('view_mode') === 'overlayed' ? html`<div class="converse-brand__padding"></div>` : ''}
 
+    </div>
 
 `;

+ 1 - 0
src/plugins/rootview/templates/root.js
Datei anzeigen 

@@ -6,6 +6,7 @@ export default () => {
 
     const extra_classes = api.settings.get('singleton') ? ['converse-singleton'] : [];
 
     extra_classes.push(`converse-${api.settings.get('view_mode')}`);
 
     return html`
 
+        ${api.settings.get('show_background') ? html`<converse-bg></converse-bg>` : ''}
 
         <converse-chats class="converse-chatboxes row justify-content-start g-0 ${extra_classes.join(' ')}"></converse-chats>
 
         <div id="converse-modals" class="modals"></div>
 
         <converse-fontawesome></converse-fontawesome>

+ 0 - 1
src/shared/styles/themes/cyberpunk.scss
Datei anzeigen 

@@ -245,7 +245,6 @@ converse-root.theme-cyberpunk {
 
 		width: 100%;
 
 		height: 70%;
 
 		perspective: 1000px;
 
-		z-index: 1;
 
 		&:before {
 
 			content: '';
 
 			position: absolute;

+ 1 - 0
webpack.html
Datei anzeigen 

@@ -48,6 +48,7 @@
 
             muc_show_logs_before_join: true,
 
             whitelisted_plugins: ['converse-debug', 'converse-batched-probe'],
 
             blacklisted_plugins: [],
 
+            show_background: true,
 
         });
 
     });
 
 </script>