Improve CSS of permission form
authorverrierj
Wed, 07 Dec 2011 14:53:01 +0100
changeset 270 60b4820c4fdc
parent 269 4b8042fc3d33
child 271 99347d5275b6
Improve CSS of permission form
src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/create_content.html
src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/create_group.html
src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/create_ldt.html
src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/partial/permissions.html
src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/partial/sharewith.html
src/ldt/ldt/static/ldt/css/ldtform.css
src/ldt/ldt/static/ldt/js/multiselect.js
--- a/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/create_content.html	Wed Dec 07 11:36:12 2011 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/create_content.html	Wed Dec 07 14:53:01 2011 +0100
@@ -12,6 +12,7 @@
     <script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/jquery.textchange.min.js"></script>
     <script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/jquery-ui.min.js"></script>
     <script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/swfupload/swfupload.js"></script>
+    <script type="text/javascript" src="{{LDT_MEDIA_PREFIX}}js/multiselect.js"></script>
     <script type="text/javascript" src="{% url django.views.i18n.javascript_catalog %}"></script>
 	
 	{{ content_form.media.js }}
@@ -27,7 +28,6 @@
     
 {% endblock %}
 
-
 {% block js_declaration %}
 	<script type="text/javascript">
 	window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";
@@ -70,16 +70,6 @@
 
 {% block body %}
 
-	<!--  {% if content_form.errors %}
-	<div id="content-form-error">
-		<p>{% trans "The operation could not be performed because one or more error(s) occurred.<br />Please resubmit the content form after making the following changes:" %}</p>
-		<ul>
-		{% for field in content_form %}
-		{% if field.errors%}<li>{{field.name}} : {{ field.errors|striptags }}</li>{% endif %}
-		{% endfor %}
-		</ul>
-	</div>
-	{% endif %}-->
 	{% if media_form.errors %}
 	<div id="media-form-error">
 		<p>{% trans "The operation could not be performed because one or more error(s) occurred.<br />Please resubmit the media form after making the following changes:" %}</p>
--- a/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/create_group.html	Wed Dec 07 11:36:12 2011 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/create_group.html	Wed Dec 07 14:53:01 2011 +0100
@@ -49,7 +49,7 @@
 	<script type="text/javascript">
 	
 	function init_events(container) {
-		filter_elems($("#userslist"),$("#selecteduserslist") );
+		filter_elems($("#userslist"),$("#selecteduserslist"));
 	}
 	
 	$(document).ready(function() {	
@@ -58,7 +58,7 @@
 			parent.$.nmTop().close();
 		});
 		
-		var search_url = "{% url ldt.ldt_utils.views.share_filter filter='__FILTER__' %}";
+		var search_url = "{% url ldt.ldt_utils.views.share_filter filter='__FILTER__' use_groups='false' %}";
 		init_multi_select_events ($("#userslist"), $("#selecteduserslist"), $("#memberselection"), $("#adminselection"), "#searchuserinput", search_url);
 
 	});
--- a/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/create_ldt.html	Wed Dec 07 11:36:12 2011 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/create_ldt.html	Wed Dec 07 14:53:01 2011 +0100
@@ -24,10 +24,11 @@
 	<script type="text/javascript">
 	
 	function init_events(container) {
-		filter_elems($("#sharelist"),$("#selectedlist") );
+		filter_elems($("#sharelist"),$("#selectedlist"));
 	}	
 	
 	$(document).ready(function() {
+		check_uncheck_all("content");
 		
 		var form_status = $("input[name=form_status]").val();
 		var redirect_to = '{{ redirect_to }}';
@@ -50,13 +51,14 @@
         mode : "textareas",
         theme : "advanced",
         language : "{{ LANGUAGE_CODE }}",
-        theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,undo,redo,link,unlink",
+        theme_advanced_buttons1 : "bold,italic,underline,separator,justifyleft,justifycenter,justifyfull,undo,redo,link,unlink",
         theme_advanced_buttons2 : "",
         theme_advanced_buttons3 : "",
         theme_advanced_toolbar_location : "top",
         theme_advanced_toolbar_align : "left",
-        width: "300",
-        height: "150"
+        width: "250",
+        height: "150",
+        entity_encoding : "raw"
 	});
 
     </script>
@@ -69,6 +71,9 @@
 	<form action="{{create_project_action}}" method="POST" {% if target_parent %}target="_parent"{% endif %}>
 	{% csrf_token %} 
 	<input type="hidden" name="form_status" value="{{form_status}}" id="project_form_status" />
