Merge pull request #47 from yvan33/welcome-page

Welcome page

src/html/panel.html

@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" href="../css/performance.css"/>
     <link rel="stylesheet" type="text/css" href="../css/perf-report.css"/>
     <link rel="stylesheet" type="text/css" href="../css/generate.css"/>
+    <link rel="stylesheet" type="text/css" href="../css/general.css"/>
     <link rel="stylesheet" type="text/css" href="../css/appstream.css"/>
     <!-- libraries -->
     <script src="../lib/jquery-1.9.1.js"></script>

src/js/views/general.js

@@ -11,6 +11,7 @@
     template: BDT.templates['general'],
 
     events: {
+      'click ul[data-menu]': 'selectItem',
       'change [name="tooltips"]': 'toggleTooltips',
       'change [name="timeout"]': 'updateTimeout'
     },
@@ -40,6 +41,11 @@
       var seconds = parseFloat(this.$(evt.currentTarget).val());
       var ms = Math.round(seconds * 1000);
       BDT.page.eval('updateTimeout', [ms]);
+    },
+
+    selectItem: function(evt) {
+      var itemId = $(evt.currentTarget).data('menu');
+      $('nav a[href=' + itemId + ']').click();
     }
 
   });

src/js/views/navbar.js

@@ -8,11 +8,12 @@
   BDT.views.Navbar = Backbone.View.extend({
 
     template: BDT.templates['navbar'],
+    defaultView: '#general',
 
     render: function() {
       this.$el.empty().append(this.template());
       this.$el.attr('tabindex', 0);
-      this.trigger('select', '#general');
+      this.selectItem();
       return this;
     },
 
@@ -25,8 +26,11 @@
         if (isException) {
         } else {
             BDT.debugMode = result;
-            evt.preventDefault();
-            var anchor = $(evt.currentTarget);
+            let anchor = this.$('[href=' + this.defaultView + ']');
+            if (evt) {
+                evt.preventDefault();
+                anchor = $(evt.currentTarget);
+            }
             anchor.addClass('selected').siblings().removeClass('selected');
             this.trigger('select', anchor.attr('href'));
         }

src/scss/general.scss

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2015 SugarCRM Inc. Licensed by SugarCRM under the Apache 2.0 license.
+ */
+
+.general {
+  .features {
+    .pricing-table {
+      cursor: pointer;
+      &.columns {
+        padding: 0;
+      }
+      .title{
+        background-color: #282828;
+        box-shadow: 0 4px 0 #e61718;
+        font-size: 1.2rem;
+      }
+      .description {
+        margin-top: 4px;
+        font-size: 1rem;
+      }
+    }
+    .small-6 {
+      width:48%;
+    }
+  }
+}

src/scss/panel.scss

@@ -33,6 +33,9 @@ html, body {
       background-color: #0e0e0e;
     }
   }
+  img#sugar-cube {
+    height: 22px;
+  }
 }
 
 #main {

src/templates/appstream.handlebars

@@ -9,7 +9,7 @@
 
     <div data-view="table"></div>
 {{else}}
-    <div data-alert="debugMode" class="alert-box round">
+    <div data-alert="debugMode" class="alert-box">
         Please activate the debug mode by clicking on the Sugar cube in your browser header bar to access to this feature.
     </div>
 {{/if_debugMode}}

src/templates/general.handlebars

@@ -1,21 +1,41 @@
 <h2 class="text-center">Sidecar Debugger Tool</h2>
