
Property changes on: .
___________________________________________________________________
Modified: svn:externals
   - fluid-components https://source.fluidproject.org/svn/fluid/components/trunk/src/webapp/fluid-components/

   + fluid-components               https://source.fluidproject.org/svn/fluid/components/trunk/src/webapp/fluid-components/



Index: css/fluid.presentation.css
===================================================================
--- css/fluid.presentation.css	(revision 5398)
+++ css/fluid.presentation.css	(working copy)
@@ -3,7 +3,7 @@
     Themes are sets of visual properties that represent items both at rest and in action
     CSS allows for powerful blending and combinations of visual properties (Cascadence) 
 */
-
+/*  HIGH CONTRAST: black and white */
 .-fluid-theme-highContrast h1 {
     font            : bold 3em "Times,serif";
     color           : #fff;
@@ -15,4 +15,29 @@
     color           : #fff;
     background-color: #000;
 }
+.-fluid-theme-highContrast a:link {
+    font-weight     : bold;
+    color           : white;
+    background-color: black;
+}
 
+.-fluid-theme-highContrast a:visited {
+    font-weight     : bold;
+    color           : black;
+    background-color: white;
+}
+
+.-fluid-theme-highContrast a:hover {
+    font-weight     : bold;
+    color           : black;
+    background-color: white;
+    border-bottom   : 3px double black;
+}
+/*  HIGH CONTRAST: blue and yellow */
+
+
+
+/*  BREEZE: white, blue, light gray */
+.-fluid-theme-breeze {
+    background-color : white;
+}
\ No newline at end of file
Index: css/fluid.states.css
===================================================================
--- css/fluid.states.css	(revision 5398)
+++ css/fluid.states.css	(working copy)
@@ -32,27 +32,26 @@
 }
 
 /* DROP MARKER: different layouts might require different drop marker appearances */
-/* Vertical drop marker: designed for vertical layouts */
+/* Horizontal drop marker: designed for vertical layouts */
 .fluid-vertical-order .orderable-drop-marker {
-    background-color: red     !important;
-    height          : 2px     !important;
-    padding         : 0 0 0 0 !important;
-    border-width    : 0       !important;
-    margin          : -2px 0  !important;
+    background-color: red       !important;
+    height          : 0         !important;
+    padding         : 2px 0 0 0 !important;
+    border-width    : 0         !important;
+    margin          : -2px 0 0 0!important;
     list-style-type : none;
     font-size       : 0;
     line-height     : 0;
     overflow        : hidden;
 }
-/* Horizontal drop marker: designed for grid or horizontal layouts */
+/* Vertical drop marker: designed for grid or horizontal layouts */
 .fluid-horizontal-order .orderable-drop-marker {
-    background-color: red     !important;
-    width           : 2px     !important;
-    padding         : 0       !important;
-    border-width    : 0       !important;
-    margin          : -2px    !important;
+    background-color: red       !important;
+    width           : 0px       !important;
+    padding         : 0 2px 0 0 !important;
+    border-width    : 0         !important;
+    margin          : 0 -2px 0 0!important;
     list-style-type : none;
-    font-size       : 0;
     line-height     : 0;
     overflow        : hidden;
 }
