Merge pull request 'Added salix font icons' (#3) from vn-icons into dev

Reviewed-on: verdnatura/salix-front#3

src/App.vue

@@ -2,8 +2,23 @@
     <router-view></router-view>
 </template>
 
+<script lang="ts" setup>
+import { useQuasar } from 'quasar';
+const quasar = useQuasar();
+
+quasar.iconMapFn = (iconName) => {
+    if (iconName.startsWith('vn:')) {
+        const name = iconName.substring(3);
+
+        return {
+            cls: `icon-${name}`,
+        };
+    }
+};
+</script>
+
 <style lang="scss">
 .body--light {
-    background-color: #ccc;
+    background-color: #eee;
 }
 </style>

src/styles/icons.scss

@@ -0,0 +1,394 @@
+@font-face {
+    font-family: 'icomoon';
+    src:  url('fonts/icomoon.eot?cjtmya');
+    src:  url('fonts/icomoon.eot?cjtmya#iefix') format('embedded-opentype'),
+      url('fonts/icomoon.ttf?cjtmya') format('truetype'),
+      url('fonts/icomoon.woff?cjtmya') format('woff'),
+      url('fonts/icomoon.svg?cjtmya#icomoon') format('svg');
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+  }
+  
+  [class^="icon-"], [class*=" icon-"] {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'icomoon' !important;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+  
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  
+  .icon-frozen:before {
+    content: "\e900";
+  }
+  .icon-Person:before {
+    content: "\e901";
+  }
+  .icon-handmadeArtificial:before {
+    content: "\e902";
+  }
+  .icon-fruit:before {
+    content: "\e903";
+  }
+  .icon-funeral:before {
+    content: "\e904";
+  }
+  .icon-noPayMethod:before {
+    content: "\e905";
+  }
+  .icon-preserved:before {
+    content: "\e906";
+  }
+  .icon-greenery:before {
+    content: "\e907";
+  }
+  .icon-planta:before {
+    content: "\e908";
+  }
+  .icon-handmade:before {
+    content: "\e909";
+  }
+  .icon-accessory:before {
+    content: "\e90a";
+  }
+  .icon-artificial:before {
+    content: "\e90b";
+  }
+  .icon-flower:before {
+    content: "\e90c";
+  }
+  .icon-fixedPrice:before {
+    content: "\e90d";
+  }
+  .icon-addperson:before {
+    content: "\e90e";
+  }
+  .icon-supplierfalse:before {
+    content: "\e90f";
+  }
+  .icon-invoice-out:before {
+    content: "\e910";
+  }
+  .icon-invoice-in:before {
+    content: "\e911";
+  }
+  .icon-invoice-in-create:before {
+    content: "\e912";
+  }
+  .icon-basketadd:before {
+    content: "\e913";
+  }
+  .icon-basket:before {
+    content: "\e914";
+  }
+  .icon-uniE915:before {
+    content: "\e915";
+  }
+  .icon-uniE916:before {
+    content: "\e916";
+  }
+  .icon-uniE917:before {
+    content: "\e917";
+  }
+  .icon-uniE918:before {
+    content: "\e918";
+  }
+  .icon-uniE919:before {
+    content: "\e919";
+  }
+  .icon-uniE91A:before {
+    content: "\e91a";
+  }
+  .icon-isTooLittle:before {
+    content: "\e91b";
+  }
+  .icon-deliveryprices:before {
+    content: "\e91c";
+  }
+  .icon-onlinepayment:before {
+    content: "\e91d";
+  }
+  .icon-risk:before {
+    content: "\e91e";
+  }
+  .icon-noweb:before {
+    content: "\e91f";
+  }
+  .icon-no036:before {
+    content: "\e920";
+  }
+  .icon-disabled:before {
+    content: "\e921";
+  }
+  .icon-treatments:before {
+    content: "\e922";
+  }
+  .icon-invoice:before {
+    content: "\e923";
+  }
+  .icon-photo:before {
+    content: "\e924";
+  }
+  .icon-supplier:before {
+    content: "\e925";
+  }
+  .icon-languaje:before {
+    content: "\e926";
+  }
+  .icon-credit:before {
+    content: "\e927";
+  }
+  .icon-client:before {
+    content: "\e928";
+  }
+  .icon-shipment-01:before {
+    content: "\e929";
+  }
+  .icon-account:before {
+    content: "\e92a";
+  }
+  .icon-inventory:before {
+    content: "\e92b";
+  }
+  .icon-unavailable:before {
+    content: "\e92c";
+  }
+  .icon-wiki:before {
+    content: "\e92d";
+  }
+  .icon-attach:before {
+    content: "\e92e";
+  }
+  .icon-exit:before {
+    content: "\e92f";
+  }
+  .icon-anonymous:before {
+    content: "\e930";
+  }
+  .icon-net:before {
+    content: "\e931";
+  }
+  .icon-buyrequest:before {
+    content: "\e932";
+  }
+  .icon-thermometer:before {
+    content: "\e933";
+  }
+  .icon-entry:before {
+    content: "\e934";
+  }
+  .icon-deletedTicket:before {
+    content: "\e935";
+  }
+  .icon-logout:before {
+    content: "\e936";
+  }
+  .icon-catalog:before {
+    content: "\e937";
+  }
+  .icon-agency:before {
+    content: "\e938";
+  }
+  .icon-delivery:before {
+    content: "\e939";
+  }
+  .icon-wand:before {
+    content: "\e93a";
+  }
+  .icon-buscaman:before {
+    content: "\e93b";
+  }
+  .icon-pbx:before {
+    content: "\e93c";
+  }
+  .icon-calendar:before {
+    content: "\e93d";
+  }
+  .icon-splitline:before {
+    content: "\e93e";
+  }
+  .icon-consignatarios:before {
+    content: "\e93f";
+  }
+  .icon-tax:before {
+    content: "\e940";
+  }
+  .icon-notes:before {
+    content: "\e941";
+  }
+  .icon-lines:before {
+    content: "\e942";
+  }
+  .icon-zone:before {
+    content: "\e943";
+  }
+  .icon-greuge:before {
+    content: "\e944";
+  }
+  .icon-ticketAdd:before {
+    content: "\e945";
+  }
+  .icon-components:before {
+    content: "\e946";
+  }
+  .icon-pets:before {
+    content: "\e947";
+  }
+  .icon-linesprepaired:before {
+    content: "\e948";
+  }
+  .icon-control:before {
+    content: "\e949";
+  }
+  .icon-revision:before {
+    content: "\e94a";
+  }
+  .icon-deaulter:before {
+    content: "\e94b";
+  }
+  .icon-services:before {
+    content: "\e94c";
+  }
+  .icon-albaran:before {
+    content: "\e94d";
+  }
+  .icon-solunion:before {
+    content: "\e94e";
+  }
+  .icon-stowaway:before {
+    content: "\e94f";
+  }
+  .icon-apps:before {
+    content: "\e951";
+  }
+  .icon-info:before {
+    content: "\e952";
+  }
+  .icon-columndelete:before {
+    content: "\e953";
+  }
+  .icon-columnadd:before {
+    content: "\e954";
+  }
+  .icon-deleteline:before {
+    content: "\e955";
+  }
+  .icon-item:before {
+    content: "\e956";
+  }
+  .icon-worker:before {
+    content: "\e957";
+  }
+  .icon-headercol:before {
+    content: "\e958";
+  }
+  .icon-reserva:before {
+    content: "\e959";
+  }
+  .icon-100:before {
+    content: "\e95a";
+  }
+  .icon-sign:before {
+    content: "\e95d";
+  }
+  .icon-polizon:before {
+    content: "\e95e";
+  }
+  .icon-solclaim:before {
+    content: "\e95f";
+  }
+  .icon-actions:before {
+    content: "\e960";
+  }
+  .icon-details:before {
+    content: "\e961";
+  }
+  .icon-traceability:before {
+    content: "\e962";
+  }
+  .icon-claims:before {
+    content: "\e963";
+  }
+  .icon-regentry:before {
+    content: "\e964";
+  }
+  .icon-transaction:before {
+    content: "\e966";
+  }
+  .icon-History:before {
+    content: "\e968";
+  }
+  .icon-mana:before {
+    content: "\e96a";
+  }
+  .icon-ticket:before {
+    content: "\e96b";
+  }
+  .icon-niche:before {
+    content: "\e96c";
+  }
+  .icon-tags:before {
+    content: "\e96d";
+  }
+  .icon-volume:before {
+    content: "\e96e";
+  }
+  .icon-bin:before {
+    content: "\e96f";
+  }
+  .icon-splur:before {
+    content: "\e970";
+  }
+  .icon-barcode:before {
+    content: "\e971";
+  }
+  .icon-botanical:before {
+    content: "\e972";
+  }
+  .icon-clone:before {
+    content: "\e973";
+  }
+  .icon-sms:before {
+    content: "\e975";
+  }
+  .icon-eye:before {
+    content: "\e976";
+  }
+  .icon-doc:before {
+    content: "\e977";
+  }
+  .icon-package:before {
+    content: "\e978";
+  }
+  .icon-settings:before {
+    content: "\e979";
+  }
+  .icon-bucket:before {
+    content: "\e97a";
+  }
+  .icon-mandatory:before {
+    content: "\e97b";
+  }
+  .icon-recovery:before {
+    content: "\e97c";
+  }
+  .icon-payment:before {
+    content: "\e97e";
+  }
+  .icon-grid:before {
+    content: "\e980";
+  }
+  .icon-web:before {
+    content: "\e982";
+  }
+  .icon-dfiscales:before {
+    content: "\e984";
+  }
+  

src/styles/quasar.scss

@@ -1,3 +1,4 @@
 @import './quasar.variables.scss';
 @import '~quasar-styl';
+@import './icons.scss';
 // @import '~quasar-addon-styl';

src/views/Layout/Main.vue

@@ -11,7 +11,7 @@
             :width="200"
             :breakpoint="500"
         >
-            <q-scroll-area class="fit">
+            <q-scroll-area class="fit text-grey-8">
                 <q-list padding>
                     <q-item clickable v-ripple :to="{ path: '/dashboard' }" active-class="text-orange">
                         <q-item-section avatar>
@@ -25,6 +25,12 @@
                         </q-item-section>
                         <q-item-section> Customers </q-item-section>
                     </q-item>
+                    <q-item clickable v-ripple :to="{ path: '/ticket' }" active-class="text-orange">
+                        <q-item-section avatar>
+                            <q-icon name="vn:ticket" />
+                        </q-item-section>
+                        <q-item-section> Tickets </q-item-section>
+                    </q-item>
                     <q-item clickable v-ripple>
                         <q-item-section avatar>
                             <q-icon name="receipt" />