Fixes #2943: reindeer theme button broken

* added loads of new CSS to make things work even relatively well
* made sprites 2000px wide

svn changeset:7848/svn branch:6.0

diff --git a/WebContent/VAADIN/themes/reindeer/button/button.css b/WebContent/VAADIN/themes/reindeer/button/button.css
index 119c7bf89b50442791e6d1cfaec1e37d744e5f08..b73c32d767cbbe1e4b3b78874e8828674f7a8574 100644 (file)
--- a/WebContent/VAADIN/themes/reindeer/button/button.css
+++ b/WebContent/VAADIN/themes/reindeer/button/button.css
@@ -11,8 +11,13 @@ div > .v-button,
        border: none;
        cursor: default;
 }
-div > .v-button span,
-.v-ie7 .v-button span {
+/* 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 {
        display: inline-block;
        height: 22px;
        padding: 4px 15px 0 9px;
@@ -26,7 +31,7 @@ div > .v-button span,
        line-height: 16px;
        float: none;
 }
-.v-sa .v-button span {
+.v-sa .v-button .v-button-caption {
        height: 21px;
        padding-top: 5px;
 }
@@ -34,7 +39,7 @@ div > .v-button span,
        background-image: url(img/left-focus.png); /** sprite-ref: buttons */
        outline: none;
 }
