fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

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

es6
Zhenfei.Li 6 years ago
parent
f9c4d4a107
commit
fb08647c5d
3 changed files with 63 additions and 61 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. 8
      src/base/pane.js
  2. 7
      src/less/base/pane.less
  3. 109
      src/less/lib/icon.less

8
src/base/pane.js
Unescape View File

@ -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
Unescape View File

@ -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%);
} }

109
src/less/lib/icon.less
Unescape View File

@ -1,55 +1,56 @@
@icon-checkbox-normal: "icon/check_box_normal.png"; @icon-checkbox-normal: "icon/check_box_normal.png";
@icon-checkbox-active: "icon/check_box_active.png"; @icon-checkbox-active: "icon/check_box_active.png";
@icon-checkbox-disable: "icon/check_box_disable.png"; @icon-checkbox-disable: "icon/check_box_disable.png";
@icon-checkbox-active-disable: "icon/check_box_disable2.png"; @icon-checkbox-active-disable: "icon/check_box_disable2.png";
@icon-radio-normal: "icon/radio_normal.png"; @icon-radio-normal: "icon/radio_normal.png";
@icon-radio-active: "icon/radio_active.png"; @icon-radio-active: "icon/radio_active.png";
@icon-radio-disable: "icon/radio_disable.png"; @icon-radio-disable: "icon/radio_disable.png";
@icon-radio-active-disable: "icon/radio_disable2.png"; @icon-radio-active-disable: "icon/radio_disable2.png";
@icon-half-select: "icon/half_selected.png"; @icon-half-select: "icon/half_selected.png";
@icon-tree-expand-type1: "icon/tree_expand_1.png"; @icon-tree-expand-type1: "icon/tree_expand_1.png";
@icon-tree-expand-type2: "icon/tree_expand_2.png"; @icon-tree-expand-type2: "icon/tree_expand_2.png";
@icon-tree-expand-type3: "icon/tree_expand_3.png"; @icon-tree-expand-type3: "icon/tree_expand_3.png";
@icon-tree-expand-type4: "icon/tree_expand_4.png"; @icon-tree-expand-type4: "icon/tree_expand_4.png";
@icon-tree-collapse-type1: "icon/tree_collapse_1.png"; @icon-tree-collapse-type1: "icon/tree_collapse_1.png";
@icon-tree-collapse-type2: "icon/tree_collapse_2.png"; @icon-tree-collapse-type2: "icon/tree_collapse_2.png";
@icon-tree-collapse-type3: "icon/tree_collapse_3.png"; @icon-tree-collapse-type3: "icon/tree_collapse_3.png";
@icon-tree-collapse-type4: "icon/tree_collapse_4.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-1: "icon/tree_vertical_line_1.png";
@icon-tree-vertical-line-2: "icon/tree_vertical_line_2.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-3: "icon/tree_vertical_line_3.png";
@icon-tree-vertical-line-4: "icon/tree_vertical_line_4.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-type1-theme-dark: "icon/dark/tree_expand_1.png";
@icon-tree-expand-type2-theme-dark: "icon/dark/tree_expand_2.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-type3-theme-dark: "icon/dark/tree_expand_3.png";
@icon-tree-expand-type4-theme-dark: "icon/dark/tree_expand_4.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-type1-theme-dark: "icon/dark/tree_collapse_1.png";
@icon-tree-collapse-type2-theme-dark: "icon/dark/tree_collapse_2.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-type3-theme-dark: "icon/dark/tree_collapse_3.png";
@icon-tree-collapse-type4-theme-dark: "icon/dark/tree_collapse_4.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-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-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-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-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-active: "icon/slider_active_small.png"; @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-normal: "icon/auto_normal.png";
@icon-auto-disable: "icon/auto_disable.png"; @icon-auto-select: "icon/auto_select.png";
@icon-trans-normal: "icon/trans_normal.png"; @icon-auto-disable: "icon/auto_disable.png";
@icon-trans-select: "icon/trans_select.png"; @icon-trans-normal: "icon/trans_normal.png";
@icon-trans-select: "icon/trans_select.png";
@icon-trans-disable: "icon/trans_disable.png"; @icon-trans-disable: "icon/trans_disable.png";
Write Preview
Loading…
Cancel
Save