Added help message when the facet panel is empty.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@466 7d457c2a-affb-35e4-300a-418c747d4874

src/main/webapp/scripts/project/browsing-engine.js

@@ -48,6 +48,11 @@ BrowsingEngine.prototype._initializeUI = function() {
     
     this._div.html(
         '<div class="browsing-panel-header">' +
+            '<div class="browsing-panel-help" bind="help">' +
+                '<h1>Explore data ...</h1>' +
+                '<p>by choosing a facet or filter method from the menus at the top of each column.</p>' +
+                '<p>Not sure how to get started? Watch this screencast.</p>' +
+            '</div>' +
             '<div class="browsing-panel-indicator" bind="indicator"><img src="images/small-spinner.gif" /> refreshing facets ...</div>' +
             '<div class="browsing-panel-controls" bind="controls">' +
                 '<p>' +
@@ -174,7 +179,10 @@ BrowsingEngine.prototype.update = function(onDone) {
             
             self._elmts.indicator.hide();
             if (self._facets.length > 0) {
+                self._elmts.help.hide();
                 self._elmts.controls.show();
+            } else {
+                self._elmts.help.show();
             }
             
             if (onDone) {

src/main/webapp/styles/project/browsing.css

@@ -1,6 +1,5 @@
 .browsing-panel-header {
     height: 5em;
-    text-align: center;
 }
 
 .browsing-panel-indicator {
@@ -9,6 +8,19 @@
 .browsing-panel-controls {
     display: none;
 }
+.browsing-panel-help {
+    padding: 10px;
+    background: white;
+    border: 1px solid #ccc;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+}
+.browsing-panel-help h1 {
+    margin-top: 0px;
+    font-size: 150%;
+    font-weight: bold;
+    color: #888;
+}
 
 ul.facets-container {
     padding: 0;