Tweaks (#18)

* Tweaks * Add Fontawesome * Tweak * Tweak * Tweak * Tweak * Tweak
cssnr · Dec 18, 2023 · f295d3d · f295d3d
1 parent 4add53d
commit f295d3d
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 93 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -9,19 +9,23 @@ gulp.task('bootstrap', () => {
         .pipe(gulp.dest('src/dist/bootstrap'))
 })
 
-// gulp.task('bootstrap-icons', () => {
-//     gulp.src(['node_modules/bootstrap-icons/font/fonts/**']).pipe(
-//         gulp.dest('src/dist/bootstrap/fonts')
-//     )
-//     return gulp
-//         .src(['node_modules/bootstrap-icons/font/bootstrap-icons.min.css'])
-//         .pipe(gulp.dest('src/dist/bootstrap'))
-// })
+gulp.task('fontawesome', () => {
+    return gulp
+        .src(
+            [
+                'node_modules/@fortawesome/fontawesome-free/css/all.min.css',
+                'node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-*',
+                'node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-*',
+            ],
+            { base: 'node_modules/@fortawesome/fontawesome-free' }
+        )
+        .pipe(gulp.dest('src/dist/fontawesome'))
+})
 
 gulp.task('jquery', () => {
     return gulp
         .src('node_modules/jquery/dist/jquery.min.js')
         .pipe(gulp.dest('src/dist/jquery'))
 })
 
-gulp.task('default', gulp.parallel('bootstrap', 'jquery'))
+gulp.task('default', gulp.parallel('bootstrap', 'fontawesome', 'jquery'))
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "build": "npm run build:chrome && npm run build:firefox"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.1",
     "bootstrap": "^5.3.2",
     "jquery": "^3.7.1"
   },

diff --git a/src/css/options.css b/src/css/options.css
@@ -1,5 +1,5 @@
 /* CSS for options.html */
 
 .card {
-    min-width: 360px;
+    min-width: 380px;
 }
diff --git a/src/html/oninstall.html b/src/html/oninstall.html
@@ -4,6 +4,7 @@
     <title>Open Links in New Tab</title>
     <link rel="icon" href="../images/logo16.png" sizes="any">
     <link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../dist/fontawesome/css/all.min.css">
     <link rel="stylesheet" type="text/css" href="../css/main.css">
     <script type="text/javascript" src="../js/theme.js"></script>
 </head>
@@ -13,15 +14,15 @@
 <div class="d-flex align-items-center h-100">
 <div class="col-xl-6 col-md-8 col-12 m-auto">
 <div class="card p-3 text-center">
-
-    <div class="justify-content-center align-items-center d-flex">
-        <img src="../images/logo48.png" class="img-fluid float-start me-2" alt="Open Links in New Tab" height="48" width="48">
-        <h1 class="align-middle">Welcome</h1>
+    <div class="d-flex justify-content-center align-items-center">
+        <img src="../images/logo48.png" class="me-2" height="48" width="48"
+             alt="Open Links in New Tab" title="Open Links in New Tab">
+        <h1>Welcome</h1>
     </div>
     <div class="d-none grant-perms">
         <p class="lead">To always open links in new tabs for sites you toggle on, permissions to run on all hosts are needed.</p>
         <a id="grant-perms" class="btn btn-lg btn-success w-100 mb-3" role="button">
-            Grant Host Permissions  <svg class="ms-1"><use xlink:href="#bi-check2-circle" /></svg></a>
+            <i class="fa-solid fa-check-double me-1"></i> Grant Host Permissions</a>
     </div>
     <p>
         This web extension injects the
@@ -30,40 +31,26 @@ <h1 class="align-middle">Welcome</h1>
         If so, it sets all links to open in a new tab.
     </p>
     <a id="open-options" class="btn btn-lg btn-outline-info w-100 mb-3" role="button" href="../html/options.html">
-        Open Options <svg class="ms-1"><use xlink:href="#bi-gear" /></svg></a>
+        <i class="fa-solid fa-sliders me-1"></i> Open Options</a>
+    <hr>
     <div class="text-center">
         <a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
            href="https://github.com/cssnr/open-links-in-new-tab">
