diff options
23 files changed, 988 insertions, 445 deletions
diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css index 5908dcec9f..e0908ddd88 100644 --- 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 8520f35913..6fd1f1470a 100644 --- 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 Binary files differindex c4ee4bdcd1..c11ee47f9e 100644 --- a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png +++ b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites-ie6.png diff --git a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png Binary files differindex b68e51aca4..4a4537ac06 100644 --- a/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png +++ b/WebContent/VAADIN/themes/reindeer/common/img/vertical-sprites.png diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css index 1aa84f88d3..be563abfc3 100644 --- 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 Binary files differnew file mode 100644 index 0000000000..f548db838a --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-hover.png diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-pressed.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-pressed.png Binary files differnew file mode 100644 index 0000000000..a39a4431b3 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-pressed.png 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 Binary files differnew file mode 100644 index 0000000000..31a0d1f3f5 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-hover.png 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 Binary files differnew file mode 100644 index 0000000000..9aae58c427 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel-pressed.png diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel.png Binary files differnew file mode 100644 index 0000000000..e0cd398707 --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn-sel.png diff --git a/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn.png b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn.png Binary files differnew file mode 100644 index 0000000000..9407f7b82c --- /dev/null +++ b/WebContent/VAADIN/themes/reindeer/tabsheet/img/close-btn.png 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 index 0000000000..ec985ad993 --- /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 index 0000000000..d80f292055 --- /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 index 0000000000..607b25b794 --- /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 index 0000000000..217676558e --- /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 289660eb3b..fddef9a287 100644 --- 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 e2a5dd418f..8a35c1e439 100644 --- 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 fa99f6ae43..3b738107b2 100644 --- 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 Binary files differnew file mode 100644 index 0000000000..976e6fad5e --- /dev/null +++ b/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-bottom.png diff --git a/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-top.png b/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-top.png Binary files differnew file mode 100644 index 0000000000..87a687f10f --- /dev/null +++ b/WebContent/VAADIN/themes/sampler/sampler/home/btn-shadow-top.png diff --git a/WebContent/VAADIN/themes/sampler/sampler/home/label-grad.png b/WebContent/VAADIN/themes/sampler/sampler/home/label-grad.png Binary files differnew file mode 100644 index 0000000000..d44d24bf2c --- /dev/null +++ b/WebContent/VAADIN/themes/sampler/sampler/home/label-grad.png diff --git a/src/com/vaadin/terminal/gwt/client/ui/VTabsheet.java b/src/com/vaadin/terminal/gwt/client/ui/VTabsheet.java index f73a2d4fc1..e66bf0fbc9 100644 --- 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 ed81fdb655..b58e7be7bf 100644 --- 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; @@ -636,6 +655,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. * * @return true for enabled, false for disabled @@ -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; } } |