+	
+
+	<div id="contentleft" class="span-9">
 	<label for="title">{% trans "Title" %}:</label>
 	{{form.title}}
 	{% for error in form.title.errors %}
@@ -76,23 +81,58 @@
 	{% endfor %}
 	<label for="description" class="projectdesc">{% trans "Description :" %}</label>
 	{{form.description}}
+	</div>	
    
+   
+   	<div id="contentright" class="span-9 last">
+	<label>{% trans "List of contents" %}</label>
+
+		<div class="span-8 last" id="ldtcreatecontentslistcontainer">
+			<div class="span-8 last projectscontentstablediv" id="ldtcreatecontentstablediv">
+				<table class="projectscontentstable">
+				
+					<tr class="projectscontentsheader last" id="contentslistheader">
+						<td class="cellcheckbox">
+						{% if not ldt_id %}
+							{% if contents|length > 1 %}
+							<input class="selectallcontents" id="global_checkbox_content" type="checkbox" checked="true" />	 
+							{% endif %}
+						{% endif %}	
+						</td>				
+						<td class="projectcontentsheadertitle">{% trans "name" %}</td>
+					</tr>
+				
+				    <tbody class="projectscontentsbody">
+				{% for content in contents %}
+					<tr class="imageline {% cycle 'projectscontentsoddline' 'projectscontentsevenline'%}">
+					    <td class="cellcheckbox"><input type="checkbox" class="checkbox_content" name="contents" value="{{ content.id }}" checked="true" {% if ldt_id %}disabled="disabled"{% endif %} /></td>
+					    <td class="contenttitle">{{ content.title }}</td>
+					</tr>
+				{% endfor %}
+					</tbody>
+				</table>			
+			</div>
+		</div>
+	</div>		
+	
+	
     {% include "ldt/ldt_utils/partial/permissions.html" %}
+              
+    <div id="submitcontent" class="span-18 last">
                    
-    <div id="submitcontent-buttons" class="span-11 last">
-		<button type="button" id="close_button"  value="close">{% trans 'close_cancel' %}</button>
-		{% if ldt_id %}
-		<button class="button" id="ldt_submit" type="submit" value="prepare_delete" name="submit_button">{% trans "delete_project" %}</button>
-		<button class="button" id="ldt_submit" type="submit" value="update" name="submit_button">{% trans "update_project" %}</button>
-		{% else %}
-		<button class="button" id="ldt_submit" type="submit" value="create" name="submit_button">{% trans "create_project" %}</button>
-		{% endif %}
-    </div>
+	    <div id="submitcontent-buttons" class="span-11 last">
+			<button type="button" id="close_button"  value="close">{% trans 'close_cancel' %}</button>
+			{% if ldt_id %}
+			<button class="button" id="ldt_submit" type="submit" value="prepare_delete" name="submit_button">{% trans "delete_project" %}</button>
+			<button class="button" id="ldt_submit" type="submit" value="update" name="submit_button">{% trans "update_project" %}</button>
+			{% else %}
+			<button class="button" id="ldt_submit" type="submit" value="create" name="submit_button">{% trans "create_project" %}</button>
+			{% endif %}
+	    </div>
+	  </div>
     
     </form> 
-    </div>
-          
-    </div>    
+    </div>  
 		
 {% endblock %}
 
--- a/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/partial/permissions.html	Wed Dec 07 11:36:12 2011 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/partial/permissions.html	Wed Dec 07 14:53:01 2011 +0100
@@ -1,77 +1,85 @@
 {% load i18n %}
 
 <style type="text/css">
-	  select {
-	    width: 200px;
-	    height: 200px;
-	    margin: 5px;
-	  }
-	  
-	  #elemslistcontainer,  #selectedlistcontainer, #selectors {
-	  	float: left;
-	  }
-	  
-	  #selectedlistcontainer {
-	  	margin-top: 35px;
-	  }
-	  
-	  #selectedlistfooter, #elemslistfooter {
+	#elemslistcontainer, #selectors {
+		float: left;
+	}
+	
+    #sharelist, #selectedlist {
+    	width: 250px;
+    	height: 200px;
+  	}
+  
+  	#selectedlistfooter, #elemslistfooter {
 	  	text-align: center;
