Browse Source

BI-31697 pane的loading动画:矩形宽度调为3,解决有些浏览器对小数点像素的补正问题

es6
Zhenfei.Li 6 years ago
parent
commit
fb08647c5d
  1. 8
      src/base/pane.js
  2. 7
      src/less/base/pane.less
  3. 1
      src/less/lib/icon.less

8
src/base/pane.js

@ -55,23 +55,23 @@ BI.Pane = BI.inherit(BI.Widget, {
cls: "bi-loading-widget" + ((BI.isIE() && BI.getIEVersion() < 10) ? " hack" : ""), cls: "bi-loading-widget" + ((BI.isIE() && BI.getIEVersion() < 10) ? " hack" : ""),
height: 30, height: 30,
width: 30, width: 30,
hgap: 5.625, hgap: 5.25,
vgap: 2.5, vgap: 2.5,
items: [{ items: [{
type: "bi.layout", type: "bi.layout",
cls: "rect1", cls: "rect1",
height: 25, height: 25,
width: 2.5 width: 3
}, { }, {
type: "bi.layout", type: "bi.layout",
cls: "rect2", cls: "rect2",
height: 25, height: 25,
width: 2.5 width: 3
}, { }, {
type: "bi.layout", type: "bi.layout",
cls: "rect3", cls: "rect3",
height: 25, height: 25,
width: 2.5 width: 3
}] }]
}); });
// pane在同步方式下由items决定tipText的显示与否 // pane在同步方式下由items决定tipText的显示与否

7
src/less/base/pane.less

@ -1,5 +1,6 @@
@import "../index"; @import "../index";
@import "../resource/background"; @import "../image";
@import "../lib/icon";
.bi-pane { .bi-pane {
min-height: 55px; min-height: 55px;
& .loading-container { & .loading-container {
@ -11,7 +12,7 @@
font-size: 0; font-size: 0;
div { div {
.background-color(@background-color-highlight, 90%); .background-color(@background-color-highlight, 90%);
.border-radius(1.25px); .border-radius(1.5px);
.animation(loading-widget 0.8s infinite linear); .animation(loading-widget 0.8s infinite linear);
} }
.rect2 { .rect2 {
@ -29,7 +30,7 @@
} }
}); });
&.hack { &.hack {
.loading-background; .image2xPath(@icon-wave-loading);
div { div {
.background-color(@background-color-highlight, 0%); .background-color(@background-color-highlight, 0%);
} }

1
src/less/lib/icon.less

@ -41,6 +41,7 @@
@icon-tree-vertical-line-4-theme-dark: "icon/dark/tree_vertical_line_4.png"; @icon-tree-vertical-line-4-theme-dark: "icon/dark/tree_vertical_line_4.png";
@icon-loading: "icon/loading.gif"; @icon-loading: "icon/loading.gif";
@icon-wave-loading: "icon/wave_loading.gif";
//滑块 //滑块
@icon-slider-normal: "icon/slider_normal_small.png"; @icon-slider-normal: "icon/slider_normal_small.png";

Loading…
Cancel
Save