Got content/media thumbnails rendering properly even with old legacy ones (file based).

This commit is contained in:
Shannon
2013-08-06 14:15:35 +10:00
parent 801e2dea7b
commit 94a67d12ef
10 changed files with 152 additions and 42 deletions

View File

@@ -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];
}

View File

@@ -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('.')) {

View File

@@ -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

View File

@@ -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;
});
});
contentTypeResource.getAllowedTypes($scope.currentNode.id).then(function(data) {
$scope.allowedTypes = iconHelper.formatContentTypeThumbnails(data);
});
}
angular.module('umbraco').controller("Umbraco.Editors.Content.CreateController", contentCreateController);

View File

@@ -1,6 +1,6 @@
/**
* @ngdoc controller
* @name ContentEditController
* @name Umbraco.Editors.Content.EditController
* @function
*
* @description

View File

@@ -8,7 +8,7 @@
<li ng-repeat="docType in allowedTypes">
<a href="#content/edit/{{currentNode.id}}?doctype={{docType.alias}}&create=true" ng-click="nav.hideNavigation()">
<i class="icon-large {{docType.icon}}"></i>
<i class="icon-large {{docType.cssClass}}" style="{{docType.style}}"></i>
<span class="menu-label">
{{docType.name}}
<small>
@@ -19,14 +19,15 @@
</li>
<li class="add">
<a href="#settings/documenttype/create/{{currentNode.id}}?doctype={{docType.alias}}&create=true" ng-click="nav.hideNavigation()"><i class="icon-large icon-plus"></i>
<span class="menu-label">
Create a new document type
<small>
Design and configure a new document type
</small>
</span>
</a>
<a href="#settings/documenttype/create/{{currentNode.id}}?doctype={{docType.alias}}&create=true" ng-click="nav.hideNavigation()">
<i class="icon-large icon-plus"></i>
<span class="menu-label">
Create a new document type
<small>
Design and configure a new document type
</small>
</span>
</a>
</li>
</ul>
</li>

View File

@@ -7,25 +7,27 @@
<ul class="umb-actions-child">
<li ng-repeat="docType in allowedTypes">
<a href="#content/edit/{{currentNode.id}}?doctype={{docType.alias}}&create=true" ng-click="nav.hideNavigation()"><i class="icon-large icon-{{docType.cssClass}}"></i>
<a href="#content/edit/{{currentNode.id}}?doctype={{docType.alias}}&create=true" ng-click="nav.hideNavigation()">
<i class="icon-large {{docType.cssClass}}" style="{{docType.style}}"></i>
<span class="menu-label">
{{docType.name}}
<small>
{{docType.description}}
</small>
{{docType.name}}
<small>
{{docType.description}}
</small>
</span>
</a>
</li>
<li class="add">
<a href="#settings/documenttype/create/{{currentNode.id}}?doctype={{docType.alias}}&create=true" ng-click="nav.hideNavigation()"><i class="icon-large icon-plus"></i>
<span class="menu-label">
Create a new document type
<small>
Design and configure a new document type
</small>
</span>
</a>
<a href="#settings/documenttype/create/{{currentNode.id}}?doctype={{docType.alias}}&create=true" ng-click="nav.hideNavigation()">
<i class="icon-large icon-plus"></i>
<span class="menu-label">
Create a new media type
<small>
Design and configure a new media type
</small>
</span>
</a>
</li>
</ul>
</li>

View File

@@ -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);
angular.module('umbraco').controller("Umbraco.Editors.Media.CreateController", mediaCreateController);

View File

@@ -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) {

View File

@@ -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; }
/// <summary>
/// Returns true if the icon represents a CSS class instead of a file path
/// </summary>
[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;
}
}
/// <summary>
/// Returns the icon file path if the icon is not a class, otherwise returns an empty string
/// </summary>
[DataMember(Name = "iconFilePath")]
public string IconFilePath
{
get
{
return IconIsClass
? string.Empty
: IOHelper.ResolveUrl("~/umbraco/images/umbraco/" + Icon);
}
}
/// <summary>
/// Returns true if the icon represents a CSS class instead of a file path
/// </summary>
[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;
}
}
/// <summary>
/// Returns the icon file path if the icon is not a class, otherwise returns an empty string
/// </summary>
[DataMember(Name = "thumbnailFilePath")]
public string ThumbnailFilePath
{
get
{
return ThumbnailIsClass
? string.Empty
: IOHelper.ResolveUrl("~/umbraco/images/thumbnails/" + Thumbnail);
}
}
}
}