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

Stop using font-awesome fonts to render icons

Browse Source 
This commit just does the last 1% of work necessary to get rid of font-awesome fonts.

fixes #1004
fixes #2639
This commit is contained in:
JC Brand 2022-09-28 15:03:29 +02:00
parent 983d5ea09c
commit aebd98cf0a
9 changed files with 43 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGES.md
View File

@ -12,6 +12,8 @@
- Update `nick` attribute on ChatRoom when user nickname changes
- Restrict editing of MUC messages to ones with the same XEP-0421 occupant ID
- Remove unfurls for links removed in a subsequent message correction
- #1004: Stop using fonts to render icons and use SVG instead
- #2797: Weird unicode characters rendering outside of line-height
- #2870: Fix for multiple URLs to be linkified when sent together in chat and adds a test for this.
- #2879: Quotes, lines not aligned to the first line
- #2925: Fix missing disco-items in browser storage.

14
package-lock.json generated
View File

@ -11,7 +11,6 @@
"dependencies": {
"@converse/openpromise": "^0.0.1",
"@converse/skeletor": "0.0.7",
"@fortawesome/fontawesome-free": "5.14.0",
"bootstrap": "^4.6.0",
"bootstrap.native": "^2.0.27",
"client-compress": "^2.2.2",
@ -1906,14 +1905,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@fortawesome/fontawesome-free": {
"version": "5.14.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.14.0.tgz",
"integrity": "sha512-OfdMsF+ZQgdKHP9jUbmDcRrP0eX90XXrsXIdyjLbkmSBzmMXPABB8eobUJtivaupucYaByz6WNe1PI1JuYm3qA==",
"engines": {
"node": ">=6"
}
},
"node_modules/@gar/promisify": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@ -19122,11 +19113,6 @@
}
}
},
"@fortawesome/fontawesome-free": {
"version": "5.14.0",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.14.0.tgz",
"integrity": "sha512-OfdMsF+ZQgdKHP9jUbmDcRrP0eX90XXrsXIdyjLbkmSBzmMXPABB8eobUJtivaupucYaByz6WNe1PI1JuYm3qA=="
},
"@gar/promisify": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",

1
package.json
View File

