Add mira and nano themes

.gitignore

@@ -34,4 +34,6 @@ yarn-error.log*
 # Themes
 public/themes/soho-light/
 public/themes/soho-dark/
+public/themes/mira/
+public/themes/nano/
 

gulpfile.js

@@ -25,7 +25,8 @@ gulp.task('build-css', function() {
 
 gulp.task('build-themes', function() {
     return gulp.src([
-        'public/themes/**/*','!public/themes/soho-*/**/*'
+        'public/themes/**/*','!public/themes/soho-*/**/*',
+                        '!public/themes/mira/**/*', '!public/themes/nano/**/*'
     ])
     .pipe(gulp.dest('resources/themes'));
 })

src/AppConfigurator.vue

@@ -210,6 +210,18 @@
                             </button>
                             <span>Soho Dark</span>
                         </div>
+                        <div class="p-col-3">
+                            <button class="p-link" type="button" @click="changeTheme($event, 'mira')">
+                                <img src="demo/images/themes/mira.jpg" alt="Mira" />
+                            </button>
+                            <span>Mira</span>
+                        </div>
+                        <div class="p-col-3">
+                            <button class="p-link" type="button" @click="changeTheme($event, 'nano')">
+                                <img src="demo/images/themes/nano.jpg" alt="Mira" />
+                            </button>
+                            <span>Nano</span>
+                        </div>
                     </div>
 
                     <h4>Legacy Free Themes</h4>
@@ -326,6 +338,8 @@
 </template>
 
 <script>
+import EventBus from '@/EventBus';
+
 export default {
     props: {
         theme: String,
@@ -347,6 +361,16 @@ export default {
             }
         }
     },
+    mounted() {
+        EventBus.on('change-theme', event => {
+            if (event.theme === 'nano')
+                this.scale = 12;
+            else
+                this.scale = 14;
+
+            this.applyScale();
+        });
+    },
     methods: {
         toggleConfigurator(event) {
             this.active = !this.active;
@@ -387,10 +411,13 @@ export default {
         },
         decrementScale() {
             this.scale--;
-            document.documentElement.style.fontSize = this.scale + 'px';
+            this.applyScale();
         },
         incrementScale() {
             this.scale++;
+            this.applyScale();
+        },
+        applyScale() {
             document.documentElement.style.fontSize = this.scale + 'px';
         },
         onRippleChange(value) {

src/AppTopBar.vue

@@ -60,6 +60,8 @@
                         <li class="topbar-submenu-header">PREMIUM</li>
                         <li><a @click="changeTheme($event, 'soho-light')"><img src="demo/images/themes/soho-light.png" alt="Soho Light" /><span>Soho Light</span></a></li>
                         <li><a @click="changeTheme($event, 'soho-dark', true)"><img src="demo/images/themes/soho-dark.png" alt="Soho Dark" /><span>Soho Dark</span></a></li>
+                        <li><a @click="changeTheme($event, 'mira')"><img src="demo/images/themes/mira.jpg" alt="Mira" /><span>Mira</span></a></li>
+                        <li><a @click="changeTheme($event, 'nano')"><img src="demo/images/themes/nano.jpg" alt="Nano" /><span>Nano</span></a></li>
 
                         <li class="topbar-submenu-header">LEGACY</li>
                         <li><a @click="changeTheme($event, 'nova')"><img src="demo/images/themes/nova.png" alt="Nova" /><span>Nova</span></a></li>