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

Use converse-icon in the converse-dropdown component

Browse Source 
Instead of using webfonts
This commit is contained in:
JC Brand 2021-07-26 19:27:59 +02:00
parent 0ccf25d986
commit 55146820e3
8 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,7 +35,7 @@ export default (o) => {
const display_name = o.model.getDisplayName();
const tpl_dropdown_btns = () => getDropdownButtons(o.heading_buttons_promise)
.then(btns => btns.length ? html`<converse-dropdown class="dropleft" .items=${btns}></converse-dropdown>` : '');
.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, '')));

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

@ -20,7 +20,7 @@ export default (o) => {
</div>
<div class="chatbox-title__buttons row no-gutters">
${ o.standalone_btns.length ? tpl_standalone_btns(o) : '' }
${ o.dropdown_btns.length ? html`<converse-dropdown class="dropleft" .items=${o.dropdown_btns}></converse-dropdown>` : '' }
${ o.dropdown_btns.length ? html`<converse-dropdown class="dropleft" color="var(--chatroom-head-color)" .items=${o.dropdown_btns}></converse-dropdown>` : '' }
</div>
</div>
${ show_subject ? html`<p class="chat-head__desc" title="${i18n_hide_topic}">

6
src/plugins/omemo/utils.js
View File

@ -109,7 +109,7 @@ async function downloadFile(url) {
try {
response = await fetch(url)
} catch(e) {
log.error(`Failed to download encrypted media: ${url}`);
log.error(`${e.name}: Failed to download encrypted media: ${url}`);
log.error(e);
return null;
}
@ -124,6 +124,10 @@ async function getAndDecryptFile (uri) {
const protocol = window.location.hostname === 'localhost' ? 'http' : 'https';
const http_url = uri.toString().replace(/^aesgcm/, protocol);
const cipher = await downloadFile(http_url);
if (cipher === null) {
log.error(`Could not decrypt file ${uri.toString()} since it could not be downloaded`);
return null;
}
const iv = hash.slice(0, 24);
const key = hash.slice(24);
let content;

1
src/plugins/rosterview/templates/group.js
View File

@ -1,3 +1,4 @@
import 'shared/components/icons.js';
import { __ } from 'i18n';
import { _converse, converse } from "@converse/headless/core";
import { html } from "lit";

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

@ -1,3 +1,4 @@
import 'shared/components/icons.js';
import DOMNavigator from "shared/dom-navigator.js";
import { converse, api } from "@converse/headless/core";
import { html } from 'lit';
@ -10,15 +11,21 @@ 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 () {
const icon_classes = this.icon_classes || "fa fa-bars";
return html`
<button type="button" class="btn btn--transparent btn--standalone" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="${icon_classes} only-icon"></i>
<converse-icon color="${this.color}" size="1em" class="${ this.icon_classes }">
</button>
<div class="dropdown-menu">
${ this.items.map(b => until(b, '')) }

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

@ -44,10 +44,12 @@ class ConverseIcon extends CustomElement {
}
getStyles () {
const cssprop = this.color.match(/var\((--.*)\)/)?.[1];
const color = cssprop ? getComputedStyle(this).getPropertyValue(cssprop) : this.color;
return `
${this.size ? `width: ${this.size};` : ''}
${this.size ? `height: ${this.size};` : ''}
${this.color ? `fill: ${this.color};` : ''}
${color ? `fill: ${color};` : ''}
${this.style}
`;
}

4
src/shared/styles/_variables.scss
View File

@ -33,8 +33,11 @@ $mobile_portrait_length: 480px !default;
--text-color-lighten-15-percent: #8c8c8c; // lighten(#666, 15%)
--message-text-color: #555;
--message-receipt-color: var(--green);
--save-button-color: var(--green);
--button-text-color: white;
--message-avatar-width: 36px;
--message-avatar-height: 36px;
@ -207,7 +210,6 @@ $mobile_portrait_length: 480px !default;
--chat-textarea-background-color: #F6F6F6;
--chat-correcting-color: #FFFFC0;
--chat-head-text-color: #AAA;
--controlbox-text-color: #DDD;

35
src/shared/styles/buttons.scss
View File

@ -4,15 +4,22 @@
.btn {
font-weight: normal;
color: #fff;
.fa, .far, .fas {
color: #fff;
margin-right: 0.5em;
&.only-icon {
margin-right: 0;
color: var(--button-text-color);
&.fa {
color: var(--button-text-color) !important;
}
i {
&.fa, &.far, &.fas {
color: var(--button-text-color);
margin-right: 0.5em;
&.only-icon {
margin-right: 0;
}
}
}
converse-icon {
margin-right: 0;
}
}
.btn-primary {
@ -39,12 +46,6 @@
border-radius: 50%;
}
.btn {
&.fa {
color: white !important;
}
}
.btn-info, .badge-info {
background-color: var(--primary-color);
border-color: var(--primary-color);
@ -56,7 +57,7 @@
.button-cancel,
.btn-secondary, .badge-secondary {
color: white;
color: var(--button-text-color);
background-color: var(--secondary-color);
border-color: var(--secondary-color);
&:hover {
@ -66,18 +67,18 @@
}
.btn-warning {
color: white;
color: var(--button-text-color);
background-color: var(--warning-color);
border-color: var(--warning-color);
&:hover {
color: white;
color: var(--button-text-color);
background-color: var(--warning-color-dark);
border-color: var(--warning-color-dark)
}
}
.btn-danger {
color: white;
color: var(--button-text-color);
background-color: var(--danger-color);
border-color: var(--danger-color) !important;
&:hover {