Changeset 340

Timestamp:

06/06/12 15:23:21 (13 years ago)

Author:

tjcschipper

Message:

• Fixed typo in rft/content.js description. No functionality touched, don't worry!;)
• Some more markup and styling changes to make everything more consistent.
• Created rft/ui/Breadcrumbs class, first draft of decoupled breadcrumbs system. Still needs a couple of fixes (see comments in file) and requires rft/content to expose "rft/content/goTo" event via connect.publish or topic.publish.

Location:

Dev/branches/rest-dojo-ui/client

Files:

• mockup.html (modified) (1 diff)
• rft/content.js (modified) (1 diff)
• rft/css/layout.css (modified) (5 diffs)
• rft/ui/Breadcrumbs.js (added)

Dev/branches/rest-dojo-ui/client/mockup.html

@@ -80 +80 @@
                         </div>
                         <div data-dojo-type="dijit.layout.TabContainer" class="blue" data-dojo-props="tabPosition:'left-h',region:'center'">
-                            <div data-dojo-type="dijit.layout.ContentPane" title="Category One">
-                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one'"></div>
-                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two'"></div>
+                            <div data-dojo-type="dijit.layout.ContentPane" title="Category One, this is a very long title to see how overflow works. This part is cut off because it passes two lines at 200px wide.">
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat one', modifiers:'green'"></div>
+                                <div data-dojo-type="rft.ui.SelectorThijs" data-dojo-props="Title:'Subcat two', modifiers: 'purple'"></div>
                             </div>
                             <div data-dojo-type="dijit.layout.ContentPane" title="Category Two">

Dev/branches/rest-dojo-ui/client/rft/content.js

@@ -17 +17 @@
  * The event onLeave is called before navigating to another page. If false is 
  * returned from this function, the navigation will be cancelled. You can use 
- * this e.g. to ask confirmation of changed values are not saved.
+ * this e.g. to ask confirmation if changed values are not saved.
  */
 define(['dojo/_base/declare','dojo/_base/connect','dojo/_base/xhr','dojo/_base/json',

Dev/branches/rest-dojo-ui/client/rft/css/layout.css

@@ -62 +62 @@
 
 /* Breadcrumbs */
-.breadcrumbs {
+.claro .breadcrumbs {
     float: left;
     clear: left;
@@ -70 +70 @@
     line-height: 16px;
 }
-.breadcrumb {
+.claro .breadcrumbs .breadcrumb {
     color: #999999;
     font-size: 13px;
 }
-.breadcrumbCurrent {
+.claro .breadcrumbs .breadcrumb.breadcrumbCurrent {
     color: #ffffff;
     font-size: 14px;
 }
+.claro .breadcrumbs .breadcrumb.breadcrumbHover {
+    color: #0072bc;
+}
 
 /* Content */
-.dijitContentPane.page {
-    padding: 0;
-}
-.content.dijitContentPane {
+.claro .dijitContentPane.page {
+    padding: 0;
+}
+.claro .content.dijitContentPane {
     display: block;
     clear: both;
@@ -102 +105 @@
         );
 }
-.content.dijitContentPane .dijitBorderContainer {
+.claro .content.dijitContentPane .dijitBorderContainer {
     padding: 2px;
 }
@@ -138 +141 @@
 }
 
-
 /* Tabs */
 .claro .dijitTabContainerLeft-tabs {
     border: none;
+    padding: 4px 16px 4px 4px;
 }
 .claro .dijitTabContainerLeft-tabs .dijitTab {
     margin: 4px 0;
     width: 200px;
-    height: 30px;
+    min-height: 30px;
 }
 .claro .dijitTab {
+    padding: 2px 8px;
     color: #999999;
     border: 1px solid #999999;
+    white-space: normal;
+    overflow: hidden;
     transition: all 0.3s;
     -moz-transition: all 0.3s;
@@ -156 +162 @@
     -o-transition: all 0.3s;
 }
+.claro .dijitTabContainerLeft-tabs .dijitTab .dijitTabContent {
+    height: 48px;
+    line-height: 24px;
+    width: 190px;
+}
+
 .claro .dijitTab.dijitTabHover {
     color: #ffffff;