Twitter bootstrap forms
authorTomas Zeman <tzeman@volny.cz>
Thu, 12 Apr 2012 10:52:42 +0200
changeset 48 366e1f8d93bb
parent 47 cb88ced8aadf
child 49 c24112f0f084
Twitter bootstrap forms
src/main/scala/fis/base/ui/screen.scala
src/main/scala/fis/crm/ui/ContactSnippet.scala
src/main/webapp/css/base.css
src/main/webapp/templates-hidden/form-panel.html
src/main/webapp/templates-hidden/wizard-all.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/scala/fis/base/ui/screen.scala	Thu Apr 12 10:52:42 2012 +0200
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2012 Tomas Zeman <tzeman@volny.cz>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package fis.base.ui
+
+import net.liftweb.http.LiftScreen
+import net.tz.lift.model._
+import scala.xml.{Elem, Text, UnprefixedAttribute}
+
+trait SaveButton { self: LiftScreen =>
+  override def finishButton: Elem =
+    <button class="btn btn-primary">{
+      l10n("Save")
+    }</button>
+}
+
+trait DeleteButton { self: LiftScreen =>
+  override def finishButton: Elem =
+    <button class="btn btn-primary">{
+      l10n("Delete")
+    }</button>
+}
+
+trait CancelButton { self: LiftScreen =>
+  override def cancelButton: Elem =
+    <button class="btn">{l10n("Cancel")}</button>
+}
+
+trait HorizontalScreen extends LiftScreen {
+  override def additionalAttributes = new UnprefixedAttribute("class",
+    Text("form-horizontal"), super.additionalAttributes)
+}
+
+// vim: set ts=2 sw=2 et:
--- a/src/main/scala/fis/crm/ui/ContactSnippet.scala	Tue Mar 06 14:07:04 2012 +0100
+++ b/src/main/scala/fis/crm/ui/ContactSnippet.scala	Thu Apr 12 10:52:42 2012 +0200
@@ -67,7 +67,8 @@
     def view: Contact => Box[String] = (viewLoc.calcHref _) andThen (Box !! _)
   }
 
-  object form extends LiftScreen {
+  object form extends HorizontalScreen with CancelButton with SaveButton {
+
     object c extends ScreenVar[Contact](Contact.createRecord)
 
     override def screenFields: List[BaseField] = ContactPanel.fields(c)
--- a/src/main/webapp/css/base.css	Tue Mar 06 14:07:04 2012 +0100
+++ b/src/main/webapp/css/base.css	Thu Apr 12 10:52:42 2012 +0200
@@ -52,6 +52,10 @@
   text-align: right;
 }
 
+.control-label {
+  font-weight: bold;
+}
+
 /* fix for active sf-menu item in span tag */
 .sf-menu span {
   padding: 0.75em 1em;
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/webapp/templates-hidden/form-panel.html	Thu Apr 12 10:52:42 2012 +0200
@@ -0,0 +1,10 @@
+<fieldset>
+  <legend></legend>
+  <div class="control-group">
+    <label class="control-label" for="">Text input</label>
+    <div class="controls">
+      <input type="text" class="input-xlarge" id="input01">
+      <span class="help-inline">Supporting help text</span>
+    </div>
+  </div>
+</fieldset>
--- a/src/main/webapp/templates-hidden/wizard-all.html	Tue Mar 06 14:07:04 2012 +0100
+++ b/src/main/webapp/templates-hidden/wizard-all.html	Thu Apr 12 10:52:42 2012 +0200
@@ -5,55 +5,40 @@
   <wizard:wizard_top> <div> <wizard:bind/> </div> </wizard:wizard_top>
   <wizard:screen_top> <div> <wizard:bind/> </div> </wizard:screen_top>
   <wizard:errors>
-    <div>
-      <ul>
-        <wizard:item><li><wizard:bind/></li></wizard:item>
-      </ul>
-    </div>
+    <div> <ul> <wizard:item><li><wizard:bind/></li></wizard:item> </ul> </div>
   </wizard:errors>
-  <div>
+  <fieldset>
+    <legend></legend>
     <wizard:fields>
-      <table>
-        <tr lift:bind="wizard:line" class="row">
-          <td class="form-name">
-            <wizard:label>
-              <label wizard:for="">
-                <wizard:bind></wizard:bind>
-              </label>
-            </wizard:label>
-            <wizard:help>
-              <span>
-                <wizard:bind></wizard:bind>
-              </span>
-            </wizard:help>
-            <wizard:field_errors>
+      <div lift:bind="wizard:line" class="control-group">
+        <wizard:label>
+          <label wizard:for="" class="control-label"> <wizard:bind></wizard:bind> </label>
+        </wizard:label>
+        <div class="controls">
+          <wizard:form></wizard:form>
+          <wizard:help>
+            <span class="help-inline"> <wizard:bind></wizard:bind> </span>
+          </wizard:help>
+          <wizard:field_errors>
+            <span class="help-inline">
               <ul>
                 <wizard:error>
                   <li><wizard:bind></wizard:bind></li>
                 </wizard:error> 
               </ul>
-            </wizard:field_errors>
-          </td>
-          <td class="form-value">
-            <wizard:form></wizard:form>
-          </td>
-        </tr>
-      </table>
+            </span>
+          </wizard:field_errors>
+        </div>
+      </div>
     </wizard:fields>
-  </div>
-  <div>
-    <table>
-      <tr> 
-        <td><wizard:prev></wizard:prev></td>
-        <td><wizard:cancel></wizard:cancel></td>
-        <td><wizard:next></wizard:next></td>
-      </tr>
-    </table>
-  </div>
-  <wizard:screen_bottom>
-    <div><wizard:bind></wizard:bind></div>
-  </wizard:screen_bottom>
-  <wizard:wizard_bottom>
-    <div><wizard:bind></wizard:bind></div>
-  </wizard:wizard_bottom>
+    <div class="form-horizontal">
+      <div class="form-actions">
+        <wizard:prev></wizard:prev>
+        <wizard:next></wizard:next>
+        <wizard:cancel></wizard:cancel>
+      </div>
+    </div>
+  </fieldset>
+  <wizard:screen_bottom> <div><wizard:bind></wizard:bind></div> </wizard:screen_bottom>
+  <wizard:wizard_bottom> <div><wizard:bind></wizard:bind></div> </wizard:wizard_bottom>
 </div>