diff --git a/src/Umbraco.Web.UI.Client/src/common/mocks/resources/contenttype.mocks.js b/src/Umbraco.Web.UI.Client/src/common/mocks/resources/contenttype.mocks.js index 7f293362a8..1382d7ddd8 100644 --- a/src/Umbraco.Web.UI.Client/src/common/mocks/resources/contenttype.mocks.js +++ b/src/Umbraco.Web.UI.Client/src/common/mocks/resources/contenttype.mocks.js @@ -9,9 +9,9 @@ angular.module('umbraco.mocks'). } var types = [ - { name: "News Article", description: "Standard news article", alias: "newsArticle", id: 1234, icon: "icon-file" }, - { name: "News Area", description: "Area to hold all news articles, there should be only one", alias: "newsArea", id: 1234, icon: "icon-suitcase" }, - { name: "Employee", description: "Employee profile information page", alias: "employee", id: 1234, icon: "icon-user" } + { name: "News Article", description: "Standard news article", alias: "newsArticle", id: 1234, icon: "icon-file", thumbnail: "icon-file" }, + { name: "News Area", description: "Area to hold all news articles, there should be only one", alias: "newsArea", id: 1234, icon: "icon-suitcase", thumbnail: "icon-suitcase" }, + { name: "Employee", description: "Employee profile information page", alias: "employee", id: 1234, icon: "icon-user", thumbnail: "icon-user" } ]; return [200, types, null]; } diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js index 4365bc017a..a7bf43250f 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/tree.service.js @@ -26,7 +26,7 @@ function treeService($q, treeResource, iconHelper, notificationsService, $rootSc treeNodes[i].parent = parentNode; //now, format the icon data - if (treeNodes[i].iconIsClass) { + if (treeNodes[i].iconIsClass === undefined || treeNodes[i].iconIsClass) { var converted = iconHelper.convertFromLegacyTreeNodeIcon(treeNodes[i]); treeNodes[i].cssClass = standardCssClass + " " + converted; if (converted.startsWith('.')) { diff --git a/src/Umbraco.Web.UI.Client/src/common/services/util.service.js b/src/Umbraco.Web.UI.Client/src/common/services/util.service.js index e2bdd5c668..104caee2df 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/util.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/util.service.js @@ -397,6 +397,22 @@ function iconHelper() { ]; return { + + /** Used by the create dialogs for content/media types to format the data so that the thumbnails are styled properly */ + formatContentTypeThumbnails: function (contentTypes) { + for (var i = 0; i < contentTypes.length; i++) { + if (contentTypes[i].thumbnailIsClass === undefined || contentTypes[i].thumbnailIsClass) { + contentTypes[i].cssClass = this.convertFromLegacyIcon(contentTypes[i].thumbnail); + } + else { + contentTypes[i].style = "background-image: url('" + contentTypes[i].thumbnailFilePath + "');height:36px; background-position:4px 0px; background-repeat: no-repeat;background-size: 35px 35px;"; + //we need an 'icon-' class in there for certain styles to work so if it is image based we'll add this + contentTypes[i].cssClass = "custom-file"; + } + } + return contentTypes; + }, + /** If the icon is file based (i.e. it has a file path) */ isFileBasedIcon: function (icon) { //if it doesn't start with a '.' but contains one then we'll assume it's file based diff --git a/src/Umbraco.Web.UI.Client/src/views/content/content.create.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/content.create.controller.js index de85970d71..3c2bde9d1c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/content/content.create.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/content/content.create.controller.js @@ -1,12 +1,17 @@ -angular.module('umbraco') -.controller("Umbraco.Editors.Content.CreateController", - function ($scope, $routeParams, contentTypeResource, iconHelper) { +/** + * @ngdoc controller + * @name Umbraco.Editors.Content.CreateController + * @function + * + * @description + * The controller for the content creation dialog + */ +function contentCreateController($scope, $routeParams, contentTypeResource, iconHelper) { - contentTypeResource.getAllowedTypes($scope.currentNode.id) - .then(function (data) { - _.each(data, function(item) { - item.icon = iconHelper.convertFromLegacyIcon(item.icon); - }); - $scope.allowedTypes = data; - }); - }); \ No newline at end of file + contentTypeResource.getAllowedTypes($scope.currentNode.id).then(function(data) { + $scope.allowedTypes = iconHelper.formatContentTypeThumbnails(data); + }); + +} + +angular.module('umbraco').controller("Umbraco.Editors.Content.CreateController", contentCreateController); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/content/content.edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/content.edit.controller.js index 62035c79f1..b9feea4f02 100644 --- a/src/Umbraco.Web.UI.Client/src/views/content/content.edit.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/content/content.edit.controller.js @@ -1,6 +1,6 @@ /** * @ngdoc controller - * @name ContentEditController + * @name Umbraco.Editors.Content.EditController * @function * * @description diff --git a/src/Umbraco.Web.UI.Client/src/views/content/create.html b/src/Umbraco.Web.UI.Client/src/views/content/create.html index a91b4dc4c2..5cd6c5e561 100644 --- a/src/Umbraco.Web.UI.Client/src/views/content/create.html +++ b/src/Umbraco.Web.UI.Client/src/views/content/create.html @@ -8,7 +8,7 @@
  • - + {{docType.name}} @@ -19,14 +19,15 @@
  • - - - Create a new document type - - Design and configure a new document type - - - + + + + Create a new document type + + Design and configure a new document type + + +
    • diff --git a/src/Umbraco.Web.UI.Client/src/views/media/create.html b/src/Umbraco.Web.UI.Client/src/views/media/create.html index b2746a3255..9997f34679 100644 --- a/src/Umbraco.Web.UI.Client/src/views/media/create.html +++ b/src/Umbraco.Web.UI.Client/src/views/media/create.html @@ -7,25 +7,27 @@ diff --git a/src/Umbraco.Web.UI.Client/src/views/media/media.create.controller.js b/src/Umbraco.Web.UI.Client/src/views/media/media.create.controller.js index f11e8b2f16..3a8cf3dd0e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/media/media.create.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/media/media.create.controller.js @@ -1,6 +1,17 @@ -function mediaCreateController ($scope, $routeParams,mediaTypeResource) { - $scope.allowedTypes = mediaTypeResource.getAllowedTypes($scope.currentNode.id); +/** + * @ngdoc controller + * @name Umbraco.Editors.Media.CreateController + * @function + * + * @description + * The controller for the media creation dialog + */ +function mediaCreateController($scope, $routeParams, mediaTypeResource, iconHelper) { + + mediaTypeResource.getAllowedTypes($scope.currentNode.id).then(function(data) { + $scope.allowedTypes = iconHelper.formatContentTypeThumbnails(data); + }); + } -angular.module('umbraco') - .controller("Umbraco.Editors.Media.CreateController", mediaCreateController); \ No newline at end of file +angular.module('umbraco').controller("Umbraco.Editors.Media.CreateController", mediaCreateController); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/media/media.edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/media/media.edit.controller.js index 6a77dfc680..beb391e5c5 100644 --- a/src/Umbraco.Web.UI.Client/src/views/media/media.edit.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/media/media.edit.controller.js @@ -1,3 +1,11 @@ +/** + * @ngdoc controller + * @name Umbraco.Editors.Media.EditController + * @function + * + * @description + * The controller for the media editor + */ function mediaEditController($scope, $routeParams, mediaResource, notificationsService, angularHelper, serverValidationManager, contentEditingHelper) { if ($routeParams.create) { diff --git a/src/Umbraco.Web/Models/ContentEditing/ContentTypeBasic.cs b/src/Umbraco.Web/Models/ContentEditing/ContentTypeBasic.cs index 3f014f3984..a580443157 100644 --- a/src/Umbraco.Web/Models/ContentEditing/ContentTypeBasic.cs +++ b/src/Umbraco.Web/Models/ContentEditing/ContentTypeBasic.cs @@ -1,5 +1,7 @@ using System.ComponentModel.DataAnnotations; using System.Runtime.Serialization; +using Umbraco.Core; +using Umbraco.Core.IO; namespace Umbraco.Web.Models.ContentEditing { @@ -29,5 +31,70 @@ namespace Umbraco.Web.Models.ContentEditing [DataMember(Name = "icon")] public string Icon { get; set; } + + [DataMember(Name = "thumbnail")] + public string Thumbnail { get; set; } + + /// + /// Returns true if the icon represents a CSS class instead of a file path + /// + [DataMember(Name = "iconIsClass")] + public bool IconIsClass + { + get + { + if (Icon.IsNullOrWhiteSpace()) + { + return true; + } + //if it starts with a '.' or doesn't contain a '.' at all then it is a class + return Icon.StartsWith(".") || Icon.Contains(".") == false; + } + } + + /// + /// Returns the icon file path if the icon is not a class, otherwise returns an empty string + /// + [DataMember(Name = "iconFilePath")] + public string IconFilePath + { + get + { + return IconIsClass + ? string.Empty + : IOHelper.ResolveUrl("~/umbraco/images/umbraco/" + Icon); + } + } + + /// + /// Returns true if the icon represents a CSS class instead of a file path + /// + [DataMember(Name = "thumbnailIsClass")] + public bool ThumbnailIsClass + { + get + { + if (Thumbnail.IsNullOrWhiteSpace()) + { + return true; + } + //if it starts with a '.' or doesn't contain a '.' at all then it is a class + return Thumbnail.StartsWith(".") || Thumbnail.Contains(".") == false; + } + } + + /// + /// Returns the icon file path if the icon is not a class, otherwise returns an empty string + /// + [DataMember(Name = "thumbnailFilePath")] + public string ThumbnailFilePath + { + get + { + return ThumbnailIsClass + ? string.Empty + : IOHelper.ResolveUrl("~/umbraco/images/thumbnails/" + Thumbnail); + } + } } } \ No newline at end of file