Create built-in repo for YR Media templates

Change-Id: I331cfcebc9e9053dec399d5b724495f8ef7a51f0

appinventor/appengine/src/com/google/appinventor/client/wizards/TemplateUploadWizard.java

@@ -25,6 +25,7 @@ import com.google.appinventor.shared.rpc.project.youngandroid.NewYoungAndroidPro
 import com.google.appinventor.shared.rpc.project.youngandroid.YoungAndroidProjectNode;
 import com.google.appinventor.shared.settings.SettingsConstants;
 import com.google.gwt.cell.client.AbstractCell;
+import com.google.gwt.dom.client.Style;
 import com.google.gwt.event.dom.client.ChangeEvent;
 import com.google.gwt.event.dom.client.ChangeHandler;
 import com.google.gwt.event.dom.client.ClickEvent;
@@ -52,6 +53,7 @@ import com.google.gwt.user.client.ui.HorizontalPanel;
 import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.ListBox;
+import com.google.gwt.user.client.ui.SimplePanel;
 import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.view.client.ProvidesKey;
 import com.google.gwt.view.client.SelectionChangeEvent;
@@ -787,12 +789,17 @@ public class TemplateUploadWizard extends Wizard implements NewUrlDialogCallback
 
       panel = new VerticalPanel();
       panel.add(title);
+      title.getElement().getStyle().setFontWeight(Style.FontWeight.BOLD);
       panel.add(subtitle);
       descriptionHtml.setHTML(info.description);
       panel.add(descriptionHtml);
       panel.add(image);
-      initWidget(panel);
+      SimplePanel wrapper = new SimplePanel();
+      wrapper.getElement().getStyle().setOverflow(Style.Overflow.SCROLL);
+      wrapper.add(panel);
+      initWidget(wrapper);
       setStylePrimaryName("ode-ContextMenu");
