Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Fix chat head buttons not showing

Browse Source 
We need to use `converse-icon` now that the fontawesome fonts aren't
included
This commit is contained in:
JC Brand 2022-10-30 11:49:56 +01:00
parent b4fb710d61
commit b2ad6e844c
21 changed files with 206 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/plugins/chatview/styles/chat-head.scss
View File

@ -64,34 +64,30 @@
padding: 0;
}
a, a:visited, a:hover, a:not([href]):not([tabindex]) {
&.chatbox-btn {
&.fa,
&.fas,
&.far {
color: var(--chat-head-text-color);;
&.button-on:before {
padding: 0.2em;
background-color: var(--chat-head-text-color);
color: var(--chat-head-color);
.chatbox-btn {
color: white;
&:active {
position: relative;
top: 1px;
}
}
converse-dropdown {
.dropdown-menu {
converse-icon {
svg {
fill: var(--chat-color);
}
}
}
}
.chatbox-btn {
color: white;
&.fa, &.far, &.fas {
color: white;
}
&:active {
position: relative;
top: 1px;
}
&.button-on:before {
border-radius: 5%;
background-color: var(--chat-head-text-color);
color: var(--chat-head-color);
converse-icon {
svg {
fill: var(--chat-head-fg-color);
}
}
}
}

24
src/plugins/chatview/templates/chat-head.js
View File

@ -1,22 +1,10 @@
import { __ } from 'i18n';
import { _converse } from '@converse/headless/core';
import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js';
import { getStandaloneButtons, getDropdownButtons } from 'shared/chat/utils.js';
import { html } from "lit";
import { until } from 'lit/directives/until.js';
async function getStandaloneButtons (promise) {
const heading_btns = await promise;
const standalone_btns = heading_btns.filter(b => b.standalone);
return standalone_btns.map(b => getHeadingStandaloneButton(b))
}
async function getDropdownButtons (promise) {
const heading_btns = await promise;
const dropdown_btns = heading_btns.filter(b => !b.standalone);
return dropdown_btns.map(b => getHeadingDropdownItem(b));
}
export default (o) => {
const i18n_profile = __("The User's Profile Image");
const avatar = html`<span title="${i18n_profile}">
@ -27,12 +15,6 @@ export default (o) => {
height="40" width="40"></converse-avatar></span>`;
const display_name = o.model.getDisplayName();
const tpl_dropdown_btns = () => getDropdownButtons(o.heading_buttons_promise)
.then(btns => btns.length ? html`<converse-dropdown class="dropleft" color="var(--chat-head-text-color)" .items=${btns}></converse-dropdown>` : '');
const tpl_standalone_btns = () => getStandaloneButtons(o.heading_buttons_promise)
.then(btns => btns.reverse().map(b => until(b, '')));
return html`
<div class="chatbox-title ${ o.status ? '' : "chatbox-title--no-desc"}">
<div class="chatbox-title--row">
@ -43,8 +25,8 @@ export default (o) => {
</div>
</div>
<div class="chatbox-title__buttons row no-gutters">
${ until(tpl_dropdown_btns(), '') }
${ until(tpl_standalone_btns(), '') }
${ until(getDropdownButtons(o.heading_buttons_promise), '') }
${ until(getStandaloneButtons(o.heading_buttons_promise), '') }
</div>
</div>
${ o.status ? html`<p class="chat-head__desc">${ o.status }</p>` : '' }

27
src/plugins/chatview/utils.js
View File

@ -1,5 +1,5 @@
import { __ } from 'i18n';
import { _converse, api } from "@converse/headless/core";
import { _converse, api } from '@converse/headless/core';
import { html } from 'lit';
export function clearHistory (jid) {
@ -8,28 +8,6 @@ export function clearHistory (jid) {
}
}
export async function getHeadingDropdownItem (promise_or_data) {
const data = await promise_or_data;
return data ? html`
<a href="#" class="dropdown-item ${data.a_class}" @click=${data.handler} title="${data.i18n_title}">
<converse-icon size="1em" color="var(--text-color-lighten-15-percent)" class="fa ${data.icon_class}"></converse-icon>
${data.i18n_text}
</a>
` : '';
}
export async function getHeadingStandaloneButton (promise_or_data) {
const data = await promise_or_data;
return html`
<a
href="#"
class="chatbox-btn ${data.a_class} fa ${data.icon_class}"
@click=${data.handler}
title="${data.i18n_title}"
></a>
`;
}
export async function clearMessages (chat) {
const result = await api.confirm(__('Are you sure you want to clear the messages from this conversation?'));
if (result) {
@ -37,7 +15,6 @@ export async function clearMessages (chat) {
}
}
export async function parseMessageForCommands (chat, text) {
const match = text.replace(/^\s*/, '').match(/^\/(.*)\s*$/);
if (match) {
@ -56,7 +33,7 @@ export async function parseMessageForCommands (chat, text) {
* return handled;
* }
*/
handled = await api.hook('parseMessageForCommands', {model: chat, text}, handled);
handled = await api.hook('parseMessageForCommands', { model: chat, text }, handled);
if (handled) {
return true;
}

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

@ -15,6 +15,7 @@ import { _converse, api, converse } from '@converse/headless/core';
import { addControlBox, clearSession, disconnect, onChatBoxesFetched } from './utils.js';
import './styles/_controlbox.scss';
import './styles/controlbox-head.scss';
converse.plugins.add('converse-controlbox', {

20
src/plugins/controlbox/styles/_controlbox.scss
View File

@ -415,26 +415,6 @@
}
}
.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-icon {
color: var(--controlbox-head-color);
}
}
}
#converse-register, #converse-login {
@include make-col(12);
padding-bottom: 0;

24
src/plugins/controlbox/styles/controlbox-head.scss Normal file
View File

@ -0,0 +1,24 @@
.conversejs {
#controlbox {
.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 {
margin: 0;
converse-icon {
svg {
fill: var(--controlbox-head-btn-color);
}
}
}
}
}
}

1
src/plugins/headlines-view/index.js
View File

@ -9,6 +9,7 @@ import { HeadlinesFeedsList } from './feed-list.js';
import { _converse, converse } from '@converse/headless/core';
import './styles/headlines.scss';
import './styles/headlines-head.scss';
converse.plugins.add('converse-headlines-view', {

53
src/plugins/headlines-view/styles/headlines-head.scss Normal file
View File

@ -0,0 +1,53 @@
.conversejs {
.chatbox {
&.headlines {
converse-headlines-heading {
&.chat-head {
.chatbox-title--no-desc {
padding: 0.75rem 1rem;
}
&.chat-head-chatbox {
background-color: var(--headline-head-bg-color);
border-bottom: var(--headline-head-border-bottom);
}
background-color: var(--headline-head-bg-color);
.chatbox-title__text {
color: var(--headline-head-text-color) !important;
}
converse-dropdown {
.dropdown-menu {
converse-icon {
svg {
fill: var(--headlines-color);
}
}
}
}
.chatbox-btn {
converse-icon {
svg {
fill: var(--headline-head-fg-color);
}
}
}
}
}
converse-chats {
&.converse-fullscreen {
.chatbox.headlines {
.chat-head {
&.chat-head-chatbox {
background-color: var(--headline-head-bg-color);
}
}
}
}
}
}
}
}

35
src/plugins/headlines-view/styles/headlines.scss
View File

@ -1,36 +1,6 @@
.conversejs {
.chatbox {
converse-headlines-heading {
&.chat-head {
.chatbox-title__text {
color: var(--headline-head-text-color) !important;
background-color: var(--headline-head-bg-color);
}
a, a:visited, a:hover, a:not([href]):not([tabindex]) {
&.chatbox-btn {
&.fa,
&.fas,
&.far {
color: var(--headline-head-text-color);
&.button-on:before {
padding: 0.2em;
background-color: var(--headline-head-text-color);
color: var(--headline-head-bg-color);
}
}
}
}
}
}
&.headlines {
.chat-head {
&.chat-head-chatbox {
background-color: var(--headline-head-bg-color);
border-bottom: var(--headline-head-border-bottom);
}
}
.chat-body {
background-color: var(--background);
.chat-message {
@ -72,11 +42,6 @@
.box-flyout {
background-color: var(--headline-head-text-color);
}
.chat-head {
&.chat-head-chatbox {
background-color: var(--headline-head-text-color);
}
}
.flyout {
border-color: var(--headline-head-text-color);
}

22
src/plugins/headlines-view/templates/chat-head.js
View File

@ -1,26 +1,10 @@
import { _converse } from '@converse/headless/core';
import { html } from "lit";
import { until } from 'lit/directives/until.js';
import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js';
import { getStandaloneButtons, getDropdownButtons } from 'shared/chat/utils.js';
export default (o) => {
const standalone_btns_promise = o.heading_buttons_promise.then(
btns => btns
.filter(b => b.standalone)
.map(b => getHeadingStandaloneButton(b))
.reverse()
.map(b => until(b, '')));
const dropdown_btns_promise = o.heading_buttons_promise.then(
btns => {
const dropdown_btns = btns
.filter(b => !b.standalone)
.map(b => getHeadingDropdownItem(b));
return dropdown_btns.length ? html`<converse-dropdown class="dropleft" .items=${dropdown_btns}></converse-dropdown>` : '';
}
);
return html`
<div class="chatbox-title ${ o.status ? '' : "chatbox-title--no-desc"}">
<div class="chatbox-title--row">
@ -28,8 +12,8 @@ export default (o) => {
<div class="chatbox-title__text" title="${o.jid}">${ o.display_name }</div>
</div>
<div class="chatbox-title__buttons row no-gutters">
${ until(dropdown_btns_promise, '') }
${ until(standalone_btns_promise, '') }
${ until(getDropdownButtons(o.heading_buttons_promise), '') }
${ until(getStandaloneButtons(o.heading_buttons_promise), '') }
</div>
</div>
${ o.status ? html`<p class="chat-head__desc">${ o.status }</p>` : '' }

2
src/plugins/muc-views/styles/muc-forms.scss
View File

@ -24,7 +24,7 @@ converse-muc-config-form {
margin: 0 0.5em;
}
.button-primary {
background-color: var(--chatroom-head-button-color);
background-color: var(--chatroom-head-fg-color);
}
}

18
src/plugins/muc-views/styles/muc-head.scss
View File

@ -47,15 +47,27 @@
&.fa {
color: var(--chatroom-head-color);
&.button-on:before {
color: var(--chatroom-head-button-color);
color: var(--chatroom-head-fg-color);
}
}
}
}
converse-dropdown {
.dropdown-menu {
converse-icon {
svg {
fill: var(--chatroom-color);
}
}
}
}
.chatbox-btn {
&.button-on:before {
color: var(--chatroom-head-button-color);
converse-icon {
svg {
fill: var(--chatroom-head-fg-color);
}
}
}
.chatbox-title__text {

11
src/plugins/muc-views/templates/muc-head.js
View File

@ -2,7 +2,7 @@ import 'shared/components/dropdown.js';
import 'shared/components/rich-text.js';
import { __ } from 'i18n';
import { _converse, api } from "@converse/headless/core.js";
import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js';
import { getStandaloneButtons, getDropdownButtons } from 'shared/chat/utils.js';
import { html } from "lit";
import { until } from 'lit/directives/until.js';
@ -10,6 +10,7 @@ import { until } from 'lit/directives/until.js';
export default (el) => {
const o = el.model.toJSON();
const subject_hidden = el.user_settings?.get('mucs_with_hidden_subject', [])?.includes(el.model.get('jid'));
const heading_buttons_promise = el.getHeadingButtons(subject_hidden);
const i18n_hide_topic = __('Hide the groupchat topic');
const i18n_bookmarked = __('This groupchat is bookmarked');
const subject = o.subject ? o.subject.text : '';
@ -38,12 +39,8 @@ export default (el) => {
</div>
</div>
<div class="chatbox-title__buttons row no-gutters">
${ until(el.getHeadingButtons(subject_hidden).then((buttons) => {
const dropdown_btns = buttons.filter(b => !b.standalone).map(b => getHeadingDropdownItem(b));
return html`
${ buttons.filter(b => b.standalone).reverse().map(b => until(getHeadingStandaloneButton(b), '')) }
${ dropdown_btns.length ? html`<converse-dropdown class="dropleft" color="var(--chatroom-head-color)" .items=${dropdown_btns}></converse-dropdown>` : '' }`
}), '') }
${ until(getStandaloneButtons(heading_buttons_promise), '') }
${ until(getDropdownButtons(heading_buttons_promise), '') }
</div>
</div>
${ show_subject ? html`<p class="chat-head__desc" title="${i18n_hide_topic}">

1
src/plugins/muc-views/tests/muc.js
View File

@ -340,6 +340,7 @@ describe("Groupchats", function () {
expect(topic_el.textContent.trim()).toBe(text);
expect(u.isVisible(topic_el)).toBe(true);
await u.waitUntil(() => view.querySelector('.hide-topic').textContent.trim() === 'Hide topic');
const toggle = view.querySelector('.hide-topic');
expect(toggle.textContent.trim()).toBe('Hide topic');
toggle.click();

54
src/shared/chat/utils.js
View File

@ -2,6 +2,7 @@ import debounce from 'lodash/debounce';
import tpl_new_day from "./templates/new-day.js";
import { _converse, api, converse } from '@converse/headless/core';
import { html } from 'lit';
import { until } from 'lit/directives/until.js';
import {
convertASCII2Emoji,
getShortnameReferences,
@ -10,6 +11,59 @@ import {
const { dayjs, u } = converse.env;
export async function getHeadingDropdownItem (promise_or_data) {
const data = await promise_or_data;
return data
? html`
<a href="#" class="dropdown-item ${data.a_class}" @click=${data.handler} title="${data.i18n_title}">
<converse-icon
size="1em"
class="fa ${data.icon_class}"
></converse-icon>
${data.i18n_text}
</a>
`
: '';
}
export async function getHeadingStandaloneButton (promise_or_data) {
const data = await promise_or_data;
return html`
<a
href="#"
class="chatbox-btn ${data.a_class}"
@click=${data.handler}
title="${data.i18n_title}"
>
<converse-icon
size="1em"
class="fa ${data.icon_class}"
></converse-icon>
</a>
`;
}
export function getStandaloneButtons (promise) {
return promise.then(
btns => btns
.filter(b => b.standalone)
.map(b => getHeadingStandaloneButton(b))
.reverse()
.map(b => until(b, '')));
}
export function getDropdownButtons (promise) {
return promise.then(
btns => {
const dropdown_btns = btns
.filter(b => !b.standalone)
.map(b => getHeadingDropdownItem(b));
return dropdown_btns.length ? html`<converse-dropdown class="chatbox-btn dropleft" .items=${dropdown_btns}></converse-dropdown>` : '';
}
);
}
export function onScrolledDown (model) {
if (!model.isHidden()) {
if (api.settings.get('allow_url_history_change')) {

4
src/shared/components/dropdown.js
View File

@ -14,21 +14,19 @@ export default class Dropdown extends DropdownBase {
static get properties () {
return {
'icon_classes': { type: String },
'color': { type: String },
'items': { type: Array }
}
}
constructor () {
super();
this.color = 'var(--text-color)';
this.icon_classes = 'fa fa-bars';
}
render () {
return html`
<button type="button" class="btn btn--transparent btn--standalone" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<converse-icon color="${this.color}" size="1em" class="${ this.icon_classes }">
<converse-icon size="1em" class="${ this.icon_classes }">
</button>
<div class="dropdown-menu">
${ this.items.map(b => until(b, '')) }

7
src/shared/styles/themes/classic.scss
View File

@ -67,6 +67,7 @@
--chat-textarea-height: 60px;
--chat-correcting-color: var(--chat-head-color-lighten-50-percent);
--chat-head-fg-color: white;
--chat-head-color-dark: #1E9652;
--chat-head-color-darker: #0E763B;
--chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%)
@ -101,6 +102,7 @@
--controlbox-width: 250px;
--controlbox-head-color: var(--light-blue);
--controlbox-head-btn-color: var(--light-blue);
--controlbox-heading-color: inherit;
--controlbox-heading-font-weight: bold;
--controlbox-heading-top-margin: 0.75em;
@ -123,7 +125,7 @@
--chatroom-head-bg-color-dark: #D24E2B; // $red
--chatroom-head-bg-color: var(--redder-orange);
--chatroom-head-border-bottom: 0px;
--chatroom-head-button-color: var(--chatroom-head-bg-color);
--chatroom-head-fg-color: white;
--chatroom-head-color: white;
--chatroom-head-description-display: block;
--chatroom-head-description-link-color: white;
@ -133,7 +135,8 @@
--muc-toolbar-btn-disabled-color: gray;
--headlines-color: var(--orange);
--headline-head-text-color: var(--white);
--headline-head-text-color: white;
--headline-head-fg-color: white;
--headline-head-bg-color: var(--headlines-color);
--headline-message-color: #D2842B;
--headline-separator-border-bottom: 2px solid var(--headlines-color);

2
src/shared/styles/themes/concord.scss
View File

@ -25,7 +25,7 @@
--chatroom-correcting-color: #FFFFC0;
--chatroom-head-bg-color: white;
--chatroom-head-border-bottom: 1px solid #EEE;
--chatroom-head-button-color: #999;
--chatroom-head-fg-color: #999;
--chatroom-head-color: #7E7E7E;
--chatroom-head-description-border-left: 1px solid #DDD;
--chatroom-head-description-color: black;

23
src/shared/styles/themes/dracula.scss
View File

@ -25,6 +25,7 @@
--headlines-color: var(--pink);
--headline-head-text-color: var(--headlines-color);
--headline-head-fg-color: var(--headlines-color);
--headline-head-bg-color: var(--background);
--headline-message-color: var(--headlines-color);
--headline-separator-border-bottom: 2px solid var(--headlines-color);
@ -65,28 +66,31 @@
--badge-color: var(--background);
--chatroom-head-color: var(--muc-color);
--chatroom-correcting-color: var(--comment);
--chatroom-head-bg-color-dark: var(--muc-color);
--chatroom-head-bg-color: var(--background);
--chatroom-head-border-bottom: 0.15em solid var(--muc-color);
--chatroom-head-fg-color: var(--muc-color);
--chatroom-head-color: var(--muc-color);
--chatroom-head-description-link-color: var(--link-color);
--chatroom-separator-border-bottom: 0.15em solid var(--muc-color);
--chatroom-message-input-border-top: 0.15em solid var(--muc-color);
--chatroom-head-bg-color-dark: var(--muc-color);
--chatroom-correcting-color: var(--comment);
--chatroom-separator-border-bottom: 0.15em solid var(--muc-color);
--muc-toolbar-btn-disabled-color: var(--disabled-color);
--occupants-border-left: 0.15em solid var(--muc-color);
--occupants-border-bottom: 0.15em solid var(--muc-color);
--chat-head-text-color: var(--chat-color);
--chat-head-color: var(--background);
--chat-correcting-color: var(--comment);
--chat-head-border-bottom: 0.15em solid var(--chat-color);
--chat-head-fg-color: var(--chat-color);
--chat-head-color-dark: var(--chat-color);
--chat-head-color-darker: var(--chat-color);
--chat-head-color-lighten-50-percent: var(--chat-color);
--chat-head-border-bottom: 0.15em solid var(--chat-color);
--chatbox-message-input-border-top: 0.15em solid var(--chat-color);
--chat-head-color: var(--background);
--chat-head-text-color: var(--chat-color);
--chat-toolbar-btn-color: var(--chat-color);
--chat-correcting-color: var(--comment);
--chat-toolbar-btn-color: var(--green);
--chatbox-message-input-border-top: 0.15em solid var(--chat-color);
--toolbar-btn-text-color: var(--background);
@ -118,6 +122,7 @@
--message-author-color: var(--purple);
--controlbox-head-color: var(--purple);
--controlbox-head-btn-color: var(--subdued-color);
--message-receipt-color: var(--green);

5
src/shared/tests/mock.js
View File

@ -628,6 +628,8 @@ function clearStores () {
window.sessionStorage.removeItem(cache_key+'fetched');
}
const theme = ['dracula', 'classic', 'concord'][Math.floor(Math.random()*3)];
async function _initConverse (settings) {
clearStores();
await clearIndexedDB();
@ -639,10 +641,11 @@ async function _initConverse (settings) {
'discover_connection_methods': false,
'enable_smacks': false,
'i18n': 'en',
'persistent_store': 'localStorage',
'loglevel': 'debug',
'no_trimming': true,
'persistent_store': 'localStorage',
'play_sounds': false,
'theme': theme,
'use_emojione': false,
'view_mode': view_mode
}, settings || {}));

2
src/shared/tests/tests.css
View File

@ -1,3 +1,3 @@
body {
body.converse-overlayed {
overflow: auto !important;
}