Fix landscape navigationbar orientation in designer

appinventor/appengine/src/com/google/appinventor/client/Images.java

@@ -68,12 +68,6 @@ public interface Images extends Resources {
   @Source("com/google/appinventor/images/phonebar.png")
   ImageResource phonebar();
 
-  /**
-   * Navigation bar shown below the form in the visual designer
-   */
-  @Source("com/google/appinventor/images/navigationbar.png")
-  ImageResource navigationbar();
-
   /**
    * Spinning/wait graphic to indicate long-running operations.
    */

appinventor/appengine/src/com/google/appinventor/client/editor/simple/components/MockForm.java

@@ -146,25 +146,24 @@ public final class MockForm extends MockContainer {
    * Widget for a mock phone navigation bar; Shows at the bottom of the viewer
    */
   private class NavigationBar extends Composite {
-    private static final int HEIGHT = 35;
+    private static final int HEIGHT = 44;
 
     // UI elements
-    private DockPanel bar;
-    private Image navigationBarImage;
+    private AbsolutePanel bar;
 
     /*
      * Creates a new phone navigation bar; Shows at the bottom of the viewer.
      */
 
     NavigationBar() {
-      navigationBarImage = new Image(images.navigationbar());
-      bar = new DockPanel();
-      bar.setHorizontalAlignment(HorizontalPanel.ALIGN_CENTER);
-      bar.add(navigationBarImage, DockPanel.CENTER);
+      bar = new AbsolutePanel();
       initWidget(bar);
 
-      setStylePrimaryName("ode-SimpleMockFormPhoneBar"); //reuse the css for the phone
-      setSize("100%", HEIGHT + "px");
+      setStylePrimaryName("ode-SimpleMockFormNavigationBarPortrait");
+    }
+
+    public int getHeight() {
+      return HEIGHT;
     }
   }
 
@@ -223,14 +222,17 @@ public final class MockForm extends MockContainer {
   // Form UI components
   AbsolutePanel formWidget;
   AbsolutePanel phoneWidget;
+  AbsolutePanel responsivePanel;
 
   ScrollPanel scrollPanel;
   private TitleBar titleBar;
+  private NavigationBar navigationBar;
   private MockComponent selectedComponent;
 
   int screenWidth;              // TEMP: Make package visible so we can use it MockHVLayoutBase
   private int screenHeight;
   int usableScreenHeight;       // TEMP: Make package visible so we can use it MockHVLayoutBase
+  int usableScreenWidth;
 
   // Set of listeners for any changes of the form
   final HashSet<FormChangeListener> formChangeListeners = new HashSet<FormChangeListener>();
@@ -270,18 +272,22 @@ public final class MockForm extends MockContainer {
     phoneWidget.setStylePrimaryName("ode-SimpleMockFormPhonePortrait");
     formWidget = new AbsolutePanel();
     formWidget.setStylePrimaryName("ode-SimpleMockForm");
+    responsivePanel = new AbsolutePanel();
 
     // Initialize mock form UI by adding the phone bar and title bar.
-    formWidget.add(new PhoneBar());
+    responsivePanel.add(new PhoneBar());
     titleBar = new TitleBar();
-    formWidget.add(titleBar);
+    responsivePanel.add(titleBar);
 
     // Put a ScrollPanel around the rootPanel.
     scrollPanel = new ScrollPanel(rootPanel);
-    formWidget.add(scrollPanel);
+    responsivePanel.add(scrollPanel);
+
+    formWidget.add(responsivePanel);
 
     //Add navigation bar at the bottom of the viewer.
-    formWidget.add(new NavigationBar());
+    navigationBar = new NavigationBar();
+    formWidget.add(navigationBar);
 
     phoneWidget.add(formWidget);
     initComponent(phoneWidget);
@@ -321,27 +327,34 @@ public final class MockForm extends MockContainer {
       if (idxPhoneSize == 0) phoneWidget.setStylePrimaryName("ode-SimpleMockFormPhoneLandscape");
       else if (idxPhoneSize == 1) phoneWidget.setStylePrimaryName("ode-SimpleMockFormPhoneLandscapeTablet");
       else if (idxPhoneSize == 2) phoneWidget.setStylePrimaryName("ode-SimpleMockFormPhoneLandscapeMonitor");
+      navigationBar.setStylePrimaryName("ode-SimpleMockFormNavigationBarLandscape");
     }
     else {
       if (idxPhoneSize == 0) phoneWidget.setStylePrimaryName("ode-SimpleMockFormPhonePortrait");
       else if (idxPhoneSize == 1) phoneWidget.setStylePrimaryName("ode-SimpleMockFormPhonePortraitTablet");
       else if (idxPhoneSize == 2) phoneWidget.setStylePrimaryName("ode-SimpleMockFormPhonePortraitMonitor");
+      navigationBar.setStylePrimaryName("ode-SimpleMockFormNavigationBarPortrait");
     }
   }
   /*
-   * Resizes the scrollPanel and formWidget based on the screen size.
+   * Resizes the scrollPanel, responsivePanel, and formWidget based on the screen size.
    */
   private void resizePanel(int newWidth, int newHeight){
     screenWidth = newWidth;
     screenHeight = newHeight;
-    usableScreenHeight = screenHeight - PhoneBar.HEIGHT - titleBar.getHeight() - NavigationBar.HEIGHT;
-
+    if (landscape) {
+      usableScreenWidth = screenWidth - navigationBar.getHeight();
+      usableScreenHeight = screenHeight - PhoneBar.HEIGHT - titleBar.getHeight();
+    } else {
+      usableScreenWidth = screenWidth;
+      usableScreenHeight = screenHeight - PhoneBar.HEIGHT - titleBar.getHeight() - navigationBar.getHeight();
+    }
 
-    rootPanel.setPixelSize(screenWidth, usableScreenHeight);
-    scrollPanel.setPixelSize(screenWidth + getVerticalScrollbarWidth(), usableScreenHeight);
+    rootPanel.setPixelSize(usableScreenWidth, usableScreenHeight);
+    scrollPanel.setPixelSize(usableScreenWidth + getVerticalScrollbarWidth(), usableScreenHeight);
     formWidget.setPixelSize(screenWidth + getVerticalScrollbarWidth(), screenHeight);
     // Store properties
-    changeProperty(PROPERTY_NAME_WIDTH, "" + screenWidth);
+    changeProperty(PROPERTY_NAME_WIDTH, "" + usableScreenWidth);
     boolean scrollable = Boolean.parseBoolean(getPropertyValue(PROPERTY_NAME_SCROLLABLE));
     if (!scrollable) {
       changeProperty(PROPERTY_NAME_HEIGHT, "" + usableScreenHeight);
@@ -522,10 +535,16 @@ public final class MockForm extends MockContainer {
         landscape = false;
       }
       setPhoneStyle();
-      usableScreenHeight = screenHeight - PhoneBar.HEIGHT - titleBar.getHeight() - NavigationBar.HEIGHT;
+      if (landscape) {
+        usableScreenWidth = screenWidth - navigationBar.getHeight();
+        usableScreenHeight = screenHeight - PhoneBar.HEIGHT - titleBar.getHeight();
+      } else {
+        usableScreenWidth = screenWidth;
+        usableScreenHeight = screenHeight - PhoneBar.HEIGHT - titleBar.getHeight() - navigationBar.getHeight();
+      }
       resizePanel(screenWidth, screenHeight);
 
-      changeProperty(PROPERTY_NAME_WIDTH, "" + screenWidth);
+      changeProperty(PROPERTY_NAME_WIDTH, "" + usableScreenWidth);
       boolean scrollable = Boolean.parseBoolean(getPropertyValue(PROPERTY_NAME_SCROLLABLE));
       if (!scrollable) {
         changeProperty(PROPERTY_NAME_HEIGHT, "" + usableScreenHeight);

appinventor/appengine/war/Ya.css

@@ -988,6 +988,22 @@ select.ode-PropertyEditor[disabled] {
   height: auto !important;
   background-color: #d2e0a6;
   border: 2px solid black;
+  -webkit-display: flex;
+  display: flex;
+}
+
+.ode-SimpleMockFormPhoneLandscape .ode-SimpleMockForm,
+.ode-SimpleMockFormPhoneLandscapeTablet .ode-SimpleMockForm,
+.ode-SimpleMockFormPhoneLandscapeMonitor .ode-SimpleMockForm {
+  -webkit-flex-direction: row;
+  flex-direction: row;
+}
+
+.ode-SimpleMockFormPhonePortrait .ode-SimpleMockForm,
+.ode-SimpleMockFormPhonePortraitTablet .ode-SimpleMockForm,
+.ode-SimpleMockFormPhonePortraitMonitor .ode-SimpleMockForm {
+  -webkit-flex-direction: column;
+  flex-direction: column;
 }
 
 /* ==== start: skins for Android */
@@ -1087,6 +1103,27 @@ select.ode-PropertyEditor[disabled] {
   display: inline-block;
 }
 
+.ode-SimpleMockFormNavigationBarPortrait,
+.ode-SimpleMockFormNavigationBarLandscape {
+  background-color: #000000;
+}
+
+.ode-SimpleMockFormNavigationBarPortrait {
+  min-height: 44px;
+  min-width: 100%;
+  background-image: url(images/navigationbarPortrait.png);
+  background-repeat: no-repeat;
+  background-position: center top;
+}
+
+.ode-SimpleMockFormNavigationBarLandscape {
+  min-height: 100%;
+  min-width: 44px;
+  background-image: url(images/navigationbarLandscape.png);
+  background-repeat: no-repeat;
+  background-position: right center;
+}
+
 .ode-SimpleMockContainer {
   background-color: transparent;
   border: 2px solid black;

appinventor/appengine/war/index.html

@@ -33,7 +33,7 @@
       Currently the supported browsers are:
       <ul>
         <li> Google Chrome 29+ </li>
-        <li> Safari 5+ </li>
+        <li> Safari 6.1+ </li>
         <li> Firefox 23+ </li>
       </ul>
     </div>