Pull request #1857: KERNEL-2705 优化布局

Merge in VISUAL/fineui from ~GUY/fineui:master to master

* commit '1b5901b8c3b4f9808917395d9d8bc5c02d34ec31':
  优化布局
  优化布局

src/core/wrapper/layout/flex/flex.horizontal.js

@@ -25,6 +25,12 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
         this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
+        if (o.scrollable === true || o.scrollx === true) {
+            this.element.addClass("f-scroll-x");
+        }
+        if (o.scrollable === true || o.scrolly === true) {
+            this.element.addClass("f-scroll-y");
+        }
         this.populate(this.options.items);
     },
 

src/core/wrapper/layout/flex/flex.vertical.js

@@ -24,6 +24,12 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
         BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
         var o = this.options;
         this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
+        if (o.scrollable === true || o.scrollx === true) {
+            this.element.addClass("f-scroll-x");
+        }
+        if (o.scrollable === true || o.scrolly === true) {
+            this.element.addClass("f-scroll-y");
+        }
         this.populate(this.options.items);
     },
 

src/less/core/wrapper/flex.horizontal.less

@@ -63,20 +63,33 @@
   flex-wrap: nowrap;
 
   &.v-middle {
-    ///* 09版 */
+    /* 09版 */
-    //-webkit-box-align: center;
+    -webkit-box-align: center;
-    ///* 12版 */
+    /* 12版 */
-    //-webkit-align-items: center;
+    -webkit-align-items: center;
-    //-moz-align-items: center;
+    -moz-align-items: center;
-    //-ms-align-items: center;
+    -ms-align-items: center;
-    //-ms-flex-align: center;
+    -ms-flex-align: center;
-    //-o-align-items: center;
+    -o-align-items: center;
-    //align-items: center;
+    align-items: center;
+
+    &.f-scroll-x {
+      /* 09版 */
+      -webkit-box-align: flex-start;
+      /* 12版 */
+      -webkit-align-items: flex-start;
+      -moz-align-items: flex-start;
+      -ms-align-items: flex-start;
+      -ms-flex-align: start;
+      -o-align-items: flex-start;
+      align-items: flex-start;
+
       > .c-e {
         margin-top: auto !important;
         margin-bottom: auto !important;
       }
     }
+  }
 
   &.v-bottom {
     /* 09版 */
@@ -103,15 +116,27 @@
   }
 
   &.h-center {
-    ///* 09版 */
+    /* 09版 */
-    //-webkit-box-pack: center;
+    -webkit-box-pack: center;
-    ///* 12版 */
+    /* 12版 */
-    //-webkit-justify-content: center;
+    -webkit-justify-content: center;
-    //-moz-justify-content: center;
+    -moz-justify-content: center;
-    //-ms-justify-content: center;
+    -ms-justify-content: center;
-    //-ms-flex-pack: center;
+    -ms-flex-pack: center;
-    //-o-justify-content: center;
+    -o-justify-content: center;
-    //justify-content: center;
+    justify-content: center;
+
+    &.f-scroll-x {
+      /* 09版 */
+      -webkit-box-pack: flex-start;
+      /* 12版 */
+      -webkit-justify-content: flex-start;
+      -moz-justify-content: flex-start;
+      -ms-justify-content: flex-start;
+      -ms-flex-pack: start;
+      -o-justify-content: flex-start;
+      justify-content: flex-start;
+
       > .f-c {
         margin-left: auto !important;
       }
@@ -120,6 +145,7 @@
         margin-right: auto !important;
       }
     }
