Bring back the layout property

cretueusebiu · Jan 23, 2018 · 1af91fa · 1af91fa
1 parent 6e4be3e
commit 1af91fa
Show file tree

Hide file tree

Showing 17 changed files with 280 additions and 220 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.0.0 - 2018-01-23
+
+- Brought back the `layout` property in pages that was removed in 3.0. By default it's set to `default` (`~/layouts/default.vue`).
+
 ## 3.0.1 - 2018-01-22
 
 - Removed middleware from routes, since they don't work when you press the back button. Now you have to use the `middleware` property in pages.

diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
@@ -5,7 +5,6 @@ import i18n from '~/plugins/i18n'
 import App from '~/components/App'
 
 import '~/plugins'
-import '~/layouts'
 import '~/components'
 
 Vue.config.productionTip = false

diff --git a/resources/assets/js/components/App.vue b/resources/assets/js/components/App.vue
@@ -3,21 +3,38 @@
     <loading ref="loading"/>
 
     <transition name="page" mode="out-in">
-      <router-view/>
+      <component v-if="layout" :is="layout"></component>
     </transition>
   </div>
 </template>
 
 <script>
 import Loading from './Loading'
 
+// Load layout components dynamically.
+const requireContext = require.context('~/layouts', false, /.*\.vue$/)
+
+const layouts = requireContext.keys()
+  .map(file =>
+    [file.replace(/(^.\/)|(\.vue$)/g, ''), requireContext(file)]
+  )
+  .reduce((components, [name, component]) => {
+    components[name] = component
+    return components
+  }, {})
+
 export default {
   el: '#app',
 
   components: {
     Loading
   },
 
+  data: () => ({
+    layout: null,
+    defaultLayout: 'default'
+  }),
+
   metaInfo () {
     const { appName } = window.config
 
@@ -29,6 +46,21 @@ export default {
 
   mounted () {
     this.$loading = this.$refs.loading
+  },
+
+  methods: {
+    /**
+     * Set the application layout.
+     *
+     * @param {String} layout
+     */
+    setLayout (layout) {
+      if (!layout || !layouts[layout]) {
+        layout = this.defaultLayout
+      }
+
+      this.layout = layouts[layout]
+    }
   }
 }
 </script>
diff --git a/resources/assets/js/components/Child.vue b/resources/assets/js/components/Child.vue
@@ -0,0 +1,13 @@
+<template>
+  <transition name="page" mode="out-in">
+    <slot>
+      <router-view/>
+    </slot>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'Child'
+}
+</script>
diff --git a/resources/assets/js/components/index.js b/resources/assets/js/components/index.js
@@ -1,12 +1,14 @@
 import Vue from 'vue'
 import Card from './Card'
+import Child from './Child'
 import Button from './Button'
 import Checkbox from './Checkbox'
 import { HasError, AlertError, AlertSuccess } from 'vform'
 
 // Components that are registered globaly.
 [
   Card,
+  Child,
   Button,
   Checkbox,
   HasError,

diff --git a/resources/assets/js/layouts/basic.vue b/resources/assets/js/layouts/basic.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="basic-layout d-flex align-items-center justify-content-center m-0 bg-white">
+    <child/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BasicLayout'
+}
+</script>
+
+<style lang="scss">
+.basic-layout {
+  color: #636b6f;
+  height: 100vh;
+  font-weight: 100;
+  position: relative;
+
+  .links > a {
+    color: #636b6f;
+    padding: 0 25px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: .1rem;
+    text-decoration: none;
+    text-transform: uppercase;
+  }
+}
+</style>
+
diff --git a/resources/assets/js/layouts/Main.vue → resources/assets/js/layouts/default.vue b/resources/assets/js/layouts/Main.vue → resources/assets/js/layouts/default.vue
@@ -3,7 +3,7 @@
     <navbar/>
 
     <div class="container mt-4">
-      <slot/>
+      <child/>
     </div>
   </div>
 </template>

diff --git a/resources/assets/js/layouts/index.js b/resources/assets/js/layouts/index.js
diff --git a/resources/assets/js/pages/auth/login.vue b/resources/assets/js/pages/auth/login.vue
@@ -1,59 +1,57 @@
 <template>
-  <main-layout>
-    <div class="row">
-      <div class="col-lg-8 m-auto">
-        <card :title="$t('login')">
-          <form @submit.prevent="login" @keydown="form.onKeydown($event)">
-            <!-- Email -->
-            <div class="form-group row">
-              <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
-              <div class="col-md-7">
-                <input v-model="form.email" type="email" name="email" class="form-control"
-                  :class="{ 'is-invalid': form.errors.has('email') }">
-                <has-error :form="form" field="email"/>
-              </div>
+  <div class="row">
+    <div class="col-lg-8 m-auto">
+      <card :title="$t('login')">
+        <form @submit.prevent="login" @keydown="form.onKeydown($event)">
+          <!-- Email -->
+          <div class="form-group row">
+            <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
+            <div class="col-md-7">
+              <input v-model="form.email" type="email" name="email" class="form-control"
+                :class="{ 'is-invalid': form.errors.has('email') }">
+              <has-error :form="form" field="email"/>
             </div>
+          </div>
 
-            <!-- Password -->
-            <div class="form-group row">
-              <label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
-              <div class="col-md-7">
-                <input v-model="form.password" type="password" name="password" class="form-control"
-                  :class="{ 'is-invalid': form.errors.has('password') }">
-                <has-error :form="form" field="password"/>
-              </div>
+          <!-- Password -->
+          <div class="form-group row">
+            <label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
+            <div class="col-md-7">
+              <input v-model="form.password" type="password" name="password" class="form-control"
+                :class="{ 'is-invalid': form.errors.has('password') }">
+              <has-error :form="form" field="password"/>
             </div>
+          </div>
 
-            <!-- Remember Me -->
-            <div class="form-group row">
-              <div class="col-md-3"></div>
-              <div class="col-md-7 d-flex">
-                <checkbox v-model="remember" name="remember">
-                  {{ $t('remember_me') }}
-                </checkbox>
+          <!-- Remember Me -->
+          <div class="form-group row">
+            <div class="col-md-3"></div>
+            <div class="col-md-7 d-flex">
+              <checkbox v-model="remember" name="remember">
+                {{ $t('remember_me') }}
+              </checkbox>
 
-                <router-link :to="{ name: 'password.request' }" class="small ml-auto my-auto">
-                  {{ $t('forgot_password') }}
-                </router-link>
-              </div>
+              <router-link :to="{ name: 'password.request' }" class="small ml-auto my-auto">
+                {{ $t('forgot_password') }}
+              </router-link>
             </div>
+          </div>
 
-            <div class="form-group row">
-              <div class="col-md-7 offset-md-3 d-flex">
-                <!-- Submit Button -->
-                <v-button :loading="form.busy">
-                  {{ $t('login') }}
-                </v-button>
+          <div class="form-group row">
+            <div class="col-md-7 offset-md-3 d-flex">
+              <!-- Submit Button -->
+              <v-button :loading="form.busy">
+                {{ $t('login') }}
+              </v-button>
 
-                <!-- GitHub Login Button -->
-                <login-with-github/>
-              </div>
+              <!-- GitHub Login Button -->
+              <login-with-github/>
             </div>
-          </form>
-        </card>
-      </div>
+          </div>
+        </form>
+      </card>
     </div>
-  </main-layout>
+  </div>
 </template>
 
 <script>

diff --git a/resources/assets/js/pages/auth/password/email.vue b/resources/assets/js/pages/auth/password/email.vue
@@ -1,34 +1,32 @@
 <template>
-  <main-layout>
-    <div class="row">
-      <div class="col-lg-8 m-auto">
-        <card :title="$t('reset_password')">
-          <form @submit.prevent="send" @keydown="form.onKeydown($event)">
-            <alert-success :form="form" :message="status"/>
-
-            <!-- Email -->
-            <div class="form-group row">
-              <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
-              <div class="col-md-7">
-                <input v-model="form.email" type="email" name="email" class="form-control"
-                  :class="{ 'is-invalid': form.errors.has('email') }">
-                <has-error :form="form" field="email"/>
-              </div>
+  <div class="row">
+    <div class="col-lg-8 m-auto">
+      <card :title="$t('reset_password')">
+        <form @submit.prevent="send" @keydown="form.onKeydown($event)">
+          <alert-success :form="form" :message="status"/>
+
+          <!-- Email -->
+          <div class="form-group row">
+            <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
+            <div class="col-md-7">
+              <input v-model="form.email" type="email" name="email" class="form-control"
+                :class="{ 'is-invalid': form.errors.has('email') }">
+              <has-error :form="form" field="email"/>
             </div>
-
-            <!-- Submit Button -->
-            <div class="form-group row">
-              <div class="col-md-9 ml-md-auto">
-                <v-button :loading="form.busy">
-                  {{ $t('send_password_reset_link') }}
-                </v-button>
-              </div>
+          </div>
+
+          <!-- Submit Button -->
+          <div class="form-group row">
+            <div class="col-md-9 ml-md-auto">
+              <v-button :loading="form.busy">
+                {{ $t('send_password_reset_link') }}
+              </v-button>
             </div>
-          </form>
-        </card>
-      </div>
+          </div>
+        </form>
+      </card>
     </div>
-  </main-layout>
+  </div>
 </template>
 
 <script>