Disroot/converse.js
Disroot
/
converse.js
Archived
6
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix CSS and work on declaratively rendering the controlbox toggle

This commit is contained in:
JC Brand 2021-01-22 16:20:58 +01:00
parent a59920e6e5
commit 75b8a16465
7 changed files with 218 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

399
sass/_controlbox.scss
View File

@ -384,218 +384,221 @@
}
}
converse-chats {
.converse-overlayed {
.toggle-controlbox {
order: -1;
text-align: center;
background-color: var(--link-color);
border-top-left-radius: var(--button-border-radius);
border-top-right-radius: var(--button-border-radius);
color: #0a0a0a;
float: right;
height: 100%;
margin: 0 var(--chat-gutter);
padding: 1em;
span {
color: var(--inverse-link-color);
}
}
#conversejs {
converse-chats {
&.converse-overlayed {
#controlbox {
min-width: var(--controlbox-width) !important;
width: var(--controlbox-width);
.box-flyout {
.toggle-controlbox {
order: -1;
text-align: center;
background-color: var(--link-color);
border-top-left-radius: var(--button-border-radius);
border-top-right-radius: var(--button-border-radius);
color: #0a0a0a;
float: right;
height: 100%;
margin: 0 var(--chat-gutter);
padding: 1em;
span {
color: var(--inverse-link-color);
}
}
#controlbox {
min-width: var(--controlbox-width) !important;
width: var(--controlbox-width);
}
.box-flyout {
min-width: var(--controlbox-width) !important;
width: var(--controlbox-width);
}
.login-trusted {
white-space: nowrap;
font-size: 90%;
}
.login-trusted {
white-space: nowrap;
font-size: 90%;
}
#converse-login-trusted {
margin-top: 0.5em;
}
&:not(.logged-out) {
.controlbox-head {
height: 15px;
}
}
#converse-login-trusted {
margin-top: 0.5em;
}
&:not(.logged-out) {
.controlbox-head {
height: 15px;
}
}
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between;
min-height: 0;
.controlbox-head {
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between;
min-height: 0;
.brand-heading {
color: var(--controlbox-text-color);
font-size: 2em;
}
.chatbox-btn {
color: var(--controlbox-head-color);
margin: 0;
}
}
#converse-register, #converse-login {
@include make-col(12);
padding-bottom: 0;
}
#converse-register {
.button-cancel {
font-size: 90%;
}
}
.controlbox-panes {
border-radius: var(--chatbox-border-radius);
}
}
}
.converse-embedded,
.converse-fullscreen{
.toggle-controlbox {
display: none;
}
}
.converse-embedded,
.converse-fullscreen,
.converse-mobile {
#controlbox {
@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);
}
&.logged-out {
@include make-col(12);
}
margin: 0;
.controlbox-pane {
border-radius: 0;
}
.flyout {
border-radius: 0;
}
#converse-login-panel {
border-radius: 0;
.converse-form {
padding: 3em 2em 3em;
}
}
.toggle-register-login {
line-height: var(--line-height-huge);
}
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;
color: var(--brand-heading-color);
}
.brand-subtitle {
font-size: 90%;
padding: 0.5em;
}
@media screen and (max-width: $mobile-portrait-length) {
.brand-heading {
font-size: 300%;
color: var(--controlbox-text-color);
font-size: 2em;
}
.chatbox-btn {
color: var(--controlbox-head-color);
margin: 0;
}
}
#converse-register, #converse-login {
@include make-col(12);
padding-bottom: 0;
}
#converse-register {
.button-cancel {
font-size: 90%;
}
}
.controlbox-panes {
border-radius: var(--chatbox-border-radius);
}
}
}
&.converse-embedded,
&.converse-fullscreen{
.toggle-controlbox {
display: none;
}
}
&.converse-embedded,
&.converse-fullscreen,
&.converse-mobile {
#controlbox {
@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);
}
&.logged-out {
@include make-col(12);
}
margin: 0;
.controlbox-pane {
border-radius: 0;
}
.flyout {
border-radius: 0;
}
#converse-login-panel {
border-radius: 0;
.converse-form {
padding: 3em 2em 3em;
}
}
.toggle-register-login {
line-height: var(--line-height-huge);
}
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;
color: var(--brand-heading-color);
}
.brand-subtitle {
font-size: 90%;
padding: 0.5em;
}
@media screen and (max-width: $mobile-portrait-length) {
.brand-heading {
font-size: 300%;
}
}
}
&.logged-out {
@include make-col(12);
@include fade-in;
width: 100%;
.box-flyout {
width: 100%;
}
}
.box-flyout {
border: 0;
width: 100%;
z-index: 1;
background-color: var(--controlbox-head-color);
.controlbox-head {
display: none;
}
}
#converse-register, #converse-login {
@include make-col-ready();
@include make-col(8);
@include make-col-offset(2);
@include media-breakpoint-up(sm) {
@include make-col(8);
@include make-col-offset(2);
}
@include media-breakpoint-up(md) {
@include make-col(8);
@include make-col-offset(2);
}
@include media-breakpoint-up(lg) {
@include make-col(6);
@include make-col-offset(3);
}
.title, .instructions {
margin: 1em 0;
}
input[type=submit],
input[type=button] {
width: auto;
}
}
}
&.logged-out {
@include make-col(12);
@include fade-in;
width: 100%;
.box-flyout {
width: 100%;
}
}
.box-flyout {
border: 0;
width: 100%;
z-index: 1;
background-color: var(--controlbox-head-color);
.controlbox-head {
display: none;
}
}
#converse-register, #converse-login {
@include make-col-ready();
@include make-col(8);
@include make-col-offset(2);
@include media-breakpoint-up(sm) {
@include make-col(8);
@include make-col-offset(2);
}
@include media-breakpoint-up(md) {
@include make-col(8);
@include make-col-offset(2);
}
@include media-breakpoint-up(lg) {
@include make-col(6);
@include make-col-offset(3);
}
.title, .instructions {
margin: 1em 0;
}
input[type=submit],
input[type=button] {
width: auto;
}
}
}
}
.converse-fullscreen {
.controlbox-panes {
padding-top: 1em;
}
}
.converse-overlayed {
.brand-heading {
padding-top: 0.8rem;
padding-left: 0.8rem;
width: 100%;
}
.converse-svg-logo {
height: 1em;
}
#controlbox {
#converse-login-panel {
height: 100%;
}
&.converse-fullscreen {
.controlbox-panes {
margin-top: 0.5em;
padding-top: 1em;
}
}
&.converse-overlayed {
.brand-heading {
padding-top: 0.8rem;
padding-left: 0.8rem;
width: 100%;
}
.converse-svg-logo {
height: 1em;
}
#controlbox {
#converse-login-panel {
height: 100%;
}
.controlbox-panes {
margin-top: 0.5em;
}
}
}
}

