From: Jouni Koivuviita Date: Mon, 25 May 2009 14:08:23 +0000 (+0000) Subject: Refactored loading indicator to be common for both runo and reindeer themes. X-Git-Tag: 6.7.0.beta1~2777 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=3e6b6f6dcf8736f106c855033c0bd2a109feac50;p=vaadin-framework.git Refactored loading indicator to be common for both runo and reindeer themes. Added progress indicator styles to reindeer (copied from runo). svn changeset:7997/svn branch:6.0 --- diff --git a/WebContent/VAADIN/themes/base/common/common.css b/WebContent/VAADIN/themes/base/common/common.css index 3ed9b8daad..68052dc36f 100644 --- a/WebContent/VAADIN/themes/base/common/common.css +++ b/WebContent/VAADIN/themes/base/common/common.css @@ -9,9 +9,12 @@ .v-app { height: 100%; } -.v-app-loading { +div.v-app-loading { /* You can use this to provide indication for the user that the application is loading. */ /* It is applied to the same element as .v-app */ + background-image: url(img/loading-indicator.gif); + background-repeat: no-repeat; + background-position: 50%; } .v-view { height: 100%; @@ -145,11 +148,21 @@ .v-loading-indicator, .v-loading-indicator-delay, .v-loading-indicator-wait { - height: 16px; position: absolute; top: 0; right: 0; z-index: 30000; + width: 31px; + height: 31px; + background: transparent url(img/loading-indicator.gif); + margin-right: 5px; + margin-top: 5px; +} +.v-loading-indicator-delay { + background-image: url(img/loading-indicator-delay.gif); +} +.v-loading-indicator-wait { + background-image: url(img/loading-indicator-wait.gif); } /* Debug dialog */ .v-debug-console { diff --git a/WebContent/VAADIN/themes/base/common/img/ajax-loader-big.gif b/WebContent/VAADIN/themes/base/common/img/ajax-loader-big.gif new file mode 100644 index 0000000000..73dc88e31f Binary files /dev/null and b/WebContent/VAADIN/themes/base/common/img/ajax-loader-big.gif differ diff --git a/WebContent/VAADIN/themes/base/common/img/ajax-loader-medium.gif b/WebContent/VAADIN/themes/base/common/img/ajax-loader-medium.gif new file mode 100644 index 0000000000..0a0c6aaef0 Binary files /dev/null and b/WebContent/VAADIN/themes/base/common/img/ajax-loader-medium.gif differ diff --git a/WebContent/VAADIN/themes/base/common/img/ajax-loader.gif b/WebContent/VAADIN/themes/base/common/img/ajax-loader.gif new file mode 100755 index 0000000000..354dc4685c Binary files /dev/null and b/WebContent/VAADIN/themes/base/common/img/ajax-loader.gif differ diff --git a/WebContent/VAADIN/themes/base/common/img/loading-indicator-delay.gif b/WebContent/VAADIN/themes/base/common/img/loading-indicator-delay.gif new file mode 100755 index 0000000000..48810bb064 Binary files /dev/null and b/WebContent/VAADIN/themes/base/common/img/loading-indicator-delay.gif differ diff --git a/WebContent/VAADIN/themes/base/common/img/loading-indicator-wait.gif b/WebContent/VAADIN/themes/base/common/img/loading-indicator-wait.gif new file mode 100755 index 0000000000..5f7aab9afd Binary files /dev/null and b/WebContent/VAADIN/themes/base/common/img/loading-indicator-wait.gif differ diff --git a/WebContent/VAADIN/themes/base/common/img/loading-indicator.gif b/WebContent/VAADIN/themes/base/common/img/loading-indicator.gif new file mode 100644 index 0000000000..cedaa56b10 Binary files /dev/null and b/WebContent/VAADIN/themes/base/common/img/loading-indicator.gif differ diff --git a/WebContent/VAADIN/themes/base/progressindicator/progressindicator.css b/WebContent/VAADIN/themes/base/progressindicator/progressindicator.css index 18b1f1e4a7..d50954e7e8 100644 --- a/WebContent/VAADIN/themes/base/progressindicator/progressindicator.css +++ b/WebContent/VAADIN/themes/base/progressindicator/progressindicator.css @@ -16,10 +16,14 @@ overflow: hidden; /* for IE6 */ background: #ddd; } -.v-progressindicator-indeterminate { - height: 16px; - width: 16px; +div.v-progressindicator-indeterminate { + height: 20px; + width: 20px; overflow: hidden; /* for IE6 */ + background: #fff url(../common/img/ajax-loader-medium.gif) no-repeat 50%; + border-radius: 4px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; } /* Hide obsolete elements in indeterminate mode */ .v-progressindicator-indeterminate .v-progressindicator-wrapper, @@ -28,8 +32,9 @@ .v-progressindicator-indeterminate-disabled .v-progressindicator-indicator { display: none; } -.v-progressindicator-indeterminate-disabled { - height: 16px; - width: 16px; +div.v-progressindicator-indeterminate-disabled { + height: 20px; + width: 20px; overflow: hidden; /* for IE6 */ + background: transparent; } \ No newline at end of file diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css index 2a54452477..db38809535 100644 --- a/WebContent/VAADIN/themes/base/styles.css +++ b/WebContent/VAADIN/themes/base/styles.css @@ -176,9 +176,12 @@ .v-app { height: 100%; } -.v-app-loading { +div.v-app-loading { /* You can use this to provide indication for the user that the application is loading. */ /* It is applied to the same element as .v-app */ + background-image: url(common/img/loading-indicator.gif); + background-repeat: no-repeat; + background-position: 50%; } .v-view { height: 100%; @@ -312,11 +315,21 @@ .v-loading-indicator, .v-loading-indicator-delay, .v-loading-indicator-wait { - height: 16px; position: absolute; top: 0; right: 0; z-index: 30000; + width: 31px; + height: 31px; + background: transparent url(common/img/loading-indicator.gif); + margin-right: 5px; + margin-top: 5px; +} +.v-loading-indicator-delay { + background-image: url(common/img/loading-indicator-delay.gif); +} +.v-loading-indicator-wait { + background-image: url(common/img/loading-indicator-wait.gif); } /* Debug dialog */ .v-debug-console { @@ -722,10 +735,14 @@ overflow: hidden; /* for IE6 */ background: #ddd; } -.v-progressindicator-indeterminate { - height: 16px; - width: 16px; +div.v-progressindicator-indeterminate { + height: 20px; + width: 20px; overflow: hidden; /* for IE6 */ + background: #fff url(common/img/ajax-loader-medium.gif) no-repeat 50%; + border-radius: 4px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; } /* Hide obsolete elements in indeterminate mode */ .v-progressindicator-indeterminate .v-progressindicator-wrapper, @@ -734,10 +751,11 @@ .v-progressindicator-indeterminate-disabled .v-progressindicator-indicator { display: none; } -.v-progressindicator-indeterminate-disabled { - height: 16px; - width: 16px; +div.v-progressindicator-indeterminate-disabled { + height: 20px; + width: 20px; overflow: hidden; /* for IE6 */ + background: transparent; } /* ./WebContent/VAADIN/themes/base/select/select.css */ diff --git a/WebContent/VAADIN/themes/reindeer/progressindicator/img/base.gif b/WebContent/VAADIN/themes/reindeer/progressindicator/img/base.gif new file mode 100644 index 0000000000..6c6f15ef9e Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/progressindicator/img/base.gif differ diff --git a/WebContent/VAADIN/themes/reindeer/progressindicator/img/disabled.gif b/WebContent/VAADIN/themes/reindeer/progressindicator/img/disabled.gif new file mode 100644 index 0000000000..7a64d034b2 Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/progressindicator/img/disabled.gif differ diff --git a/WebContent/VAADIN/themes/reindeer/progressindicator/img/progress.png b/WebContent/VAADIN/themes/reindeer/progressindicator/img/progress.png new file mode 100644 index 0000000000..4a9803308c Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/progressindicator/img/progress.png differ diff --git a/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.css b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.css new file mode 100644 index 0000000000..d5cae585b3 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.css @@ -0,0 +1,13 @@ +.v-progressindicator { + background: #dfe2e4 url(img/base.gif) repeat-x 0 1px; +} +.v-progressindicator-wrapper { + border: 1px solid #bfbfbf; +} +.v-progressindicator-disabled { + background: #dfe2e4 url(img/disabled.gif); + border: 1px solid #bfbfbf; +} +.v-progressindicator-indicator { + background: #f7f9f9 url(img/progress.png); +} \ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css index e623250a04..7873f1e58b 100644 --- a/WebContent/VAADIN/themes/reindeer/styles.css +++ b/WebContent/VAADIN/themes/reindeer/styles.css @@ -176,9 +176,12 @@ .v-app { height: 100%; } -.v-app-loading { +div.v-app-loading { /* You can use this to provide indication for the user that the application is loading. */ /* It is applied to the same element as .v-app */ + background-image: url(../base/common/img/loading-indicator.gif); + background-repeat: no-repeat; + background-position: 50%; } .v-view { height: 100%; @@ -312,11 +315,21 @@ .v-loading-indicator, .v-loading-indicator-delay, .v-loading-indicator-wait { - height: 16px; position: absolute; top: 0; right: 0; z-index: 30000; + width: 31px; + height: 31px; + background: transparent url(../base/common/img/loading-indicator.gif); + margin-right: 5px; + margin-top: 5px; +} +.v-loading-indicator-delay { + background-image: url(../base/common/img/loading-indicator-delay.gif); +} +.v-loading-indicator-wait { + background-image: url(../base/common/img/loading-indicator-wait.gif); } /* Debug dialog */ .v-debug-console { @@ -722,10 +735,14 @@ overflow: hidden; /* for IE6 */ background: #ddd; } -.v-progressindicator-indeterminate { - height: 16px; - width: 16px; +div.v-progressindicator-indeterminate { + height: 20px; + width: 20px; overflow: hidden; /* for IE6 */ + background: #fff url(../base/common/img/ajax-loader-medium.gif) no-repeat 50%; + border-radius: 4px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; } /* Hide obsolete elements in indeterminate mode */ .v-progressindicator-indeterminate .v-progressindicator-wrapper, @@ -734,10 +751,11 @@ .v-progressindicator-indeterminate-disabled .v-progressindicator-indicator { display: none; } -.v-progressindicator-indeterminate-disabled { - height: 16px; - width: 16px; +div.v-progressindicator-indeterminate-disabled { + height: 20px; + width: 20px; overflow: hidden; /* for IE6 */ + background: transparent; } /* ./WebContent/VAADIN/themes/base/select/select.css */ @@ -2878,6 +2896,21 @@ td.v-datefield-calendarpanel-nextyear { display: -moz-inline-stack; } +/* ./WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.css */ +.v-progressindicator { + background: #dfe2e4 url(progressindicator/img/base.gif) repeat-x 0 1px; +} +.v-progressindicator-wrapper { + border: 1px solid #bfbfbf; +} +.v-progressindicator-disabled { + background: #dfe2e4 url(progressindicator/img/disabled.gif); + border: 1px solid #bfbfbf; +} +.v-progressindicator-indicator { + background: #f7f9f9 url(progressindicator/img/progress.png); +} + /* ./WebContent/VAADIN/themes/reindeer/select/select.css */ .v-filterselect { height: 24px; diff --git a/WebContent/VAADIN/themes/runo/common/common.css b/WebContent/VAADIN/themes/runo/common/common.css index 5f564e3997..7b40130c45 100644 --- a/WebContent/VAADIN/themes/runo/common/common.css +++ b/WebContent/VAADIN/themes/runo/common/common.css @@ -8,11 +8,6 @@ font-size: 13px; line-height: 18px; } -.v-app-loading { - background-image: url(img/loading-indicator.gif); - background-repeat: no-repeat; - background-position: 50%; -} /* Global font styles */ .v-window, .v-popupview-popup, @@ -98,19 +93,4 @@ } .v-contextmenu .gwt-MenuItem img { margin-right: 10px; -} -.v-loading-indicator, -.v-loading-indicator-delay, -.v-loading-indicator-wait { - width: 31px; - height: 31px; - background: transparent url(img/loading-indicator.gif); - margin-right: 5px; - margin-top: 5px; -} -.v-loading-indicator-delay { - background-image: url(img/loading-indicator-delay.gif); -} -.v-loading-indicator-wait { - background-image: url(img/loading-indicator-wait.gif); } \ No newline at end of file diff --git a/WebContent/VAADIN/themes/runo/common/img/ajax-loader-big.gif b/WebContent/VAADIN/themes/runo/common/img/ajax-loader-big.gif deleted file mode 100644 index 73dc88e31f..0000000000 Binary files a/WebContent/VAADIN/themes/runo/common/img/ajax-loader-big.gif and /dev/null differ diff --git a/WebContent/VAADIN/themes/runo/common/img/ajax-loader-medium.gif b/WebContent/VAADIN/themes/runo/common/img/ajax-loader-medium.gif deleted file mode 100644 index 0a0c6aaef0..0000000000 Binary files a/WebContent/VAADIN/themes/runo/common/img/ajax-loader-medium.gif and /dev/null differ diff --git a/WebContent/VAADIN/themes/runo/common/img/ajax-loader.gif b/WebContent/VAADIN/themes/runo/common/img/ajax-loader.gif deleted file mode 100755 index 354dc4685c..0000000000 Binary files a/WebContent/VAADIN/themes/runo/common/img/ajax-loader.gif and /dev/null differ diff --git a/WebContent/VAADIN/themes/runo/common/img/loading-indicator-delay.gif b/WebContent/VAADIN/themes/runo/common/img/loading-indicator-delay.gif deleted file mode 100755 index 48810bb064..0000000000 Binary files a/WebContent/VAADIN/themes/runo/common/img/loading-indicator-delay.gif and /dev/null differ diff --git a/WebContent/VAADIN/themes/runo/common/img/loading-indicator-wait.gif b/WebContent/VAADIN/themes/runo/common/img/loading-indicator-wait.gif deleted file mode 100755 index 5f7aab9afd..0000000000 Binary files a/WebContent/VAADIN/themes/runo/common/img/loading-indicator-wait.gif and /dev/null differ diff --git a/WebContent/VAADIN/themes/runo/common/img/loading-indicator.gif b/WebContent/VAADIN/themes/runo/common/img/loading-indicator.gif deleted file mode 100755 index cedaa56b10..0000000000 Binary files a/WebContent/VAADIN/themes/runo/common/img/loading-indicator.gif and /dev/null differ diff --git a/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.css b/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.css index 41f797dc8b..a9c20090d6 100644 --- a/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.css +++ b/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.css @@ -12,8 +12,8 @@ background: #f7f9f9 url(img/progress.png); } .v-progressindicator-indeterminate { - background: #dfe2e4 url(../common/img/ajax-loader-medium.gif); + background: #fff url(../../base/common/img/ajax-loader-medium.gif) no-repeat 50%; } .v-progressindicator-indeterminate-disabled { - background: #dfe2e4 url(../common/img/blank.gif); + background: #dfe2e4; } \ No newline at end of file diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css index 5492f76295..0bac84efe8 100644 --- a/WebContent/VAADIN/themes/runo/styles.css +++ b/WebContent/VAADIN/themes/runo/styles.css @@ -176,9 +176,12 @@ .v-app { height: 100%; } -.v-app-loading { +div.v-app-loading { /* You can use this to provide indication for the user that the application is loading. */ /* It is applied to the same element as .v-app */ + background-image: url(../base/common/img/loading-indicator.gif); + background-repeat: no-repeat; + background-position: 50%; } .v-view { height: 100%; @@ -312,11 +315,21 @@ .v-loading-indicator, .v-loading-indicator-delay, .v-loading-indicator-wait { - height: 16px; position: absolute; top: 0; right: 0; z-index: 30000; + width: 31px; + height: 31px; + background: transparent url(../base/common/img/loading-indicator.gif); + margin-right: 5px; + margin-top: 5px; +} +.v-loading-indicator-delay { + background-image: url(../base/common/img/loading-indicator-delay.gif); +} +.v-loading-indicator-wait { + background-image: url(../base/common/img/loading-indicator-wait.gif); } /* Debug dialog */ .v-debug-console { @@ -722,10 +735,14 @@ overflow: hidden; /* for IE6 */ background: #ddd; } -.v-progressindicator-indeterminate { - height: 16px; - width: 16px; +div.v-progressindicator-indeterminate { + height: 20px; + width: 20px; overflow: hidden; /* for IE6 */ + background: #fff url(../base/common/img/ajax-loader-medium.gif) no-repeat 50%; + border-radius: 4px; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; } /* Hide obsolete elements in indeterminate mode */ .v-progressindicator-indeterminate .v-progressindicator-wrapper, @@ -734,10 +751,11 @@ .v-progressindicator-indeterminate-disabled .v-progressindicator-indicator { display: none; } -.v-progressindicator-indeterminate-disabled { - height: 16px; - width: 16px; +div.v-progressindicator-indeterminate-disabled { + height: 20px; + width: 20px; overflow: hidden; /* for IE6 */ + background: transparent; } /* ./WebContent/VAADIN/themes/base/select/select.css */ @@ -1657,11 +1675,6 @@ div.v-window-header { font-size: 13px; line-height: 18px; } -.v-app-loading { - background-image: url(common/img/loading-indicator.gif); - background-repeat: no-repeat; - background-position: 50%; -} /* Global font styles */ .v-window, .v-popupview-popup, @@ -1748,21 +1761,6 @@ div.v-window-header { .v-contextmenu .gwt-MenuItem img { margin-right: 10px; } -.v-loading-indicator, -.v-loading-indicator-delay, -.v-loading-indicator-wait { - width: 31px; - height: 31px; - background: transparent url(common/img/loading-indicator.gif); - margin-right: 5px; - margin-top: 5px; -} -.v-loading-indicator-delay { - background-image: url(common/img/loading-indicator-delay.gif); -} -.v-loading-indicator-wait { - background-image: url(common/img/loading-indicator-wait.gif); -} /* ./WebContent/VAADIN/themes/runo/datefield/datefield.css */ .v-datefield-button { @@ -2240,10 +2238,10 @@ div.v-window-header { background: #f7f9f9 url(progressindicator/img/progress.png); } .v-progressindicator-indeterminate { - background: #dfe2e4 url(common/img/ajax-loader-medium.gif); + background: #fff url(../base/common/img/ajax-loader-medium.gif) no-repeat 50%; } .v-progressindicator-indeterminate-disabled { - background: #dfe2e4 url(common/img/blank.gif); + background: #dfe2e4; } /* ./WebContent/VAADIN/themes/runo/select/select.css */