Add splash panel

Shopify · Jun 26, 2012 · 2d825b0 · 2d825b0
1 parent a7b8730
commit 2d825b0
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 1 deletion.
diff --git a/Resources/css/style.css b/Resources/css/style.css
@@ -162,3 +162,29 @@ ul.theme-picker {
     border: 1px solid #ddd;
     background-color: #f5f5f5;
 }
+
+
+/* Splash Page */
+#splash-page img {
+  float: left;
+  padding-top: 50px;
+}
+
+#splash-page h1 {
+  color: #000;
+  font-size: 43px;
+  padding-top: 80px;  
+}
+
+#splash-page p {
+  color: #000;
+  font-size: 17px;
+  margin-top: 30px;
+  margin-right: 20px;
+}
+
+#splash-page #splash-btn-con {
+  float: right;
+  padding-top: 20px;
+  padding-right: 30px;
+}
diff --git a/Resources/index.html b/Resources/index.html
@@ -184,6 +184,17 @@ <h1>No Themes Found</h1>
     <h3>Click the Add Theme button to get started.</h3>
   </div>
 
+  <div id='splash-page' class='hide modal'>
+      <div class="modal-body">
+        <img src="img/shopify.png" width="300">
+        <h1>Lets get started!</h1>
+        <p>Thanks for downloading the Shopify Theme Developer App! To begin, please add your shop.</p>
+        <p>The Shopify Theme Developer App will automatically upload your local theme changes to your shop.</p>
+        <div id="splash-btn-con"><a class="add-shop btn-primary btn-large" href="#">Add Shop!</a></div>
+
+      </div>
+  </div>
+
   <div id='connecting-shopify-panel' class='hide modal'>
       <div class="modal-body">
         <h3>Connecting to Shopify</h3>

diff --git a/Resources/js/view.js b/Resources/js/view.js
@@ -92,7 +92,8 @@ Themer.appView = Y.Base.create('appView', Y.View, [], {
         if(this.shops.isEmpty()) {
             console.log('No Shops! Show Onboard!');
             Y.one('#no-shops').removeClass('hide');
-            this.addShop();
+            this.splash();
+            // this.addShop();
             return this;
         }
 
@@ -117,18 +118,30 @@ Themer.appView = Y.Base.create('appView', Y.View, [], {
 
         return this;
     },
+
+    splash: function() {
+        this.splashPanel = splashPanel();
+        this.splashPanel.show();
+    },
 
     // Click handler for the add shop button
     addShop: function(e) {
         //Setup the Add Shop form overlay
         this.addShopForm = this.addShopForm || this.createAddShopPanel();        
         this.addShopForm.show();
+
+        if(this.splashPanel) {
+            this.splashPanel.hide();
+        }
+
     }, 
 
     //Called when shop added to the shops list
     add: function(e) {
         console.log('appView: New Shop Added');
+
         //If its showing, hide it...
+        if(this && this.splashPanel){ this.splashPanel.hide(); }
         if(this && this.addShopForm){ this.addShopForm.hide(); }
         Y.one('#no-shops').addClass('hide');
         var view = new Themer.ShopView({
@@ -509,6 +522,28 @@ var downloadThemeActivity = function(themeModel) {
 
 };
 
+var splashPanel = function() {
+
+    var panel = new Y.Panel({
+        width: 700, 
+        height: 450,
+        centered: true,
+        visible: true,
+        modal: true,
+        buttons: [], //no close button
+        zIndex: 12,
+        srcNode: '#splash-page'
+    });
+
+    panel.render();
+    Y.one('#splash-page').removeClass('hide');
+
+    panel.set('centered', true); //to re-center
+
+    return panel;
+
+};
+
 var connectingPanel = function() {
 
     var panel = new Y.Panel({