-	  }
-	  
-	  #selectors {	  
-	  	margin-top: 125px;
-	  }
-	  	   
-	</style>
-	
+  	}
+  	
+  	#selectedlistcontainer {
+  		padding-top: 35px;
+  	}
+  	  
+  	#selectors {	  
+	  	margin-top: 125px;	  	
+    	padding-left: 45px;
+    	padding-right: 45px;
+  	}	  	  
+  	
+  	#elemslistheader input {
+  		background-color: white;
+  		width: 100px;
+  	}
+</style>	
 	
 <script type="text/javascript">
 	
 	$(document).ready(function() {
-		var search_url = "{% url ldt.ldt_utils.views.share_filter filter='__FILTER__' %}";
+		var search_url = "{% url ldt.ldt_utils.views.share_filter filter='__FILTER__' use_groups='true' %}";
 
 		init_multi_select_events ($("#sharelist"), $("#selectedlist"), $("#read"), $("#write"), "#searchuserinput", search_url);
 	});
 </script>
 
-<div id="elemslistcontainer">
-	<div id="elemslistheader">
-		{% trans "User list" %}<br />
-		<div class="searchfield rounded span-4"><input type="text" name="search" id="searchuserinput" class="searchfieldinput searchfieldinputbase" value="{% trans 'search' %}"/><img id="projectsajaxloader" class="searchajaxloader" src="{{LDT_MEDIA_PREFIX}}/img/ajax-loader-16x16.gif" alt="loader"/><img id="projecsclear" class="searchclear" src="{{LDT_MEDIA_PREFIX}}img/clear-left.png"/></div>
-	</div><br /><br />	
-	<select multiple="multiple" id="sharelist">
-		{% include "ldt/ldt_utils/partial/sharewith.html" %}
-	</select>
-	<div id="elemslistfooter">
-		<a href="#" id="selectall" title="{% trans "select all users" %}">{% trans "select all" %}</a>
+<div id="permissioncontainer" class="append-bottom clear">
+	<div id="elemslistcontainer" clas="span-9">
+		<div id="elemslistheader">
+			{% trans "User list" %}<br />
+			<div class="searchfield rounded span-4"><input type="text" name="search" id="searchuserinput" class="searchfieldinput searchfieldinputbase" value="{% trans 'search' %}"/><img id="projectsajaxloader" class="searchajaxloader" src="{{LDT_MEDIA_PREFIX}}/img/ajax-loader-16x16.gif" alt="loader"/><img id="projecsclear" class="searchclear" src="{{LDT_MEDIA_PREFIX}}img/clear-left.png"/></div>
+		</div><br /><br />	
+		<select multiple="multiple" id="sharelist">
+			{% include "ldt/ldt_utils/partial/sharewith.html" %}
+		</select>
+		<div id="elemslistfooter">
+			<a href="#" id="selectall" title="{% trans "select all users" %}">{% trans "select all" %}</a>
+		</div>
 	</div>
-</div>
-
-<div id="selectors">
-	<a href="#" id="selectelems"><img src="{{LDT_MEDIA_PREFIX}}img/to-right.gif" title="{% trans "select users" %}"></a><br />
-	<a href="#" id="removeelems"><img src="{{LDT_MEDIA_PREFIX}}img/to-left.gif" title="{% trans "remove users" %}"></a>
-</div>
 	
-<div id="selectedlistcontainer">
-	<div id="selectedlistheader">
-		{% trans "Members list" %}
+	<div id="selectors">
+		<a href="#" id="selectelems"><img src="{{LDT_MEDIA_PREFIX}}img/to-right.gif" title="{% trans "select users" %}"></a><br />
+		<a href="#" id="removeelems"><img src="{{LDT_MEDIA_PREFIX}}img/to-left.gif" title="{% trans "remove users" %}"></a>
 	</div>
