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

Add hover color for svg icons

Browse Source
This commit is contained in:
JC Brand 2022-01-29 11:55:06 +01:00
parent 2e9f478c87
commit 8dcacd41bf
10 changed files with 33 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@ export default (o) => {
return html` return html`
<div class="occupants-header"> <div class="occupants-header">
<i class="hide-occupants" @click=${o.closeSidebar}> <i class="hide-occupants" @click=${o.closeSidebar}>
<converse-icon color="var(--text-color)" class="fa fa-times" size="1em"></converse-icon> <converse-icon color="var(--subdued-color)" class="fa fa-times" size="1em"></converse-icon>
</i> </i>
<div class="occupants-header--title"> <div class="occupants-header--title">
<span class="occupants-heading">${i18n_participants}</span> <span class="occupants-heading">${i18n_participants}</span>

4
src/plugins/profile/templates/profile.js
View File

@ -8,14 +8,14 @@ import { html } from "lit";
function tpl_signout (o) { function tpl_signout (o) {
const i18n_logout = __('Log out'); const i18n_logout = __('Log out');
return html`<a class="controlbox-heading__btn logout align-self-center" title="${i18n_logout}" @click=${o.logout}> return html`<a class="controlbox-heading__btn logout align-self-center" title="${i18n_logout}" @click=${o.logout}>
<converse-icon color="var(--subdued-color)" class="fa fa-sign-out-alt" size="1em"></converse-icon> <converse-icon class="fa fa-sign-out-alt" size="1em"></converse-icon>
</a>` </a>`
} }
function tpl_user_settings_button (o) { function tpl_user_settings_button (o) {
const i18n_details = __('Show details about this chat client'); const i18n_details = __('Show details about this chat client');
return html`<a class="controlbox-heading__btn show-client-info align-self-center" title="${i18n_details}" @click=${o.showUserSettingsModal}> return html`<a class="controlbox-heading__btn show-client-info align-self-center" title="${i18n_details}" @click=${o.showUserSettingsModal}>
<converse-icon color="var(--subdued-color)" class="fa fa-cog" size="1em"></converse-icon> <converse-icon class="fa fa-cog" size="1em"></converse-icon>
</a>`; </a>`;
} }

4
src/plugins/roomslist/templates/roomslist.js
View File

@ -70,12 +70,12 @@ export default (o) => {
<a class="controlbox-heading__btn show-list-muc-modal" <a class="controlbox-heading__btn show-list-muc-modal"
@click=${(ev) => api.modal.show(MUCListModal, { 'model': o.model }, ev)} @click=${(ev) => api.modal.show(MUCListModal, { 'model': o.model }, ev)}
title="${i18n_title_list_rooms}" data-toggle="modal" data-target="#muc-list-modal"> title="${i18n_title_list_rooms}" data-toggle="modal" data-target="#muc-list-modal">
<converse-icon class="fa fa-list-ul right" color="var(--subdued-color)" path-prefix="/dist" size="1em"></converse-icon> <converse-icon class="fa fa-list-ul right" path-prefix="/dist" size="1em"></converse-icon>
</a> </a>
<a class="controlbox-heading__btn show-add-muc-modal" <a class="controlbox-heading__btn show-add-muc-modal"
@click=${(ev) => api.modal.show(AddMUCModal, { 'model': o.model }, ev)} @click=${(ev) => api.modal.show(AddMUCModal, { 'model': o.model }, ev)}
title="${i18n_title_new_room}" data-toggle="modal" data-target="#add-chatrooms-modal"> title="${i18n_title_new_room}" data-toggle="modal" data-target="#add-chatrooms-modal">
<converse-icon class="fa fa-plus right" color="var(--subdued-color)" path-prefix="/dist" size="1em"></converse-icon> <converse-icon class="fa fa-plus right" path-prefix="/dist" size="1em"></converse-icon>
</a> </a>
</div> </div>

2
src/plugins/rosterview/styles/roster.scss
View File

@ -32,7 +32,6 @@
span { span {
padding: 0.3em; padding: 0.3em;
cursor: pointer;
min-width: 25px; min-width: 25px;
text-align: center; text-align: center;
} }
@ -42,6 +41,7 @@
margin: 0.2em; margin: 0.2em;
font-size: calc(var(--font-size) - 2px); font-size: calc(var(--font-size) - 2px);
} }
.state-type { .state-type {
font-size: calc(var(--font-size) - 2px); font-size: calc(var(--font-size) - 2px);
width: 100%; width: 100%;

4
src/plugins/rosterview/templates/roster.js
View File

@ -47,7 +47,7 @@ export default (el) => {
<div class="d-flex controlbox-padded"> <div class="d-flex controlbox-padded">
<span class="w-100 controlbox-heading controlbox-heading--contacts">${i18n_heading_contacts}</span> <span class="w-100 controlbox-heading controlbox-heading--contacts">${i18n_heading_contacts}</span>
<a class="controlbox-heading__btn sync-contacts" @click=${ev => el.syncContacts(ev)} title="${i18n_title_sync_contacts}"> <a class="controlbox-heading__btn sync-contacts" @click=${ev => el.syncContacts(ev)} title="${i18n_title_sync_contacts}">
<converse-icon class="fa fa-sync right ${el.syncing_contacts ? 'fa-spin' : ''}" color="var(--subdued-color)" path-prefix="/dist" size="1em"></converse-icon> <converse-icon class="fa fa-sync right ${el.syncing_contacts ? 'fa-spin' : ''}" size="1em"></converse-icon>
</a> </a>
${ api.settings.get('allow_contact_requests') ? html` ${ api.settings.get('allow_contact_requests') ? html`
<a class="controlbox-heading__btn add-contact" <a class="controlbox-heading__btn add-contact"
@ -55,7 +55,7 @@ export default (el) => {
title="${i18n_title_add_contact}" title="${i18n_title_add_contact}"
data-toggle="modal" data-toggle="modal"
data-target="#add-contact-modal"> data-target="#add-contact-modal">
<converse-icon class="fa fa-user-plus right" color="var(--subdued-color)" path-prefix="/dist" size="1.25em"></converse-icon> <converse-icon class="fa fa-user-plus right" size="1.25em"></converse-icon>
</a>` : '' } </a>` : '' }
</div> </div>
<converse-roster-filter></converse-roster-filter> <converse-roster-filter></converse-roster-filter>

6
src/plugins/rosterview/templates/roster_filter.js
View File

@ -21,9 +21,9 @@ export default (o) => {
@submit=${o.submitFilter}> @submit=${o.submitFilter}>
<div class="form-inline flex-nowrap"> <div class="form-inline flex-nowrap">
<div class="filter-by d-flex flex-nowrap"> <div class="filter-by d-flex flex-nowrap">
<span @click=${o.changeTypeFilter} class="fa fa-user ${ (o.filter_type === 'contacts') ? 'selected' : '' }" data-type="contacts" title="${title_contact_filter}"></span> <span @click=${o.changeTypeFilter} class="clickable fa fa-user ${ (o.filter_type === 'contacts') ? 'selected' : '' }" data-type="contacts" title="${title_contact_filter}"></span>
<span @click=${o.changeTypeFilter} class="fa fa-users ${ (o.filter_type === 'groups') ? 'selected' : '' }" data-type="groups" title="${title_group_filter}"></span> <span @click=${o.changeTypeFilter} class="clickable fa fa-users ${ (o.filter_type === 'groups') ? 'selected' : '' }" data-type="groups" title="${title_group_filter}"></span>
<span @click=${o.changeTypeFilter} class="fa fa-circle ${ (o.filter_type === 'state') ? 'selected' : '' }" data-type="state" title="${title_status_filter}"></span> <span @click=${o.changeTypeFilter} class="clickable fa fa-circle ${ (o.filter_type === 'state') ? 'selected' : '' }" data-type="state" title="${title_status_filter}"></span>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<input .value="${o.filter_text || ''}" <input .value="${o.filter_text || ''}"

14
src/shared/components/styles/icon.scss
View File

@ -2,9 +2,17 @@ converse-icon {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
margin: 0; margin: 0;
svg {
fill: var(--subdued-color); fill: var(--subdued-color);
}
&:hover { }
fill: var(--text-color);
a, .clickable {
converse-icon {
svg {
&:hover {
fill: var(--icon-hover-color);
}
}
} }
} }

15
src/shared/styles/_core.scss
View File

@ -211,7 +211,7 @@
cursor: pointer; cursor: pointer;
} }
a, a:visited, a:not([href]):not([tabindex]) { a, a:visited, a:not([href]):not([tabindex]), .clickable {
text-decoration: none; text-decoration: none;
color: var(--link-color); color: var(--link-color);
text-shadow: none; text-shadow: none;
@ -223,14 +223,19 @@
} }
&.fa, &.far, &.fas { &.fa, &.far, &.fas {
fill: var(--subdued-color);
color: var(--subdued-color); color: var(--subdued-color);
&:hover { &:hover {
color: var(--gray-color); color: var(--icon-hover-color);
} }
} }
} }
.clickable {
&:hover {
cursor: pointer;
}
}
svg { svg {
border-radius: var(--chatbox-border-radius); border-radius: var(--chatbox-border-radius);
} }
@ -239,10 +244,6 @@
color: var(--subdued-color); color: var(--subdued-color);
} }
.fa:hover, .far:hover, .fas:hover {
color: var(--gray-color);
}
q { q {
quotes: "“" "”" "‘" "’"; quotes: "“" "”" "‘" "’";
&.reason { &.reason {

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

@ -19,6 +19,7 @@
// --- // ---
--icon-hover-color: var(--text-color);
--info-color: #1E9652; // $dark-green --info-color: #1E9652; // $dark-green
--chat-status-online: var(--green); --chat-status-online: var(--green);

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

@ -22,6 +22,7 @@
// --- // ---
--icon-hover-color: var(--cyan);
--gray-color: var(--comment); --gray-color: var(--comment);
--highlight-color: var(--foreground); --highlight-color: var(--foreground);