Render logo for registration form
Also fix showing of version number in login form
This commit is contained in:
parent
9372ad2dff
commit
3f40098144
|
@ -69,6 +69,11 @@
|
|||
order: -1;
|
||||
color: var(--controlbox-text-color);
|
||||
|
||||
converse-brand-logo {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
converse-brand-heading {
|
||||
width: 100%;
|
||||
display: block;
|
||||
|
@ -501,11 +506,12 @@
|
|||
line-height: var(--line-height-huge);
|
||||
}
|
||||
|
||||
converse-brand-heading {
|
||||
converse-brand-logo {
|
||||
@include make-col(12);
|
||||
margin-top: 5em;
|
||||
margin-bottom: 1em;
|
||||
.brand-heading {
|
||||
width: 100%;
|
||||
font-size: 500%;
|
||||
padding: 0.7em 0 0 0;
|
||||
opacity: 0.8;
|
||||
|
|
|
@ -5,7 +5,7 @@ const $iq = converse.env.$iq;
|
|||
const { _, sizzle} = converse.env;
|
||||
const u = converse.env.utils;
|
||||
|
||||
fdescribe("The Registration Panel", function () {
|
||||
describe("The Registration Panel", function () {
|
||||
|
||||
it("is not available unless allow_registration=true",
|
||||
mock.initConverse(
|
||||
|
|
|
@ -0,0 +1,26 @@
|
|||
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 }));
|
|
@ -1,42 +1,14 @@
|
|||
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 { html } from 'lit-html';
|
||||
|
||||
export const ConverseBrandHeading = (o) => {
|
||||
const is_fullscreen = api.settings.get('view_mode') === 'fullscreen';
|
||||
export const ConverseBrandHeading = () => {
|
||||
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>
|
||||
${ 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>` : '' }
|
||||
`;
|
||||
}
|
||||
<converse-brand-logo></converse-brand-logo>
|
||||
<converse-brand-byline></converse-brand-byline>
|
||||
`;
|
||||
};
|
||||
|
||||
api.elements.define('converse-brand-heading', component(ConverseBrandHeading, {'useShadowDOM': false}));
|
||||
api.elements.define('converse-brand-heading', component(ConverseBrandHeading, { 'useShadowDOM': false }));
|
||||
|
|
|
@ -0,0 +1,46 @@
|
|||
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 }));
|
|
@ -1,3 +1,4 @@
|
|||
import 'components/brand-heading.js';
|
||||
import tpl_spinner from 'templates/spinner.js';
|
||||
import { __ } from 'i18n';
|
||||
import { _converse, api } from "@converse/headless/core";
|
||||
|
|
|
@ -73,6 +73,7 @@ const REGISTRATION_FORM = 2;
|
|||
|
||||
export default o => {
|
||||
return html`
|
||||
<converse-brand-logo></converse-brand-logo>
|
||||
${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') === REGISTRATION_FORM ? tpl_registration_form(o) : ''}
|
||||
|
|
Loading…
Reference in New Issue