-
-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Redesign the dialog box that appears when a user has no projects
Change-Id: I9802f22cbe9fba8ed768de995d40b315ec3483ed
- Loading branch information
Showing
11 changed files
with
449 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
97 changes: 97 additions & 0 deletions
97
...ntor/appengine/src/com/google/appinventor/client/explorer/dialogs/NoProjectDialogBox.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| // -*- 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(); | ||
| } | ||
| } |
182 changes: 182 additions & 0 deletions
182
...or/appengine/src/com/google/appinventor/client/explorer/dialogs/NoProjectDialogBox.ui.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| <!-- 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> |
Oops, something went wrong.