ENHANCEMENT Changed CMSMain->AddForm() to a modal dialog, showing page types and their descriptions as radiobuttons rather than a dropdown

code/controller/CMSMain.php

@@ -63,6 +63,7 @@ class CMSMain extends LeftAndMain implements CurrentPageIdentifier, PermissionPr
 				
 		Requirements::javascript(CMS_DIR . '/javascript/CMSMain.js');
 		Requirements::javascript(CMS_DIR . '/javascript/CMSMain.EditForm.js');
+		Requirements::javascript(CMS_DIR . '/javascript/CMSMain.AddForm.js');
 		Requirements::add_i18n_javascript(CMS_DIR . '/javascript/lang');
 		
 		Requirements::css(CMS_DIR . '/css/CMSMain.css');
@@ -281,17 +282,17 @@ JS;
 
 			$addAction = $instance->i18n_singular_name();
 			
-			// if we're in translation mode, the link between the translated pagetype
+			// Get description
-			// title and the actual classname might not be obvious, so we add it in parantheses
+			$description = _t($class . 'DESCRIPTION');
-			// Example: class "RedirectorPage" has the title "Weiterleitung" in German,
+			if(!$description) $description = $instance->uninherited('description');
-			// so it shows up as "Weiterleitung (RedirectorPage)"
+			if($class == 'Page' && !$description) $description = singleton('SiteTree')->uninherited('description');
-			if(i18n::get_locale() != 'en_US') {
-				$addAction .= " ({$class})";
-			}
 			
 			$result->push(new ArrayData(array(
 				'ClassName' => $class,
 				'AddAction' => $addAction,
+				'Description' => $description,
+				// TODO Sprite support
+				'IconURL' => $instance->stat('icon')
 			)));
 		}
 		
@@ -1250,23 +1251,37 @@ JS;
 		}
 	}
 
