Add new config option show_background.

It's now possible to show the Converse logo and background also in overlayed view mode.
conversejs · Aug 29, 2024 · e03fc79 · e03fc79
1 parent cf71d7c
commit e03fc79
Show file tree

Hide file tree

Showing 13 changed files with 94 additions and 93 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -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.

diff --git a/dev.html b/dev.html
@@ -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,

diff --git a/docs/source/configuration.rst b/docs/source/configuration.rst
@@ -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
 -----------------------------
 

diff --git a/fullscreen.html b/fullscreen.html
@@ -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>

diff --git a/src/headless/plugins/headlines/feed.js b/src/headless/plugins/headlines/feed.js
@@ -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(),

diff --git a/src/plugins/rootview/background.js b/src/plugins/rootview/background.js
@@ -13,7 +13,7 @@ class ConverseBackground extends CustomElement {
     }
 
     render() {
-        return api.settings.get('view_mode') === 'fullscreen' && tplBackground();
+        return tplBackground();
     }
 
     setClasses () {

diff --git a/src/plugins/rootview/index.js b/src/plugins/rootview/index.js
@@ -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);

diff --git a/src/plugins/rootview/styles/background.scss b/src/plugins/rootview/styles/background.scss
@@ -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;
         }
     }
 }
diff --git a/src/plugins/rootview/styles/root.scss b/src/plugins/rootview/styles/root.scss
@@ -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);

diff --git a/src/plugins/rootview/templates/background_logo.js b/src/plugins/rootview/templates/background_logo.js
@@ -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>
 `;
diff --git a/src/plugins/rootview/templates/root.js b/src/plugins/rootview/templates/root.js
@@ -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>

diff --git a/src/shared/styles/themes/cyberpunk.scss b/src/shared/styles/themes/cyberpunk.scss
@@ -245,7 +245,6 @@ converse-root.theme-cyberpunk {
 		width: 100%;
 		height: 70%;
 		perspective: 1000px;
-		z-index: 1;
 		&:before {
 			content: '';
 			position: absolute;

diff --git a/webpack.html b/webpack.html
@@ -48,6 +48,7 @@
             muc_show_logs_before_join: true,
             whitelisted_plugins: ['converse-debug', 'converse-batched-probe'],
             blacklisted_plugins: [],
+            show_background: true,
         });
     });
 </script>