wip : fine tune uikit integration, add vue uikit alert component

Author: roshangautam

README.md

@@ -17,13 +17,17 @@ Manage your `Laravel Schedule` from a pretty dashboard. Schedule your `Laravel C
 
 #### Installation
 
-`Totem` requires Laravel v5.5.Use composer to install totem to your Laravel project
+`Totem` requires Laravel v5.4 and above. Use composer to install totem to your Laravel project
 
     composer require studio/laravel-totem
 
-Laravel Totem supports auto package discovery for Laravel v5.5.
+> Laravel Totem supports auto package discovery for Laravel v5.5, therefore service provider registration is not required in Laravel v5.5
 
-Once `Laravel Totem` is installed , publish `Totem` assets to your public folder using the following command
+Add `TotemServiceProvider` to the `providers` array of your Laravel v5.4 application's config/app.php
+
+    Studio\Totem\Providers\TotemServiceProvider::class,
+
+Once `Laravel Totem` is installed & registered, you can publish `Totem` assets to your public folder using the following command
 
     php artisan totem:assets
 
@@ -59,6 +63,14 @@ protected $hidden = true;
 #### Current limitations
 
 Currently tasks can only be scheduled with a cron expression. Stay tuned for more Laravel Schedule like fluent configurations.
+
+### Screenshots
+
+##### Task List
+<img src="https://github.com/codestudiollc/laravel-totem/blob/master/public/img/screenshots/tasks.png?raw=true" alt="Task List"/>
+
+##### Task Details
+<img src="https://github.com/codestudiollc/laravel-totem/blob/master/public/img/screenshots/task-details.png?raw=true" alt="Task List"/>
 
 ## Changelog
 

public/css/app.css

@@ -3,10 +3,13 @@ import Vue from 'vue'
 import moment from 'moment'
 import Vuikit from 'vuikit'
 import StatusButton from './tasks/components/StatusButton.vue'
+import VkAlert from './components/UiKitAlert.vue'
 
 import IconCog from 'vuikit/icons/cog'
+import IconClose from 'vuikit/icons/close'
 import IconClock from 'vuikit/icons/clock'
 import IconSearch from 'vuikit/icons/search'
+import IconSpinner from 'vuikit/icons/components/spinner'
 
 
 Promise.delay = function (time) {
@@ -40,14 +43,15 @@ Vue.mixin({
         }
     }
 })
-console.log(Vuikit)
 
 Vuikit.Icon.register(IconCog)
+Vuikit.Icon.register(IconClose)
 Vuikit.Icon.register(IconClock)
 Vuikit.Icon.register(IconSearch)
+Vuikit.Icon.register(IconSpinner)
 
 Vue.component('status-button', StatusButton)
-
+Vue.component('vk-alert',VkAlert)
 Vue.use(Vuikit)
 new Vue({
     el: '#root'

public/css/app.css.map

@@ -0,0 +1,41 @@
+<template>
+    <div :class="classes" v-if="show">
+        <a class="uk-alert-close uk-close uk-icon" @click="show = false">
+            <vk-icon icon="close"></vk-icon>
+        </a>
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'VkAlert',
+        props: {
+            type: {
+                type: String,
+                default: 'primary'
+            },
+            important: {
+                type: Boolean,
+                default: false
+            },
+            timeout: { default: 5000 }
+        },
+        data() {
+            return { show: true };
+        },
+        computed: {
+            classes: function () {
+                return 'uk-alert uk-alert-' + this.type
+            }
+        },
+        mounted() {
+            if (! this.important) {
+                setTimeout(
+                    () => this.show = false,
+                    this.timeout
+                )
+            }
+        }
+    }
+</script>

public/img/screenshots/task-details.png

@@ -1,10 +1,12 @@
 <template>
     <transition mode="out-in">
-        <button v-if="task.activated" type="button" class="uk-button uk-button-small" :class="{ 'uk-button-primary': !hovering && !working, 'uk-button-danger': hovering && !working, 'uk-button-secondary': working}" key="enabled" @mouseenter="hovering = true" @mouseleave="hovering = false" @click="deactivate" :disabled="working">
-            {{ activeStatusText }}
+        <button v-if="task.activated" type="button" class="uk-button uk-button-small" :class="{ 'uk-button-primary': !hovering && !working, 'uk-button-danger': hovering && !working, 'uk-spinner uk-icon uk-button-secondary': working}" key="enabled" @mouseenter="hovering = true" @mouseleave="hovering = false" @click="deactivate" :disabled="working">
+            <span v-if="!working">{{ activeStatusText }}</span>
+            <vk-icon v-if="working" icon="spinner"></vk-icon>
         </button>
-        <button v-if="existsAndIsInActive" type="button" class="uk-button uk-button-small" :class="{'uk-button-danger': !hovering && !working, 'uk-button-primary': hovering && !working, 'uk-button-secondary': working}" key="disabled" @mouseenter="hovering = true" @mouseleave="hovering = false" @click="activate" :disabled="working">
-            {{ inActiveStatusText }}
+        <button v-if="existsAndIsInActive" type="button" class="uk-button uk-button-small" :class="{'uk-button-danger': !hovering && !working, 'uk-button-primary': hovering && !working, 'uk-spinner uk-icon uk-button-secondary': working}" key="disabled" @mouseenter="hovering = true" @mouseleave="hovering = false" @click="activate" :disabled="working">
+            <span v-if="!working">{{ inActiveStatusText }}</span>
+            <vk-icon v-if="working" icon="spinner"></vk-icon>
         </button>
     </transition>
 </template>

public/img/screenshots/tasks.png

@@ -7,7 +7,7 @@
 // Variables
 // ========================================================================
 
-@base-body-font-weight:                         400;
+@base-body-font-weight:                         600;
 
 @base-small-font-size:                          90%;