Browse Source

Pull request #3164: KERNEL-13199 feat: sticky布局支持同时吸顶和吸底

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

* commit 'bcdcb32ba854a6cf2519903560fe4a56869a92cd':
  无JIRA fix: checkbox的自适应
  无JIRA fix: hover边框高亮效果,在父节点disabled的场景下,没必要高亮了
  KERNEL-13199 feat: sticky布局支持同时吸顶和吸底
es6
Dailer-刘荣歆 2 years ago
parent
commit
f258ca84fd
  1. 22
      src/core/wrapper/layout/sticky/sticky.horizontal.js
  2. 22
      src/core/wrapper/layout/sticky/sticky.vertical.js
  3. 9
      src/less/base/single/input/checkbox.less
  4. 20
      src/less/core/utils/common.less

22
src/core/wrapper/layout/sticky/sticky.horizontal.js

@ -21,13 +21,29 @@ BI.HorizontalStickyLayout = BI.inherit(BI.FlexHorizontalLayout, {
}
}
if (columnSize !== "fill") {
var firstItemFill = o.columnSize[0] === "fill" || o.items[0].width === "fill";
var fillIndex;
BI.count(0, o.items.length - 1, index => {
if (BI.isNotNull(fillIndex)) {
return;
}
if ((o.columnSize[index] === "fill" || o.items[index].width === "fill")) {
fillIndex = index;
}
});
if (fillIndex > i) {
w.element.css({
position: "sticky",
zIndex: 1,
left: 0,
});
} else {
w.element.css({
position: "sticky",
zIndex: 1,
left: firstItemFill ? "" : 0,
right: firstItemFill ? 0 : ""
right: 0
});
}
} else {
w.element.css({
overflow: ""

22
src/core/wrapper/layout/sticky/sticky.vertical.js

@ -21,13 +21,29 @@ BI.VerticalStickyLayout = BI.inherit(BI.FlexVerticalLayout, {
}
}
if (rowSize !== "fill") {
var firstItemFill = o.rowSize[0] === "fill" || o.items[0].height === "fill";
var fillIndex;
BI.count(0, o.items.length - 1, index => {
if (BI.isNotNull(fillIndex)) {
return;
}
if ((o.rowSize[index] === "fill" || o.items[index].height === "fill")) {
fillIndex = index;
}
});
if (fillIndex > i) {
w.element.css({
position: "sticky",
zIndex: 1,
top: 0,
});
} else {
w.element.css({
position: "sticky",
zIndex: 1,
top: firstItemFill ? "" : 0,
bottom: firstItemFill ? 0 : ""
bottom: 0
});
}
} else {
w.element.css({
overflow: ""

9
src/less/base/single/input/checkbox.less

@ -9,14 +9,13 @@
&:after {
position: absolute;
display: table;
// 百分比会出现像素误差
top: 6px;
left: 2px;
top: 45%;
left: 20%;
border: 2px solid transparent;
border-top: 0;
border-left: 0;
width: 6px;
height: 9px;
width: 50%;
height: 75%;
.box-sizing(border-box);
.transform(rotate(45deg) scale(1) translate(-50%, -50%));
@transition: all .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s;

20
src/less/core/utils/common.less

@ -77,6 +77,7 @@
&:focus-within {
border-color: @color-bi-border-highlight;
}
&.disabled {
&:hover {
border-color: @border-color-line;
@ -84,6 +85,14 @@
}
}
.base-disabled {
.bi-focus-shadow {
&:hover {
border-color: @border-color-line;
}
}
}
.bi-theme-dark {
.bi-focus-shadow {
&.disabled {
@ -94,6 +103,16 @@
}
}
.bi-theme-dark {
.base-disabled {
.bi-focus-shadow {
&:hover {
border-color: @border-color-line-theme-dark;
}
}
}
}
.clearfix {
.clearfix();
}
@ -102,6 +121,7 @@
.bi-background {
background-color: @color-bi-background-normal;
color: @color-bi-text-background;
& .bi-input {
color: @color-bi-text-background;
}

Loading…
Cancel
Save