+	/**
+	 * @return Form
+	 */
 	function AddForm() {
-		$pageTypes = array();
+		$record = $this->currentPage();
 		
-		foreach( $this->PageTypes() as $arrayData ) {
+		$pageTypes = array();
-			$pageTypes[$arrayData->getField('ClassName')] = $arrayData->getField('AddAction');
+		foreach($this->PageTypes() as $type) {
+			$html = sprintf('<span class="icon class-%s"></span><strong class="title">%s</strong><span class="description">%s</span>',
+				$type->getField('ClassName'),
+				$type->getField('AddAction'),
+				$type->getField('Description')
+			);
+			$pageTypes[$type->getField('ClassName')] = $html;
 		}
 		
 		$fields = new FieldSet(
-			new HiddenField("ParentID"),
+			// new HiddenField("ParentID", false, ($this->parentRecord) ? $this->parentRecord->ID : null),
-			new DropdownField("PageType", "", $pageTypes, 'Page')
+			$parentField = new TreeDropdownField("ParentID", _t('CMSMain.AddFormParentLabel', 'Parent page'), 'SiteTree'),
+			new OptionsetField("PageType", "", $pageTypes, 'Page')
 		);
-		
+		$parentField->setValue(($record) ? $record->ID : null);
-		$this->extend('updatePageOptions', $fields);
 		
 		$actions = new FieldSet(
-			new FormAction("doAdd", _t('CMSMain.GO',"Go"))
+			// $resetAction = new ResetFormAction('doCancel', _t('CMSMain.Cancel', 'Cancel')),
+			$createAction = new FormAction("doAdd", _t('CMSMain.Create',"Create"))
 		);
+		// $resetAction->addExtraClass('ss-ui-action-destructive');
+		$createAction->addExtraClass('ss-ui-action-constructive');
+		
+		$this->extend('updatePageOptions', $fields);
 		
 		$form = new Form($this, "AddForm", $fields, $actions);
 		

javascript/CMSMain.AddForm.js

@@ -0,0 +1,34 @@
+(function($) {
+	$.entwine('ss', function($){
+		$('.cms-page-add-form-dialog').entwine({
+			onmatch: function() {
+				this.dialog({
+					autoOpen: false,
+					bgiframe: true,
+					modal: true,
+					height: 400,
+					width: 600,
+					ghost: true
+				});
+				this._super();
+			}
+		});
+	
+		$('.cms-page-add-form-dialog input[name=PageType]').entwine({
+			onmatch: function() {
+				if(this.is(':checked')) this.trigger('click');
+				this._super();
+			},
+			onclick: function() {
+				this.parents('li:first').addClass('selected').siblings().removeClass('selected');
+			}
+		});
+	
+		$(".cms-page-add-button").entwine({
+			onclick: function(e) {
+				$('.cms-page-add-form-dialog').dialog('open');
+				e.preventDefault();
+			}
+		});
+	});
+}(jQuery));

templates/Includes/CMSPagesController_Content.ss

@@ -30,28 +30,22 @@
 		
 		<div id="cms-content-treeview">
 			
-			<div class="cms-tree-tools">
+			<div class="cms-content-toolbar">
-				<span><% _t("TreeTools.DisplayLabel","Display:") %></span>
+				<% include CMSPagesController_ContentToolbar %>
-				<% if CanOrganiseSitetree %> 
-				<div class="checkboxAboveTree">
-					<input type="radio" name="view-mode" value="draggable" id="view-mode-draggable" />
-					<label for="view-mode-draggable"><% _t("ENABLEDRAGGING","Drag'n'drop") %></label>
-				</div>
-				<% end_if %>
-				<div>
-					<input type="radio" name="view-mode" value="multiselect" id="view-mode-multiselect" />
-					<label for="view-mode-multiselect"><% _t("MULTISELECT","Multi-selection") %></label>
-				</div>
-			</div>
-			
-			<div id="TreeActions-batchactions">
-				$BatchActionsForm
 			</div>
 			
 			<div class="cms-tree" data-url-tree="$Link(getsubtree)" data-url-savetreenode="$Link(savetreenode)">
 				$SiteTreeAsUL
 			</div>
 			
+			<div class="cms-content-toolbar">
+				<% include CMSPagesController_ContentToolbar %>
+			</div>
+
+			<div class="ss-dialog cms-page-add-form-dialog" id="cms-page-add-form" title="<% _t('CMSMain.ChoosePageType', 'Choose a page type') %>">
+				$AddForm
+			</div>
+
 		</div>
 		
 		<div id="cms-content-listview">

templates/Includes/CMSPagesController_ContentToolbar.ss

@@ -0,0 +1,21 @@
+<div class="cms-tree-view-modes">
+	<span><% _t("TreeTools.DisplayLabel","Display:") %></span>
+	<% if CanOrganiseSitetree %> 
+	<div class="checkboxAboveTree">
+		<input type="radio" name="view-mode" value="draggable" id="view-mode-draggable" />
+		<label for="view-mode-draggable"><% _t("ENABLEDRAGGING","Drag'n'drop") %></label>
+	</div>
+	<% end_if %>
+	<div>
+		<input type="radio" name="view-mode" value="multiselect" id="view-mode-multiselect" />
+		<label for="view-mode-multiselect"><% _t("MULTISELECT","Multi-selection") %></label>
+	</div>
+</div>
+
+<div>
+	<a class="ss-ui-button ss-ui-action-constructive cms-page-add-button" href="#cms-page-add-form"><% _t('CMSMain.AddNewButton', 'Add new') %></a>
+</div>
+
+<div class="cms-content-batchactions">
+	$BatchActionsForm
+</div>

tests/controller/CMSMainTest.php

@@ -197,22 +197,22 @@ class CMSMainTest extends FunctionalTest {
 
 		// with insufficient permissions
 		$cmsUser->logIn();
-		$this->get('admin');
+		$this->get('admin/pages');
 		$response = $this->submitForm(
 			'Form_AddForm', 
 			null,
-			array('ParentID' => '0', 'PageType' => 'Page', 'Locale' => 'en_US')
+			array('ParentID' => '0', 'ClassName' => 'Page', 'Locale' => 'en_US')
 		);
 		// should redirect, which is a permission error
 		$this->assertEquals(403, $response->getStatusCode(), 'Add TopLevel page must fail for normal user');
 
 		// with correct permissions
 		$rootEditUser->logIn();
-		$this->get('admin');
+		$this->get('admin/pages/');
 		$response = $this->submitForm(
 			'Form_AddForm', 
 			null,
-			array('ParentID' => '0', 'PageType' => 'Page', 'Locale' => 'en_US')
+			array('ParentID' => '0', 'ClassName' => 'Page', 'Locale' => 'en_US')
 		);
 		$this->assertEquals(302, $response->getStatusCode(), 'Must be a redirect on success');
 		$location=$response->getHeader('Location');