From 01fbca0fe6e699379f2c5eaa6e01a4c73eade828 Mon Sep 17 00:00:00 2001
From: David Huynh <dfhuynh@gmail.com>
Date: Tue, 13 Apr 2010 07:52:01 +0000
Subject: [PATCH] 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 |  8 ++++++++
 src/main/webapp/styles/project/browsing.css        | 14 +++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/main/webapp/scripts/project/browsing-engine.js b/src/main/webapp/scripts/project/browsing-engine.js
index ca2ca255a..f1b94033a 100644
--- a/src/main/webapp/scripts/project/browsing-engine.js
+++ b/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) {
diff --git a/src/main/webapp/styles/project/browsing.css b/src/main/webapp/styles/project/browsing.css
index c8d83838d..119ab588f 100644
--- a/src/main/webapp/styles/project/browsing.css
+++ b/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;