Merge pull request #210 from chrisgarrity/feature/revised-share-flow

Move the parental gate before the share buttons

android/ScratchJr/.idea/misc.xml

@@ -27,7 +27,7 @@
       </value>
     </option>
   </component>
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" default="true" assert-keyword="true" jdk-15="true" project-jdk-name="1.8" project-jdk-type="JavaSDK">
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_1_7" default="true" assert-keyword="true" jdk-15="true" project-jdk-name="1.8" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/build/classes" />
   </component>
   <component name="ProjectType">

editions/free/src/css/editor.css

@@ -591,10 +591,35 @@ z-index: 5;
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255, 255, 255, 0.2)), color-stop(35%,rgba(255, 255, 255, 0)), color-stop(100%,rgba(255, 255, 255, 0)));
 }
 
+div.infoboxParentsSection {
+   width: 51%;
+   margin: auto;
+   margin-top: 8%;
+}
+
+div.infoboxParentsButton {
+   color: #fff;
+   background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.2) 51%);
+   text-transform: uppercase;
+   text-align: center;
+   font-weight: bold;
+   font-size: 15pt;
+   letter-spacing: .5px;
+   width:  ${css_vw(23.41)};
+   padding-top: ${css_vh(1.56)};
+   padding-bottom: ${css_vh(1.56)};
+   padding-left: ${css_vw(.5)};
+   padding-right: ${css_vw(.5)};
+   border-radius: 15px;
+   border: 2px solid #c19f21;
+   margin: auto;
+}
+
 div.infoboxShareButtons {
    width: 51%;
    margin: auto;
    margin-top: 8%;
+   visibility: hidden;
 }
 
 div.infoboxShareButton {

editions/free/src/localizations/en.json

@@ -362,6 +362,7 @@
     "SHARING_BY_AIRDROP": "Share by Airdrop",
     "SHARING_EMAIL_SUBJECT": "ScratchJr Project: {PROJECT_NAME}",
     "SHARING_EMAIL_TEXT": "Click the icon to try my ScratchJr project on your iPad or Android tablet!<br><br>If you don't have the ScratchJr app, you can <a href='http://www.scratchjr.org'>download it</a> from the Apple App store or the Google Play Store.<br><br>With ScratchJr, children can create their own interactive stories and games. To learn more, see <a href='http://www.scratchjr.org'>scratchjr.org</a>.",
+    "FOR_PARENTS": "For Parents",
     "PARENTAL_GATE_EXPLANATION": "Why are we asking this? An adult must approve online sharing.",
     "GRID_NUMBER": "{N, number}",
     "NEW_PROJECT_PREFIX": "Project",

src/editor/ui/UI.js

@@ -118,12 +118,22 @@ export default class UI {
         author.setAttribute('id', 'deviceName');
 
         if (window.Settings.shareEnabled) {
+            // For Parents button
+            var parentsSection = newHTML('div', 'infoboxParentsSection', infobox);
+            var parentsButton = newHTML('div', 'infoboxParentsButton', parentsSection);
+            parentsButton.id = 'infoboxParentsSectionButton';
+            parentsButton.textContent = Localization.localize('FOR_PARENTS');
+
             // Sharing
             var shareButtons = newHTML('div', 'infoboxShareButtons', infobox);
+            shareButtons.setAttribute('id', 'sharebuttons');
 
             var shareEmail = newHTML('div', 'infoboxShareButton', shareButtons);
             shareEmail.id = 'infoboxShareButtonEmail';
             shareEmail.textContent = Localization.localize('SHARING_BY_EMAIL');
+            shareEmail.ontouchstart = function (e) {
+                UI.infoDoShare(e, nameField, shareLoadingGif, 1);
+            };
 
             if (isAndroid) {
                 shareEmail.style.margin = 'auto';
@@ -137,9 +147,7 @@ export default class UI {
                 shareAirdrop.textContent = Localization.localize('SHARING_BY_AIRDROP');
                 shareAirdrop.style.float = 'right';
                 shareAirdrop.ontouchstart = function (e) {
-                    UI.parentalGate(e, function (e) {
+                    UI.infoDoShare(e, nameField, shareLoadingGif, 1);
-                        UI.infoDoShare(e, nameField, shareLoadingGif, 1);
-                    });
                 };
             }
 
@@ -150,9 +158,9 @@ export default class UI {
             var shareLoadingGif = newHTML('img', 'infoboxShareLoading', shareButtons);
             shareLoadingGif.src = './assets/ui/loader.png';
 
-            shareEmail.ontouchstart = function (e) {
+            parentsButton.ontouchstart = function (e) {
                 UI.parentalGate(e, function (e) {
-                    UI.infoDoShare(e, nameField, shareLoadingGif, 0);
+                    UI.showSharing(e, shareButtons);
                 });
             };
         }
@@ -223,6 +231,10 @@ export default class UI {
         }
     }
 
+    static showSharing (evt, shareButtons) {
+        shareButtons.style.visibility = 'visible';
+    }
+
     /*
     +    Save the project, including the new name, then package the project and send native-side for sharing
     +
@@ -439,6 +451,7 @@ export default class UI {
             ScratchAudio.sndFX('exittap.wav');
             gn('infobox').className = 'infobox fade';
         }
+        gn('sharebuttons').style.visibility = 'hidden';
         infoBoxOpen = false;
     }