Skip to content
Permalink
Browse files

Fix landscape navigationbar orientation in designer

  • Loading branch information...
bartmathijssen authored and ewpatton committed Sep 6, 2019
1 parent c58e9ad commit 8bf468421cd1438f5f0ff8ac7dd820f408df68f9
@@ -68,12 +68,6 @@
@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.
*/
@@ -146,25 +146,24 @@ int getHeight() {
* 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 @@ int getHeight() {
// 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 MockForm(SimpleEditor editor) {
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 @@ private void setPhoneStyle() {
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 @@ private void setScreenOrientationProperty(String text) {
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);
Binary file not shown.
@@ -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;
Binary file not shown.
Binary file not shown.
@@ -33,7 +33,7 @@ <h2> Your browser might not be compatible. </h2>
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>

0 comments on commit 8bf4684

Please sign in to comment.
You can’t perform that action at this time.