make collapsable more usable and switch to left

Author: FinalAngel

cms/static/cms/css/plugins/cms.placeholders.css

@@ -46,23 +46,16 @@ $(document).ready(function () {
 			this._collapsables(placeholders.find('.cms_draggable'));
 
 			// add global collapsable events
-			placeholders.find('.cms_expandmenu').bind('click', function () {
-				var el = $(this);
-				if(el.hasClass('cms_expandmenu-collapsed')) {
-					that._collapseAll(el.closest('.cms_placeholder'));
-					el.removeClass('cms_expandmenu-collapsed');
-				} else {
-					that._expandAll(el.closest('.cms_placeholder'));
-					el.addClass('cms_expandmenu-collapsed');
-				}
+			placeholders.find('.cms_placeholder-title').bind('click', function () {
+				($(this).hasClass('cms_placeholder-title-expanded')) ? that._collapseAll($(this)) : that._expandAll($(this));
 			});
 
 			// check which button should be shown for collapsemenu
 			placeholders.each(function (index, item) {
 				var els = $(item).find('.cms_dragitem-collapsable');
 				var open = els.filter('.cms_dragitem-expanded');
 				if(els.length === open.length && (els.length + open.length !== 0)) {
-					$(item).find('.cms_expandmenu').addClass('cms_expandmenu-collapsed');
+					$(item).find('.cms_placeholder-title').addClass('cms_placeholder-title-expanded');
 				}
 			});
 		},
@@ -369,18 +362,24 @@ $(document).ready(function () {
 			});
 		},
 
-		_expandAll: function (placeholder) {
-			var items = placeholder.find('.cms_dragitem-collapsable');
-				items.each(function () {
-					if(!$(this).hasClass('cms_dragitem-expanded')) $(this).trigger('click');
-				});
+		_expandAll: function (el) {
+			var items = el.closest('.cms_placeholder').find('.cms_dragitem-collapsable');
+			// cancel if there are no items
+			if(!items.length) return false;
+			items.each(function () {
+				if(!$(this).hasClass('cms_dragitem-expanded')) $(this).trigger('click');
+			});
+
+			el.addClass('cms_placeholder-title-expanded');
 		},
 
-		_collapseAll: function (placeholder) {
-			var items = placeholder.find('.cms_dragitem-collapsable');
-				items.each(function () {
-					if($(this).hasClass('cms_dragitem-expanded')) $(this).trigger('click');
-				});
+		_collapseAll: function (el) {
+			var items = el.closest('.cms_placeholder').find('.cms_dragitem-collapsable');
+			items.each(function () {
+				if($(this).hasClass('cms_dragitem-expanded')) $(this).trigger('click');
+			});
+
+			el.removeClass('cms_placeholder-title-expanded');
 		},
 
 		_preventEvents: function () {

cms/static/cms/img/toolbar/sprite_toolbar.png

@@ -23,15 +23,21 @@
 	@include border-radius(3px); background:$color-grey-70;
 
 	.cms_placeholder-title { font-size:12px; line-height:16px; text-transform:uppercase;
-		font-weight:500; padding:0 0 0 2px; height:20px;
-		color:white; @include text-shadow(0px 1px 0px black); }
+		font-weight:500; padding:0 0 0 15px; height:20px; cursor:pointer;
+		color:white; @include text-shadow(0px 1px 0px black);
 
-	.cms_expandmenu { float:right; width:20px; height:20px; cursor:pointer;
-		background:url('../../img/toolbar/sprite_toolbar.png') no-repeat -80px -113px;
-		&:hover { background-position:-100px -113px; }
+		&:before { content:" "; position:absolute; left:0; top:0; width:15px; height:20px;
+			background:url('../../img/toolbar/sprite_toolbar.png') no-repeat -85px -113px;
+		}
+		&:hover {
+			&:before { background-position:-105px -113px; }
+		}
 	}
-	.cms_expandmenu-collapsed { background-position:-120px -113px;
-		&:hover { background-position:-140px -113px; }
+	.cms_placeholder-title-expanded {
+		&:before { background-position:-124px -114px; }
+		&:hover {
+			&:before { background-position:-144px -114px !important; }
+		}
 	}
 }
 

cms/static/cms/js/plugins/cms.placeholders.js

@@ -14,7 +14,6 @@
 			{% include "cms/toolbar/draggable_menu.html" with plugin_classes=installed_plugins %}
 		</div>
 	</div>
-	<div class="cms_expandmenu" title="{% trans "Expand / Collapse" %}"></div>
 	{% endlanguage %}
 
 	<div class="cms_placeholder-title">{{ placeholder_label }}</div>