Determine window header margin size depending on visible buttons.

(#15408)

Breaking changes: maximizebox and closebox are moved inside outerheader
element.

Change-Id: I909e3a012a632461ab20d51fab37602b1b6ceb12

6 files changed, 148 insertions, 9 deletions

diff --git a/WebContent/VAADIN/themes/base/window/window.scss b/WebContent/VAADIN/themes/base/window/window.scss
index 4e414379cf..bdc16999b0 100644
--- a/WebContent/VAADIN/themes/base/window/window.scss
+++ b/WebContent/VAADIN/themes/base/window/window.scss
@@ -82,6 +82,7 @@ div.#{$primaryStyleName}-header {
 	height: 0;
 }
 .#{$primaryStyleName}-resizebox-disabled,
+.#{$primaryStyleName}-closebox-disabled,
 .#{$primaryStyleName}-restorebox-disabled,
 .#{$primaryStyleName}-maximizebox-disabled {
 	cursor: default;
diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss
index 52f57df183..0b01949593 100644
--- a/WebContent/VAADIN/themes/valo/components/_window.scss
+++ b/WebContent/VAADIN/themes/valo/components/_window.scss
@@ -143,6 +143,17 @@ $v-window-modality-curtain-background-color: #222 !default;
     color: blend-normal(rgba(valo-font-color($v-window-background-color), .7), $v-window-background-color);
   }
 
+  //Adjust header margin according to visible buttons on header
+  .#{$primary-stylename}-restorebox-disabled,
+  .#{$primary-stylename}-maximizebox-disabled {
+    ~ .#{$primary-stylename}-closebox ~ .#{$primary-stylename}-header {
+      margin-right: $v-unit-size;
+    }
+    ~ .#{$primary-stylename}-closebox-disabled ~ .#{$primary-stylename}-header {
+      margin-right: round($v-unit-size/3);
+    }
+  }
+
   .#{$primary-stylename}-closebox,
   .#{$primary-stylename}-maximizebox,
   .#{$primary-stylename}-restorebox {
@@ -201,6 +212,8 @@ $v-window-modality-curtain-background-color: #222 !default;
     }
   }
 
+  .#{$primary-stylename}-closebox-disabled,
+  .#{$primary-stylename}-resizebox-disabled,
   .#{$primary-stylename}-restorebox-disabled,
   .#{$primary-stylename}-maximizebox-disabled {
     display: none;
@@ -290,10 +303,6 @@ $v-window-modality-curtain-background-color: #222 !default;
     }
   }
 
-  .#{$primary-stylename}-resizebox-disabled {
-    display: none;
-  }
-
 
   // Flash modal window when clicking on the curtain
   .#{$primary-stylename}-modalitycurtain:active {
diff --git a/client/src/com/vaadin/client/ui/VWindow.java b/client/src/com/vaadin/client/ui/VWindow.java
index eb3c89beb0..615841ccb6 100644
--- a/client/src/com/vaadin/client/ui/VWindow.java
+++ b/client/src/com/vaadin/client/ui/VWindow.java
@@ -392,8 +392,8 @@ public class VWindow extends VOverlay implements ShortcutActionHandlerOwner,
 
         DOM.appendChild(wrapper, topTabStop);
         DOM.appendChild(wrapper, header);
-        DOM.appendChild(wrapper, maximizeRestoreBox);
-        DOM.appendChild(wrapper, closeBox);
+        DOM.appendChild(header, maximizeRestoreBox);
+        DOM.appendChild(header, closeBox);
         DOM.appendChild(header, headerText);
         DOM.appendChild(wrapper, contents);
         DOM.appendChild(wrapper, footer);
@@ -620,9 +620,13 @@ public class VWindow extends VOverlay implements ShortcutActionHandlerOwner,
 
         this.closable = closable;
         if (closable) {
-            closeBox.getStyle().clearDisplay();
+            DOM.setElementProperty(closeBox, "className", CLASSNAME
+                    + "-closebox");
+
         } else {
-            closeBox.getStyle().setDisplay(Display.NONE);
+            DOM.setElementProperty(closeBox, "className", CLASSNAME
+                    + "-closebox " + CLASSNAME + "-closebox-disabled");
+
         }
 
     }
