Merge pull request #175 from assertchris/add-role-help

Added role help

code/model/Blog.php

@@ -79,6 +79,10 @@ class Blog extends Page implements PermissionProvider {
 	private static $description = 'Adds a blog to your website.';
 
 	public function getCMSFields() {
+		Requirements::css(BLOGGER_DIR . '/css/cms.css');
+		
+		Requirements::javascript(BLOGGER_DIR . '/js/expandable-help-text.js');
+
 		$self =& $this;
 		$this->beforeUpdateCMSFields(function($fields) use ($self) {
 
@@ -260,7 +264,19 @@ class Blog extends Page implements PermissionProvider {
 		// Editors
 		$editorField = ListboxField::create('Editors', 'Editors', $members)
 			->setMultiple(true)
-			->setDescription('Editors are able to manage this blog and its posts');
+			->setRightTitle('<a class="toggle-description">help</a>')
+			->setDescription('
+				An editor has control over specific Blogs, and all posts included within it. Short of being able to assign other editors to a blog, they are able to handle most changes assigned to their section.<br />
+				<br />
+				Editors have these permissions:<br />
+				<br />
+				Update or publish any BlogPost in their Blog<br />
+				Update or publish their Blog<br />
+				Assign/unassign writers to their Blog<br />
+				Assign/unassign contributors to their Blog<br />
+				Assign/unassign any member as an author of a particular BlogPost
+			');
+
 		if(!$this->canEditEditors()) {
 			$editorField = $editorField->performDisabledTransformation();
 		}
@@ -268,7 +284,17 @@ class Blog extends Page implements PermissionProvider {
 		// Writers
 		$writerField = ListboxField::create('Writers', 'Writers', $members)
 			->setMultiple(true)
-			->setDescription('Writers are able to write and publish posts');
+			->setRightTitle('<a class="toggle-description">help</a>')
+			->setDescription('
+				A writer has control over specific BlogPosts. They are able to handle many changes to the BlogPost they are assigned to.<br />
+				<br />
+				Writers have these permissions:<br />
+				<br />
+				Update or publish any BlogPost to which they are assigned<br />
+				Assign/unassign contributors to their Blog<br />
+				Assign/unassign any member as an author of a particular BlogPost
+			');
+
 		if(!$this->canEditWriters()) {
 			$writerField = $writerField->performDisabledTransformation();
 		}
@@ -276,7 +302,16 @@ class Blog extends Page implements PermissionProvider {
 		// Contributors
 		$contributorField = ListboxField::create('Contributors', 'Contributors', $members)
 			->setMultiple(true)
-			->setDescription('Contributors are able to write, but not publish, posts');
+			->setRightTitle('<a class="toggle-description">help</a>')
+			->setDescription('
+				A contributor has control over specific BlogPosts. They are able to contribute but not publish or remove BlogPosts.<br />
+				<br />
+				Contributors have these permissions:<br />
+				<br />
+				Update any BlogPost to which they are assigned<br />
+				Assign/unassign any member as an author of a particular BlogPost
+			');
+		
 		if(!$this->canEditContributors()) {
 			$contributorField = $contributorField->performDisabledTransformation();
 		}

css/cms.css

@@ -1,28 +1,30 @@
 /**
  * CMS Styles
-**/
+ */
 /**
- * Include Compass framework */
+ * Include Compass framework
+ */
 /*
- * Sprite maps & Icons */
+ * Sprite maps & Icons
+ */
 /* line 48, blog-icon/*.png */
 .blog-icon-sprite, .gridfield-icon .blog-icon-timer {
   background-image: url('../images/blog-icon-s0a5ab5f851.png');
   background-repeat: no-repeat;
 }
 
-/* line 84, ../../../../home/vagrant/.rvm/gems/ruby-2.1.5/gems/compass-core-1.0.1/stylesheets/compass/utilities/sprites/_base.scss */
+/* line 84, ../../../../../../../usr/local/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */
 .gridfield-icon .blog-icon-timer {
   background-position: 0 0;
 }
 
-/* line 18, ../scss/cms.scss */
+/* line 20, ../scss/cms.scss */
 #FeaturedImage .middleColumn {
   clear: none;
   float: left;
 }
 
-/* line 23, ../scss/cms.scss */
+/* line 25, ../scss/cms.scss */
 .blog-admin-sidebar {
   width: 280px;
   border-right: none;
@@ -32,11 +34,11 @@
   bottom: 0px;
   height: 100%;
 }
-/* line 32, ../scss/cms.scss */
+/* line 34, ../scss/cms.scss */
 .blog-admin-sidebar .cms-panel-toggle a {
   text-align: left;
 }
-/* line 36, ../scss/cms.scss */
+/* line 38, ../scss/cms.scss */
 .blog-admin-sidebar ~ .blog-admin-outer {
   width: 100%;
   padding-right: 280px;
@@ -46,54 +48,83 @@
   overflow-x: hidden;
   box-sizing: border-box;
 }
-/* line 45, ../scss/cms.scss */
+/* line 47, ../scss/cms.scss */
 .blog-admin-sidebar ~ .blog-admin-outer > .ss-tabset {
   position: relative;
   overflow: auto;
   height: 100%;
   width: 100%;
 }
-/* line 52, ../scss/cms.scss */
+/* line 54, ../scss/cms.scss */
 .blog-admin-sidebar ~ .blog-admin-outer > .ss-tabset #Title label {
   float: none;
 }
-/* line 55, ../scss/cms.scss */
+/* line 57, ../scss/cms.scss */
 .blog-admin-sidebar ~ .blog-admin-outer > .ss-tabset #Title .middleColumn, .blog-admin-sidebar ~ .blog-admin-outer > .ss-tabset #Title input {
   width: 100%;
   max-width: 100%;
   margin-left: 0;
 }
-/* line 66, ../scss/cms.scss */
+/* line 68, ../scss/cms.scss */
 .blog-admin-sidebar .cms-content-view > .field + .field {
   margin-top: 10px;
 }
-/* line 71, ../scss/cms.scss */
+/* line 73, ../scss/cms.scss */
 .blog-admin-sidebar .cms-content-view > .field.urlsegment .preview {
   padding-top: 0;
   line-height: 25px;
 }
-/* line 76, ../scss/cms.scss */
+/* line 78, ../scss/cms.scss */
 .blog-admin-sidebar .cms-content-view > .field.urlsegment .edit {
   float: right;
 }
-/* line 83, ../scss/cms.scss */
+/* line 85, ../scss/cms.scss */
 .blog-admin-sidebar .cms-content-view > .field.datetime > .middleColumn > .date {
   width: 60%;
 }
-/* line 87, ../scss/cms.scss */
+/* line 89, ../scss/cms.scss */
 .blog-admin-sidebar .cms-content-view > .field.datetime > .middleColumn > .time {
   width: 36%;
   float: right;
 }
-/* line 92, ../scss/cms.scss */
+/* line 94, ../scss/cms.scss */
 .blog-admin-sidebar .cms-content-view > .field.datetime > .middleColumn .middleColumn, .blog-admin-sidebar .cms-content-view > .field.datetime > .middleColumn input {
   width: 100%;
 }
-/* line 101, ../scss/cms.scss */
+/* line 103, ../scss/cms.scss */
 .blog-admin-sidebar.collapsed ~ .blog-admin-outer {
   padding-right: 41px;
 }
-/* line 107, ../scss/cms.scss */
+/* line 109, ../scss/cms.scss */
 .blog-admin-sidebar.cms-content-tools .cms-panel-content {
   width: auto;
 }
+
+/* line 115, ../scss/cms.scss */
+.toggle-description {
+  text-indent: -1000000px;
+  display: inline-block;
+  background: url("../images/information.png") no-repeat center center;
+  width: 20px;
+  height: 20px;
+  margin-left: 4px;
+}
+
+/* line 124, ../scss/cms.scss */
+.toggle-description-correct-middle {
+  margin-left: 0 !important;
+  float: left !important;
+  width: 416px !important;
+}
+
+/* line 130, ../scss/cms.scss */
+.toggle-description-correct-right {
+  display: inline-block !important;
+  margin-left: 0 !important;
+  clear: none !important;
+}
+
+/* line 136, ../scss/cms.scss */
+.toggle-description-correct-description {
+  width: 416px !important;
+}

js/expandable-help-text.js

@@ -0,0 +1,49 @@
+/**
+ * Register expandable help text functions with fields.
+ */
+(function ($) {
+
+	$.entwine('ss', function ($) {
+
+		$('.toggle-description').entwine({
+			'onadd': function () {
+				var $this = $(this);
+
+				/**
+				 * Prevent multiple events being added.
+				 */
+				if ($this.hasClass('toggle-description-enabled')) {
+					return;
+				}
+
+				$this.addClass('toggle-description-enabled');
+
+				/**
+				 * Toggle next description when button is clicked.
+				 */
+				var shown = false;
+
+				$this.on('click', function() {
+					$this.parent().next('.description')[shown ? 'hide' : 'show']();
+
+					$this.toggleClass('toggle-description-shown');
+
+					shown = !shown;
+				});
+
+				/**
+				 * Hide next description by default.
+				 */
+				$this.parent().next('.description').hide();
+
+				/**
+				 * Add classes to correct inherited layout issues in a small context.
+				 */
+				$this.parent().addClass('toggle-description-correct-right');
+				$this.parent().prev('.middleColumn').addClass('toggle-description-correct-middle');
+				$this.parent().next('.description').addClass('toggle-description-correct-description');
+			}
+		});
+
+	});
+})(jQuery);

scss/cms.scss

@@ -1,13 +1,15 @@
 /**
  * CMS Styles
-**/
+ */
 
 /**
- * Include Compass framework */
+ * Include Compass framework
+ */
 @import "compass";
 
 /*
- * Sprite maps & Icons */
+ * Sprite maps & Icons
+ */
 @import "compass/utilities/sprites/base";
 @import "blog-icon/*.png";
 
@@ -109,3 +111,28 @@
 		}
 	}
 }
+
+.toggle-description {
+	text-indent: -1000000px;
+	display: inline-block;
+	background: url("../images/information.png") no-repeat center center;
+	width: 20px;
+	height: 20px;
+	margin-left: 4px;
+}
+
+.toggle-description-correct-middle {
+	margin-left: 0 !important;
+	float: left !important;
+	width: 416px !important;
+}
+
+.toggle-description-correct-right {
+	display: inline-block !important;
+	margin-left: 0 !important;
+	clear: none !important;
+}
+
+.toggle-description-correct-description {
+	width: 416px !important;
+}