diff options
Diffstat (limited to 'WebContent')
16 files changed, 447 insertions, 21 deletions
diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss index 58f0c32af7..efe6e0cd05 100644 --- a/WebContent/VAADIN/themes/base/base.scss +++ b/WebContent/VAADIN/themes/base/base.scss @@ -1,6 +1,7 @@ @import "absolutelayout/absolutelayout.scss"; @import "accordion/accordion.scss"; @import "button/button.scss"; +@import "boxlayout/boxlayout.scss"; @import "caption/caption.scss"; @import "common/common.scss"; @import "csslayout/csslayout.scss"; diff --git a/WebContent/VAADIN/themes/base/boxlayout/boxlayout.css b/WebContent/VAADIN/themes/base/boxlayout/boxlayout.css new file mode 100644 index 0000000000..f899e8f4ac --- /dev/null +++ b/WebContent/VAADIN/themes/base/boxlayout/boxlayout.css @@ -0,0 +1,167 @@ +/* +TODO +- separate styles to proper places +- decide a good class name structure for core layouts (e.g. 'v-layout', 'v-vertical', 'v-grid' etc.) +- use !important in carefully selected places to prevent accidental layout breakage by custom theming (e.g. alignments should be forced) + +*/ + +.v-boxlayout.v-margin-top {padding-top: 12px;} +.v-boxlayout.v-margin-right {padding-right: 12px;} +.v-boxlayout.v-margin-bottom {padding-bottom: 12px;} +.v-boxlayout.v-margin-left {padding-left: 12px;} + +.v-spacing { + width: 6px; + height: 6px; +} + +.v-boxlayout { + display: inline-block; +} + +div.v-boxlayout.v-horizontal.v { + white-space: nowrap; +} + +.v-boxlayout > .v-expand { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + height: 100%; +} + +.v-slot, +.v-spacing { + display: inline-block; + white-space: normal; + vertical-align: top; +} + +/* Clear any floats inside the slot, to prevent unwanted collapsing */ +.v-vertical > .v-slot:after { + content: ""; + display: inline-block; + clear: both; + width: 0; + height: 0; + overflow: hidden; +} + +.v-vertical > .v-slot, +.v-vertical > .v-expand > .v-slot { + display: block; + clear: both; +} + +.v-horizontal > .v-slot, +.v-horizontal > .v-expand > .v-slot { + height: 100%; +} + +.v-vertical > .v-spacing, +.v-vertical > .v-expand > .v-spacing { + width: 0; + display: block; + clear: both; +} + +.v-horizontal > .v-spacing, +.v-horizontal > .v-expand > .v-spacing { + height: 0; +} + +.v-align-middle:before, +.v-align-bottom:before, +.v-expand > .v-align-middle:before, +.v-expand > .v-align-bottom:before { + content: ""; + display: inline-block; + height: 100%; + vertical-align: middle; + width: 0; +} + +.v-align-middle, +.v-align-bottom { + white-space: nowrap; +} + +.v-align-middle > .v, +.v-align-bottom > .v { + display: inline-block; +} + +.v-align-middle, +.v-align-middle > .v { + vertical-align: middle; +} + +.v-align-bottom, +.v-align-bottom > .v { + vertical-align: bottom; +} + +.v-align-center { + text-align: center; +} + +.v-align-center > .v { + margin-left: auto; + margin-right: auto; +} + +.v-align-right { + text-align: right; +} + +.v-align-right > .v { + margin-left: auto; +} + +.v-has-caption, +.v-has-caption > .v-caption { + display: inline-block; /* Force natural width to zero */ +} + +.v-caption { + overflow: visible; + vertical-align: middle; +} + +.v-caption-on-left, +.v-caption-on-right { + white-space: nowrap; +} + +.v-caption-on-top > .v-caption, +.v-caption-on-bottom > .v-caption { + display: block; +} + +.v-caption-on-left > .v-caption { + padding-right: .5em; +} + +.v-caption-on-right > .v-caption { + padding-left: .5em; +} + +.v-caption-on-left > .v, +.v-caption-on-right > .v { + display: inline-block; + vertical-align: middle; +} + +.v-has-caption.v-has-width > .v { + width: 100% !important; +} + +.v-has-caption.v-has-height > .v { + height: 100% !important; +} + +.v-errorindicator { + vertical-align: middle; +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/base/boxlayout/boxlayout.scss b/WebContent/VAADIN/themes/base/boxlayout/boxlayout.scss new file mode 100644 index 0000000000..ef0f021a0a --- /dev/null +++ b/WebContent/VAADIN/themes/base/boxlayout/boxlayout.scss @@ -0,0 +1,171 @@ +/* +TODO +- separate styles to proper places +- decide a good class name structure for core layouts (e.g. 'v-layout', 'v-vertical', 'v-grid' etc.) +- use !important in carefully selected places to prevent accidental layout breakage by custom theming (e.g. alignments should be forced) + +*/ + +@mixin base-boxlayout { + +.v-boxlayout.v-margin-top {padding-top: 12px;} +.v-boxlayout.v-margin-right {padding-right: 12px;} +.v-boxlayout.v-margin-bottom {padding-bottom: 12px;} +.v-boxlayout.v-margin-left {padding-left: 12px;} + +.v-spacing { + width: 6px; + height: 6px; +} + +.v-boxlayout { + display: inline-block; +} + +div.v-boxlayout.v-horizontal.v { + white-space: nowrap; +} + +.v-boxlayout > .v-expand { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + height: 100%; +} + +.v-slot, +.v-spacing { + display: inline-block; + white-space: normal; + vertical-align: top; +} + +/* Clear any floats inside the slot, to prevent unwanted collapsing */ +.v-vertical > .v-slot:after { + content: ""; + display: inline-block; + clear: both; + width: 0; + height: 0; + overflow: hidden; +} + +.v-vertical > .v-slot, +.v-vertical > .v-expand > .v-slot { + display: block; + clear: both; +} + +.v-horizontal > .v-slot, +.v-horizontal > .v-expand > .v-slot { + height: 100%; +} + +.v-vertical > .v-spacing, +.v-vertical > .v-expand > .v-spacing { + width: 0; + display: block; + clear: both; +} + +.v-horizontal > .v-spacing, +.v-horizontal > .v-expand > .v-spacing { + height: 0; +} + +.v-align-middle:before, +.v-align-bottom:before, +.v-expand > .v-align-middle:before, +.v-expand > .v-align-bottom:before { + content: ""; + display: inline-block; + height: 100%; + vertical-align: middle; + width: 0; +} + +.v-align-middle, +.v-align-bottom { + white-space: nowrap; +} + +.v-align-middle > .v, +.v-align-bottom > .v { + display: inline-block; +} + +.v-align-middle, +.v-align-middle > .v { + vertical-align: middle; +} + +.v-align-bottom, +.v-align-bottom > .v { + vertical-align: bottom; +} + +.v-align-center { + text-align: center; +} + +.v-align-center > .v { + margin-left: auto; + margin-right: auto; +} + +.v-align-right { + text-align: right; +} + +.v-align-right > .v { + margin-left: auto; +} + +.v-has-caption, +.v-has-caption > .v-caption { + display: inline-block; /* Force natural width to zero */ +} + +.v-caption { + overflow: visible; + vertical-align: middle; +} + +.v-caption-on-left, +.v-caption-on-right { + white-space: nowrap; +} + +.v-caption-on-top > .v-caption, +.v-caption-on-bottom > .v-caption { + display: block; +} + +.v-caption-on-left > .v-caption { + padding-right: .5em; +} + +.v-caption-on-right > .v-caption { + padding-left: .5em; +} + +.v-caption-on-left > .v, +.v-caption-on-right > .v { + display: inline-block; + vertical-align: middle; +} + +.v-has-caption.v-has-width > .v { + width: 100% !important; +} + +.v-has-caption.v-has-height > .v { + height: 100% !important; +} + +.v-errorindicator { + vertical-align: middle; +} + +}
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/base/button/button.scss b/WebContent/VAADIN/themes/base/button/button.scss index 1d3c4abec1..a9e7867268 100644 --- a/WebContent/VAADIN/themes/base/button/button.scss +++ b/WebContent/VAADIN/themes/base/button/button.scss @@ -6,7 +6,7 @@ .v-button { display: inline-block; zoom: 1; - text-align: center; + text-align: center !important; text-decoration: none; border: 2px outset #ddd; background: #eee; @@ -23,7 +23,6 @@ user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; - -ms-box-sizing: border-box; box-sizing: border-box; } @@ -59,7 +58,7 @@ .v-button-link, .v-nativebutton-link { border: none; - text-align: left; + text-align: left !important; background: transparent; padding: 0; color: inherit; @@ -86,7 +85,7 @@ * NativeButton styles (html button element) * -------------------------------------- */ .v-nativebutton { - text-align: center; + text-align: center !important; cursor: pointer; white-space: nowrap; margin: 0; @@ -160,4 +159,4 @@ } */ -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/base/csslayout/csslayout.scss b/WebContent/VAADIN/themes/base/csslayout/csslayout.scss index 7bd26d4197..c2c1b698ad 100644 --- a/WebContent/VAADIN/themes/base/csslayout/csslayout.scss +++ b/WebContent/VAADIN/themes/base/csslayout/csslayout.scss @@ -3,6 +3,10 @@ .v-csslayout { overflow: hidden; } +/* More specific selector to override 'v-connector' */ +div.v-csslayout { + display: block; +} .v-csslayout-margin, .v-csslayout-container { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; diff --git a/WebContent/VAADIN/themes/base/datefield/datefield.scss b/WebContent/VAADIN/themes/base/datefield/datefield.scss index 12ce3df980..bf95baa3e6 100644 --- a/WebContent/VAADIN/themes/base/datefield/datefield.scss +++ b/WebContent/VAADIN/themes/base/datefield/datefield.scss @@ -2,7 +2,7 @@ .v-datefield { white-space: nowrap; - float: left; /* Force minimum width */ + display: inline-block; /* Force minimum width */ } .v-datefield-textfield { vertical-align: top; @@ -90,4 +90,4 @@ } */ -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/base/label/label.scss b/WebContent/VAADIN/themes/base/label/label.scss index e4f3f89062..ae1539acc9 100644 --- a/WebContent/VAADIN/themes/base/label/label.scss +++ b/WebContent/VAADIN/themes/base/label/label.scss @@ -4,4 +4,8 @@ overflow: hidden; } +.v-label.v-has-width { + white-space: normal; +} + }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/base/menubar/menubar.scss b/WebContent/VAADIN/themes/base/menubar/menubar.scss index 79b94a63af..512a8ee1d5 100644 --- a/WebContent/VAADIN/themes/base/menubar/menubar.scss +++ b/WebContent/VAADIN/themes/base/menubar/menubar.scss @@ -1,7 +1,7 @@ @mixin base-menubar { .v-menubar { - float: left; /* Force minimum width */ + display: inline-block; white-space: nowrap; overflow: hidden; } @@ -95,4 +95,4 @@ background: transparent url(img/check.gif) no-repeat left; } -}
\ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/base/paintable/paintable.scss b/WebContent/VAADIN/themes/base/paintable/paintable.scss index 87431ee225..92f30604ff 100644 --- a/WebContent/VAADIN/themes/base/paintable/paintable.scss +++ b/WebContent/VAADIN/themes/base/paintable/paintable.scss @@ -1,9 +1,12 @@ @mixin base-paintable { -.v-connector { +.v { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + text-align: left; + display: inline-block; + white-space: normal; } }
\ No newline at end of file diff --git a/WebContent/VAADIN/themes/base/styles.scss b/WebContent/VAADIN/themes/base/styles.scss index 89f76947f8..7a650d0818 100644 --- a/WebContent/VAADIN/themes/base/styles.scss +++ b/WebContent/VAADIN/themes/base/styles.scss @@ -3,7 +3,9 @@ // @include base-app; // everything included from base theme -// other themes should enclose corresponding definitions in theme selectors +// other themes should enclose corresponding definitions in theme selectors + +@include base-paintable; @include base-absolutelayout; @include base-accordion; @@ -13,6 +15,7 @@ // here for now to preserve old semantics @include base-common; +@include base-boxlayout; @include base-csslayout; @include base-customcomponent; @include base-customlayout; @@ -27,7 +30,6 @@ @include base-menubar; @include base-notification; @include base-orderedlayout; -@include base-paintable; @include base-panel; @include base-popupview; @include base-progressindicator; diff --git a/WebContent/VAADIN/themes/base/textfield/textfield.scss b/WebContent/VAADIN/themes/base/textfield/textfield.scss index b8e54e6887..dc6a4d9aa3 100644 --- a/WebContent/VAADIN/themes/base/textfield/textfield.scss +++ b/WebContent/VAADIN/themes/base/textfield/textfield.scss @@ -7,6 +7,7 @@ } .v-textarea { resize: none; + white-space: pre-wrap; } .v-textfield-focus, .v-textarea-focus { diff --git a/WebContent/VAADIN/themes/reindeer/common/common.scss b/WebContent/VAADIN/themes/reindeer/common/common.scss index 86f546a6a2..3971f1777d 100644 --- a/WebContent/VAADIN/themes/reindeer/common/common.scss +++ b/WebContent/VAADIN/themes/reindeer/common/common.scss @@ -43,7 +43,7 @@ } .v-errorindicator { width: 13px; - height: 16px; + height: 14px; background: transparent url(../common/icons/error.png) no-repeat 50%; } .v-tooltip { diff --git a/WebContent/VAADIN/themes/reindeer/layouts/layouts.scss b/WebContent/VAADIN/themes/reindeer/layouts/layouts.scss index 832e480010..e1bef65f1e 100644 --- a/WebContent/VAADIN/themes/reindeer/layouts/layouts.scss +++ b/WebContent/VAADIN/themes/reindeer/layouts/layouts.scss @@ -2,22 +2,26 @@ .v-orderedlayout-margin-top, .v-horizontallayout-margin-top, -.v-verticallayout-margin-top { +.v-verticallayout-margin-top, +.v-boxlayout.v-margin-top { padding-top: 18px; } .v-orderedlayout-margin-right, .v-horizontallayout-margin-right, -.v-verticallayout-margin-right { +.v-verticallayout-margin-right, +.v-boxlayout.v-margin-right { padding-right: 18px; } .v-orderedlayout-margin-bottom, .v-horizontallayout-margin-bottom, -.v-verticallayout-margin-bottom { +.v-verticallayout-margin-bottom, +.v-boxlayout.v-margin-bottom { padding-bottom: 18px; } .v-orderedlayout-margin-left, .v-horizontallayout-margin-left, -.v-verticallayout-margin-left { +.v-verticallayout-margin-left, +.v-boxlayout.v-margin-left { padding-left: 18px; } .v-orderedlayout-spacing-on, @@ -26,6 +30,10 @@ padding-top: 7px; padding-left: 6px; } +.v-spacing { + height: 7px; + width: 6px; +} /* Different for historical reasons: previously was inherited directly from Base theme */ /* TODO unify these values in version 7 */ .v-gridlayout-margin-top { diff --git a/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.scss b/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.scss index a8c85d9af6..37ae0279b6 100644 --- a/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.scss +++ b/WebContent/VAADIN/themes/runo/orderedlayout/orderedlayout.scss @@ -3,25 +3,29 @@ .v-orderedlayout-margin-top, .v-horizontallayout-margin-top, .v-verticallayout-margin-top, -.v-csslayout-margin-top { +.v-csslayout-margin-top, +.v-boxlayout.v-margin-top { padding-top: 15px; } .v-orderedlayout-margin-right, .v-horizontallayout-margin-right, .v-verticallayout-margin-right, -.v-csslayout-margin-right { +.v-csslayout-margin-right, +.v-boxlayout.v-margin-right { padding-right: 18px; } .v-orderedlayout-margin-bottom, .v-horizontallayout-margin-bottom, .v-verticallayout-margin-bottom, -.v-csslayout-margin-bottom { +.v-csslayout-margin-bottom, +.v-boxlayout.v-margin-bottom { padding-bottom: 15px; } .v-orderedlayout-margin-left, .v-horizontallayout-margin-left, .v-verticallayout-margin-left, -.v-csslayout-margin-left { +.v-csslayout-margin-left, +.v-boxlayout.v-margin-left { padding-left: 18px; } .v-orderedlayout-spacing-on, @@ -30,6 +34,10 @@ padding-top: 8px; padding-left: 8px; } +.v-spacing { + width: 8px; + height: 8px; +} .v-verticallayout-darker, .v-horizontallayout-darker, .v-gridlayout-darker, diff --git a/WebContent/VAADIN/themes/tests-components/styles.css b/WebContent/VAADIN/themes/tests-components/styles.css index c38f32f132..45a96b6d16 100644 --- a/WebContent/VAADIN/themes/tests-components/styles.css +++ b/WebContent/VAADIN/themes/tests-components/styles.css @@ -36,4 +36,21 @@ .v-table-row-tables-test-cell-style-red-row, .v-table-cell-content-tables-test-cell-style-red-row { background: #f00; +} + +.v-boxlayout.test { + border: 1px solid #ddd; +} + +.v-boxlayout.test .target { + outline: 2px dashed blue; +} + +.fieldset { + padding: .5em 1em; + -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); + -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); + box-shadow: inset 0 1px 2px rgba(0,0,0,.2); + border-radius: .5em; + background: rgba(0,0,0,.02); }
\ No newline at end of file diff --git a/WebContent/layout-resize-test.html b/WebContent/layout-resize-test.html new file mode 100644 index 0000000000..b798402bb7 --- /dev/null +++ b/WebContent/layout-resize-test.html @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> +<title>LayoutResizeTest opener</title> +</head> +<body> + +<button onclick="testV7()">Open LayoutResizeTest (Vaadin 7)</button><br> +<button onclick="testV6()">Open LayoutResizeTest (Vaadin 6)</button><br> +<button onclick="resize1()">Resize to 650x450</button><br> +<button onclick="resize2()">Resize to 950x750</button> + + +<script> +var win1, win2; + +function testV7() { + win1 = window.open('/vaadin/run/com.vaadin.tests.components.orderedlayout.LayoutResizeTest?restartApplication&debug','layoutResizeTestV7','width=800,height=600'); +} + +function testV6() { + win2 = window.open('/LayoutBenchmark/?restartApplication&debug','layoutResizeTestV6','width=800,height=600'); +} + +function resize1() { + if(win1) + win1.resizeTo(650,450); + if(win2) + win2.resizeTo(650,450); +} + +function resize2() { + if(win1) + win1.resizeTo(950,750); + if(win2) + win2.resizeTo(950,750); +} +</script> +</body> +</html>
\ No newline at end of file |