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. 109
      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" : ""),
height: 30,
width: 30,
hgap: 5.625,
hgap: 5.25,
vgap: 2.5,
items: [{
type: "bi.layout",
cls: "rect1",
height: 25,
width: 2.5
width: 3
}, {
type: "bi.layout",
cls: "rect2",
height: 25,
width: 2.5
width: 3
}, {
type: "bi.layout",
cls: "rect3",
height: 25,
width: 2.5
width: 3
}]
});
// pane在同步方式下由items决定tipText的显示与否

7
src/less/base/pane.less

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

109
src/less/lib/icon.less

@ -1,55 +1,56 @@
@icon-checkbox-normal: "icon/check_box_normal.png";
@icon-checkbox-active: "icon/check_box_active.png";
@icon-checkbox-disable: "icon/check_box_disable.png";
@icon-checkbox-active-disable: "icon/check_box_disable2.png";
@icon-radio-normal: "icon/radio_normal.png";
@icon-radio-active: "icon/radio_active.png";
@icon-radio-disable: "icon/radio_disable.png";
@icon-radio-active-disable: "icon/radio_disable2.png";
@icon-half-select: "icon/half_selected.png";
@icon-tree-expand-type1: "icon/tree_expand_1.png";
@icon-tree-expand-type2: "icon/tree_expand_2.png";
@icon-tree-expand-type3: "icon/tree_expand_3.png";
@icon-tree-expand-type4: "icon/tree_expand_4.png";
@icon-tree-collapse-type1: "icon/tree_collapse_1.png";
@icon-tree-collapse-type2: "icon/tree_collapse_2.png";
@icon-tree-collapse-type3: "icon/tree_collapse_3.png";
@icon-tree-collapse-type4: "icon/tree_collapse_4.png";
@icon-tree-vertical-line-1: "icon/tree_vertical_line_1.png";
@icon-tree-vertical-line-2: "icon/tree_vertical_line_2.png";
@icon-tree-vertical-line-3: "icon/tree_vertical_line_3.png";
@icon-tree-vertical-line-4: "icon/tree_vertical_line_4.png";
@icon-tree-expand-type1-theme-dark: "icon/dark/tree_expand_1.png";
@icon-tree-expand-type2-theme-dark: "icon/dark/tree_expand_2.png";
@icon-tree-expand-type3-theme-dark: "icon/dark/tree_expand_3.png";
@icon-tree-expand-type4-theme-dark: "icon/dark/tree_expand_4.png";
@icon-tree-collapse-type1-theme-dark: "icon/dark/tree_collapse_1.png";
@icon-tree-collapse-type2-theme-dark: "icon/dark/tree_collapse_2.png";
@icon-tree-collapse-type3-theme-dark: "icon/dark/tree_collapse_3.png";
@icon-tree-collapse-type4-theme-dark: "icon/dark/tree_collapse_4.png";
@icon-tree-vertical-line-1-theme-dark: "icon/dark/tree_vertical_line_1.png";
@icon-tree-vertical-line-2-theme-dark: "icon/dark/tree_vertical_line_2.png";
@icon-tree-vertical-line-3-theme-dark: "icon/dark/tree_vertical_line_3.png";
@icon-tree-vertical-line-4-theme-dark: "icon/dark/tree_vertical_line_4.png";
@icon-loading: "icon/loading.gif";
//滑块
@icon-slider-normal: "icon/slider_normal_small.png";
@icon-slider-active: "icon/slider_active_small.png";
//颜色自动、透明
@icon-auto-normal: "icon/auto_normal.png";
@icon-auto-select: "icon/auto_select.png";
@icon-auto-disable: "icon/auto_disable.png";
@icon-trans-normal: "icon/trans_normal.png";
@icon-trans-select: "icon/trans_select.png";
@icon-checkbox-normal: "icon/check_box_normal.png";
@icon-checkbox-active: "icon/check_box_active.png";
@icon-checkbox-disable: "icon/check_box_disable.png";
@icon-checkbox-active-disable: "icon/check_box_disable2.png";
@icon-radio-normal: "icon/radio_normal.png";
@icon-radio-active: "icon/radio_active.png";
@icon-radio-disable: "icon/radio_disable.png";
@icon-radio-active-disable: "icon/radio_disable2.png";
@icon-half-select: "icon/half_selected.png";
@icon-tree-expand-type1: "icon/tree_expand_1.png";
@icon-tree-expand-type2: "icon/tree_expand_2.png";
@icon-tree-expand-type3: "icon/tree_expand_3.png";
@icon-tree-expand-type4: "icon/tree_expand_4.png";
@icon-tree-collapse-type1: "icon/tree_collapse_1.png";
@icon-tree-collapse-type2: "icon/tree_collapse_2.png";
@icon-tree-collapse-type3: "icon/tree_collapse_3.png";
@icon-tree-collapse-type4: "icon/tree_collapse_4.png";
@icon-tree-vertical-line-1: "icon/tree_vertical_line_1.png";
@icon-tree-vertical-line-2: "icon/tree_vertical_line_2.png";
@icon-tree-vertical-line-3: "icon/tree_vertical_line_3.png";
@icon-tree-vertical-line-4: "icon/tree_vertical_line_4.png";
@icon-tree-expand-type1-theme-dark: "icon/dark/tree_expand_1.png";
@icon-tree-expand-type2-theme-dark: "icon/dark/tree_expand_2.png";
@icon-tree-expand-type3-theme-dark: "icon/dark/tree_expand_3.png";
@icon-tree-expand-type4-theme-dark: "icon/dark/tree_expand_4.png";
@icon-tree-collapse-type1-theme-dark: "icon/dark/tree_collapse_1.png";
@icon-tree-collapse-type2-theme-dark: "icon/dark/tree_collapse_2.png";
@icon-tree-collapse-type3-theme-dark: "icon/dark/tree_collapse_3.png";
@icon-tree-collapse-type4-theme-dark: "icon/dark/tree_collapse_4.png";
@icon-tree-vertical-line-1-theme-dark: "icon/dark/tree_vertical_line_1.png";
@icon-tree-vertical-line-2-theme-dark: "icon/dark/tree_vertical_line_2.png";
@icon-tree-vertical-line-3-theme-dark: "icon/dark/tree_vertical_line_3.png";
@icon-tree-vertical-line-4-theme-dark: "icon/dark/tree_vertical_line_4.png";
@icon-loading: "icon/loading.gif";
@icon-wave-loading: "icon/wave_loading.gif";
//滑块
@icon-slider-normal: "icon/slider_normal_small.png";
@icon-slider-active: "icon/slider_active_small.png";
//颜色自动、透明
@icon-auto-normal: "icon/auto_normal.png";
@icon-auto-select: "icon/auto_select.png";
@icon-auto-disable: "icon/auto_disable.png";
@icon-trans-normal: "icon/trans_normal.png";
@icon-trans-select: "icon/trans_select.png";
@icon-trans-disable: "icon/trans_disable.png";
Loading…
Cancel
Save