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

Replace font icons with svg icons

Browse Source
This commit is contained in:
JC Brand 2022-05-14 16:29:12 +02:00
parent 1744dbc420
commit 0316f073e0
9 changed files with 63 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/plugins/bookmark-views/templates/item.js
View File

@ -14,11 +14,13 @@ export default (bm) => {
title="${open_title}" title="${open_title}"
@click=${openRoomViaEvent}>${bm.getDisplayName()}</a> @click=${openRoomViaEvent}>${bm.getDisplayName()}</a>
<a class="list-item-action remove-bookmark fa fa-bookmark align-self-center ${ bm.get('bookmarked') ? 'button-on' : '' }" <a class="list-item-action remove-bookmark align-self-center ${ bm.get('bookmarked') ? 'button-on' : '' }"
data-room-jid="${jid}" data-room-jid="${jid}"
data-bookmark-name="${bm.getDisplayName()}" data-bookmark-name="${bm.getDisplayName()}"
title="${info_remove_bookmark}" title="${info_remove_bookmark}"
@click=${removeBookmarkViaEvent}></a> @click=${removeBookmarkViaEvent}>
<converse-icon class="fa fa-bookmark" size="1em"></converse-icon>
</a>
</div> </div>
`; `;
} }

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

@ -457,6 +457,9 @@
.chatbox-btn { .chatbox-btn {
color: var(--controlbox-head-color); color: var(--controlbox-head-color);
margin: 0; margin: 0;
converse-icon {
color: var(--controlbox-head-color);
}
} }
} }

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

@ -30,7 +30,9 @@ export default (el) => {
${sticky_controlbox ${sticky_controlbox
? '' ? ''
: html` : html`
<a class="chatbox-btn close-chatbox-button fa fa-times" @click=${(ev) => el.close(ev)}></a> <a class="chatbox-btn close-chatbox-button" @click=${(ev) => el.close(ev)}>
<converse-icon class="fa fa-times" size="1em"></converse-icon>
</a>
`} `}
</div> </div>
<div class="controlbox-panes"> <div class="controlbox-panes">

7
src/plugins/controlbox/templates/loginform.js
View File

@ -17,9 +17,12 @@ const trust_checkbox = (checked) => {
<div class="form-group form-check login-trusted"> <div class="form-group form-check login-trusted">
<input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" ?checked=${checked}> <input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" ?checked=${checked}>
<label for="converse-login-trusted" class="form-check-label login-trusted__desc">${i18n_trusted}</label> <label for="converse-login-trusted" class="form-check-label login-trusted__desc">${i18n_trusted}</label>
<i class="fa fa-info-circle" data-toggle="popover"
<converse-icon class="fa fa-info-circle" data-toggle="popover"
data-title="Trusted device?" data-title="Trusted device?"
data-content="${i18n_hint_trusted}"></i> data-content="${i18n_hint_trusted}"
size="1.2em"
title="${i18n_hint_trusted}"></converse-icon>
</div> </div>
`; `;
} }

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

@ -35,7 +35,6 @@
} }
.chatbox-title__text--bookmarked { .chatbox-title__text--bookmarked {
margin-left: 0.5em; margin-left: 0.5em;
color: var(--chatroom-head-color);
} }
} }

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

