Merge branch 'temp8-grid2' of https://github.com/umbraco/Umbraco-CMS into temp8-grid2

This commit is contained in:
Shannon
2018-05-20 15:43:18 +02:00
13 changed files with 127 additions and 758 deletions
+12
View File
@@ -75,11 +75,23 @@ namespace Umbraco.Core.Models
public class GridEditor
{
[JsonProperty("name")]
public string Name { get; set; }
[JsonProperty("alias")]
public string Alias { get; set; }
[JsonProperty("view")]
public string View { get; set; }
[JsonProperty("render")]
public string Render { get; set; }
[JsonProperty("icon")]
public string Icon { get; set; }
[JsonProperty("config")]
public IDictionary<string, object> Config { get; set; }
}
}
}
@@ -0,0 +1,106 @@
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using Umbraco.Core.Configuration;
using Umbraco.Core.Composing;
using Umbraco.Core.IO;
using Umbraco.Core.Logging;
using Umbraco.Core.Models.PublishedContent;
using Umbraco.Core.Models;
using Umbraco.Core.Configuration.Grid;
namespace Umbraco.Core.PropertyEditors.ValueConverters
{
/// <summary>
/// This ensures that the grid config is merged in with the front-end value
/// </summary>
[DefaultPropertyValueConverter(typeof(JsonValueConverter))] //this shadows the JsonValueConverter
public class Grid2ValueConverter : JsonValueConverter
{
public Grid2ValueConverter(PropertyEditorCollection propertyEditors)
: base(propertyEditors)
{ }
public override bool IsConverter(PublishedPropertyType propertyType) => propertyType.EditorAlias.InvariantEquals(Constants.PropertyEditors.Aliases.Grid2);
public override Type GetPropertyValueType(PublishedPropertyType propertyType) => typeof(GridValue);
public override PropertyCacheLevel GetPropertyCacheLevel(PublishedPropertyType propertyType) => PropertyCacheLevel.Element;
// TODO: Not sure whether this should be `ConvertSourceToIntermediate` or `ConvertIntermediateToObject` [LK:2018-05-20]
public override object ConvertSourceToIntermediate(IPublishedElement owner, PublishedPropertyType propertyType, object source, bool preview)
{
if (source == null)
return null;
var sourceString = source.ToString();
if (sourceString.DetectIsJson())
{
try
{
var grid = JsonConvert.DeserializeObject<GridValue>(sourceString);
// so we have the grid json... we need to merge in the grid's configuration values with the values
// we've saved in the database so that when the front end gets this value, it is up-to-date.
//TODO: Change all singleton access to use ctor injection in v8!!!
//TODO: That would mean that property value converters would need to be request lifespan, hrm....
var gridConfig = UmbracoConfig.For.GridConfig(
Current.ProfilingLogger.Logger,
Current.ApplicationCache.RuntimeCache,
new DirectoryInfo(IOHelper.MapPath(SystemDirectories.AppPlugins)),
new DirectoryInfo(IOHelper.MapPath(SystemDirectories.Config)),
HttpContext.Current.IsDebuggingEnabled);
foreach (var section in grid.Sections)
{
foreach (var row in section.Rows)
{
foreach (var area in row.Areas)
{
foreach (var control in area.Controls)
{
if (control.Editor != null)
{
var alias = control.Editor.Alias;
if (alias.IsNullOrWhiteSpace() == false)
{
//find the alias in config
// TODO: load up the editor config into a dictionary for faster lookup, rather than a FirstOrDefault per each iteration. [LK:2018-05-20]
var found = gridConfig.EditorsConfig.Editors.FirstOrDefault(x => x.Alias == alias);
if (found != null)
{
// TODO: There might be some fancy AutoMapper thing we could use here? [LK:2018-05-20]
//add/replace the editor value with the one from config
control.Editor.Alias = found.Alias;
control.Editor.Name = found.Name;
control.Editor.View = found.View;
control.Editor.Render = found.Render;
control.Editor.Icon = found.Icon;
control.Editor.Config = found.Config;
}
}
}
}
}
}
}
return grid;
}
catch (Exception ex)
{
Current.Logger.Error<GridValueConverter>($"Could not parse the string {sourceString} to a JSON object", ex);
}
}
//it's not json, just return the string
return sourceString;
}
}
}
+1
View File
@@ -394,6 +394,7 @@
<Compile Include="PropertyEditors\PropertyEditorTagsExtensions.cs" />
<Compile Include="PropertyEditors\SliderPropertyEditorConfiguration.cs" />
<Compile Include="PropertyEditors\TagConfiguration.cs" />
<Compile Include="PropertyEditors\ValueConverters\Grid2ValueConverter.cs" />
<Compile Include="PropertyEditors\ValueConverters\ImageCropperValue.cs" />
<Compile Include="PropertyEditors\ValueConverters\ImageCropperValueTypeConverter.cs" />
<Compile Include="PropertyEditors\ValueListConfiguration.cs" />
@@ -22,8 +22,6 @@ angular.module("umbraco.directives")
//we always fetch the default one, and then override parts with our own
tinyMceService.configuration().then(function (tinyMceConfig) {
//config value from general tinymce.config file
var validElements = tinyMceConfig.validElements;
var fallbackStyles = [{title: "Page header", block: "h2"}, {title: "Section header", block: "h3"}, {title: "Paragraph header", block: "h4"}, {title: "Normal", block: "p"}, {title: "Quote", block: "blockquote"}, {title: "Code", block: "code"}];
@@ -51,12 +49,10 @@ angular.module("umbraco.directives")
await.push(assetsService.loadJs("lib/tinymce/tinymce.min.js", scope));
}
if(scope.configuration && scope.configuration.toolbar){
toolbar = scope.configuration.toolbar.join(' | ');
}
if(scope.configuration && scope.configuration.stylesheets){
angular.forEach(scope.configuration.stylesheets, function(stylesheet, key){
@@ -91,7 +87,7 @@ angular.module("umbraco.directives")
}));
});
}else{
stylesheets.push("views/propertyeditors/grid/config/grid.default.rtestyles.css");
stylesheets.push("common/directives/components/grid/grid.default.rtestyles.css");
styleFormats = fallbackStyles;
}
@@ -120,7 +116,6 @@ angular.module("umbraco.directives")
cache_suffix: "?umb__rnd=" + Umbraco.Sys.ServerVariables.application.cacheBuster
};
if (tinyMceConfig.customConfig) {
//if there is some custom config, we need to see if the string value of each item might actually be json and if so, we need to
@@ -163,7 +158,6 @@ angular.module("umbraco.directives")
//set the reference
tinyMceEditor = editor;
//enable browser based spell checking
editor.on('init', function (e) {
@@ -212,7 +206,7 @@ angular.module("umbraco.directives")
.css("margin-top", "0")
.css("width", tinyMceWidth);
}
};
// unpin toolbar to top of screen
@@ -224,7 +218,7 @@ angular.module("umbraco.directives")
// reset padding in top of mce so the content does not "jump" up
_tinyMceEditArea.css("padding-top", "0");
_toolbar.css("position", "static");
};
@@ -1,363 +0,0 @@
var uSkyGridConfig = [
{
style:[
{
label: "Set a background image",
description: "Set a row background",
key: "background-image",
view: "imagepicker",
modifier: "url({0})"
},
{
label: "Set a font color",
description: "Pick a color",
key: "color",
view: "colorpicker"
}
],
config:[
{
label: "Preview",
description: "Display a live preview",
key: "preview",
view: "boolean"
},
{
label: "Class",
description: "Set a css class",
key: "class",
view: "textstring"
}
],
layouts: [
{
grid: 12,
percentage: 100,
rows: [
{
name: "Single column",
columns: [{
grid: 12,
percentage: 100
}]
},
{
name: "Article",
models: [{
grid: 4,
percentage: 33.3,
allowed: ["media","quote"]
}, {
grid: 8,
percentage: 66.6,
allowed: ["rte"]
}]
},
{
name: "Article, reverse",
models: [
{
grid: 8,
percentage: 66.6,
allowed: ["rte","macro"]
},
{
grid: 4,
percentage: 33.3,
allowed: ["media","quote","embed"]
}]
},
{
name: "Profile page",
models: [
{
grid: 4,
percentage: 33.3,
allowed: ["media"]
},
{
grid: 8,
percentage: 66.6,
allowed: ["rte"]
}
]
},
{
name: "Headline",
models: [
{
grid: 12,
percentage: 100,
max: 1,
allowed: ["headline"]
}
]
},
{
name: "Three columns",
models: [{
grid: 4,
percentage: 33.3,
allowed: ["rte"]
},
{
grid: 4,
percentage: 33.3,
allowed: ["rte"]
},
{
grid: 4,
percentage: 33.3,
allowed: ["rte"]
}]
}
]
}
]
},
{
columns: [
{
grid: 9,
percentage: 70,
cellModels: [
{
models: [{
grid: 12,
percentage: 100
}]
}, {
models: [{
grid: 6,
percentage: 50
}, {
grid: 6,
percentage: 50
}]
}, {
models: [{
grid: 4,
percentage: 33.3
}, {
grid: 4,
percentage: 33.3
}, {
grid: 4,
percentage: 33.3
}]
}, {
models: [{
grid: 3,
percentage: 25
}, {
grid: 3,
percentage: 25
}, {
grid: 3,
percentage: 25
}, {
grid: 3,
percentage: 25
}, ]
}, {
models: [{
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}]
}, {
models: [{
grid: 8,
percentage: 60
}, {
grid: 4,
percentage: 40
}]
}, {
models: [{
grid: 4,
percentage: 40
}, {
grid: 8,
percentage: 60
}]
}
]
},
{
grid: 3,
percentage: 30,
cellModels: [
{
models: [{
grid: 12,
percentage: 100
}]
}
]
}
]
},
{
columns: [
{
grid: 3,
percentage: 30,
cellModels: [
{
models: [{
grid: 12,
percentage: 100
}]
}
]
},
{
grid: 9,
percentage: 70,
cellModels: [
{
models: [{
grid: 12,
percentage: 100
}]
}, {
models: [{
grid: 6,
percentage: 50
}, {
grid: 6,
percentage: 50
}]
}, {
models: [{
grid: 4,
percentage: 33.3
}, {
grid: 4,
percentage: 33.3
}, {
grid: 4,
percentage: 33.3
}]
}, {
models: [{
grid: 3,
percentage: 25
}, {
grid: 3,
percentage: 25
}, {
grid: 3,
percentage: 25
}, {
grid: 3,
percentage: 25
}, ]
}, {
models: [{
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}]
}, {
models: [{
grid: 8,
percentage: 60
}, {
grid: 4,
percentage: 40
}]
}, {
models: [{
grid: 4,
percentage: 40
}, {
grid: 8,
percentage: 60
}]
}
]
}
]
},
{
columns: [
{
grid: 4,
percentage: 33.3,
cellModels: [
{
models: [{
grid: 12,
percentage: 100
}]
}
]
},
{
grid: 4,
percentage: 33.3,
cellModels: [
{
models: [{
grid: 12,
percentage: 100
}]
}
]
},
{
grid: 4,
percentage: 33.3,
cellModels: [
{
models: [{
grid: 12,
percentage: 100
}]
}
]
}
]
}
];
@@ -1,363 +0,0 @@
var uSkyGridConfig = [
{
style:[
{
label: "Set a background image",
description: "Set a row background",
key: "background-image",
view: "imagepicker",
modifier: "url({0})"
},
{
label: "Set a font color",
description: "Pick a color",
key: "color",
view: "colorpicker"
}
],
config:[
{
label: "Preview",
description: "Display a live preview",
key: "preview",
view: "boolean"
},
{
label: "Class",
description: "Set a css class",
key: "class",
view: "textstring"
}
],
layouts: [
{
grid: 12,
percentage: 100,
rows: [
{
name: "Single column",
columns: [{
grid: 12,
percentage: 100
}]
},
{
name: "Article",
models: [{
grid: 4,
percentage: 33.3,
allowed: ["media","quote"]
}, {
grid: 8,
percentage: 66.6,
allowed: ["rte"]
}]
},
{
name: "Article, reverse",
models: [
{
grid: 8,
percentage: 66.6,
allowed: ["rte","macro"]
},
{
grid: 4,
percentage: 33.3,
allowed: ["media","quote","embed"]
}]
},
{
name: "Profile page",
models: [
{
grid: 4,
percentage: 33.3,
allowed: ["media"]
},
{
grid: 8,
percentage: 66.6,
allowed: ["rte"]
}
]
},
{
name: "Headline",
models: [
{
grid: 12,
percentage: 100,
max: 1,
allowed: ["headline"]
}
]
},
{
name: "Three columns",
models: [{
grid: 4,
percentage: 33.3,
allowed: ["rte"]
},
{
grid: 4,
percentage: 33.3,
allowed: ["rte"]
},
{
grid: 4,
percentage: 33.3,
allowed: ["rte"]
}]
}
]
}
]
},
{
columns: [
{
grid: 9,
percentage: 70,
cellModels: [
{
models: [{
grid: 12,
percentage: 100
}]
}, {
models: [{
grid: 6,
percentage: 50
}, {
grid: 6,
percentage: 50
}]
}, {
models: [{
grid: 4,
percentage: 33.3
}, {
grid: 4,
percentage: 33.3
}, {
grid: 4,
percentage: 33.3
}]
}, {
models: [{
grid: 3,
percentage: 25
}, {
grid: 3,
percentage: 25
}, {
grid: 3,
percentage: 25
}, {
grid: 3,
percentage: 25
}, ]
}, {
models: [{
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}]
}, {
models: [{
grid: 8,
percentage: 60
}, {
grid: 4,
percentage: 40
}]
}, {
models: [{
grid: 4,
percentage: 40
}, {
grid: 8,
percentage: 60
}]
}
]
},
{
grid: 3,
percentage: 30,
cellModels: [
{
models: [{
grid: 12,
percentage: 100
}]
}
]
}
]
},
{
columns: [
{
grid: 3,
percentage: 30,
cellModels: [
{
models: [{
grid: 12,
percentage: 100
}]
}
]
},
{
grid: 9,
percentage: 70,
cellModels: [
{
models: [{
grid: 12,
percentage: 100
}]
}, {
models: [{
grid: 6,
percentage: 50
}, {
grid: 6,
percentage: 50
}]
}, {
models: [{
grid: 4,
percentage: 33.3
}, {
grid: 4,
percentage: 33.3
}, {
grid: 4,
percentage: 33.3
}]
}, {
models: [{
grid: 3,
percentage: 25
}, {
grid: 3,
percentage: 25
}, {
grid: 3,
percentage: 25
}, {
grid: 3,
percentage: 25
}, ]
}, {
models: [{
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}, {
grid: 2,
percentage: 16.6
}]
}, {
models: [{
grid: 8,
percentage: 60
}, {
grid: 4,
percentage: 40
}]
}, {
models: [{
grid: 4,
percentage: 40
}, {
grid: 8,
percentage: 60
}]
}
]
}
]
},
{
columns: [
{
grid: 4,
percentage: 33.3,
cellModels: [
{
models: [{
grid: 12,
percentage: 100
}]
}
]
},
{
grid: 4,
percentage: 33.3,
cellModels: [
{
models: [{
grid: 12,
percentage: 100
}]
}
]
},
{
grid: 4,
percentage: 33.3,
cellModels: [
{
models: [{
grid: 12,
percentage: 100
}]
}
]
}
]
}
];
@@ -1,15 +0,0 @@
body.mce-content-body {
background: transparent !important;
overflow-x:hidden !important;
padding-bottom: 10px !important;
/*margin:0px;*/
}
p {
margin: 0 0 10px;
}
.button {
display: inline-block;
border-radius:4px;
}
@@ -1,5 +1,5 @@
angular.module("umbraco")
.controller("Umbraco.PropertyEditors.GridPrevalueEditorController",
.controller("Umbraco.PropertyEditors.Grid2PrevalueEditorController",
function ($scope, $http, assetsService, $rootScope, dialogService, mediaResource, gridService, imageHelper, $timeout) {
var emptyModel = {
@@ -1,4 +1,4 @@
<div ng-controller="Umbraco.PropertyEditors.GridPrevalueEditorController" class="usky-grid usky-grid-configuration">
<div ng-controller="Umbraco.PropertyEditors.Grid2PrevalueEditorController" class="usky-grid usky-grid-configuration">
<div style="max-width: 600px">
@@ -1,5 +1,5 @@
angular.module("umbraco")
.controller("Umbraco.PropertyEditors.GridController",
.controller("Umbraco.PropertyEditors.Grid2Controller",
function ($scope, $http, assetsService, localizationService, $rootScope, dialogService, gridService, mediaResource, imageHelper, $timeout, umbRequestHelper, angularHelper) {
// Grid status variables
@@ -1,4 +1,4 @@
<div ng-controller="Umbraco.PropertyEditors.GridController" class="umb-grid umb-property-editor clearfix" id="umb-grid">
<div ng-controller="Umbraco.PropertyEditors.Grid2Controller" class="umb-grid umb-property-editor clearfix" id="umb-grid">
<umb-editor-sub-header style="background-color: white;">
@@ -4,14 +4,11 @@ using Umbraco.Core.PropertyEditors;
namespace Umbraco.Web.PropertyEditors
{
/// <summary>
/// Represents the configuration for the gid value editor.
/// Represents the configuration for the grid value editor
/// </summary>
public class Grid2Configuration
{
[ConfigurationField("items", "Grid", "views/propertyeditors/grid2/grid.prevalues.html", Description = "Grid configuration")]
public JObject Items { get; set; }
[ConfigurationField("rte", "Rich text editor", "views/propertyeditors/rte/rte.prevalues.html", Description = "Rich text editor configuration")]
public JObject Rte { get; set; }
}
}