11
spec/register.js
View File

@ -5,9 +5,9 @@ const $iq = converse.env.$iq;
const { sizzle} = converse.env;
const u = converse.env.utils;
describe("The Registration Panel", function () {
fdescribe("The Registration Panel", function () {
fit("is not available unless allow_registration=true",
it("is not available unless allow_registration=true",
mock.initConverse(
['chatBoxesInitialized'],
{ auto_login: false,
@ -20,26 +20,25 @@ describe("The Registration Panel", function () {
done();
}));
it("can be opened by clicking on the registration tab",
fit("can be opened by clicking on the registration tab",
mock.initConverse(
['chatBoxesInitialized'],
{ auto_login: false,
allow_registration: true },
async function (done, _converse) {
const toggle = document.querySelector(".toggle-controlbox");
const toggle = await u.waitUntil(() => document.querySelector(".toggle-controlbox"));
if (!u.isVisible(document.querySelector("#controlbox"))) {
if (!u.isVisible(toggle)) {
u.removeClass('hidden', toggle);
}
toggle.click();
}
await u.waitUntil(() => _.get(_converse.chatboxviews.get('controlbox'), 'registerpanel'), 300);
const cbview = _converse.chatboxviews.get('controlbox');
const panels = cbview.querySelector('.controlbox-panes');
const login = panels.firstElementChild;
const registration = panels.childNodes[1];
const register_link = cbview.querySelector('a.register-account');
const register_link = await u.waitUntil(() => cbview.querySelector('a.register-account'));
expect(register_link.textContent).toBe("Create an account");
register_link.click();

4
src/plugins/controlbox/templates/toggle.js
View File

@ -2,7 +2,7 @@ import { __ } from 'i18n';
import { api } from "@converse/headless/core";
import { html } from "lit-html";
export default () => {
export default (o) => {
const i18n_toggle = api.connection.connected() ? __('Chat Contacts') : __('Toggle chat');
return html`<a id="toggle-controlbox" class="toggle-controlbox"><span class="toggle-feedback">${i18n_toggle}</span></a>`;
return html`<a id="toggle-controlbox" class="toggle-controlbox ${o.hide ? 'hidden' : ''}" @click=${o.onClick}><span class="toggle-feedback">${i18n_toggle}</span></a>`;
}

27
src/plugins/controlbox/toggle.js
View File

@ -8,9 +8,6 @@ const u = converse.env.utils;
class ControlBoxToggle extends ElementView {
events = {
'click': 'onClick'
}
async initialize () {
await api.waitUntil('initialized');
@ -18,25 +15,11 @@ class ControlBoxToggle extends ElementView {
}
render () {
// We let the render method of ControlBoxView decide whether
// the ControlBox or the Toggle must be shown. This prevents
// artifacts (i.e. on page load the toggle is shown only to then
// seconds later be hidden in favor of the controlbox).
render(tpl_controlbox_toggle(), this);
return this;
}
hide (callback) {
if (u.isVisible(this)) {
u.hideElement(this);
callback();
}
}
show (callback) {
if (!u.isVisible(this)) {
u.fadeIn(this, callback);
}
const controlbox = _converse.chatboxes.get('controlbox');
render(tpl_controlbox_toggle({
'onClick': (ev) => this.onClick(ev),
'hide': !controlbox.get('closed')
}), this);
}
showControlBox () { // eslint-disable-line class-methods-use-this

13
src/plugins/controlbox/view.js
View File

@ -20,7 +20,6 @@ class ControlBoxView extends ElementView {
initialize () {
this.model = _converse.chatboxes.get(this.getAttribute('id'));
this.listenTo(this.model, 'change:connected', this.onConnected);
// this.listenTo(this.model, 'hide', this.hide);
this.listenTo(this.model, 'show', this.show);
this.render();
_converse.chatboxviews.add('controlbox', this);
@ -84,20 +83,16 @@ class ControlBoxView extends ElementView {
return this;
}
hide (callback) {
hide () {
if (api.settings.get('sticky_controlbox')) {
return;
}
u.addClass('hidden', this);
api.trigger('chatBoxClosed', this);
if (!api.connection.connected()) {
_converse.controlboxtoggle.render();
}
_converse.controlboxtoggle.show(callback);
return this;
}
onControlBoxToggleHidden () {
show () {
this.model.set('closed', false);
this.classList.remove('hidden');
/**
@ -106,10 +101,6 @@ class ControlBoxView extends ElementView {
* @type {_converse.ControlBox}
*/
api.trigger('controlBoxOpened', this);
}
show () {
_converse.controlboxtoggle.hide(() => this.onControlBoxToggleHidden());
return this;
}

1
src/plugins/register/index.js
View File

@ -6,6 +6,7 @@
* @copyright 2020, the Converse.js contributors
* @license Mozilla Public License (MPLv2)
*/
import './panel.js';
import '../controlbox/index.js';
import log from '@converse/headless/log';
import { __ } from 'i18n';

5
src/plugins/register/panel.js
View File

@ -36,7 +36,8 @@ class RegisterPanel extends ElementView {
initialize () {
this.reset();
this.model = _converse.controlbox;
const controlbox = _converse.chatboxes.get('controlbox');
this.model = controlbox;
api.listen.on('connectionInitialized', () => this.registerHooks());
this.listenTo(this.model, 'change:registration_status', this.render);
@ -46,8 +47,6 @@ class RegisterPanel extends ElementView {
} else {
this.model.set('registration_status', CHOOSE_PROVIDER);
}
this.initPopovers();
}
render () {