Maximize Restore for Window #3400

Change-Id: I164ae83bd6cf98f7a3d7e76d8e717a56e8cb5183

5 files changed, 64 insertions, 6 deletions

diff --git a/WebContent/VAADIN/themes/base/window/window.scss b/WebContent/VAADIN/themes/base/window/window.scss
index b9e7b54139..05f3b115ad 100644
--- a/WebContent/VAADIN/themes/base/window/window.scss
+++ b/WebContent/VAADIN/themes/base/window/window.scss
@@ -38,6 +38,10 @@
 }
 .#{$primaryStyleName}-header {
 	font-weight: bold;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ie-user-select: none;
+	user-select: none;
 }
 /* A more specific selector to make sure padding isn't so easily overridden */
 div.#{$primaryStyleName}-header {
@@ -77,20 +81,37 @@ div.#{$primaryStyleName}-header {
 .#{$primaryStyleName} div.#{$primaryStyleName}-footer-noresize {
 	height: 0;
 }
-.#{$primaryStyleName}-resizebox-disabled {
+.#{$primaryStyleName}-resizebox-disabled,
+.#{$primaryStyleName}-restorebox-disabled,
+.#{$primaryStyleName}-maximizebox-disabled {
 	cursor: default;
 	display: none;
 }
-.#{$primaryStyleName}-closebox {
+.#{$primaryStyleName}-closebox,
+.#{$primaryStyleName}-restorebox,
+.#{$primaryStyleName}-maximizebox {
 	position: absolute;
 	top: 0;
 	right: 0;
 	width: 1em;
 	height: 1em;
-	background: red;
 	cursor: pointer;
 	overflow: hidden;
 }
+.#{$primaryStyleName}-maximizebox,
+.#{$primaryStyleName}-restorebox {
+	right: 1.1em;
+}
+
+.#{$primaryStyleName}-closebox {
+	background: red;
+}
+.#{$primaryStyleName}-maximizebox {
+	background: blue;
+}
+.#{$primaryStyleName}-restorebox {
+	background: yellow;
+}
 .#{$primaryStyleName}-modalitycurtain {
 	top: 0;
 	left: 0;
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/maximize.png b/WebContent/VAADIN/themes/reindeer/window/img/maximize.png
new file mode 100644
index 0000000000..86ffff9760
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/maximize.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/img/restore.png b/WebContent/VAADIN/themes/reindeer/window/img/restore.png
new file mode 100644
index 0000000000..119ea04259
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/window/img/restore.png
diff --git a/WebContent/VAADIN/themes/reindeer/window/window.scss b/WebContent/VAADIN/themes/reindeer/window/window.scss
index e6a73ee2c0..7a05e52aec 100644
--- a/WebContent/VAADIN/themes/reindeer/window/window.scss
+++ b/WebContent/VAADIN/themes/reindeer/window/window.scss
@@ -14,7 +14,7 @@
 	border-color: rgba(0,0,0,.2);
 }
 .#{$primaryStyleName}-outerheader {
-	padding: 12px 32px 0 14px;
+	padding: 12px 52px 0 14px;
 	height: 37px;
 	background: black repeat-x;
 	background-image: url(img/header-bg.png); /** sprite-ref: verticals; sprite-alignment: repeat */
@@ -61,6 +61,24 @@
 .#{$primaryStyleName}-closebox:active {
 	background-image: url(img/close-pressed.png); /** sprite-ref: verticals */
 }
+.#{$primaryStyleName}-maximizebox,
+.#{$primaryStyleName}-restorebox {
+	top: 12px;
+	right: 28px;
+	width: 15px;
+	height: 16px;
+	background: transparent;
+}
+.#{$primaryStyleName}-maximizebox {
+	&, &:hover,&:active {
+		background-image: url(img/maximize.png); /** sprite-ref: verticals */
+	}
+}
+.#{$primaryStyleName}-restorebox {
+	&, &:hover,&:active {
+		background-image: url(img/restore.png); /** sprite-ref: verticals */
+	}
+}
 .#{$primaryStyleName}-contents {
 	background: #fff;
 }
diff --git a/WebContent/VAADIN/themes/runo/window/window.scss b/WebContent/VAADIN/themes/runo/window/window.scss
index 994238f2ad..db153243e9 100644
--- a/WebContent/VAADIN/themes/runo/window/window.scss
+++ b/WebContent/VAADIN/themes/runo/window/window.scss
@@ -51,14 +51,33 @@
 	background: transparent;
 	display: block;
 }
-.#{$primaryStyleName}-closebox {
+.#{$primaryStyleName}-closebox,
+.#{$primaryStyleName}-maximizebox,
+.#{$primaryStyleName}-restorebox {
 	position: absolute;
 	top: 21px;
-	right: 24px;
 	width: 12px;
 	height: 12px;
 	background: transparent url(img/close.png);
 }
+.#{$primaryStyleName}-closebox {
+	right: 24px;
+	background: transparent url(img/close.png);
+}
+
+.#{$primaryStyleName}-maximizebox,
+.#{$primaryStyleName}-restorebox {
+	right: 42px;
+}
+
+.#{$primaryStyleName}-maximizebox {
+	background: transparent url(img/maximize.png);
+}
+
+.#{$primaryStyleName}-restorebox {
+	background: transparent url(img/restore.png);
+}
+
 .#{$primaryStyleName}-closebox:hover {
 	background-position: 0 -12px;
 }