-	<select multiple="multiple" id="selectedlist" >
-		{% for user in member_list %}
-			<option value="{{user.type}}-{{ user.id }}" {% if user.change %}style="color: #2181B1;"{% endif %}>{{ user.username }}</option>
-		{% endfor %}
-	</select>
-	<div id="selectedlistfooter" >
-		<a href="#" id="removeall" title="{% trans "select all users" %}">{% trans "remove all" %}</a>
-		| <a href="#" id="chooseaux" title="{% trans "Decide whether a user user can change this group" %}">{% trans "is admin" %}</a>
-		| <a href="#" id="removeaux">{% trans "is not admin" %}</a>
-	</div>	
-</div>
-
-<div id="read">
-</div>
-
-<div id="write">
-</div>
-    
+		
+	<div id="selectedlistcontainer" class="span-9 last">
+		<div id="selectedlistheader" >
+			{% trans "Members list" %}
+		</div>
+		<select multiple="multiple" id="selectedlist" >
+			{% for elem in member_list %}
+				<option value="{{elem.type}}-{{ elem.id }}" {% if elem.change %}style="color: #2181B1;"{% endif %}>{{ elem.name }}</option>
+			{% endfor %}
+		</select>
+		<div id="selectedlistfooter" class="span-6" >
+			<a href="#" id="removeall" title="{% trans "select all users" %}">{% trans "remove all" %}</a>
+			| <a href="#" id="chooseaux" title="{% trans "Decide whether a user user can change this group" %}">{% trans "is admin" %}</a>
+			| <a href="#" id="removeaux">{% trans "is not admin" %}</a>
+		</div>	
+	</div>
+	
+	<div id="read">
+	{% for elem in member_list %}
+		<input type="hidden" value="{{ elem.type }}-{{ elem.id }} name="read_list"/>
+	{% endfor %}
+	</div>
+	
+	<div id="write">
+	</div>
+</div>  
--- a/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/partial/sharewith.html	Wed Dec 07 11:36:12 2011 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/ldt/ldt_utils/partial/sharewith.html	Wed Dec 07 14:53:01 2011 +0100
@@ -1,5 +1,3 @@
-{% load i18n %}
-
 {% for res in elem_list%}
 	<option value="{{ res.id }}-{{ res.type }}" >{{ res.name }}</option>
 {% endfor %}
\ No newline at end of file
--- a/src/ldt/ldt/static/ldt/css/ldtform.css	Wed Dec 07 11:36:12 2011 +0100
+++ b/src/ldt/ldt/static/ldt/css/ldtform.css	Wed Dec 07 14:53:01 2011 +0100
@@ -143,7 +143,7 @@
 
 #ldtcreatecontentslistcontainer {
 	padding: 5px 0px 20px 0px;
-	height: 300px;
+	height: 200px;
 }
 
 #media_fields_div {
@@ -160,4 +160,31 @@
 	font-weight: bold;   
 }
 
+#elemslistcontainer, #selectors {
+	float: left;
+}
 
+#sharelist, #selectedlist {
+	width: 250px;
+  	height: 200px;
+}
+
+#selectedlistfooter, #elemslistfooter {
+ 	text-align: center;
+}
+	
+#selectedlistcontainer {
+	padding-top: 35px;
+}
+	  
+#selectors {	  
+	margin-top: 125px;	  	
+  	padding-left: 45px;
+  	padding-right: 45px;
+}	  	  
+	
+#elemslistheader input {
+	background-color: white;
+	width: 100px;
+}
+
--- a/src/ldt/ldt/static/ldt/js/multiselect.js	Wed Dec 07 11:36:12 2011 +0100
+++ b/src/ldt/ldt/static/ldt/js/multiselect.js	Wed Dec 07 14:53:01 2011 +0100
@@ -1,9 +1,12 @@
 function init_multi_select_events (first_list, sec_list, first_selection, sec_selection, search_input, search_url) {
 	
+	var first_list_name = "read_list";
+	var second_list_name = "write_list";
+	
 	$("#selectelems").click(function () {
 		var list = get_selected_elems(first_list);
 		move_elem(first_list, sec_list, list);
-		add_to_form(first_selection, list, "read_list");
+		add_to_form(first_selection, list, first_list_name);
 	});
 
 	$("#removeelems").click(function () {
@@ -15,7 +18,7 @@
 	$("#selectall").click(function () {
 		var list = get_all_options(first_list);
 		move_elem(first_list, sec_list, list);
-		add_to_form(first_selection, list, "read_list");
+		add_to_form(first_selection, list, first_list_name);
 	});
 
 	$("#removeall").click(function () {
@@ -30,7 +33,7 @@
 		
 		for (var i=0; i < elems.length; i++) {
 			$("option[value=" + elems[i] + "]", sec_list).css('color', '#2181B1');
-			$(sec_selection).append("<input type=\"hidden\" name=\"write_list\" value=\"" + elems[i]+ "\" />");
+			$(sec_selection).append("<input type=\"hidden\" name=\"" + second_list_name + "\" value=\"" + elems[i]+ "\" />");
 		}
 	});