Convert menu icons to SVG (#4220)

* Convert menu icons to SVG
- replaced png images with svg
- 20% decrease in file size, improving load times
- removed 384 unused files from repo

* Transferred package to organisation

.gitignore

@@ -2,6 +2,8 @@
 node_modules
 vendor
 public/resources
+public/images/menubar/*
+!public/images/menubar/.gitkeep
 app/Config/email.php
 npm-debug.log*
 

app/Views/home/home.php

@@ -17,7 +17,7 @@
         {
         ?>
             <div class="module_item" title="<?= lang("Module.$module->module_id" . '_desc') ?>">
-                <a href="<?= base_url($module->module_id) ?>"><img src="<?= base_url("images/menubar/$module->module_id.png") ?>" style="border-width: 0;" alt="Menubar Image" /></a>
+                <a href="<?= base_url($module->module_id) ?>"><img src="<?= base_url("images/menubar/$module->module_id.svg") ?>" style="border-width: 0; height: 64px; max-width: 64px;" alt="Menubar Image" /></a>
                 <a href="<?= base_url($module->module_id) ?>"><?= lang("Module.$module->module_id") ?></a>
             </div>
         <?php

app/Views/home/office.php

@@ -17,7 +17,7 @@
     {
     ?>
         <div class="module_item" title="<?= lang("Module.$module->module_id" . '_desc') ?>">
-            <a href="<?= base_url($module->module_id) ?>"><img src="<?= base_url("images/menubar/$module->module_id.png") ?>" style="border-width: 0;" alt="Menubar Image" /></a>
+            <a href="<?= base_url($module->module_id) ?>"><img src="<?= base_url("images/menubar/$module->module_id.svg") ?>" style="border-width: 0; height: 64px; max-width: 64px;" alt="Menubar Image" /></a>
             <a href="<?= base_url($module->module_id) ?>"><?= lang("Module.$module->module_id") ?></a>
         </div>
     <?php

app/Views/partial/header.php

@@ -84,8 +84,7 @@ $request = Services::request();
                         <?php foreach($allowed_modules as $module): ?>
                             <li class="<?= $module->module_id == $request->getUri()->getSegment(1) ? 'active' : '' ?>">
                                 <a href="<?= base_url($module->module_id) ?>" title="<?= lang("Module.$module->module_id") ?>" class="menu-icon">
-
-                                    <img src="<?= base_url("images/menubar/$module->module_id.png") ?>" style="border: none;" alt="Module Icon"/><br/>
+                                    <img src="<?= base_url("images/menubar/$module->module_id.svg") ?>" style="border: none;" alt="Module Icon"/><br/>
                                     <?= lang('Module.' . $module->module_id) ?>
                                 </a>
                             </li>

gulpfile.js

@@ -248,6 +248,29 @@ gulp.task('copy-fonts', function() {
 });
 
 
+gulp.task('copy-menubar', function() {
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/star.svg"),rename("attributes.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/bookshelf.svg"),rename("cashups.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/gear.svg"),rename("config.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/contacts.svg"),rename("customers.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/profle.svg"),rename("employees.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/compose.svg"),rename("expenses.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/clipboard.svg"),rename("expenses_categories.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/heart.svg"),rename("giftcards.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/door.svg"),rename("home.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/stack.svg"),rename("item_kits.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/shop.svg"),rename("items.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/smartphone.svg"),rename("messages.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/tools.svg"),rename("migrate.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/door.svg"),rename("office.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/dolly.svg"),rename("receivings.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/bar-chart.svg"),rename("reports.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/cart.svg"),rename("sales.svg"),gulp.dest("public/images/menubar"));
+    pipeline(gulp.src("./node_modules/elegant-circles/svg/full-color/briefcase.svg"),rename("suppliers.svg"),gulp.dest("public/images/menubar"));
+    return pipeline(gulp.src('./node_modules/elegant-circles/svg/full-color/money.svg'),rename("taxes.svg"),gulp.dest("public/images/menubar"));
+});
+
+
 gulp.task('inject-login', function() {
     return pipeline(gulp.src('./app/Views/login.php'),
         inject(gulp.src('./public/css/login.min.css', {read: false}), {addRootSlash: false, ignorePath: '/public/', starttag: '<!-- inject:login:{{ext}} -->'}),
@@ -280,6 +303,7 @@ gulp.task('default',
         'debug-css',
         'prod-css',
         'copy-fonts',
+        'copy-menubar',
         'inject-login',
         'update-licenses',
         'build-database'

package-lock.json

@@ -28,6 +28,7 @@
                 "chartist-plugin-tooltips": "^0.0.17",
                 "clipboard": "^2.0.11",
                 "coffeescript": "^2.7.0",
+                "elegant-circles": "github:opensourcepos/elegant-circles#minified",
                 "es6-promise": "^4.2.8",
                 "file-saver": "^2.0.5",
                 "html2canvas": "^1.4.1",
@@ -1434,6 +1435,11 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/elegant-circles": {
+            "version": "1.0.0",
+            "resolved": "git+ssh://git@github.com/opensourcepos/elegant-circles.git#9d28a52613671a0db8f32a888fde00654a1fdc67",
+            "license": "GPL"
+        },
         "node_modules/emoji-regex": {
             "version": "8.0.0",
             "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",

package.json

@@ -49,6 +49,7 @@
         "chartist-plugin-tooltips": "^0.0.17",
         "clipboard": "^2.0.11",
         "coffeescript": "^2.7.0",
+        "elegant-circles": "github:opensourcepos/elegant-circles#minified",
         "es6-promise": "^4.2.8",
         "file-saver": "^2.0.5",
         "html2canvas": "^1.4.1",