diff --git a/LICENSE b/LICENSE index 339798b99..52634d7ad 100644 --- a/LICENSE +++ b/LICENSE @@ -72,8 +72,5 @@ * src/Monitoring/ThreadUpdater/beep.wav from http://freesound.org/people/pierrecartoons1979/sounds/90112/ * cc-by-nc-3.0 * -* Font Awesome by Dave Gandy (http://fontawesome.io) -* license: http://fontawesome.io/license/ -* * Icons used to identify various websites are property of the respective websites. */ diff --git a/package-lock.json b/package-lock.json index 7b959f177..502f567f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,10 +1,10 @@ { - "name": "4chan-X", + "name": "4chan-XT", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "4chan-X", + "name": "4chan-XT", "license": "MIT", "devDependencies": { "@rollup/plugin-typescript": "^11.0.0", @@ -14,7 +14,6 @@ "@violentmonkey/types": "^0.1.5", "chrome-webstore-upload": "^1.0.0", "esprima": "^4.0.1", - "font-awesome": "=4.7.0", "jshint": "^2.13.4", "jszip": "^3.10.0", "lodash.template": "^4.5.0", @@ -577,15 +576,6 @@ "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", "dev": true }, - "node_modules/font-awesome": { - "version": "4.7.0", - "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", - "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==", - "dev": true, - "engines": { - "node": ">=0.10.3" - } - }, "node_modules/forever-agent": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz", diff --git a/package.json b/package.json index 233b83fa7..68855168d 100644 --- a/package.json +++ b/package.json @@ -108,7 +108,6 @@ "@violentmonkey/types": "^0.1.5", "chrome-webstore-upload": "^1.0.0", "esprima": "^4.0.1", - "font-awesome": "=4.7.0", "jshint": "^2.13.4", "jszip": "^3.10.0", "lodash.template": "^4.5.0", diff --git a/src/Filtering/PostHiding.js b/src/Filtering/PostHiding.js index 02cd5192a..86f51b73d 100644 --- a/src/Filtering/PostHiding.js +++ b/src/Filtering/PostHiding.js @@ -213,10 +213,8 @@ var PostHiding = { makeButton(post, type) { const span = $.el('span', { - className: `fa fa-${type === 'hide' ? 'minus' : 'plus'}-square-o`, - textContent: "" - } - ); + textContent: type === 'hide' ? '➖︎' : '➕︎', + }); const a = $.el('a', { className: `${type}-reply-button`, href: 'javascript:;' @@ -247,7 +245,7 @@ var PostHiding = { toggle() { const post = Get.postFromNode(this); - PostHiding[(post.isHidden ? 'show' : 'hide')](post); + PostHiding[(post.isHidden ? 'show' : 'hide')](post); return PostHiding.saveHiddenState(post, post.isHidden); }, diff --git a/src/Filtering/ThreadHiding.js b/src/Filtering/ThreadHiding.js index ad3275c05..9e5a807ec 100644 --- a/src/Filtering/ThreadHiding.js +++ b/src/Filtering/ThreadHiding.js @@ -137,7 +137,7 @@ var ThreadHiding = { href: 'javascript:;' } ); - $.on(div, 'click', ThreadHiding.menu.show); + $.on(div, 'click', ThreadHiding.menu.show); Menu.menu.addEntry({ el: div, @@ -200,7 +200,7 @@ var ThreadHiding = { href: 'javascript:;' } ); - $.extend(a, {innerHTML: ""}); + $.extend(a, {textContent: type === "hide" ? '➖︎' : '➕︎' }); a.dataset.fullID = thread.fullID; $.on(a, 'click', ThreadHiding.toggle); return a; diff --git a/src/General/Header.js b/src/General/Header.js index 4ee483a9c..fcb6c6cc5 100644 --- a/src/General/Header.js +++ b/src/General/Header.js @@ -143,7 +143,7 @@ var Header = { const cs = $.el('a', {href: 'javascript:;'}); if (g.VIEW === 'catalog') { cs.title = (cs.textContent = 'Catalog Settings'); - cs.className = 'fa fa-book'; + cs.textContent = '🕮︎'; } else { cs.title = (cs.textContent = '4chan Settings'); cs.className = 'native-settings'; diff --git a/src/General/Index.js b/src/General/Index.js index eba9a5b31..e0626969d 100644 --- a/src/General/Index.js +++ b/src/General/Index.js @@ -82,10 +82,9 @@ var Index = { // Header refresh button this.button = $.el('a', { - className: 'fa fa-refresh', title: 'Refresh', href: 'javascript:;', - textContent: 'Refresh Index' + textContent: '🗘' } ); $.on(this.button, 'click', () => Index.update()); @@ -768,14 +767,14 @@ var Index = { 'Index', Index.load ); - return $.addClass(Index.button, 'fa-spin'); + return $.addClass(Index.button, 'spin'); }, load() { let err; if (this !== Index.req) { return; } // aborted - $.rmClass(Index.button, 'fa-spin'); + $.rmClass(Index.button, 'spin'); const {notice, nTimeout} = Index; if (nTimeout) { clearTimeout(nTimeout); } delete Index.nTimeout; diff --git a/src/General/Settings.tsx b/src/General/Settings.tsx index fe1e0ef4d..5b2b43cdd 100644 --- a/src/General/Settings.tsx +++ b/src/General/Settings.tsx @@ -38,8 +38,8 @@ var Settings = { init() { // 4chan X settings link const link = $.el('a', { - className: 'settings-link fa fa-wrench', - textContent: 'Settings', + className: 'settings-link', + textContent: '🔧︎', title: `${meta.name} Settings`, href: 'javascript:;' } diff --git a/src/General/Settings/SettingsHtml.tsx b/src/General/Settings/SettingsHtml.tsx index b435b6cde..4948e4c6e 100644 --- a/src/General/Settings/SettingsHtml.tsx +++ b/src/General/Settings/SettingsHtml.tsx @@ -17,7 +17,7 @@ const settingsHtml =
{meta.name}{separator} {g.VERSION}{separator} Issues{separator} - +
diff --git a/src/Images/Gallery.js b/src/Images/Gallery.js index d04c63a35..4787a709a 100644 --- a/src/Images/Gallery.js +++ b/src/Images/Gallery.js @@ -30,10 +30,8 @@ var Gallery = { const el = $.el('a', { href: 'javascript:;', title: 'Gallery', - className: 'fa fa-picture-o', - textContent: 'Gallery' - } - ); + textContent: '🖼︎', + }); $.on(el, 'click', this.cb.toggle); diff --git a/src/Images/ImageExpand.js b/src/Images/ImageExpand.js index 7c1e59a79..c62156ac1 100644 --- a/src/Images/ImageExpand.js +++ b/src/Images/ImageExpand.js @@ -21,8 +21,8 @@ var ImageExpand = { if (!(this.enabled = Conf['Image Expansion'] && ['index', 'thread'].includes(g.VIEW))) { return; } this.EAI = $.el('a', { - className: 'expand-all-shortcut fa fa-expand', - textContent: 'EAI', + className: 'expand-all-shortcut', + textContent: '➕︎', title: 'Expand All Images', href: 'javascript:;' } @@ -44,7 +44,7 @@ var ImageExpand = { if (!this.file || (!this.file.isImage && !this.file.isVideo)) { return; } $.on(this.file.thumbLink, 'click', ImageExpand.cb.toggle); - if (this.isClone) { + if (this.isClone) { if (this.file.isExpanding) { // If we clone a post where the image is still loading, // make it loading in the clone too. @@ -96,12 +96,14 @@ var ImageExpand = { }; if (ImageExpand.on = $.hasClass(ImageExpand.EAI, 'expand-all-shortcut')) { - ImageExpand.EAI.className = 'contract-all-shortcut fa fa-compress'; - ImageExpand.EAI.title = 'Contract All Images'; + ImageExpand.EAI.className = 'contract-all-shortcut'; + ImageExpand.EAI.title = 'Contract All Images'; + ImageExpand.EAI.textContent = '➖︎'; func = ImageExpand.expand; } else { - ImageExpand.EAI.className = 'expand-all-shortcut fa fa-expand'; - ImageExpand.EAI.title = 'Expand All Images'; + ImageExpand.EAI.className = 'expand-all-shortcut'; + ImageExpand.EAI.title = 'Expand All Images'; + ImageExpand.EAI.textContent = '➕︎'; func = ImageExpand.contract; } diff --git a/src/Images/ImageLoader.js b/src/Images/ImageLoader.js index b5ed88bed..85af362ec 100644 --- a/src/Images/ImageLoader.js +++ b/src/Images/ImageLoader.js @@ -35,8 +35,7 @@ var ImageLoader = { const el = $.el('a', { href: 'javascript:;', title: 'Prefetch Images', - className: 'fa fa-bolt disabled', - textContent: 'Prefetch' + innerHTML: '🗲︎' } ); diff --git a/src/Menu/Menu.js b/src/Menu/Menu.js index e62c15aaf..3f622559a 100644 --- a/src/Menu/Menu.js +++ b/src/Menu/Menu.js @@ -18,7 +18,7 @@ var Menu = { } ); - $.extend(this.button, {innerHTML: ""}); + $.extend(this.button, {textContent: "🞃"}); this.menu = new UI.Menu('post'); Callbacks.Post.push({ diff --git a/src/Miscellaneous/FileInfo.tsx b/src/Miscellaneous/FileInfo.tsx index 2d967704e..4a546c77f 100644 --- a/src/Miscellaneous/FileInfo.tsx +++ b/src/Miscellaneous/FileInfo.tsx @@ -82,9 +82,9 @@ var FileInfo = { } }, N() { return { innerHTML: E(this.file.name), [isEscaped]: true }; }, - d() { return }, + d() { return 📥︎ }, f() { - return { innerHTML: "", [isEscaped]: true }; + return { innerHTML: "", [isEscaped]: true }; }, p() { return { innerHTML: ((this.file.isSpoiler) ? "Spoiler, " : ""), [isEscaped]: true }; }, s() { return { innerHTML: E(this.file.size), [isEscaped]: true }; }, diff --git a/src/Miscellaneous/PSAHiding.js b/src/Miscellaneous/PSAHiding.js index 7a0bacceb..7830d3f12 100644 --- a/src/Miscellaneous/PSAHiding.js +++ b/src/Miscellaneous/PSAHiding.js @@ -40,9 +40,10 @@ var PSAHiding = { $.on(entry.el, 'click', PSAHiding.toggle); PSAHiding.btn = (btn = $.el('a', { - title: 'Mark announcement as read and hide.', - className: 'hide-announcement-button fa fa-minus-square', - href: 'javascript:;' + title: 'Mark announcement as read and hide.', + className: 'hide-announcement-button', + href: 'javascript:;', + textContent: '➖︎', } )); $.on(btn, 'click', PSAHiding.toggle); diff --git a/src/Monitoring/ThreadWatcher.js b/src/Monitoring/ThreadWatcher.js index 3a60bba36..8174d3aa2 100644 --- a/src/Monitoring/ThreadWatcher.js +++ b/src/Monitoring/ThreadWatcher.js @@ -36,11 +36,10 @@ var ThreadWatcher = { if (!(this.enabled = Conf['Thread Watcher'])) { return; } this.shortcut = (sc = $.el('a', { - id: 'watcher-link', - textContent: 'Watcher', - title: 'Thread Watcher', - href: 'javascript:;', - className: 'fa fa-eye' + id: 'watcher-link', + textContent: '👁︎', + title: 'Thread Watcher', + href: 'javascript:;', } )); @@ -276,7 +275,7 @@ var ThreadWatcher = { fetch(url, {siteID, force}, args, cb) { if (ThreadWatcher.requests.length === 0) { ThreadWatcher.status.textContent = '...'; - $.addClass(ThreadWatcher.refreshButton, 'fa-spin'); + $.addClass(ThreadWatcher.refreshButton, 'spin'); } const onloadend = function() { if (this.finished) { return; } @@ -306,7 +305,7 @@ var ThreadWatcher = { ThreadWatcher.requests = []; ThreadWatcher.fetched = 0; ThreadWatcher.status.textContent = ''; - return $.rmClass(ThreadWatcher.refreshButton, 'fa-spin'); + return $.rmClass(ThreadWatcher.refreshButton, 'spin'); }, abort() { @@ -361,7 +360,7 @@ var ThreadWatcher = { fetchAllStatus(interval=0) { ThreadWatcher.status.textContent = '...'; - $.addClass(ThreadWatcher.refreshButton, 'fa-spin'); + $.addClass(ThreadWatcher.refreshButton, 'spin'); ThreadWatcher.syncing = true; const dbs = [ThreadWatcher.db, ThreadWatcher.unreaddb, QuoteYou.db].filter(x => x); let n = 0; @@ -572,7 +571,7 @@ var ThreadWatcher = { makeLine(siteID, boardID, threadID, data) { let page; const x = $.el('a', { - className: 'fa fa-times', + textContent: '✕', href: 'javascript:;' } ); diff --git a/src/Monitoring/ThreadWatcher/ThreadWatcher.html b/src/Monitoring/ThreadWatcher/ThreadWatcher.html index 373709e72..ad9d65d27 100644 --- a/src/Monitoring/ThreadWatcher/ThreadWatcher.html +++ b/src/Monitoring/ThreadWatcher/ThreadWatcher.html @@ -1,7 +1,7 @@
- Thread Watcher + Thread Watcher 🗘 - + 🞃 ×
diff --git a/src/Posting/QR.js b/src/Posting/QR.js index 7b848bf1d..1970613b0 100644 --- a/src/Posting/QR.js +++ b/src/Posting/QR.js @@ -64,8 +64,8 @@ var QR = { }); this.shortcut = (sc = $.el('a', { - className: 'fa fa-comment-o disabled', - textContent: 'QR', + className: 'disabled', + textContent: '↩', title: 'Quick Reply', href: 'javascript:;' } @@ -1646,7 +1646,7 @@ var QR = { href: 'javascript:;' } ); - $.extend(el, { innerHTML: '' }); + $.extend(el, { innerHTML: '' }); this.nodes = { el, diff --git a/src/Posting/QR/QuickReply.html b/src/Posting/QR/QuickReply.html index 51a58f961..741c1263f 100644 --- a/src/Posting/QR/QuickReply.html +++ b/src/Posting/QR/QuickReply.html @@ -40,12 +40,12 @@ S - - - - - - + ✎︎ + + 🔗︎ + + 🕒︎ + + @@ -62,4 +62,4 @@ - + diff --git a/src/classes/Notice.js b/src/classes/Notice.js index 7e1f212fd..1ff8d90b3 100644 --- a/src/classes/Notice.js +++ b/src/classes/Notice.js @@ -15,7 +15,7 @@ export default class Notice { this.timeout = timeout; this.onclose = onclose; this.el = $.el('div', - {innerHTML: "
"}); + {innerHTML: "
"}); this.el.style.opacity = 0; this.setType(type); $.on(this.el.firstElementChild, 'click', this.close); diff --git a/src/css/CSS.ts b/src/css/CSS.ts index 7d9bf94c0..b49fce0b4 100644 --- a/src/css/CSS.ts +++ b/src/css/CSS.ts @@ -1,13 +1,10 @@ -// cSpell:ignore installGentoo, fontawesome, webfont +// cSpell:ignore installGentoo, webfont import $ from '../platform/$'; // import boardCss from './board.css'; -import faCSS from '../../node_modules/font-awesome/css/font-awesome.css'; -import faWebFont from '../../node_modules/font-awesome/fonts/fontawesome-webfont.woff'; import burichan from './burichan.css'; -import fontAwesome from './font-awesome.css'; import futaba from './futaba.css'; import linkifyAudio from './linkify.audio.png'; import linkifyBitchute from './linkify.bitchute.png'; @@ -41,19 +38,18 @@ import tomorrow from './tomorrow.css'; import www from './www.css'; import yotsubaB from './yotsuba-b.css'; import yotsuba from './yotsuba.css'; -import { fa, icons } from './style'; +import { icons } from './style'; import { g } from '../globals/globals'; // <% // var inc = require['style']; // var faCSS = read('/node_modules/font-awesome/css/font-awesome.css'); - // var faWebFont = readBase64('/node_modules/font-awesome/fonts/fontawesome-webfont.woff'); // var mainCSS = ['font-awesome', 'style', 'yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon', 'spooky'].map(x => read(`${x}.css`)).join(''); // var iconNames = files.filter(f => /^linkify\.[^.]+\.png$/.test(f)); // var icons = iconNames.map(readBase64); // %> -const mainCSS = fontAwesome + style + yotsuba +yotsubaB+futaba+burichan+tomorrow + photon + spooky; +const mainCSS = style + yotsuba +yotsubaB+futaba+burichan+tomorrow + photon + spooky; const faIcons: { name: string, data: string }[] = [ { name: "Audio", data: linkifyAudio }, { name: "Bitchute", data: linkifyBitchute }, @@ -80,7 +76,7 @@ const faIcons: { name: string, data: string }[] = [ const CSS = { - boards: fa(faCSS, faWebFont) + mainCSS + icons(faIcons) + supports, + boards: mainCSS + icons(faIcons) + supports, report, diff --git a/src/css/font-awesome.css b/src/css/font-awesome.css deleted file mode 100644 index fe6e55924..000000000 --- a/src/css/font-awesome.css +++ /dev/null @@ -1,54 +0,0 @@ -.fa::before { - font-family: FontAwesome; - font-weight: 400; - font-style: normal; - -webkit-font-smoothing: antialiased; - text-decoration: inherit; - speak: none; - display: inline-block; - font-size: 13px; - visibility: visible; -} - -:root:not(.shortcut-icons) #shortcuts .fa::before { - display: none; -} -:root.shortcut-icons #shortcuts .fa::before { - font-size: 15px !important; - margin-top: -3px !important; - position: relative; - top: 1px; -} -:root.shortcut-icons #shortcuts .fa, .menu-button .fa { - font-size: 0; - visibility: hidden; -} -:root.shortcut-icons .shortcut.brackets-wrap::after, -:root.shortcut-icons .shortcut.brackets-wrap::before { - display: none; -} -:root.shortcut-icons #shortcuts a .fa, -.menu-button .fa, -.hide-reply-button .fa, -.hide-thread-button .fa { - display: inline; -} - -.fa-spin::before { - -webkit-animation:spin 2s infinite linear; - -moz-animation:spin 2s infinite linear; - -o-animation:spin 2s infinite linear; - animation:spin 2s infinite linear; -} -@-moz-keyframes spin { - 0% {-moz-transform:rotate(0deg);} - 100% {-moz-transform:rotate(359deg);} -} -@-webkit-keyframes spin { - 0% {-webkit-transform:rotate(0deg);} - 100% {-webkit-transform:rotate(359deg);} -} -@keyframes spin { - 0% {transform:rotate(0deg);} - 100% {transform:rotate(359deg);} -} diff --git a/src/css/style.css b/src/css/style.css index 2e90b57d5..78a85a205 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -2480,3 +2480,12 @@ a:only-of-type > .remove { .fcx-announcement a { text-decoration: underline; } + +@keyframes spin { + 0% {transform:rotate(0deg);} + 100% {transform:rotate(359deg);} +} + +.spin { + animation:spin 2s infinite linear; +} diff --git a/src/css/style.ts b/src/css/style.ts index f13f37f8e..fae1aa4b8 100644 --- a/src/css/style.ts +++ b/src/css/style.ts @@ -1,26 +1,3 @@ -// == Reprocess Font Awesome CSS == // -export const fa = (css: string, font: string) => ( - - // Font Awesome CSS attribution and license - css.match(/\/\*\![^]*?\*\//)[0] + '\n' + - - // Font Awesome web font - `@font-face { - font-family: FontAwesome; - src: url('data:application/font-woff;base64,${font}') format('woff'); - font-weight: 400; - font-style: normal; -} -` + - - // fa-[icon name] classes - css - .match(/(\.fa-[^{]*{\s*content:[^}]*}\s*)+/)[0] - .replace(/([,{;])\s+/g, '$1') - .replace(/,/g, ', ') - -); - // == Create CSS for Link Title Favicons == // export const icons = (data: { name: string, data: string }[]) => (