@ -28,7 +28,13 @@ export default (el) => {
<div class="chatbox-title--row"> <div class="chatbox-title--row">
${ (!_converse.api.settings.get("singleton")) ? html`<converse-controlbox-navback jid="${o.jid}"></converse-controlbox-navback>` : '' } ${ (!_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 : '' }">${ el.model.getDisplayName() } <div class="chatbox-title__text" title="${ (api.settings.get('locked_muc_domain') !== 'hidden') ? o.jid : '' }">${ el.model.getDisplayName() }
${ (o.bookmarked) ? html`<i class="fa fa-bookmark chatbox-title__text--bookmarked" title="${i18n_bookmarked}"></i>` : '' } ${ (o.bookmarked) ?
html`<converse-icon
class="fa fa-bookmark chatbox-title__text--bookmarked"
size="1em"
color="var(--chatroom-head-color)"
title="${i18n_bookmarked}">
</converse-icon>` : '' }
</div> </div>
</div> </div>
<div class="chatbox-title__buttons row no-gutters"> <div class="chatbox-title__buttons row no-gutters">

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

@ -10,18 +10,24 @@ const bookmark = (o) => {
const i18n_remove_bookmark = __('Unbookmark this groupchat'); const i18n_remove_bookmark = __('Unbookmark this groupchat');
if (o.bookmarked) { if (o.bookmarked) {
return html` return html`
<a class="list-item-action fa fa-bookmark remove-bookmark button-on" <a class="list-item-action remove-bookmark button-on"
data-room-jid="${o.room.get('jid')}" data-room-jid="${o.room.get('jid')}"
data-bookmark-name="${o.room.getDisplayName()}" data-bookmark-name="${o.room.getDisplayName()}"
@click=${o.removeBookmark} @click=${o.removeBookmark}
title="${ o.bookmarked ? i18n_remove_bookmark : i18n_add_bookmark }"></a>`; title="${ o.bookmarked ? i18n_remove_bookmark : i18n_add_bookmark }">
<converse-icon class="fa fa-bookmark" size="1.2em" color="var(--inverse-link-color)"></converse-icon>
</a>`;
} else { } else {
return html` return html`
<a class="list-item-action fa fa-bookmark add-bookmark" <a class="list-item-action add-bookmark"
data-room-jid="${o.room.get('jid')}" data-room-jid="${o.room.get('jid')}"
data-bookmark-name="${o.room.getDisplayName()}" data-bookmark-name="${o.room.getDisplayName()}"
@click=${o.addBookmark} @click=${o.addBookmark}
title="${ o.bookmarked ? i18n_remove_bookmark : i18n_add_bookmark }"></a>`; title="${ o.bookmarked ? i18n_remove_bookmark : i18n_add_bookmark }">
<converse-icon class="fa fa-bookmark" size="1.2em" color="var(--inverse-link-color)"></converse-icon>
</a>`;
} }
} }
@ -46,16 +52,22 @@ const room_item = (o) => {
${ api.settings.get('allow_bookmarks') ? bookmark(o) : '' } ${ api.settings.get('allow_bookmarks') ? bookmark(o) : '' }
<a class="list-item-action room-info fa fa-info-circle" <a class="list-item-action room-info"
data-room-jid="${o.room.get('jid')}" data-room-jid="${o.room.get('jid')}"
title="${__('Show more information on this groupchat')}" title="${__('Show more information on this groupchat')}"
@click=${o.showRoomDetailsModal}></a> @click=${o.showRoomDetailsModal}>
<a class="list-item-action fa fa-sign-out-alt close-room" <converse-icon class="fa fa-info-circle" size="1.2em" color="var(--inverse-link-color)"></converse-icon>
</a>
<a class="list-item-action close-room"
data-room-jid="${o.room.get('jid')}" data-room-jid="${o.room.get('jid')}"
data-room-name="${o.room.getDisplayName()}" data-room-name="${o.room.getDisplayName()}"
title="${i18n_leave_room}" title="${i18n_leave_room}"
@click=${o.closeRoom}></a> @click=${o.closeRoom}>
<converse-icon class="fa fa-sign-out-alt" size="1.2em" color="var(--inverse-link-color)"></converse-icon>
</a>
</div>`; </div>`;
} }
@ -70,12 +82,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" path-prefix="/dist" size="1em"></converse-icon> <converse-icon class="fa fa-list-ul right" 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" path-prefix="/dist" size="1em"></converse-icon> <converse-icon class="fa fa-plus right" size="1em"></converse-icon>
</a> </a>
</div> </div>

15
src/plugins/rosterview/templates/requesting_contact.js
View File

@ -4,9 +4,16 @@ export default (o) => html`
<a class="open-chat w-100" href="#" @click=${o.openChat}> <a class="open-chat w-100" href="#" @click=${o.openChat}>
<span class="req-contact-name w-100" title="JID: ${o.jid}">${o.display_name}</span> <span class="req-contact-name w-100" title="JID: ${o.jid}">${o.display_name}</span>
</a> </a>
<a class="accept-xmpp-request list-item-action list-item-action--visible fa fa-check" <a class="accept-xmpp-request list-item-action list-item-action--visible"
@click=${o.acceptRequest} @click=${o.acceptRequest}
aria-label="${o.desc_accept}" title="${o.desc_accept}" href="#"></a> aria-label="${o.desc_accept}" title="${o.desc_accept}" href="#">
<a class="decline-xmpp-request list-item-action list-item-action--visible fa fa-times"
<converse-icon class="fa fa-check" size="1em"></converse-icon>
</a>
<a class="decline-xmpp-request list-item-action list-item-action--visible"
@click=${o.declineRequest} @click=${o.declineRequest}
aria-label="${o.desc_decline}" title="${o.desc_decline}" href="#"></a>`; aria-label="${o.desc_decline}" title="${o.desc_decline}" href="#">
<converse-icon class="fa fa-times" size="1em"></converse-icon>
</a>`;

3
src/shared/styles/lists.scss
View File

@ -123,6 +123,9 @@
&:hover { &:hover {
background-color: var(--controlbox-pane-bg-hover-color); background-color: var(--controlbox-pane-bg-hover-color);
.list-item-action {
opacity: 1;
}
.fa, .far, .fas { .fa, .far, .fas {
opacity: 1; opacity: 1;
} }