diff options
32 files changed, 2046 insertions, 1396 deletions
diff --git a/WebContent/VAADIN/themes/base/button/button.css b/WebContent/VAADIN/themes/base/button/button.css index c7e2fab8f6..31f091487c 100644 --- a/WebContent/VAADIN/themes/base/button/button.css +++ b/WebContent/VAADIN/themes/base/button/button.css @@ -1,57 +1,139 @@ +/*
+ * Default button (more customizable)
+ * -------------------------------------- */
.v-button {
+ display: inline-block;
+ zoom: 1;
+ text-align: center;
+ text-decoration: none;
+ border: 2px outset #ddd;
+ background: #eee;
cursor: pointer;
white-space: nowrap;
margin: 0;
+ padding: .2em 1em;
+ color: inherit;
+ font: inherit;
+ line-height: normal;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ie-user-select: none;
+ user-select: none;
+ }
+
+.v-ie6 .v-button {
+ display: inline;
}
-.v-button span {
- white-space: nowrap;
-}
-.v-checkbox input {
+
+.v-button-wrap,
+.v-button-caption {
vertical-align: middle;
-}
-.v-button img,
-.v-checkbox img {
- display: inline;
+ white-space: nowrap;
+ font: inherit;
+ color: inherit;
+ line-height: normal;
+ }
+
+.v-button .v-icon,
+.v-nativebutton .v-icon {
vertical-align: middle;
margin-right: 3px;
-}
-.v-button span,
-.v-checkbox label {
+ border: none;
+ }
+
+.v-button .v-errorindicator,
+.v-nativebutton .v-errorindicator {
+ display: inline-block;
+ zoom: 1;
vertical-align: middle;
+ float: none;
}
-.v-button-link {
+
+/* Link style (we really should deprecate this) */
+.v-button-link,
+.v-nativebutton-link {
border: none;
text-align: left;
- background: none;
+ background: transparent;
padding: 0;
-}
+ color: inherit;
+ }
+
/* Inset Safari focus outline a bit */
-.v-sa .v-button-link:focus {
+.v-sa .v-button-link:focus{
outline-offset: -3px;
-}
-.v-button-link span {
+ }
+
+.v-button-link .v-button-caption,
+.v-nativebutton-link .v-nativebutton-caption {
text-decoration: underline;
-}
-.v-checkbox {
- white-space: nowrap;
-}
-.v-checkbox .v-errorindicator {
+ color: inherit;
+ text-align: left;
+ }
+
+
+/*
+ * NativeButton styles (html button element)
+ * -------------------------------------- */
+.v-nativebutton {
+ text-align: center;
+ cursor: pointer;
+ white-space: nowrap;
+ margin: 0;
+ color: inherit;
+ font: inherit;
+ line-height: normal;
+ }
+.v-nativebutton .v-nativebutton-caption {
+ vertical-align: middle;
+ white-space: nowrap;
+ font: inherit;
+ color: inherit;
+ }
+
+.v-nativebutton .v-icon {
+ vertical-align: middle;
+ margin-right: 3px;
+ }
+
+.v-nativebutton .v-errorindicator {
+ display: inline-block;
+ zoom: 1;
float: none;
- display: inline;
- padding-left: 1em;
- background-position: left;
}
/* Fixes streched buttons in IE6 and IE7*/
-.v-ie6 .v-button {
+.v-ie6 .v-nativebutton {
width: 1px;
}
-.v-ie6 .v-button,
-.v-ie7 .v-button,
-.v-ie8 .v-button {
+.v-ie6 .v-nativebutton,
+.v-ie7 .v-nativebutton,
+.v-ie8 .v-nativebutton {
overflow: visible;
padding-left: 1em;
padding-right: 1em;
}
+
+/*
+ * Checkbox styles
+ * -------------------------------------- */
+
+.v-checkbox,
+.v-checkbox label,
+.v-checkbox input {
+ vertical-align: middle;
+ white-space: nowrap;
+}
+.v-checkbox img {
+ display: inline;
+ vertical-align: middle;
+ margin-right: 3px;
+}
+.v-checkbox .v-errorindicator {
+ float: none;
+ display: inline;
+ padding-left: 1em;
+ background-position: left;
+}
/* Error indicator on checkbox fix for IE6 */
.v-ie6 .v-checkbox * {
float: left;
@@ -76,13 +158,8 @@ padding-left: 0;
padding-right: 0.7em;
}
-/* Error indicator on button fix for IE */
-.v-ie6 button .v-errorindicator,
-.v-ie7 button .v-errorindicator,
-.v-ie8 button .v-errorindicator {
- display: inline;
- padding-right: 0.5em;
-}
+
+
/* Disabled by default
.v-checkbox-error {
background: #ffe0e0;
diff --git a/WebContent/VAADIN/themes/base/select/select.css b/WebContent/VAADIN/themes/base/select/select.css index 9bfcfefd45..7da7c1201f 100644 --- a/WebContent/VAADIN/themes/base/select/select.css +++ b/WebContent/VAADIN/themes/base/select/select.css @@ -33,11 +33,9 @@ clear: left; } .v-select-twincol .v-button { - display: block; float: left; } .v-select-twincol-buttons .v-button { - display: inline; float: none; } .v-filterselect { diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css index 528c9dc4a9..fcd22a8afc 100644 --- a/WebContent/VAADIN/themes/base/styles.css +++ b/WebContent/VAADIN/themes/base/styles.css @@ -1,12 +1,10 @@ /* Automatically compiled css file from subdirectories. */ -/* ./WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.css */ .v-absolutelayout-wrapper { position: absolute; overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/accordion/accordion.css */ .v-accordion { position: relative; outline: none; @@ -34,61 +32,142 @@ width: 100%; } -/* ./WebContent/VAADIN/themes/base/button/button.css */ +/* + * Default button (more customizable) + * -------------------------------------- */ .v-button { + display: inline-block; + zoom: 1; + text-align: center; + text-decoration: none; + border: 2px outset #ddd; + background: #eee; cursor: pointer; white-space: nowrap; margin: 0; + padding: .2em 1em; + color: inherit; + font: inherit; + line-height: normal; + -khtml-user-select: none; + -moz-user-select: none; + -ie-user-select: none; + user-select: none; + } + +.v-ie6 .v-button { + display: inline; } -.v-button span { - white-space: nowrap; -} -.v-checkbox input { + +.v-button-wrap, +.v-button-caption { vertical-align: middle; -} -.v-button img, -.v-checkbox img { - display: inline; + white-space: nowrap; + font: inherit; + color: inherit; + line-height: normal; + } + +.v-button .v-icon, +.v-nativebutton .v-icon { vertical-align: middle; margin-right: 3px; -} -.v-button span, -.v-checkbox label { + border: none; + } + +.v-button .v-errorindicator, +.v-nativebutton .v-errorindicator { + display: inline-block; + zoom: 1; vertical-align: middle; + float: none; } -.v-button-link { + +/* Link style (we really should deprecate this) */ +.v-button-link, +.v-nativebutton-link { border: none; text-align: left; - background: none; + background: transparent; padding: 0; -} + color: inherit; + } + /* Inset Safari focus outline a bit */ -.v-sa .v-button-link:focus { +.v-sa .v-button-link:focus{ outline-offset: -3px; -} -.v-button-link span { + } + +.v-button-link .v-button-caption, +.v-nativebutton-link .v-nativebutton-caption { text-decoration: underline; -} -.v-checkbox { - white-space: nowrap; -} -.v-checkbox .v-errorindicator { + color: inherit; + text-align: left; + } + + +/* + * NativeButton styles (html button element) + * -------------------------------------- */ +.v-nativebutton { + text-align: center; + cursor: pointer; + white-space: nowrap; + margin: 0; + color: inherit; + font: inherit; + line-height: normal; + } +.v-nativebutton .v-nativebutton-caption { + vertical-align: middle; + white-space: nowrap; + font: inherit; + color: inherit; + } + +.v-nativebutton .v-icon { + vertical-align: middle; + margin-right: 3px; + } + +.v-nativebutton .v-errorindicator { + display: inline-block; + zoom: 1; float: none; - display: inline; - padding-left: 1em; - background-position: left; } /* Fixes streched buttons in IE6 and IE7*/ -.v-ie6 .v-button { +.v-ie6 .v-nativebutton { width: 1px; } -.v-ie6 .v-button, -.v-ie7 .v-button, -.v-ie8 .v-button { +.v-ie6 .v-nativebutton, +.v-ie7 .v-nativebutton, +.v-ie8 .v-nativebutton { overflow: visible; padding-left: 1em; padding-right: 1em; } + +/* + * Checkbox styles + * -------------------------------------- */ + +.v-checkbox, +.v-checkbox label, +.v-checkbox input { + vertical-align: middle; + white-space: nowrap; +} +.v-checkbox img { + display: inline; + vertical-align: middle; + margin-right: 3px; +} +.v-checkbox .v-errorindicator { + float: none; + display: inline; + padding-left: 1em; + background-position: left; +} /* Error indicator on checkbox fix for IE6 */ .v-ie6 .v-checkbox * { float: left; @@ -113,13 +192,8 @@ padding-left: 0; padding-right: 0.7em; } -/* Error indicator on button fix for IE */ -.v-ie6 button .v-errorindicator, -.v-ie7 button .v-errorindicator, -.v-ie8 button .v-errorindicator { - display: inline; - padding-right: 0.5em; -} + + /* Disabled by default .v-checkbox-error { background: #ffe0e0; @@ -131,7 +205,6 @@ } */ -/* ./WebContent/VAADIN/themes/base/caption/caption.css */ .v-captionwrapper { text-align: left; /* Force default alignment */ } @@ -164,7 +237,6 @@ display: inline; } -/* ./WebContent/VAADIN/themes/base/common/common.css */ /* References the BODY tag generated by Vaadin application servlet */ .v-generated-body { width: 100%; @@ -370,17 +442,14 @@ div.v-app-loading { padding: 2px; } -/* ./WebContent/VAADIN/themes/base/customcomponent/customcomponent.css */ .v-customcomponent { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/customlayout/customlayout.css */ .v-customlayout { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/datefield/datefield.css */ .v-datefield { white-space: nowrap; } @@ -452,7 +521,6 @@ div.v-app-loading { filter: alpha(opacity=30); } -/* ./WebContent/VAADIN/themes/base/formlayout/formlayout.css */ .v-formlayout-cell .v-errorindicator { display: block; } @@ -497,7 +565,6 @@ div.v-app-loading { float: none; } -/* ./WebContent/VAADIN/themes/base/gridlayout/gridlayout.css */ .v-gridlayout-margin-top { padding-top: 2em; } @@ -529,7 +596,6 @@ div.v-app-loading { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/link/link.css */ .v-link { white-space: nowrap; } @@ -549,7 +615,6 @@ div.v-app-loading { border:none; } -/* ./WebContent/VAADIN/themes/base/menubar/menubar.css */ .v-menubar table { white-space: nowrap; border-collapse: collapse; @@ -588,7 +653,6 @@ div.v-app-loading { cursor: default; } -/* ./WebContent/VAADIN/themes/base/notification/notification.css */ .v-Notification { background: #999; color: #fff; @@ -631,7 +695,6 @@ div.v-app-loading { white-space: nowrap; } -/* ./WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.css */ .v-orderedlayout-margin-top, .v-horizontallayout-margin-top, .v-verticallayout-margin-top { @@ -675,7 +738,6 @@ div.v-app-loading { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/panel/panel.css */ .v-panel, .v-panel-caption, .v-panel-content, @@ -712,7 +774,6 @@ div.v-app-loading { .v-panel-deco { } -/* ./WebContent/VAADIN/themes/base/popupview/popupview.css */ .v-popupview { cursor: pointer; background: #aaa; @@ -721,7 +782,6 @@ div.v-app-loading { overflow: auto; } -/* ./WebContent/VAADIN/themes/base/progressindicator/progressindicator.css */ .v-progressindicator { overflow: hidden; /* for IE6 */ width: 150px; @@ -759,7 +819,6 @@ div.v-progressindicator-indeterminate-disabled { background: transparent; } -/* ./WebContent/VAADIN/themes/base/select/select.css */ .v-select { text-align: left; } @@ -795,11 +854,9 @@ div.v-progressindicator-indeterminate-disabled { clear: left; } .v-select-twincol .v-button { - display: block; float: left; } .v-select-twincol-buttons .v-button { - display: inline; float: none; } .v-filterselect { @@ -895,7 +952,6 @@ div.v-progressindicator-indeterminate-disabled { } */ -/* ./WebContent/VAADIN/themes/base/shadow/shadow.css */ .v-shadow { position: absolute; } @@ -982,7 +1038,6 @@ div.v-progressindicator-indeterminate-disabled { margin-left: -4px; } -/* ./WebContent/VAADIN/themes/base/slider/slider.css */ .v-slider { margin: 5px 0; } @@ -1046,7 +1101,6 @@ div.v-progressindicator-indeterminate-disabled { margin: 0 -1px; } -/* ./WebContent/VAADIN/themes/base/splitpanel/splitpanel.css */ .v-splitpanel-horizontal, .v-splitpanel-vertical { overflow: hidden; @@ -1085,7 +1139,6 @@ div.v-progressindicator-indeterminate-disabled { position: relative; } -/* ./WebContent/VAADIN/themes/base/table/table.css */ /* Table theme building instructions * * Vaadin scroll table is very complex widget with dozens of features. These @@ -1236,7 +1289,6 @@ div.v-progressindicator-indeterminate-disabled { color: #ddd; } -/* ./WebContent/VAADIN/themes/base/tabsheet/tabsheet.css */ .v-tabsheet, .v-tabsheet-content, .v-tabsheet-deco { @@ -1326,7 +1378,6 @@ div.v-progressindicator-indeterminate-disabled { height: 0; } -/* ./WebContent/VAADIN/themes/base/textfield/textfield.css */ .v-textfield { text-align: left /* Force default alignment */ } @@ -1380,7 +1431,6 @@ textarea.v-textarea-prompt { outline-width: medium; } -/* ./WebContent/VAADIN/themes/base/tree/tree.css */ .v-tree { text-align: left; /* Force default alignment */ overflow: hidden; @@ -1436,7 +1486,6 @@ div.v-tree-node-leaf { clear: left; } -/* ./WebContent/VAADIN/themes/base/upload/upload.css */ .v-upload-immediate { position: relative; width: 10em; @@ -1462,7 +1511,6 @@ div.v-tree-node-leaf { } -/* ./WebContent/VAADIN/themes/base/window/window.css */ .v-window { background: #fff; } diff --git a/WebContent/VAADIN/themes/reindeer/button/button.css b/WebContent/VAADIN/themes/reindeer/button/button.css index 36a5f998b4..1dc2e25551 100644 --- a/WebContent/VAADIN/themes/reindeer/button/button.css +++ b/WebContent/VAADIN/themes/reindeer/button/button.css @@ -1,157 +1,27 @@ -/* We serve simpler buttons for IE6, since it doesn't support the adjacent - * sibling selector (+) that is needed to position .v-icon properly. +/* Standard implementation of the button theme + * These files contain styles that apply to all browsers */ -div > .v-button, -.v-ie7 .v-button, -div > .v-button.v-disabled, -.v-ie7 .v-button.v-disabled { - height: 26px; - padding: 0 0 0 6px; - background-color: transparent; - background-repeat: no-repeat; - background-image: url(img/left.png); /** sprite-ref: buttons */ - border: none; - cursor: default; -} -/* Error indicator need this */ -.v-ff .v-button, -.v-sa .v-button { - position: relative; -} -div > .v-button .v-button-caption, -.v-ie7 .v-button .v-button-caption, -div > .v-button.v-disabled .v-button-caption, -.v-ie7 .v-button.v-disabled .v-button-caption { - display: inline-block; - height: 22px; - padding: 4px 15px 0 9px; - background-color: transparent; - background-repeat: no-repeat; - background-position: right top; - background-image: url(img/right.png); /** sprite-ref: buttons; sprite-alignment: right */ - text-shadow: #fff 0 1px 0; - font-weight: bold; - font-size: 11px; - line-height: 16px; - float: none; -} -.v-sa .v-button .v-button-caption { - height: 21px; - padding-top: 5px; -} -.v-ch .v-button .v-button-caption, -.v-ch .v-button .v-icon { - position: relative; - top: -1px; - left: -3px; -} -.v-button:focus { - background-image: url(img/left-focus.png); /** sprite-ref: buttons */ - outline: none; -} -.v-button:focus .v-button-caption { - background-image: url(img/right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ - outline: none; -} -.v-button:active, -.v-ie7 .v-button.v-pressed { - background-image: url(img/left-pressed.png); /** sprite-ref: buttons */ - outline: none; -} -.v-button:active .v-button-caption, -.v-ie7 .v-button.v-pressed .v-button-caption { - background-image: url(img/right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ - outline: none; -} -/* FF3 & FF2 */ -.v-button::-moz-focus-inner { - border: none; - padding: 0; -} -.v-ff2 .v-button .v-button-caption { - display: -moz-inline-box; - padding-top: 6px; - height: 20px; -} -/* IE7 */ -.v-ie7 .v-button.v-pressed .v-button-caption { - position: relative; -} -.v-ie7 .v-button.v-pressed .v-icon { - z-index: 2; -} -/* Opera */ -.v-op .v-button:active .v-button-caption { - margin-top: -1px; - margin-left: -1px; -} -.v-op .v-button:active .v-icon + .v-button-caption, -.v-op .v-button:active .v-icon + .v-errorindicator + .v-button-caption { - margin-left: -26px; -} -/* Modifications for buttons with icons */ -div > .v-button .v-icon, -.v-ie7 .v-button .v-icon, -div > .v-button.v-disabled .v-icon, -.v-ie7 .v-button.v-disabled .v-icon { - display: inline-block; - width: 16px; - overflow: hidden; - position: relative; - margin: -1px 3px 0 6px; -} -.v-ff2 .v-button .v-icon, -.v-ff2 .v-button.v-disabled .v-icon { - display: block; - float: left; - margin-top: 4px; -} -.v-ch .v-button .v-icon, -.v-ch .v-button.v-disabled .v-icon { - z-index: 2; -} -.v-ff2 .v-button-link .v-icon, -.v-ff2 .v-button-link.v-disabled .v-icon { - margin: 0; -} -.v-button .v-icon + .v-button-caption, -.v-button .v-icon + .v-errorindicator + .v-button-caption, -.v-button.v-disabled .v-icon + .v-button-caption, -.v-button.v-disabled .v-icon + .v-errorindicator + .v-button-caption { - margin-left: -25px; - padding-left: 25px; -} -/* Buttons with error indicator */ -div > .v-button .v-errorindicator, -.v-ie7 .v-button .v-errorindicator { - position: absolute; - display: block; - width: 9px; - height: 16px; - background: transparent url(../common/icons/error.png) no-repeat 50%; - padding: 0; - margin: 0; - z-index: 3; -} -.v-ie7 .v-button.v-pressed .v-errorindicator { - display: none; -} -.v-ie7 .v-button .v-icon + .v-errorindicator + .v-button-caption { - margin-left: 0; -} -.v-ie6 .v-button .v-errorindicator { - position: absolute; - display: inline; - width: 9px; - height: 16px; - background: transparent url(../common/icons/error-ie6.png) no-repeat 50%; -} +@import "standard.css"; +@import "primary-style.css"; +@import "small-style.css"; +@import "link-style.css"; + +/* Browser-specific corrections to the standard implementation */ +@import "safari.css"; +@import "firefox.css"; +@import "opera.css"; +@import "ie.css"; + + + +/* + .v-ff .v-button .v-errorindicator, .v-sa .v-button .v-errorindicator { top: 2px; left: 16px; } -/* Buttons with explicit size */ +/* Buttons with explicit size * .v-button[style*="width"] .v-button-caption { display: block; } @@ -168,277 +38,5 @@ div > .v-button .v-errorindicator, display: block; margin-left: 0; } +*/ -/** - * Default action button style -------------------------- - */ -div > .v-button-primary, -.v-ie7 .v-button-primary, -div > .v-button-primary.v-disabled, -.v-ie7 .v-button-primary.v-disabled { - background-image: url(img/primary-left.png); /** sprite-ref: buttons */ -} -div > .v-button-primary .v-button-caption, -.v-ie7 .v-button-primary .v-button-caption, -div > .v-button-primary.v-disabled .v-button-caption, -.v-ie7 .v-button-primary.v-disabled .v-button-caption { - background-image: url(img/primary-right.png); /** sprite-ref: buttons; sprite-alignment: right */ -} -.v-button-primary:focus { - background-image: url(img/primary-left-focus.png); /** sprite-ref: buttons */ -} -.v-button-primary:focus .v-button-caption { - background-image: url(img/primary-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ -} -.v-button-primary:active, -.v-ie7 .v-button-primary.v-pressed { - background-image: url(img/primary-left-pressed.png); /** sprite-ref: buttons */ -} -.v-button-primary:active .v-button-caption, -.v-ie7 .v-button-primary.v-pressed .v-button-caption { - background-image: url(img/primary-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ -} -/* - * Small-style -------------------------- - */ -div > .v-button-small, -.v-ie7 .v-button-small, -div > .v-button-small.v-disabled, -.v-ie7 .v-button-small.v-disabled { - background-image: url(img/small-left.png); /** sprite-ref: buttons */ - height: 20px; -} -div > .v-button-small .v-button-caption, -.v-ie7 .v-button-small .v-button-caption, -div > .v-button-small.v-disabled .v-button-caption, -.v-ie7 .v-button-small.v-disabled .v-button-caption { - background-image: url(img/small-right.png); /** sprite-ref: buttons; sprite-alignment: right */ - height: 19px; - padding: 1px 11px 0 5px; - font-weight: normal; -} -.v-ff2 .v-button-small .v-button-caption { - height: 17px; - padding-top: 3px; -} -.v-sa .v-button-small .v-button-caption { - height: 18px; - padding-top: 2px; -} -.v-button-small:focus { - background-image: url(img/small-left-focus.png); /** sprite-ref: buttons */ -} -.v-button-small:focus .v-button-caption { - background-image: url(img/small-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ -} -.v-button-small:active, -.v-ie7 .v-button-small.v-pressed { - background-image: url(img/small-left-pressed.png); /** sprite-ref: buttons */ -} -.v-button-small:active .v-button-caption, -.v-ie7 .v-button-small.v-pressed .v-button-caption { - background-image: url(img/small-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ -} - -/*------------ -* Black buttons -*------------*/ -.black div > .v-button, -.v-ie7 .black .v-button, -.black div > .v-button.v-disabled, -.v-ie7 .black .v-button.v-disabled { - background-image: url(img/black/left.png); /** sprite-ref: black-buttons */ -} -.black div > .v-button .v-button-caption, -.v-ie7 .black .v-button .v-button-caption, -.black div > .v-button.v-disabled .v-button-caption, -.v-ie7 .black .v-button.v-disabled .v-button-caption { - background-image: url(img/black/right.png); /** sprite-ref: black-buttons; sprite-alignment: right */ - color: #c9ccce; - text-shadow: rgba(0,0,0,.8) 0 -1px 0; -} -.black .v-button:focus { - background-image: url(img/black/left-focus.png); /** sprite-ref: black-buttons */ -} -.black .v-button:focus .v-button-caption { - background-image: url(img/black/right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ -} -.black .v-button:active, -.v-ie7 .black .v-button.v-pressed { - background-image: url(img/black/left-pressed.png); /** sprite-ref: black-buttons */ -} -.black .v-button:active .v-button-caption, -.v-ie7 .black .v-button.v-pressed .v-button-caption { - background-image: url(img/black/right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ -} - -/* - * Primary-style ---------------------------- - */ -.black div > .v-button-primary, -.v-ie7 .black .v-button-primary, -.black div > .v-button-primary.v-disabled, -.v-ie7 .black .v-button-primary.v-disabled { - background-image: url(img/black/primary-left.png); /** sprite-ref: black-buttons */ -} -.black div > .v-button-primary .v-button-caption, -.v-ie7 .black .v-button-primary .v-button-caption, -.black div > .v-button-primary.v-disabled .v-button-caption, -.v-ie7 .black .v-button-primary.v-disabled .v-button-caption { - background-image: url(img/black/primary-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */ -} -.black .v-button-primary:focus { - background-image: url(img/black/primary-left-focus.png); /** sprite-ref: black-buttons */ -} -.black .v-button-primary:focus .v-button-caption { - background-image: url(img/black/primary-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ - color: #eaf4fb; -} -.black .v-button-primary:active, -.v-ie7 .black .v-button-primary.v-pressed { - background-image: url(img/black/primary-left-pressed.png); /** sprite-ref: black-buttons */ -} -.black .v-button-primary:active .v-button-caption, -.v-ie7 .black .v-button-primary.v-pressed .v-button-caption { - background-image: url(img/black/primary-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ -} - -/* - * Small-style -------------------------- - */ -.black div > .v-button-small, -.v-ie7 .black .v-button-small, -.black div > .v-button-small.v-disabled, -.v-ie7 .black .v-button-small.v-disabled { - background-image: url(img/black/small-left.png); /** sprite-ref: black-buttons */ -} -.black div > .v-button-small .v-button-caption, -.v-ie7 .black .v-button-small .v-button-caption, -.black div > .v-button-small.v-disabled .v-button-caption, -.v-ie7 .black .v-button-small.v-disabled .v-button-caption { - background-image: url(img/black/small-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */ -} -.black .v-button-small:focus { - background-image: url(img/black/small-left-focus.png); /** sprite-ref: black-buttons */ -} -.black .v-button-small:focus .v-button-caption { - background-image: url(img/black/small-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ -} -.black .v-button-small:active, -.v-ie7 .black .v-button-small.v-pressed { - background-image: url(img/black/small-left-pressed.png); /** sprite-ref: black-buttons */ -} -.black .v-button-small:active .v-button-caption, -.v-ie7 .black .v-button-small.v-pressed .v-button-caption { - background-image: url(img/black/small-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ -} - - - - -/** - * Link style buttons ----------------------- - */ -div > .v-button.v-button-link, -div > .v-button.v-button-link:focus, -div > .v-button.v-button-link:active, -.v-ie7 .v-button-link, -.v-ie7 .v-button-link.v-pressed, -div > .v-button.v-button-link.v-disabled, -.v-ie7 .v-button-link.v-disabled { - background: transparent; - height: auto; - padding: 0; - cursor: pointer; -} -div > .v-button.v-button-link .v-button-caption, -div > .v-button.v-button-link:focus .v-button-caption, -div > .v-button.v-button-link:active .v-button-caption, -.v-ie7 .v-button-link .v-button-caption, -.v-ie7 .v-button-link.v-pressed .v-button-caption, -div > .v-button.v-button-link.v-disabled .v-button-caption, -.v-ie7 .v-button-link.v-disabled .v-button-caption { - background: transparent; - height: auto; - padding: 0; - display: inline; - font-weight: normal; - color: #1b699f; - font-size: 12px; - text-shadow: none; -} -.v-button.v-button-link .v-icon + .v-button-caption { - margin: 0; - padding: 0; -} -.v-button.v-button-link:focus { - outline: 1px dotted #1b699f; -} -div > .v-button-link .v-icon, -.v-ie7 .v-button-link .v-icon, -div > .v-disabled.v-button-link .v-icon, -.v-ie7 .v-disabled.v-button-link .v-icon { - position: static; - width: auto; -} - - - -/** - * IE6 buttons -------------------------- - */ -.v-ie6 .v-button { - border: 1px solid #b3b3b3; - border-bottom-color: #9a9a9a; - background: #d8d8d8 url(img/right.png) no-repeat 0 -1px; - padding: 3px 15px 2px 15px; - font-weight: bold; - font-size: 11px; - line-height: 16px; - height: 16px; - outline: none; - cursor: default; -} -.v-ie6 .v-button-primary { - background-image: url(img/primary-right.png); -} -.v-ie6 .v-button-small { - font-weight: normal; - padding: 1px 11px 0 11px; - height: 12px; - line-height: normal; - background-image: url(img/small-right.png); -} -.v-ie6 .v-button.v-pressed { - background: transparent url(img/right-pressed.png) no-repeat 0 -1px; -} -/* Buttons on blue background */ -.v-ie6 .blue .v-button { - border-color: #84949c; - border-top-color: #83939b; - border-bottom-color: #888d91; -} -/* Buttons on black background */ -.v-ie6 .black .v-button { - border: 1px solid #0d0e0f; - background: #202224 url(img/black/right.png) no-repeat 0 -1px; - color: #c9ccce; -} -.v-ie6 .black .v-button-primary { - background-image: url(img/black/primary-right.png); -} -.v-ie6 .black .v-button-small { - background-image: url(img/black/small-right.png); -} -.v-ie6 .black .v-button.v-pressed { - background-image: url(img/black/right-pressed.png); -} -/* Link button in IE6 */ -.v-ie6 .v-button-link { - border: none; - padding: 0; - background: transparent; - line-height: normal; - font-size: 12px; - font-weight: normal; -}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/button/firefox.css b/WebContent/VAADIN/themes/reindeer/button/firefox.css new file mode 100644 index 0000000000..76393e637a --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/firefox.css @@ -0,0 +1,20 @@ +.v-ff2 .v-button .v-button-caption { + display: -moz-inline-box; + padding-top: 6px; + height: 20px; + } + + +/* Modifications for buttons with icons * +.v-ff2 .v-button .v-icon, +.v-ff2 .v-button.v-disabled .v-icon { + display: block; + float: left; + margin-top: 4px; + } + +.v-ff2 .v-button-link .v-icon, +.v-ff2 .v-button-link.v-disabled .v-icon { + margin: 0; + } + */
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/button/ie.css b/WebContent/VAADIN/themes/reindeer/button/ie.css new file mode 100644 index 0000000000..4aab3e0d5b --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/ie.css @@ -0,0 +1,79 @@ +.v-ie6 .v-nativebutton-link, +.v-ie7 .v-nativebutton-link, +.v-ie8 .v-nativebutton-link { + padding: 0; + text-align: left; +} + + + + + +/** + * IE6 buttons -------------------------- + */ +.v-ie6 .v-button { + border: 1px solid #b3b3b3; + border-bottom-color: #9a9a9a; + background: #d8d8d8 url(img/right.png) no-repeat 0 -1px; + padding: 0 15px; + height: 23px; +} +.v-ie6 .v-button .v-button-wrap { + background: transparent; + height: 20px; + padding: 3px 0 0; + display: inline; + zoom: 1; +} +.v-ie6 .v-button-primary { + background-image: url(img/primary-right.png); +} +.v-ie6 .v-button-small { + background-image: url(img/small-right.png); + height: 17px; +} +.v-ie6 .v-button-small .v-button-wrap { + height: 17px; + padding: 0; +} +.v-ie6 .v-button.v-pressed { + background: transparent url(img/right-pressed.png) no-repeat 0 -1px; +} +/* Buttons on blue background */ +.v-ie6 .blue .v-button { + border-color: #84949c; + border-top-color: #83939b; + border-bottom-color: #888d91; +} +/* Buttons on black background */ +.v-ie6 .black .v-button { + border: 1px solid #0d0e0f; + background: #202224 url(img/black/right.png) no-repeat 0 -1px; + color: #c9ccce; +} +.v-ie6 .black .v-button-primary { + background-image: url(img/black/primary-right.png); +} +.v-ie6 .black .v-button-small { + background-image: url(img/black/small-right.png); +} +.v-ie6 .black .v-button.v-pressed { + background-image: url(img/black/right-pressed.png); +} + + +/* Link style button */ +.v-ie6 .v-button-link, +.v-ie6 .black .v-button-link { + background: transparent; + border: none; + height: auto; + line-height: normal; + padding: 0; +} +.v-ie6 .v-button-link .v-button-wrap, +.v-ie6 .black .v-button-link .v-button-wrap { + padding: 0; + height: auto; +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites-ie6.png b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites-ie6.png Binary files differindex 9f7f7c4659..90a73be23f 100644 --- a/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites-ie6.png +++ b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites-ie6.png diff --git a/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites.png b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites.png Binary files differindex 197b9b5d21..744ca30d64 100644 --- a/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites.png +++ b/WebContent/VAADIN/themes/reindeer/button/img/black-button-sprites.png diff --git a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png Binary files differindex 87af82f1c9..8ccaa56edd 100644 --- a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png +++ b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png diff --git a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png Binary files differindex c048e47b62..5087e8e957 100644 --- a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png +++ b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png diff --git a/WebContent/VAADIN/themes/reindeer/button/link-style.css b/WebContent/VAADIN/themes/reindeer/button/link-style.css new file mode 100644 index 0000000000..14530c8dff --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/link-style.css @@ -0,0 +1,30 @@ +.v-button.v-button-link, +.v-button.v-button-link:focus, +.v-button.v-button-link:active, +.v-button-link.v-pressed, +.v-disabled.v-button.v-button-link, +.v-button.v-button-link .v-button-wrap, +.v-button.v-button-link:focus .v-button-wrap, +.v-button.v-button-link:active .v-button-wrap, +.v-button-link.v-pressed .v-button-wrap, +.v-disabled.v-button.v-button-link .v-button-wrap { + background: transparent; + height: auto; + padding: 0; + cursor: pointer; + line-height: inherit; + } + +.v-button-link .v-button-caption, +.v-nativebutton-link .v-nativebutton-caption { + line-height: inherit; + font-weight: normal; + color: #1b699f; + font-size: 12px; + text-shadow: none; + } + +.v-button-link:focus .v-button-caption, +.v-nativebutton-link:focus .v-nativebutton-caption { + outline: 1px dotted #1b699f; + }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/button/opera.css b/WebContent/VAADIN/themes/reindeer/button/opera.css new file mode 100644 index 0000000000..c1e22c9258 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/opera.css @@ -0,0 +1,8 @@ +/*.v-op .v-button:active .v-button-caption { + margin-top: -1px; + margin-left: -1px; +} +.v-op .v-button:active .v-icon + .v-button-caption, +.v-op .v-button:active .v-icon + .v-errorindicator + .v-button-caption { + margin-left: -26px; +}*/
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/button/primary-style.css b/WebContent/VAADIN/themes/reindeer/button/primary-style.css new file mode 100644 index 0000000000..fdfe90ce3a --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/primary-style.css @@ -0,0 +1,62 @@ +.v-button-primary:focus { + background-image: url(img/primary-left-focus.png); /** sprite-ref: buttons */ + } + +.v-button-primary:focus .v-button-wrap { + background-image: url(img/primary-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ + } + +.v-button-primary:active, +.v-button-primary.v-pressed { + background-image: url(img/primary-left-pressed.png); /** sprite-ref: buttons */ + } + +.v-button-primary:active .v-button-wrap, +.v-button-primary.v-pressed .v-button-wrap { + background-image: url(img/primary-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ + } + +.v-button-primary, +.v-disabled.v-button-primary { + background-image: url(img/primary-left.png); /** sprite-ref: buttons */ + } + +.v-button-primary .v-button-wrap, +.v-disabled.v-button-primary .v-button-wrap { + background-image: url(img/primary-right.png); /** sprite-ref: buttons; sprite-alignment: right */ + } + + + + +/* Black style */ + + +.black .v-button-primary:focus { + background-image: url(img/black/primary-left-focus.png); /** sprite-ref: black-buttons */ + } + +.black .v-button-primary:focus .v-button-wrap { + background-image: url(img/black/primary-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ + color: #eaf4fb; + } + +.black .v-button-primary:active, +.black .v-button-primary.v-pressed { + background-image: url(img/black/primary-left-pressed.png); /** sprite-ref: black-buttons */ + } + +.black .v-button-primary:active .v-button-wrap, +.black .v-button-primary.v-pressed .v-button-wrap { + background-image: url(img/black/primary-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ + } + +.black .v-button-primary, +.black .v-disabled.v-button-primary { + background-image: url(img/black/primary-left.png); /** sprite-ref: black-buttons */ + } + +.black .v-button-primary .v-button-wrap, +.black .v-disabled.v-button-primary .v-button-wrap { + background-image: url(img/black/primary-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */ + } diff --git a/WebContent/VAADIN/themes/reindeer/button/safari.css b/WebContent/VAADIN/themes/reindeer/button/safari.css new file mode 100644 index 0000000000..e32721d261 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/safari.css @@ -0,0 +1,10 @@ +.v-sa .v-button-caption { + height: 21px; + padding-top: 5px; + line-height: 17px; + } + +.v-sa .v-button-small .v-button-caption { + height: 18px; + padding-top: 2px; + }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/button/small-style.css b/WebContent/VAADIN/themes/reindeer/button/small-style.css new file mode 100644 index 0000000000..fa6b177624 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/small-style.css @@ -0,0 +1,67 @@ +.v-button-small:focus { + background-image: url(img/small-left-focus.png); /** sprite-ref: buttons */ + } + +.v-button-small:focus .v-button-wrap { + background-image: url(img/small-right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ + } + +.v-button-small:active, +.v-button-small.v-pressed { + background-image: url(img/small-left-pressed.png); /** sprite-ref: buttons */ + } + +.v-button-small:active .v-button-wrap, +.v-button-small.v-pressed .v-button-wrap { + background-image: url(img/small-right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ + } + +.v-button-small, +.v-disabled.v-button-small { + background-image: url(img/small-left.png); /** sprite-ref: buttons */ + height: 20px; + } + +.v-button-small .v-button-wrap, +.v-disabled.v-button-small .v-button-wrap { + background-image: url(img/small-right.png); /** sprite-ref: buttons; sprite-alignment: right */ + height: 19px; + padding: 1px 14px 0 8px; + } + +.v-button-small .v-button-caption { + font-weight: normal; + } + + + + +/* Black style */ + +.black .v-button-small:focus { + background-image: url(img/black/small-left-focus.png); /** sprite-ref: black-buttons */ + } + +.black .v-button-small:focus .v-button-wrap { + background-image: url(img/black/small-right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ + } + +.black .v-button-small:active, +.black .v-button-small.v-pressed { + background-image: url(img/black/small-left-pressed.png); /** sprite-ref: black-buttons */ + } + +.black .v-button-small:active .v-button-wrap, +.black .v-button-small.v-pressed .v-button-wrap { + background-image: url(img/black/small-right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ + } + +.black .v-button-small, +.black .v-disabled.v-button-small { + background-image: url(img/black/small-left.png); /** sprite-ref: black-buttons */ + } + +.black .v-button-small .v-button-wrap, +.black .v-disabled.v-button-small .v-button-wrap { + background-image: url(img/black/small-right.png); /** sprite-ref: black-buttons; sprite-alignment: right */ + }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/button/standard.css b/WebContent/VAADIN/themes/reindeer/button/standard.css new file mode 100644 index 0000000000..5510f82295 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/button/standard.css @@ -0,0 +1,94 @@ +.v-button:focus { + background-image: url(img/left-focus.png); /** sprite-ref: buttons */ + outline: none; + } + +.v-button:focus .v-button-wrap { + background-image: url(img/right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ + outline: none; + } + +.v-button:active, +.v-button.v-pressed { + background-image: url(img/left-pressed.png); /** sprite-ref: buttons */ + outline: none; + } + +.v-button:active .v-button-wrap, +.v-button.v-pressed .v-button-wrap { + background-image: url(img/right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ + outline: none; + } + +.v-button, +.v-disabled.v-button { + height: 26px; + padding: 0 0 0 6px; + background-color: transparent; + background-repeat: no-repeat; + background-image: url(img/left.png); /** sprite-ref: buttons */ + border: none; + cursor: default; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + } + +.v-button-wrap, +.v-disabled.v-button .v-button-wrap { + display: block; + height: 22px; + padding: 4px 15px 0 9px; + background-color: transparent; + background-repeat: no-repeat; + background-position: right top; + background-image: url(img/right.png); /** sprite-ref: buttons; sprite-alignment: right */ + } + +.v-button-caption { + color: #222; + text-shadow: #fff 0 1px 0; + font-weight: bold; + font-size: 11px; + line-height: 16px; + } + + + + +/************************** + * Black style + **************************/ +.black .v-button:focus { + background-image: url(img/black/left-focus.png); /** sprite-ref: black-buttons */ + } + +.black .v-button:focus .v-button-wrap { + background-image: url(img/black/right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ + } + +.black .v-button:active, +.black .v-button.v-pressed { + background-image: url(img/black/left-pressed.png); /** sprite-ref: black-buttons */ + } + +.black .v-button:active .v-button-wrap, +.black .v-button.v-pressed .v-button-wrap { + background-image: url(img/black/right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ + } + +.black .v-button, +.black .v-disabled.v-button { + background-image: url(img/black/left.png); /** sprite-ref: black-buttons */ + } + +.black .v-button-wrap, +.black .v-disabled.v-button .v-button-wrap { + background-image: url(img/black/right.png); /** sprite-ref: black-buttons; sprite-alignment: right */ + } + +.black .v-button-caption { + color: #c9ccce; + text-shadow: #121314 0 -1px 0; + }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css index 81993989c0..78be75158f 100644 --- a/WebContent/VAADIN/themes/reindeer/styles.css +++ b/WebContent/VAADIN/themes/reindeer/styles.css @@ -1,12 +1,10 @@ /* Automatically compiled css file from subdirectories. */ -/* ./WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.css */ .v-absolutelayout-wrapper { position: absolute; overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/accordion/accordion.css */ .v-accordion { position: relative; outline: none; @@ -34,61 +32,142 @@ width: 100%; } -/* ./WebContent/VAADIN/themes/base/button/button.css */ +/* + * Default button (more customizable) + * -------------------------------------- */ .v-button { + display: inline-block; + zoom: 1; + text-align: center; + text-decoration: none; + border: 2px outset #ddd; + background: #eee; cursor: pointer; white-space: nowrap; margin: 0; + padding: .2em 1em; + color: inherit; + font: inherit; + line-height: normal; + -khtml-user-select: none; + -moz-user-select: none; + -ie-user-select: none; + user-select: none; + } + +.v-ie6 .v-button { + display: inline; } -.v-button span { - white-space: nowrap; -} -.v-checkbox input { + +.v-button-wrap, +.v-button-caption { vertical-align: middle; -} -.v-button img, -.v-checkbox img { - display: inline; + white-space: nowrap; + font: inherit; + color: inherit; + line-height: normal; + } + +.v-button .v-icon, +.v-nativebutton .v-icon { vertical-align: middle; margin-right: 3px; -} -.v-button span, -.v-checkbox label { + border: none; + } + +.v-button .v-errorindicator, +.v-nativebutton .v-errorindicator { + display: inline-block; + zoom: 1; vertical-align: middle; + float: none; } -.v-button-link { + +/* Link style (we really should deprecate this) */ +.v-button-link, +.v-nativebutton-link { border: none; text-align: left; - background: none; + background: transparent; padding: 0; -} + color: inherit; + } + /* Inset Safari focus outline a bit */ -.v-sa .v-button-link:focus { +.v-sa .v-button-link:focus{ outline-offset: -3px; -} -.v-button-link span { + } + +.v-button-link .v-button-caption, +.v-nativebutton-link .v-nativebutton-caption { text-decoration: underline; -} -.v-checkbox { - white-space: nowrap; -} -.v-checkbox .v-errorindicator { + color: inherit; + text-align: left; + } + + +/* + * NativeButton styles (html button element) + * -------------------------------------- */ +.v-nativebutton { + text-align: center; + cursor: pointer; + white-space: nowrap; + margin: 0; + color: inherit; + font: inherit; + line-height: normal; + } +.v-nativebutton .v-nativebutton-caption { + vertical-align: middle; + white-space: nowrap; + font: inherit; + color: inherit; + } + +.v-nativebutton .v-icon { + vertical-align: middle; + margin-right: 3px; + } + +.v-nativebutton .v-errorindicator { + display: inline-block; + zoom: 1; float: none; - display: inline; - padding-left: 1em; - background-position: left; } /* Fixes streched buttons in IE6 and IE7*/ -.v-ie6 .v-button { +.v-ie6 .v-nativebutton { width: 1px; } -.v-ie6 .v-button, -.v-ie7 .v-button, -.v-ie8 .v-button { +.v-ie6 .v-nativebutton, +.v-ie7 .v-nativebutton, +.v-ie8 .v-nativebutton { overflow: visible; padding-left: 1em; padding-right: 1em; } + +/* + * Checkbox styles + * -------------------------------------- */ + +.v-checkbox, +.v-checkbox label, +.v-checkbox input { + vertical-align: middle; + white-space: nowrap; +} +.v-checkbox img { + display: inline; + vertical-align: middle; + margin-right: 3px; +} +.v-checkbox .v-errorindicator { + float: none; + display: inline; + padding-left: 1em; + background-position: left; +} /* Error indicator on checkbox fix for IE6 */ .v-ie6 .v-checkbox * { float: left; @@ -113,13 +192,8 @@ padding-left: 0; padding-right: 0.7em; } -/* Error indicator on button fix for IE */ -.v-ie6 button .v-errorindicator, -.v-ie7 button .v-errorindicator, -.v-ie8 button .v-errorindicator { - display: inline; - padding-right: 0.5em; -} + + /* Disabled by default .v-checkbox-error { background: #ffe0e0; @@ -131,7 +205,6 @@ } */ -/* ./WebContent/VAADIN/themes/base/caption/caption.css */ .v-captionwrapper { text-align: left; /* Force default alignment */ } @@ -164,7 +237,6 @@ display: inline; } -/* ./WebContent/VAADIN/themes/base/common/common.css */ /* References the BODY tag generated by Vaadin application servlet */ .v-generated-body { width: 100%; @@ -370,17 +442,14 @@ div.v-app-loading { padding: 2px; } -/* ./WebContent/VAADIN/themes/base/customcomponent/customcomponent.css */ .v-customcomponent { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/customlayout/customlayout.css */ .v-customlayout { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/datefield/datefield.css */ .v-datefield { white-space: nowrap; } @@ -452,7 +521,6 @@ div.v-app-loading { filter: alpha(opacity=30); } -/* ./WebContent/VAADIN/themes/base/formlayout/formlayout.css */ .v-formlayout-cell .v-errorindicator { display: block; } @@ -497,7 +565,6 @@ div.v-app-loading { float: none; } -/* ./WebContent/VAADIN/themes/base/gridlayout/gridlayout.css */ .v-gridlayout-margin-top { padding-top: 2em; } @@ -529,7 +596,6 @@ div.v-app-loading { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/link/link.css */ .v-link { white-space: nowrap; } @@ -549,7 +615,6 @@ div.v-app-loading { border:none; } -/* ./WebContent/VAADIN/themes/base/menubar/menubar.css */ .v-menubar table { white-space: nowrap; border-collapse: collapse; @@ -588,7 +653,6 @@ div.v-app-loading { cursor: default; } -/* ./WebContent/VAADIN/themes/base/notification/notification.css */ .v-Notification { background: #999; color: #fff; @@ -631,7 +695,6 @@ div.v-app-loading { white-space: nowrap; } -/* ./WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.css */ .v-orderedlayout-margin-top, .v-horizontallayout-margin-top, .v-verticallayout-margin-top { @@ -675,7 +738,6 @@ div.v-app-loading { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/panel/panel.css */ .v-panel, .v-panel-caption, .v-panel-content, @@ -712,7 +774,6 @@ div.v-app-loading { .v-panel-deco { } -/* ./WebContent/VAADIN/themes/base/popupview/popupview.css */ .v-popupview { cursor: pointer; background: #aaa; @@ -721,7 +782,6 @@ div.v-app-loading { overflow: auto; } -/* ./WebContent/VAADIN/themes/base/progressindicator/progressindicator.css */ .v-progressindicator { overflow: hidden; /* for IE6 */ width: 150px; @@ -759,7 +819,6 @@ div.v-progressindicator-indeterminate-disabled { background: transparent; } -/* ./WebContent/VAADIN/themes/base/select/select.css */ .v-select { text-align: left; } @@ -795,11 +854,9 @@ div.v-progressindicator-indeterminate-disabled { clear: left; } .v-select-twincol .v-button { - display: block; float: left; } .v-select-twincol-buttons .v-button { - display: inline; float: none; } .v-filterselect { @@ -895,7 +952,6 @@ div.v-progressindicator-indeterminate-disabled { } */ -/* ./WebContent/VAADIN/themes/base/shadow/shadow.css */ .v-shadow { position: absolute; } @@ -982,7 +1038,6 @@ div.v-progressindicator-indeterminate-disabled { margin-left: -4px; } -/* ./WebContent/VAADIN/themes/base/slider/slider.css */ .v-slider { margin: 5px 0; } @@ -1046,7 +1101,6 @@ div.v-progressindicator-indeterminate-disabled { margin: 0 -1px; } -/* ./WebContent/VAADIN/themes/base/splitpanel/splitpanel.css */ .v-splitpanel-horizontal, .v-splitpanel-vertical { overflow: hidden; @@ -1085,7 +1139,6 @@ div.v-progressindicator-indeterminate-disabled { position: relative; } -/* ./WebContent/VAADIN/themes/base/table/table.css */ /* Table theme building instructions * * Vaadin scroll table is very complex widget with dozens of features. These @@ -1236,7 +1289,6 @@ div.v-progressindicator-indeterminate-disabled { color: #ddd; } -/* ./WebContent/VAADIN/themes/base/tabsheet/tabsheet.css */ .v-tabsheet, .v-tabsheet-content, .v-tabsheet-deco { @@ -1326,7 +1378,6 @@ div.v-progressindicator-indeterminate-disabled { height: 0; } -/* ./WebContent/VAADIN/themes/base/textfield/textfield.css */ .v-textfield { text-align: left /* Force default alignment */ } @@ -1380,7 +1431,6 @@ textarea.v-textarea-prompt { outline-width: medium; } -/* ./WebContent/VAADIN/themes/base/tree/tree.css */ .v-tree { text-align: left; /* Force default alignment */ overflow: hidden; @@ -1436,7 +1486,6 @@ div.v-tree-node-leaf { clear: left; } -/* ./WebContent/VAADIN/themes/base/upload/upload.css */ .v-upload-immediate { position: relative; width: 10em; @@ -1462,7 +1511,6 @@ div.v-tree-node-leaf { } -/* ./WebContent/VAADIN/themes/base/window/window.css */ .v-window { background: #fff; } @@ -1621,7 +1669,6 @@ div.v-tree-node-leaf { } /* Automatically compiled css file from subdirectories. */ -/* ./WebContent/VAADIN/themes/reindeer/a-sprite-definitions/a-sprite-definitions.css */ /*------------ * General vertical and horizontal sprites * -----------*/ @@ -1631,7 +1678,6 @@ div.v-tree-node-leaf { * Buttons * -----------*/ -/* ./WebContent/VAADIN/themes/reindeer/accordion/accordion.css */ .v-accordion { border: 1px solid #bebebe; border-radius: 2px; @@ -1682,34 +1728,60 @@ div.v-tree-node-leaf { -moz-border-radius: 0; } -/* ./WebContent/VAADIN/themes/reindeer/button/button.css */ -/* We serve simpler buttons for IE6, since it doesn't support the adjacent - * sibling selector (+) that is needed to position .v-icon properly. +/* Standard implementation of the button theme + * These files contain styles that apply to all browsers */ -div > .v-button, -.v-ie7 .v-button, -div > .v-button.v-disabled, -.v-ie7 .v-button.v-disabled { + +.v-button:focus { + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: left -0px; + outline: none; + } + +.v-button:focus .v-button-wrap { + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: right -26px; + outline: none; + } + +.v-button:active, +.v-button.v-pressed { + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: left -52px; + outline: none; + } + +.v-button:active .v-button-wrap, +.v-button.v-pressed .v-button-wrap { + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: right -78px; + outline: none; + } + +.v-button, +.v-disabled.v-button { height: 26px; padding: 0 0 0 6px; background-color: transparent; background-repeat: no-repeat; background-image: url(button/img/button-sprites.png); -background-image: url(button/img/button-sprites-ie6.png); - background-position: left -0px; + background-position: left -104px; border: none; cursor: default; -} -/* Error indicator need this */ -.v-ff .v-button, -.v-sa .v-button { - position: relative; -} -div > .v-button .v-button-caption, -.v-ie7 .v-button .v-button-caption, -div > .v-button.v-disabled .v-button-caption, -.v-ie7 .v-button.v-disabled .v-button-caption { - display: inline-block; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + } + +.v-button-wrap, +.v-disabled.v-button .v-button-wrap { + display: block; height: 22px; padding: 4px 15px 0 9px; background-color: transparent; @@ -1717,430 +1789,332 @@ div > .v-button.v-disabled .v-button-caption, background-position: right top; background-image: url(button/img/button-sprites.png); -background-image: url(button/img/button-sprites-ie6.png); - background-position: right -26px; + background-position: right -130px; + } + +.v-button-caption { + color: #222; text-shadow: #fff 0 1px 0; font-weight: bold; font-size: 11px; line-height: 16px; - float: none; -} -.v-sa .v-button .v-button-caption { - height: 21px; - padding-top: 5px; -} -.v-ch .v-button .v-button-caption, -.v-ch .v-button .v-icon { - position: relative; - top: -1px; - left: -3px; -} -.v-button:focus { - background-image: url(button/img/button-sprites.png); - -background-image: url(button/img/button-sprites-ie6.png); + } + + + + +/************************** + * Black style + **************************/ +.black .v-button:focus { + background-image: url(button/img/black-button-sprites.png); + -background-image: url(button/img/black-button-sprites-ie6.png); + background-position: left -0px; + } + +.black .v-button:focus .v-button-wrap { + background-image: url(button/img/black-button-sprites.png); + -background-image: url(button/img/black-button-sprites-ie6.png); + background-position: right -26px; + } + +.black .v-button:active, +.black .v-button.v-pressed { + background-image: url(button/img/black-button-sprites.png); + -background-image: url(button/img/black-button-sprites-ie6.png); background-position: left -52px; - outline: none; -} -.v-button:focus .v-button-caption { - background-image: url(button/img/button-sprites.png); - -background-image: url(button/img/button-sprites-ie6.png); + } + +.black .v-button:active .v-button-wrap, +.black .v-button.v-pressed .v-button-wrap { + background-image: url(button/img/black-button-sprites.png); + -background-image: url(button/img/black-button-sprites-ie6.png); background-position: right -78px; - outline: none; -} -.v-button:active, -.v-ie7 .v-button.v-pressed { - background-image: url(button/img/button-sprites.png); - -background-image: url(button/img/button-sprites-ie6.png); + } + +.black .v-button, +.black .v-disabled.v-button { + background-image: url(button/img/black-button-sprites.png); + -background-image: url(button/img/black-button-sprites-ie6.png); background-position: left -104px; - outline: none; -} -.v-button:active .v-button-caption, -.v-ie7 .v-button.v-pressed .v-button-caption { - background-image: url(button/img/button-sprites.png); - -background-image: url(button/img/button-sprites-ie6.png); + } + +.black .v-button-wrap, +.black .v-disabled.v-button .v-button-wrap { + background-image: url(button/img/black-button-sprites.png); + -background-image: url(button/img/black-button-sprites-ie6.png); background-position: right -130px; - outline: none; -} -/* FF3 & FF2 */ -.v-button::-moz-focus-inner { - border: none; - padding: 0; -} -.v-ff2 .v-button .v-button-caption { - display: -moz-inline-box; - padding-top: 6px; - height: 20px; -} -/* IE7 */ -.v-ie7 .v-button.v-pressed .v-button-caption { - position: relative; -} -.v-ie7 .v-button.v-pressed .v-icon { - z-index: 2; -} -/* Opera */ -.v-op .v-button:active .v-button-caption { - margin-top: -1px; - margin-left: -1px; -} -.v-op .v-button:active .v-icon + .v-button-caption, -.v-op .v-button:active .v-icon + .v-errorindicator + .v-button-caption { - margin-left: -26px; -} -/* Modifications for buttons with icons */ -div > .v-button .v-icon, -.v-ie7 .v-button .v-icon, -div > .v-button.v-disabled .v-icon, -.v-ie7 .v-button.v-disabled .v-icon { - display: inline-block; - width: 16px; - overflow: hidden; - position: relative; - margin: -1px 3px 0 6px; -} -.v-ff2 .v-button .v-icon, -.v-ff2 .v-button.v-disabled .v-icon { - display: block; - float: left; - margin-top: 4px; -} -.v-ch .v-button .v-icon, -.v-ch .v-button.v-disabled .v-icon { - z-index: 2; -} -.v-ff2 .v-button-link .v-icon, -.v-ff2 .v-button-link.v-disabled .v-icon { - margin: 0; -} -.v-button .v-icon + .v-button-caption, -.v-button .v-icon + .v-errorindicator + .v-button-caption, -.v-button.v-disabled .v-icon + .v-button-caption, -.v-button.v-disabled .v-icon + .v-errorindicator + .v-button-caption { - margin-left: -25px; - padding-left: 25px; -} -/* Buttons with error indicator */ -div > .v-button .v-errorindicator, -.v-ie7 .v-button .v-errorindicator { - position: absolute; - display: block; - width: 9px; - height: 16px; - background: transparent url(common/icons/error.png) no-repeat 50%; - padding: 0; - margin: 0; - z-index: 3; -} -.v-ie7 .v-button.v-pressed .v-errorindicator { - display: none; -} -.v-ie7 .v-button .v-icon + .v-errorindicator + .v-button-caption { - margin-left: 0; -} -.v-ie6 .v-button .v-errorindicator { - position: absolute; - display: inline; - width: 9px; - height: 16px; - background: transparent url(common/icons/error-ie6.png) no-repeat 50%; -} -.v-ff .v-button .v-errorindicator, -.v-sa .v-button .v-errorindicator { - top: 2px; - left: 16px; -} -/* Buttons with explicit size */ -.v-button[style*="width"] .v-button-caption { - display: block; -} -.v-button[style*="width"] .v-icon + .v-button-caption, -.v-button[style*="width"] .v-icon + .v-errorindicator + .v-button-caption { - margin-left: 0; -} -.v-button[style*="width"] .v-icon, -.v-ie7 .v-button .v-icon { - position: absolute; - top: 4px; -} -.v-ie7 .v-button > .v-button-caption { - display: block; - margin-left: 0; -} + } + +.black .v-button-caption { + color: #c9ccce; + text-shadow: #121314 0 -1px 0; + } -/** - * Default action button style -------------------------- - */ -div > .v-button-primary, -.v-ie7 .v-button-primary, -div > .v-button-primary.v-disabled, -.v-ie7 .v-button-primary.v-disabled { +.v-button-primary:focus { background-image: url(button/img/button-sprites.png); -background-image: url(button/img/button-sprites-ie6.png); background-position: left -156px; -} -div > .v-button-primary .v-button-caption, -.v-ie7 .v-button-primary .v-button-caption, -div > .v-button-primary.v-disabled .v-button-caption, -.v-ie7 .v-button-primary.v-disabled .v-button-caption { + } + +.v-button-primary:focus .v-button-wrap { background-image: url(button/img/button-sprites.png); -background-image: url(button/img/button-sprites-ie6.png); background-position: right -182px; -} -.v-button-primary:focus { + } + +.v-button-primary:active, +.v-button-primary.v-pressed { background-image: url(button/img/button-sprites.png); -background-image: url(button/img/button-sprites-ie6.png); background-position: left -208px; -} -.v-button-primary:focus .v-button-caption { + } + +.v-button-primary:active .v-button-wrap, +.v-button-primary.v-pressed .v-button-wrap { background-image: url(button/img/button-sprites.png); -background-image: url(button/img/button-sprites-ie6.png); background-position: right -234px; -} -.v-button-primary:active, -.v-ie7 .v-button-primary.v-pressed { + } + +.v-button-primary, +.v-disabled.v-button-primary { background-image: url(button/img/button-sprites.png); -background-image: url(button/img/button-sprites-ie6.png); background-position: left -260px; -} -.v-button-primary:active .v-button-caption, -.v-ie7 .v-button-primary.v-pressed .v-button-caption { + } + +.v-button-primary .v-button-wrap, +.v-disabled.v-button-primary .v-button-wrap { background-image: url(button/img/button-sprites.png); -background-image: url(button/img/button-sprites-ie6.png); background-position: right -286px; -} -/* - * Small-style -------------------------- - */ -div > .v-button-small, -.v-ie7 .v-button-small, -div > .v-button-small.v-disabled, -.v-ie7 .v-button-small.v-disabled { - background-image: url(button/img/button-sprites.png); - -background-image: url(button/img/button-sprites-ie6.png); - background-position: left -312px; - height: 20px; -} -div > .v-button-small .v-button-caption, -.v-ie7 .v-button-small .v-button-caption, -div > .v-button-small.v-disabled .v-button-caption, -.v-ie7 .v-button-small.v-disabled .v-button-caption { - background-image: url(button/img/button-sprites.png); - -background-image: url(button/img/button-sprites-ie6.png); - background-position: right -332px; - height: 19px; - padding: 1px 11px 0 5px; - font-weight: normal; -} -.v-ff2 .v-button-small .v-button-caption { - height: 17px; - padding-top: 3px; -} -.v-sa .v-button-small .v-button-caption { - height: 18px; - padding-top: 2px; -} -.v-button-small:focus { - background-image: url(button/img/button-sprites.png); - -background-image: url(button/img/button-sprites-ie6.png); - background-position: left -352px; -} -.v-button-small:focus .v-button-caption { - background-image: url(button/img/button-sprites.png); - -background-image: url(button/img/button-sprites-ie6.png); - background-position: right -372px; -} -.v-button-small:active, -.v-ie7 .v-button-small.v-pressed { - background-image: url(button/img/button-sprites.png); - -background-image: url(button/img/button-sprites-ie6.png); - background-position: left -392px; -} -.v-button-small:active .v-button-caption, -.v-ie7 .v-button-small.v-pressed .v-button-caption { - background-image: url(button/img/button-sprites.png); - -background-image: url(button/img/button-sprites-ie6.png); - background-position: right -412px; -} + } + -/*------------ -* Black buttons -*------------*/ -.black div > .v-button, -.v-ie7 .black .v-button, -.black div > .v-button.v-disabled, -.v-ie7 .black .v-button.v-disabled { - background-image: url(button/img/black-button-sprites.png); - -background-image: url(button/img/black-button-sprites-ie6.png); - background-position: left -0px; -} -.black div > .v-button .v-button-caption, -.v-ie7 .black .v-button .v-button-caption, -.black div > .v-button.v-disabled .v-button-caption, -.v-ie7 .black .v-button.v-disabled .v-button-caption { - background-image: url(button/img/black-button-sprites.png); - -background-image: url(button/img/black-button-sprites-ie6.png); - background-position: right -26px; - color: #c9ccce; - text-shadow: rgba(0,0,0,.8) 0 -1px 0; -} -.black .v-button:focus { - background-image: url(button/img/black-button-sprites.png); - -background-image: url(button/img/black-button-sprites-ie6.png); - background-position: left -52px; -} -.black .v-button:focus .v-button-caption { - background-image: url(button/img/black-button-sprites.png); - -background-image: url(button/img/black-button-sprites-ie6.png); - background-position: right -78px; -} -.black .v-button:active, -.v-ie7 .black .v-button.v-pressed { - background-image: url(button/img/black-button-sprites.png); - -background-image: url(button/img/black-button-sprites-ie6.png); - background-position: left -104px; -} -.black .v-button:active .v-button-caption, -.v-ie7 .black .v-button.v-pressed .v-button-caption { - background-image: url(button/img/black-button-sprites.png); - -background-image: url(button/img/black-button-sprites-ie6.png); - background-position: right -130px; -} -/* - * Primary-style ---------------------------- - */ -.black div > .v-button-primary, -.v-ie7 .black .v-button-primary, -.black div > .v-button-primary.v-disabled, -.v-ie7 .black .v-button-primary.v-disabled { + +/* Black style */ + + +.black .v-button-primary:focus { background-image: url(button/img/black-button-sprites.png); -background-image: url(button/img/black-button-sprites-ie6.png); background-position: left -156px; -} -.black div > .v-button-primary .v-button-caption, -.v-ie7 .black .v-button-primary .v-button-caption, -.black div > .v-button-primary.v-disabled .v-button-caption, -.v-ie7 .black .v-button-primary.v-disabled .v-button-caption { + } + +.black .v-button-primary:focus .v-button-wrap { background-image: url(button/img/black-button-sprites.png); -background-image: url(button/img/black-button-sprites-ie6.png); background-position: right -182px; -} -.black .v-button-primary:focus { + color: #eaf4fb; + } + +.black .v-button-primary:active, +.black .v-button-primary.v-pressed { background-image: url(button/img/black-button-sprites.png); -background-image: url(button/img/black-button-sprites-ie6.png); background-position: left -208px; -} -.black .v-button-primary:focus .v-button-caption { + } + +.black .v-button-primary:active .v-button-wrap, +.black .v-button-primary.v-pressed .v-button-wrap { background-image: url(button/img/black-button-sprites.png); -background-image: url(button/img/black-button-sprites-ie6.png); background-position: right -234px; - color: #eaf4fb; -} -.black .v-button-primary:active, -.v-ie7 .black .v-button-primary.v-pressed { + } + +.black .v-button-primary, +.black .v-disabled.v-button-primary { background-image: url(button/img/black-button-sprites.png); -background-image: url(button/img/black-button-sprites-ie6.png); background-position: left -260px; -} -.black .v-button-primary:active .v-button-caption, -.v-ie7 .black .v-button-primary.v-pressed .v-button-caption { + } + +.black .v-button-primary .v-button-wrap, +.black .v-disabled.v-button-primary .v-button-wrap { background-image: url(button/img/black-button-sprites.png); -background-image: url(button/img/black-button-sprites-ie6.png); background-position: right -286px; -} + } -/* - * Small-style -------------------------- - */ -.black div > .v-button-small, -.v-ie7 .black .v-button-small, -.black div > .v-button-small.v-disabled, -.v-ie7 .black .v-button-small.v-disabled { +.v-button-small:focus { + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: left -312px; + } + +.v-button-small:focus .v-button-wrap { + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: right -332px; + } + +.v-button-small:active, +.v-button-small.v-pressed { + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: left -352px; + } + +.v-button-small:active .v-button-wrap, +.v-button-small.v-pressed .v-button-wrap { + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: right -372px; + } + +.v-button-small, +.v-disabled.v-button-small { + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: left -392px; + height: 20px; + } + +.v-button-small .v-button-wrap, +.v-disabled.v-button-small .v-button-wrap { + background-image: url(button/img/button-sprites.png); + -background-image: url(button/img/button-sprites-ie6.png); + background-position: right -412px; + height: 19px; + padding: 1px 14px 0 8px; + } + +.v-button-small .v-button-caption { + font-weight: normal; + } + + + + +/* Black style */ + +.black .v-button-small:focus { background-image: url(button/img/black-button-sprites.png); -background-image: url(button/img/black-button-sprites-ie6.png); background-position: left -312px; -} -.black div > .v-button-small .v-button-caption, -.v-ie7 .black .v-button-small .v-button-caption, -.black div > .v-button-small.v-disabled .v-button-caption, -.v-ie7 .black .v-button-small.v-disabled .v-button-caption { + } + +.black .v-button-small:focus .v-button-wrap { background-image: url(button/img/black-button-sprites.png); -background-image: url(button/img/black-button-sprites-ie6.png); background-position: right -332px; -} -.black .v-button-small:focus { + } + +.black .v-button-small:active, +.black .v-button-small.v-pressed { background-image: url(button/img/black-button-sprites.png); -background-image: url(button/img/black-button-sprites-ie6.png); background-position: left -352px; -} -.black .v-button-small:focus .v-button-caption { + } + +.black .v-button-small:active .v-button-wrap, +.black .v-button-small.v-pressed .v-button-wrap { background-image: url(button/img/black-button-sprites.png); -background-image: url(button/img/black-button-sprites-ie6.png); background-position: right -372px; -} -.black .v-button-small:active, -.v-ie7 .black .v-button-small.v-pressed { + } + +.black .v-button-small, +.black .v-disabled.v-button-small { background-image: url(button/img/black-button-sprites.png); -background-image: url(button/img/black-button-sprites-ie6.png); background-position: left -392px; -} -.black .v-button-small:active .v-button-caption, -.v-ie7 .black .v-button-small.v-pressed .v-button-caption { + } + +.black .v-button-small .v-button-wrap, +.black .v-disabled.v-button-small .v-button-wrap { background-image: url(button/img/black-button-sprites.png); -background-image: url(button/img/black-button-sprites-ie6.png); background-position: right -412px; -} - - - + } -/** - * Link style buttons ----------------------- - */ -div > .v-button.v-button-link, -div > .v-button.v-button-link:focus, -div > .v-button.v-button-link:active, -.v-ie7 .v-button-link, -.v-ie7 .v-button-link.v-pressed, -div > .v-button.v-button-link.v-disabled, -.v-ie7 .v-button-link.v-disabled { +.v-button.v-button-link, +.v-button.v-button-link:focus, +.v-button.v-button-link:active, +.v-button-link.v-pressed, +.v-disabled.v-button.v-button-link, +.v-button.v-button-link .v-button-wrap, +.v-button.v-button-link:focus .v-button-wrap, +.v-button.v-button-link:active .v-button-wrap, +.v-button-link.v-pressed .v-button-wrap, +.v-disabled.v-button.v-button-link .v-button-wrap { background: transparent; height: auto; padding: 0; cursor: pointer; -} -div > .v-button.v-button-link .v-button-caption, -div > .v-button.v-button-link:focus .v-button-caption, -div > .v-button.v-button-link:active .v-button-caption, -.v-ie7 .v-button-link .v-button-caption, -.v-ie7 .v-button-link.v-pressed .v-button-caption, -div > .v-button.v-button-link.v-disabled .v-button-caption, -.v-ie7 .v-button-link.v-disabled .v-button-caption { - background: transparent; - height: auto; - padding: 0; - display: inline; + line-height: inherit; + } + +.v-button-link .v-button-caption, +.v-nativebutton-link .v-nativebutton-caption { + line-height: inherit; font-weight: normal; color: #1b699f; font-size: 12px; text-shadow: none; -} -.v-button.v-button-link .v-icon + .v-button-caption { - margin: 0; - padding: 0; -} -.v-button.v-button-link:focus { + } + +.v-button-link:focus .v-button-caption, +.v-nativebutton-link:focus .v-nativebutton-caption { outline: 1px dotted #1b699f; + } + +/* Browser-specific corrections to the standard implementation */ + +.v-sa .v-button-caption { + height: 21px; + padding-top: 5px; + line-height: 17px; + } + +.v-sa .v-button-small .v-button-caption { + height: 18px; + padding-top: 2px; + } + +.v-ff2 .v-button .v-button-caption { + display: -moz-inline-box; + padding-top: 6px; + height: 20px; + } + + +/* Modifications for buttons with icons * +.v-ff2 .v-button .v-icon, +.v-ff2 .v-button.v-disabled .v-icon { + display: block; + float: left; + margin-top: 4px; + } + +.v-ff2 .v-button-link .v-icon, +.v-ff2 .v-button-link.v-disabled .v-icon { + margin: 0; + } + */ + +/*.v-op .v-button:active .v-button-caption { + margin-top: -1px; + margin-left: -1px; } -div > .v-button-link .v-icon, -.v-ie7 .v-button-link .v-icon, -div > .v-disabled.v-button-link .v-icon, -.v-ie7 .v-disabled.v-button-link .v-icon { - position: static; - width: auto; +.v-op .v-button:active .v-icon + .v-button-caption, +.v-op .v-button:active .v-icon + .v-errorindicator + .v-button-caption { + margin-left: -26px; +}*/ + +.v-ie6 .v-nativebutton-link, +.v-ie7 .v-nativebutton-link, +.v-ie8 .v-nativebutton-link { + padding: 0; + text-align: left; } + + /** * IE6 buttons -------------------------- */ @@ -2148,23 +2122,26 @@ div > .v-disabled.v-button-link .v-icon, border: 1px solid #b3b3b3; border-bottom-color: #9a9a9a; background: #d8d8d8 url(button/img/right.png) no-repeat 0 -1px; - padding: 3px 15px 2px 15px; - font-weight: bold; - font-size: 11px; - line-height: 16px; - height: 16px; - outline: none; - cursor: default; + padding: 0 15px; + height: 23px; +} +.v-ie6 .v-button .v-button-wrap { + background: transparent; + height: 20px; + padding: 3px 0 0; + display: inline; + zoom: 1; } .v-ie6 .v-button-primary { background-image: url(button/img/primary-right.png); } .v-ie6 .v-button-small { - font-weight: normal; - padding: 1px 11px 0 11px; - height: 12px; - line-height: normal; background-image: url(button/img/small-right.png); + height: 17px; +} +.v-ie6 .v-button-small .v-button-wrap { + height: 17px; + padding: 0; } .v-ie6 .v-button.v-pressed { background: transparent url(button/img/right-pressed.png) no-repeat 0 -1px; @@ -2190,17 +2167,52 @@ div > .v-disabled.v-button-link .v-icon, .v-ie6 .black .v-button.v-pressed { background-image: url(button/img/black/right-pressed.png); } -/* Link button in IE6 */ -.v-ie6 .v-button-link { - border: none; - padding: 0; + + +/* Link style button */ +.v-ie6 .v-button-link, +.v-ie6 .black .v-button-link { background: transparent; + border: none; + height: auto; line-height: normal; - font-size: 12px; - font-weight: normal; + padding: 0; +} +.v-ie6 .v-button-link .v-button-wrap, +.v-ie6 .black .v-button-link .v-button-wrap { + padding: 0; + height: auto; +} + + + +/* + +.v-ff .v-button .v-errorindicator, +.v-sa .v-button .v-errorindicator { + top: 2px; + left: 16px; } +/* Buttons with explicit size * +.v-button[style*="width"] .v-button-caption { + display: block; +} +.v-button[style*="width"] .v-icon + .v-button-caption, +.v-button[style*="width"] .v-icon + .v-errorindicator + .v-button-caption { + margin-left: 0; +} +.v-button[style*="width"] .v-icon, +.v-ie7 .v-button .v-icon { + position: absolute; + top: 4px; +} +.v-ie7 .v-button > .v-button-caption { + display: block; + margin-left: 0; +} +*/ + -/* ./WebContent/VAADIN/themes/reindeer/common/common.css */ .v-generated-body, .v-app { background: #f5f5f5; @@ -2338,7 +2350,6 @@ div > .v-disabled.v-button-link .v-icon, cursor: default; } -/* ./WebContent/VAADIN/themes/reindeer/datefield/datefield.css */ .v-datefield-calendarpanel { border-collapse: collapse; margin: 0; @@ -2750,7 +2761,6 @@ td.v-datefield-calendarpanel-nextyear { background-position: right -294px; } -/* ./WebContent/VAADIN/themes/reindeer/formlayout/formlayout.css */ .v-formlayout-errorcell { width: 13px; } @@ -2809,7 +2819,6 @@ td.v-datefield-calendarpanel-nextyear { font-weight: bold; } -/* ./WebContent/VAADIN/themes/reindeer/label/label.css */ .v-label { line-height: 18px; } @@ -2885,7 +2894,6 @@ td.v-datefield-calendarpanel-nextyear { line-height: normal; } -/* ./WebContent/VAADIN/themes/reindeer/layouts/layouts.css */ .v-orderedlayout-margin-top, .v-horizontallayout-margin-top, .v-verticallayout-margin-top { @@ -2931,7 +2939,6 @@ td.v-datefield-calendarpanel-nextyear { background-color: #1e2022; } -/* ./WebContent/VAADIN/themes/reindeer/menubar/menubar.css */ .v-menubar { height: 23px; overflow: hidden; @@ -2987,7 +2994,6 @@ td.v-datefield-calendarpanel-nextyear { margin-top: -14px; } -/* ./WebContent/VAADIN/themes/reindeer/notification/notification.css */ .v-Notification { color: #fff; border-radius: 4px; @@ -3013,7 +3019,6 @@ td.v-datefield-calendarpanel-nextyear { font-size: 12px; } -/* ./WebContent/VAADIN/themes/reindeer/panel/panel.css */ .v-panel-caption, .v-panel-nocaption { border-bottom: 1px solid #dcdcdc; @@ -3091,7 +3096,6 @@ td.v-datefield-calendarpanel-nextyear { border: none; } -/* ./WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.css */ .v-progressindicator-wrapper { background: #dfe2e4 url(progressindicator/img/base.gif) repeat-x; border: 1px solid #bfbfbf; @@ -3103,7 +3107,6 @@ td.v-datefield-calendarpanel-nextyear { background: #f7f9f9 url(progressindicator/img/progress.png); } -/* ./WebContent/VAADIN/themes/reindeer/select/select.css */ .v-filterselect { height: 24px; background-repeat: no-repeat; @@ -3449,7 +3452,6 @@ td.v-datefield-calendarpanel-nextyear { overflow: hidden; } -/* ./WebContent/VAADIN/themes/reindeer/slider/slider.css */ .v-slider { border-top: 1px solid #9a9c9e; border-bottom: 1px solid #bdbfc1; @@ -3496,7 +3498,6 @@ td.v-datefield-calendarpanel-nextyear { margin-left: -5px; } -/* ./WebContent/VAADIN/themes/reindeer/splitpanel/splitpanel.css */ .v-splitpanel-hsplitter, .v-splitpanel-hsplitter-locked { width: 7px; @@ -3564,7 +3565,6 @@ td.v-datefield-calendarpanel-nextyear { background: #4e5253; } -/* ./WebContent/VAADIN/themes/reindeer/table/table.css */ .v-table-header-wrap { border-color: #c2c3c4; background: transparent repeat-x; @@ -3862,7 +3862,6 @@ td.v-datefield-calendarpanel-nextyear { border: none; } -/* ./WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css */ .v-tabsheet-tabitemcell, .v-tabsheet-spacertd { height: 32px; @@ -4235,7 +4234,6 @@ td.v-datefield-calendarpanel-nextyear { } /* Content area font color specified with minimal style (reduces additional selectors) */ -/* ./WebContent/VAADIN/themes/reindeer/textfield/textfield.css */ .v-textfield, .v-textarea { line-height: normal; @@ -4381,7 +4379,6 @@ input.v-textfield-readonly, border-width: 0; } -/* ./WebContent/VAADIN/themes/reindeer/tree/tree.css */ .v-tree-node { background: transparent url(tree/img/arrows.png) no-repeat 6px -10px; margin-bottom: 2px; @@ -4426,7 +4423,6 @@ input.v-textfield-readonly, padding: 1px; } -/* ./WebContent/VAADIN/themes/reindeer/window/window.css */ .v-window { background: transparent; } diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css index 265fdfb387..0dffa94902 100644 --- a/WebContent/VAADIN/themes/runo/styles.css +++ b/WebContent/VAADIN/themes/runo/styles.css @@ -1,12 +1,10 @@ /* Automatically compiled css file from subdirectories. */ -/* ./WebContent/VAADIN/themes/base/absolutelayout/absolutelayout.css */ .v-absolutelayout-wrapper { position: absolute; overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/accordion/accordion.css */ .v-accordion { position: relative; outline: none; @@ -34,61 +32,142 @@ width: 100%; } -/* ./WebContent/VAADIN/themes/base/button/button.css */ +/* + * Default button (more customizable) + * -------------------------------------- */ .v-button { + display: inline-block; + zoom: 1; + text-align: center; + text-decoration: none; + border: 2px outset #ddd; + background: #eee; cursor: pointer; white-space: nowrap; margin: 0; + padding: .2em 1em; + color: inherit; + font: inherit; + line-height: normal; + -khtml-user-select: none; + -moz-user-select: none; + -ie-user-select: none; + user-select: none; + } + +.v-ie6 .v-button { + display: inline; } -.v-button span { - white-space: nowrap; -} -.v-checkbox input { + +.v-button-wrap, +.v-button-caption { vertical-align: middle; -} -.v-button img, -.v-checkbox img { - display: inline; + white-space: nowrap; + font: inherit; + color: inherit; + line-height: normal; + } + +.v-button .v-icon, +.v-nativebutton .v-icon { vertical-align: middle; margin-right: 3px; -} -.v-button span, -.v-checkbox label { + border: none; + } + +.v-button .v-errorindicator, +.v-nativebutton .v-errorindicator { + display: inline-block; + zoom: 1; vertical-align: middle; + float: none; } -.v-button-link { + +/* Link style (we really should deprecate this) */ +.v-button-link, +.v-nativebutton-link { border: none; text-align: left; - background: none; + background: transparent; padding: 0; -} + color: inherit; + } + /* Inset Safari focus outline a bit */ -.v-sa .v-button-link:focus { +.v-sa .v-button-link:focus{ outline-offset: -3px; -} -.v-button-link span { + } + +.v-button-link .v-button-caption, +.v-nativebutton-link .v-nativebutton-caption { text-decoration: underline; -} -.v-checkbox { - white-space: nowrap; -} -.v-checkbox .v-errorindicator { + color: inherit; + text-align: left; + } + + +/* + * NativeButton styles (html button element) + * -------------------------------------- */ +.v-nativebutton { + text-align: center; + cursor: pointer; + white-space: nowrap; + margin: 0; + color: inherit; + font: inherit; + line-height: normal; + } +.v-nativebutton .v-nativebutton-caption { + vertical-align: middle; + white-space: nowrap; + font: inherit; + color: inherit; + } + +.v-nativebutton .v-icon { + vertical-align: middle; + margin-right: 3px; + } + +.v-nativebutton .v-errorindicator { + display: inline-block; + zoom: 1; float: none; - display: inline; - padding-left: 1em; - background-position: left; } /* Fixes streched buttons in IE6 and IE7*/ -.v-ie6 .v-button { +.v-ie6 .v-nativebutton { width: 1px; } -.v-ie6 .v-button, -.v-ie7 .v-button, -.v-ie8 .v-button { +.v-ie6 .v-nativebutton, +.v-ie7 .v-nativebutton, +.v-ie8 .v-nativebutton { overflow: visible; padding-left: 1em; padding-right: 1em; } + +/* + * Checkbox styles + * -------------------------------------- */ + +.v-checkbox, +.v-checkbox label, +.v-checkbox input { + vertical-align: middle; + white-space: nowrap; +} +.v-checkbox img { + display: inline; + vertical-align: middle; + margin-right: 3px; +} +.v-checkbox .v-errorindicator { + float: none; + display: inline; + padding-left: 1em; + background-position: left; +} /* Error indicator on checkbox fix for IE6 */ .v-ie6 .v-checkbox * { float: left; @@ -113,13 +192,8 @@ padding-left: 0; padding-right: 0.7em; } -/* Error indicator on button fix for IE */ -.v-ie6 button .v-errorindicator, -.v-ie7 button .v-errorindicator, -.v-ie8 button .v-errorindicator { - display: inline; - padding-right: 0.5em; -} + + /* Disabled by default .v-checkbox-error { background: #ffe0e0; @@ -131,7 +205,6 @@ } */ -/* ./WebContent/VAADIN/themes/base/caption/caption.css */ .v-captionwrapper { text-align: left; /* Force default alignment */ } @@ -164,7 +237,6 @@ display: inline; } -/* ./WebContent/VAADIN/themes/base/common/common.css */ /* References the BODY tag generated by Vaadin application servlet */ .v-generated-body { width: 100%; @@ -370,17 +442,14 @@ div.v-app-loading { padding: 2px; } -/* ./WebContent/VAADIN/themes/base/customcomponent/customcomponent.css */ .v-customcomponent { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/customlayout/customlayout.css */ .v-customlayout { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/datefield/datefield.css */ .v-datefield { white-space: nowrap; } @@ -452,7 +521,6 @@ div.v-app-loading { filter: alpha(opacity=30); } -/* ./WebContent/VAADIN/themes/base/formlayout/formlayout.css */ .v-formlayout-cell .v-errorindicator { display: block; } @@ -497,7 +565,6 @@ div.v-app-loading { float: none; } -/* ./WebContent/VAADIN/themes/base/gridlayout/gridlayout.css */ .v-gridlayout-margin-top { padding-top: 2em; } @@ -529,7 +596,6 @@ div.v-app-loading { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/link/link.css */ .v-link { white-space: nowrap; } @@ -549,7 +615,6 @@ div.v-app-loading { border:none; } -/* ./WebContent/VAADIN/themes/base/menubar/menubar.css */ .v-menubar table { white-space: nowrap; border-collapse: collapse; @@ -588,7 +653,6 @@ div.v-app-loading { cursor: default; } -/* ./WebContent/VAADIN/themes/base/notification/notification.css */ .v-Notification { background: #999; color: #fff; @@ -631,7 +695,6 @@ div.v-app-loading { white-space: nowrap; } -/* ./WebContent/VAADIN/themes/base/orderedlayout/orderedlayout.css */ .v-orderedlayout-margin-top, .v-horizontallayout-margin-top, .v-verticallayout-margin-top { @@ -675,7 +738,6 @@ div.v-app-loading { overflow: hidden; } -/* ./WebContent/VAADIN/themes/base/panel/panel.css */ .v-panel, .v-panel-caption, .v-panel-content, @@ -712,7 +774,6 @@ div.v-app-loading { .v-panel-deco { } -/* ./WebContent/VAADIN/themes/base/popupview/popupview.css */ .v-popupview { cursor: pointer; background: #aaa; @@ -721,7 +782,6 @@ div.v-app-loading { overflow: auto; } -/* ./WebContent/VAADIN/themes/base/progressindicator/progressindicator.css */ .v-progressindicator { overflow: hidden; /* for IE6 */ width: 150px; @@ -759,7 +819,6 @@ div.v-progressindicator-indeterminate-disabled { background: transparent; } -/* ./WebContent/VAADIN/themes/base/select/select.css */ .v-select { text-align: left; } @@ -795,11 +854,9 @@ div.v-progressindicator-indeterminate-disabled { clear: left; } .v-select-twincol .v-button { - display: block; float: left; } .v-select-twincol-buttons .v-button { - display: inline; float: none; } .v-filterselect { @@ -895,7 +952,6 @@ div.v-progressindicator-indeterminate-disabled { } */ -/* ./WebContent/VAADIN/themes/base/shadow/shadow.css */ .v-shadow { position: absolute; } @@ -982,7 +1038,6 @@ div.v-progressindicator-indeterminate-disabled { margin-left: -4px; } -/* ./WebContent/VAADIN/themes/base/slider/slider.css */ .v-slider { margin: 5px 0; } @@ -1046,7 +1101,6 @@ div.v-progressindicator-indeterminate-disabled { margin: 0 -1px; } -/* ./WebContent/VAADIN/themes/base/splitpanel/splitpanel.css */ .v-splitpanel-horizontal, .v-splitpanel-vertical { overflow: hidden; @@ -1085,7 +1139,6 @@ div.v-progressindicator-indeterminate-disabled { position: relative; } -/* ./WebContent/VAADIN/themes/base/table/table.css */ /* Table theme building instructions * * Vaadin scroll table is very complex widget with dozens of features. These @@ -1236,7 +1289,6 @@ div.v-progressindicator-indeterminate-disabled { color: #ddd; } -/* ./WebContent/VAADIN/themes/base/tabsheet/tabsheet.css */ .v-tabsheet, .v-tabsheet-content, .v-tabsheet-deco { @@ -1326,7 +1378,6 @@ div.v-progressindicator-indeterminate-disabled { height: 0; } -/* ./WebContent/VAADIN/themes/base/textfield/textfield.css */ .v-textfield { text-align: left /* Force default alignment */ } @@ -1380,7 +1431,6 @@ textarea.v-textarea-prompt { outline-width: medium; } -/* ./WebContent/VAADIN/themes/base/tree/tree.css */ .v-tree { text-align: left; /* Force default alignment */ overflow: hidden; @@ -1436,7 +1486,6 @@ div.v-tree-node-leaf { clear: left; } -/* ./WebContent/VAADIN/themes/base/upload/upload.css */ .v-upload-immediate { position: relative; width: 10em; @@ -1462,7 +1511,6 @@ div.v-tree-node-leaf { } -/* ./WebContent/VAADIN/themes/base/window/window.css */ .v-window { background: #fff; } @@ -1621,13 +1669,11 @@ div.v-tree-node-leaf { } /* Automatically compiled css file from subdirectories. */ -/* ./WebContent/VAADIN/themes/runo/absolutelayout/absolutelayout.css */ .v-absolutelayout-wrapper { position: absolute; overflow:hidden; } -/* ./WebContent/VAADIN/themes/runo/accordion/accordion.css */ .v-accordion-item { background-color: #fff; } @@ -1650,7 +1696,6 @@ div.v-tree-node-leaf { border-bottom: 1px solid #c8cccd; } -/* ./WebContent/VAADIN/themes/runo/button/button.css */ .v-button { font-size: 13px; } @@ -1673,7 +1718,6 @@ div.v-tree-node-leaf { padding-right: 5px; } -/* ./WebContent/VAADIN/themes/runo/caption/caption.css */ .v-captionwrapper { margin: 0.3em 0 0 0; } @@ -1690,7 +1734,6 @@ div.v-tree-node-leaf { margin-left: -3px; } -/* ./WebContent/VAADIN/themes/runo/common/common.css */ .v-generated-body { background: #e9eced; } @@ -1788,7 +1831,6 @@ div.v-tree-node-leaf { margin-right: 10px; } -/* ./WebContent/VAADIN/themes/runo/datefield/datefield.css */ .v-datefield-button { font-size:13px; width: 22px; @@ -1926,7 +1968,6 @@ div.v-tree-node-leaf { margin: 0; } -/* ./WebContent/VAADIN/themes/runo/formlayout/formlayout.css */ .v-formlayout-cell .v-errorindicator { width: 10px; height: 16px; @@ -1978,7 +2019,6 @@ div.v-tree-node-leaf { font-weight: bold; } -/* ./WebContent/VAADIN/themes/runo/gridlayout/gridlayout.css */ .v-gridlayout-margin-top { padding-top: 15px; } @@ -1996,12 +2036,10 @@ div.v-tree-node-leaf { padding-top: 8px; } -/* ./WebContent/VAADIN/themes/runo/link/link.css */ .v-link a { color: #464f52; } -/* ./WebContent/VAADIN/themes/runo/menubar/menubar.css */ .v-menubar { color: #464f52; border: 1px solid #c6cbcc; @@ -2035,7 +2073,6 @@ div.v-tree-node-leaf { background: #5daee8; } -/* ./WebContent/VAADIN/themes/runo/notification/notification.css */ .v-Notification { font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif; background-color: #818e92; @@ -2112,7 +2149,6 @@ div.v-tree-node-leaf { white-space: nowrap; } -/* ./WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.css */ .v-orderedlayout-margin-top, .v-horizontallayout-margin-top, .v-verticallayout-margin-top { @@ -2140,7 +2176,6 @@ div.v-tree-node-leaf { padding-left: 8px; } -/* ./WebContent/VAADIN/themes/runo/panel/panel.css */ .v-panel { background: transparent url(panel/img/top-left.png) no-repeat; } @@ -2241,7 +2276,6 @@ div.v-tree-node-leaf { overflow: hidden; } -/* ./WebContent/VAADIN/themes/runo/popupview/popupview.css */ .v-popupview-popup { border: 1px solid #babfc0; border-bottom: 1px solid #dee2e3; @@ -2249,7 +2283,6 @@ div.v-tree-node-leaf { padding: 3px; } -/* ./WebContent/VAADIN/themes/runo/progressindicator/progressindicator.css */ .v-progressindicator-wrapper { background: #dfe2e4 url(progressindicator/img/base.gif) repeat-x; border: 1px solid #b6bbbc; @@ -2270,7 +2303,6 @@ div.v-tree-node-leaf { background: #dfe2e4; } -/* ./WebContent/VAADIN/themes/runo/select/select.css */ .v-select-select { font-size: 13px; } @@ -2433,7 +2465,6 @@ div.v-tree-node-leaf { } */ -/* ./WebContent/VAADIN/themes/runo/shadow/shadow.css */ .v-shadow { position: absolute; } @@ -2503,7 +2534,6 @@ div.v-tree-node-leaf { background: transparent url(shadow/img/bottom-right.png); } -/* ./WebContent/VAADIN/themes/runo/slider/slider.css */ .v-slider { border-top: 1px solid #cccfd0; border-bottom: 1px solid #cccfd0; @@ -2588,7 +2618,6 @@ div.v-tree-node-leaf { margin: 0 -1px; } -/* ./WebContent/VAADIN/themes/runo/splitpanel/splitpanel.css */ .v-splitpanel-horizontal, .v-splitpanel-vertical { overflow: hidden; } @@ -2643,7 +2672,6 @@ div.v-tree-node-leaf { } -/* ./WebContent/VAADIN/themes/runo/table/table.css */ .v-table-header-wrap { height: 36px; border: 1px solid #b6bbbc; @@ -2786,7 +2814,6 @@ div.v-tree-node-leaf { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/VAADIN/themes/default/table/img/scroll-position-bg.png", sizingMethod="scale"); } -/* ./WebContent/VAADIN/themes/runo/tabsheet/tabsheet.css */ .v-tabsheet-tabs { height: 48px; } @@ -3057,7 +3084,6 @@ div.v-tree-node-leaf { height: 0; } -/* ./WebContent/VAADIN/themes/runo/textfield/textfield.css */ .v-textfield { background: #fff url(textfield/img/bg.png) repeat-x; padding: 2px; @@ -3095,7 +3121,6 @@ textarea.v-textarea-prompt { background: #fff url(textfield/img/bg.png) repeat-x; } -/* ./WebContent/VAADIN/themes/runo/tree/tree.css */ .v-tree-node { background: transparent url(tree/img/collapsed.png) no-repeat 2px 1px; } @@ -3123,7 +3148,6 @@ textarea.v-textarea-prompt { padding: 1px; } -/* ./WebContent/VAADIN/themes/runo/window/window.css */ .v-window { color: #464f52; font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif; diff --git a/WebContent/VAADIN/themes/sampler/sampler/styles.css b/WebContent/VAADIN/themes/sampler/sampler/styles.css index f675875c5d..63c0c264d5 100644 --- a/WebContent/VAADIN/themes/sampler/sampler/styles.css +++ b/WebContent/VAADIN/themes/sampler/sampler/styles.css @@ -111,14 +111,14 @@ text-decoration: none; } -.v-app-SamplerApplication .v-horizontallayout-topbar .v-button-link span { +.v-app-SamplerApplication .v-horizontallayout-topbar .v-nativebutton-link span { text-decoration: none; } -.v-app-SamplerApplication .v-horizontallayout-topbar .v-button-link:hover span { +.v-app-SamplerApplication .v-horizontallayout-topbar .v-nativebutton-link:hover span { text-decoration: underline; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button.v-disabled, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton.v-disabled, .v-app-SamplerApplication .v-horizontallayout-segment .v-popupview { width: 30px; height: 24px; @@ -128,50 +128,50 @@ background: transparent url(segment.png) no-repeat; cursor: default; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button:active, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button.v-pressed, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton:active, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton.v-pressed, .v-app-SamplerApplication .v-horizontallayout-segment .v-popupview:active { background-position: left bottom; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-tree-switch { +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch { background-position: right top; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next:active, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next.v-pressed, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next.v-disabled, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-tree-switch:active, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-tree-switch.v-pressed { +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next:active, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next.v-pressed, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next.v-disabled, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch:active, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch.v-pressed { background-position: right bottom; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-down { +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-down { background-position: right bottom; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button span, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton span, .v-app-SamplerApplication .v-horizontallayout-segment .v-popupview span, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button.v-pressed span, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button.v-disabled span { +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton.v-pressed span, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton.v-disabled span { display: block; height: 24px; background-repeat: no-repeat; background-position: 50% 30%; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-tree-switch span, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-tree-switch.v-pressed span { +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch span, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-tree-switch.v-pressed span { background-image: url(tree.png); } .v-app-SamplerApplication .v-horizontallayout-segment .v-popupview span { background-image: url(magnifier.png); background-position: 50% 40%; } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-previous span, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-previous.v-pressed span, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-previous.v-disabled span { +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-previous span, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-previous.v-pressed span, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-previous.v-disabled span { background-image: url(prev.png); } -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next span, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next.v-pressed span, -.v-app-SamplerApplication .v-horizontallayout-segment .v-button-next.v-disabled span { +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next span, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next.v-pressed span, +.v-app-SamplerApplication .v-horizontallayout-segment .v-nativebutton-next.v-disabled span { background-image: url(next.png); } .v-popupview-popup-quickjump { @@ -237,16 +237,16 @@ text-indent: 15px; padding-right: 20px; } -.v-app-SamplerApplication .v-button-screenshot { +.v-app-SamplerApplication .v-nativebutton-screenshot { border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; overflow: hidden; } -.v-app-SamplerApplication .v-button-screenshot:hover { +.v-app-SamplerApplication .v-nativebutton-screenshot:hover { border-color: #abc; } -.v-app-SamplerApplication .v-button-screenshot img.v-icon { +.v-app-SamplerApplication .v-nativebutton-screenshot img.v-icon { margin: 0; margin-top: -2px; margin-left: -3px; @@ -257,7 +257,7 @@ overflow: hidden; position: static; } -.v-ie .v-app-SamplerApplication .v-button-screenshot img.v-icon { +.v-ie .v-app-SamplerApplication .v-nativebutton-screenshot img.v-icon { margin-left: -12px; } @@ -453,9 +453,9 @@ .v-app-SamplerApplication .v-link-showcode { margin-left: 3px; } -.v-app-SamplerApplication div > .v-button-showcode, -.v-app-SamplerApplication div > .v-button-showcode:active, -.v-app-SamplerApplication div > .v-button-showcode:focus, +.v-app-SamplerApplication div > .v-nativebutton-showcode, +.v-app-SamplerApplication div > .v-nativebutton-showcode:active, +.v-app-SamplerApplication div > .v-nativebutton-showcode:focus, .v-app-SamplerApplication .v-link-showcode { font-family: arial, helvetica, verdana, sans-serif; display: inline; @@ -464,17 +464,17 @@ height: 20px; margin-right: 3px; } -.v-sa .v-app-SamplerApplication .v-button-showcode, +.v-sa .v-app-SamplerApplication .v-nativebutton-showcode, .v-sa .v-app-SamplerApplication .v-link-showcode { font-family: helvetica, arial, verdana, sans-serif; } -.v-app-SamplerApplication div > .v-button-showcode.v-button-link span, +.v-app-SamplerApplication div > .v-nativebutton-showcode.v-nativebutton-link span, .v-app-SamplerApplication .v-link-showcode span { color: #8b8e91; text-decoration: none; } -.v-app-SamplerApplication div > .v-button-showcode:hover span, -.v-app-SamplerApplication div > .v-button-showcode:active span, +.v-app-SamplerApplication div > .v-nativebutton-showcode:hover span, +.v-app-SamplerApplication div > .v-nativebutton-showcode:active span, .v-app-SamplerApplication .v-link-showcode:hover span { color: #62696f; text-decoration: underline; @@ -484,7 +484,7 @@ background: #fff; } -.v-app .v-customcomponent-ModeSwitch button.v-button { +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton { height: 24px; width: 30px; border: none; @@ -492,35 +492,35 @@ cursor: default; padding: 0; } -.v-app .v-customcomponent-ModeSwitch button.v-button span.v-button-caption { +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton span.v-nativebutton-caption { display: none; } -.v-app .v-customcomponent-ModeSwitch button.v-button img.v-icon { +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton img.v-icon { width: auto; height: auto; margin: 0; position: static; } -.v-app .v-customcomponent-ModeSwitch button.v-button-first-on, -.v-app .v-customcomponent-ModeSwitch button.v-button-first:active, -.v-app .v-customcomponent-ModeSwitch button.v-button-first.v-pressed { +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-first-on, +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-first:active, +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-first.v-pressed { background-position: left bottom; } -.v-app .v-customcomponent-ModeSwitch button.v-button-first { +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-first { background-position: left top; } /* -.v-customcomponent-ModeSwitch .v-button-mid-on { +.v-customcomponent-ModeSwitch .v-nativebutton-mid-on { background: transparent url(mid-on.gif) no-repeat; } -.v-customcomponent-ModeSwitch .v-button-mid { +.v-customcomponent-ModeSwitch .v-nativebutton-mid { background: transparent url(mid.gif) no-repeat; }*/ -.v-app .v-customcomponent-ModeSwitch button.v-button-last-on, -.v-app .v-customcomponent-ModeSwitch button.v-button-last:active, -.v-app .v-customcomponent-ModeSwitch button.v-button-last.v-pressed { +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-last-on, +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-last:active, +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-last.v-pressed { background-position: right bottom; } -.v-app .v-customcomponent-ModeSwitch button.v-button-last { +.v-app .v-customcomponent-ModeSwitch button.v-nativebutton-last { background-position: right top; } diff --git a/build/buildhelpers/com/vaadin/buildhelpers/CompileDefaultTheme.java b/build/buildhelpers/com/vaadin/buildhelpers/CompileDefaultTheme.java index 9e0455e474..96d5a3440a 100644 --- a/build/buildhelpers/com/vaadin/buildhelpers/CompileDefaultTheme.java +++ b/build/buildhelpers/com/vaadin/buildhelpers/CompileDefaultTheme.java @@ -41,6 +41,8 @@ public class CompileDefaultTheme { * inheritance). The order is the same in which the styles are * catenated. The resulted file is placed in the last specified * theme folder. + * + * @param * @throws IOException */ private static void combineTheme(String[] themeNames, @@ -54,53 +56,19 @@ public class CompileDefaultTheme { .append("/* Automatically compiled css file from subdirectories. */\n"); File[] subdir = f.listFiles(); - Arrays.sort(subdir, new Comparator() { - public int compare(Object arg0, Object arg1) { - return ((File) arg0).compareTo((File) arg1); + Arrays.sort(subdir, new Comparator<File>() { + public int compare(File arg0, File arg1) { + return arg0.compareTo(arg1); } }); for (int i = 0; i < subdir.length; i++) { File dir = subdir[i]; - String name = dir.getName(); - String filename = dir.getPath() + "/" + name + ".css"; - - File cssFile = new File(filename); - if (cssFile.isFile()) { - - combinedCss.append("\n"); - combinedCss.append("/* " + filename.replaceAll("\\\\", "/") - + " */"); - combinedCss.append("\n"); + String folder = dir.getName(); + String filename = dir.getPath() + "/" + folder + ".css"; - FileInputStream fstream = new FileInputStream(cssFile); - // Get the object of DataInputStream - DataInputStream in = new DataInputStream(fstream); - BufferedReader br = new BufferedReader( - new InputStreamReader(in)); - String strLine; - while ((strLine = br.readLine()) != null) { - // Define image url prefix - String urlPrefix = ""; - if (j < themeNames.length - 1) { - urlPrefix = "../" + themeNames[j] + "/"; - } - - if (strLine.indexOf("url(../") > 0) { - strLine = strLine.replaceAll("url\\(../", - ("url\\(" + urlPrefix)); - - } else { - strLine = strLine.replaceAll("url\\(", ("url\\(" - + urlPrefix + name + "/")); - - } - combinedCss.append(strLine); - combinedCss.append("\n"); - } - // Close the input stream - in.close(); - } + processCSSFile(new File(filename), folder, themeNames[j], + combinedCss, j < themeNames.length - 1); } } @@ -131,6 +99,68 @@ public class CompileDefaultTheme { } } + private static void processCSSFile(File cssFile, String folder, + String themeName, StringBuffer combinedCss, boolean inheritedFile) + throws FileNotFoundException, IOException { + if (cssFile.isFile()) { + + combinedCss.append("\n"); + + FileInputStream fstream = new FileInputStream(cssFile); + // Get the object of DataInputStream + DataInputStream in = new DataInputStream(fstream); + BufferedReader br = new BufferedReader(new InputStreamReader(in)); + String strLine; + while ((strLine = br.readLine()) != null) { + + // Parse import rules + if (strLine.startsWith("@import")) { + // All import statements must be exactly + // @import "file-to-import.css"; + // No sub-directories are allowed in the url + String importFilename = strLine.split("\"")[1]; + + File importFile = new File(THEME_DIR + themeName + "/" + + folder + "/" + importFilename); + if (importFile.isFile()) { + processCSSFile(importFile, folder, themeName, + combinedCss, inheritedFile); + } else { + System.out + .println("File not found for @import statement " + + THEME_DIR + + themeName + + "/" + + folder + + "/" + importFilename); + } + } + + // Define image url prefix + String urlPrefix = ""; + if (inheritedFile) { + urlPrefix = "../" + themeName + "/"; + } + + if (strLine.indexOf("url(../") > 0) { + strLine = strLine.replaceAll("url\\(../", + ("url\\(" + urlPrefix)); + + } else { + strLine = strLine.replaceAll("url\\(", ("url\\(" + + urlPrefix + folder + "/")); + + } + if (!strLine.startsWith("@import")) { + combinedCss.append(strLine); + combinedCss.append("\n"); + } + } + // Close the input stream + in.close(); + } + } + private static void createSprites(String themeName) throws FileNotFoundException, IOException { String[] parameters = new String[] { "--sprite-png-depth", "AUTO", diff --git a/src/com/vaadin/demo/sampler/ModeSwitch.java b/src/com/vaadin/demo/sampler/ModeSwitch.java index 738f9f07cb..62a1ab8ef4 100644 --- a/src/com/vaadin/demo/sampler/ModeSwitch.java +++ b/src/com/vaadin/demo/sampler/ModeSwitch.java @@ -7,6 +7,7 @@ import com.vaadin.terminal.Resource; import com.vaadin.ui.Button; import com.vaadin.ui.CustomComponent; import com.vaadin.ui.GridLayout; +import com.vaadin.ui.NativeButton; import com.vaadin.ui.Button.ClickEvent; @SuppressWarnings("serial") @@ -45,7 +46,7 @@ public class ModeSwitch extends CustomComponent { if (idToButton.containsKey(id)) { removeMode(id); } - Button b = new Button(); + Button b = new NativeButton(); if (caption != null) { b.setCaption(caption); } diff --git a/src/com/vaadin/demo/sampler/SamplerApplication.java b/src/com/vaadin/demo/sampler/SamplerApplication.java index 2b5fc4a8ac..85978c16da 100644 --- a/src/com/vaadin/demo/sampler/SamplerApplication.java +++ b/src/com/vaadin/demo/sampler/SamplerApplication.java @@ -30,6 +30,7 @@ import com.vaadin.ui.Embedded; import com.vaadin.ui.GridLayout; import com.vaadin.ui.HorizontalLayout; import com.vaadin.ui.Label; +import com.vaadin.ui.NativeButton; import com.vaadin.ui.Panel; import com.vaadin.ui.PopupView; import com.vaadin.ui.SplitPanel; @@ -358,7 +359,7 @@ public class SamplerApplication extends Application { } private Component createLogo() { - Button logo = new Button("", new Button.ClickListener() { + Button logo = new NativeButton("", new Button.ClickListener() { public void buttonClick(ClickEvent event) { setFeature((Feature) null); } @@ -371,7 +372,7 @@ public class SamplerApplication extends Application { } private Button createNextButton() { - Button b = new Button("", new ClickListener() { + Button b = new NativeButton("", new ClickListener() { public void buttonClick(ClickEvent event) { Object curr = currentFeature.getValue(); Object next = allFeatures.nextItemId(curr); @@ -392,7 +393,7 @@ public class SamplerApplication extends Application { } private Button createPrevButton() { - Button b = new Button("", new ClickListener() { + Button b = new NativeButton("", new ClickListener() { public void buttonClick(ClickEvent event) { Object curr = currentFeature.getValue(); Object prev = allFeatures.prevItemId(curr); @@ -409,7 +410,7 @@ public class SamplerApplication extends Application { } private Component createTreeSwitch() { - final Button b = new Button(); + final Button b = new NativeButton(); b.setStyleName("tree-switch"); b.setDescription("Toggle sample tree visibility"); b.addListener(new Button.ClickListener() { @@ -716,7 +717,7 @@ public class SamplerApplication extends Application { if (grid.getCursorX() == 0) { grid.space(); } - Button b = new Button(); + Button b = new NativeButton(); b.setStyleName(Button.STYLE_LINK); b.addStyleName("screenshot"); String resId = "75-" + f.getIconName(); diff --git a/src/com/vaadin/terminal/gwt/client/ApplicationConnection.java b/src/com/vaadin/terminal/gwt/client/ApplicationConnection.java index a6965b2693..69174587a6 100755 --- a/src/com/vaadin/terminal/gwt/client/ApplicationConnection.java +++ b/src/com/vaadin/terminal/gwt/client/ApplicationConnection.java @@ -1108,10 +1108,11 @@ public class ApplicationConnection { boolean enabled = !uidl.getBooleanAttribute("disabled"); if (component instanceof FocusWidget) { FocusWidget fw = (FocusWidget) component; - fw.setEnabled(enabled); if (uidl.hasAttribute("tabindex")) { fw.setTabIndex(uidl.getIntAttribute("tabindex")); } + // Disabled state may affect tabindex + fw.setEnabled(enabled); } StringBuffer styleBuf = new StringBuffer(); diff --git a/src/com/vaadin/terminal/gwt/client/DefaultWidgetSet.java b/src/com/vaadin/terminal/gwt/client/DefaultWidgetSet.java index 9ac2337004..f72859dbfb 100644 --- a/src/com/vaadin/terminal/gwt/client/DefaultWidgetSet.java +++ b/src/com/vaadin/terminal/gwt/client/DefaultWidgetSet.java @@ -22,6 +22,7 @@ import com.vaadin.terminal.gwt.client.ui.VLabel; import com.vaadin.terminal.gwt.client.ui.VLink; import com.vaadin.terminal.gwt.client.ui.VListSelect; import com.vaadin.terminal.gwt.client.ui.VMenuBar; +import com.vaadin.terminal.gwt.client.ui.VNativeButton; import com.vaadin.terminal.gwt.client.ui.VNativeSelect; import com.vaadin.terminal.gwt.client.ui.VOptionGroup; import com.vaadin.terminal.gwt.client.ui.VOrderedLayout; @@ -64,6 +65,8 @@ public class DefaultWidgetSet implements WidgetSet { return new VCheckBox(); } else if (VButton.class == classType) { return new VButton(); + } else if (VNativeButton.class == classType) { + return new VNativeButton(); } else if (VWindow.class == classType) { return new VWindow(); } else if (VOrderedLayout.class == classType) { @@ -150,9 +153,11 @@ public class DefaultWidgetSet implements WidgetSet { protected Class resolveWidgetType(UIDL uidl) { final String tag = uidl.getTag(); - if ("button".equals(tag)) { + if ("button".equals(tag) || "nativebutton".equals(tag)) { if ("switch".equals(uidl.getStringAttribute("type"))) { return VCheckBox.class; + } else if ("nativebutton".equals(tag)) { + return VNativeButton.class; } else { return VButton.class; } diff --git a/src/com/vaadin/terminal/gwt/client/ui/VButton.java b/src/com/vaadin/terminal/gwt/client/ui/VButton.java index 768b98727b..b3213b1b8f 100644 --- a/src/com/vaadin/terminal/gwt/client/ui/VButton.java +++ b/src/com/vaadin/terminal/gwt/client/ui/VButton.java @@ -4,14 +4,15 @@ package com.vaadin.terminal.gwt.client.ui; -import com.google.gwt.user.client.Command; +import com.google.gwt.dom.client.Document; +import com.google.gwt.dom.client.Element; +import com.google.gwt.dom.client.NativeEvent; +import com.google.gwt.event.dom.client.ClickEvent; +import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.user.client.DOM; -import com.google.gwt.user.client.DeferredCommand; -import com.google.gwt.user.client.Element; import com.google.gwt.user.client.Event; -import com.google.gwt.user.client.ui.Button; -import com.google.gwt.user.client.ui.ClickListener; -import com.google.gwt.user.client.ui.Widget; +import com.google.gwt.user.client.ui.Accessibility; +import com.google.gwt.user.client.ui.FocusWidget; import com.vaadin.terminal.gwt.client.ApplicationConnection; import com.vaadin.terminal.gwt.client.BrowserInfo; import com.vaadin.terminal.gwt.client.Paintable; @@ -19,70 +20,86 @@ import com.vaadin.terminal.gwt.client.UIDL; import com.vaadin.terminal.gwt.client.Util; import com.vaadin.terminal.gwt.client.VTooltip; -public class VButton extends Button implements Paintable { - - private String width = null; +public class VButton extends FocusWidget implements Paintable { public static final String CLASSNAME = "v-button"; + private static final String CLASSNAME_PRESSED = "v-pressed"; - // Used only for IE, because it doesn't support :active CSS selector - private static final String CLASSNAME_DOWN = "v-pressed"; - - private String primaryStyleName; + protected String id; - String id; + protected ApplicationConnection client; - ApplicationConnection client; + protected final Element wrapper = DOM.createSpan(); - private Element errorIndicatorElement; + protected Element errorIndicatorElement; - private final Element captionElement = DOM.createSpan(); + protected final Element captionElement = DOM.createSpan(); - private Icon icon; + protected Icon icon; /** - * Helper flat to handle special-case where the button is moved from under + * Helper flag to handle special-case where the button is moved from under * mouse while clicking it. In this case mouse leaves the button without * moving. */ private boolean clickPending; + /* + * BELOW PRIVATE MEMBERS COPY-PASTED FROM GWT CustomButton + */ + + /** + * If <code>true</code>, this widget is capturing with the mouse held down. + */ + private boolean isCapturing; + + /** + * If <code>true</code>, this widget has focus with the space bar down. + */ + private boolean isFocusing; + + /** + * Used to decide whether to allow clicks to propagate up to the superclass + * or container elements. + */ + private boolean allowClick; + private boolean isHovering; + private boolean enabled = true; + private int tabIndex = 0; + public VButton() { + super(DOM.createDiv()); + setTabIndex(0); + sinkEvents(Event.ONCLICK | Event.MOUSEEVENTS | Event.FOCUSEVENTS + | Event.KEYEVENTS); + sinkEvents(VTooltip.TOOLTIP_EVENTS); + setStyleName(CLASSNAME); - DOM.appendChild(getElement(), captionElement); - captionElement.setPropertyString("className", CLASSNAME + "-caption"); + // Add a11y role "button" + Accessibility.setRole(getElement(), Accessibility.ROLE_BUTTON); - addClickListener(new ClickListener() { - public void onClick(Widget sender) { + wrapper.setClassName(CLASSNAME + "-wrap"); + getElement().appendChild(wrapper); + captionElement.setClassName(CLASSNAME + "-caption"); + wrapper.appendChild(captionElement); + + addClickHandler(new ClickHandler() { + public void onClick(ClickEvent event) { if (id == null || client == null) { return; } - /* - * TODO isolate workaround. Safari don't always seem to fire - * onblur previously focused component before button is clicked. - */ - VButton.this.setFocus(true); + if (BrowserInfo.get().isSafari()) { + VButton.this.setFocus(true); + } client.updateVariable(id, "state", true, true); clickPending = false; } }); - sinkEvents(VTooltip.TOOLTIP_EVENTS); - sinkEvents(Event.ONMOUSEDOWN); - sinkEvents(Event.ONMOUSEUP); } public void updateFromUIDL(UIDL uidl, ApplicationConnection client) { - // client.updateComponent depends on this, so this must come before - if (uidl.hasAttribute("primarystyle") - && primaryStyleName != uidl.getStringAttribute("primarystyle")) { - primaryStyleName = uidl.getStringAttribute("primarystyle"); - setStyleName(primaryStyleName); - captionElement.setPropertyString("className", getStylePrimaryName() - + "-caption"); - } - // Ensure correct implementation, // but don't let container manage caption etc. if (client.updateComponent(this, uidl, false)) { @@ -100,115 +117,321 @@ public class VButton extends Button implements Paintable { if (uidl.hasAttribute("error")) { if (errorIndicatorElement == null) { errorIndicatorElement = DOM.createSpan(); - DOM.setElementProperty(errorIndicatorElement, "className", - "v-errorindicator"); + errorIndicatorElement.setClassName("v-errorindicator"); } - DOM.insertChild(getElement(), errorIndicatorElement, 0); + wrapper.insertBefore(errorIndicatorElement, captionElement); // Fix for IE6, IE7 - if (BrowserInfo.get().isIE()) { - DOM.setInnerText(errorIndicatorElement, " "); + if (BrowserInfo.get().isIE6() || BrowserInfo.get().isIE7()) { + errorIndicatorElement.setInnerText(" "); } } else if (errorIndicatorElement != null) { - DOM.removeChild(getElement(), errorIndicatorElement); + wrapper.removeChild(errorIndicatorElement); errorIndicatorElement = null; } - if (uidl.hasAttribute("readonly")) { - setEnabled(false); - } - if (uidl.hasAttribute("icon")) { if (icon == null) { icon = new Icon(client); - DOM.insertChild(getElement(), icon.getElement(), 0); + wrapper.insertBefore(icon.getElement(), captionElement); } icon.setUri(uidl.getStringAttribute("icon")); } else { if (icon != null) { - DOM.removeChild(getElement(), icon.getElement()); + wrapper.removeChild(icon.getElement()); icon = null; } } - if (BrowserInfo.get().isIE7()) { - /* - * Workaround for IE7 size calculation issues. Deferred because of - * issues with a button with an icon using the reindeer theme - */ - if (width.equals("")) { - DeferredCommand.addCommand(new Command() { - - public void execute() { - setWidth(""); - setWidth(getOffsetWidth() + "px"); - } - }); - } - } } - @Override public void setText(String text) { - DOM.setInnerText(captionElement, text); + captionElement.setInnerText(text); } + @SuppressWarnings("deprecation") @Override + /* + * Copy-pasted from GWT CustomButton, some minor modifications done: + * + * -for IE/Opera added CLASSNAME_PRESSED + * + * -event.preventDefault() commented from ONMOUSEDOWN (Firefox won't apply + * :active styles if it is present) + * + * -Tooltip event handling added + * + * -onload event handler added (for icon handling) + */ public void onBrowserEvent(Event event) { - super.onBrowserEvent(event); - + if (client != null) { + client.handleTooltipEvent(event, this); + } if (DOM.eventGetType(event) == Event.ONLOAD) { Util.notifyParentOfSizeChange(this, true); + } + // Should not act on button if disabled. + if (!isEnabled()) { + // This can happen when events are bubbled up from non-disabled + // children + return; + } - } else if (DOM.eventGetType(event) == Event.ONMOUSEDOWN - && event.getButton() == Event.BUTTON_LEFT) { - clickPending = true; - if (BrowserInfo.get().isIE()) { - // Only for IE, because it doesn't support :active CSS selector - // Simple check is cheaper than DOM manipulation - addStyleName(CLASSNAME_DOWN); + int type = DOM.eventGetType(event); + switch (type) { + case Event.ONCLICK: + // If clicks are currently disallowed, keep it from bubbling or + // being passed to the superclass. + if (!allowClick) { + event.stopPropagation(); + return; } - } else if (DOM.eventGetType(event) == Event.ONMOUSEMOVE) { - clickPending = false; - } else if (DOM.eventGetType(event) == Event.ONMOUSEOUT) { - if (clickPending) { - click(); + break; + case Event.ONMOUSEDOWN: + if (event.getButton() == Event.BUTTON_LEFT) { + clickPending = true; + setFocus(true); + DOM.setCapture(getElement()); + isCapturing = true; + // Prevent dragging (on some browsers); + // DOM.eventPreventDefault(event); + if (BrowserInfo.get().isIE() || BrowserInfo.get().isOpera()) { + addStyleName(CLASSNAME_PRESSED); + } } - if (BrowserInfo.get().isIE()) { - removeStyleName(CLASSNAME_DOWN); + break; + case Event.ONMOUSEUP: + if (isCapturing) { + isCapturing = false; + DOM.releaseCapture(getElement()); + if (isHovering() && event.getButton() == Event.BUTTON_LEFT) { + onClick(); + } + if (BrowserInfo.get().isIE() || BrowserInfo.get().isOpera()) { + removeStyleName(CLASSNAME_PRESSED); + } } + break; + case Event.ONMOUSEMOVE: clickPending = false; - } else if (DOM.eventGetType(event) == Event.ONMOUSEUP) { - if (BrowserInfo.get().isIE()) { - removeStyleName(CLASSNAME_DOWN); + if (isCapturing) { + // Prevent dragging (on other browsers); + DOM.eventPreventDefault(event); + } + break; + case Event.ONMOUSEOUT: + Element to = event.getRelatedTarget(); + if (getElement().isOrHasChild(DOM.eventGetTarget(event)) + && (to == null || !getElement().isOrHasChild(to))) { + if (clickPending) { + onClick(); + break; + } + clickPending = false; + if (isCapturing) { + } + setHovering(false); + if (BrowserInfo.get().isIE() || BrowserInfo.get().isOpera()) { + removeStyleName(CLASSNAME_PRESSED); + } + } + break; + case Event.ONMOUSEOVER: + if (DOM.isOrHasChild(getElement(), DOM.eventGetTarget(event))) { + setHovering(true); + if (isCapturing) { + } + } + break; + case Event.ONBLUR: + if (isFocusing) { + isFocusing = false; } + break; + case Event.ONLOSECAPTURE: + if (isCapturing) { + isCapturing = false; + } + break; } - if (client != null) { - client.handleTooltipEvent(event, this); + super.onBrowserEvent(event); + + // Synthesize clicks based on keyboard events AFTER the normal key + // handling. + if ((event.getTypeInt() & Event.KEYEVENTS) != 0) { + char keyCode = (char) DOM.eventGetKeyCode(event); + switch (type) { + case Event.ONKEYDOWN: + if (keyCode == ' ') { + isFocusing = true; + event.preventDefault(); + } + break; + case Event.ONKEYUP: + if (isFocusing && keyCode == ' ') { + isFocusing = false; + onClick(); + event.preventDefault(); + } + break; + case Event.ONKEYPRESS: + if (keyCode == '\n' || keyCode == '\r') { + onClick(); + event.preventDefault(); + } + break; + } + } + } + + final void setHovering(boolean hovering) { + if (hovering != isHovering()) { + isHovering = hovering; } } + final boolean isHovering() { + return isHovering; + } + + /* + * ALL BELOW COPY-PASTED FROM GWT CustomButton + */ + + /** + * Called when the user finishes clicking on this button. The default + * behavior is to fire the click event to listeners. Subclasses that + * override {@link #onClickStart()} should override this method to restore + * the normal widget display. + */ + protected void onClick() { + // Allow the click we're about to synthesize to pass through to the + // superclass and containing elements. Element.dispatchEvent() is + // synchronous, so we simply set and clear the flag within this method. + allowClick = true; + + // Mouse coordinates are not always available (e.g., when the click is + // caused by a keyboard event). + NativeEvent evt = Document.get().createClickEvent(1, 0, 0, 0, 0, false, + false, false, false); + getElement().dispatchEvent(evt); + + allowClick = false; + } + + /** + * Sets whether this button is enabled. + * + * @param enabled + * <code>true</code> to enable the button, <code>false</code> to + * disable it + */ + @Override - public void setWidth(String width) { - /* Workaround for IE7 button size part 1 (#2014) */ - if (BrowserInfo.get().isIE7() && this.width != null) { - if (this.width.equals(width)) { - return; + public final void setEnabled(boolean enabled) { + if (isEnabled() != enabled) { + this.enabled = enabled; + if (!enabled) { + cleanupCaptureState(); + Accessibility.removeState(getElement(), + Accessibility.STATE_PRESSED); + super.setTabIndex(-1); + } else { + Accessibility.setState(getElement(), + Accessibility.STATE_PRESSED, "false"); + super.setTabIndex(tabIndex); } + } + } - if (width == null) { - width = ""; - } + @Override + public final boolean isEnabled() { + return enabled; + } + + @Override + public final void setTabIndex(int index) { + super.setTabIndex(index); + tabIndex = index; + } + + /** + * Resets internal state if this button can no longer service events. This + * can occur when the widget becomes detached or disabled. + */ + private void cleanupCaptureState() { + if (isCapturing || isFocusing) { + DOM.releaseCapture(getElement()); + isCapturing = false; + isFocusing = false; } + } - this.width = width; + @Override + public void setWidth(String width) { + if (BrowserInfo.get().isIE6() || BrowserInfo.get().isIE7()) { + if (width != null && width.length() > 2) { + // Assume pixel values are always sent from + // ApplicationConnection + int w = Integer + .parseInt(width.substring(0, width.length() - 2)); + w -= getHorizontalBorderAndPaddingWidth(getElement()); + width = w + "px"; + } + } super.setWidth(width); + } - /* Workaround for IE7 button size part 2 (#2014) */ - if (BrowserInfo.get().isIE7()) { - super.setWidth(width); + private static native int getHorizontalBorderAndPaddingWidth(Element elem) + /*-{ + // THIS METHOD IS ONLY USED FOR INTERNET EXPLORER, IT DOESN'T WORK WITH OTHERS + + var convertToPixel = function(elem, value) { + // From the awesome hack by Dean Edwards + // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 + + // Remember the original values + var left = style.left, rsLeft = elem.runtimeStyle.left; + + // Put in the new values to get a computed value out + elem.runtimeStyle.left = elem.currentStyle.left; + style.left = value || 0; + var ret = style.pixelLeft; + + // Revert the changed values + style.left = left; + elem.runtimeStyle.left = rsLeft; + + return ret; + } + + var ret = 0; + + var sides = ["Right","Left"]; + for(var i=0; i<2; i++) { + var side = sides[i]; + var value; + // Border ------------------------------------------------------- + if(elem.currentStyle["border"+side+"Style"] != "none") { + value = elem.currentStyle["border"+side+"Width"]; + if ( !/^\d+(px)?$/i.test( value ) && /^\d/.test( value ) ) { + ret += convertToPixel(elem, value); + } else if(value.length > 2) { + ret += parseInt(value.substr(0, value.length-2)); + } + } + + // Padding ------------------------------------------------------- + value = elem.currentStyle["padding"+side]; + if ( !/^\d+(px)?$/i.test( value ) && /^\d/.test( value ) ) { + ret += convertToPixel(elem, value); + } else if(value.length > 2) { + ret += parseInt(value.substr(0, value.length-2)); + } } - } + + return ret; + }-*/; } diff --git a/src/com/vaadin/terminal/gwt/client/ui/VCalendarPanel.java b/src/com/vaadin/terminal/gwt/client/ui/VCalendarPanel.java index 8d688c2ed9..f1f640653e 100644 --- a/src/com/vaadin/terminal/gwt/client/ui/VCalendarPanel.java +++ b/src/com/vaadin/terminal/gwt/client/ui/VCalendarPanel.java @@ -394,7 +394,8 @@ public class VCalendarPanel extends FlexTable implements MouseListener { processClickEvent(sender, true);
}
- private class VEventButton extends VButton implements SourcesMouseEvents {
+ private class VEventButton extends VNativeButton implements
+ SourcesMouseEvents {
private MouseListenerCollection mouseListeners;
@@ -404,6 +405,7 @@ public class VCalendarPanel extends FlexTable implements MouseListener { | Event.MOUSEEVENTS);
}
+ @Override
public void addMouseListener(MouseListener listener) {
if (mouseListeners == null) {
mouseListeners = new MouseListenerCollection();
@@ -411,6 +413,7 @@ public class VCalendarPanel extends FlexTable implements MouseListener { mouseListeners.add(listener);
}
+ @Override
public void removeMouseListener(MouseListener listener) {
if (mouseListeners != null) {
mouseListeners.remove(listener);
diff --git a/src/com/vaadin/terminal/gwt/client/ui/VNativeButton.java b/src/com/vaadin/terminal/gwt/client/ui/VNativeButton.java new file mode 100644 index 0000000000..e544e1f9ce --- /dev/null +++ b/src/com/vaadin/terminal/gwt/client/ui/VNativeButton.java @@ -0,0 +1,182 @@ +/* +@ITMillApache2LicenseForJavaFiles@ + */ + +package com.vaadin.terminal.gwt.client.ui; + +import com.google.gwt.dom.client.Element; +import com.google.gwt.event.dom.client.ClickEvent; +import com.google.gwt.event.dom.client.ClickHandler; +import com.google.gwt.user.client.Command; +import com.google.gwt.user.client.DOM; +import com.google.gwt.user.client.DeferredCommand; +import com.google.gwt.user.client.Event; +import com.google.gwt.user.client.ui.Button; +import com.vaadin.terminal.gwt.client.ApplicationConnection; +import com.vaadin.terminal.gwt.client.BrowserInfo; +import com.vaadin.terminal.gwt.client.Paintable; +import com.vaadin.terminal.gwt.client.UIDL; +import com.vaadin.terminal.gwt.client.Util; +import com.vaadin.terminal.gwt.client.VTooltip; + +public class VNativeButton extends Button implements Paintable { + + public static final String CLASSNAME = "v-nativebutton"; + + protected String width = null; + + protected String id; + + protected ApplicationConnection client; + + protected Element errorIndicatorElement; + + protected final Element captionElement = DOM.createSpan(); + + protected Icon icon; + + /** + * Helper flag to handle special-case where the button is moved from under + * mouse while clicking it. In this case mouse leaves the button without + * moving. + */ + private boolean clickPending; + + public VNativeButton() { + setStyleName(CLASSNAME); + + getElement().appendChild(captionElement); + captionElement.setClassName(getStyleName() + "-caption"); + + addClickHandler(new ClickHandler() { + public void onClick(ClickEvent event) { + if (id == null || client == null) { + return; + } + if (BrowserInfo.get().isSafari()) { + VNativeButton.this.setFocus(true); + } + client.updateVariable(id, "state", true, true); + clickPending = false; + } + }); + sinkEvents(VTooltip.TOOLTIP_EVENTS); + sinkEvents(Event.ONMOUSEDOWN); + sinkEvents(Event.ONMOUSEUP); + } + + public void updateFromUIDL(UIDL uidl, ApplicationConnection client) { + + // Ensure correct implementation, + // but don't let container manage caption etc. + if (client.updateComponent(this, uidl, false)) { + return; + } + + // Save details + this.client = client; + id = uidl.getId(); + + // Set text + setText(uidl.getStringAttribute("caption")); + + // handle error + if (uidl.hasAttribute("error")) { + if (errorIndicatorElement == null) { + errorIndicatorElement = DOM.createSpan(); + errorIndicatorElement.setClassName("v-errorindicator"); + } + getElement().insertBefore(errorIndicatorElement, captionElement); + + // Fix for IE6, IE7 + if (BrowserInfo.get().isIE()) { + errorIndicatorElement.setInnerText(" "); + } + + } else if (errorIndicatorElement != null) { + getElement().removeChild(errorIndicatorElement); + errorIndicatorElement = null; + } + + if (uidl.hasAttribute("icon")) { + if (icon == null) { + icon = new Icon(client); + getElement().insertBefore(icon.getElement(), captionElement); + } + icon.setUri(uidl.getStringAttribute("icon")); + } else { + if (icon != null) { + getElement().removeChild(icon.getElement()); + icon = null; + } + } + + if (BrowserInfo.get().isIE7()) { + /* + * Workaround for IE7 size calculation issues. Deferred because of + * issues with a button with an icon using the reindeer theme + */ + if (width.equals("")) { + DeferredCommand.addCommand(new Command() { + + public void execute() { + setWidth(""); + setWidth(getOffsetWidth() + "px"); + } + }); + } + } + } + + @Override + public void setText(String text) { + captionElement.setInnerText(text); + } + + @Override + public void onBrowserEvent(Event event) { + super.onBrowserEvent(event); + + if (DOM.eventGetType(event) == Event.ONLOAD) { + Util.notifyParentOfSizeChange(this, true); + + } else if (DOM.eventGetType(event) == Event.ONMOUSEDOWN + && event.getButton() == Event.BUTTON_LEFT) { + clickPending = true; + } else if (DOM.eventGetType(event) == Event.ONMOUSEMOVE) { + clickPending = false; + } else if (DOM.eventGetType(event) == Event.ONMOUSEOUT) { + if (clickPending) { + click(); + } + clickPending = false; + } + + if (client != null) { + client.handleTooltipEvent(event, this); + } + } + + @Override + public void setWidth(String width) { + /* Workaround for IE7 button size part 1 (#2014) */ + if (BrowserInfo.get().isIE7() && this.width != null) { + if (this.width.equals(width)) { + return; + } + + if (width == null) { + width = ""; + } + } + + this.width = width; + super.setWidth(width); + + /* Workaround for IE7 button size part 2 (#2014) */ + if (BrowserInfo.get().isIE7()) { + super.setWidth(width); + } + } + +} diff --git a/src/com/vaadin/terminal/gwt/client/ui/VOptionGroupBase.java b/src/com/vaadin/terminal/gwt/client/ui/VOptionGroupBase.java index d10bcc6cfa..4d4ba4e579 100644 --- a/src/com/vaadin/terminal/gwt/client/ui/VOptionGroupBase.java +++ b/src/com/vaadin/terminal/gwt/client/ui/VOptionGroupBase.java @@ -58,7 +58,7 @@ abstract class VOptionGroupBase extends Composite implements Paintable, Field, private VTextField newItemField;
- private VButton newItemButton;
+ private VNativeButton newItemButton;
public VOptionGroupBase(String classname) {
container = new FlowPanel();
@@ -155,7 +155,7 @@ abstract class VOptionGroupBase extends Composite implements Paintable, Field, if (uidl.getBooleanAttribute("allownewitem")) {
if (newItemField == null) {
- newItemButton = new VButton();
+ newItemButton = new VNativeButton();
newItemButton.setText("+");
newItemButton.addClickListener(this);
newItemField = new VTextField();
diff --git a/src/com/vaadin/tests/themes/ButtonsTest.java b/src/com/vaadin/tests/themes/ButtonsTest.java new file mode 100644 index 0000000000..9ad2a9f39e --- /dev/null +++ b/src/com/vaadin/tests/themes/ButtonsTest.java @@ -0,0 +1,158 @@ +package com.vaadin.tests.themes; + +import com.vaadin.terminal.ThemeResource; +import com.vaadin.terminal.UserError; +import com.vaadin.ui.Button; +import com.vaadin.ui.CheckBox; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Layout; +import com.vaadin.ui.NativeButton; +import com.vaadin.ui.Window; +import com.vaadin.ui.Button.ClickEvent; + +@SuppressWarnings("serial") +public class ButtonsTest extends com.vaadin.Application { + + final Window main = new Window("Button states & themes"); + + CheckBox styleToggle; + CheckBox iconToggle; + CheckBox nativeToggle; + CheckBox themeToggle; + boolean largeIcons = false; + boolean nativeButtons = false; + + final HorizontalLayout toggles = new HorizontalLayout(); + + @Override + public void init() { + setMainWindow(main); + setTheme("reindeer"); + + themeToggle = new CheckBox("Runo theme", new Button.ClickListener() { + public void buttonClick(ClickEvent event) { + if (getTheme() == "reindeer") { + setTheme("runo"); + } else { + setTheme("reindeer"); + } + } + }); + themeToggle.setStyleName("small"); + themeToggle.setImmediate(true); + + styleToggle = new CheckBox("Black style", new Button.ClickListener() { + public void buttonClick(ClickEvent event) { + if (!main.getContent().getStyleName().contains("black")) { + main.getContent().setStyleName("black"); + } else { + main.getContent().setStyleName(""); + } + } + }); + styleToggle.setImmediate(true); + styleToggle.setStyleName("small"); + + iconToggle = new CheckBox("64x icons", new Button.ClickListener() { + public void buttonClick(ClickEvent event) { + largeIcons = !largeIcons; + recreateAll(); + } + }); + iconToggle.setImmediate(true); + iconToggle.setStyleName("small"); + + nativeToggle = new CheckBox("Native buttons", + new Button.ClickListener() { + public void buttonClick(ClickEvent event) { + nativeButtons = !nativeButtons; + recreateAll(); + } + }); + nativeToggle.setImmediate(true); + nativeToggle.setStyleName("small"); + + toggles.setSpacing(true); + toggles.addComponent(themeToggle); + toggles.addComponent(styleToggle); + toggles.addComponent(iconToggle); + toggles.addComponent(nativeToggle); + main.addComponent(toggles); + + recreateAll(); + + } + + private void recreateAll() { + main.removeAllComponents(); + main.addComponent(toggles); + + main.addComponent(buildButtons(false, false, false, false)); + main.addComponent(buildButtons(false, false, true, false)); + main.addComponent(buildButtons(false, true, false, false)); + main.addComponent(buildButtons(false, true, true, false)); + main.addComponent(buildButtons(true, false, false, false)); + main.addComponent(buildButtons(true, false, true, false)); + main.addComponent(buildButtons(true, true, false, false)); + main.addComponent(buildButtons(true, true, true, false)); + + main.addComponent(buildButtons(false, false, false, true)); + main.addComponent(buildButtons(false, false, true, true)); + main.addComponent(buildButtons(false, true, false, true)); + main.addComponent(buildButtons(false, true, true, true)); + main.addComponent(buildButtons(true, false, false, true)); + main.addComponent(buildButtons(true, false, true, true)); + main.addComponent(buildButtons(true, true, false, true)); + main.addComponent(buildButtons(true, true, true, true)); + + final Button b = new Button("Tabindex"); + b.setTabIndex(1); + main.addComponent(b); + + Button c = new Button("toggle enabled", new Button.ClickListener() { + public void buttonClick(ClickEvent event) { + b.setEnabled(!b.isEnabled()); + } + }); + main.addComponent(c); + } + + private Layout buildButtons(boolean disabled, boolean icon, boolean error, + boolean sized) { + + String[] buttonStyles = new String[] { "Normal", "Primary", "Small", + "Link" }; + + HorizontalLayout hl = new HorizontalLayout(); + hl.setSpacing(true); + hl.setMargin(true); + + for (int i = 0; i < buttonStyles.length; i++) { + Button b; + if (nativeButtons) { + b = new NativeButton(buttonStyles[i] + " style"); + } else { + b = new Button(buttonStyles[i] + " style"); + } + b.setStyleName(buttonStyles[i].toLowerCase()); + if (icon) { + b.setIcon(new ThemeResource("../runo/icons/" + + (largeIcons ? "64" : "16") + "/document.png")); + } + if (error) { + b.setComponentError(new UserError("Error")); + } + if (disabled) { + b.setEnabled(false); + } + if (sized) { + b.setWidth("250px"); + b.setCaption(b.getCaption() + " (250px)"); + } + hl.addComponent(b); + } + + return hl; + } + +}
\ No newline at end of file diff --git a/src/com/vaadin/tests/themes/ReindeerButtonsTest.java b/src/com/vaadin/tests/themes/ReindeerButtonsTest.java deleted file mode 100644 index 952b7ffd1c..0000000000 --- a/src/com/vaadin/tests/themes/ReindeerButtonsTest.java +++ /dev/null @@ -1,82 +0,0 @@ -package com.vaadin.tests.themes; - -import com.vaadin.terminal.ThemeResource; -import com.vaadin.terminal.UserError; -import com.vaadin.ui.Button; -import com.vaadin.ui.HorizontalLayout; -import com.vaadin.ui.Layout; -import com.vaadin.ui.Window; -import com.vaadin.ui.Button.ClickEvent; - -@SuppressWarnings("serial") -public class ReindeerButtonsTest extends com.vaadin.Application { - - final Window main = new Window("Reindeer buttons"); - - @Override - public void init() { - setMainWindow(main); - setTheme("reindeer"); - - Button toggle = new Button("Toggle black style", - new Button.ClickListener() { - public void buttonClick(ClickEvent event) { - if (!main.getContent().getStyleName().contains("black")) { - main.getContent().setStyleName("black"); - } else { - main.getContent().setStyleName(""); - } - } - }); - main.addComponent(toggle); - - main.addComponent(buildButtons(false, false, false, false)); - main.addComponent(buildButtons(false, false, true, false)); - main.addComponent(buildButtons(false, true, false, false)); - main.addComponent(buildButtons(false, true, true, false)); - main.addComponent(buildButtons(true, false, false, false)); - main.addComponent(buildButtons(true, false, true, false)); - main.addComponent(buildButtons(true, true, false, false)); - main.addComponent(buildButtons(true, true, true, false)); - - main.addComponent(buildButtons(false, false, false, true)); - main.addComponent(buildButtons(false, false, true, true)); - main.addComponent(buildButtons(false, true, false, true)); - main.addComponent(buildButtons(false, true, true, true)); - main.addComponent(buildButtons(true, false, false, true)); - main.addComponent(buildButtons(true, false, true, true)); - main.addComponent(buildButtons(true, true, false, true)); - main.addComponent(buildButtons(true, true, true, true)); - } - - private Layout buildButtons(boolean disabled, boolean icon, boolean error, - boolean sized) { - - String[] buttonStyles = new String[] { "", "primary", "small", "link" }; - - HorizontalLayout hl = new HorizontalLayout(); - hl.setSpacing(true); - hl.setMargin(true); - - for (int i = 0; i < buttonStyles.length; i++) { - Button b = new Button(buttonStyles[i] + " style"); - b.setStyleName(buttonStyles[i]); - if (icon) { - b.setIcon(new ThemeResource("../runo/icons/16/document.png")); - } - if (error) { - b.setComponentError(new UserError("Error")); - } - if (disabled) { - b.setEnabled(false); - } - if (sized) { - b.setWidth("150px"); - } - hl.addComponent(b); - } - - return hl; - } - -}
\ No newline at end of file diff --git a/src/com/vaadin/ui/Button.java b/src/com/vaadin/ui/Button.java index df40aeb018..e4ca734d34 100644 --- a/src/com/vaadin/ui/Button.java +++ b/src/com/vaadin/ui/Button.java @@ -28,8 +28,6 @@ public class Button extends AbstractField { boolean switchMode = false; - private String primaryStyleName; - /** * Creates a new push button. The value of the push button is false and it * is immediate by default. @@ -137,9 +135,6 @@ public class Button extends AbstractField { public void paintContent(PaintTarget target) throws PaintException { super.paintContent(target); - if (primaryStyleName != null) { - target.addAttribute("primarystyle", primaryStyleName); - } if (isSwitchMode()) { target.addAttribute("type", "switch"); } @@ -352,33 +347,4 @@ public class Button extends AbstractField { super.setInternalValue(newValue); } - /** - * - * <i><b>EXPERIMENTAL FEATURE</b> Use with caution, the method signature - * might change in following releases.</i> - * <p> - * Sets the components primary style name. - * <p> - * The primary style name is usually used on the client-side as the prefix - * for widget CSS classnames (this depends on the terminal implementation). - * The default primary styles are usually prefixed with Vaadin proprietary - * "v-" string, e.g. the primary style name for a default Vaadin button is - * "v-button". - * <p> - * With this method, you can change the primary style name to "mybutton", - * and then on the client-side you would have "mybutton" as the CSS - * classname. After that, all other style names you set for the component - * will be prefixed with the new primary style name, i.e. setting an - * additional style name "red" for the same button would result in a CSS - * classname "mybutton-red" on the client-side. - */ - public void setPrimaryStyleName(String primary) { - primaryStyleName = primary; - requestRepaint(); - } - - public String getPrimaryStyleName() { - return primaryStyleName; - } - } diff --git a/src/com/vaadin/ui/NativeButton.java b/src/com/vaadin/ui/NativeButton.java new file mode 100644 index 0000000000..4df771d054 --- /dev/null +++ b/src/com/vaadin/ui/NativeButton.java @@ -0,0 +1,51 @@ +package com.vaadin.ui; + +import com.vaadin.data.Property; + +@SuppressWarnings("serial") +public class NativeButton extends Button { + + public NativeButton() { + super(); + } + + public NativeButton(String caption) { + super(caption); + } + + public NativeButton(String caption, ClickListener listener) { + super(caption, listener); + } + + public NativeButton(String caption, Object target, String methodName) { + super(caption, target, methodName); + } + + /** + * Creates a new switch button with initial value. + * + * @param state + * the Initial state of the switch-button. + * @param initialState + */ + public NativeButton(String caption, boolean initialState) { + super(caption, initialState); + } + + /** + * Creates a new switch button that is connected to a boolean property. + * + * @param state + * the Initial state of the switch-button. + * @param dataSource + */ + public NativeButton(String caption, Property dataSource) { + super(caption, dataSource); + } + + @Override + public String getTag() { + return "nativebutton"; + } + +}
\ No newline at end of file |
