Frank
/
fineui
forked from fanruan/fineui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

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

* commit '1b5901b8c3b4f9808917395d9d8bc5c02d34ec31':
  优化布局
  优化布局
es6
guy 4 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
Unified 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); BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
var o = this.options; var o = this.options;
this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign); 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); 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); BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
var o = this.options; var o = this.options;
this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign); 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); this.populate(this.options.items);
}, },

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

@ -63,18 +63,31 @@
flex-wrap: nowrap; flex-wrap: nowrap;
&.v-middle { &.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;
> .c-e {
margin-top: auto !important; &.f-scroll-x {
margin-bottom: auto !important; /* 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 { &.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-c {
margin-left: auto !important; &.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 { > .l-c {
margin-right: auto !important; margin-right: auto !important;
}
} }
} }

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

@ -62,18 +62,31 @@
flex-wrap: nowrap; flex-wrap: nowrap;
&.h-center { &.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;
> .c-e {
margin-left: auto !important; &.f-scroll-x {
margin-right: auto !important; /* 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 { &.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-c {
margin-top: auto !important; &.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 { > .l-c {
margin-bottom: auto !important; 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 { .bi-f-s-h, .bi-flex-scrollable-horizontal-layout {
.flex(); .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 { &.h-center {
> .f-s-h-w { > .f-s-h-w {
margin-left: auto !important; margin-left: auto !important;
@ -41,7 +72,7 @@
&.v-middle { &.v-middle {
> .f-s-h-w { > .f-s-h-w {
margin-top: auto !important; margin-top: auto !important;
margin-right: auto !important; margin-bottom: auto !important;
} }
} }
@ -103,7 +134,7 @@
-o-flex-wrap: nowrap; -o-flex-wrap: nowrap;
flex-wrap: nowrap; flex-wrap: nowrap;
min-height: 100%; //min-height: 100%;
&.v-middle { &.v-middle {
///* 09版 */ ///* 09版 */
@ -115,14 +146,15 @@
//-ms-flex-align: center; //-ms-flex-align: center;
//-o-align-items: center; //-o-align-items: center;
//align-items: center; //align-items: center;
> .c-e {
margin-top: auto !important; //> .c-e {
margin-bottom: auto !important; // margin-top: auto !important;
} // margin-bottom: auto !important;
//}
&.h-center { //
min-width: 100%; //&.h-center {
} // min-width: 100%;
//}
} }
&.v-bottom { &.v-bottom {
@ -163,13 +195,14 @@
//-ms-flex-pack: center; //-ms-flex-pack: center;
//-o-justify-content: center; //-o-justify-content: center;
//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 { &.h-right {

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

@ -32,6 +32,35 @@
.flex(); .flex();
.vertical(); .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 { &.h-center {
> .f-s-v-w { > .f-s-v-w {
margin-left: auto !important; margin-left: auto !important;
@ -128,10 +157,10 @@
//-o-align-items: center; //-o-align-items: center;
//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 { &.h-right {
@ -172,13 +201,14 @@
//-o-justify-content: center; //-o-justify-content: center;
//-ms-flex-pack: center; //-ms-flex-pack: center;
//justify-content: 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 { &.v-bottom {

Write Preview
Loading…
Cancel
Save