Skip to content

C
converse.js
Commit 3f400981 authored by JC Brand's avatar JC Brand
Browse files
Options

Render logo for registration form 

Also fix showing of version number in login form
parent 9372ad2d
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 39 deletions
sass/_controlbox.scss
View file @ 3f400981
...@@ -69,6 +69,11 @@ ...@@ -69,6 +69,11 @@
order: -1; order: -1;
color: var(--controlbox-text-color); color: var(--controlbox-text-color);
converse-brand-logo {
width: 100%;
display: block;
}
converse-brand-heading { converse-brand-heading {
width: 100%; width: 100%;
display: block; display: block;
...@@ -501,11 +506,12 @@ ...@@ -501,11 +506,12 @@
line-height: var(--line-height-huge); line-height: var(--line-height-huge);
} }
converse-brand-heading { converse-brand-logo {
@include make-col(12); @include make-col(12);
margin-top: 5em; margin-top: 5em;
margin-bottom: 1em; margin-bottom: 1em;
.brand-heading { .brand-heading {
width: 100%;
font-size: 500%; font-size: 500%;
padding: 0.7em 0 0 0; padding: 0.7em 0 0 0;
opacity: 0.8; opacity: 0.8;
......
spec/register.js
View file @ 3f400981
...@@ -5,7 +5,7 @@ const $iq = converse.env.$iq; ...@@ -5,7 +5,7 @@ const $iq = converse.env.$iq;
const { _, sizzle} = converse.env; const { _, sizzle} = converse.env;
const u = converse.env.utils; const u = converse.env.utils;
fdescribe("The Registration Panel", function () { describe("The Registration Panel", function () {
it("is not available unless allow_registration=true", it("is not available unless allow_registration=true",
mock.initConverse( mock.initConverse(
......
src/components/brand-byline.js 0 → 100644
View file @ 3f400981
import { _converse, api } from '@converse/headless/core';
import { component } from 'haunted';
import { html } from 'lit-html';
export const ConverseBrandByline = () => {
const is_fullscreen = api.settings.get('view_mode') === 'fullscreen';
return html`
${is_fullscreen
? html`
<p class="brand-subtitle">${_converse.VERSION_NAME}</p>
<p class="brand-subtitle">
<a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client
brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a>
</p>
<p class="brand-subtitle">
<a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages"
>Translate</a
>
it into your own language
</p>
`
: ''}
`;
};
api.elements.define('converse-brand-byline', component(ConverseBrandByline, { 'useShadowDOM': false }));
src/components/brand-heading.js
View file @ 3f400981
import { api } from "@converse/headless/core"; import './brand-byline.js';
import './brand-logo.js';
import { api } from '@converse/headless/core';
import { component } from 'haunted'; import { component } from 'haunted';
import { html } from 'lit-html'; import { html } from 'lit-html';
export const ConverseBrandHeading = (o) => { export const ConverseBrandHeading = () => {
const is_fullscreen = api.settings.get('view_mode') === 'fullscreen';
return html` return html`
<a class="brand-heading" href="https://conversejs.org" target="_blank" rel="noopener"> <converse-brand-logo></converse-brand-logo>
<span class="brand-name-wrapper ${is_fullscreen ? 'brand-name-wrapper--fullscreen' : '' }"> <converse-brand-byline></converse-brand-byline>
<svg class="converse-svg-logo" `;
xmlns:svg="http://www.w3.org/2000/svg" };
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 364 364">
<title>Converse</title>
<g class="cls-1" id="g904">
<g data-name="Layer 2">
<g data-name="Layer 7">
<path
class="cls-3"
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" />
<path
class="cls-4"
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" />
</g>
</g>
</g>
</svg>
<span class="brand-name">
<span class="brand-name__text">converse<span class="subdued">.js</span></span>
${ is_fullscreen ? html`<p class="byline">messaging freedom</p>` : '' }
</span>
</span>
</a>
${ is_fullscreen ? html`
<p class="brand-subtitle">${o.version_name}</p>
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client brought to you by <a target="_blank" rel="nofollow" href="https://opkode.com">Opkode</a> </p>
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> it into your own language</p>` : '' }
`;
}
api.elements.define('converse-brand-heading', component(ConverseBrandHeading, {'useShadowDOM': false})); api.elements.define('converse-brand-heading', component(ConverseBrandHeading, { 'useShadowDOM': false }));
src/components/brand-logo.js 0 → 100644
View file @ 3f400981
import { api } from '@converse/headless/core';
import { component } from 'haunted';
import { html } from 'lit-html';
export const ConverseBrandLogo = () => {
const is_fullscreen = api.settings.get('view_mode') === 'fullscreen';
return html`
<a class="brand-heading" href="https://conversejs.org" target="_blank" rel="noopener">
<span class="brand-name-wrapper ${is_fullscreen ? 'brand-name-wrapper--fullscreen' : ''}">
<svg
class="converse-svg-logo"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 364 364"
>
<title>Converse</title>
<g class="cls-1" id="g904">
<g data-name="Layer 2">
<g data-name="Layer 7">
<path
class="cls-3"
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"
/>
<path
class="cls-4"
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"
/>
</g>
</g>
</g>
</svg>
<span class="brand-name">
<span class="brand-name__text">converse<span class="subdued">.js</span></span>
${is_fullscreen
? html`
<p class="byline">messaging freedom</p>
`
: ''}
</span>
</span>
</a>
`;
};
api.elements.define('converse-brand-logo', component(ConverseBrandLogo, { 'useShadowDOM': false }));
src/plugins/controlbox/templates/loginpanel.js
View file @ 3f400981
import 'components/brand-heading.js';
import tpl_spinner from 'templates/spinner.js'; import tpl_spinner from 'templates/spinner.js';
import { __ } from 'i18n'; import { __ } from 'i18n';
import { _converse, api } from "@converse/headless/core"; import { _converse, api } from "@converse/headless/core";
......
src/plugins/register/templates/register_panel.js
View file @ 3f400981
...@@ -73,6 +73,7 @@ const REGISTRATION_FORM = 2; ...@@ -73,6 +73,7 @@ const REGISTRATION_FORM = 2;
export default o => { export default o => {
return html` return html`
<converse-brand-logo></converse-brand-logo>
${o.model.get('registration_status') === CHOOSE_PROVIDER ? tpl_choose_provider() : ''} ${o.model.get('registration_status') === CHOOSE_PROVIDER ? tpl_choose_provider() : ''}
${o.model.get('registration_status') === FETCHING_FORM ? tpl_form_request(o) : ''} ${o.model.get('registration_status') === FETCHING_FORM ? tpl_form_request(o) : ''}
${o.model.get('registration_status') === REGISTRATION_FORM ? tpl_registration_form(o) : ''} ${o.model.get('registration_status') === REGISTRATION_FORM ? tpl_registration_form(o) : ''}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7