diff --git a/public/css/element.css b/public/css/element.css index 8da234a6a..f7007c501 100644 --- a/public/css/element.css +++ b/public/css/element.css @@ -10493,13 +10493,13 @@ } .el-step__head.is-process { - color: #303133; - border-color: #303133 + color: #3c3f72; + border-color: #3c3f72 } .el-step__head.is-wait { - color: #C0C4CC; - border-color: #C0C4CC + color: #e5e5e5; + border-color: #e5e5e5 } .el-step__head.is-success { @@ -10529,19 +10529,37 @@ -webkit-box-align: center; -ms-flex-align: center; align-items: center; - width: 24px; - height: 24px; - font-size: 14px; + width: 80px; + height: 80px; + font-size: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; - background: #FFF; + background: #3c3f72; -webkit-transition: .15s ease-out; transition: .15s ease-out } +.el-step__head.is-wait .el-step__icon { + background: #e5e5e5 ; +} + +.el-step__head.is-success .el-step__icon { + background: #6da252; +} + +.el-step__head.is-success .el-step__icon:hover { + cursor: pointer; + border: 5px solid #3c3f72; + background: #3c3f72; +} + +.el-step__head.is-wait .el-step__icon-inner { + color: #999999; +} + .el-step__icon.is-text { border-radius: 50%; - border: 2px solid; + border: 5px solid; border-color: inherit } @@ -10555,7 +10573,7 @@ text-align: center; font-weight: 700; line-height: 1; - color: inherit + color: #ffffff; } .el-button,.el-checkbox,.el-image-viewer__btn { @@ -10577,12 +10595,12 @@ .el-step__line { position: absolute; border-color: inherit; - background-color: #C0C4CC + background-color: #e5e5e5; } .el-step__line-inner { display: block; - border-width: 1px; + border-width: 2px !important; border-style: solid; border-color: inherit; -webkit-transition: .15s ease-out; @@ -10605,7 +10623,7 @@ .el-step__title.is-process { font-weight: 700; - color: #303133 + color: #3c3f72; } .el-step__title.is-wait { @@ -10657,8 +10675,8 @@ } .el-step.is-horizontal .el-step__line { - height: 2px; - top: 11px; + height: 5px; + top: 40px; left: 0; right: 0 } diff --git a/resources/assets/js/views/wizard/company.js b/resources/assets/js/views/wizard/company.js index 849b82f8a..42e0762cf 100644 --- a/resources/assets/js/views/wizard/company.js +++ b/resources/assets/js/views/wizard/company.js @@ -14,8 +14,10 @@ import Global from './../../mixins/global'; import Form from './../../plugins/form'; +import {Step, Steps} from 'element-ui'; + // plugin setup -Vue.use(DashboardPlugin); +Vue.use(DashboardPlugin, Step, Steps); const app = new Vue({ el: '#app', @@ -24,9 +26,21 @@ const app = new Vue({ Global ], + components: { + [Step.name]: Step, + [Steps.name]: Steps, + }, + data: function () { return { - form: new Form('company') + form: new Form('company'), + active: 0 + } + }, + + methods: { + next() { + if (this.active++ > 1) this.active = 0; } } }); diff --git a/resources/assets/js/views/wizard/currencies.js b/resources/assets/js/views/wizard/currencies.js index fb30a6c18..68168bdd8 100644 --- a/resources/assets/js/views/wizard/currencies.js +++ b/resources/assets/js/views/wizard/currencies.js @@ -15,8 +15,10 @@ import Global from '../../mixins/global'; import Form from '../../plugins/form'; import BulkAction from './../../plugins/bulk-action'; +import {Step, Steps} from 'element-ui'; + // plugin setup -Vue.use(DashboardPlugin); +Vue.use(DashboardPlugin, Step, Steps); const app = new Vue({ el: '#app', @@ -25,9 +27,15 @@ const app = new Vue({ Global ], + components: { + [Step.name]: Step, + [Steps.name]: Steps, + }, + data: function () { return { form: new Form('currency'), + active: 1, bulk_action: new BulkAction(url + '/settings/currencies'), show: false, currency: { @@ -36,7 +44,7 @@ const app = new Vue({ rate: '1', enabled: 1 }, - submit_function: '' + submit_function: '', } }, @@ -97,6 +105,10 @@ const app = new Vue({ }) .catch(error => { }); + }, + + next() { + if (this.active++ > 1) this.active = 0; } } }); diff --git a/resources/assets/js/views/wizard/finish.js b/resources/assets/js/views/wizard/finish.js new file mode 100644 index 000000000..d4ef21a76 --- /dev/null +++ b/resources/assets/js/views/wizard/finish.js @@ -0,0 +1,43 @@ +/** + * First we will load all of this project's JavaScript dependencies which + * includes Vue and other libraries. It is a great starting point when + * building robust, powerful web applications using Vue and Laravel. + */ + +require('./../../bootstrap'); + +import Vue from 'vue'; + +import DashboardPlugin from './../../plugins/dashboard-plugin'; + +import Global from './../../mixins/global'; + +import {Step, Steps} from 'element-ui'; + +// plugin setup +Vue.use(DashboardPlugin, Step, Steps); + +const app = new Vue({ + el: '#app', + + mixins: [ + Global + ], + + components: { + [Step.name]: Step, + [Steps.name]: Steps, + }, + + data: function () { + return { + active: 3 + } + }, + + methods: { + next() { + if (this.active++ > 1) this.active = 0; + } + } +}); diff --git a/resources/assets/js/views/wizard/taxes.js b/resources/assets/js/views/wizard/taxes.js index 137a5d373..f99ebc2fc 100644 --- a/resources/assets/js/views/wizard/taxes.js +++ b/resources/assets/js/views/wizard/taxes.js @@ -15,8 +15,10 @@ import Global from '../../mixins/global'; import Form from '../../plugins/form'; import BulkAction from './../../plugins/bulk-action'; +import {Step, Steps} from 'element-ui'; + // plugin setup -Vue.use(DashboardPlugin); +Vue.use(DashboardPlugin, Step, Steps); const app = new Vue({ el: '#app', @@ -25,9 +27,15 @@ const app = new Vue({ Global ], + components: { + [Step.name]: Step, + [Steps.name]: Steps, + }, + data: function () { return { form: new Form('tax'), + active: 2, bulk_action: new BulkAction(url + '/settings/taxes'), show: false, tax: { @@ -69,6 +77,10 @@ const app = new Vue({ }); this.show = true; + }, + + next() { + if (this.active++ > 1) this.active = 0; } } }); diff --git a/resources/views/partials/portal/header.blade.php b/resources/views/partials/portal/header.blade.php index 65c57a7ea..aed9eb8f6 100644 --- a/resources/views/partials/portal/header.blade.php +++ b/resources/views/partials/portal/header.blade.php @@ -1,21 +1,21 @@ @stack('header_start') -