瀏覽代碼

HUE-245. Rework configurable columns to have the config icon in the first column on the left and support sortability.

* updating MooTools More-Behaviors to pull in sortables behavior filter.
Aaron Newton 15 年之前
父節點
當前提交
5e60fa1df6

+ 19 - 19
apps/jframegallery/src/jframegallery/templates/html-table.configurable.columns.mako

@@ -68,30 +68,30 @@
   <head>
     <title>Configurable Columns</title>
   </head>
-  <body>
+  <body data-filters="CollapsingElements">
+    <form action="${request_path}" method="GET" class="ccs-hidden collapsible ccs-table_config">
+      <ul>
+        % for i, option in enumerate(columns):
+          <%
+            checked = ""
+            if option in active_columns:
+              checked = 'checked="checked"'
+          %>
+          <li><label><input type="checkbox" name="show_columns" value="${i}" ${checked}/> ${option}</label></li>
+        % endfor
+      </ul>
+      <a class="ccs-checkAll" data-filters="ArtButton" data-check-group=".ccs-table_config input">checkAll</a>
+      <a class="ccs-checkNone" data-filters="ArtButton" data-check-group=".ccs-table_config input">checkNone</a>
+      <input type="submit" value="Apply" data-filters="ArtButton"/>
+    </form>
     <table data-filters="HtmlTable">
       <thead>
         <tr>
           % for i, col in enumerate(active_columns):
-            % if i == len(active_columns) - 1:
-              <th data-filters="CollapsingElements">
-                <a class="collapser ccs-table_config_link"></a>
+            % if i == 0:
+              <th>
+                <a class="collapser ccs-table_config_link ccs-left"></a>
                 ${col}
-                <form action="${request_path}" method="GET" class="ccs-hidden collapsible ccs-table_config">
-                  <ul>
-                    % for i, option in enumerate(columns):
-                      <%
-                        checked = ""
-                        if option in active_columns:
-                          checked = 'checked="checked"'
-                      %>
-                      <li><label><input type="checkbox" name="show_columns" value="${i}" ${checked}/> ${option}</label></li>
-                    % endfor
-                  </ul>
-                  <a class="ccs-checkAll" data-filters="ArtButton" data-check-group=".ccs-table_config input">checkAll</a>
-                  <a class="ccs-checkNone" data-filters="ArtButton" data-check-group=".ccs-table_config input">checkNone</a>
-                  <input type="submit" value="Apply" data-filters="ArtButton"/>
-                </form>
               </th>
             % else:
               <th>${col}</th>

+ 28 - 10
desktop/core/static/css/shared.css

@@ -330,12 +330,13 @@ span.table-th-resizer {
 
 table a.ccs-table_config_link {
 	display: inline-block;
-	float: right;
 	width: 16px;
 	height: 16px;
-	background: url(../art/icons/small_cog.png);
+	padding: 0px 4px;
+	background: no-repeat 50% 50% url(../art/icons/small_cog.png);
+	position: relative;
 }
-table form.ccs-table_config {
+form.ccs-table_config {
 	position: absolute;
 	background: #fff;
 	border: 1px solid #777;
@@ -343,25 +344,42 @@ table form.ccs-table_config {
 	-moz-border-radius: 2px;
 	-webkit-border-radius: 2px;
 	min-width: 200px;
-	right: 25px;
+	left: 25px;
 	top: 5px;
+	z-index: 10;
 }
-table form.ccs-table_config label {
+form.ccs-table_config label {
 	display: block;
 }
-table form.ccs-table_config label:hover {
+form.ccs-table_config label:hover {
 	color: #36f;
 }
-table form.ccs-table_config ul {
+form.ccs-table_config ul {
 	padding: 2px;
-	max-height: 200px;
+	max-height: 125px;
 	overflow: auto;
 	border-bottom:1px solid #777;
 }
-table form.ccs-table_config li {
+*[data-filters*=Sortable] .sorting {
+	cursor: pointer;
+	z-index: 12;
+}
+*[data-filters*=Sortable] > * {
+	cursor: move;
+}
+form.ccs-table_config li {
 	padding: 2px;
+	border: 1px solid #ccc;
+	border-radius: 2px;
+	-moz-border-radius: 2px;
+	-webkit-border-radius: 2px;
+	margin-bottom: 2px;
+	background: #fff;
+}
+form.ccs-table_config li input {
+	margin-right: 6px;
 }
-table form.ccs-table_config .art {
+form.ccs-table_config .art {
 	margin: 4px;
 }
 /* stickywin solid; this is the login window styles */

+ 6 - 5
desktop/core/static/js/Source/CCS/CCS.JFrame.js

@@ -27,14 +27,15 @@ requires:
  - clientcide/Collapsible
  - Widgets/ART.Alerts
  - Widgets/Behavior
- - Widgets/Behavior.Accordion
  - Widgets/Behavior.ArtButton
  - Widgets/Behavior.ArtInput
- - Widgets/Behavior.FormRequest
- - Widgets/Behavior.FormValidator
- - Widgets/Behavior.HtmlTable
- - Widgets/Behavior.OverText
  - Widgets/Behavior.SplitView
+ - More-Behaviors/Behavior.FxAccordion
+ - More-Behaviors/Behavior.FormRequest
+ - More-Behaviors/Behavior.FormValidator
+ - More-Behaviors/Behavior.HtmlTable
+ - More-Behaviors/Behavior.OverText
+ - More-Behaviors/Behavior.Sortable
  - /Behavior.CollapsingElements
  - /Behavior.ContextMenu
  - /Behavior.DataGroupToggle

+ 1 - 1
ext/thirdparty/js/more-behaviors.hash

@@ -1 +1 @@
-328512f1c4a8c9f479bab08710b977fd83fa34ca
+6dccd18ebea4e86b6495c5a018ab8e10ae694dee