Release v0.6.3

document/components/framework/framework.mobile.less

@@ -1,6 +1,7 @@
 @media screen and (max-width: @responsive-mobile) {
 
     .header {
+        .transition(all, 1s);
         padding: 5*@grid;
         padding-top: 12*@grid + 5*@grid;
         padding-bottom: 12*@grid;
@@ -18,4 +19,22 @@
 
     }
 
+    .minimize {
+        max-height: 265px;
+        padding-top: 8*@grid;
+        padding-bottom: 4*@grid;
+
+        .headline .edition {
+            margin-top: 2*@grid;
+            margin-bottom: 2*@grid;
+        }
+    }
+
+    .hidden {
+        max-height: 0px;
+        padding: 0px;
+        opacity: 0;
+        overflow: hidden;
+    }
+
 }

document/components/framework/index.vue

@@ -4,7 +4,7 @@
 
         <menubar class="visible-mobile" :current="tabvalue" @tab-change="handleTabChange"></menubar>
 
-        <div class="header">
+        <div :class="['header', tabvalue!='1'?'minimize':'', share.layout!='default'?'hidden':'']">
             <div class="headline">
                 <q-title :level="1">QI DESIGN <br class="visible-mobile">STANDARD</q-title>
                 <q-color-block :size="8" round></q-color-block>
@@ -174,6 +174,7 @@
 
 <script>
 import store from "document/store.js";
+import share from "./share.js";
 import languages from "document/i18n/languages.json";
 import Menubar from "./menubar.vue";
 import { TabValueMap, ValueRouteMap } from "./tab-map.js";
