Add phone skin to designer

appinventor/appengine/src/com/google/appinventor/client/editor/simple/SimpleVisibleComponentsPanel.java

@@ -150,25 +150,26 @@ public final class SimpleVisibleComponentsPanel extends Composite implements Dro
   }
 
   private void changeFormPreviewSize(int idx, int width, int height) {
-    if (form != null) {
-      form.changePreviewSize(width, height);
-      String info = " (" + height + "," + width + ")";
-      if (idx == 0) {
-        listboxPhoneTablet.setItemText(idx, MESSAGES.previewPhoneSize() + info);
-        listboxPhoneTablet.setItemText(1, MESSAGES.previewTabletSize());
-        listboxPhoneTablet.setItemText(2, MESSAGES.previewMonitorSize());
-      } else if (idx == 1) {
-        listboxPhoneTablet.setItemText(idx, MESSAGES.previewTabletSize() + info);
-        listboxPhoneTablet.setItemText(0, MESSAGES.previewPhoneSize());
-        listboxPhoneTablet.setItemText(2, MESSAGES.previewMonitorSize());
 
-      } else {
-        listboxPhoneTablet.setItemText(idx, MESSAGES.previewMonitorSize() + info);
-        listboxPhoneTablet.setItemText(0, MESSAGES.previewPhoneSize());
-        listboxPhoneTablet.setItemText(1, MESSAGES.previewTabletSize());
-      }
-      // change settings
+    if (form == null)
+      return;
+
+    form.changePreviewSize(width, height, idx);
+    String info = " (" + height + "," + width + ")";
+    if (idx == 0) {
+      listboxPhoneTablet.setItemText(idx, MESSAGES.previewPhoneSize() + info);
+      listboxPhoneTablet.setItemText(1, MESSAGES.previewTabletSize());
+      listboxPhoneTablet.setItemText(2, MESSAGES.previewMonitorSize());
+    } else if (idx == 1) {
+      listboxPhoneTablet.setItemText(idx, MESSAGES.previewTabletSize() + info);
+      listboxPhoneTablet.setItemText(0, MESSAGES.previewPhoneSize());
+      listboxPhoneTablet.setItemText(2, MESSAGES.previewMonitorSize());
+    } else {
+      listboxPhoneTablet.setItemText(idx, MESSAGES.previewMonitorSize() + info);
+      listboxPhoneTablet.setItemText(0, MESSAGES.previewPhoneSize());
+      listboxPhoneTablet.setItemText(1, MESSAGES.previewTabletSize());
     }
+    // change settings
   }
 
   public void enableTabletPreviewCheckBox(boolean enable){

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

@@ -198,6 +198,7 @@ public final class MockForm extends MockContainer {
   private int LANDSCAPE_WIDTH = PHONE_LANDSCAPE_WIDTH;
   private int LANDSCAPE_HEIGHT = PHONE_LANDSCAPE_HEIGHT;
   private boolean landscape = false;
+  private int idxPhoneSize = 0;
 
   // Property names
   private static final String PROPERTY_NAME_TITLE = "Title";
@@ -220,6 +221,8 @@ public final class MockForm extends MockContainer {
 
   // Form UI components
   AbsolutePanel formWidget;
+  AbsolutePanel phoneWidget;
+
   ScrollPanel scrollPanel;
   private TitleBar titleBar;
   private MockComponent selectedComponent;
@@ -262,6 +265,8 @@ public final class MockForm extends MockContainer {
     // future problems if we ever have threads creating forms in parallel.
     myLayout = MockFormHelper.getLayout();
 
+    phoneWidget = new AbsolutePanel();
+    phoneWidget.setStylePrimaryName("ode-SimpleMockFormPhonePortrait");
     formWidget = new AbsolutePanel();
     formWidget.setStylePrimaryName("ode-SimpleMockForm");
 
@@ -277,7 +282,8 @@ public final class MockForm extends MockContainer {
     //Add navigation bar at the bottom of the viewer.
     formWidget.add(new NavigationBar());
 
-    initComponent(formWidget);
+    phoneWidget.add(formWidget);
+    initComponent(phoneWidget);
 
     // Set up the initial state of the vertical alignment property editor and its dropdowns
     try {
@@ -292,19 +298,37 @@ public final class MockForm extends MockContainer {
     setScrollableProperty(getPropertyValue(PROPERTY_NAME_SCROLLABLE));
   }
 
-  public void changePreviewSize(int width, int height) {
+  public void changePreviewSize(int width, int height, int idx) {
     // It will definitely be modified in the future to add more options.
     PORTRAIT_WIDTH = width;
     PORTRAIT_HEIGHT = height;
     LANDSCAPE_WIDTH = height;
     LANDSCAPE_HEIGHT = width;
 
-    if (landscape)
+    idxPhoneSize = idx;
+
+    if (landscape) {
+      setPhoneStyle();
       resizePanel(LANDSCAPE_WIDTH, LANDSCAPE_HEIGHT);
-    else
-      resizePanel(PORTRAIT_WIDTH, PORTRAIT_HEIGHT);
+    }
+   else {
+      setPhoneStyle();
+      resizePanel(width, height);
+    }
   }
 
+  private void setPhoneStyle() {
+    if (landscape) {
+      if (idxPhoneSize == 0) phoneWidget.setStylePrimaryName("ode-SimpleMockFormPhoneLandscape");
+      else if (idxPhoneSize == 1) phoneWidget.setStylePrimaryName("ode-SimpleMockFormPhoneLandscapeTablet");
+      else if (idxPhoneSize == 2) phoneWidget.setStylePrimaryName("ode-SimpleMockFormPhoneLandscapeMonitor");
+    }
+    else {
+      if (idxPhoneSize == 0) phoneWidget.setStylePrimaryName("ode-SimpleMockFormPhonePortrait");
+      else if (idxPhoneSize == 1) phoneWidget.setStylePrimaryName("ode-SimpleMockFormPhonePortraitTablet");
+      else if (idxPhoneSize == 2) phoneWidget.setStylePrimaryName("ode-SimpleMockFormPhonePortraitMonitor");
+    }
+  }
   /*
    * Resizes the scrollPanel and formWidget based on the screen size.
    */
@@ -521,10 +545,12 @@ public final class MockForm extends MockContainer {
         screenWidth = LANDSCAPE_WIDTH;
         screenHeight = LANDSCAPE_HEIGHT;
         landscape = true;
+        setPhoneStyle();
       } else {
         screenWidth = PORTRAIT_WIDTH;
         screenHeight = PORTRAIT_HEIGHT;
         landscape = false;
+        setPhoneStyle();
       }
       usableScreenHeight = screenHeight - PhoneBar.HEIGHT - titleBar.getHeight() - NavigationBar.HEIGHT;
       resizePanel(screenWidth, screenHeight);

appinventor/appengine/war/Ya.css

@@ -990,6 +990,54 @@ select.ode-PropertyEditor[disabled] {
   border: 2px solid black;
 }
 
+/* ==== start: skins for Android */
+.ode-SimpleMockFormPhoneLandscape {
+    background: url(images/phoneLandscape.png);
+    background-repeat: no-repeat;
+    background-position: right top;
+    background-size: 100% 100%;
+    padding: 11px 43px 7px 48px;
+}
+
+.ode-SimpleMockFormPhonePortrait {
+  background: url(images/phonePortrait.png);
+  background-repeat: no-repeat;
+  background-position: right top;
+  background-size: 100% 100%;
+  padding: 50px 11px 43px 7px;
+}
+
+.ode-SimpleMockFormPhoneLandscapeTablet {
+    background: url(images/phoneLandscapeTablet.png);
+    background-repeat: no-repeat;
+    background-position: right top;
+    background-size: 100% 100%;
+    padding: 15px 56px 12px 64px;;
+}
+.ode-SimpleMockFormPhonePortraitTablet {
+  background: url(images/phonePortraitTablet.png);
+  background-repeat: no-repeat;
+  background-position: right top;
+  background-size: 100% 100%;
+  padding: 64px 13px 55px 13px;
+}
+.ode-SimpleMockFormPhoneLandscapeMonitor {
+  background: url(images/phoneLandscapeMonitor.png);
+  background-repeat: no-repeat;
+  background-position: right top;
+  background-size: 100% 100%;
+  padding: 44px 43px 39px 48px;
+}
+
+.ode-SimpleMockFormPhonePortraitMonitor {
+  background: url(images/phonePortraitMonitor.png);
+  background-repeat: no-repeat;
+  background-position: right top;
+  background-size: 100% 100%;
+  padding: 99px 36px 75px 34px;
+}
+/* ==== end: skins for Android */
+
 .ode-SimpleMockForm-selected {
   border: 2px solid #8fc202;
 }