@ -105,7 +105,6 @@
"webpack-merge": "^5.8.0"
},
"dependencies": {
"@fortawesome/fontawesome-free": "5.14.0",
"bootstrap": "^4.6.0",
"bootstrap.native": "^2.0.27",
"client-compress": "^2.2.2",

7
src/plugins/bookmark-views/templates/list.js
View File

@ -14,8 +14,11 @@ const list = (el, bookmarks) => {
title="${desc_bookmarks}"
@click=${() => el.toggleBookmarksList()}>
<span class="fa ${(toggle_state === _converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }">
</span> ${label_bookmarks}</a>
<converse-icon
class="fa ${(toggle_state === _converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }"
size="1em"
color="var(--muc-color)">
</converse-icon> ${label_bookmarks}</a>
<div class="items-list bookmarks rooms-list ${ (toggle_state === _converse.OPENED) ? 'fade-in' : 'hidden fade-out' }">
${ _converse.bookmarks.map(bm => bookmark_item(bm)) }
</div>

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

@ -93,7 +93,11 @@ export default (o) => {
<div class="list-container list-container--openrooms ${ o.rooms.length ? '' : 'hidden' }">
<a class="list-toggle open-rooms-toggle controlbox-padded" title="${i18n_desc_rooms}" @click=${o.toggleRoomsList}>
<span class="fa ${ (o.toggle_state === _converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }"></span> ${__('Open Groupchats')}</a>
<converse-icon
class="fa ${ (o.toggle_state === _converse.OPENED) ? 'fa-caret-down' : 'fa-caret-right' }"
size="1em"
color="var(--muc-color)">
</converse-icon> ${__('Open Groupchats')}</a>
<div class="items-list rooms-list open-rooms-list ${ o.collapsed && 'collapsed' }">
${ o.rooms.map(room => room_item(Object.assign({room}, o))) }
</div>

6
src/shared/chat/templates/message-text.js
View File

@ -7,6 +7,10 @@ const tpl_edited_icon = (el) => {
return html`<converse-icon title="${ i18n_edited }" class="fa fa-edit chat-msg__edit-modal" @click=${el.showMessageVersionsModal} size="1em"></converse-icon>`;
}
const tpl_checkmark = () => {
return html`<converse-icon size="1em" color="var(--chat-color)" class="fa fa-check chat-msg__receipt"></converse-icon>`
}
export default (el) => {
const i18n_show = __('Show more');
@ -37,7 +41,7 @@ export default (el) => {
hide_url_previews=${el.model.get('hide_url_previews')}
?is_me_message=${el.model.isMeCommand()}
text="${text}"></converse-chat-message-body>
${ (el.model.get('received') && !el.model.isMeCommand() && !is_groupchat_message) ? html`<span class="fa fa-check chat-msg__receipt"></span>` : '' }
${ (el.model.get('received') && !el.model.isMeCommand() && !is_groupchat_message) ? tpl_checkmark() : '' }
${ (el.model.get('edited')) ? tpl_edited_icon(el) : '' }
</span>
${ show_oob ? html`<div class="chat-msg__media">${getOOBURLMarkup(el.model.get('oob_url'))}</div>` : '' }

101
src/shared/styles/font-awesome.scss vendored
View File

@ -1,101 +0,0 @@
@font-face {
font-family: 'Baumans';
font-style: normal;
font-weight: 400;
src: local('Baumans Regular'), local('Baumans-Regular'), url('webfonts/baumans.ttf') format('truetype');
}
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 400;
src: local('Muli Regular'), local('Muli-Regular'), url('webfonts/muli.ttf') format('truetype');
}
@font-face {
font-family: 'ConverseFontAwesomeBrands';
font-style: normal;
font-weight: normal;
src: url('webfonts/fa-brands-400.eot');
src: url('webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
url('webfonts/fa-brands-400.woff2') format('woff2'),
url('webfonts/fa-brands-400.woff') format('woff'),
url('webfonts/fa-brands-400.ttf') format('truetype'),
url('webfonts/fa-brands-400.svg#fontawesome') format('svg');
}
@font-face {
font-family: 'ConverseFontAwesomeRegular';
font-style: normal;
font-weight: 400;
src: url('webfonts/fa-regular-400.eot');
src: url('webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'),
url('webfonts/fa-regular-400.woff2') format('woff2'),
url('webfonts/fa-regular-400.woff') format('woff'),
url('webfonts/fa-regular-400.ttf') format('truetype'),
url('webfonts/fa-regular-400.svg#fontawesome') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ConverseFontAwesomeSolid';
font-style: normal;
font-weight: 900;
src: url('webfonts/fa-solid-900.eot');
src: url('webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'),
url('webfonts/fa-solid-900.svg#fontawesome') format('svg'),
url('webfonts/fa-solid-900.woff2') format('woff2'),
url('webfonts/fa-solid-900.woff') format('woff'),
url('webfonts/fa-solid-900.ttf') format('truetype');
}
@import "@fortawesome/fontawesome-free/scss/variables";
@import "@fortawesome/fontawesome-free/scss/mixins";
@import "@fortawesome/fontawesome-free/scss/core";
@import "@fortawesome/fontawesome-free/scss/larger";
@import "@fortawesome/fontawesome-free/scss/fixed-width";
@import "@fortawesome/fontawesome-free/scss/list";
@import "@fortawesome/fontawesome-free/scss/bordered-pulled";
@import "@fortawesome/fontawesome-free/scss/animated";
@import "@fortawesome/fontawesome-free/scss/rotated-flipped";
@import "@fortawesome/fontawesome-free/scss/stacked";
@import "@fortawesome/fontawesome-free/scss/icons";
@import "@fortawesome/fontawesome-free/scss/screen-reader";
.conversejs, .converse-website {
/* Apparent font-awesome bug? The circle has some kind of bottom margin */
converse-icon:before {
content: none !important;
}
.far:not(converse-icon) {
font-family: 'ConverseFontAwesomeRegular' !important;
font-weight: 400;
}
.fa:not(converse-icon),
.fas:not(converse-icon) {
font-family: 'ConverseFontAwesomeSolid' !important;
font-weight: 900;
}
.fab:not(converse-icon) {
font-family: 'ConverseFontAwesomeBrands';
}
.fa:not(converse-icon),
.far:not(converse-icon),
.fas:not(converse-icon),
.fab:not(converse-icon) {
display: inline-block;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-info-circle {
height: 1em;
}
}

25
src/shared/styles/fonts.scss Normal file
View File

@ -0,0 +1,25 @@
@font-face {
font-family: 'Baumans';
font-style: normal;
font-weight: 400;
src: local('Baumans Regular'), local('Baumans-Regular'), url('webfonts/baumans.ttf') format('truetype');
}
@font-face {
font-family: 'Muli';
font-style: normal;
font-weight: 400;
src: local('Muli Regular'), local('Muli-Regular'), url('webfonts/muli.ttf') format('truetype');
}
.conversejs, .converse-website {
/* Apparent font-awesome bug? The circle has some kind of bottom margin */
converse-icon:before {
content: none !important;
}
.fa-info-circle {
height: 1em;
}
}

2
src/shared/styles/index.scss
View File

@ -8,7 +8,7 @@
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "./font-awesome.scss";
@import "./fonts.scss";
@import "mixins";
.conversejs {