@@ -185,6 +186,7 @@ export default {
     data(){
         return {
             development: false,
+            share,
 
             tabvalue: "1",
             direction: "left",

document/components/framework/menubar.vue

@@ -1,12 +1,35 @@
 <i18n src="./i18n.json"></i18n>
 
 <template>
-    <transition-group>
+    <transition-group name="fade">
+
+        <!-- Menu Bar -->
+
         <q-panel class="menubar" v-show="!display" key="bar">
-            <q-icon name="menu" :class="display?'menu-rotate':''" @click.native="doOpen"></q-icon>
-            <q-text class="route"><strong>{{ $t(currentTab) }}</strong></q-text>
-            <q-icon name="arrow-right" class="setting" @click.native="doTabNext"></q-icon>
+
+            <!-- Left Icon -->
+
+            <q-icon name="menu" :class="display?'menu-rotate':''" @click.native="doOpen" v-if="share.layout=='default'"></q-icon>
+            <q-icon name="arrow-left" v-else-if="share.layout=='side-router'" @click.native="share.doSideRouterBack"></q-icon>
+
+            <!-- Title -->
+
+            <div class="route" v-if="share.layout=='default'">
+                <transition-group :name="direction">
+                    <q-text mode="single" v-for="(value, key) in TabValueMap" :key="value" v-if="current === value"><strong>{{ $t(key) }}</strong></q-text>
+                </transition-group>
+            </div>
+            <div class="route side-router" v-else-if="share.layout=='side-router'">
+                <q-text mode="single" style="top: 0px;" @click.native="share.doSideRouterBack"><strong>返回</strong></q-text>
+            </div>
+
+            <!-- Right Icon -->
+
+            <q-icon name="arrow-right" class="setting" @click.native="doTabNext" v-if="share.layout=='default'"></q-icon>
         </q-panel>
+
+        <!-- Menu Panel -->
+
         <q-panel class="menupanel" v-show="display" key="panel">
             <q-icon :class="['close', displayed?'close-rotate':'']" name="close" @click.native="doClose"></q-icon>
 
@@ -17,14 +40,14 @@
                     <div class="category-item" v-for="(value, key) in TabValueMap" :key="key" @click="doTabChange(value)">
                         <div v-if="key!=='development' || (key==='development' && development)">
                             <q-color-block v-if="current == value" :size="6" round></q-color-block>
-                            <q-text>
+                            <q-text mode="single">
                                 <strong v-if="current == value">{{ $t(key) }}</strong>
                                 <span v-else>{{ $t(key) }}</span>
                             </q-text>
                         </div>
                     </div>
 
-                    <q-title class="category-title" :level="1" colorful>{{ $t("settings") }}</q-title>
+                    <q-title class="category-title" :level="1" mode="single" colorful>{{ $t("settings") }}</q-title>
 
                      <q-panel class="settings-block" border>
                         <theme-controller></theme-controller>
@@ -53,6 +76,27 @@
     .setting {
         float: right;
     }
+
+    .route {
+        top: 0px;
+        position: relative;
+        width: 50%;
+
+        .q-text {
+            line-height: 14px;
+            position: absolute;
+            left: 0px;
+            top: 0px;
+            width: 100%;
+        }
+    }
+
+    .side-router {
+        position: static;
+        .q-text {
+            position: static;
+        }
+    }
     
     .q-icon {
         padding: 2*@grid;
@@ -97,13 +141,18 @@
 
 .category-item {
 
+    margin: 0px;
     padding: 2*@grid 0px;
+    padding-left: 2*@grid;
 
     .q-color-block {
+        margin: 0px;
+        margin-left: -2*@grid;
         margin-right: @grid;
     }
 
     * {
+        margin: 0px;
         display: inline-block;
         vertical-align: middle;
     }
@@ -116,30 +165,62 @@
 
 /******* Transition *******/
 
-.v-enter-active, .v-leave-active {
+.fade-enter-active, .fade-leave-active {
+    .transition();
+}
+
+.fade-enter, .fade-leave-to {
+    opacity: 0;
+}
+
+.left-enter-active, .left-leave-active {
+    .transition();
+}
+
+.left-enter {
+    transform: translateX(10%);
+    opacity: 0;
+}
+
+.left-leave-to {
+    transform: translateX(-10%);
+    opacity: 0;
+}
+
+.right-enter-active, .right-leave-active {
     .transition();
 }
 
-.v-enter, .v-leave-to {
+.right-enter {
+    transform: translateX(-10%);
+    opacity: 0;
+}
+
+.right-leave-to {
+    transform: translateX(10%);
     opacity: 0;
 }
 
 .content-enter-active, .content-leave-active {
     .transition();
-    // transition-delay: 100ms;
 }
 
 .content-enter, .content-leave-to {
     transform: translateY(5%);
     opacity: 0;
 }
 
+.menu-rotate {
+    transform: rotate(45deg) !important;
+}
+
 .close-rotate {
     transform: rotate(0deg);
 }
 </style>
 
 <script>
+import share from "./share.js";
 import store from "document/store.js";
 import ThemeController from "document/components/theme-controller/theme-controller.vue";
 import ColorController from "document/components/theme-controller/color-controller.vue";
@@ -159,7 +240,10 @@ export default {
     },
     data(){
         return {
+            direction: "left",
+
             development: false,
+            share,
             store,
 
             display: false,
@@ -186,6 +270,13 @@ export default {
             setTimeout(()=>{
                 this.displayed = value;
             })
+        },
+        current(newValue, oldValue){
+            if(newValue<oldValue){
+                this.direction = "right"
+            }else{
+                this.direction = "left"
+            }
         }
     },
     methods: {
@@ -202,7 +293,7 @@ export default {
         doTabNext(){
             let value = this.current;
             value = String(Number(value) + 1);
-            if(value>7){
+            if(value>7 || (!this.development && value>6)){
                 value = "1"
             }
             this.doTabChange(value);

document/components/framework/share.js

@@ -0,0 +1,20 @@
+import Vue from "vue";
+
+const vm = new Vue({
+    data() {
+        return {
+            layout: "default",
+            // default | side-router
+            layoutData: {
+                title: "123"
+            }
+        }
+    },
+    methods: {
+        doSideRouterBack() {
+            this.$emit("side-router-back");
+        }
+    }
+})
+
+export default vm;

document/components/side-router/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="container clearfloat">
-        <div class="layout-left">
+        <div :class="['layout-left', !open?'':'hidden-mobile']">
             <div style="margin: 0px">
                 <div v-for="(item, index) in data" :key="index">
 
@@ -24,10 +24,10 @@
 
                 </div>
 
-                <q-divider class="vertical-divider" type="vertical"></q-divider>
+                <q-divider class="vertical-divider hidden-mobile" type="vertical"></q-divider>
             </div>
         </div>
-        <div class="layout-right">
+        <div :class="['layout-right', open?'':'hidden-mobile']">
             <div class="center" style="margin: 120px;">
                 <transition :name="direction">
                     <router-view class="router-view"></router-view>
@@ -131,9 +131,14 @@
     // transform: scale(0.9);
     opacity: 0;
 }
+
+/******* Responsive *******/
+
+@import "./side-router.mobile.less";
 </style>
 
 <script>
+import FrameworkShare from "document/components/framework/share.js";
 import item from "./item.vue";
 
 export default {
@@ -151,9 +156,17 @@ export default {
     data(){
         return {
             current: 0,
-            direction: "up"
+            direction: "up",
+            FrameworkShare,
+            open: false
         }
     },
+    mounted(){
+        this.FrameworkShare.$on("side-router-back", ()=>{
+            this.open = false;
+            this.FrameworkShare.layout = "default"
+        });
+    },
     methods: {
         isActive(route){
             let value = location.hash.replace("#","");
@@ -166,6 +179,8 @@ export default {
                 this.direction = "down";
             }
             this.current = index;
+            this.open = true;
+            this.FrameworkShare.layout = "side-router";
             this.$nextTick(()=>{
                 this.$router.push({path: option.to});
             })

document/components/side-router/item.mobile.less

@@ -0,0 +1,11 @@
+@media screen and (max-width: @responsive-mobile) {
+    .q-hover {
+        padding: @grid 2*@grid;
+    }
+    .entry {
+        float: right;
+        margin-top: @grid + 1px;
+        margin-right: 2*@grid;
+        opacity: 0.5;
+    }
+}

document/components/side-router/item.vue

@@ -2,6 +2,7 @@
     <q-hover :active="active" :config="config">
         <q-image :theme="imageTheme" :src="imageLight" :src-dark="imageDark" width="auto" height="32px"></q-image>
         <span class="title"><slot></slot></span>
+        <q-icon class="entry visible-mobile" name="right"></q-icon>
     </q-hover>
 </template>
 
@@ -27,6 +28,8 @@
         margin-right: 2*@grid;
     }
 }
+
+@import "./item.mobile.less";
 </style>
 
 <script>