+  }
 
   &.h-right {
     /* 09版 */

src/less/core/wrapper/flex.vertical.less

@@ -62,20 +62,33 @@
   flex-wrap: nowrap;
 
   &.h-center {
-    ///* 09版 */
+    /* 09版 */
-    //-webkit-box-align: center;
+    -webkit-box-align: center;
-    ///* 12版 */
+    /* 12版 */
-    //-webkit-align-items: center;
+    -webkit-align-items: center;
-    //-moz-align-items: center;
+    -moz-align-items: center;
-    //-ms-align-items: center;
+    -ms-align-items: center;
-    //-ms-flex-align: center;
+    -ms-flex-align: center;
-    //-o-align-items: center;
+    -o-align-items: center;
-    //align-items: center;
+    align-items: center;
+
+    &.f-scroll-x {
+      /* 09版 */
+      -webkit-box-align: flex-start;
+      /* 12版 */
+      -webkit-align-items: flex-start;
+      -moz-align-items: flex-start;
+      -ms-align-items: flex-start;
+      -ms-flex-align: start;
+      -o-align-items: flex-start;
+      align-items: flex-start;
+
       > .c-e {
         margin-left: auto !important;
         margin-right: auto !important;
       }
     }
+  }
 
   &.h-right {
     /* 09版 */
@@ -102,15 +115,27 @@
   }
 
   &.v-middle {
-    ///* 09版 */
+    /* 09版 */
-    //-webkit-box-pack: center;
+    -webkit-box-pack: center;
-    ///* 12版 */
+    /* 12版 */
-    //-webkit-justify-content: center;
+    -webkit-justify-content: center;
-    //-moz-justify-content: center;
+    -moz-justify-content: center;
-    //-ms-justify-content: center;
+    -ms-justify-content: center;
-    //-ms-flex-pack: center;
+    -ms-flex-pack: center;
-    //-o-justify-content: center;
+    -o-justify-content: center;
-    //justify-content: center;
+    justify-content: center;
+
+    &.f-scroll-y {
+      /* 09版 */
+      -webkit-box-pack: flex-start;
+      /* 12版 */
+      -webkit-justify-content: flex-start;
+      -moz-justify-content: flex-start;
+      -ms-justify-content: flex-start;
+      -ms-flex-pack: start;
+      -o-justify-content: flex-start;
+      justify-content: flex-start;
+
       > .f-c {
         margin-top: auto !important;
       }
@@ -119,6 +144,7 @@
         margin-bottom: auto !important;
       }
     }
+  }
 
   &.v-bottom {
     /* 09版 */

src/less/core/wrapper/flex.wrapper.horizontal.less

@@ -31,6 +31,37 @@
 .bi-f-s-h, .bi-flex-scrollable-horizontal-layout {
   .flex();
 
+  .horizontal();
+
+  /* 09版 */
+  -webkit-box-pack: flex-start;
+  /* 12版 */
+  -webkit-justify-content: flex-start;
+  -moz-justify-content: flex-start;
+  -ms-justify-content: flex-start;
+  -ms-flex-pack: start;
+  -o-justify-content: flex-start;
+  justify-content: flex-start;
+
+  /* 09版 */
+  -webkit-box-align: flex-start;
+  /* 12版 */
+  -webkit-align-items: flex-start;
+  -moz-align-items: flex-start;
+  -ms-align-items: flex-start;
+  -ms-flex-align: start;
+  -o-align-items: flex-start;
+  align-items: flex-start;
+
+  /* 09版 */
+  /*-webkit-box-lines: multiple;*/
+  /* 12版 */
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  -o-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+
   &.h-center {
     > .f-s-h-w {
       margin-left: auto !important;
@@ -41,7 +72,7 @@
   &.v-middle {
     > .f-s-h-w {
       margin-top: auto !important;
-      margin-right: auto !important;
+      margin-bottom: auto !important;
     }
   }
 
@@ -103,7 +134,7 @@
     -o-flex-wrap: nowrap;
     flex-wrap: nowrap;
 
-    min-height: 100%;
+    //min-height: 100%;
 
     &.v-middle {
       ///* 09版 */
@@ -115,14 +146,15 @@
       //-ms-flex-align: center;
       //-o-align-items: center;
       //align-items: center;
-      > .c-e {
-        margin-top: auto !important;
-        margin-bottom: auto !important;
-      }
 
-      &.h-center {
+      //> .c-e {
-        min-width: 100%;
+      //  margin-top: auto !important;
-      }
+      //  margin-bottom: auto !important;
+      //}
+      //
+      //&.h-center {
+      //  min-width: 100%;
+      //}
     }
 
     &.v-bottom {
@@ -163,13 +195,14 @@
       //-ms-flex-pack: center;
       //-o-justify-content: center;
       //justify-content: center;
-      > .f-c {
-        margin-left: auto !important;
-      }
 
-      > .l-c {
+      //> .f-c {
-        margin-right: auto !important;
+      //  margin-left: auto !important;
-      }
+      //}
+      //
+      //> .l-c {
+      //  margin-right: auto !important;
+      //}
     }
 
     &.h-right {

src/less/core/wrapper/flex.wrapper.vertical.less

@@ -32,6 +32,35 @@
   .flex();
   .vertical();
 
+  /* 09版 */
+  -webkit-box-pack: flex-start;
+  /* 12版 */
+  -webkit-justify-content: flex-start;
+  -moz-justify-content: flex-start;
+  -ms-justify-content: flex-start;
+  -ms-flex-pack: start;
+  -o-justify-content: flex-start;
+  justify-content: flex-start;
+
+  /* 09版 */
+  -webkit-box-align: flex-start;
+  /* 12版 */
+  -webkit-align-items: flex-start;
+  -moz-align-items: flex-start;
+  -ms-align-items: flex-start;
+  -ms-flex-align: start;
+  -o-align-items: flex-start;
+  align-items: flex-start;
+
+  /* 09版 */
+  /*-webkit-box-lines: multiple;*/
+  /* 12版 */
+  -webkit-flex-wrap: nowrap;
+  -moz-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  -o-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+
   &.h-center {
     > .f-s-v-w {
       margin-left: auto !important;
@@ -128,10 +157,10 @@
       //-o-align-items: center;
       //align-items: center;
 
-      > .c-e {
+      //> .c-e {
-        margin-left: auto !important;
+      //  margin-left: auto !important;
-        margin-right: auto !important;
+      //  margin-right: auto !important;
-      }
+      //}
     }
 
     &.h-right {
@@ -172,13 +201,14 @@
       //-o-justify-content: center;
       //-ms-flex-pack: center;
       //justify-content: center;
-      > .f-c {
-        margin-top: auto !important;
-      }
 
-      > .l-c {
+      //> .f-c {
-        margin-bottom: auto !important;
+      //  margin-top: auto !important;
-      }
+      //}
+      //
+      //> .l-c {
+      //  margin-bottom: auto !important;
+      //}
     }
 
     &.v-bottom {