Index: Reorderer/Reorderer.css
===================================================================
--- Reorderer/Reorderer.css	(revision 0)
+++ Reorderer/Reorderer.css	(revision 0)
@@ -0,0 +1,66 @@
+/* CSS specifically for the examples document */
+h1 {
+    clear   : both; 
+    padding : 40px 0 0; 
+    margin  : 0px;
+}
+
+#myList li {
+    width       : 200px;
+    display     : list-item; /* fixes IE bug http://www.quirksmode.org/bugreports/archives/2005/07/IE_60_does_not_render_ordered_list_correctly.html */
+    background  : #CCC;
+    margin      : 2px 0;    
+}
+
+#myTabs {
+    border-bottom   : 1px solid #ccc;
+    margin          : 0;
+    padding         : 0 0 5px 25px;
+    position        : relative; /* see note below. this helps contain the abs. positioned drop marker */
+}
+    #myTabs li {        
+        list-style-type : none;
+        display         : inline !important;
+        margin-right    : -5px;        
+    }
+    #myTabs li a {
+        padding     : 5px 8px;
+        border      : 1px solid #ccc;
+        background  : #ebebeb;
+        cursor      : move;
+    }
+    #myTabs li.activeTab a {
+        border-bottom-color : #fff;
+        background          : #fff;
+    }
+    .tabsContent {
+        clear       : left;
+        border      : 1px solid #ccc;
+        border-top  : none;
+        padding     : 15px;
+    }
+    
+    /* position the drop marker as absolute ensures its visibility over the tabs, which have no space between themselves */
+    #myTabs .orderable-drop-marker {position:absolute; height:90%;}
+    
+#myGrid {
+    width   : 300px;
+    height  : 300px;
+    border  : 1px solid #CCC;
+}
+    #myGrid p {
+        background  : #ebebeb;
+        width       : 30%;
+        height      : 30%;
+        margin      : 1.5%;        
+        text-align  : center;
+        display     : inline;
+        float       : left;        
+    }
+
+
+/* local theme options specifically for this component */
+
+
+
+
Index: Reorderer/Reorderer.html
===================================================================
--- Reorderer/Reorderer.html	(revision 0)
+++ Reorderer/Reorderer.html	(revision 0)
@@ -0,0 +1,92 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<title>Reorder Examples</title>
+
+        <link rel="stylesheet" type="text/css" href="../css/fluid.presentation.css" />
+        <link rel="stylesheet" type="text/css" href="../css/fluid.states.css" />
+        <link rel="stylesheet" type="text/css" href="Reorderer.css" />
+        
+        <script type="text/javascript" src="../fluid-components/js/jquery/jquery-1.2.6.js"></script>
+        <script type="text/javascript" src="../fluid-components/js/jquery/jARIA.js"></script>
+        <script type="text/javascript" src="../fluid-components/js/jquery/jquery.keyboard-a11y.js"></script>
+        <script type="text/javascript" src="../fluid-components/js/jquery/ui.core.js"></script>
+        <script type="text/javascript" src="../fluid-components/js/jquery/ui.draggable.js"></script>
+        <script type="text/javascript" src="../fluid-components/js/jquery/ui.droppable.js"></script>
+        <script type="text/javascript" src="../fluid-components/js/fluid/Fluid.js"></script>
+        <script type="text/javascript" src="../fluid-components/js/fluid/DragManager.js"></script>
+        <script type="text/javascript" src="../fluid-components/js/fluid/Reorderer.js"></script>
+        
+        <script type="text/javascript">
+            jQuery(document).ready(function () {
+                /* only specific list items are sortable */
+                var reorder_example_b = fluid.reorderList('#myList', {
+                    selectors : {
+                        movables : 'li.orderable'
+                    }
+                });
+                
+                /* only specific list items are sortable */
+                var reorder_example_b = fluid.reorderList('#myTabs',  {
+                    selectors : {
+                        movables : 'li'
+                    }
+                });
+                
+                /* two-dimensional sorting in a grid */                
+                var reorder_example_c = fluid.reorderGrid('#myGrid',  {
+                    selectors : {
+                        movables : 'p'
+                    }
+                });
+
+            });
+        </script>
+
+
+    </head>
+	<body>
+
+       
+        <h1>Example 1. Semi-sortable List</h1>
+        <p>This list only has a few sortable items</p>
+        <ol id="myList" class="fluid-vertical-order">
+            <li class="orderable">Mysh bzi</li>
+            <li>Umsh bzi</li>
+            <li>Akwaaba</li>
+            <li class="orderable">Eli o</li>
+            <li class="orderable">Mshybzia</li>
+            <li>Mshybziakua</li>
+            <li class="orderable">Bziara ubaant</li>
+        </ol>
+
+        <h1>Example 2. Sortable Tabs</h1>
+        <p>List items laid out as horizontal tabs</p>
+        <ul id="myTabs" class="fluid-horizontal-order">
+            <li class="activeTab"><a href="#">Tab A</a></li>
+            <li><a href="#">Tab B</a></li>
+            <li><a href="#">Tab C</a></li>
+            <li><a href="#">Tab D</a></li>
+            <li><a href="#">Tab E</a></li>
+        </ul>
+        <div class="tabsContent">
+            Some content here....
+        </div>
+        
+        <h1>Example 3. Sortable Grid</h1>
+        <p>Items are laid out in a grid pattern</p>
+        <div id="myGrid" class="fluid-horizontal-order">
+            <p>You</p>
+            <p>I</p>           
+            <p>Are</p>
+            <p>Am</p>
+            <p>We</p>
+            <p>Wonderful</p>
+            <p>Dogs</p>
+            <p>Cat</p>
+            <p>Happy</p>
+        </div>
+	</body>
+</html>
+
