Various CSS fixes and use converse-icon for nav button

This commit is contained in:
JC Brand 2022-02-19 22:21:25 +01:00
parent 1c8085f00e
commit bbef09346a
9 changed files with 30 additions and 23 deletions

View File

@ -68,7 +68,7 @@
&.fa,
&.fas,
&.far {
color: white;
color: var(--chat-head-text-color);;
&.button-on:before {
padding: 0.2em;
background-color: var(--chat-head-text-color);

View File

@ -223,16 +223,14 @@
converse-chats.converse-mobile,
converse-chats.converse-overlayed,
converse-chats.converse-fullscreen {
.chatbox {
.box-flyout {
converse-controlbox-navback {
margin: auto 0;
margin-right: 1em;
display: flex;
.fa-arrow-left {
&:before {
color: var(--chat-head-text-color);
}
.chat-head {
converse-controlbox-navback {
margin: auto 0;
margin-right: 1em;
display: flex;
.fa-arrow-left {
svg {
fill: var(--chat-head-text-color);
}
}
}

View File

@ -326,7 +326,6 @@
.controlbox-panes {
background-color: var(--controlbox-pane-background-color);
border-right: 0.2rem solid var(--panel-divider-color);
height: 100%;
overflow-y: auto;
}
@ -471,10 +470,6 @@
font-size: 90%;
}
}
.controlbox-panes {
border-radius: var(--chatbox-border-radius);
}
}
.brand-heading {
@ -497,6 +492,9 @@
&.converse-embedded,
&.converse-fullscreen{
.controlbox-panes {
border-right: 0.2rem solid var(--panel-divider-color);
}
.toggle-controlbox {
display: none;
}

View File

@ -2,5 +2,5 @@ import { html } from "lit";
import { navigateToControlBox } from '../utils.js';
export default (jid) => {
return html`<i class="fa fa-arrow-left" @click=${() => navigateToControlBox(jid)}></i>`
return html`<converse-icon size="1em" class="fa fa-arrow-left" @click=${() => navigateToControlBox(jid)}></converse-icon>`
}

View File

@ -23,7 +23,7 @@
#toggle-minimized-chats {
border-top-left-radius: var(--chatbox-border-radius);
border-top-right-radius: var(--chatbox-border-radius);
background-color: var(--link-color);
background-color: var(--subdued-color);
padding: 1em 0 0 0;
text-align: center;
color: white;

View File

@ -1,6 +1,15 @@
.conversejs {
converse-muc.chatroom {
.chat-head-chatroom {
converse-controlbox-navback {
.fa-arrow-left {
svg {
fill: var(--chatroom-head-color);
}
}
}
color: var(--chatroom-head-color);
background-color: var(--chatroom-head-bg-color);
border-bottom: var(--chatroom-head-border-bottom);

View File

@ -43,7 +43,7 @@
.chatroom-body {
flex-direction: row;
flex-flow: nowrap;
background-color: white;
background-color: var(--background);
border-top: 0;
height: 100%;
width: 100%;

View File

@ -14,9 +14,11 @@ export default (o) => {
const show_subject = (subject && !o.subject_hidden);
return html`
<div class="chatbox-title ${ show_subject ? '' : "chatbox-title--no-desc"}">
${ (!_converse.api.settings.get("singleton")) ? html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>` : '' }
<div class="chatbox-title__text" title="${ (api.settings.get('locked_muc_domain') !== 'hidden') ? o.jid : '' }">${ o.title }
${ (o.bookmarked) ? html`<i class="fa fa-bookmark chatbox-title__text--bookmarked" title="${i18n_bookmarked}"></i>` : '' }
<div class="chatbox-title--row">
${ (!_converse.api.settings.get("singleton")) ? html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>` : '' }
<div class="chatbox-title__text" title="${ (api.settings.get('locked_muc_domain') !== 'hidden') ? o.jid : '' }">${ o.title }
${ (o.bookmarked) ? html`<i class="fa fa-bookmark chatbox-title__text--bookmarked" title="${i18n_bookmarked}"></i>` : '' }
</div>
</div>
<div class="chatbox-title__buttons row no-gutters">
${ o.standalone_btns.length ? tpl_standalone_btns(o) : '' }

View File

@ -53,7 +53,7 @@ export default (o) => {
return html`
<div class="roster-group" data-group="${o.name}">
<a href="#" class="list-toggle group-toggle controlbox-padded" title="${i18n_title}" @click=${ev => toggleGroup(ev, o.name)}>
<converse-icon color="var(--chat-head-color)" size="1em" class="fa ${ (collapsed.includes(o.name)) ? 'fa-caret-right' : 'fa-caret-down' }"></converse-icon> ${o.name}
<converse-icon color="var(--chat-head-color-dark)" size="1em" class="fa ${ (collapsed.includes(o.name)) ? 'fa-caret-right' : 'fa-caret-down' }"></converse-icon> ${o.name}
</a>
<ul class="items-list roster-group-contacts ${ (collapsed.includes(o.name)) ? 'collapsed' : '' }" data-group="${o.name}">
${ o.contacts.map(renderContact) }