瀏覽代碼

HUE-263. Add support for Resizable and Sortable Behavior Filters.

Aaron Newton 15 年之前
父節點
當前提交
61ca39d03d

+ 45 - 0
apps/jframegallery/src/jframegallery/templates/resizables.html

@@ -0,0 +1,45 @@
+{% comment %}
+Licensed to Cloudera, Inc. under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  Cloudera, Inc. licenses this file
+to you 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.
+{% endcomment %}
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+  <head>
+    <title>Resizables</title>
+  </head>
+  <body>
+  <div class="jframe_padded">
+    <p>You should be able to resize the box below by dragging the grey handle.</p>
+    <p>The links below the box should allow you to enable or disable the drag behavior.</p>
+    <div data-filters="Resizable" data-resize-handle=".textresizer" data-resize-child="textarea" data-resize-modifiers="{'x': false}">
+      <textarea tabindex="4" class="resizable" rows="15" cols="50" name="comment" style="width: 250px; height: 100px;"></textarea>
+      <div class="textresizer" style="width: 254px; background: #ddd; border-top: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #333; border-bottom: 1px solid #333; height: 4px; cursor: s-resize; margin-bottom: 10px; clear:both;"></div>
+    </div>
+    <hr style="clear:both"/>
+		<p>The example below uses the default style for a resize handle, which is positioned on the bottom right corner of its container. It has the .ccs-resize_handle class.</p>
+		<div data-filters="Resizable" data-resize-handle=".ccs-resize_handle" style="min-height: 100px; min-width: 100px; border: 1px solid #000; position: relative; width: 100px; height: 100px">
+			<p style="padding: 8px">drag the little icon in the bottom right to resize...</p>
+			<a class="ccs-resize_handle">resize</a>
+		</div>
+		<br/>
+		<br/>
+		<br/>
+		<br/>
+		<br/>
+		<br/>
+  </div>
+</body>
+</html>

+ 96 - 0
apps/jframegallery/src/jframegallery/templates/sortables.html

@@ -0,0 +1,96 @@
+{% comment %}
+Licensed to Cloudera, Inc. under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  Cloudera, Inc. licenses this file
+to you 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.
+{% endcomment %}
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html>
+  <head>
+    <title>Sortables</title>
+  </head>
+  <body>
+  <div class="jframe_padded">
+
+    <p> You can reorder the list below. When you do the sort order will be displayed in the box below </p>
+
+    <p>You should be able to reorder the list by dragging. The new order displays below the list when you release an item. If you scroll the list down a bit it should still let you sort correctly. Dragging an element that contains a radio that is selected to a new location should keep the radio selected when it's dropped. If you drag an element to the top or bottom of the list, it should scroll.</p>
+
+    <div id="wrapper" styles="width: 300px; padding: 4px; border: 1px solid #999;">
+      <ul id="SortableExample" style="height: 150px; overflow: auto; padding: 0; margin: 0;"
+        data-filters="Sortable"
+        data-sort-state=".order"
+        data-sort-property="value"
+        data-sort-property-child="input">
+        <li id="1" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">First <input type="radio" name="foo" value="1" checked="true"/></li>
+        <li id="2" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Second <input type="radio" name="foo" value="2" /></li>
+        <li id="3" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Third <input type="radio" name="foo" value="3"/></li>
+        <li id="4" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Fourth <input type="radio" name="foo" value="4"/></li>
+        <li id="5" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Fifth <input type="radio" name="foo" value="5"/></li>
+        <li id="6" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Sixth <input type="radio" name="foo" value="6"/></li>
+        <li id="7" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Seventh <input type="radio" name="foo" value="7"/></li>
+        <li id="8" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Eigth <input type="radio" name="foo" value="8"/></li>
+        <li id="9" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Nineth <input type="radio" name="foo" value="9"/></li>
+        <li id="10" style="list-style: none; margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Tenth <input type="radio" name="foo" value="10"/></li>
+      </ul>
+      <div class="order" style="clear:both"></div>
+    </div>
+
+    <hr/>
+
+    <p>You should be able to reorder the list by dragging. The new order displays below the list. You should be able to move items from one list to another.</p>
+
+    <div data-filters="Sortable" data-sort-lists="ul"
+      data-sort-state=".order2">
+        <ul style="float: left; width: 20%; min-height: 60px; border: 1px solid #999; margin-right: 8px;">
+            <li id="1" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">First</li>
+            <li id="2" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Second</li>
+            <li id="3" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Third</li>
+        </ul>
+        <ul style="float: left; width: 20%; min-height: 60px; border: 1px solid #999; margin-right: 8px;">
+            <li id="4" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Four</li>
+            <li id="5" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Five</li>
+            <li id="6" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Six</li>
+        </ul>
+        <ul style="float: left; width: 20%; min-height: 60px; border: 1px solid #999; margin-right: 8px;">
+            <li id="7" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Seven</li>
+            <li id="8" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Eight</li>
+            <li id="9" style="margin: 2px !important; padding: 2px !important; background: #ccc !important; cursor: pointer;">Nine</li>
+        </ul>
+      <div class="order2" style="clear:both"></div>
+    </div>
+    <hr/>
+    <p>Here's a simple sortable list that has the default sortable styles. Use the .ccs-sort_handle for the elements you want to give this style.</p>
+    <div id="wrapper" styles="width: 300px; padding: 4px; border: 1px solid #999;">
+      <ul id="SortableExample" style="height: 150px; overflow: auto; padding: 0; margin: 0;"
+        data-filters="Sortable"
+        data-sort-state=".order"
+        data-sort-property="value"
+        data-sort-property-child="input">
+        <li class="ccs-sort_handle" id="1" style="list-style: none;">First <input type="radio" name="foo" value="1" checked="true"/></li>
+        <li class="ccs-sort_handle" id="2" style="list-style: none;">Second <input type="radio" name="foo" value="2" /></li>
+        <li class="ccs-sort_handle" id="3" style="list-style: none;">Third <input type="radio" name="foo" value="3"/></li>
+        <li class="ccs-sort_handle" id="4" style="list-style: none;">Fourth <input type="radio" name="foo" value="4"/></li>
+        <li class="ccs-sort_handle" id="5" style="list-style: none;">Fifth <input type="radio" name="foo" value="5"/></li>
+        <li class="ccs-sort_handle" id="6" style="list-style: none;">Sixth <input type="radio" name="foo" value="6"/></li>
+        <li class="ccs-sort_handle" id="7" style="list-style: none;">Seventh <input type="radio" name="foo" value="7"/></li>
+        <li class="ccs-sort_handle" id="8" style="list-style: none;">Eigth <input type="radio" name="foo" value="8"/></li>
+        <li class="ccs-sort_handle" id="9" style="list-style: none;">Nineth <input type="radio" name="foo" value="9"/></li>
+        <li class="ccs-sort_handle" id="10" style="list-style: none;">Tenth <input type="radio" name="foo" value="10"/></li>
+      </ul>
+      <div class="order" style="clear:both"></div>
+    </div>
+  </div>
+</body>
+</html>

