changes select box for picking document type, to a list of items.

Author: skttl

src/Our.Umbraco.DocTypeGridEditor/Web/Controllers/DocTypeGridEditorApiController.cs

@@ -36,6 +36,7 @@ public IEnumerable<object> GetContentTypes([ModelBinder] string[] allowedContent
                     guid = x.Key,
                     name = x.Name,
                     alias = x.Alias,
+                    description = x.Description,
                     icon = x.Icon
                 });
         }

src/Our.Umbraco.DocTypeGridEditor/Web/UI/App_Plugins/DocTypeGridEditor/Js/doctypegrideditor.controllers.js

@@ -199,9 +199,9 @@ angular.module("umbraco").controller("Our.Umbraco.DocTypeGridEditor.Dialogs.DocT
 
             $scope.model.nameExp = nameExp;
 
-            $scope.selectDocType = function () {
+            $scope.selectDocType = function (alias) {
                 $scope.dialogMode = "edit";
-                $scope.model.dialogData.docTypeAlias = $scope.selectedDocType.alias;
+                $scope.model.dialogData.docTypeAlias = alias;
                 loadNode();
             };
 

src/Our.Umbraco.DocTypeGridEditor/Web/UI/App_Plugins/DocTypeGridEditor/Views/doctypegrideditor.dialog.html

@@ -1,12 +1,22 @@
 <div class="dtge-dialog " ng-controller="Our.Umbraco.DocTypeGridEditor.Dialogs.DocTypeGridEditorDialog">
 
     <div ng-switch="dialogMode">
-
-        <umb-control-group label="Choose a content type" ng-switch-when="selectDocType">
-            <select class="umb-editor" ng-change="selectDocType()" name="selectDocType" ng-model="$parent.$parent.selectedDocType" ng-options="dt as dt.name for dt in docTypes" required>
-                <option value=""><localize key="choose" />...</option>
-            </select>
-        </umb-control-group>
+        <div ng-switch-when="selectDocType">
+            <h5>Select a content type</h5>
+            <ul class="umb-actions umb-actions-child">
+                <li data-element="action-create-{{docType.alias}}" ng-repeat="docType in docTypes | orderBy:'name':false">
+                    <a ng-click="selectDocType(docType.alias)">
+                        <i class="large {{docType.icon}}"></i>
+                        <span class="menu-label">
+                            {{docType.name}}
+                            <small>
+                                {{docType.description}}
+                            </small>
+                        </span>
+                    </a>
+                </li>
+            </ul>
+        </div>
 
         <div ng-switch-when="edit">