+      setHeight("500px");
     }
 
     public static void setTemplate(TemplateInfo info, String hostUrl) {
@@ -835,10 +842,10 @@ public class TemplateUploadWizard extends Wizard implements NewUrlDialogCallback
       public void render(Context context, TemplateInfo template, SafeHtmlBuilder sb) {
       if (template == null)
         return;
-      sb.appendHtmlConstant("<table>");
+      sb.appendHtmlConstant("<table style='margin: 4pt 0;'>");
 
       // Add the thumbnail image, if available, or a default image.
-      sb.appendHtmlConstant("<tr><td rowspan='3'>");
+      sb.appendHtmlConstant("<tr><td rowspan='3' width=\"32px\">");
       if ( !template.thumbStr.equals("") )   {
         String src = hostUrl + TEMPLATES_ROOT_DIRECTORY +   template.name + "/" + template.thumbStr;
         sb.appendHtmlConstant("<img style='width:32px' src='" + src + "'>");
@@ -851,9 +858,9 @@ public class TemplateUploadWizard extends Wizard implements NewUrlDialogCallback
       sb.appendHtmlConstant("</td>");
 
       // Add the name and description.
-      sb.appendHtmlConstant("<td style='font-size:95%;'>");
+      sb.appendHtmlConstant("<td style='font-size:95%;'><b>");
       sb.appendEscaped(template.name);
-      sb.appendHtmlConstant("</td></tr><tr><td>");
+      sb.appendHtmlConstant("</b></td></tr><tr><td>");
       sb.appendEscaped(template.subtitle);
       sb.appendHtmlConstant("</td></tr></table>");
     }
@@ -872,8 +879,9 @@ public class TemplateUploadWizard extends Wizard implements NewUrlDialogCallback
     templateCellList.setPageSize(list.size() + 10);
     templateCellList.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED);
     templateCellList.setWidth("250px");
-    templateCellList.setHeight("400px");
+    templateCellList.setHeight("500px");
     templateCellList.setVisible(true);
+    templateCellList.getElement().getStyle().setOverflow(Style.Overflow.SCROLL);
 
     // Add a selection model to handle user selection.
     final SingleSelectionModel<TemplateInfo> selectionModel =

appinventor/appengine/war/templates/DIYBookClub/DIYBookClub.json

+{"name": "DIYBookClub", "subtitle": "Wire and share book reviews with friends.", "description": "Create an app that lets you and your friends write and share reviews of your favorite books. Inspired by YR Media's <a href='https://yr.media/tech/young-people-are-now-using-youtube-for-audiobooks/' target='_blank'>story</a> about audiobooks on Youtube.", "screenshot": "screenshot.png", "thumbnail":"thumbnail.png"}

appinventor/appengine/war/templates/DontGetFaked/DontGetFaked.json

+{"name": "DontGetFaked", "subtitle": "Quiz app to detect if a story is fake or not.", "description": "Create a quiz app that can test a user's ability to detect if a story is fake or not. Inspired by YR Media <a href='https://yri.youthradio.org/dontgetfaked/' target='_blank'>video and online quiz</a>.", "screenshot": "screenshot.png", "thumbnail":"thumbnail.png"}

appinventor/appengine/war/templates/MapTheMovement/MapTheMovement.json

+{"name": "MapTheMovement", "subtitle": "Search for Twitter hashtags by location using a map.", "description": "You're challenged with creating an app that shows what's happening on Twitter in any given location on a map. Inspired by YR Media's <a href='https://yri.youthradio.org/neveragain/' target='_blank'>interactive tracker</a> of student led action.", "screenshot": "screenshot.png", "thumbnail":"thumbnail.png"}

appinventor/appengine/war/templates/MoodRing/MoodRing.json

+{"name": "MoodRing", "subtitle": "Track your feelings and reach out to others having a rough time.", "description": "Mood Ring invites teens to track how theyre feeling using any combo of nine emojis, and to reach out to trusted others when theyre having a rough time.<br>Inspired by YR Media stories <a href='https://yr.media/tech/only-smiling-on-the-outside-teens-hide-depression/' target='_blank'>Only Smiling on the Outside: Teens Hide Depression</a> and <a href='https://yr.media/tech/could-your-next-therapist-be-your-phone/' target='_blank'>Could Your Next Therapist Be Your Phone?</a>", "screenshot": "screenshot.png", "thumbnail":"thumbnail.png"}

appinventor/appengine/war/templates/MyToDoList/MyToDoList.json

+{"name": "MyToDoList", "subtitle": "Keep track of your daily tasks.", "description": "Keep on top of your to-do list, by creating an app where you can add and remove tasks from your list. Inspired by YR Media <a href='https://youtu.be/rtwhgI122hg' target='_blank'>video</a> on bullet journaling.", "screenshot": "screenshot.png", "thumbnail":"thumbnail.png"}

appinventor/appengine/war/templates/SnapchatRemix/SnapchatRemix.json

+{"name": "SnapchatRemix", "subtitle": "Take a photo, then draw on it in different colors.", "description": "Make an app that can take a photo and set it as the background, draw different-colored dots and lines on the photo, and sends the photo to your friends. Inspired by NPR story <a href='https://www.npr.org/2017/03/02/518197167/snapchat-goes-public-in-largest-tech-ipo-since-alibaba' target='_blank'>Snapchat Goes Public In Largest Tech IPO Since Alibaba</a>.", "screenshot": "screenshot.png", "thumbnail":"thumbnail.png"}

appinventor/appengine/war/templates/SoundLibrary/SoundLibrary.json

+{"name": "SoundLibrary", "subtitle": "Capture, store, and play found sounds.", "description": "You are challenged to create an app that captures, stores and plays sounds. Inspired by YR Media story and videos <a href='https://yr.media/video/found-sounds-ep-1-latham-square/' target='_blank'>Making Beats on the Street with Found Sounds</a>.", "screenshot": "screenshot.png", "thumbnail":"thumbnail.png"}

appinventor/appengine/war/templates/TranslateApp/TranslateApp.json

+{"name": "TranslateApp", "subtitle": "Quickly translate English to Spanish (and other languages too!)", "description": "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'>What It's Like to be a Translator</a>.", "screenshot": "screenshot.png", "thumbnail":"thumbnail.png"}