二進制
desktop/core/static/art/resize-handle.png


二進制
desktop/core/static/art/sortable-handle.png


+ 24 - 4
desktop/core/static/css/shared.css

@@ -348,6 +348,17 @@ form.ccs-table_config {
 	top: 5px;
 	z-index: 10;
 }
+.ccs-shared .ccs-resize_handle {
+	position: absolute;
+	bottom: 2px;
+	right: 2px;
+	background: url(../art/resize-handle.png);
+	text-indent: -200px;
+	overflow: hidden;
+	width: 7px;
+	height: 7px;
+	cursor: se-resize;
+}
 form.ccs-table_config label {
 	display: block;
 }
@@ -356,10 +367,16 @@ form.ccs-table_config label:hover {
 }
 form.ccs-table_config ul {
 	padding: 2px;
-	max-height: 125px;
+	height: 125px;
+	min-width: 200px;
 	overflow: auto;
 	border-bottom:1px solid #777;
 }
+*[data-filters*=Sortable] {
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+}
 *[data-filters*=Sortable] .sorting {
 	cursor: pointer;
 	z-index: 12;
@@ -370,14 +387,17 @@ form.ccs-table_config ul {
 *[data-filters*=Sortable] .clone {
 	z-index: 1;
 }
-form.ccs-table_config li {
-	padding: 2px;
+form.ccs-table_config li, .ccs-sort_handle {
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	padding: 2px 2px 2px 14px;
 	border: 1px solid #ccc;
 	border-radius: 2px;
 	-moz-border-radius: 2px;
 	-webkit-border-radius: 2px;
 	margin-bottom: 2px;
-	background: #fff;
+	background: #fff url(../art/sortable-handle.png) 5px 50% no-repeat;
 }
 form.ccs-table_config li input {
 	margin-right: 6px;

+ 1 - 0
desktop/core/static/js/Source/CCS/CCS.JFrame.js

@@ -35,6 +35,7 @@ requires:
  - More-Behaviors/Behavior.FormValidator
  - More-Behaviors/Behavior.HtmlTable
  - More-Behaviors/Behavior.OverText
+ - More-Behaviors/Behavior.Resizable
  - More-Behaviors/Behavior.Sortable
  - /Behavior.CollapsingElements
  - /Behavior.ContextMenu

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

@@ -1 +1 @@
-6dccd18ebea4e86b6495c5a018ab8e10ae694dee
+e0fbc2b05bf7c7acb3170bde7761ab936ffca30e