Fixes #1595: Close button on TabSheet control

 * Added new sample to Sampler/TabSheets
 * Made all tabs in Reindeer theme demo closable.

svn changeset:9737/svn branch:6.2

diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css
index 5908dcec9f3940165838153ace44ad79554bc9a4..e0908ddd886ed5d74fda6ee31f974da3a3641be5 100644 (file)
--- a/WebContent/VAADIN/themes/base/styles.css
+++ b/WebContent/VAADIN/themes/base/styles.css
@@ -1387,6 +1387,9 @@ div.v-progressindicator-indeterminate-disabled {
 .v-ff2 .v-tabsheet-scroller {
        position: relative;
 }
+.v-disabled .v-tabsheet-scroller {
+       display: none;
+}
 .v-tabsheet-scrollerPrev,
 .v-tabsheet-scrollerNext,
 .v-tabsheet-scrollerPrev-disabled,
@@ -1412,12 +1415,26 @@ div.v-progressindicator-indeterminate-disabled {
        zoom: 1;
        width: 16px;
        height: 16px;
-       background: url(common/img/close.png) no-repeat;
+       text-align: center;
+       font-weight: bold;
        cursor: pointer;
        vertical-align: middle;
+       user-select: none;
+       -khtml-user-select: none;
+       -ms-user-select: none;
+       -moz-user-select: none;
+       -webkit-user-select: none;
 }
-.v-disabled .v-tabsheet-caption-close {
+.v-tabsheet .v-disabled .v-tabsheet-caption-close {
        cursor: default;
+       visibility: hidden;
+}
+.v-tabsheet-tabitemcell:hover .v-tabsheet-caption-close,
+.v-ie6 .v-tabsheet-caption-close {
+       visibility: visible;
+}
+.v-ie6 .v-tabsheet-caption-close {
+       float: right;
 }
 .v-tabsheet-tabitem {
        border: 1px solid #aaa;
@@ -1642,9 +1659,9 @@ div.v-tree-node-leaf {
        position: absolute;
        top: 0;
        right: 0;
-       width: 16px;
-       height: 16px;
-       background: url(common/img/close.png) no-repeat;
+       width: 1em;
+       height: 1em;
+       background: red;
        cursor: pointer;
        overflow: hidden;
 }

diff --git a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.css b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.css
index 8520f3591319e52fa1c264e61ab620374c9873b0..6fd1f1470a836b55fd38c9ee8e542d38b89d04ef 100644 (file)
--- a/WebContent/VAADIN/themes/base/tabsheet/tabsheet.css
+++ b/WebContent/VAADIN/themes/base/tabsheet/tabsheet.css
@@ -39,6 +39,9 @@
 .v-ff2 .v-tabsheet-scroller {
        position: relative;
 }
+.v-disabled .v-tabsheet-scroller {
+       display: none;
+}
 .v-tabsheet-scrollerPrev,
 .v-tabsheet-scrollerNext,
 .v-tabsheet-scrollerPrev-disabled,
@@ -58,6 +61,33 @@
 .v-tabsheet-tabs .v-caption span {
        white-space: nowrap;
 }
+.v-tabsheet-caption-close {
+       display: inline;
+       display: inline-block;
+       zoom: 1;
+       width: 16px;
+       height: 16px;
+       text-align: center;
+       font-weight: bold;
+       cursor: pointer;
+       vertical-align: middle;
+       user-select: none;
+       -khtml-user-select: none;
+       -ms-user-select: none;
+       -moz-user-select: none;
+       -webkit-user-select: none;
+}
+.v-tabsheet .v-disabled .v-tabsheet-caption-close {
+       cursor: default;
+       visibility: hidden;
+}
+.v-tabsheet-tabitemcell:hover .v-tabsheet-caption-close,
+.v-ie6 .v-tabsheet-caption-close {
+       visibility: visible;
+}
+.v-ie6 .v-tabsheet-caption-close {
+       float: right;
+}
 .v-tabsheet-tabitem {
        border: 1px solid #aaa;
        border-right: none;

diff --git a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png
index c4ee4bdcd1be4c808a3e69466a48f074300ec625..c11ee47f9ee300f3ca91f64d8d66a88368d62231 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png and b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png
index b68e51aca491cf1c1b75a58e050e29f6bfbe17b4..4a4537ac064ccec5f162a5f9253991708184ad99 100644 (file)
Binary files a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png and b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css
index 1aa84f88d32a2ee1e7021da9a800032186f8beb0..be563abfc3d03cbdfadcbaf6b890c0ddedbb7b9c 100644 (file)
--- a/WebContent/VAADIN/themes/reindeer/styles.css
+++ b/WebContent/VAADIN/themes/reindeer/styles.css
@@ -1387,6 +1387,9 @@ div.v-progressindicator-indeterminate-disabled {
 .v-ff2 .v-tabsheet-scroller {
        position: relative;
 }
+.v-disabled .v-tabsheet-scroller {
+       display: none;
+}
 .v-tabsheet-scrollerPrev,
 .v-tabsheet-scrollerNext,
 .v-tabsheet-scrollerPrev-disabled,
@@ -1412,12 +1415,26 @@ div.v-progressindicator-indeterminate-disabled {
        zoom: 1;
        width: 16px;
        height: 16px;
-       background: url(../base/common/img/close.png) no-repeat;
+       text-align: center;
+       font-weight: bold;
        cursor: pointer;
        vertical-align: middle;
+       user-select: none;
+       -khtml-user-select: none;
+       -ms-user-select: none;
+       -moz-user-select: none;
+       -webkit-user-select: none;
 }
-.v-disabled .v-tabsheet-caption-close {
+.v-tabsheet .v-disabled .v-tabsheet-caption-close {
        cursor: default;
+       visibility: hidden;
+}
+.v-tabsheet-tabitemcell:hover .v-tabsheet-caption-close,
+.v-ie6 .v-tabsheet-caption-close {
+       visibility: visible;
+}
+.v-ie6 .v-tabsheet-caption-close {
+       float: right;
 }
 .v-tabsheet-tabitem {
        border: 1px solid #aaa;
@@ -1642,9 +1659,9 @@ div.v-tree-node-leaf {
        position: absolute;
        top: 0;
        right: 0;
-       width: 16px;
-       height: 16px;
-       background: url(../base/common/img/close.png) no-repeat;
+       width: 1em;
+       height: 1em;
+       background: red;
        cursor: pointer;
        overflow: hidden;
 }
@@ -3143,6 +3160,8 @@ td.v-datefield-calendarpanel-nextyear {
        border-bottom: none;
        border-top: none;
 }
+.blue .v-panel-caption,
+.blue .v-panel-nocaption,
 .blue .v-panel-content {
        border-color: #a8bcc5;
 }
@@ -3150,11 +3169,13 @@ td.v-datefield-calendarpanel-nextyear {
 .v-ff3 .v-panel-content {
        border-color: rgba(0,0,0,.1);
 }
-.v-panel-content > div,
-.v-ie6 .v-panel-content {
+.v-panel-content > div {
        background: #fff;
        min-height: 100%;
 }
+.v-ie6 .v-panel-content {
+       background: #fff;
+}
 .v-panel-deco {
        height: 1px;
        border-top: 1px solid #bebebe;
@@ -3196,6 +3217,9 @@ td.v-datefield-calendarpanel-nextyear {
 .v-panel-content-light > div {
        background: transparent;
 }
+.v-ie6 .v-panel-content-light {
+       background: transparent;
+}
 .v-panel-deco-light {
        height: 0;
        border: none;
@@ -3967,6 +3991,10 @@ td.v-datefield-calendarpanel-nextyear {
        border: none;
 }
 
+/* These styles get catenated together on build */
+
+/* Default Tabsheet styles */
+
 .v-tabsheet-tabitemcell,
 .v-tabsheet-spacertd {
        height: 32px;
@@ -4005,33 +4033,80 @@ td.v-datefield-calendarpanel-nextyear {
   background-position: right -1304px;
        padding: 9px 8px 0 6px;
 }
+.v-tabsheet-tabitem .v-caption-closable {
+       padding-right: 0;
+       padding-left: 17px;
+}
 .v-tabsheet-tabitem .v-captiontext {
        height: 16px;
        line-height: 16px;
 }
 .v-tabsheet-caption-close {
-       
+       float: right;
+       width: 19px;
+       height: 18px;
+       margin: -1px -1px 0;
+       padding-left: 2px;
+       background: transparent;
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1336px;
+       cursor: default;
+       text-indent: -999px;
+       overflow: hidden;
+}
+.v-ff .v-tabsheet-caption-close,
+.v-ie7 .v-tabsheet-caption-close {
+       margin-top: -17px;
+}
+.v-ie6 .v-tabsheet-caption-close {
+       float: none;
+}
+.v-tabsheet-caption-close:hover {
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1354px;
+}
+.v-tabsheet-caption-close:active {
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1372px;
+}
+.v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1390px;
+}
+.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover {
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1408px;
+}
+.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active {
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1426px;
 }
 .v-tabsheet-tabitemcell-selected {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1336px;
+  background-position: left -1444px;
 }
 .v-tabsheet-tabitemcell-selected-first {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1368px;
+  background-position: left -1476px;
 }
 .v-tabsheet-tabitem-selected {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1400px;
+  background-position: left -1508px;
        color: #232930;
 }
 .v-tabsheet-tabitem-selected .v-caption {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: right -1432px;
+  background-position: right -1540px;
 }
 .v-tabsheet-spacertd div {
        margin-right: 4px;
@@ -4040,7 +4115,7 @@ td.v-datefield-calendarpanel-nextyear {
        background: transparent no-repeat right top;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: right -1464px;
+  background-position: right -1572px;
 }
 .v-tabsheet-content {
        border: 1px solid #dcdcdc;
@@ -4074,13 +4149,53 @@ td.v-datefield-calendarpanel-nextyear {
        border-top-color: rgba(0,0,0,.1);
        background: rgba(0,0,0,.08);
 }
+
+
+/* Icons & error indicators */
+
+.v-tabsheet-tabs .v-icon,
+.v-tabsheet-tabs .v-captiontext,
+.v-tabsheet-tabs .v-errorindicator {
+       display: inline;
+       float: none;
+}
+.v-sa .v-tabsheet-tabs .v-captiontext {
+       display: inline-block;
+}
+.v-tabsheet-tabs .v-icon {
+       width: 16px !important;
+       height: 16px !important;
+}
+.v-tabsheet-tabs .v-errorindicator {
+       display: inline-block;
+       width: 13px;
+       height: 16px;
+       background: transparent url(common/icons/error.png) no-repeat 50%;
+}
+.v-ff2 .v-tabsheet-tabs .v-icon,
+.v-ff2 .v-tabsheet-tabs .v-errorindicator {
+       display: -moz-inline-stack;
+}
+.v-ie6 .v-tabsheet-tabs .v-errorindicator {
+       background-image: url(common/icons/error-ie6.png);
+}
+.v-ie .v-tabsheet-tabs .v-errorindicator {
+       zoom: 1;
+       display: inline;
+}
+
+/* Tabsheet scroller styles */
+
 .v-tabsheet-scroller {
        height: 31px;
        margin-top: -31px;
-       padding-right: 3px;
-       border-right: 1px solid #afafaf;
+       padding: 0 3px 0 4px;
+       border-right: 1px solid #c2c2c2;
+       border-left: 1px solid #cfcfcf;
        position: relative;
        float: right;
+       background: transparent url(tabsheet/img/framed/tab-bg.png) repeat-x left -1px;
+       width: 36px;
 }
 .v-tabsheet-scroller button {
        margin-top: 7px;
@@ -4093,7 +4208,7 @@ td.v-datefield-calendarpanel-nextyear {
        background: transparent;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1496px;
+  background-position: left -1604px;
        width: 18px;
        height: 17px;
        overflow: hidden;
@@ -4105,23 +4220,23 @@ td.v-datefield-calendarpanel-nextyear {
 .v-tabsheet-scrollerNext {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1513px;
+  background-position: left -1621px;
 }
 .v-tabsheet-scrollerPrev:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1530px;
+  background-position: left -1638px;
 }
 .v-tabsheet-scrollerNext:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1547px;
+  background-position: left -1655px;
 }
 .v-tabsheet-scrollerPrev-disabled,
 .v-tabsheet-scrollerPrev-disabled:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1564px;
+  background-position: left -1672px;
        opacity: 1;
        filter: none;
 }
@@ -4129,48 +4244,13 @@ td.v-datefield-calendarpanel-nextyear {
 .v-tabsheet-scrollerNext-disabled:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1581px;
+  background-position: left -1689px;
        opacity: 1;
        filter: none;
 }
-.v-tabsheet-tabs .v-icon,
-.v-tabsheet-tabs .v-captiontext,
-.v-tabsheet-tabs .v-errorindicator {
-       display: inline;
-       float: none;
-}
-.v-sa .v-tabsheet-tabs .v-captiontext {
-       display: inline-block;
-}
-.v-tabsheet-tabs .v-icon {
-       width: 16px !important;
-       height: 16px !important;
-}
-.v-tabsheet-tabs .v-errorindicator {
-       display: inline-block;
-       width: 13px;
-       height: 16px;
-       background: transparent url(common/icons/error.png) no-repeat 50%;
-}
-.v-ff2 .v-tabsheet-tabs .v-icon,
-.v-ff2 .v-tabsheet-tabs .v-errorindicator {
-       display: -moz-inline-stack;
-}
-.v-ie6 .v-tabsheet-tabs .v-errorindicator {
-       background-image: url(common/icons/error-ie6.png);
-}
-.v-ie .v-tabsheet-tabs .v-errorindicator {
-       zoom: 1;
-       display: inline;
-}
-
-
-
-
-
 
 /**
- * Minimal style --------------
+ * Tabsheet "minimal" style --------------
  */
 .v-tabsheet-minimal .v-tabsheet-spacertd div {
        border-bottom: 1px solid #bfbfbf;
@@ -4210,6 +4290,10 @@ td.v-datefield-calendarpanel-nextyear {
        background: transparent;
        padding: 4px 15px 6px 15px;
 }
+.v-tabsheet-minimal .v-tabsheet-tabitem .v-caption-closable,
+.v-tabsheet-minimal .v-tabsheet-tabitem-selected .v-caption-closable {
+       padding-right: 6px;
+}
 .v-tabsheet-content-minimal {
        border: none;
 }
@@ -4223,20 +4307,58 @@ td.v-datefield-calendarpanel-nextyear {
 .v-tabsheet-minimal .v-tabsheet-scroller {
        margin-top: -20px;
        height: 17px;
-       padding-right: 0;
-       border-right: none;
-       position: static;
-       float: none;
+       padding: 0;
+       border: none;
+       background: transparent;
 }
 .v-tabsheet-minimal .v-tabsheet-scroller button {
        margin-top: 0;
 }
+.v-tabsheet-minimal .v-tabsheet-caption-close,
+.v-tabsheet-minimal .v-tabsheet-caption-close:hover,
+.v-tabsheet-minimal .v-tabsheet-caption-close:active {
+       text-indent: 0;
+       background: transparent;
+       margin-left: 3px;
+       margin-right: -3px;
+       padding: 0;
+       color: #999;
+       width: 15px;
+       height: 15px;
+       line-height: 14px;
+       -webkit-border-radius: 7px;
+       -moz-border-radius: 7px;
+}
+.v-tabsheet-minimal .v-tabsheet-caption-close {
+       margin-top: 1px;
+}
+.v-ff .v-tabsheet-minimal .v-tabsheet-caption-close,
+.v-ie7 .v-tabsheet-minimal .v-tabsheet-caption-close {
+       margin-top: -15px;
+}
+.v-tabsheet-minimal .v-tabsheet-caption-close:hover {
+       color: #fff;
+       background: #aaa;
+}
+.v-tabsheet-minimal .v-tabsheet-caption-close:active {
+       background: #777;
+}
 /* Minimal tabsheet on blue background */
 .blue .v-tabsheet-minimal .v-tabsheet-spacertd div,
 .blue .v-tabsheet-minimal .v-tabsheet-tabitem,
 .blue .v-tabsheet-minimal .v-tabsheet-tabitem-selected  {
        border-color: #7c8a91;
 }
+.blue .v-tabsheet-minimal .v-tabsheet-caption-close {
+       color: #7c8a91;
+}
+.blue .v-tabsheet-minimal .v-tabsheet-caption-close:hover {
+       color: #BCD3DE;
+       background: #778d98;
+}
+.blue .v-tabsheet-minimal .v-tabsheet-caption-close:active {
+       background: #4f6874;
+}
 /* Minimal tabsheet on black background */
 .black .v-tabsheet-minimal .v-tabsheet-spacertd div,
 .black .v-tabsheet-minimal .v-tabsheet-tabitem,
@@ -4252,14 +4374,19 @@ td.v-datefield-calendarpanel-nextyear {
        color: #c9ccce;
        text-shadow: #000 0 0 1px;
 }
-
-
-
-
-
+.black .v-tabsheet-minimal .v-tabsheet-caption-close {
+       color: #72787c;
+}
+.black .v-tabsheet-minimal .v-tabsheet-caption-close:hover {
+       color: #1d2021;
+       background: #4d5154;
+}
+.black .v-tabsheet-minimal .v-tabsheet-caption-close:active {
+       background: #626669;
+}
 
 /**
- * Bar style ---------------
+ * Tabsheet bar style ---------------
  */
 .v-tabsheet-bar .v-tabsheet-tabitemcell,
 .v-tabsheet-bar .v-tabsheet-spacertd {
@@ -4271,20 +4398,20 @@ td.v-datefield-calendarpanel-nextyear {
 .v-tabsheet-bar .v-tabsheet-tabitemcell {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1599px;
+  background-position: left -1707px;
 }
 .v-tabsheet-bar .v-tabsheet-tabitemcell-first {
        padding-left: 6px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1619px;
+  background-position: left -1727px;
 }
 .v-tabsheet-bar .v-tabsheet-tabitem,
 .v-tabsheet-bar .v-tabsheet-spacertd div {
        height: 20px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1639px;
+  background-position: left -1747px;
        font-size: 11px;
        margin: 0;
 }
@@ -4292,43 +4419,86 @@ td.v-datefield-calendarpanel-nextyear {
        height: 18px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: right -1659px;
+  background-position: right -1767px;
        padding: 2px 12px 0 10px;
 }
+.v-tabsheet-bar .v-tabsheet-tabitem .v-caption-closable,
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-caption-closable {
+       padding-right: 8px;
+       padding-left: 14px;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close,
+.v-tabsheet-bar .v-tabsheet-caption-close:hover,
+.v-tabsheet-bar .v-tabsheet-caption-close:active {
+       text-indent: 0;
+       background: transparent;
+       margin-left: 3px;
+       margin-right: -3px;
+       padding: 0;
+       color: #3c3c3c;
+       width: 14px;
+       height: 14px;
+       line-height: 12px;
+       -webkit-border-radius: 7px;
+       -moz-border-radius: 7px;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close {
+       margin-top: 0;
+}
+.v-ff .v-tabsheet-bar .v-tabsheet-caption-close,
+.v-ie7 .v-tabsheet-bar .v-tabsheet-caption-close {
+       margin-top: -15px;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close:hover {
+       background: #bfbfbf;
+       -webkit-box-shadow: 0 1px 0 #fff;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close:active {
+       background: #a9a9a9;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+       color: #404142;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover {
+       background: #5e666e;
+       color: #fff;
+       text-shadow: 0 -1px 0 #222;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active {
+       background: #404142;
+}
+
 .v-tabsheet-bar .v-tabsheet-tabitemcell-selected {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1679px;
+  background-position: left -1787px;
 }
 .v-tabsheet-bar .v-tabsheet-tabitemcell-selected-first {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1699px;
+  background-position: left -1807px;
 }
 .v-tabsheet-bar .v-tabsheet-tabitem-selected {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1719px;
+  background-position: left -1827px;
        color: #232930;
 }
 .v-tabsheet-bar .v-tabsheet-tabitem-selected .v-caption {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: right -1739px;
+  background-position: right -1847px;
 }
 .v-tabsheet-bar .v-tabsheet-scroller {
-       margin-top: -19px;
-}
-.v-tabsheet-bar .v-tabsheet-scroller {
-       margin-top: -19px;
-       height: 17px;
-       padding-right: 0;
+       margin-top: -20px;
+       height: 19px;
        border-right: none;
-       position: static;
-       float: none;
+  background-image: url(common/img/vertical-sprites.png);
+  -background-image: url(common/img/vertical-sprites-ie6.png);
+  background-position: left -1867px;
 }
 .v-tabsheet-bar .v-tabsheet-scroller button {
-       margin-top: 0;
+       margin-top: 1px;
 }
 .v-tabsheet-content-bar {
        border: none;
@@ -4353,7 +4523,7 @@ td.v-datefield-calendarpanel-nextyear {
        background-repeat: repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1759px;
+  background-position: left -1887px;
        border-radius: 3px;
        -moz-border-radius: 3px;
        margin: 0;
@@ -4512,7 +4682,7 @@ input.v-textfield-readonly,
        background: #4d749f repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1782px;
+  background-position: left -1910px;
        color: #fff;
        padding: 1px 2px;
        -webkit-border-radius: 2px;
@@ -4567,7 +4737,7 @@ input.v-textfield-readonly,
        background: transparent repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1802px;
+  background-position: left -1930px;
 }
 .v-window-header {
        font-weight: bold;
@@ -4594,13 +4764,13 @@ input.v-textfield-readonly,
        background: transparent;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1839px;
+  background-position: left -1967px;
 }
 .v-window-footer {
        background-repeat: repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1854px;
+  background-position: left -1982px;
        height: 15px;
 }
 .v-window-closebox {
@@ -4611,17 +4781,17 @@ input.v-textfield-readonly,
        background: transparent;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1869px;
+  background-position: left -1997px;
 }
 .v-window-closebox:hover {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1885px;
+  background-position: left -2013px;
 }
 .v-window-closebox:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1901px;
+  background-position: left -2029px;
 }
 .v-window-contents {
        background: #fff;
@@ -4654,7 +4824,7 @@ input.v-textfield-readonly,
        height: 12px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1917px;
+  background-position: left -2045px;
 }
 .v-window-light .v-window-footer {
        background: transparent;
@@ -4667,17 +4837,17 @@ input.v-textfield-readonly,
        height: 15px;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1929px;
+  background-position: left -2057px;
 }
 .v-window-light .v-window-closebox:hover {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1944px;
+  background-position: left -2072px;
 }
 .v-window-light .v-window-closebox:active {
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1959px;
+  background-position: left -2087px;
 }
 .v-window-light .v-window-contents {
        background: transparent;
@@ -4687,7 +4857,7 @@ input.v-textfield-readonly,
        background: #f7f7f8 repeat-x;
   background-image: url(common/img/vertical-sprites.png);
   -background-image: url(common/img/vertical-sprites-ie6.png);
-  background-position: left -1974px;
+  background-position: left -2102px;
 }
 .v-ie6 .v-window-light .v-window-wrap2 {
        background-image: none;

diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-hover.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-hover.png
new file mode 100644 (file)
index 0000000..f548db8
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-hover.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-pressed.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-pressed.png
new file mode 100644 (file)
index 0000000..a39a443
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-pressed.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-hover.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-hover.png
new file mode 100644 (file)
index 0000000..31a0d1f
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-hover.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-pressed.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-pressed.png
new file mode 100644 (file)
index 0000000..9aae58c
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-pressed.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel.png
new file mode 100644 (file)
index 0000000..e0cd398
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn.png
new file mode 100644 (file)
index 0000000..9407f7b
Binary files /dev/null and b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn.png differ

diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-bar-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-bar-style.css
new file mode 100644 (file)
index 0000000..ec985ad
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-bar-style.css
@@ -0,0 +1,108 @@
+/**
+ * Tabsheet bar style ---------------
+ */
+.v-tabsheet-bar .v-tabsheet-tabitemcell,
+.v-tabsheet-bar .v-tabsheet-spacertd {
+       height: 20px;
+}
+.v-tabsheet-bar .v-tabsheet-spacertd {
+       background: transparent;
+}
+.v-tabsheet-bar .v-tabsheet-tabitemcell {
+       background-image: url(img/bar/tab-left.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-bar .v-tabsheet-tabitemcell-first {
+       padding-left: 6px;
+       background-image: url(img/bar/tab-first-left.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-bar .v-tabsheet-tabitem,
+.v-tabsheet-bar .v-tabsheet-spacertd div {
+       height: 20px;
+       background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
+       font-size: 11px;
+       margin: 0;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem .v-caption {
+       height: 18px;
+       background-image: url(img/bar/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
+       padding: 2px 12px 0 10px;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem .v-caption-closable,
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-caption-closable {
+       padding-right: 8px;
+       padding-left: 14px;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close,
+.v-tabsheet-bar .v-tabsheet-caption-close:hover,
+.v-tabsheet-bar .v-tabsheet-caption-close:active {
+       text-indent: 0;
+       background: transparent;
+       margin-left: 3px;
+       margin-right: -3px;
+       padding: 0;
+       color: #3c3c3c;
+       width: 14px;
+       height: 14px;
+       line-height: 12px;
+       -webkit-border-radius: 7px;
+       -moz-border-radius: 7px;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close {
+       margin-top: 0;
+}
+.v-ff .v-tabsheet-bar .v-tabsheet-caption-close,
+.v-ie7 .v-tabsheet-bar .v-tabsheet-caption-close {
+       margin-top: -15px;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close:hover {
+       background: #bfbfbf;
+       -webkit-box-shadow: 0 1px 0 #fff;
+}
+.v-tabsheet-bar .v-tabsheet-caption-close:active {
+       background: #a9a9a9;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+       color: #404142;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover {
+       background: #5e666e;
+       color: #fff;
+       text-shadow: 0 -1px 0 #222;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active {
+       background: #404142;
+}
+
+.v-tabsheet-bar .v-tabsheet-tabitemcell-selected {
+       background-image: url(img/bar/tab-left-sel.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-bar .v-tabsheet-tabitemcell-selected-first {
+       background-image: url(img/bar/tab-first-left-sel.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected {
+       background-image: url(img/bar/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
+       color: #232930;
+}
+.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-caption {
+       background-image: url(img/bar/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
+}
+.v-tabsheet-bar .v-tabsheet-scroller {
+       margin-top: -20px;
+       height: 19px;
+       border-right: none;
+       background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
+}
+.v-tabsheet-bar .v-tabsheet-scroller button {
+       margin-top: 1px;
+}
+.v-tabsheet-content-bar {
+       border: none;
+}
+.v-tabsheet-content-bar .v-tabsheet-tabsheetpanel {
+       background: transparent;
+}
+.v-tabsheet-deco-bar {
+       height: 0;
+       border: none;
+}
+/* Content area font color specified with minimal style (reduces additional selectors) */

diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.css
new file mode 100644 (file)
index 0000000..d80f292
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-minimal-style.css
@@ -0,0 +1,135 @@
+/**
+ * Tabsheet "minimal" style --------------
+ */
+.v-tabsheet-minimal .v-tabsheet-spacertd div {
+       border-bottom: 1px solid #bfbfbf;
+       height: auto;
+       background: transparent;
+}
+.v-tabsheet-minimal .v-tabsheet-tabitemcell,
+.v-tabsheet-minimal .v-tabsheet-spacertd {
+       height: auto;
+       background: transparent;
+       padding-left: 0;
+}
+.v-tabsheet-minimal .v-tabsheet-tabitem {
+       border: none;
+       border-bottom: 1px solid #bfbfbf;
+       color: #4d748f;
+       padding: 0;
+       height: auto;
+       background: transparent;
+       text-shadow: none;
+}
+.v-tabsheet-minimal .v-tabsheet-tabitem .v-caption {
+       padding: 5px 16px;
+       height: auto;
+       background: transparent;
+}
+.v-tabsheet-minimal .v-tabsheet-tabitemcell-selected {
+       background: transparent;
+}
+.v-tabsheet-minimal .v-tabsheet-tabitem-selected {
+       background: transparent;
+       border: 1px solid #bfbfbf;
+       border-bottom: none;
+       color: #222;
+}
+.v-tabsheet-minimal .v-tabsheet-tabitem-selected .v-caption {
+       background: transparent;
+       padding: 4px 15px 6px 15px;
+}
+.v-tabsheet-minimal .v-tabsheet-tabitem .v-caption-closable,
+.v-tabsheet-minimal .v-tabsheet-tabitem-selected .v-caption-closable {
+       padding-right: 6px;
+}
+.v-tabsheet-content-minimal {
+       border: none;
+}
+.v-tabsheet-content-minimal .v-tabsheet-tabsheetpanel {
+       background: transparent;
+}
+.v-tabsheet-deco-minimal {
+       height: 0;
+       border: none;
+}
+.v-tabsheet-minimal .v-tabsheet-scroller {
+       margin-top: -20px;
+       height: 17px;
+       padding: 0;
+       border: none;
+       background: transparent;
+}
+.v-tabsheet-minimal .v-tabsheet-scroller button {
+       margin-top: 0;
+}
+.v-tabsheet-minimal .v-tabsheet-caption-close,
+.v-tabsheet-minimal .v-tabsheet-caption-close:hover,
+.v-tabsheet-minimal .v-tabsheet-caption-close:active {
+       text-indent: 0;
+       background: transparent;
+       margin-left: 3px;
+       margin-right: -3px;
+       padding: 0;
+       color: #999;
+       width: 15px;
+       height: 15px;
+       line-height: 14px;
+       -webkit-border-radius: 7px;
+       -moz-border-radius: 7px;
+}
+.v-tabsheet-minimal .v-tabsheet-caption-close {
+       margin-top: 1px;
+}
+.v-ff .v-tabsheet-minimal .v-tabsheet-caption-close,
+.v-ie7 .v-tabsheet-minimal .v-tabsheet-caption-close {
+       margin-top: -15px;
+}
+.v-tabsheet-minimal .v-tabsheet-caption-close:hover {
+       color: #fff;
+       background: #aaa;
+}
+.v-tabsheet-minimal .v-tabsheet-caption-close:active {
+       background: #777;
+}
+/* Minimal tabsheet on blue background */
+.blue .v-tabsheet-minimal .v-tabsheet-spacertd div,
+.blue .v-tabsheet-minimal .v-tabsheet-tabitem,
+.blue .v-tabsheet-minimal .v-tabsheet-tabitem-selected  {
+       border-color: #7c8a91;
+}
+.blue .v-tabsheet-minimal .v-tabsheet-caption-close {
+       color: #7c8a91;
+}
+.blue .v-tabsheet-minimal .v-tabsheet-caption-close:hover {
+       color: #BCD3DE;
+       background: #778d98;
+}
+.blue .v-tabsheet-minimal .v-tabsheet-caption-close:active {
+       background: #4f6874;
+}
+/* Minimal tabsheet on black background */
+.black .v-tabsheet-minimal .v-tabsheet-spacertd div,
+.black .v-tabsheet-minimal .v-tabsheet-tabitem,
+.black .v-tabsheet-minimal .v-tabsheet-tabitem-selected  {
+       border-color: #3e4044;
+       color: #6a7f89;
+}
+.black .v-tabsheet-minimal .v-tabsheet-tabitem-selected {
+       color: #c9ccce;
+}
+.black .v-tabsheet-content-minimal,
+.black .v-tabsheet-content-bar {
+       color: #c9ccce;
+       text-shadow: #000 0 0 1px;
+}
+.black .v-tabsheet-minimal .v-tabsheet-caption-close {
+       color: #72787c;
+}
+.black .v-tabsheet-minimal .v-tabsheet-caption-close:hover {
+       color: #1d2021;
+       background: #4d5154;
+}
+.black .v-tabsheet-minimal .v-tabsheet-caption-close:active {
+       background: #626669;
+}
\ No newline at end of file

diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.css
new file mode 100644 (file)
index 0000000..607b25b
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-normal-style.css
@@ -0,0 +1,160 @@
+/* Default Tabsheet styles */
+
+.v-tabsheet-tabitemcell,
+.v-tabsheet-spacertd {
+       height: 32px;
+}
+.v-tabsheet-tabitemcell {
+       background: no-repeat;
+       background-image: url(img/framed/tab-left.png); /** sprite-ref: verticals */
+       padding-left: 3px;
+}
+.v-tabsheet-tabitemcell-first {
+       padding-left: 10px;
+       background-image: url(img/framed/tab-first-left.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-tabitem,
+.v-tabsheet-spacertd div {
+       border: none;
+       height: 32px;
+       background: transparent repeat-x;
+       background-image: url(img/framed/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
+       padding: 0;
+       color: #222;
+       text-shadow: #fff 0 1px 0;
+}
+.v-tabsheet-tabitem .v-caption {
+       border: none;
+       height: 23px;
+       background: no-repeat right top;
+       background-image: url(img/framed/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
+       padding: 9px 8px 0 6px;
+}
+.v-tabsheet-tabitem .v-caption-closable {
+       padding-right: 0;
+       padding-left: 17px;
+}
+.v-tabsheet-tabitem .v-captiontext {
+       height: 16px;
+       line-height: 16px;
+}
+.v-tabsheet-caption-close {
+       float: right;
+       width: 19px;
+       height: 18px;
+       margin: -1px -1px 0;
+       padding-left: 2px;
+       background: transparent;
+       background-image: url(img/close-btn.png); /** sprite-ref: verticals */
+       cursor: default;
+       text-indent: -999px;
+       overflow: hidden;
+}
+.v-ff .v-tabsheet-caption-close,
+.v-ie7 .v-tabsheet-caption-close {
+       margin-top: -17px;
+}
+.v-ie6 .v-tabsheet-caption-close {
+       float: none;
+}
+.v-tabsheet-caption-close:hover {
+       background-image: url(img/close-btn-hover.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-caption-close:active {
+       background-image: url(img/close-btn-pressed.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-tabitem-selected .v-tabsheet-caption-close {
+       background-image: url(img/close-btn-sel.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:hover {
+       background-image: url(img/close-btn-sel-hover.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-tabitem-selected .v-tabsheet-caption-close:active {
+       background-image: url(img/close-btn-sel-pressed.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-tabitemcell-selected {
+       background-image: url(img/framed/tab-left-sel.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-tabitemcell-selected-first {
+       background-image: url(img/framed/tab-first-left-sel.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-tabitem-selected {
+       background-image: url(img/framed/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
+       color: #232930;
+}
+.v-tabsheet-tabitem-selected .v-caption {
+       background-image: url(img/framed/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
+}
+.v-tabsheet-spacertd div {
+       margin-right: 4px;
+}
+.v-tabsheet-spacertd {
+       background: transparent no-repeat right top;
+       background-image: url(img/framed/tab-spacer-right.png); /** sprite-ref: verticals; sprite-alignment: right */
+}
+.v-tabsheet-content {
+       border: 1px solid #dcdcdc;
+       border-bottom: none;
+       border-top: none;
+       color: #222;
+       text-shadow: none;
+}
+.blue .v-tabsheet-content {
+       border-color: #a8bcc5;
+}
+.v-tabsheet-tabsheetpanel {
+       background: #fff;
+}
+.v-sa .v-tabsheet-content,
+.v-ff3 .v-tabsheet-content {
+       border-color: rgba(0,0,0,.1);
+}
+.v-tabsheet-deco {
+       height: 1px;
+       border-top: 1px solid #bebebe;
+       background: #e2e2e2;
+       overflow: hidden;
+}
+.blue .v-tabsheet-deco {
+       border-color: #92a3ac;
+       background: #adc2cd;
+}
+.v-sa .v-tabsheet-deco,
+.v-ff3 .v-tabsheet-deco {
+       border-top-color: rgba(0,0,0,.1);
+       background: rgba(0,0,0,.08);
+}
+
+
+/* Icons & error indicators */
+
+.v-tabsheet-tabs .v-icon,
+.v-tabsheet-tabs .v-captiontext,
+.v-tabsheet-tabs .v-errorindicator {
+       display: inline;
+       float: none;
+}
+.v-sa .v-tabsheet-tabs .v-captiontext {
+       display: inline-block;
+}
+.v-tabsheet-tabs .v-icon {
+       width: 16px !important;
+       height: 16px !important;
+}
+.v-tabsheet-tabs .v-errorindicator {
+       display: inline-block;
+       width: 13px;
+       height: 16px;
+       background: transparent url(../common/icons/error.png) no-repeat 50%;
+}
+.v-ff2 .v-tabsheet-tabs .v-icon,
+.v-ff2 .v-tabsheet-tabs .v-errorindicator {
+       display: -moz-inline-stack;
+}
+.v-ie6 .v-tabsheet-tabs .v-errorindicator {
+       background-image: url(../common/icons/error-ie6.png);
+}
+.v-ie .v-tabsheet-tabs .v-errorindicator {
+       zoom: 1;
+       display: inline;
+}
\ No newline at end of file

diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.css
new file mode 100644 (file)
index 0000000..2176765
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet-scroller.css
@@ -0,0 +1,52 @@
+/* Tabsheet scroller styles */
+
+.v-tabsheet-scroller {
+       height: 31px;
+       margin-top: -31px;
+       padding: 0 3px 0 4px;
+       border-right: 1px solid #c2c2c2;
+       border-left: 1px solid #cfcfcf;
+       position: relative;
+       float: right;
+       background: transparent url(img/framed/tab-bg.png) repeat-x left -1px;
+       width: 36px;
+}
+.v-tabsheet-scroller button {
+       margin-top: 7px;
+}
+.v-tabsheet-scrollerPrev,
+.v-tabsheet-scrollerNext,
+.v-tabsheet-scrollerPrev-disabled,
+.v-tabsheet-scrollerNext-disabled {
+       border: none;
+       background: transparent;
+       background-image: url(img/tab-prev.png); /** sprite-ref: verticals */
+       width: 18px;
+       height: 17px;
+       overflow: hidden;
+       cursor: default;
+}
+.v-tabsheet-scroller button::-moz-focus-inner {
+       border: none;
+}
+.v-tabsheet-scrollerNext {
+       background-image: url(img/tab-next.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-scrollerPrev:active {
+       background-image: url(img/tab-prev-pressed.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-scrollerNext:active {
+       background-image: url(img/tab-next-pressed.png); /** sprite-ref: verticals */
+}
+.v-tabsheet-scrollerPrev-disabled,
+.v-tabsheet-scrollerPrev-disabled:active {
+       background-image: url(img/tab-prev-disabled.png); /** sprite-ref: verticals */
+       opacity: 1;
+       filter: none;
+}
+.v-tabsheet-scrollerNext-disabled,
+.v-tabsheet-scrollerNext-disabled:active {
+       background-image: url(img/tab-next-disabled.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
+       opacity: 1;
+       filter: none;
+}
\ No newline at end of file

diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css
index 289660eb3b4d9ca46495536b8808eb7b1a7e3589..fddef9a287b6f99920b249a2ba7d1a2b0955ab22 100644 (file)
--- a/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css
+++ b/WebContent/VAADIN/themes/reindeer/tabsheet/tabsheet.css
@@ -1,325 +1,5 @@
-.v-tabsheet-tabitemcell,
-.v-tabsheet-spacertd {
-       height: 32px;
-}
-.v-tabsheet-tabitemcell {
-       background: no-repeat;
-       background-image: url(img/framed/tab-left.png); /** sprite-ref: verticals */
-       padding-left: 3px;
-}
-.v-tabsheet-tabitemcell-first {
-       padding-left: 10px;
-       background-image: url(img/framed/tab-first-left.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-tabitem,
-.v-tabsheet-spacertd div {
-       border: none;
-       height: 32px;
-       background: transparent repeat-x;
-       background-image: url(img/framed/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
-       padding: 0;
-       color: #222;
-       text-shadow: #fff 0 1px 0;
-}
-.v-tabsheet-tabitem .v-caption {
-       border: none;
-       height: 23px;
-       background: no-repeat right top;
-       background-image: url(img/framed/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
-       padding: 9px 8px 0 6px;
-}
-.v-tabsheet-tabitem .v-captiontext {
-       height: 16px;
-       line-height: 16px;
-}
-.v-tabsheet-tabitemcell-selected {
-       background-image: url(img/framed/tab-left-sel.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-tabitemcell-selected-first {
-       background-image: url(img/framed/tab-first-left-sel.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-tabitem-selected {
-       background-image: url(img/framed/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
-       color: #232930;
-}
-.v-tabsheet-tabitem-selected .v-caption {
-       background-image: url(img/framed/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
-}
-.v-tabsheet-spacertd div {
-       margin-right: 4px;
-}
-.v-tabsheet-spacertd {
-       background: transparent no-repeat right top;
-       background-image: url(img/framed/tab-spacer-right.png); /** sprite-ref: verticals; sprite-alignment: right */
-}
-.v-tabsheet-content {
-       border: 1px solid #dcdcdc;
-       border-bottom: none;
-       border-top: none;
-       color: #222;
-       text-shadow: none;
-}
-.blue .v-tabsheet-content {
-       border-color: #a8bcc5;
-}
-.v-tabsheet-tabsheetpanel {
-       background: #fff;
-}
-.v-sa .v-tabsheet-content,
-.v-ff3 .v-tabsheet-content {
-       border-color: rgba(0,0,0,.1);
-}
-.v-tabsheet-deco {
-       height: 1px;
-       border-top: 1px solid #bebebe;
-       background: #e2e2e2;
-       overflow: hidden;
-}
-.blue .v-tabsheet-deco {
-       border-color: #92a3ac;
-       background: #adc2cd;
-}
-.v-sa .v-tabsheet-deco,
-.v-ff3 .v-tabsheet-deco {
-       border-top-color: rgba(0,0,0,.1);
-       background: rgba(0,0,0,.08);
-}
-.v-tabsheet-scroller {
-       height: 31px;
-       margin-top: -31px;
-       padding-right: 3px;
-       border-right: 1px solid #afafaf;
-       position: relative;
-       float: right;
-}
-.v-tabsheet-scroller button {
-       margin-top: 7px;
-}
-.v-tabsheet-scrollerPrev,
-.v-tabsheet-scrollerNext,
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerNext-disabled {
-       border: none;
-       background: transparent;
-       background-image: url(img/tab-prev.png); /** sprite-ref: verticals */
-       width: 18px;
-       height: 17px;
-       overflow: hidden;
-       cursor: default;
-}
-.v-tabsheet-scroller button::-moz-focus-inner {
-       border: none;
-}
-.v-tabsheet-scrollerNext {
-       background-image: url(img/tab-next.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-scrollerPrev:active {
-       background-image: url(img/tab-prev-pressed.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-scrollerNext:active {
-       background-image: url(img/tab-next-pressed.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-scrollerPrev-disabled,
-.v-tabsheet-scrollerPrev-disabled:active {
-       background-image: url(img/tab-prev-disabled.png); /** sprite-ref: verticals */
-       opacity: 1;
-       filter: none;
-}
-.v-tabsheet-scrollerNext-disabled,
-.v-tabsheet-scrollerNext-disabled:active {
-       background-image: url(img/tab-next-disabled.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */
-       opacity: 1;
-       filter: none;
-}
-.v-tabsheet-tabs .v-icon,
-.v-tabsheet-tabs .v-captiontext,
-.v-tabsheet-tabs .v-errorindicator {
-       display: inline;
-       float: none;
-}
-.v-sa .v-tabsheet-tabs .v-captiontext {
-       display: inline-block;
-}
-.v-tabsheet-tabs .v-icon {
-       width: 16px !important;
-       height: 16px !important;
-}
-.v-tabsheet-tabs .v-errorindicator {
-       display: inline-block;
-       width: 13px;
-       height: 16px;
-       background: transparent url(../common/icons/error.png) no-repeat 50%;
-}
-.v-ff2 .v-tabsheet-tabs .v-icon,
-.v-ff2 .v-tabsheet-tabs .v-errorindicator {
-       display: -moz-inline-stack;
-}
-.v-ie6 .v-tabsheet-tabs .v-errorindicator {
-       background-image: url(../common/icons/error-ie6.png);
-}
-.v-ie .v-tabsheet-tabs .v-errorindicator {
-       zoom: 1;
-       display: inline;
-}
-
-
-
-
-
-
-/**
- * Minimal style --------------
- */
-.v-tabsheet-minimal .v-tabsheet-spacertd div {
-       border-bottom: 1px solid #bfbfbf;
-       height: auto;
-       background: transparent;
-}
-.v-tabsheet-minimal .v-tabsheet-tabitemcell,
-.v-tabsheet-minimal .v-tabsheet-spacertd {
-       height: auto;
-       background: transparent;
-       padding-left: 0;
-}
-.v-tabsheet-minimal .v-tabsheet-tabitem {
-       border: none;
-       border-bottom: 1px solid #bfbfbf;
-       color: #4d748f;
-       padding: 0;
-       height: auto;
-       background: transparent;
-       text-shadow: none;
-}
-.v-tabsheet-minimal .v-tabsheet-tabitem .v-caption {
-       padding: 5px 16px;
-       height: auto;
-       background: transparent;
-}
-.v-tabsheet-minimal .v-tabsheet-tabitemcell-selected {
-       background: transparent;
-}
-.v-tabsheet-minimal .v-tabsheet-tabitem-selected {
-       background: transparent;
-       border: 1px solid #bfbfbf;
-       border-bottom: none;
-       color: #222;
-}
-.v-tabsheet-minimal .v-tabsheet-tabitem-selected .v-caption {
-       background: transparent;
-       padding: 4px 15px 6px 15px;
-}
-.v-tabsheet-content-minimal {
-       border: none;
-}
-.v-tabsheet-content-minimal .v-tabsheet-tabsheetpanel {
-       background: transparent;
-}
-.v-tabsheet-deco-minimal {
-       height: 0;
-       border: none;
-}
-.v-tabsheet-minimal .v-tabsheet-scroller {
-       margin-top: -20px;
-       height: 17px;
-       padding-right: 0;
-       border-right: none;
-       position: static;
-       float: none;
-}
-.v-tabsheet-minimal .v-tabsheet-scroller button {
-       margin-top: 0;
-}
-/* Minimal tabsheet on blue background */
-.blue .v-tabsheet-minimal .v-tabsheet-spacertd div,
-.blue .v-tabsheet-minimal .v-tabsheet-tabitem,
-.blue .v-tabsheet-minimal .v-tabsheet-tabitem-selected  {
-       border-color: #7c8a91;
-}
-/* Minimal tabsheet on black background */
-.black .v-tabsheet-minimal .v-tabsheet-spacertd div,
-.black .v-tabsheet-minimal .v-tabsheet-tabitem,
-.black .v-tabsheet-minimal .v-tabsheet-tabitem-selected  {
-       border-color: #3e4044;
-       color: #6a7f89;
-}
-.black .v-tabsheet-minimal .v-tabsheet-tabitem-selected {
-       color: #c9ccce;
-}
-.black .v-tabsheet-content-minimal,
-.black .v-tabsheet-content-bar {
-       color: #c9ccce;
-       text-shadow: #000 0 0 1px;
-}
-
-
-
-
-
-
-/**
- * Bar style ---------------
- */
-.v-tabsheet-bar .v-tabsheet-tabitemcell,
-.v-tabsheet-bar .v-tabsheet-spacertd {
-       height: 20px;
-}
-.v-tabsheet-bar .v-tabsheet-spacertd {
-       background: transparent;
-}
-.v-tabsheet-bar .v-tabsheet-tabitemcell {
-       background-image: url(img/bar/tab-left.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-bar .v-tabsheet-tabitemcell-first {
-       padding-left: 6px;
-       background-image: url(img/bar/tab-first-left.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-bar .v-tabsheet-tabitem,
-.v-tabsheet-bar .v-tabsheet-spacertd div {
-       height: 20px;
-       background-image: url(img/bar/tab-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
-       font-size: 11px;
-       margin: 0;
-}
-.v-tabsheet-bar .v-tabsheet-tabitem .v-caption {
-       height: 18px;
-       background-image: url(img/bar/tab-right.png); /** sprite-ref: verticals; sprite-alignment: right */
-       padding: 2px 12px 0 10px;
-}
-.v-tabsheet-bar .v-tabsheet-tabitemcell-selected {
-       background-image: url(img/bar/tab-left-sel.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-bar .v-tabsheet-tabitemcell-selected-first {
-       background-image: url(img/bar/tab-first-left-sel.png); /** sprite-ref: verticals */
-}
-.v-tabsheet-bar .v-tabsheet-tabitem-selected {
-       background-image: url(img/bar/tab-bg-sel.png); /** sprite-ref: verticals; sprite-alignment: repeat */
-       color: #232930;
-}
-.v-tabsheet-bar .v-tabsheet-tabitem-selected .v-caption {
-       background-image: url(img/bar/tab-right-sel.png); /** sprite-ref: verticals; sprite-alignment: right */
-}
-.v-tabsheet-bar .v-tabsheet-scroller {
-       margin-top: -19px;
-}
-.v-tabsheet-bar .v-tabsheet-scroller {
-       margin-top: -19px;
-       height: 17px;
-       padding-right: 0;
-       border-right: none;
-       position: static;
-       float: none;
-}
-.v-tabsheet-bar .v-tabsheet-scroller button {
-       margin-top: 0;
-}
-.v-tabsheet-content-bar {
-       border: none;
-}
-.v-tabsheet-content-bar .v-tabsheet-tabsheetpanel {
-       background: transparent;
-}
-.v-tabsheet-deco-bar {
-       height: 0;
-       border: none;
-}
-/* Content area font color specified with minimal style (reduces additional selectors) */
\ No newline at end of file
+/* These styles get catenated together on build */
+@import "tabsheet-normal-style.css";
+@import "tabsheet-scroller.css";
+@import "tabsheet-minimal-style.css";
+@import "tabsheet-bar-style.css";
\ No newline at end of file

diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css
index e2a5dd418fe20cf65520599261fdd4d2d109164e..8a35c1e4395035a2c8985b70619c83d6fe0e8977 100644 (file)
--- a/WebContent/VAADIN/themes/runo/styles.css
+++ b/WebContent/VAADIN/themes/runo/styles.css
@@ -1387,6 +1387,9 @@ div.v-progressindicator-indeterminate-disabled {
 .v-ff2 .v-tabsheet-scroller {
        position: relative;
 }
+.v-disabled .v-tabsheet-scroller {
+       display: none;
+}
 .v-tabsheet-scrollerPrev,
 .v-tabsheet-scrollerNext,
 .v-tabsheet-scrollerPrev-disabled,
@@ -1412,12 +1415,26 @@ div.v-progressindicator-indeterminate-disabled {
        zoom: 1;
        width: 16px;
        height: 16px;
-       background: url(../base/common/img/close.png) no-repeat;
+       text-align: center;
+       font-weight: bold;
        cursor: pointer;
        vertical-align: middle;
+       user-select: none;
+       -khtml-user-select: none;
+       -ms-user-select: none;
+       -moz-user-select: none;
+       -webkit-user-select: none;
 }
-.v-disabled .v-tabsheet-caption-close {
+.v-tabsheet .v-disabled .v-tabsheet-caption-close {
        cursor: default;
+       visibility: hidden;
+}
+.v-tabsheet-tabitemcell:hover .v-tabsheet-caption-close,
+.v-ie6 .v-tabsheet-caption-close {
+       visibility: visible;
+}
+.v-ie6 .v-tabsheet-caption-close {
+       float: right;
 }
 .v-tabsheet-tabitem {
        border: 1px solid #aaa;
@@ -1642,9 +1659,9 @@ div.v-tree-node-leaf {
        position: absolute;
        top: 0;
        right: 0;
-       width: 16px;
-       height: 16px;
-       background: url(../base/common/img/close.png) no-repeat;
+       width: 1em;
+       height: 1em;
+       background: red;
        cursor: pointer;
        overflow: hidden;
 }
@@ -3019,6 +3036,23 @@ div.v-tree-node-leaf {
        padding: 16px 16px 14px 7px;
        overflow: visible;
 }
+.v-tabsheet-caption-close {
+       margin-left: 3px;
+       margin-right: -3px;
+       width: 16px;
+       height: 16px;
+       -webkit-border-radius: 8px;
+       -moz-border-radius: 8px;
+       color: #777f85;
+       line-height: 13px;
+}
+.v-tabsheet-caption-close:hover {
+       background: #dce0e0;
+}
+.v-tabsheet-caption-close:active {
+       background: #b6bbbc;
+       color: #fff;
+}
 .v-tabsheet-content {
        border: 1px solid #babfc0;
        background-color: #fff;

diff --git a/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.css b/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.css
index fa99f6ae4381d1733adaa7f93e9f392abdef54dd..3b738107b2582e2c7fab7c418ad7ff471b6279eb 100644 (file)
--- a/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.css
+++ b/WebContent/VAADIN/themes/runo/tabsheet/tabsheet.css
@@ -83,6 +83,23 @@
        padding: 16px 16px 14px 7px;
        overflow: visible;
 }
+.v-tabsheet-caption-close {
+       margin-left: 3px;
+       margin-right: -3px;
+       width: 16px;
+       height: 16px;
+       -webkit-border-radius: 8px;
+       -moz-border-radius: 8px;
+       color: #777f85;
+       line-height: 13px;
+}
+.v-tabsheet-caption-close:hover {
+       background: #dce0e0;
+}
+.v-tabsheet-caption-close:active {
+       background: #b6bbbc;
+       color: #fff;
+}
 .v-tabsheet-content {
        border: 1px solid #babfc0;
        background-color: #fff;

diff --git a/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-bottom.png b/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-bottom.png
new file mode 100644 (file)
index 0000000..976e6fa
Binary files /dev/null and b/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-bottom.png differ

diff --git a/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-top.png b/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-top.png
new file mode 100644 (file)
index 0000000..87a687f
Binary files /dev/null and b/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-top.png differ

diff --git a/WebContent/VAADIN/themes/sampler/sampler/home/label-grad.png b/WebContent/VAADIN/themes/sampler/sampler/home/label-grad.png
new file mode 100644 (file)
index 0000000..d44d24b
Binary files /dev/null and b/WebContent/VAADIN/themes/sampler/sampler/home/label-grad.png differ

diff --git a/src/com/vaadin/terminal/gwt/client/ui/VTabsheet.java b/src/com/vaadin/terminal/gwt/client/ui/VTabsheet.java
index f73a2d4fc1f298b480482067687eaf8827285889..e66bf0fbc9e624c6d0e08044df03839271af6ee2 100644 (file)
--- a/src/com/vaadin/terminal/gwt/client/ui/VTabsheet.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/VTabsheet.java
@@ -36,6 +36,8 @@ public class VTabsheet extends VTabsheetBase {
     private class TabSheetCaption extends VCaption {
 
         private boolean hidden = false;
+        private boolean closable = false;
+        private Element closeButton;
 
         TabSheetCaption() {
             super(null, client);
@@ -57,12 +59,29 @@ public class VTabsheet extends VTabsheetBase {
                 client.registerTooltip(VTabsheet.this, getElement(), null);
             }
 
-            return super.updateCaption(uidl);
+            boolean ret = super.updateCaption(uidl);
+
+            setClosable(uidl.hasAttribute("closable"));
+
+            return ret;
         }
 
         @Override
         public void onBrowserEvent(Event event) {
+            if (closable && event.getTypeInt() == Event.ONCLICK
+                    && event.getEventTarget().cast() == closeButton) {
+                final String tabKey = tabKeys.get(tb.getTabIndex(this))
+                        .toString();
+                if (!disabledTabKeys.contains(tabKey)) {
+                    client.updateVariable(id, "close", tabKey, true);
+                    event.stopPropagation();
+                    event.preventDefault();
+                    return;
+                }
+            }
+
             super.onBrowserEvent(event);
+
             if (event.getTypeInt() == Event.ONLOAD) {
                 // icon onloads may change total width of tabsheet
                 if (isDynamicWidth()) {
@@ -108,6 +127,35 @@ public class VTabsheet extends VTabsheetBase {
             this.hidden = hidden;
         }
 
+        public void setClosable(boolean closable) {
+            this.closable = closable;
+            if (closable && closeButton == null) {
+                closeButton = DOM.createSpan();
+                closeButton.setInnerText("x");
+                closeButton
+                        .setClassName(VTabsheet.CLASSNAME + "-caption-close");
+                getElement().insertBefore(closeButton,
+                        getElement().getLastChild());
+            } else if (!closable && closeButton != null) {
+                getElement().removeChild(closeButton);
+                closeButton = null;
+            }
+            if (closable) {
+                addStyleDependentName("closable");
+            } else {
+                removeStyleDependentName("closable");
+            }
+        }
+
+        @Override
+        public int getRequiredWidth() {
+            int width = super.getRequiredWidth();
+            if (closeButton != null) {
+                width += Util.getRequiredWidth(closeButton);
+            }
+            return width;
+        }
+
     }
 
     class TabBar extends ComplexPanel implements ClickHandler {
@@ -217,6 +265,10 @@ public class VTabsheet extends VTabsheetBase {
             return (TabSheetCaption) getWidget(index);
         }
 
+        public int getTabIndex(TabSheetCaption tab) {
+            return getChildren().indexOf(tab);
+        }
+
         public void setVisible(int index, boolean visible) {
             com.google.gwt.dom.client.Element e = getTab(index).getElement()
                     .getParentElement().getParentElement();
@@ -804,13 +856,13 @@ public class VTabsheet extends VTabsheetBase {
         // Make sure scrollerIndex is valid
         if (scrollerIndex > tb.getTabCount()) {
             scrollerIndex = getNextVisibleTab(-1);
-        } else if (tb.getTab(scrollerIndex).isHidden()) {
+        } else if (tb.getTabCount() > 0 && tb.getTab(scrollerIndex).isHidden()) {
             scrollerIndex = getNextVisibleTab(scrollerIndex);
         }
 
         boolean scrolled = isScrolledTabs();
         boolean clipped = isClippedTabs();
-        if (tb.isVisible() && (scrolled || clipped)) {
+        if (tb.getTabCount() > 0 && tb.isVisible() && (scrolled || clipped)) {
             DOM.setStyleAttribute(scroller, "display", "");
             DOM.setElementProperty(scrollerPrev, "className",
                     SCROLLER_CLASSNAME + (scrolled ? "Prev" : "Prev-disabled"));

diff --git a/src/com/vaadin/ui/TabSheet.java b/src/com/vaadin/ui/TabSheet.java
index ed81fdb6554c890ecbbfd9ed663fa9d8318ad2dd..b58e7be7bf828ce98110a8bde36818273f7733b2 100644 (file)
--- a/src/com/vaadin/ui/TabSheet.java
+++ b/src/com/vaadin/ui/TabSheet.java
@@ -35,7 +35,7 @@ public class TabSheet extends AbstractComponentContainer implements
     /**
      * Linked list of component tabs.
      */
-    private final LinkedList components = new LinkedList();
+    private final LinkedList<Component> components = new LinkedList<Component>();
 
     /**
      * Map containing information related to the tabs (caption, icon etc).
@@ -54,7 +54,9 @@ public class TabSheet extends AbstractComponentContainer implements
      */
     private boolean tabsHidden;
 
-    private LinkedList paintedTabs = new LinkedList();
+    private LinkedList<Component> paintedTabs = new LinkedList<Component>();
+
+    private CloseHandler closeHandler;
 
     /**
      * Constructs a new Tabsheet. Tabsheet is immediate by default.
@@ -64,6 +66,11 @@ public class TabSheet extends AbstractComponentContainer implements
         // expand horizontally by default
         setWidth(100, UNITS_PERCENTAGE);
         setImmediate(true);
+        setCloseHandler(new CloseHandler() {
+            public void onTabClose(TabSheet tabsheet, Component c) {
+                tabsheet.removeComponent(c);
+            }
+        });
     }
 
     /**
@@ -72,7 +79,7 @@ public class TabSheet extends AbstractComponentContainer implements
      * 
      * @return the Iterator of the components inside the container.
      */
-    public Iterator getComponentIterator() {
+    public Iterator<Component> getComponentIterator() {
         return java.util.Collections.unmodifiableList(components).iterator();
     }
 
@@ -93,7 +100,7 @@ public class TabSheet extends AbstractComponentContainer implements
                 if (components.isEmpty()) {
                     selected = null;
                 } else {
-                    selected = (Component) components.getFirst();
+                    selected = components.getFirst();
                     fireSelectedTabChange();
                 }
             }
@@ -168,8 +175,9 @@ public class TabSheet extends AbstractComponentContainer implements
      */
     @Override
     public void moveComponentsFrom(ComponentContainer source) {
-        for (final Iterator i = source.getComponentIterator(); i.hasNext();) {
-            final Component c = (Component) i.next();
+        for (final Iterator<Component> i = source.getComponentIterator(); i
+                .hasNext();) {
+            final Component c = i.next();
             String caption = null;
             Resource icon = null;
             if (TabSheet.class.isAssignableFrom(source.getClass())) {
@@ -199,8 +207,8 @@ public class TabSheet extends AbstractComponentContainer implements
 
         target.startTag("tabs");
 
-        for (final Iterator i = getComponentIterator(); i.hasNext();) {
-            final Component component = (Component) i.next();
+        for (final Iterator<Component> i = getComponentIterator(); i.hasNext();) {
+            final Component component = i.next();
             Tab tab = tabs.get(component);
 
             /*
@@ -236,6 +244,10 @@ public class TabSheet extends AbstractComponentContainer implements
                 target.addAttribute("hidden", true);
             }
 
+            if (tab.isClosable()) {
+                target.addAttribute("closable", true);
+            }
+
             final Resource icon = tab.getIcon();
             if (icon != null) {
                 target.addAttribute("icon", icon);
@@ -417,6 +429,13 @@ public class TabSheet extends AbstractComponentContainer implements
             setSelectedTab((Component) keyMapper.get((String) variables
                     .get("selected")));
         }
+        if (variables.containsKey("close")) {
+            final Component tab = (Component) keyMapper.get((String) variables
+                    .get("close"));
+            if (tab != null) {
+                closeHandler.onTabClose(this, tab);
+            }
+        }
     }
 
     /* Documented in superclass */
@@ -453,8 +472,8 @@ public class TabSheet extends AbstractComponentContainer implements
         int oldLocation = -1;
         int newLocation = -1;
         int location = 0;
-        for (final Iterator i = components.iterator(); i.hasNext();) {
-            final Component component = (Component) i.next();
+        for (final Iterator<Component> i = components.iterator(); i.hasNext();) {
+            final Component component = i.next();
 
             if (component == oldComponent) {
                 oldLocation = location;
@@ -635,6 +654,23 @@ public class TabSheet extends AbstractComponentContainer implements
          */
         public void setVisible(boolean visible);
 
+        /**
+         * Returns the closability status for the tab.
+         * 
+         * @return true if the tab is allowed to be closed by the end user,
+         *         false for not allowing closing
+         */
+        public boolean isClosable();
+
+        /**
+         * Sets the closability status for the tab.
+         * 
+         * @param visible
+         *            true if the end user is allowed to close the tab, false
+         *            for not allowing to close. Should default to false.
+         */
+        public void setClosable(boolean closable);
+
         /**
          * Returns the enabled status for the tab.
          * 
@@ -710,6 +746,7 @@ public class TabSheet extends AbstractComponentContainer implements
         private Resource icon = null;
         private boolean enabled = true;
         private boolean visible = true;
+        private boolean closable = false;
         private String description = null;
         private ErrorMessage componentError = null;
 
@@ -760,6 +797,19 @@ public class TabSheet extends AbstractComponentContainer implements
             requestRepaint();
         }
 
+        public boolean isClosable() {
+            return closable;
+        }
+
+        public void setClosable(boolean closable) {
+            this.closable = closable;
+            requestRepaint();
+        }
+
+        public void close() {
+
+        }
+
         public String getDescription() {
             return description;
         }
@@ -777,6 +827,44 @@ public class TabSheet extends AbstractComponentContainer implements
             this.componentError = componentError;
             requestRepaint();
         }
+    }
+
+    /**
+     * CloseHandler is used to process tab closing events. Default behavior is
+     * to remove the tab from the TabSheet.
+     * 
+     * @author Jouni Koivuviita / IT Mill Ltd.
+     * @since 6.2.0
+     * 
+     */
+    public interface CloseHandler {
 
+        /**
+         * Called when a user has pressed the close icon of a tab in the client
+         * side widget.
+         * 
+         * @param tabsheet
+         *            the TabSheet to which the tab belongs to
+         * @param tabContent
+         *            the component that corresponds to the tab whose close
+         *            button was clicked
+         */
+        void onTabClose(final TabSheet tabsheet, final Component tabContent);
+    }
+
+    /**
+     * Provide a custom {@link CloseHandler} for this TabSheet if you wish to
+     * perform some additional tasks when a user clicks on a tabs close button,
+     * e.g. show a confirmation dialogue before removing the tab.
+     * 
+     * To remove the tab, if you provide your own close handler, you must call
+     * {@link #removeComponent(Component)} yourself.
+     * 
+     * The default CloseHandler for TabSheet will only remove the tab.
+     * 
+     * @param handler
+     */
+    public void setCloseHandler(CloseHandler handler) {
+        closeHandler = handler;
     }
 }