Redesign the dialog box that appears when a user has no projects

Change-Id: I9802f22cbe9fba8ed768de995d40b315ec3483ed

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

@@ -586,6 +586,12 @@ public interface Images extends Resources {
   @Source("com/google/appinventor/images/rectangle.png")
   ImageResource rectangle();
 
+  /**
+   * Codi Logo
+   */
+   @Source("com/google/appinventor/images/logo.png")
+   ImageResource logo();
+
   /**
    * Media icon: image
    */
@@ -604,4 +610,22 @@ public interface Images extends Resources {
   @Source("com/google/appinventor/images/mediaIcon_video.png")
   ImageResource mediaIconVideo();
 
+  /**
+  * Wilson Logo 
+  */
+  @Source("com/google/appinventor/images/wilson.png")
+  ImageResource wilson();
+
+  /**
+  * Talk to Me Logo
+  */
+  @Source("com/google/appinventor/images/talkToMeLogo.png")
+  ImageResource talkToMeLogo();
+
+  /**
+  * YR Media Logo
+  */
+  @Source("com/google/appinventor/images/YRLogo.png")
+  ImageResource YRLogo();
+
 }

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

@@ -33,6 +33,7 @@ import com.google.appinventor.client.editor.youngandroid.TutorialPanel;
 import com.google.appinventor.client.explorer.commands.ChainableCommand;
 import com.google.appinventor.client.explorer.commands.CommandRegistry;
 import com.google.appinventor.client.explorer.commands.SaveAllEditorsCommand;
+import com.google.appinventor.client.explorer.dialogs.NoProjectDialogBox;
 import com.google.appinventor.client.explorer.project.Project;
 import com.google.appinventor.client.explorer.project.ProjectChangeAdapter;
 import com.google.appinventor.client.explorer.project.ProjectManager;
@@ -1588,55 +1589,12 @@ public class Ode implements EntryPoint {
    * @return The created and optionally displayed Dialog box.
    */
   public DialogBox createNoProjectsDialog(boolean showDialog) {
-    // Create the UI elements of the DialogBox
-    final DialogBox dialogBox = new DialogBox(true, false); //DialogBox(autohide, modal)
-    dialogBox.setStylePrimaryName("ode-DialogBox");
-    dialogBox.setText(MESSAGES.createNoProjectsDialogText());
-
-    Grid mainGrid = new Grid(2, 2);
-    mainGrid.getCellFormatter().setAlignment(0,
-        0,
-        HasHorizontalAlignment.ALIGN_CENTER,
-        HasVerticalAlignment.ALIGN_MIDDLE);
-    mainGrid.getCellFormatter().setAlignment(0,
-        1,
-        HasHorizontalAlignment.ALIGN_CENTER,
-        HasVerticalAlignment.ALIGN_MIDDLE);
-    mainGrid.getCellFormatter().setAlignment(1,
-        1,
-        HasHorizontalAlignment.ALIGN_RIGHT,
-        HasVerticalAlignment.ALIGN_MIDDLE);
-
-    Image dialogImage = new Image(Ode.getImageBundle().codiVert());
-
-    Grid messageGrid = new Grid(2, 1);
-    messageGrid.getCellFormatter().setAlignment(0,
-        0,
-        HasHorizontalAlignment.ALIGN_JUSTIFY,
-        HasVerticalAlignment.ALIGN_MIDDLE);
-    messageGrid.getCellFormatter().setAlignment(1,
-        0,
-        HasHorizontalAlignment.ALIGN_LEFT,
-        HasVerticalAlignment.ALIGN_MIDDLE);
-
-    Label messageChunk1 = new HTML(MESSAGES.createNoProjectsDialogMessage1());
-
-    messageChunk1.setWidth("23em");
-    Label messageChunk2 = new Label(MESSAGES.createNoprojectsDialogMessage2());
-
-    // Add the elements to the grids and DialogBox.
-    messageGrid.setWidget(0, 0, messageChunk1);
-    messageGrid.setWidget(1, 0, messageChunk2);
-    mainGrid.setWidget(0, 0, dialogImage);
-    mainGrid.setWidget(0, 1, messageGrid);
-
-    dialogBox.setWidget(mainGrid);
-    dialogBox.center();
-
+    final NoProjectDialogBox dialogBox = new NoProjectDialogBox();
+    
     if (showDialog) {
       dialogBox.show();
     }
-
+  
     return dialogBox;
   }
 

appinventor/appengine/src/com/google/appinventor/client/explorer/dialogs/NoProjectDialogBox.java

+// -*- mode: java; c-basic-offset: 2; -*-
+// Copyright 2019 MIT, All rights reserved
+// Released under the Apache License, Version 2.0
+// http://www.apache.org/licenses/LICENSE-2.0
+
+package com.google.appinventor.client.explorer.dialogs;
+
+import com.google.appinventor.client.Ode;
+import com.google.appinventor.client.explorer.project.Project;
+import com.google.appinventor.client.wizards.NewProjectWizard.NewProjectCommand;
+import com.google.appinventor.client.wizards.TemplateUploadWizard;
+import com.google.appinventor.client.wizards.youngandroid.NewYoungAndroidProjectWizard;
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Button;
+import com.google.gwt.user.client.ui.DialogBox;
+import com.google.gwt.user.client.ui.Widget;
+
+/**
+ * A dialog containing options to begin 3 different tutorials or being a new
+ * project from scratch. Should appear when the user currently has no projects
+ * in their projects list.
+ */
+public class NoProjectDialogBox extends DialogBox {
+
+  private static NoProjectDialogBoxUiBinder uiBinder =
+      GWT.create(NoProjectDialogBoxUiBinder.class);
+
+  interface NoProjectDialogBoxUiBinder extends UiBinder<Widget, NoProjectDialogBox> {
+  }
+
+  /**
+   * Class to open a new project with the tutorial's contents when the user
+   * clicks on the "Go to Tutorial" button.
+   */
+  private class NewTutorialProject implements NewProjectCommand {
+    public void execute(Project project) {
+      Ode.getInstance().openYoungAndroidProjectInDesigner(project);
+    }
+  }
+
+  @UiField
+  Button closeDialogBox;
+  @UiField
+  Button goToPurr;
+  @UiField
+  Button goToTalk;
+  @UiField
+  Button goToYR;
+  @UiField
+  Button noDialogNewProject;
+
+  /**
+   * Creates a new dialog box when the user has no current projects in their
+   * projects list. This will give them an option to open a tutorial project or
+   * create their own project.
+   */
+  public NoProjectDialogBox() {
+    this.setStylePrimaryName("ode-noDialogDiv");
+    add(uiBinder.createAndBindUi(this));
+    this.center();
+    this.setAnimationEnabled(true);
+    this.setAutoHideEnabled(true);
+  }
+
+  @UiHandler("closeDialogBox")
+  void handleClose(ClickEvent e) {
+    this.hide();
+  }
+
+  @UiHandler("goToPurr")
+  void handleGoToPurr(ClickEvent e) {
+    this.hide();
+    new TemplateUploadWizard().createProjectFromExistingZip("HelloPurr", new NewTutorialProject());
+  }
+
+  @UiHandler("goToTalk")
+  void handleGoToTalk(ClickEvent e) {
+    this.hide();
+    TemplateUploadWizard.openProjectFromTemplate("http://appinventor.mit.edu/yrtoolkit/yr/aiaFiles/talk_to_me/TalkToMe.asc", new NewTutorialProject());
+  }
+
+  @UiHandler("goToYR")
+  void handleGoToYR(ClickEvent e) {
+    this.hide();
+    TemplateUploadWizard.openProjectFromTemplate("http://appinventor.mit.edu/yrtoolkit/yr/aiaFiles/hello_bonjour/translate_tutorial.asc", new NewTutorialProject());
+  }
+
+  @UiHandler("noDialogNewProject")
+  void handleNewProject(ClickEvent e) {
+    this.hide();
+    new NewYoungAndroidProjectWizard(null).show();
+  }
+}

appinventor/appengine/src/com/google/appinventor/client/explorer/dialogs/NoProjectDialogBox.ui.xml

+<!-- Copyright 2009-2011 Google, All Rights reserved -->
+<!-- Copyright 2011-2017 MIT, All rights reserved -->
+<!-- Released under the Apache License, Version 2.0 -->
+<!-- http://www.apache.org/licenses/LICENSE-2.0 -->
+
+<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
+    xmlns:g='urn:import:com.google.gwt.user.client.ui'
+    ui:generateFormat="com.google.gwt.i18n.server.PropertyCatalogFactory"
+    ui:generateKeys="com.google.gwt.i18n.server.keygen.MethodNameKeyGenerator"
+    ui:baseMessagesInterface="com.google.appinventor.client.OdeMessages"
+    ui:generateLocales="default">
+
+  <ui:with type="com.google.appinventor.client.Images" field="res" />
+
+  <ui:style>
+    .ode-tutorialButton {
+      background-color: white;
+      border: 1px #8fc202 solid;
+      padding: 5px 8px;
+      border-radius: 5px;
+      color: #8fc202;
+      text-transform: uppercase;
+      font-size: 13px;
+    }
+
+    .ode-tutorialButton:hover {
+      background-color: rgba(143, 194, 2, 0.616);
+      color: white;
+      cursor: pointer;
+    }
+
+    .ode-closeDialogBox {
+      background-color: white;
+      border: 1px #837d7d solid;
+      width: 25%;
+      padding: 5px 8px;
+      border-radius: 5px;
+      color: #837d7d;
+      text-transform: uppercase;
+      font-size: 12px;
+      text-align: center;
+      margin: 0 10px;
+    }
+
+    .ode-closeDialogBox:hover {
+      background-color: rgba(131, 125, 125, 0.1);
+      cursor: pointer;
+    }
+
+    .ode-noDialogNewProject {
+      text-transform: uppercase;
+      font-size: 12px;
+      text-decoration: none;
+      text-align: center;
+      padding: 5px 8px;
+      width: 25%;
+      background-color: white;
+      border: 1px #8fc202 solid;
+      border-radius: 5px;
+      color: #8fc202;
+      margin: 0 10px;
+    }
+
+    .ode-noDialogNewProject:hover {
+      background-color: rgba(143, 194, 2, 0.616);
+      color: white;
+      cursor: pointer;
+    }
+  </ui:style>
+
+  <g:HTMLPanel>
+     <div class="ode-noDialogDivHeader">
+      <div class="ode-noDialogDivInnerHeader">
+        <h3 class="ode-headerTitle">
+          <ui:msg key="welcome"
+                  description="Welcome text preceding the App Inventor logo">Welcome to</ui:msg>
+        </h3>
+
+        <div id='ode-codiLogoDiv'>
+          <g:Image resource="{res.logo}" altText="MIT App Inventor" height="64px" width="120px" />
+        </div>
+      </div>
+    </div>
+
+    <h3 class="ode-tutorialsTitle">
+      <ui:msg key="getStarted"
+              description="The header text instructing the new user to get started.">
+        Get started with some tutorials
+      </ui:msg>
+    </h3>
+
+    <div class="ode-noDialogExampleDivs">
+      <div class="ode-noDialogExampleDiv">
+        <div class='ode-noDialogUpperDiv'>
+          <h4 class="ode-noDialogExampleTitle">
+            <ui:msg key="helloPurrTitle"
+                    description="Title of the Hello Purr app">Hello Purr</ui:msg>
+          </h4>
+          <div class="ode-noDialogExampleImage">
+            <g:Image resource="{res.wilson}" altText="Wilson Logo" />
+          </div>
+          <p class="ode-noDialogExampleAbout">
+            <ui:msg key="helloPurrDescription" description="Description of the Hello Purr app">
+              HelloPurr is a simple app that you can build in a very short time.
+              You create a button that has a picture of a cat on it, and then
+              program the button so that when it is clicked a "meow" sound
+              plays.
+            </ui:msg>
+          </p>
+        </div>
+
+        <g:Button ui:field='goToPurr' styleName='{style.ode-tutorialButton}'>
+          <ui:msg key="startTutorialButton"
+                  description="Text of the button to open a tutorial">Go to Tutorial</ui:msg>
+        </g:Button>
+      </div>
+
+      <div class="ode-noDialogExampleDiv">
+        <div class='ode-noDialogUpperDiv'>
+          <h4 class="ode-noDialogExampleTitle">
+            <ui:msg key="talkToMeTitle"
+                    description="Title of the Talk to Me app">Talk to Me</ui:msg>
+          </h4>
+          <div class="ode-noDialogExampleImage">
+            <g:Image resource="{res.talkToMeLogo}" altText="Talk to Me Logo" />
+          </div>
+
+          <p class="ode-noDialogExampleAbout">
+            <ui:msg key="talkToMeDescription" description="Description of the Talk to Me app">
+            Text to Speech is surprisingly fun. Find out for yourself with this
+            starter app that talks.
+            </ui:msg>
+          </p>
+        </div>
+
+        <g:Button ui:field='goToTalk' styleName='{style.ode-tutorialButton}'>
+          <ui:msg key="startTutorialButton">Go to Tutorial</ui:msg>
+        </g:Button>
+      </div>
+
+      <div class="ode-noDialogExampleDiv">
+        <div class='ode-noDialogUpperDiv'>
+          <h4 class="ode-noDialogExampleTitle">
+            <ui:msg key="translateAppTitle"
+                    description="Title of the Translate App">Translate App</ui:msg>
+          </h4>
+          <div class="ode-noDialogExampleImage">
+            <g:Image resource="{res.YRLogo}" altText="YR Media Logo" />
+          </div>
+          <p class="ode-noDialogExampleAbout">
+            <ui:msg key="translateAppDescription" description="Description of the Translate app">
+              Quickly translate English to Spanish (and other languages too!)
+              You're challenged with creating an app that could act as an aid
+              for immigrant parents who need a little extra help in
+              English-speaking situations. Inspired by YR Media story
+              <a href="https://yr.media/news/what-its-like-to-be-a-translator/" target="_blank"
+                 ui:ph="yrMediaLink">What It's Like to be a Translator</a>.
+            </ui:msg>
+          </p>
+        </div>
+
+        <g:Button ui:field='goToYR' styleName='{style.ode-tutorialButton}'>
+          <ui:msg key="startTutorialButton">Go to Tutorial</ui:msg>
+        </g:Button>
+      </div>
+    </div>
+
+    <div class="ode-bottomRow">
+        <g:Button ui:field='noDialogNewProject' styleName="{style.ode-noDialogNewProject}">
+          <ui:msg key="startProjectButton" description="Text of the button to start a new project"
+          >Start a blank project</ui:msg>
+        </g:Button>
+        <g:Button ui:field='closeDialogBox' styleName='{style.ode-closeDialogBox}'>
+          <ui:msg key="closeButton" description="Text of the button to close the dialog box"
+          >Close</ui:msg>
+        </g:Button>
+    </div>
+
+      
+  </g:HTMLPanel>
+
+</ui:UiBinder>

appinventor/appengine/src/com/google/appinventor/client/explorer/dialogs/NoProjectDialogBoxNoProjectDialogBoxUiBinderImplGenMessages_en.properties

+# Messages from com.google.appinventor.client.explorer.dialogs.NoProjectDialogBoxNoProjectDialogBoxUiBinderImplGenMessages
+# Source locale en
+
+# Description: Text of the button to close the dialog box
+closeButton=Close
+
+# Description: The header text instructing the new user to get started.
+getStarted=Get started with some tutorials
+
+# Description: Description of the Hello Purr app
+helloPurrDescription=HelloPurr is a simple app that you can build in a very short time. You create a button that has a picture of a cat on it, and then program the button so that when it is clicked a "meow" sound plays.
+
+# Description: Title of the Hello Purr app
+helloPurrTitle=Hello Purr
+
+# Description: Text of the button to start a new project
+startProjectButton=Start a blank project
+
+# Description: Text of the button to open a tutorial
+startTutorialButton=Go to Tutorial
+
+# Description: Description of the Talk to Me app
+talkToMeDescription=Text to Speech is surprisingly fun. Find out for yourself with this starter app that talks.
+
+# Description: Title of the Talk to Me app
+talkToMeTitle=Talk to Me
+
+# Description: Description of the Translate app
+#   0 - yrMediaLinkBegin, Example: <tag>
+#   1 - yrMediaLinkEnd, Example: </tag>
+translateAppDescription=Quickly translate English to Spanish (and other languages too\!) You''re challenged with creating an app that could act as an aid for immigrant parents who need a little extra help in English-speaking situations. Inspired by YR Media story {0}What It''s Like to be a Translator{1}.
+
+# Description: Title of the Translate App
+translateAppTitle=Translate App
+
+# Description: Welcome text preceding the App Inventor logo
+welcome=Welcome to

appinventor/appengine/war/Ya.css

@@ -1372,7 +1372,111 @@ path.ode-SimpleMockMapFeature-selected {
 }
 
 /* All dialog boxes */
-/* would pop more with a white border around their normal green border */
+
+/* Start of NoProjectsDialogBox. */
+.ode-noDialogDiv {
+  box-shadow: 0 0 10px gray;
+  min-width: 700px;
+  width: 60%;
+  background-color: white;
+  padding-bottom: 25px;
+}
+
+.ode-noDialogDivHeader {
+  background-color: #a5cf47;
+  height: 10%;
+  padding: 10px;
+  border-bottom: 1px #e9e9e9 solid;
+}
+
+.ode-noDialogDivInnerHeader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#ode-codiLogoDiv {
+  max-width: 160px;
+  max-height: 90px;
+  margin-left: 15px;
+}
+
+.ode-headerTitle {
+  color: #ffffff;
+  text-transform: uppercase;
+  font-size: 16px;
+  text-align: center;
+}
+
+.ode-tutorialsTitle {
+  color: black;
+  text-transform: uppercase;
+  text-align: center;
+  font-size: 14px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.ode-noDialogExampleDivs {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-evenly;
+}
+
+.ode-noDialogExampleDiv {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  width: 25%;
+  min-width: 182px;
+  min-height: 300px;
+  box-shadow: 0 0 2px #808080;
+  border-radius: 15px;
+  padding: 15px;
+  margin: 10px 0px;
+}
+
+.ode-noDialogExampleTitle {
+  margin-top: 0;
+  text-transform: uppercase;
+  font-size: 13px;
+}
+
+.ode-noDialogExampleImage {
+  height: 90px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.ode-noDialogExampleAbout {
+  font-size: 12px;
+}
+
+.ode-noDialogUpperDiv {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 90%;
+}
+
+.ode-bottomRow {
+  margin-top: 10pt;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 799px) {
+  .ode-noDialogExampleDivs {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+/* End of NoProjectsDialogBox. */
 
 .ode-DialogBox {
   background-color: white;