-
-<form>
-    <input type="checkbox" name="tooltips" id="tooltips_checkbox" /><label for="tooltips_checkbox">Display tooltips on hover with view/field information<span class="red">*</span></label><br>
-</form>
-<p><span class="red">*</span> Requires page reload</p>
-
-<h2>Features</h2>
-<ul>
-    <li>$view console variable after inspecting a DOM Element (it points to the closest parent Sidecar Component).</li>
-    <li>In <strong>SugarDebug Panel</strong>, you will find different several tabs:
-        <ul>
-            <li><strong><i>Application Stream: </i></strong>A timeline of what is happening in the app. It shows the methods that are called and the events that are triggered. For each of them, you have access to the passed arguments and the component object.</li>
-            <li><strong><i>Structure: </i></strong>A hierarchical tree representing the Sugar components of the current page.</li>
-            <li><strong><i>Render times: </i></strong>Allows you to measure the render duration of the different fields.</li>
-            <!--<li><strong><i>Metrics: </i></strong>Allows you to track any method of any sugar component to capture its duration and detect performance lacks.</li>-->
-            <li><strong><i>Generate records: </i></strong>An easy way to generate records in your SugarCRM instance.</li>
+<hr>
+<div class="features">
+    <div class="row">
+        <ul class="small-6 columns pricing-table radius" data-menu="#appstream">
+            <li class="title">Application Stream</li>
+            <li class="description">A timeline of what is happening in the app. It shows the methods that are called and the events that are triggered. For each of them, you have access to the passed arguments and the component object.</li>
         </ul>
-    </li>
-</ul>
-
+        <ul class="small-6 columns pricing-table radius" data-menu="#perfReport">
+            <li class="title">Performance reports</li>
+            <li class="description">A table showing the render times and the number of renders of the components on the page</li>
+        </ul>
+    </div>
+    <div class="row">
+        <ul class="small-6 columns pricing-table radius" data-menu="#structure">
+            <li class="title">Structure</li>
+            <li class="description">A hierarchical tree representing the Sugar components of the current page.</li>
+        </ul>
+        <ul class="small-6 columns pricing-table radius" data-menu="#generate">
+            <li class="title">Generate records</li>
+            <li class="description">Generate Sugar records in the one click!</li>
+        </ul>
+    </div>
+    <div class="row">
+        <ul class="small-6 columns pricing-table radius" data-menu="#performance">
+            <li class="title">Render times</li>
+            <li class="description">Measure the render duration of the different fields to detect performance drops.</li>
+        </ul>
+    </div>
+</div>
+<hr>
+{{#if_debugMode}}
+    <div data-alert="debugMode" class="alert-box success">
+        <strong>$view feature activated!</strong> Select a DOM element with the default chrome element selector,
+        the corresponding sidecar component will be set globally in <strong>$view</strong> variable so you can access it from the console.
+    </div>
+{{else}}
+    <div data-alert="debugMode" class="alert-box">
+        Please activate the debug mode by clicking on the Sugar cube in your browser header bar to activate the amazing <strong>$view</strong> feature!
+    </div>
+{{/if_debugMode}}

src/templates/navbar.handlebars

@@ -1 +1 @@
-<a class="selected" href="#general">Settings</a><a href="#appstream">Application Stream</a><a href="#structure">Structure</a><a href="#perfReport">Perf report</a><a href="#performance">Render times</a><a href="#generate">Generate records</a>
+<a class="selected" href="#general"><img id="sugar-cube" src="../img/sugarcube.png"></a><a href="#appstream">Application Stream</a><a href="#structure">Structure</a><a href="#perfReport">Perf report</a><a href="#performance">Render times</a><a href="#generate">Generate records</a>

src/templates/perf-report.handlebars

@@ -109,7 +109,7 @@
         </tbody>
     </table>
 {{else}}
-    <div data-alert="debugMode" class="alert-box round">
+    <div data-alert="debugMode" class="alert-box">
         Please activate the debug mode by clicking on the Sugar cube in your browser header bar to access to this feature.
     </div>
 {{/if_debugMode}}

src/templates/structure.handlebars

@@ -12,7 +12,7 @@
     </div>
 </div>
 {{else}}
-    <div data-alert="debugMode" class="alert-box round">
+    <div data-alert="debugMode" class="alert-box">
         Please activate the debug mode by clicking on the Sugar cube in your browser header bar to access to this feature.
     </div>
 {{/if_debugMode}}