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. 28
      src/core/wrapper/layout/sticky/sticky.horizontal.js
  2. 28
      src/core/wrapper/layout/sticky/sticky.vertical.js
  3. 11
      src/less/base/single/input/checkbox.less
  4. 22
      src/less/core/utils/common.less

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

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

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

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

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

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

22
src/less/core/utils/common.less

@ -74,9 +74,10 @@
border-color: @color-bi-border-highlight; border-color: @color-bi-border-highlight;
} }
// ie下不支持focus-within, 和上面写在一起会导致ie下:hover不生效 // ie下不支持focus-within, 和上面写在一起会导致ie下:hover不生效
&:focus-within{ &:focus-within {
border-color: @color-bi-border-highlight; border-color: @color-bi-border-highlight;
} }
&.disabled { &.disabled {
&:hover { &:hover {
border-color: @border-color-line; border-color: @border-color-line;
@ -84,6 +85,14 @@
} }
} }
.base-disabled {
.bi-focus-shadow {
&:hover {
border-color: @border-color-line;
}
}
}
.bi-theme-dark { .bi-theme-dark {
.bi-focus-shadow { .bi-focus-shadow {
&.disabled { &.disabled {
@ -94,6 +103,16 @@
} }
} }
.bi-theme-dark {
.base-disabled {
.bi-focus-shadow {
&:hover {
border-color: @border-color-line-theme-dark;
}
}
}
}
.clearfix { .clearfix {
.clearfix(); .clearfix();
} }
@ -102,6 +121,7 @@
.bi-background { .bi-background {
background-color: @color-bi-background-normal; background-color: @color-bi-background-normal;
color: @color-bi-text-background; color: @color-bi-text-background;
& .bi-input { & .bi-input {
color: @color-bi-text-background; color: @color-bi-text-background;
} }

Loading…
Cancel
Save