Replace font icons with svg icons
This commit is contained in:
parent
1744dbc420
commit
0316f073e0
@ -11,14 +11,16 @@ export default (bm) => {
|
||||
return html`
|
||||
<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row ${ is_hidden ? 'hidden' : ''}" data-room-jid="${jid}">
|
||||
<a class="list-item-link open-room w-100" data-room-jid="${jid}"
|
||||
title="${open_title}"
|
||||
@click=${openRoomViaEvent}>${bm.getDisplayName()}</a>
|
||||
title="${open_title}"
|
||||
@click=${openRoomViaEvent}>${bm.getDisplayName()}</a>
|
||||
|
||||
<a class="list-item-action remove-bookmark fa fa-bookmark align-self-center ${ bm.get('bookmarked') ? 'button-on' : '' }"
|
||||
data-room-jid="${jid}"
|
||||
data-bookmark-name="${bm.getDisplayName()}"
|
||||
title="${info_remove_bookmark}"
|
||||
@click=${removeBookmarkViaEvent}></a>
|
||||
<a class="list-item-action remove-bookmark align-self-center ${ bm.get('bookmarked') ? 'button-on' : '' }"
|
||||
data-room-jid="${jid}"
|
||||
data-bookmark-name="${bm.getDisplayName()}"
|
||||
title="${info_remove_bookmark}"
|
||||
@click=${removeBookmarkViaEvent}>
|
||||
<converse-icon class="fa fa-bookmark" size="1em"></converse-icon>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
@ -457,6 +457,9 @@
|
||||
.chatbox-btn {
|
||||
color: var(--controlbox-head-color);
|
||||
margin: 0;
|
||||
converse-icon {
|
||||
color: var(--controlbox-head-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -30,7 +30,9 @@ export default (el) => {
|
||||
${sticky_controlbox
|
||||
? ''
|
||||
: 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 class="controlbox-panes">
|
||||
|
@ -17,9 +17,12 @@ const trust_checkbox = (checked) => {
|
||||
<div class="form-group form-check login-trusted">
|
||||
<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>
|
||||
<i class="fa fa-info-circle" data-toggle="popover"
|
||||
|
||||
<converse-icon class="fa fa-info-circle" data-toggle="popover"
|
||||
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>
|
||||
`;
|
||||
}
|
||||
|
@ -35,7 +35,6 @@
|
||||
}
|
||||
.chatbox-title__text--bookmarked {
|
||||
margin-left: 0.5em;
|
||||
color: var(--chatroom-head-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -28,7 +28,13 @@ export default (el) => {
|
||||
<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 : '' }">${ 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 class="chatbox-title__buttons row no-gutters">
|
||||
|
@ -10,18 +10,24 @@ const bookmark = (o) => {
|
||||
const i18n_remove_bookmark = __('Unbookmark this groupchat');
|
||||
if (o.bookmarked) {
|
||||
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-bookmark-name="${o.room.getDisplayName()}"
|
||||
@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 {
|
||||
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-bookmark-name="${o.room.getDisplayName()}"
|
||||
@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) : '' }
|
||||
|
||||
<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')}"
|
||||
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-name="${o.room.getDisplayName()}"
|
||||
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>`;
|
||||
}
|
||||
|
||||
@ -70,12 +82,12 @@ export default (o) => {
|
||||
<a class="controlbox-heading__btn show-list-muc-modal"
|
||||
@click=${(ev) => api.modal.show(MUCListModal, { 'model': o.model }, ev)}
|
||||
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 class="controlbox-heading__btn show-add-muc-modal"
|
||||
@click=${(ev) => api.modal.show(AddMUCModal, { 'model': o.model }, ev)}
|
||||
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>
|
||||
</div>
|
||||
|
||||
|
@ -4,9 +4,16 @@ export default (o) => html`
|
||||
<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>
|
||||
</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}
|
||||
aria-label="${o.desc_accept}" title="${o.desc_accept}" href="#"></a>
|
||||
<a class="decline-xmpp-request list-item-action list-item-action--visible fa fa-times"
|
||||
aria-label="${o.desc_accept}" title="${o.desc_accept}" href="#">
|
||||
|
||||
<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}
|
||||
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>`;
|
||||
|
@ -123,6 +123,9 @@
|
||||
|
||||
&:hover {
|
||||
background-color: var(--controlbox-pane-bg-hover-color);
|
||||
.list-item-action {
|
||||
opacity: 1;
|
||||
}
|
||||
.fa, .far, .fas {
|
||||
opacity: 1;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user