-            View Source <svg class="ms-1"><use xlink:href="#bi-github" /></svg></a>
+            View Source</a>
         <svg><use xlink:href="#bi-dot" /></svg>
         <a class="link-body-emphasis text-decoration-none" target="_blank" rel="noopener"
            href="https://github.com/cssnr/open-links-in-new-tab#readme">
-            Get Support <svg class="ms-1"><use xlink:href="#bi-question-circle-fill" /></svg></a>
+            Get Support</a>
     </div>
-
 </div> <!-- card -->
 </div> <!-- col -->
 </div> <!-- flex -->
 </div> <!-- container -->
 
 <div class="d-none">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-check2-circle" viewBox="0 0 16 16">
-        <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0"/>
-        <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/>
-    </svg>
     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-dot" viewBox="0 0 16 16">
         <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>
     </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-gear" viewBox="0 0 16 16">
-        <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
-        <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
-    </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-github" viewBox="0 0 16 16">
-        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
-    </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-question-circle-fill" viewBox="0 0 16 16">
-        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
-    </svg>
 </div>
 
 <script type="text/javascript" src="../dist/jquery/jquery.min.js"></script>

diff --git a/src/html/options.html b/src/html/options.html
@@ -4,6 +4,7 @@
     <title>Open Links in New Tab</title>
     <link rel="icon" href="../images/logo16.png" sizes="any">
     <link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../dist/fontawesome/css/all.min.css">
     <link rel="stylesheet" type="text/css" href="../css/main.css">
     <link rel="stylesheet" type="text/css" href="../css/options.css">
     <script type="text/javascript" src="../js/theme.js"></script>
@@ -15,9 +16,10 @@
 <div class="col-xl-8 col-md-10 col-12 m-auto">
 <div class="card" >
 <div class="card-body">
-    <div class="justify-content-center align-items-center d-flex">
-        <img src="../images/logo48.png" class="img-fluid float-start me-2" alt="Open Links in New Tab" height="48" width="48">
-        <h1 class="align-middle">Open Links in New Tab</h1>
+    <div class="d-flex justify-content-center align-items-center">
+        <img src="../images/logo48.png" class="me-2" height="48" width="48"
+             alt="Open Links in New Tab" title="Open Links in New Tab">
+        <h1>Open Links in New Tab</h1>
     </div>
     <div class="clearfix"></div>
     <p class="text-center lead">v<span id="version"></span></p>
@@ -26,26 +28,26 @@ <h1 class="align-middle">Open Links in New Tab</h1>
         <thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
         <tbody>
             <tr>
-                <td>Show Popup Action <svg class="ms-1"><use xlink:href="#bi-keyboard" /></svg></td>
+                <td>Show Popup Action <i class="fa-regular fa-keyboard ms-1"></i></td>
                 <td class="text-end" title="Keyboard Shortcut"><kbd id="mainKey">Unknown</kbd></td>
             </tr>
             <tr>
-                <td>Toggle Current Site <svg class="ms-1"><use xlink:href="#bi-keyboard" /></svg></td>
+                <td>Toggle Current Site <i class="fa-regular fa-keyboard ms-1"></i></td>
                 <td class="text-end" title="Keyboard Shortcut"><kbd id="toggleSite">Unknown</kbd></td>
             </tr>
             <tr>
-                <td>Temporarily Enable Site <svg class="ms-1"><use xlink:href="#bi-keyboard" /></svg></td>
+                <td>Temporarily Enable Site <i class="fa-regular fa-keyboard ms-1"></i></td>
                 <td class="text-end" title="Keyboard Shortcut"><kbd id="enableTemp">Unknown</kbd></td>
             </tr>
         </tbody>
     </table>
-    <form id="options-form" class="mt-4">
+    <form id="options-form" class="mb-3">
         <div class="form-check form-switch">
             <input class="form-check-input" type="checkbox" role="switch" id="autoReload">
             <label class="form-check-label" for="autoReload" aria-describedby="autoReloadHelp">
                 Auto Reload on Disable
                 <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Auto Reload Page when Disabling a Site.">
-                    <svg class="ms-1"><use xlink:href="#bi-info-circle-fill" /></svg>
+                    <i class="fa-solid fa-circle-info ms-1"></i>
                 </span>
             </label>
         </div>
