fanruan
/
fineui
4
1
Fork 2
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

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

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

* commit '1b5901b8c3b4f9808917395d9d8bc5c02d34ec31':
  优化布局
  优化布局
es6
guy 3 years ago
parent
2c0ce8b026 1b5901b8c3
commit
0f494a2fb7
6 changed files with 205 additions and 78 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/core/wrapper/layout/flex/flex.horizontal.js
  2. 6
      src/core/wrapper/layout/flex/flex.vertical.js
  3. 78
      src/less/core/wrapper/flex.horizontal.less
  4. 78
      src/less/core/wrapper/flex.vertical.less
  5. 65
      src/less/core/wrapper/flex.wrapper.horizontal.less
  6. 50
      src/less/core/wrapper/flex.wrapper.vertical.less

6
src/core/wrapper/layout/flex/flex.horizontal.js
Unescape View File

@ -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);
},

6
src/core/wrapper/layout/flex/flex.vertical.js
Unescape View File

@ -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);
},

78
src/less/core/wrapper/flex.horizontal.less
Unescape View File

@ -63,18 +63,31 @@
flex-wrap: nowrap;
&.v-middle {
///* 09版 */
//-webkit-box-align: center;
///* 12版 */
//-webkit-align-items: center;
//-moz-align-items: center;
//-ms-align-items: center;
//-ms-flex-align: center;
//-o-align-items: center;
//align-items: center;
> .c-e {
margin-top: auto !important;
margin-bottom: auto !important;
/* 09版 */
-webkit-box-align: center;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-ms-flex-align: center;
-o-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;
}
}
}
@ -103,21 +116,34 @@
}
&.h-center {
///* 09版 */
//-webkit-box-pack: center;
///* 12版 */
//-webkit-justify-content: center;
//-moz-justify-content: center;
//-ms-justify-content: center;
//-ms-flex-pack: center;
//-o-justify-content: center;
//justify-content: center;
> .f-c {
margin-left: auto !important;
}
/* 09版 */
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-ms-flex-pack: center;
-o-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;
}
> .l-c {
margin-right: auto !important;
> .l-c {
margin-right: auto !important;
}
}
}

78
src/less/core/wrapper/flex.vertical.less
Unescape View File

@ -62,18 +62,31 @@
flex-wrap: nowrap;
&.h-center {
///* 09版 */
//-webkit-box-align: center;
///* 12版 */
//-webkit-align-items: center;
//-moz-align-items: center;
//-ms-align-items: center;
//-ms-flex-align: center;
//-o-align-items: center;
//align-items: center;
> .c-e {
margin-left: auto !important;
margin-right: auto !important;
/* 09版 */
-webkit-box-align: center;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-ms-flex-align: center;
-o-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;
}
}
}
@ -102,21 +115,34 @@
}
&.v-middle {
///* 09版 */
//-webkit-box-pack: center;
///* 12版 */
//-webkit-justify-content: center;
//-moz-justify-content: center;
//-ms-justify-content: center;
//-ms-flex-pack: center;
//-o-justify-content: center;
//justify-content: center;
> .f-c {
margin-top: auto !important;
}
/* 09版 */
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-ms-flex-pack: center;
-o-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;
}
> .l-c {
margin-bottom: auto !important;
> .l-c {
margin-bottom: auto !important;
}
}
}

65
src/less/core/wrapper/flex.wrapper.horizontal.less
Unescape View File

@ -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 {
min-width: 100%;
}
//> .c-e {
// 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 {
margin-right: auto !important;
}
//> .f-c {
// margin-left: auto !important;
//}
//
//> .l-c {
// margin-right: auto !important;
//}
}
&.h-right {

50
src/less/core/wrapper/flex.wrapper.vertical.less
Unescape View File

@ -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 {
margin-left: auto !important;
margin-right: auto !important;
}
//> .c-e {
// margin-left: 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 {
margin-bottom: auto !important;
}
//> .f-c {
// margin-top: auto !important;
//}
//
//> .l-c {
// margin-bottom: auto !important;
//}
}
&.v-bottom {

Write Preview
Loading…
Cancel
Save