diff --git a/uitest/src/com/vaadin/tests/components/window/TestTooSmallSubwindowSizeTest.java b/uitest/src/com/vaadin/tests/components/window/TestTooSmallSubwindowSizeTest.java
index 0019900884..cb7c0bd504 100644
--- a/uitest/src/com/vaadin/tests/components/window/TestTooSmallSubwindowSizeTest.java
+++ b/uitest/src/com/vaadin/tests/components/window/TestTooSmallSubwindowSizeTest.java
@@ -33,6 +33,6 @@ public class TestTooSmallSubwindowSizeTest extends MultiBrowserTest {
     public void testSubwindowStyles() throws IOException {
         openTestURL();
 
-        compareScreen("initial");
+        compareScreen("initial_state");
     }
 }
diff --git a/uitest/src/com/vaadin/tests/themes/valo/WindowTitleOverflow.java b/uitest/src/com/vaadin/tests/themes/valo/WindowTitleOverflow.java
new file mode 100644
index 0000000000..804095419e
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/WindowTitleOverflow.java
@@ -0,0 +1,65 @@
+package com.vaadin.tests.themes.valo;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Window;
+import com.vaadin.ui.themes.ValoTheme;
+
+@Theme(ValoTheme.THEME_NAME)
+public class WindowTitleOverflow extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        addButton("Open Resizable", new Button.ClickListener() {
+            @Override
+            public void buttonClick(Button.ClickEvent event) {
+                addWindow(getWindow(true, false));
+            }
+        });
+
+        addButton("Open Closable", new Button.ClickListener() {
+            @Override
+            public void buttonClick(Button.ClickEvent event) {
+                addWindow(getWindow(false, true));
+            }
+        });
+
+        addButton("Open Resizable and Closable", new Button.ClickListener() {
+            @Override
+            public void buttonClick(Button.ClickEvent event) {
+                addWindow(getWindow(true, true));
+            }
+        });
+
+        addButton("Open Non-Resizable and Non-Closable",
+                new Button.ClickListener() {
+                    @Override
+                    public void buttonClick(Button.ClickEvent event) {
+                        addWindow(getWindow(false, false));
+                    }
+                });
+    }
+
+    private Window getWindow(boolean resizable, boolean closable) {
+        Window window = new Window();
+
+        window.setModal(true);
+        window.setResizable(resizable);
+        window.setClosable(closable);
+        window.setCaption("Long Foobar Foobar Foobar Foobar Foobar Foobar");
+
+        return window;
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 15408;
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "In Valo, header title should use the space of hidden buttons.";
+    }
+}
diff --git a/uitest/src/com/vaadin/tests/themes/valo/WindowTitleOverflowTest.java b/uitest/src/com/vaadin/tests/themes/valo/WindowTitleOverflowTest.java
new file mode 100644
index 0000000000..825d26f86d
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/valo/WindowTitleOverflowTest.java
@@ -0,0 +1,60 @@
+package com.vaadin.tests.themes.valo;
+
+import static org.hamcrest.CoreMatchers.is;
+import static org.junit.Assert.assertThat;
+
+import org.junit.Test;
+import org.openqa.selenium.WebElement;
+
+import com.vaadin.testbench.By;
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class WindowTitleOverflowTest extends MultiBrowserTest {
+
+    @Override
+    public void setup() throws Exception {
+        super.setup();
+        openTestURL();
+    }
+
+    private void openWindow(String caption) {
+        $(ButtonElement.class).caption(caption).first().click();
+    }
+
+    private String getWindowHeaderMarginRight() {
+        return getWindowHeader().getCssValue("margin-right");
+    }
+
+    private WebElement getWindowHeader() {
+        return findElement(By.className("v-window-header"));
+    }
+
+    @Test
+    public void headerMarginIsCorrectForResizable() {
+        openWindow("Open Resizable");
+
+        assertThat(getWindowHeaderMarginRight(), is("74px"));
+    }
+
+    @Test
+    public void headerMarginIsCorrectForClosable() {
+        openWindow("Open Closable");
+
+        assertThat(getWindowHeaderMarginRight(), is("37px"));
+    }
+
+    @Test
+    public void headerMarginIsCorrectForResizableAndClosable() {
+        openWindow("Open Resizable and Closable");
+
+        assertThat(getWindowHeaderMarginRight(), is("74px"));
+    }
+
+    @Test
+    public void headerMarginIsCorrectForNonResizableAndNonClosable() {
+        openWindow("Open Non-Resizable and Non-Closable");
+
+        assertThat(getWindowHeaderMarginRight(), is("12px"));
+    }
+}
\ No newline at end of file