updates to first time user flow

Author: jmstriegel

coder-base/apps/auth/app.js

@@ -120,14 +120,20 @@ exports.logout = function( req ) {
 
 
 exports.index_handler = function( req, res ) {
+    
+    var firstuse = "?firstuse";
+    if ( typeof( req.param('firstuse') ) === 'undefined' ) {
+        firstuse = "";
+    }
+    
     if ( !exports.isConfigured() ) {
-        res.redirect('/app/auth/configure');
+        res.redirect('/app/auth/configure?firstuse');
     } else if ( !exports.hasPassword() ) {
-        res.redirect('/app/auth/addpassword');
+        res.redirect('/app/auth/addpassword?firstuse');
     } else if ( !exports.isAuthenticated(req) ) {
-        res.redirect('/app/auth/login');
+        res.redirect('/app/auth/login' + firstuse);
     } else {
-        res.redirect('/app/coder');
+        res.redirect('/app/coder' + firstuse);
     }
 };
 

coder-base/apps/auth/meta.json

@@ -1,6 +1,6 @@
 {
     "created": "2013-03-05",
-    "modified": "2013-06-25",
+    "modified": "2013-07-17",
     "color": "#1abc9c",
     "author": "Jason Striegel",
     "name": "Auth",

coder-base/apps/coder/meta.json

@@ -1,6 +1,6 @@
 {
     "created": "2013-03-05",
-    "modified": "2013-06-26",
+    "modified": "2013-07-17",
     "color": "#bdc3c7",
     "author": "Jason Striegel",
     "name": "Coder",

coder-base/apps/coderlib/meta.json

@@ -1,6 +1,6 @@
 {
     "created": "2013-03-05",
-    "modified": "2013-06-26",
+    "modified": "2013-07-17",
     "color": "#3e3e3e",
     "author": "Jason Striegel",
     "name": "CoderLib",

coder-base/apps/editor/meta.json

@@ -1,6 +1,6 @@
 {
     "created": "2013-03-05",
-    "modified": "2013-06-19",
+    "modified": "2013-07-17",
     "color": "#80d4ea",
     "author": "Jason Striegel",
     "name": "Editor",

coder-base/apps/hello_coder/meta.json

@@ -1,6 +1,6 @@
 {
     "created": "2013-05-08",
-    "modified": "2013-06-26",
+    "modified": "2013-07-17",
     "color": "#d977d4",
     "author": "Jason Striegel",
     "name": "Hello Coder",

coder-base/static/apps/auth/js/index.js

@@ -236,7 +236,10 @@ var loginClick = function( what ) {
         function( data ) {
             console.log( data );
             if( data.status === "success" ) {
-                window.location.href="/app/coder";
+                if ( typeof getParams['firstuse'] !== 'undefined' ) {
+                    firstuse = '?firstuse';
+                }
+                window.location.href="/app/coder" + firstuse;
             } else {
                 $form.find('.errormessage').text( data.error ).css('visibility','visible');
                 $form.find('.pass').addClass('error');
@@ -300,7 +303,11 @@ var addPasswordClick = function() {
         function( data ) {
             console.log( data );
             if( data.status === "success" ) {
-                window.location.href="/app/auth";
+                var firstuse = '';
+                if ( typeof getParams['firstuse'] !== 'undefined' ) {
+                    firstuse = '?firstuse';
+                }
+                window.location.href="/app/auth" + firstuse;
             } else {
                 $form.find('.pass').addClass('error');
                 $form.find('.errormessage').text( data.error ).css('visibility','visible');
@@ -462,3 +469,4 @@ var updateAnimation = function() {
 };
 
 
+

coder-base/static/apps/coder/css/index.css

@@ -3,7 +3,7 @@
 
 
 #additem {
-    background-color: #bdc3c7;
+    background-color: #2ecc71;
 }
 
 #applist {
@@ -71,7 +71,7 @@
     position: absolute;
     background-image: url(/static/common/media/coder_icons.png);
     background-position: -167px 0px;
-    opacity: 0.6;
+    opacity: 0.8;
 }
 #addapp_button:hover #addapp_icon {
     background-color: rgba(255,255,255,0.1);
@@ -411,4 +411,79 @@
     cursor: pointer;
 }
 
+#introduction {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.4);
+    z-index:4;
+}
+
+
+.intromessage {
+    width: 450px;
+    position: absolute;
+    top: 400px;
+    color: #fff;
+    left: 50%;
+    margin-left: -200px;
+    text-align: center;
+}
+
+.intromessage h1 {
+    font-size: 28px;
+    line-height: 28px;
+    font-weight: bold;
+    margin:0;
+    padding: 0 0 20px 0;
+}
+.intromessage p {
+    font-size: 21px;
+    line-height: 1.2em;
+    padding: 0 0 20px 0;
+    margin:0;
+}
+.intromessage a, .intromessage a:hover, .intromessage a:active, .intromessage a:visited {
+    color: #333;
+    text-decoration: underline;
+}
+.gotit {
+    font-size: 21px;
+    font-weight: bold;
+    line-height: 60px;
+    border-radius: 4px;
+    width: 400px;
+    margin-left:25px;
+    margin-bottom: 24px;
+    background-color: rgba(0,0,0,0.5);
+}
+.gotit:hover {
+    cursor: pointer;
+    background-color: rgba(0,0,0,1);;
+}
+#dontshow {
+    vertical-align: middle;
+    width: 20px;
+    height: 20px;
+}
+.dontshowmsg {
+    vertical-align: middle;
+}
 
+#myapps_tip {
+    position: absolute;
+    left: 440px;
+    top: 220px;
+}
+#newapp_tip {
+    position: absolute;
+    left: 140px;
+    top: 220px;
+}
+#settings_tip {
+    position: absolute;
+    right: 60px;
+    top: 20px;
+}

coder-base/static/apps/coder/js/index.js

@@ -64,8 +64,26 @@ $(document).ready( function() {
     $("#settingscontainer .logout").click( function() {
         window.location.href="/app/auth/logout";
     });
+    
+    if ( typeof getParams['firstuse'] !== 'undefined' ) {
+        buildIntroduction();
+    }
 });
 
+
+var buildIntroduction = function() {
+    $('#introduction').fadeIn();
+    $('.gotit').click( function() {
+        $('#introduction').fadeOut(function() {
+            $(this).hide();
+        });
+    });
+};
+
+
+
+
+
 var revertSettings = function() {
     activateCurrentCoderColor();
     updateSettingsData();

coder-base/static/apps/coder/media/myapps_tip.png

@@ -58,3 +58,18 @@ if ( typeof appname != 'nothing' ) {
 if ( typeof appurl != 'nothing' ) {
     Coder.appurl = appurl;
 }
+
+var getParams = (function(qs){
+    var params = {};
+    if ( typeof qs !== 'undefined' ) {
+        for ( var x=0; x<qs.length; x++ ) {
+            var param = qs[x].split('=');
+            if (param.length == 2) {
+                params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
+            } else {
+                params[param[0]] = '';
+            }
+        }
+    }
+    return params;
+})(window.location.search.substr(1).split('&'));

coder-base/static/apps/coder/media/newapp_tip.png

@@ -69,6 +69,7 @@ BODY, HTML {
     font-size: 24px;
     line-height: 60px;
     float: left;
+    cursor: pointer;
 }
 
 .sidepanel h1 {

coder-base/static/apps/coder/media/settings_tip.png

@@ -70,6 +70,9 @@ $(document).ready( function() {
     $("#settingscontainer input").on('change', checkChangedSettings );
     $("#settingscontainer input").on('keydown', function() { setTimeout( checkChangedSettings, 0); } );
 
+    $("#editornav .application_name").click( function() {
+        window.location.href = '/app/' + edit_appname;
+    });
     //uncomment to open preview by default
     //togglePreview();
 

coder-base/static/apps/coderlib/js/index.js

@@ -59,17 +59,34 @@ Try to change the text and background colors to something you like.
 See what happens when you change the font-size value to 40px.
 */
 h1 {
-    background-color: #000000;
-    color: #ffffff;
-    font-size: 24px;
-    line-height: 60px;
-    display: block;    
-    margin: 0;
-    text-transform: uppercase;
+    text-align: center;
+    background-color: #FFFFFF;
+    color: #D977D4;
+    font-size: 42px;
+    line-height: 60px;    
     margin: 0;
     padding: 0;
-    margin-bottom: 200px;
-    padding-left: 24px;
+    font-weight: bold;
+    
+    
+    /*
+       This lets us set a width on the block.
+       Otherwise it will default to the full
+       page width.
+     */
+    width: 400px;
+
+    /*
+       We can center the block using relative
+       positioning, placing it 50% of the page
+       width from the left. The negative
+       margin-left compensates for half the 
+       width of the block to complete the
+       centering.
+    */
+    position: relative;
+    left: 50%;
+    margin-left: -200px;
 }
 
 /*
@@ -85,7 +102,6 @@ p {
     margin-bottom: 10px;
     font-size: 28px;
     line-height: 28px;
-    font-weight: bold;
     text-align: center;
     color: #ffffff;
     padding: 0;
@@ -118,11 +134,13 @@ p {
   <div class="pagecontent">
   We're placing everything inside of this and using this class to
   position this content on top of the animation canvas using z-index.
+  It also uses padding-top to position all of the text content 200px
+  down from the top of the page.
 */
 .pagecontent {
     z-index: 2;
     position: relative;
-    height: 100%;
+    padding-top: 200px;
     width: 100%;
 }
 

coder-base/static/apps/editor/css/index.css

@@ -120,5 +120,20 @@ <h1>Settings</h1>
     <div class="cancel">Cancel</div>
 </div>
 
+<div id="introduction" style="display:none">
+    
+    <div class="intromessage">
+        <h1>Getting Started</h1>
+        <p>Check out the quick tips above. For a more detailed tour, go to <a href="http://goo.gl/coder" target="_blank">goo.gl/coder</a>. When you're ready to dive in, just click 'Got It'.</p>
+        <div class="finished">
+            <div class="gotit">Got It</div>            
+        </div>
+    </div>
+    <img src="/static/apps/coder/media/myapps_tip.png" id="myapps_tip" />
+    <img src="/static/apps/coder/media/settings_tip.png" id="settings_tip"/>
+    <img src="/static/apps/coder/media/newapp_tip.png" id="newapp_tip"/>
+        
+</div>
+
 </body>
 </html>