yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Palette improvement

Browse Source
This commit is contained in:
antoine
2014-06-02 10:55:53 +02:00
parent aec956dd2e
commit 2fdf040f73
8 changed files with 201 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
src/Umbraco.Web.UI.Client/src/tuning/config/tuning.palettes.js
View File

File diff suppressed because one or more lines are too long

4
src/Umbraco.Web.UI.Client/src/tuning/index.html
View File

@@ -155,7 +155,7 @@
<h2>PALETTE COLORS</h2>
<ul class="palette">
<li ng-click="refreshtuningByPalette(palette.colors)" ng-repeat="palette in tuningPalette">
<li ng-click="refreshtuningByPalette(palette)" ng-repeat="palette in tuningPalette">
<div>
<span style="background-color: {{ palette.mainColor }}"></span>
</div>
@@ -165,6 +165,8 @@
<button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
<button class="btn btn-default btn-default-save" ng-click="makePreset()">make it !</button>
</div>
</div>

80
src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js
View File

@@ -59,6 +59,7 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
if (field.fontStyle == "''") { field.fontStyle = ""; }
if (field.fontType == "''") { field.fontType = ""; }
}
}
catch (err) {
console.info("Style parameter not found " + field.alias);
@@ -149,19 +150,34 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
}
// Refresh with selected tuning palette
$scope.refreshtuningByPalette = function (colors) {
$scope.refreshtuningByPalette = function (palette) {
data = palette.colors;
if (palette.gf) {
$.each(palette.gf, function (indexFont, font) {
document.getElementById("resultFrame").contentWindow.getFont(font);
});
}
$.each($scope.tuningModel.categories, function (indexCategory, category) {
$.each(category.sections, function (indexSection, section) {
$.each(section.subSections, function (indexSubSection, subSection) {
$.each(subSection.fields, function (indexField, field) {
if (field.type == "colorPicker") {
$.each(colors, function (indexColor, color) {
if (color.alias == field.alias) {
field.value = color.value;
}
});
// value
field.value = eval("data." + field.alias.replace("@", ""));
if (field.value == "''") { field.value = ""; }
// special init for font family picker
if (field.type == "fontFamilyPicker") {
field.fontWeight = eval("data." + field.alias.replace("@", "") + "_weight");
field.fontStyle = eval("data." + field.alias.replace("@", "") + "_style");
field.fontType = eval("data." + field.alias.replace("@", "") + "_type");
if (field.fontWeight == "''") { field.fontWeight = ""; }
if (field.fontStyle == "''") { field.fontStyle = ""; }
if (field.fontType == "''") { field.fontType = ""; }
}
})
@@ -339,6 +355,53 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
}
}
// Hidden botton to make preset from the current settings
$scope.makePreset = function () {
var parameters = [];
var parametersGF = [];
$.each($scope.tuningModel.categories, function (indexCategory, category) {
$.each(category.sections, function (indexSection, section) {
$.each(section.subSections, function (indexSubSection, subSection) {
$.each(subSection.fields, function (indexField, field) {
if (!subSection.schema || subSection.schema.indexOf("gridrow_") < 0) {
// value
var value = (field.value != 0 && (field.value == undefined || field.value == "")) ? "''" : field.value;
parameters.splice(parameters.length + 1, 0, "\"" + field.alias + "\":" + " \"" + value + "\"");
// special init for font family picker
if (field.type == "fontFamilyPicker") {
if (field.fontType == "google" && value != "''") {
var variant = field.fontWeight != "" || field.fontStyle != "" ? ":" + field.fontWeight + field.fontStyle : "";
if ($.inArray(value + variant, parametersGF) < 0) {
parametersGF.splice(parametersGF.length + 1, 0, value + variant);
}
}
var fontWeight = (field.fontWeight != 0 && (field.fontWeight == undefined || field.fontWeight == "")) ? "''" : field.fontWeight;
var fontStyle = (field.fontStyle != 0 && (field.fontStyle == undefined || field.fontStyle == "")) ? "''" : field.fontStyle;
var fontType = (field.fontType != 0 && (field.fontType == undefined || field.fontType == "")) ? "''" : field.fontType;
parameters.splice(parameters.length + 1, 0, "\"" + field.alias + "_weight" + "\":" + " \"" + fontWeight + "\"");
parameters.splice(parameters.length + 1, 0, "\"" + field.alias + "_style" + "\":" + " \"" + fontStyle + "\"");
parameters.splice(parameters.length + 1, 0, "\"" + field.alias + "_type" + "\":" + " \"" + fontType + "\"");
}
}
})
})
})
});
$("body").append("<textarea>{name:\"\", mainColor:\"\", gf:" + JSON.stringify(parametersGF) + ", colors:{" + parameters.join(",") + "}}</textarea>");
}
// Preload of the google font
$http.get('/Umbraco/Api/tuning/GetGoogleFont').success(function (data) {
$scope.googleFontFamilies = data;
@@ -563,8 +626,9 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli
$scope.showFontPreview = function (font) {
if (font != undefined && font.fontFamily != "" && font.fontType == "google") {
// Font needs to be independently loaded in the iframe for live preview to work.
document.getElementById("resultFrame").contentWindow.getFont(font);
document.getElementById("resultFrame").contentWindow.getFont(font.fontFamily + ":" + font.variant);
WebFont.load({
google: {

138
src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js
View File

@@ -1,5 +1,5 @@
/*********************************************************************************************************/
/* Global function and variable for panel/page com */
/* Global function and variable for panel/page com */
/*********************************************************************************************************/
var refrechLayout = function (parameters) {
@@ -10,6 +10,9 @@ var refrechLayout = function (parameters) {
return false;
});
// hide preview badget
$("#umbracoPreviewBadge").hide();
var string = "less.modifyVars({" + parameters.join(",") + "})";
eval(string);
}
@@ -34,16 +37,16 @@ var getFont = function (font) {
else {
WebFont.load({
google: {
families: [font.fontFamily + ":" + font.variant]
families: [font]
},
loading: function () {
console.log('loading font' + font.fontFamily + ' in iframe');
console.log('loading font' + font + ' in iframe');
},
active: function () {
console.log('loaded font ' + font.fontFamily + ' in iframe');
console.log('loaded font ' + font + ' in iframe');
},
inactive: function () {
console.log('error loading font ' + font.fontFamily + ' in iframe');
console.log('error loading font ' + font + ' in iframe');
}
});
}
@@ -121,71 +124,80 @@ var initIntelTuning = function (tuningModel) {
var outlinePosition = function (target) {
var localname = target[0].localName;
var height = $(target).height();
var width = $(target).width();
var position = $(target).offset();
if (target.length > 0) {
console.info("element select " + localname);
var localname = target[0].localName;
var height = $(target).height();
var width = $(target).width();
var position = $(target).offset();
var posY = position.top - $(window).scrollTop();
var posX = position.left - $(window).scrollLeft();
$("#outline-data").html(localname);
$("#outline-data").css('position', 'fixed');
$("#outline-data").css('top', position.top);
$("#outline-data").css('left', position.left);
$("#outline-data").css('display', 'block');
$("#outline-data").css('position', 'fixed');
$("#outline-data").css('background-color', 'rgb(164, 198, 253)');
$("#outline-data").css('color', '#000000');
$("#outline-data").css('padding', '0px 5px 0px 5px');
$("#outline-data").css('font-size', '11px');
$("#outline-data").css('transition', 'all .05s ease-in-out');
$("#outline-data").css('-moz-transition', 'all .05s ease-in-out');
$("#outline-data").css('-webkit-transition', 'all .05s ease-in-out');
console.info("element select " + localname);
$("#outline-sup").css('display', "block");
$("#outline-sup").css('height', "2px");
$("#outline-sup").css('width', width + "px");
$("#outline-sup").css('position', 'fixed');
$("#outline-sup").css('top', position.top);
$("#outline-sup").css('left', position.left);
$("#outline-sup").css('background-color', '#a4c6fd');
$("#outline-sup").css('transition', 'all .05s ease-in-out');
$("#outline-sup").css('-moz-transition', 'all .05s ease-in-out');
$("#outline-sup").css('-webkit-transition', 'all .05s ease-in-out');
$("#outline-data").html(localname);
$("#outline-data").css('position', 'fixed');
$("#outline-data").css('top', posY);
$("#outline-data").css('left', posX);
$("#outline-data").css('display', 'block');
$("#outline-data").css('position', 'fixed');
$("#outline-data").css('background-color', 'rgb(164, 198, 253)');
$("#outline-data").css('color', '#000000');
$("#outline-data").css('padding', '0px 5px 0px 5px');
$("#outline-data").css('font-size', '11px');
$("#outline-data").css('transition', 'all .05s ease-in-out');
$("#outline-data").css('-moz-transition', 'all .05s ease-in-out');
$("#outline-data").css('-webkit-transition', 'all .05s ease-in-out');
$("#outline-inf").css('display', "block");
$("#outline-inf").css('height', "2px");
$("#outline-inf").css('width', Number(width + 2) + "px");
$("#outline-inf").css('position', 'fixed');
$("#outline-inf").css('top', position.top + height);
$("#outline-inf").css('left', position.left);
$("#outline-inf").css('background-color', '#a4c6fd');
$("#outline-inf").css('transition', 'all .05s ease-in-out');
$("#outline-inf").css('-moz-transition', 'all .05s ease-in-out');
$("#outline-inf").css('-webkit-transition', 'all .05s ease-in-out');
$("#outline-sup").css('display', "block");
$("#outline-sup").css('height', "2px");
$("#outline-sup").css('width', width + "px");
$("#outline-sup").css('position', 'fixed');
$("#outline-sup").css('top', posY);
$("#outline-sup").css('left', posX);
$("#outline-sup").css('background-color', '#a4c6fd');
$("#outline-sup").css('transition', 'all .05s ease-in-out');
$("#outline-sup").css('-moz-transition', 'all .05s ease-in-out');
$("#outline-sup").css('-webkit-transition', 'all .05s ease-in-out');
$("#outline-left").css('display', "block");
$("#outline-left").css('height', height + "px");
$("#outline-left").css('width', "2px");
$("#outline-left").css('position', 'fixed');
$("#outline-left").css('top', position.top);
$("#outline-left").css('left', position.left);
$("#outline-left").css('background-color', '#a4c6fd');
$("#outline-left").css('transition', 'all .05s ease-in-out');
$("#outline-left").css('-moz-transition', 'all .05s ease-in-out');
$("#outline-left").css('-webkit-transition', 'all .05s ease-in-out');
$("#outline-inf").css('display', "block");
$("#outline-inf").css('height', "2px");
$("#outline-inf").css('width', Number(width + 2) + "px");
$("#outline-inf").css('position', 'fixed');
$("#outline-inf").css('top', posY + height);
$("#outline-inf").css('left', posX);
$("#outline-inf").css('background-color', '#a4c6fd');
$("#outline-inf").css('transition', 'all .05s ease-in-out');
$("#outline-inf").css('-moz-transition', 'all .05s ease-in-out');
$("#outline-inf").css('-webkit-transition', 'all .05s ease-in-out');
$("#outline-right").css('display', "block");
$("#outline-right").css('height', height + "px");
$("#outline-right").css('width', "2px");
$("#outline-right").css('position', 'fixed');
$("#outline-right").css('top', position.top);
$("#outline-right").css('left', position.left + width);
$("#outline-right").css('background-color', '#a4c6fd');
$("#outline-right").css('transition', 'all .05s ease-in-out');
$("#outline-right").css('-moz-transition', 'all .05s ease-in-out');
$("#outline-right").css('-webkit-transition', 'all .05s ease-in-out');
$("#outline-left").css('display', "block");
$("#outline-left").css('height', height + "px");
$("#outline-left").css('width', "2px");
$("#outline-left").css('position', 'fixed');
$("#outline-left").css('top', posY);
$("#outline-left").css('left', posX);
$("#outline-left").css('background-color', '#a4c6fd');
$("#outline-left").css('transition', 'all .05s ease-in-out');
$("#outline-left").css('-moz-transition', 'all .05s ease-in-out');
$("#outline-left").css('-webkit-transition', 'all .05s ease-in-out');
$("#outline-right").css('display', "block");
$("#outline-right").css('height', height + "px");
$("#outline-right").css('width', "2px");
$("#outline-right").css('position', 'fixed');
$("#outline-right").css('top', posY);
$("#outline-right").css('left', posX + width);
$("#outline-right").css('background-color', '#a4c6fd');
$("#outline-right").css('transition', 'all .05s ease-in-out');
$("#outline-right").css('-moz-transition', 'all .05s ease-in-out');
$("#outline-right").css('-webkit-transition', 'all .05s ease-in-out');
}
else {
outlineHide();
console.info("element not found select");
}
}
var outlineHide = function () {

4
src/Umbraco.Web.UI/Umbraco/preview/index.html
View File

@@ -155,7 +155,7 @@
<h2>PALETTE COLORS</h2>
<ul class="palette">
<li ng-click="refreshtuningByPalette(palette.colors)" ng-repeat="palette in tuningPalette">
<li ng-click="refreshtuningByPalette(palette)" ng-repeat="palette in tuningPalette">
<div>
<span style="background-color: {{ palette.mainColor }}"></span>
</div>
@@ -165,6 +165,8 @@
<button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>
<button class="btn btn-default btn-default-save" ng-click="makePreset()">make it !</button>
</div>
</div>

2
src/Umbraco.Web.UI/config/ClientDependency.config
View File

@@ -10,7 +10,7 @@ NOTES:
* Compression/Combination/Minification is not enabled unless debug="false" is specified on the 'compiliation' element in the web.config
* A new version will invalidate both client and server cache and create new persisted files
-->
<clientDependency version="1694187287" fileDependencyExtensions=".js,.css" loggerType="Umbraco.Web.UI.CdfLogger, umbraco">
<clientDependency version="912222045" fileDependencyExtensions=".js,.css" loggerType="Umbraco.Web.UI.CdfLogger, umbraco">
<!--
This section is used for Web Forms only, the enableCompositeFiles="true" is optional and by default is set to true.

20
src/Umbraco.Web/TuningUtility.cs
View File

@@ -44,7 +44,7 @@ namespace Umbraco.Web
// Look after grid properies into the current page
foreach (var property in content.Properties)
{
if (property.PropertyType.PropertyEditorAlias == "Umbraco.Grid" && !string.IsNullOrEmpty(property.Value.ToString()))
if (property.PropertyType.PropertyEditorAlias == "Umbraco.Grid" && property.Value != null && !string.IsNullOrEmpty(property.Value.ToString()))
{
dynamic grid = Newtonsoft.Json.Linq.JObject.Parse(property.Value.ToString());
foreach (var column in grid.columns)
@@ -90,7 +90,6 @@ namespace Umbraco.Web
}
string newTag = "gridrow_" + name;
return lessGridRowModel.Replace("-ID-", newTag);
}
@@ -131,7 +130,10 @@ namespace Umbraco.Web
}
}
return int.Parse(path[path.Length - 1]);
if (preview)
return int.Parse(path[path.Length - 1]);
else
return -1;
}
@@ -139,7 +141,13 @@ namespace Umbraco.Web
internal static string GetStylesheetPath(string[] path, bool preview)
{
string styleTuning = preview ? @"{0}{1}.less" : "{0}{1}.css";
return string.Format(styleTuning, tuningStylePath, GetParentOrSelfTunedPageId(path, preview));
int tunedPageId = GetParentOrSelfTunedPageId(path, preview);
if (tunedPageId >0)
return string.Format(styleTuning, tuningStylePath, tunedPageId);
else
return string.Empty;
}
// Create new less file
@@ -168,6 +176,10 @@ namespace Umbraco.Web
}
}
// Create front directory if necesary
if (!Directory.Exists(frontBasePath))
Directory.CreateDirectory(frontBasePath);
// Save less file
if (string.IsNullOrEmpty(lessPath)) lessPath = string.Format("{0}{1}.less", tuningStylePath, pageId);
lessContent = lessContent + Environment.NewLine + parametersToAdd;

5
src/Umbraco.Web/UmbracoHelper.cs
View File

@@ -1334,7 +1334,10 @@ namespace Umbraco.Web
{
// Get css path for current page
string cssPath = TuningUtility.GetStylesheetPath(path, false);
result = string.Format(noPreviewLinks, cssPath);
if (!string.IsNullOrEmpty(cssPath))
result = string.Format(noPreviewLinks, cssPath);
else
result = string.Format(noPreviewLinks, "/Umbraco/assets/css/tuning.defaultStyle.css");
}
return new HtmlString(result);