diff --git a/src/css/fa-icons.css b/src/css/fa-icons.css new file mode 100644 index 000000000..05d66da85 --- /dev/null +++ b/src/css/fa-icons.css @@ -0,0 +1,98 @@ +.fa-icon { + align-items: center; + background-color: transparent; + border: 0; + display: inline-flex; + justify-content: flex-start; + margin: 0; + padding: 0.1em; + position: relative; + } +.fa-icon > * { + pointer-events: none; + } +.fa-icon.disabled, +.disabled > .fa-icon, +.fa-icon[disabled], +[disabled] > .fa-icon { + color: #000; + fill: #000; + opacity: 0.25; + stroke: #888; + pointer-events: none; + } +.fa-icon > .fa-icon-badge, +.fa-icon.disabled > .fa-icon-badge { + display: none; + } +.fa-icon.fa-icon-badged > .fa-icon-badge { + background-color: rgba(255, 255, 255, 0.7); + border-radius: 3px; + bottom: 1px; + display: inline-block; + font-family: sans-serif; + font-size: 40%; + position: absolute; + right: 1px; + } +.fa-icon.disabled > .fa-icon-badge { + display: none; + } + +.fa-icon > svg { + height: 1em; + width: 1em; + } +.fa-icon > .fa-icon_cloud-download-alt, +.fa-icon > .fa-icon_cloud-upload-alt, +.fa-icon > .fa-icon_code { + width: calc(1em * 640 / 512); + } +.fa-icon > .fa-icon_exclamation-triangle, +.fa-icon > .fa-icon_home, +.fa-icon > .fa-icon_puzzle-piece, +.fa-icon > .fa-icon_reply-all { + width: calc(1em * 576 / 512); + } +.fa-icon > .fa-icon_clock, +.fa-icon > .fa-icon_cog, +.fa-icon > .fa-icon_download, +.fa-icon > .fa-icon_eraser, +.fa-icon > .fa-icon_eye-dropper, +.fa-icon > .fa-icon_filter, +.fa-icon > .fa-icon_info-circle, +.fa-icon > .fa-icon_list-alt, +.fa-icon > .fa-icon_pause-circle, +.fa-icon > .fa-icon_play-circle, +.fa-icon > .fa-icon_power-off, +.fa-icon > .fa-icon_question-circle, +.fa-icon > .fa-icon_reply, +.fa-icon > .fa-icon_search-minus, +.fa-icon > .fa-icon_search-plus, +.fa-icon > .fa-icon_spinner, +.fa-icon > .fa-icon_sync-alt, +.fa-icon > .fa-icon_th, +.fa-icon > .fa-icon_th-list, +.fa-icon > .fa-icon_unlink { + width: calc(1em * 512 / 512); + } +.fa-icon > .fa-icon_angle-double-left, +.fa-icon > .fa-icon_arrow-left, +.fa-icon > .fa-icon_arrow-right, +.fa-icon > .fa-icon_lock, +.fa-icon > .fa-icon_plus, +.fa-icon > .fa-icon_save, +.fa-icon > .fa-icon_unlock, +.fa-icon > .fa-icon_trash-alt { + width: calc(1em * 448 / 512); + } +.fa-icon > .fa-icon_times { + width: calc(1em * 352 / 512); + } +.fa-icon > .fa-icon_angle-up, +.fa-icon > .fa-icon_angle-double-up { + width: calc(1em * 320 / 512); + } +.fa-icon > .fa-icon_ellipsis-v { + width: calc(1em * 192 / 512); + } diff --git a/src/img/fontawesome/LICENSE.txt b/src/img/fontawesome/LICENSE.txt new file mode 100644 index 000000000..0abfaa6e2 --- /dev/null +++ b/src/img/fontawesome/LICENSE.txt @@ -0,0 +1,34 @@ +Font Awesome Free License +------------------------- + +Font Awesome Free is free, open source, and GPL friendly. You can use it for +commercial projects, open source projects, or really almost whatever you want. +Full Font Awesome Free license: https://fontawesome.com/license/free. + +# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/) +In the Font Awesome Free download, the CC BY 4.0 license applies to all icons +packaged as SVG and JS file types. + +# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL) +In the Font Awesome Free download, the SIL OLF license applies to all icons +packaged as web and desktop font files. + +# Code: MIT License (https://opensource.org/licenses/MIT) +In the Font Awesome Free download, the MIT license applies to all non-font and +non-icon files. + +# Attribution +Attribution is required by MIT, SIL OLF, and CC BY licenses. Downloaded Font +Awesome Free files already contain embedded comments with sufficient +attribution, so you shouldn't need to do anything additional when using these +files normally. + +We've kept attribution comments terse, so we ask that you do not actively work +to remove them from files, especially code. They're a great way for folks to +learn about Font Awesome. + +# Brand Icons +All brand icons are trademarks of their respective owners. The use of these +trademarks does not indicate endorsement of the trademark holder by Font +Awesome, nor vice versa. **Please do not use brand logos for any purpose except +to represent the company, product, or service to which they refer.** diff --git a/src/img/fontawesome/fontawesome-defs.svg b/src/img/fontawesome/fontawesome-defs.svg new file mode 100644 index 000000000..bbbf8fd6f --- /dev/null +++ b/src/img/fontawesome/fontawesome-defs.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/js/fa-icons.js b/src/js/fa-icons.js new file mode 100644 index 000000000..58220ad9b --- /dev/null +++ b/src/js/fa-icons.js @@ -0,0 +1,48 @@ +/******************************************************************************* + + uBlock Origin - a browser extension to block requests. + Copyright (C) 2018-present Raymond Hill + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with this program. If not, see {http://www.gnu.org/licenses/}. + + Home: https://github.com/gorhill/uMatrix +*/ + +'use strict'; + +/******************************************************************************/ + +let faIconsInit = function(root) { + const icons = (root || document).querySelectorAll('.fa-icon'); + for ( const icon of icons ) { + if ( icon.childElementCount !== 0 ) { continue; } + const name = icon.textContent; + const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + svg.classList.add('fa-icon_' + name); + const use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); + const href = '/img/fontawesome/fontawesome-defs.svg#' + name; + use.setAttribute('href', href); + use.setAttribute('xlink:href', href); + svg.appendChild(use); + icon.textContent = ''; + icon.appendChild(svg); + if ( icon.classList.contains('fa-icon-badged') ) { + const badge = document.createElement('span'); + badge.className = 'fa-icon-badge'; + icon.appendChild(badge); + } + } +}; + +faIconsInit();