[dataset/edit][s]: rework form somewhat and create set of tabs for sw…

…itching between different parts of form (though not yet necessary).
okfn · Aug 2, 2011 · 8464563 · 8464563
1 parent 03cfa70
commit 8464563
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 43 deletions.
diff --git a/app/css/ckanjs.css b/app/css/ckanjs.css
@@ -10,6 +10,38 @@
   line-height: 0.9;
 }
 
+/****************************************
+  * Mini Tabs
+  ***************************************/
+
+ul.tabs li {
+  display: inline;
+}
+
+ul.tabs li a {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 10px;
+  font-weight: bold;
+  text-decoration: none;
+  color: #666;
+  border: 1px solid transparent;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  border-top-left-radius: 10px 10px;
+  border-top-right-radius: 10px 10px;
+  border-bottom-right-radius: 10px 10px;
+  border-bottom-left-radius: 10px 10px;
+}
+
+ul.tabs li a.selected {
+  color: #333;
+  background: white;
+  border-color: #BBB;
+  border-right-color: #DDD;
+  border-bottom-color: #DDD;
+}
+
 /****************************************
   * Dataset Summaries
   ***************************************/
@@ -92,6 +124,22 @@ ul.actions li {
   line-height: 12px;
 }
 
+/****************************************
+  * Dataset Edit/Create
+  ***************************************/
+
+div.dataset-form-navigation ul {
+  background: #EEE;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-top-left-radius: 5px 5px;
+  border-top-right-radius: 5px 5px;
+  border-bottom-right-radius: 5px 5px;
+  border-bottom-left-radius: 5px 5px;
+  border: 1px solid #CCC;
+  padding: 5px 5px 5px 10px;
+}
+
 /****************************************
   * Forms
   ***************************************/
@@ -116,8 +164,9 @@ fieldset {
   font-size: 75%;
 }
 
-form ul.tabs li {
-  display: inline;
+form ul.tabs {
+  margin-top: 0.5em;
+  padding-left: 0;
 }
 
 div.previewable-textarea {
@@ -132,30 +181,6 @@ div.previewable-textarea {
   padding: 0 5px 0 10px;
 }
 
-form ul.tabs li a {
-  display: inline-block;
-  padding: 2px 8px;
-  font-size: 10px;
-  font-weight: bold;
-  text-decoration: none;
-  color: #666;
-  border: 1px solid transparent;
-  -webkit-border-radius: 10px;
-  -moz-border-radius: 10px;
-  border-top-left-radius: 10px 10px;
-  border-top-right-radius: 10px 10px;
-  border-bottom-right-radius: 10px 10px;
-  border-bottom-left-radius: 10px 10px;
-}
-
-form ul.tabs li a.selected {
-  color: #333;
-  background: white;
-  border-color: #BBB;
-  border-right-color: #DDD;
-  border-bottom-color: #DDD;
-}
-
 div.preview {
   min-height: 80px;
   background: white;
@@ -167,3 +192,11 @@ div.preview {
 form dl dd .preview ul {
   margin-left: 1.5em;
 }
+
+.hints {
+  font-weight: normal;
+}
+
+p.hints {
+  margin-bottom: 0;
+}
diff --git a/lib/template/dataset-form.js b/lib/template/dataset-form.js
@@ -1,4 +1,19 @@
 CKAN.Templates.datasetForm = ' \
+  <div class="dataset-form-navigation"> \
+    <ul class="tabs"> \
+      <li> \
+        <a href="#basics" class="selected">Basics</a> \
+      </li> \
+      <li> \
+        <a href="#data">The Data</a> \
+      </li> \
+      <li> \
+        <a href="#additional"> \
+          Additional Information \
+        </a> \
+      </li> \
+    </ul> \
+  </div> \
   <form class="dataset" action="" method="POST"> \
     <dl> \
       <dt> \
@@ -12,24 +27,14 @@ CKAN.Templates.datasetForm = ' \
  \
       <dt> \
         <label class="field_req" for="Dataset--name"> \
-          Slug * \
+          Name * \
+          <span class="hints"> \
+            (A short unique lowercase name for the dataset for use in urls and therefore only containing alphanumeric characters plus - and _) \
+          </span> \
         </label> \
       </dt> \
       <dd> \
         <input id="Dataset--name" maxlength="100" name="Dataset--name" type="text" value="${dataset.name}" placeholder="A shortish name usable in urls ..." /> \
-        <img src="img/help.png" \
-          class="help" \
-          title="A unique lowercase name for the dataset for use in urls and therefore only containing alphanumeric characters plus - and _" \
-          > \
-      </dd> \
- \
-      <dt> \
-        <label class="field_opt" for="Dataset--url"> \
-          Home Page \
-        </label> \
-      </dt> \
-      <dd> \
-        <input id="Dataset--url" name="Dataset--url" type="text" value="${dataset.url}" placeholder="http://mydataset.com/about/" /> \
       </dd> \
  \
       <dt> \
@@ -48,6 +53,7 @@ CKAN.Templates.datasetForm = ' \
         <label class="field_opt" for="Dataset--notes"> \
           Description and Notes \
         </label> \
+        <br /> \
         You can use <a href="http://daringfireball.net/projects/markdown/syntax">Markdown formatting</a> \
       </dt> \
       <dd> \

diff --git a/lib/view.js b/lib/view.js
@@ -75,7 +75,15 @@ CKAN.View = function($) {
 
     events: {
       'submit form.dataset': 'saveData',
-      'click .previewable-textarea a': 'togglePreview'
+      'click .previewable-textarea a': 'togglePreview',
+      'click .dataset-form-navigation a': 'showFormPart'
+    },
+
+    showFormPart: function(e) {
+      e.preventDefault();
+      var action = $(e.target)[0].href.split('#')[1];
+      $('.dataset-form-navigation a').removeClass('selected');
+      $('.dataset-form-navigation a[href=#' + action + ']').addClass('selected');
     },
 
     saveData: function(e) {

diff --git a/test/view-test.js b/test/view-test.js
@@ -48,8 +48,8 @@ test("DatasetEditView", function () {
   var tmpl = $(view.el);
   out = tmpl.find('#Dataset--title').val();
   equals(out, 'A Novel By Tolstoy');
-  out = tmpl.find('#Dataset--url').val();
-  equals(out, pkg.get('url'));
+  out = tmpl.find('#Dataset--tags').val();
+  equals(out, 'russian,tolstoy');
 });
 
 test("DatasetSearchView", function () {