NEW: Migrate Icons to SVG Using Helper to Improve Performance

- #15
aljawaid · Sep 16, 2023 · 4a68cb4 · 4a68cb4
1 parent 22116c2
commit 4a68cb4
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 17 deletions.
diff --git a/Assets/css/kanboard-support.css b/Assets/css/kanboard-support.css
@@ -64,10 +64,19 @@
     width: 50px;
 }
 
+/* User Dropdown Menu Icon */
+li.support-dropdown svg {
+    pointer-events: none;
+    display: inline-block;
+    vertical-align: bottom;
+}
+
 .config-page h2 .ks-icon {
     vertical-align: text-top;
     width: 22px;
     height: 22px;
+    pointer-events: none;
+    display: inline-block;
 }
 
 i.fa-lock {
@@ -458,6 +467,11 @@ table.support-table.user-table tr td:first-child::before {
 
 .data-btn svg {
     vertical-align: bottom;
+    transition: var(--transition-kanboard-support);
+}
+
+.data-btn:hover svg {
+    color: var(--pp-red-alt-2);
 }
 
 .privacy-none {
@@ -478,6 +492,8 @@ a.kb-updates-link {
     vertical-align: text-top;
     width: 22px;
     height: 22px;
+    pointer-events: none;
+    display: inline-block;
 }
 
 .webhooks-page h2, .webhooks-info-page section .page-header h2 {
@@ -578,7 +594,9 @@ code.field-code {
     margin-bottom: 5px;
 }
 
-.token-panel span.webhooks-icon {
+.token-panel svg.webhooks-icon {
+    pointer-events: none;
+    display: inline-block;
     vertical-align: sub;
 }
 
@@ -652,25 +670,42 @@ form.add-webhook-form .form-actions button {
     border-color: var(--pp-red-alt-2);
 }
 
+.config-btns button.config-btn-green svg, .config-btns button.config-btn-green svg {
+    color: var(--pp-green);
+}
+
+.config-btns button.config-btn-red svg, .config-btns button.config-btn-red svg {
+    color: var(--pp-red-alt-2);
+}
+
+.config-btns button:hover svg, .config-btns button:focus svg {
+    color: var(--pp-black);
+}
+
 .config-btns button.config-btn-red:disabled {
     cursor: not-allowed;
     color: var(--pp-grey);
 }
 
-.config-btns button span {
+.config-btns button svg {
     vertical-align: sub;
     width: 22px;
+    display: inline-block;
+    pointer-events: none;
+    transition: var(--transition-kanboard-support);
 }
 
 .config-modal .modal-page-header h2 {
     margin-top: 0;
     font-weight: bold;
 }
 
-.config-modal .modal-page-header h2 .modal-title span {
+.config-modal .modal-page-header h2 .modal-title svg {
     width: 24px;
     height: 24px;
     vertical-align: sub;
+    display: inline-block;
+    pointer-events: none;
 }
 
 .config-modal .modal-contents.panel pre {

diff --git a/Template/config/support.php b/Template/config/support.php
@@ -5,7 +5,7 @@
 <div class="config-page">
     <div class="page-header" style="margin-top: 10px;">
         <h2 class="">
-            <span class="ks-icon"></span> <?= t('Application Configuration') ?>
+            <?= $this->helper->supportHelper->embedSVGIcon('ks-icon') ?> <?= t('Application Configuration') ?>
         </h2>
     </div>
     <p class="">
@@ -23,10 +23,7 @@
         </h3>
     </section>
     <button class="data-btn" title="<?= t('Screenshot friendly') ?>">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-eye-slash-fill" viewBox="0 0 16 16">
-            <path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/>
-            <path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z"/>
-        </svg> <?= t('Hide Data') ?>
+        <?= $this->helper->supportHelper->embedSVGIcon('privacy-icon') ?> <?= t('Hide Data') ?>
     </button>
     <!-- USER CONFIGURATION -->
     <section class="support-section">
@@ -127,17 +124,17 @@
                         <?php if (file_exists(ROOT_DIR . DIRECTORY_SEPARATOR . 'config.php')): ?>
                             <button href="<?= $this->url->href('TechnicalSupportController', 'showCurrentRawConfigModal', array(
                                 'plugin' => 'KanboardSupport'), false, '', false) ?>" class="btn config-btn config-btn-green js-modal-confirm" title="<?= t('The settings in this file apply to the current application environment') ?>">
-                                <span class="raw-icon-green"></span> <?= t('Current Raw Config File') ?>
+                                <?= $this->helper->supportHelper->embedSVGIcon('raw-icon') ?> <?= t('Current Raw Config File') ?>
                             </button>
                         <?php else: ?>
                             <button href="<?= $this->url->href('TechnicalSupportController', 'showCurrentRawConfigModal', array(
                                 'plugin' => 'KanboardSupport'), false, '', false) ?>" class="btn config-btn config-btn-red js-modal-confirm" title="<?= t('An active configuration file has not been detected. Make sure the filename is correct.') ?>" disabled>
-                                <span class="raw-icon-green"></span> <?= t('Current Raw Config File') ?>
+                                <?= $this->helper->supportHelper->embedSVGIcon('raw-icon') ?> <?= t('Current Raw Config File') ?>
                             </button>
                         <?php endif ?>
                         <button href="<?= $this->url->href('TechnicalSupportController', 'showDefaultRawConfigModal', array(
                             'plugin' => 'KanboardSupport'), false, '', false) ?>" class="btn config-btn config-btn-red js-modal-confirm" title="<?= t('This file is for reference only') ?>">
-                            <span class="raw-icon-red"></span> <?= t('Default Raw Config File') ?>
+                            <?= $this->helper->supportHelper->embedSVGIcon('raw-icon') ?> <?= t('Default Raw Config File') ?>
                         </button>
                     </div>
                 <?php endif ?>

diff --git a/Template/config/webhook.php b/Template/config/webhook.php
@@ -1,7 +1,7 @@
 <!-- KanboardSupport Plugin -->
 <div class="webhooks-page">
     <div class="page-header" style="margin-top: 10px;">
-        <h2 class=""><span class="webhooks-icon"></span> <?= t('Connecting External Applications') ?></h2>
+        <h2 class=""><?= $this->helper->supportHelper->embedSVGIcon('webhooks-icon') ?> <?= t('Connecting External Applications') ?></h2>
     </div>
     <div class="webhooks-page-intro">
         <?= t('Webhooks are useful to perform actions with external applications such as:') ?>
@@ -18,7 +18,7 @@
         <?= e('To view the list of supported events or see some examples, visit the %s page', $this->url->link(t('Webhooks Information'), 'TechnicalSupportController', 'showWebhookInformation', array('plugin' => 'KanboardSupport'), false, 'webhooks-link', t('Visit page'))) ?>
     </div>
     <div class="page-header margin-top">
-        <h2 class=""><span class="webhooks-icon"></span> <?= t('Webhook Token') ?></h2>
+        <h2 class=""><?= $this->helper->supportHelper->embedSVGIcon('webhooks-icon') ?> <?= t('Webhook Token') ?></h2>
     </div>
     <section class="message error cleaner-warning">
         <header></header>
@@ -29,7 +29,7 @@
         </h3>
     </section>
     <div class="panel token-panel">
-        <span class="webhooks-icon"></span> <?= t('Token:') ?>
+        <?= $this->helper->supportHelper->embedSVGIcon('webhooks-icon') ?> <?= t('Token:') ?>
         <strong><?= $this->text->e($values['webhook_token']) ?></strong>
         <?= $this->url->link(t('Reset Token'), 'ConfigController', 'token', array('type' => 'webhook'), true, 'btn btn-red reset-token-btn') ?>
     </div>

diff --git a/Template/header/user_dropdown.php b/Template/header/user_dropdown.php
@@ -1,3 +1,3 @@
 <li class="support-dropdown">
-    <?= $this->url->icon('question-circle', t('Configuration'), 'TechnicalSupportController', 'show', ['plugin' => 'KanboardSupport', ]) ?>
+    <?= $this->url->link($this->helper->supportHelper->embedSVGIcon('ks-icon') . t('Configuration'), 'TechnicalSupportController', 'show', ['plugin' => 'KanboardSupport', ]) ?>
 </li>
diff --git a/Template/modals/current-raw-config.php b/Template/modals/current-raw-config.php
@@ -38,7 +38,7 @@
     <div class="modal-page-header">
         <h2 class="relative">
             <span class="modal-title">
-                <span class="raw-icon-green"></span> <?= $title ?>
+                <?= $this->helper->supportHelper->embedSVGIcon('raw-icon') ?> <?= $title ?>
             </span>
         </h2>
     </div>

diff --git a/Template/modals/default-raw-config.php b/Template/modals/default-raw-config.php
@@ -38,7 +38,7 @@
     <div class="modal-page-header">
         <h2 class="relative">
             <span class="modal-title">
-                <span class="raw-icon-red"></span> <?= $title ?>
+                <?= $this->helper->supportHelper->embedSVGIcon('raw-icon') ?> <?= $title ?>
             </span>
         </h2>
     </div>