Tasks: Make it possible to close the details area

4 files changed, 122 insertions, 11 deletions

diff --git a/apps/tasks/css/style.css b/apps/tasks/css/style.css
index 95dec3f8d08..0ec8f5702a6 100644
--- a/apps/tasks/css/style.css
+++ b/apps/tasks/css/style.css
@@ -49,6 +49,7 @@
 .task input.location{display:none;top:0;text-align:left;right:0.3em;background-color:white;color:#333333;}
 
 .task .more{display:none;margin-top:0.5em;}
+.task_less{display:none;}
 
 .task .description{position:relative;left:4em;}
 .task .due{position:absolute;right:0.3em;}
diff --git a/apps/tasks/js/tasks.js b/apps/tasks/js/tasks.js
index 197988f79a8..7bd210a8a61 100644
--- a/apps/tasks/js/tasks.js
+++ b/apps/tasks/js/tasks.js
@@ -50,18 +50,17 @@ OC.Tasks = {
 				.text(task.location)
 				.appendTo(task_container);
 		}
-		if (task.categories.length > 0) {
-			var categories = $('<div>')
-					.addClass('categories')
-					.appendTo(task_container);
-			$(task.categories).each(function(i, category){
-					categories.append($('<a>')
-						.addClass('tag')
-						.text(category)
-					);
-			});
-		}
+		var $categories = $('<div>')
+				.addClass('categories')
+				.appendTo(task_container);
+		$(task.categories).each(function(i, category){
+				$categories.append($('<a>')
+					.addClass('tag')
+					.text(category)
+				);
+		});
 		task_container.find('.task_more').click(OC.Tasks.moreClickHandler);
+		task_container.find('.task_less').click(OC.Tasks.lessClickHandler);
 		var description = $('<textarea>')
 			.addClass('description')
 			.blur(function(){
@@ -113,6 +112,13 @@ OC.Tasks = {
 				$.post('ajax/update_property.php', {id:task.id, type:'categories', categories:categories}, function(jsondata){
 					if(jsondata.status == 'success') {
 						task.categories = categories.split(',');
+						$categories.empty();
+						$(task.categories).each(function(i, category){
+							$categories.append($('<a>')
+								.addClass('tag')
+								.text(category)
+								);
+							});
 					}
 				});
 			})
@@ -126,6 +132,7 @@ OC.Tasks = {
 				$.post('ajax/update_property.php', {id:task.id, type:'location', location:location}, function(jsondata){
 					if(jsondata.status == 'success') {
 						task.location = location;
+						task_container.find('.location').text(location);
 					}
 				});
 			})
@@ -248,11 +255,24 @@ OC.Tasks = {
 		var $task = $(this).closest('.task'),
 			task = $task.data('task');
 		$task.find('.more').show();
+		$task.find('.task_more').hide();
+		$task.find('.task_less').show();
 		$task.find('div.categories').hide();
 		$task.find('input.categories').show();
 		$task.find('div.location').hide();
 		$task.find('input.location').show();
 	},
+	lessClickHandler:function(event){
+		var $task = $(this).closest('.task'),
+			task = $task.data('task');
+		$task.find('.more').hide();
+		$task.find('.task_more').show();
+		$task.find('.task_less').hide();
+		$task.find('div.categories').show();
+		$task.find('input.categories').hide();
+		$task.find('div.location').show();
+		$task.find('input.location').hide();
+	},
 	complete_task:function() {
 		var $task = $(this).closest('.task'),
 			task = $task.data('task'),
diff --git a/apps/tasks/templates/tasks.php b/apps/tasks/templates/tasks.php
index 90196dfc5b6..98698400797 100644
--- a/apps/tasks/templates/tasks.php
+++ b/apps/tasks/templates/tasks.php
@@ -22,6 +22,9 @@
 	<span class="task_more">
 		<img title="<?php echo $l->t('More') ?>" src="<?php echo image_path('core', 'actions/triangle-s.svg') ?>" class="svg"><?php echo $l->t('More') ?>
 	</span>
+	<span class="task_less">
+		<img title="<?php echo $l->t('Less') ?>" src="<?php echo image_path('core', 'actions/triangle-n.svg') ?>" class="svg"><?php echo $l->t('Less') ?>
+	</span>
 </p>
 <script type='text/javascript'>
 var categories = <?php echo json_encode($_['categories']); ?>;
diff --git a/core/img/actions/triangle-n.svg b/core/img/actions/triangle-n.svg
new file mode 100644
index 00000000000..8848569c51b
--- /dev/null
+++ b/core/img/actions/triangle-n.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16px"
+   height="16px"
+   id="svg6077"
+   version="1.1"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="triangle-n.svg"
+   inkscape:export-filename="/home/tol/tanghus-owncloud/core/img/actions/triangle-n.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs6079">
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3587-6-5-3-4-5-4-0-1"
+       id="linearGradient7308"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0,0.54681372,-0.39376081,0,14.87048,-9.6346)"
+       x1="34.992828"
+       y1="0.94087797"
+       x2="34.992828"
+       y2="33.955856" />
+    <linearGradient
+       id="linearGradient3587-6-5-3-4-5-4-0-1">
+      <stop
+         offset="0"
+         style="stop-color:#ff0000;stop-opacity:1"
+         id="stop3589-9-2-2-3-2-53-4-3" />
+      <stop
+         offset="1"
+         style="stop-color:#ff3636;stop-opacity:1"
+         id="stop3591-7-4-73-7-9-86-9-3" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.197802"
+     inkscape:cx="1.0398514"
+     inkscape:cy="8"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     inkscape:window-width="1600"
+     inkscape:window-height="845"
+     inkscape:window-x="-2"
+     inkscape:window-y="-3"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata6082">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer">
+    <path
+       inkscape:connector-curvature="0"
+       d="m 14.5,1.49996 -13,0 6.49999,12 6.50001,-12 z"
+       id="path2843-39-5-5"
+       style="opacity:0.7;color:#000000;fill:url(#linearGradient7308);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+  </g>
+</svg>