@@ -54,7 +56,7 @@ <h1 class="align-middle">Open Links in New Tab</h1>
             <label class="form-check-label" for="onScroll" aria-describedby="onScrollHelp">
                 Update Links On Scroll
                 <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Update Links after Every Scroll Event on Enabled Pages.">
-                    <svg class="ms-1"><use xlink:href="#bi-info-circle-fill" /></svg>
+                    <i class="fa-solid fa-circle-info ms-1"></i>
                 </span>
             </label>
         </div>
@@ -63,7 +65,7 @@ <h1 class="align-middle">Open Links in New Tab</h1>
             <label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">
                 Enable Right Click Menu
                 <span data-bs-toggle="tooltip" data-bs-title="Show Context Menu on Right Click.">
-                    <svg class="ms-1"><use xlink:href="#bi-info-circle-fill" /></svg>
+                    <i class="fa-solid fa-circle-info ms-1"></i>
                 </span>
             </label>
         </div>
@@ -72,21 +74,24 @@ <h1 class="align-middle">Open Links in New Tab</h1>
             <label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">
                 Show Release Notes on Update
                 <span data-bs-toggle="tooltip" data-bs-title="Show Release Notes on Version Update.">
-                    <svg class="ms-1"><use xlink:href="#bi-info-circle-fill" /></svg>
+                    <i class="fa-solid fa-circle-info ms-1"></i>
                 </span>
             </label>
         </div>
     </form>
 
     <div class="d-none grant-perms">
-        <a id="grant-perms" class="btn btn-lg btn-success w-100 mb-1" role="button">Grant Host Permissions</a>
-        <p class="text-center"><a role="button" class="open-oninstall" href="../html/oninstall.html">More Information on Permissions</a></p>
+        <a id="grant-perms" class="btn btn-lg btn-success w-100 mb-1" role="button">
+            <i class="fa-solid fa-check-double me-1"></i> Grant Host Permissions</a>
+        <p class="text-center"><a role="button" class="open-oninstall" href="../html/oninstall.html">
+            More Information on Permissions</a></p>
     </div>
+
     <table id="hosts-table" class="table table-sm table-hover bg-transparent">
         <caption>Enabled Hosts</caption>
         <thead><tr>
             <th scope="col" class="text-center" style="width: 36px;">
-                <svg><use xlink:href="#bi-trash3-fill" /></svg>
+                <i class="fa-solid fa-trash-can"></i>
             </th>
             <th scope="col">Host</th>
         </tr></thead>
@@ -109,22 +114,10 @@ <h1 class="align-middle">Open Links in New Tab</h1>
 </div> <!-- container -->
 
 <div class="d-none">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-info-circle-fill" viewBox="0 0 16 16">
-        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
-    </svg>
+    <i class="fa-regular fa-trash-can"></i>
     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-dot" viewBox="0 0 16 16">
         <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>
     </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-keyboard" viewBox="0 0 16 16">
-        <path d="M14 5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zM2 4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/>
-        <path d="M13 10.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm0-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-5 0A.25.25 0 0 1 8.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 8 8.75zm2 0a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25zm1 2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-5-2A.25.25 0 0 1 6.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 6 8.75zm-2 0A.25.25 0 0 1 4.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 4 8.75zm-2 0A.25.25 0 0 1 2.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 2 8.75zm11-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-2 0a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-2 0A.25.25 0 0 1 9.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 9 6.75zm-2 0A.25.25 0 0 1 7.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 7 6.75zm-2 0A.25.25 0 0 1 5.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 5 6.75zm-3 0A.25.25 0 0 1 2.25 6h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5A.25.25 0 0 1 2 6.75zm0 4a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm2 0a.25.25 0 0 1 .25-.25h5.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-5.5a.25.25 0 0 1-.25-.25z"/>
-    </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-trash3" viewBox="0 0 16 16">
-        <path d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"/>
-    </svg>
-    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-trash3-fill" viewBox="0 0 16 16">
-        <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5Zm-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5ZM4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5Z"/>
-    </svg>
 </div>
 
 <script type="text/javascript" src="../dist/jquery/jquery.min.js"></script>