-.v-button:focus span {
+.v-button:focus .v-button-caption {
        background-image: url(img/right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */
        outline: none;
 }
@@ -43,31 +48,30 @@ div > .v-button span,
        background-image: url(img/left-pressed.png); /** sprite-ref: buttons */
        outline: none;
 }
-.v-button:active span,
-.v-ie7 .v-button.v-pressed span {
+.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;
 }
-.v-ie7 .v-button.v-pressed span {
-       position: relative;
-}
 /* FF3 & FF2 */
 .v-button::-moz-focus-inner {
        border: none;
        padding: 0;
 }
-.v-ff2 .v-button span {
+.v-ff2 .v-button .v-button-caption {
        display: -moz-inline-box;
        padding-top: 6px;
        height: 20px;
 }
 /* IE7 */
-.v-ie7 .v-button.v-pressed .v-icon {
+.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 span {
+.v-op .v-button:active .v-button-caption {
        margin-top: -1px;
        margin-left: -1px;
 }
@@ -89,26 +93,28 @@ div > .v-button .v-icon,
 .v-ff2 .v-button-link .v-icon {
        margin: 0;
 }
-.v-button .v-icon + span,
-.v-button .v-icon + .v-errorindicator + span {
+.v-button .v-icon + .v-button-caption,
+.v-button .v-icon + .v-errorindicator + .v-button-caption {
        margin-left: -19px;
        padding-left: 19px;
 }
-.v-ie7 .v-button .v-icon + span,
-.v-ie7 .v-button .v-icon + .v-errorindicator + span {
-       margin-left: -23px;
-       padding-left: 23px;
-}
 /* Buttons with error indicator */
 div > .v-button .v-errorindicator,
 .v-ie7 .v-button .v-errorindicator {
        position: absolute;
-       display: inline-block;
+       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;
@@ -117,15 +123,28 @@ div > .v-button .v-errorindicator,
        height: 16px;
        background: transparent url(../common/icons/error-ie6.png) no-repeat 50%;
 }
-.v-ff .v-button,
-.v-sa .v-button {
-       position: relative;
-}
 .v-ff .v-button .v-errorindicator,
 .v-sa .v-button .v-errorindicator {
        top: 2px;
        left: 10px;
 }
+/* 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;
+}
 /* Link style buttons */
 .v-button.v-button-link,
 .v-ie7 .v-button-link.v-pressed {
@@ -134,8 +153,8 @@ div > .v-button .v-errorindicator,
        padding: 0;
        cursor: pointer;
 }
-.v-button.v-button-link span,
-.v-ie7 .v-button-link.v-pressed span {
+.v-button.v-button-link .v-button-caption,
+.v-ie7 .v-button-link.v-pressed .v-button-caption {
        background: transparent;
        height: auto;
        padding: 0;
@@ -145,7 +164,7 @@ div > .v-button .v-errorindicator,
        font-size: 12px;
        text-shadow: none;
 }
-.v-button.v-button-link .v-icon + span {
+.v-button.v-button-link .v-icon + .v-button-caption {
        margin: 0;
        padding: 0;
 }
@@ -159,22 +178,22 @@ div > .v-button-primary,
 .v-ie7 .v-button-primary {
        background-image: url(img/primary-left.png); /** sprite-ref: buttons */
 }
-div > .v-button-primary span,
-.v-ie7 .v-button-primary span {
+div > .v-button-primary .v-button-caption,
+.v-ie7 .v-button-primary .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 span {
+.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 span,
-.v-ie7 .v-button-primary.v-pressed span {
+.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 */
 }
 /* 
@@ -185,33 +204,33 @@ div > .v-button-small,
        background-image: url(img/small-left.png); /** sprite-ref: buttons */
        height: 20px;
 }
-div > .v-button-small span,
-.v-ie7 .v-button-small span {
+div > .v-button-small .v-button-caption,
+.v-ie7 .v-button-small .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 span {
+.v-ff2 .v-button-small .v-button-caption {
        height: 17px;
        padding-top: 3px;
 }
-.v-sa .v-button-small span {
+.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 span {
+.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 span,
-.v-ie7 .v-button-small.v-pressed span {
+.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 */
 }
 

diff --git a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png
index 6ba8bc2864ff61b2877393318b682747d5d741ae..29dedde2001afa7cd0fe7403886a9468ef873ae8 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png and b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites-ie6.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png
index c14b6864ae37b0fd98446b1eb7652c36914a9725..c048e47b62def80bc146cb060f499439f0b0ce88 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png and b/WebContent/VAADIN/themes/reindeer/button/img/button-sprites.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/button/img/primary-right-focus.png b/WebContent/VAADIN/themes/reindeer/button/img/primary-right-focus.png
index 5fef4143e6da73abca3eb0671744f5f60841eff3..7b7ae32d8470d9bed96e31850f676978c275df2e 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/button/img/primary-right-focus.png and b/WebContent/VAADIN/themes/reindeer/button/img/primary-right-focus.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/button/img/primary-right-pressed.png b/WebContent/VAADIN/themes/reindeer/button/img/primary-right-pressed.png
index 3c11bb3814791550342ed27c0227585b159337cc..dbcc59c906565c3f7e05901bda73e6494ca6f145 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/button/img/primary-right-pressed.png and b/WebContent/VAADIN/themes/reindeer/button/img/primary-right-pressed.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/button/img/primary-right.png b/WebContent/VAADIN/themes/reindeer/button/img/primary-right.png
index c304c9cfdfac5355ce5a41c3ff3aeb301eaea2c0..a600b84c34938206979604367f909c3d5b208d75 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/button/img/primary-right.png and b/WebContent/VAADIN/themes/reindeer/button/img/primary-right.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/button/img/right-focus.png b/WebContent/VAADIN/themes/reindeer/button/img/right-focus.png
index dbb0677ac7c6efda539459edcebf952b14899526..fa59dfefa3904a36b65b960dfce10aad7f9307b3 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/button/img/right-focus.png and b/WebContent/VAADIN/themes/reindeer/button/img/right-focus.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/button/img/right-pressed.png b/WebContent/VAADIN/themes/reindeer/button/img/right-pressed.png
index 0a99111e60ebd66851650d33654544b37bc535cb..2cbe6c010f1a23c1ecf3b0e0e4895efba4f65180 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/button/img/right-pressed.png and b/WebContent/VAADIN/themes/reindeer/button/img/right-pressed.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/button/img/right.png b/WebContent/VAADIN/themes/reindeer/button/img/right.png
index e70a7be739544ed364202a50e2c5e282c1fa2d93..af80f785e87689cee236275323507725f6418873 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/button/img/right.png and b/WebContent/VAADIN/themes/reindeer/button/img/right.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/button/img/small-right-focus.png b/WebContent/VAADIN/themes/reindeer/button/img/small-right-focus.png
index 8a0c5cac3317c3001f2499ddc2d86c93ef4a2be3..03c4c92e68fa1d2f537517a494eb68f15e9d6858 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/button/img/small-right-focus.png and b/WebContent/VAADIN/themes/reindeer/button/img/small-right-focus.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/button/img/small-right-pressed.png b/WebContent/VAADIN/themes/reindeer/button/img/small-right-pressed.png
index 18e6c6ace1604f8930213d3919b68e153138527c..90a22c8b8ba6d84e7d8f41e29c36ef08ead1fc70 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/button/img/small-right-pressed.png and b/WebContent/VAADIN/themes/reindeer/button/img/small-right-pressed.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/button/img/small-right.png b/WebContent/VAADIN/themes/reindeer/button/img/small-right.png
index a9abdc5cf1aebd99fa63ce9bd33a53e8551121bd..96f11915c17714031bfe0fffa907c2aa16418ba5 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/button/img/small-right.png and b/WebContent/VAADIN/themes/reindeer/button/img/small-right.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/common/img/horizontal-sprites.png b/WebContent/VAADIN/themes/reindeer/common/img/horizontal-sprites.png
index 3f107c2c319c19d48dc2592a91fbc872fa663f8c..7980a5aa188df8bf69ab8399ea845792768fb4ac 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/common/img/horizontal-sprites.png and b/WebContent/VAADIN/themes/reindeer/common/img/horizontal-sprites.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css
index f000d182a13b898e03b8387a3e15e413ad30af9d..065279329eb151defe2504ee98edf3485a2ebbed 100644 (file)
--- a/WebContent/VAADIN/themes/reindeer/styles.css
+++ b/WebContent/VAADIN/themes/reindeer/styles.css
@@ -1580,8 +1580,13 @@ div > .v-button,
        border: none;
        cursor: default;
 }
-div > .v-button span,
-.v-ie7 .v-button span {
+/* 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 {
        display: inline-block;
        height: 22px;
        padding: 4px 15px 0 9px;
@@ -1597,7 +1602,7 @@ div > .v-button span,
        line-height: 16px;
        float: none;
 }
-.v-sa .v-button span {
+.v-sa .v-button .v-button-caption {
        height: 21px;
        padding-top: 5px;
 }
@@ -1607,7 +1612,7 @@ div > .v-button span,
   background-position: left -52px;
        outline: none;
 }
-.v-button:focus span {
+.v-button:focus .v-button-caption {
   background-image: url(button/img/button-sprites.png);
   -background-image: url(button/img/button-sprites-ie6.png);
   background-position: right -78px;
@@ -1620,33 +1625,32 @@ div > .v-button span,
   background-position: left -104px;
        outline: none;
 }
-.v-button:active span,
-.v-ie7 .v-button.v-pressed span {
+.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);
   background-position: right -130px;
        outline: none;
 }
-.v-ie7 .v-button.v-pressed span {
-       position: relative;
-}
 /* FF3 & FF2 */
 .v-button::-moz-focus-inner {
        border: none;
        padding: 0;
 }
-.v-ff2 .v-button span {
+.v-ff2 .v-button .v-button-caption {
        display: -moz-inline-box;
        padding-top: 6px;
        height: 20px;
 }
 /* IE7 */
-.v-ie7 .v-button.v-pressed .v-icon {
+.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 span {
+.v-op .v-button:active .v-button-caption {
        margin-top: -1px;
        margin-left: -1px;
 }
@@ -1668,26 +1672,28 @@ div > .v-button .v-icon,
 .v-ff2 .v-button-link .v-icon {
        margin: 0;
 }
-.v-button .v-icon + span,
-.v-button .v-icon + .v-errorindicator + span {
+.v-button .v-icon + .v-button-caption,
+.v-button .v-icon + .v-errorindicator + .v-button-caption {
        margin-left: -19px;
        padding-left: 19px;
 }
-.v-ie7 .v-button .v-icon + span,
-.v-ie7 .v-button .v-icon + .v-errorindicator + span {
-       margin-left: -23px;
-       padding-left: 23px;
-}
 /* Buttons with error indicator */
 div > .v-button .v-errorindicator,
 .v-ie7 .v-button .v-errorindicator {
        position: absolute;
-       display: inline-block;
+       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;
@@ -1696,15 +1702,28 @@ div > .v-button .v-errorindicator,
        height: 16px;
        background: transparent url(common/icons/error-ie6.png) no-repeat 50%;
 }
-.v-ff .v-button,
-.v-sa .v-button {
-       position: relative;
-}
 .v-ff .v-button .v-errorindicator,
 .v-sa .v-button .v-errorindicator {
        top: 2px;
        left: 10px;
 }
+/* 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;
+}
 /* Link style buttons */
 .v-button.v-button-link,
 .v-ie7 .v-button-link.v-pressed {
@@ -1713,8 +1732,8 @@ div > .v-button .v-errorindicator,
        padding: 0;
        cursor: pointer;
 }
-.v-button.v-button-link span,
-.v-ie7 .v-button-link.v-pressed span {
+.v-button.v-button-link .v-button-caption,
+.v-ie7 .v-button-link.v-pressed .v-button-caption {
        background: transparent;
        height: auto;
        padding: 0;
@@ -1724,7 +1743,7 @@ div > .v-button .v-errorindicator,
        font-size: 12px;
        text-shadow: none;
 }
-.v-button.v-button-link .v-icon + span {
+.v-button.v-button-link .v-icon + .v-button-caption {
        margin: 0;
        padding: 0;
 }
@@ -1740,8 +1759,8 @@ div > .v-button-primary,
   -background-image: url(button/img/button-sprites-ie6.png);
   background-position: left -156px;
 }
-div > .v-button-primary span,
-.v-ie7 .v-button-primary span {
+div > .v-button-primary .v-button-caption,
+.v-ie7 .v-button-primary .v-button-caption {
   background-image: url(button/img/button-sprites.png);
   -background-image: url(button/img/button-sprites-ie6.png);
   background-position: right -182px;
@@ -1751,7 +1770,7 @@ div > .v-button-primary span,
   -background-image: url(button/img/button-sprites-ie6.png);
   background-position: left -208px;
 }
-.v-button-primary:focus span {
+.v-button-primary:focus .v-button-caption {
   background-image: url(button/img/button-sprites.png);
   -background-image: url(button/img/button-sprites-ie6.png);
   background-position: right -234px;
@@ -1762,8 +1781,8 @@ div > .v-button-primary span,
   -background-image: url(button/img/button-sprites-ie6.png);
   background-position: left -260px;
 }
-.v-button-primary:active span,
-.v-ie7 .v-button-primary.v-pressed span {
+.v-button-primary:active .v-button-caption,
+.v-ie7 .v-button-primary.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 -286px;
@@ -1778,8 +1797,8 @@ div > .v-button-small,
   background-position: left -312px;
        height: 20px;
 }
-div > .v-button-small span,
-.v-ie7 .v-button-small span {
+div > .v-button-small .v-button-caption,
+.v-ie7 .v-button-small .v-button-caption {
   background-image: url(button/img/button-sprites.png);
   -background-image: url(button/img/button-sprites-ie6.png);
   background-position: right -332px;
@@ -1787,11 +1806,11 @@ div > .v-button-small span,
        padding: 1px 11px 0 5px;
        font-weight: normal;
 }
-.v-ff2 .v-button-small span {
+.v-ff2 .v-button-small .v-button-caption {
        height: 17px;
        padding-top: 3px;
 }
-.v-sa .v-button-small span {
+.v-sa .v-button-small .v-button-caption {
        height: 18px;
        padding-top: 2px;
 }
@@ -1800,7 +1819,7 @@ div > .v-button-small span,
   -background-image: url(button/img/button-sprites-ie6.png);
   background-position: left -352px;
 }
-.v-button-small:focus span {
+.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;
@@ -1811,8 +1830,8 @@ div > .v-button-small span,
   -background-image: url(button/img/button-sprites-ie6.png);
   background-position: left -392px;
 }
-.v-button-small:active span,
-.v-ie7 .v-button-small.v-pressed span {
+.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;

diff --git a/src/com/vaadin/terminal/gwt/client/ui/VButton.java b/src/com/vaadin/terminal/gwt/client/ui/VButton.java
index 943bb117ad9c5d167ffd13cf1ef1b4a883ae5fca..27cb4dbc4a8885a2952636026ff0fb3799f4fb6f 100644 (file)
--- a/src/com/vaadin/terminal/gwt/client/ui/VButton.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/VButton.java
@@ -47,6 +47,7 @@ public class VButton extends Button implements Paintable {
         setStyleName(CLASSNAME);
 
         DOM.appendChild(getElement(), captionElement);
+        captionElement.setPropertyString("className", CLASSNAME + "-caption");
 
         addClickListener(new ClickListener() {
             public void onClick(Widget sender) {