From a00e5d54aa533443b2f63e63f1367d68738d8229 Mon Sep 17 00:00:00 2001 From: antoine Date: Tue, 13 May 2014 12:50:48 +0200 Subject: [PATCH] rename tuning project without usky --- src/Umbraco.Web.UI.Client/gruntFile.js | 42 +- .../mocks/services/localization.mocks.js | 1 + ...nelStyles.less => tuning.panelStyles.less} | 149 +- ...{uSkyTuning.loader.js => tuning.loader.js} | 8 +- .../config/tuning.config.js} | 2 +- .../config/tuning.palettes.js} | 2 +- .../{uSky => tuning}/lib/slider.directive.js | 0 .../lib/spectrum.directive.js | 0 .../tuning.baseStyles.less} | 0 .../tuning.controller.js} | 32 +- .../tuning.dynamicStyles.less} | 2 +- .../src/tuning/tuning.front.js | 74 + .../tuning.global.js} | 4 +- .../uSkyTuning.html => tuning/tuning.html} | 18 +- .../tuning.lessParameters.less} | 0 .../src/uSky/uSkyTuning.front.js | 67 - .../views/content/content.edit.controller.js | 6 + .../src/views/content/edit.html | 7 + src/Umbraco.Web.UI/Umbraco.Web.UI.csproj | 1 + .../Umbraco/js/tuning.config.js | 1345 +++++++++++++++++ src/Umbraco.Web.UI/Umbraco/js/tuning.front.js | 74 + .../Umbraco/js/tuning.loader.js | 16 + .../Umbraco/js/tuning.palettes.js | 210 +++ src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js | 602 ++++++++ src/Umbraco.Web.UI/umbraco/config/lang/en.xml | 1 + .../umbraco/config/lang/en_us.xml | 1 + ...uningController.cs => TuningController.cs} | 30 +- src/Umbraco.Web/Umbraco.Web.csproj | 12 +- 28 files changed, 2498 insertions(+), 208 deletions(-) rename src/Umbraco.Web.UI.Client/src/less/{uSkyTuning.panelStyles.less => tuning.panelStyles.less} (78%) rename src/Umbraco.Web.UI.Client/src/{uSkyTuning.loader.js => tuning.loader.js} (69%) rename src/Umbraco.Web.UI.Client/src/{uSky/config/uSkyTuning.config.js => tuning/config/tuning.config.js} (99%) rename src/Umbraco.Web.UI.Client/src/{uSky/config/uSkyTuning.palettes.js => tuning/config/tuning.palettes.js} (99%) rename src/Umbraco.Web.UI.Client/src/{uSky => tuning}/lib/slider.directive.js (100%) rename src/Umbraco.Web.UI.Client/src/{uSky => tuning}/lib/spectrum.directive.js (100%) rename src/Umbraco.Web.UI.Client/src/{uSky/uSkyTuning.baseStyles.less => tuning/tuning.baseStyles.less} (100%) rename src/Umbraco.Web.UI.Client/src/{uSky/uSkyTuning.controller.js => tuning/tuning.controller.js} (93%) rename src/Umbraco.Web.UI.Client/src/{uSky/uSkyTuning.dynamicStyles.less => tuning/tuning.dynamicStyles.less} (99%) create mode 100644 src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js rename src/Umbraco.Web.UI.Client/src/{uSky/uSkyTuning.global.js => tuning/tuning.global.js} (91%) rename src/Umbraco.Web.UI.Client/src/{uSky/uSkyTuning.html => tuning/tuning.html} (94%) rename src/Umbraco.Web.UI.Client/src/{uSky/uSkyTuning.lessParameters.less => tuning/tuning.lessParameters.less} (100%) delete mode 100644 src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.front.js create mode 100644 src/Umbraco.Web.UI/Umbraco/js/tuning.config.js create mode 100644 src/Umbraco.Web.UI/Umbraco/js/tuning.front.js create mode 100644 src/Umbraco.Web.UI/Umbraco/js/tuning.loader.js create mode 100644 src/Umbraco.Web.UI/Umbraco/js/tuning.palettes.js create mode 100644 src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js rename src/Umbraco.Web/Editors/{uSkyTuningController.cs => TuningController.cs} (83%) diff --git a/src/Umbraco.Web.UI.Client/gruntFile.js b/src/Umbraco.Web.UI.Client/gruntFile.js index 97afd422e5..89871daccb 100644 --- a/src/Umbraco.Web.UI.Client/gruntFile.js +++ b/src/Umbraco.Web.UI.Client/gruntFile.js @@ -7,15 +7,15 @@ module.exports = function (grunt) { //run by the watch task grunt.registerTask('watch-js', ['jshint:dev','concat','copy:app','copy:mocks','copy:packages','copy:vs','karma:unit']); - grunt.registerTask('watch-less', ['recess:build', 'recess:installer', 'recess:uSkyTuning', 'copy:assets', 'copy:vs']); + grunt.registerTask('watch-less', ['recess:build', 'recess:installer', 'recess:tuning', 'copy:assets', 'copy:vs']); grunt.registerTask('watch-html', ['copy:views', 'copy:vs']); grunt.registerTask('watch-packages', ['copy:packages']); grunt.registerTask('watch-installer', ['concat:install', 'concat:installJs', 'copy:installer', 'copy:vs']); - grunt.registerTask('watch-usky', ['copy:uSky', 'concat:uSkyJs','concat:uSkyLess']); + grunt.registerTask('watch-tuning', ['copy:tuning', 'concat:tuningJs', 'concat:tuningLess']); grunt.registerTask('watch-test', ['jshint:dev', 'karma:unit']); //triggered from grunt dev or grunt - grunt.registerTask('build', ['clean','concat','recess:min','recess:installer','recess:uSkyTuning','bower','copy']); + grunt.registerTask('build', ['clean', 'concat', 'recess:min', 'recess:installer', 'recess:tuning', 'bower', 'copy']); //utillity tasks grunt.registerTask('docs', ['ngdocs']); @@ -135,13 +135,13 @@ module.exports = function (grunt) { files: [{ dest: '<%= distdir %>/views/install', src : '**/*.html', expand: true, cwd: 'src/installer/steps' }] }, - uSky: { + tuning: { files: [ - { dest: '<%= distdir %>/views/uSky', src: '**/*.html', expand: true, cwd: 'src/usky' }, - { dest: '<%= distdir %>/assets/less', src: 'uSkyTuning.lessParameters.less', expand: true, cwd: 'src/usky' }, - { dest: '<%= distdir %>/js', src: 'uSkyTuning.config.js', expand: true, cwd: 'src/usky/config' }, - { dest: '<%= distdir %>/js', src: 'uSkyTuning.palettes.js', expand: true, cwd: 'src/usky/config' }, - { dest: '<%= distdir %>/js', src: 'uSkyTuning.front.js', expand: true, cwd: 'src/usky' } + { dest: '<%= distdir %>/views/tuning', src: '**/*.html', expand: true, cwd: 'src/tuning' }, + { dest: '<%= distdir %>/assets/less', src: 'tuning.lessParameters.less', expand: true, cwd: 'src/tuning' }, + { dest: '<%= distdir %>/js', src: 'tuning.config.js', expand: true, cwd: 'src/tuning/config' }, + { dest: '<%= distdir %>/js', src: 'tuning.palettes.js', expand: true, cwd: 'src/tuning/config' }, + { dest: '<%= distdir %>/js', src: 'tuning.front.js', expand: true, cwd: 'src/tuning' } ] }, @@ -205,13 +205,13 @@ module.exports = function (grunt) { footer: "\n\n})();" } }, - uSkyJs: { - src: ['src/uSky/uSkyTuning.global.js', 'src/uSky/uSkyTuning.controller.js', 'src/uSky/lib/slider.directive.js', 'src/uSky/lib/spectrum.directive.js'], - dest: '<%= distdir %>/js/uSkyTuning.panel.js' + tuningJs: { + src: ['src/tuning/tuning.global.js', 'src/tuning/tuning.controller.js', 'src/tuning/lib/slider.directive.js', 'src/tuning/lib/spectrum.directive.js'], + dest: '<%= distdir %>/js/tuning.panel.js' }, - uSkyLess: { - src: ['src/uSky/uSkyTuning.lessParameters.less', 'src/uSky/uSkyTuning.baseStyles.less', 'src/uSky/uSkyTuning.dynamicStyles.less'], - dest: '<%= distdir %>/assets/less/uSkyTuning.style.less', + tuningLess: { + src: ['src/tuning/tuning.lessParameters.less', 'src/tuning/tuning.baseStyles.less', 'src/tuning/tuning.dynamicStyles.less'], + dest: '<%= distdir %>/assets/less/tuning.style.less', }, controllers: { src:['src/controllers/**/*.controller.js','src/views/**/*.controller.js'], @@ -299,10 +299,10 @@ module.exports = function (grunt) { compile: true } }, - uSkyTuning: { + tuning: { files: { - '<%= distdir %>/assets/css/uSkyTuning.panelStyles.css': - ['src/less/uSkyTuning.panelStyles.less'] + '<%= distdir %>/assets/css/tuning.panelStyles.css': + ['src/less/tuning.panelStyles.less'] }, options: { compile: true @@ -340,9 +340,9 @@ module.exports = function (grunt) { files: ['src/installer/**/*.*'], tasks: ['watch-installer', 'timestamp'], }, - usky: { - files: ['src/uSky/**/*.*'], - tasks: ['watch-usky', 'timestamp'], + tuning: { + files: ['src/tuning/**/*.*'], + tasks: ['watch-tuning', 'timestamp'], }, html: { files: ['src/views/**/*.html', 'src/*.html'], diff --git a/src/Umbraco.Web.UI.Client/src/common/mocks/services/localization.mocks.js b/src/Umbraco.Web.UI.Client/src/common/mocks/services/localization.mocks.js index 276bba173d..96864e50ff 100644 --- a/src/Umbraco.Web.UI.Client/src/common/mocks/services/localization.mocks.js +++ b/src/Umbraco.Web.UI.Client/src/common/mocks/services/localization.mocks.js @@ -85,6 +85,7 @@ angular.module('umbraco.mocks'). "buttons_save": "Save", "buttons_saveAndPublish": "Save and publish", "buttons_saveToPublish": "Save and send for approval", + "buttons_TuningPage": "Tuning", "buttons_showPage": "Preview", "buttons_showPageDisabled": "Preview is disabled because there's no template assigned", "buttons_styleChoose": "Choose style", diff --git a/src/Umbraco.Web.UI.Client/src/less/uSkyTuning.panelStyles.less b/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less similarity index 78% rename from src/Umbraco.Web.UI.Client/src/less/uSkyTuning.panelStyles.less rename to src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less index e204a782da..f2f19a0f8b 100644 --- a/src/Umbraco.Web.UI.Client/src/less/uSkyTuning.panelStyles.less +++ b/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less @@ -3,9 +3,10 @@ body { padding:0px; text-align:center; background-color:#fafbfd; + display:none; } -.uskytuning #TuningBg { +.tuning #TuningBg { position: fixed; top: 0; left: 0; @@ -26,33 +27,33 @@ body { transition: all 0.2s ease-in-out; } -.uskytuning .tuning-wrapper { +.tuning .tuning-wrapper { height: 100%; padding: 0 5px 0 0; overflow-y: auto; text-align:left; } -.uskytuning #TuningBg.open { +.tuning #TuningBg.open { margin-left: 0; -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } -.uskytuning .colpick { +.tuning .colpick { z-index: 99999999; } -.uskytuning .nav { +.tuning .nav { margin-bottom: 10px; color: #ffffff; border-bottom: 1px solid #f57020; } -.uskytuning .nav-tabs > li.active > a, -.uskytuning .nav-tabs > li.active > a:hover, -.uskytuning .nav-tabs > li.active > a:focus { +.tuning .nav-tabs > li.active > a, +.tuning .nav-tabs > li.active > a:hover, +.tuning .nav-tabs > li.active > a:focus { color: #d9d9d9; cursor: default; background-color: #f57020; @@ -60,31 +61,31 @@ body { border-bottom-color: transparent; } -.uskytuning .nav-tabs > li > a:hover { +.tuning .nav-tabs > li > a:hover { border: 1px solid rgba(245, 112, 32, 0.53); } -.uskytuning .nav > li > a:hover, -.uskytuning .nav > li > a:focus { +.tuning .nav > li > a:hover, +.tuning .nav > li > a:focus { text-decoration: none; background-color: rgba(245, 112, 32, 0.53); border: 1px solid rgba(245, 112, 32, 0.53); } -.uskytuning .nav-tabs > li > a { +.tuning .nav-tabs > li > a { border-radius: 2px 2px 0 0; } -.uskytuning .nav-tabs > li > a { +.tuning .nav-tabs > li > a { color: #ffffff; cursor: pointer; } -.uskytuning .nav > li > a { +.tuning .nav > li > a { padding: 5px 10px; } -.uskytuning .panel-title > a { +.tuning .panel-title > a { display: block; font-size: 13px; line-height: 22px; @@ -92,24 +93,24 @@ body { cursor: pointer; } -.uskytuning .panel-title > a span { +.tuning .panel-title > a span { display:block; } -.uskytuning .panel-title > a:hover { +.tuning .panel-title > a:hover { color: #ffffff; text-decoration: none; } -.uskytuning .panel-heading { +.tuning .panel-heading { padding: 0 10px; } -.uskytuning .panel-group .panel { +.tuning .panel-group .panel { border-radius: 1px; } -.uskytuning .panel { +.tuning .panel { margin-bottom: 5px; background-color: rgba(85, 85, 85, 0.76); border: 1px solid rgba(217, 217, 217, 0.5); @@ -118,21 +119,21 @@ body { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } -.uskytuning .panel-default > .panel-heading { +.tuning .panel-default > .panel-heading { color: #333; background-color: rgba(85, 85, 85, 0.76); border-color: rgba(217, 217, 217, 0.5); border-radius: 2px; } -.uskytuning .panel-default > .panel-heading:hover { +.tuning .panel-default > .panel-heading:hover { color: #ffffff; text-decoration: none; background-color: rgba(255, 255, 255, 0.41); } -.uskytuning .btn-default-save, -.uskytuning .btn-default-save:focus { +.tuning .btn-default-save, +.tuning .btn-default-save:focus { float: right; margin-top: 5px; color: #fff; @@ -141,25 +142,25 @@ body { border-radius: 2px; } -.uskytuning .btn-default-save:hover { +.tuning .btn-default-save:hover { color: #fff; background-color: rgba(245, 112, 32, 0.53); } -.uskytuning .field-title { +.tuning .field-title { float: left; margin-right: 10px; font-size: 11px; color: #d9d9d9; } -.uskytuning .div-field { +.tuning .div-field { margin-bottom: 10px; overflow: hidden; clear: both; } -.uskytuning .sp-replacer { +.tuning .sp-replacer { float: left; padding: 0; margin-top: 0; @@ -167,44 +168,44 @@ body { border: solid 1px #d9d9d9; } -.uskytuning .panel-body { +.tuning .panel-body { border-top: 1px solid rgba(217, 217, 217, 0.5) !important; border-top-color: rgba(217, 217, 217, 0.5) !important; } -.uskytuning select { +.tuning select { font-size: 11px; } -.uskytuning .sp-dd { +.tuning .sp-dd { display: none; } -.uskytuning .sp-preview { +.tuning .sp-preview { width: 17px; height: 17px; margin-right: 0; border: none; } -.uskytuning .box-slider { +.tuning .box-slider { padding: 7px 2px 12px 2px; clear: both; } -.uskytuning .ui-widget-content { +.tuning .ui-widget-content { background: rgba(255, 255, 255, 0.09) !important; border: 0px solid #fff !important; border-radius: 2px !important; } -.uskytuning .ui-slider-horizontal { +.tuning .ui-slider-horizontal { float: left; width: 155px; height: .3em !important; } -.uskytuning .ui-slider .ui-slider-handle { +.tuning .ui-slider .ui-slider-handle { top: -0.3em; width: 0.3em !important; height: 0.9em !important; @@ -217,12 +218,12 @@ body { border-top-left-radius: 1px; } -.uskytuning .ui-slider .ui-slider-handle:hover, -.uskytuning .ui-slider .ui-slider-handle:focus { +.tuning .ui-slider .ui-slider-handle:hover, +.tuning .ui-slider .ui-slider-handle:focus { color: #d9d9d9 !important; } -.uskytuning .slider-input { +.tuning .slider-input { float: right; width: 25px; padding: 0; @@ -235,7 +236,7 @@ body { border: none; } -.uskytuning .slider-span { +.tuning .slider-span { float: right; margin: -9px 0 0 0; font-size: 11px; @@ -243,16 +244,16 @@ body { } @-moz-document url-prefix() { - .uskytuning .slider-input { + .tuning .slider-input { margin-top: -6px; } } -.uskytuning .imagePickerPreviewContainer { +.tuning .imagePickerPreviewContainer { float: left; } -.uskytuning .imagePickerPreview { +.tuning .imagePickerPreview { float: left; width: 50px; height: 30px; @@ -267,18 +268,18 @@ body { border: 1px solid rgba(217, 217, 217, 0.5); } -.uskytuning .imagePickerPreview:hover { +.tuning .imagePickerPreview:hover { color: #d9d9d9; border: 1px solid #d9d9d9; } -.uskytuning .imagePickerPreview i { +.tuning .imagePickerPreview i { font-size: 14px; line-height: 30px; cursor: pointer; } -.uskytuning .colorPickerDelete { +.tuning .colorPickerDelete { float: left; margin-top: 5px; margin-left: 3px; @@ -287,21 +288,21 @@ body { cursor: pointer; } -.uskytuning .colorPickerDelete:hover { +.tuning .colorPickerDelete:hover { color: #d9d9d9; } -.uskytuning .tuning-tools { +.tuning .tuning-tools { position: absolute; right: -28px; margin: 120px 0 0 0; } -.uskytuning #TuningBg.open .tuning-tools { +.tuning #TuningBg.open .tuning-tools { right: -33px; } -.uskytuning .tuning-tools div { +.tuning .tuning-tools div { display: block; padding: 8px 10px 8px 10px; margin: 5px 0 0 0; @@ -316,13 +317,13 @@ body { box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } -.uskytuning .tuning-tools div:hover, -.uskytuning .tuning-tools div.selected { +.tuning .tuning-tools div:hover, +.tuning .tuning-tools div.selected { color: #ffffff; background: rgba(29, 29, 29, 0.91); } -.uSkytuningImagePicker { +.tuningImagePicker { height: 500px; padding: 0; margin: 10px 0 0 -16px; @@ -330,18 +331,18 @@ body { list-style: none; } -.uSkytuningImagePicker ul { +.tuningImagePicker ul { padding: 0; margin: 0; list-style: none; } -.uSkytuningImagePicker li { +.tuningImagePicker li { display: inline-block; margin: 0 0 10px 17px; } -.uSkytuningImagePicker .image-preview { +.tuningImagePicker .image-preview { display: inline-block; width: 110px; height: 60px; @@ -353,21 +354,21 @@ body { border: 2px solid #F3F2F2; } -.uSkytuningImagePicker .image-preview:hover, +.tuningImagePicker .image-preview:hover, .image-preview.selected { border: 2px solid #53a93f; } -.bodyuSkytuningImagePicker { +.bodyTuningImagePicker { padding: 10px 20px 0 15px; } -.uSkytuningImagePicker .modal-dialog { +.tuningImagePicker .modal-dialog { width: 618px; font-weight: normal; } -.uSkytuningImagePicker h3 { +.tuningImagePicker h3 { margin: 0 0 10px 17px; font-family: sans-serif; font-size: 18px; @@ -377,18 +378,18 @@ body { color: #555555; } -.uskytuning-fontfamilypicker .show { +.tuning-fontfamilypicker .show { margin-top: 10px; font-size: 32px; line-height: 34px; color: #242424; } -.uskytuning h4 { +.tuning h4 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; } -.uskytuning .fontFamilyPickerPreview { +.tuning .fontFamilyPickerPreview { float: left; width: 90%; min-height: 50px; @@ -402,29 +403,29 @@ body { border: 1px solid rgba(217, 217, 217, 0.5); } -.uskytuning .fontFamilyPickerPreview span { +.tuning .fontFamilyPickerPreview span { font-size: 32px; line-height: 32px; } -.uskytuning .fontFamilyPickerPreview:hover { +.tuning .fontFamilyPickerPreview:hover { color: #d9d9d9; border: 1px solid #d9d9d9; } -.uskytuning-fontfamilypicker { +.tuning-fontfamilypicker { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 14px; } -.uskytuning .palette { +.tuning .palette { padding: 0; margin: 20px 0 20px 0; list-style: none; } -.uskytuning .palette li { +.tuning .palette li { margin: 10px 0 0 0px; overflow: hidden; clear: both; @@ -432,25 +433,25 @@ body { background-color: rgba(0, 0, 0, 0.12); } -.uskytuning .palette div { +.tuning .palette div { display: inline-block; float: left; border: 1px solid rgba(255, 255, 255, 0.61); } -.uskytuning .palette li:hover { +.tuning .palette li:hover { background-color: rgba(0, 0, 0, 0.4); } -.uskytuning .palette li:hover div { +.tuning .palette li:hover div { border: 1px solid #ffffff; } -.uskytuning .palette li:hover p { +.tuning .palette li:hover p { color: #ffffff; } -.uskytuning .palette div span { +.tuning .palette div span { display: table-cell; width: 30px; height: 30px; @@ -459,7 +460,7 @@ body { border: 1px solid rgba(0, 0, 0, 0.55); } -.uskytuning .palette p { +.tuning .palette p { float: left; margin: 7px 0 0 10px; color: rgba(255, 255, 255, 0.57); diff --git a/src/Umbraco.Web.UI.Client/src/uSkyTuning.loader.js b/src/Umbraco.Web.UI.Client/src/tuning.loader.js similarity index 69% rename from src/Umbraco.Web.UI.Client/src/uSkyTuning.loader.js rename to src/Umbraco.Web.UI.Client/src/tuning.loader.js index 54d43c3d58..be34e6e391 100644 --- a/src/Umbraco.Web.UI.Client/src/uSkyTuning.loader.js +++ b/src/Umbraco.Web.UI.Client/src/tuning.loader.js @@ -5,12 +5,12 @@ LazyLoad.js([ '/Umbraco/lib/angular-bootstrap/ui-bootstrap-tpls-0.10.0.min.js', '/Umbraco/lib/spectrum/spectrum.js', 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js', - '/Umbraco/js/uSkyTuning.config.js', - '/Umbraco/js/uSkyTuning.palettes.js', - '/umbraco/js/uSkyTuning.panel.js' + '/Umbraco/js/tuning.config.js', + '/Umbraco/js/tuning.palettes.js', + '/umbraco/js/tuning.panel.js' ], function () { jQuery(document).ready(function () { - angular.bootstrap(document, ['umbraco.uSkyTuning']); + angular.bootstrap(document, ['umbraco.tuning']); }); } ); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/uSky/config/uSkyTuning.config.js b/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.config.js similarity index 99% rename from src/Umbraco.Web.UI.Client/src/uSky/config/uSkyTuning.config.js rename to src/Umbraco.Web.UI.Client/src/tuning/config/tuning.config.js index a249fd43e9..292923cff5 100644 --- a/src/Umbraco.Web.UI.Client/src/uSky/config/uSkyTuning.config.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.config.js @@ -1,6 +1,6 @@ /*********************************************************************************************************/ -/* uSkyTuning setting panel config */ +/* Tuning setting panel config */ /*********************************************************************************************************/ var tuningConfig = { diff --git a/src/Umbraco.Web.UI.Client/src/uSky/config/uSkyTuning.palettes.js b/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.palettes.js similarity index 99% rename from src/Umbraco.Web.UI.Client/src/uSky/config/uSkyTuning.palettes.js rename to src/Umbraco.Web.UI.Client/src/tuning/config/tuning.palettes.js index 94a2af0a1c..56789d102e 100644 --- a/src/Umbraco.Web.UI.Client/src/uSky/config/uSkyTuning.palettes.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.palettes.js @@ -1,6 +1,6 @@ /*********************************************************************************************************/ -/* uSkyTuning palette tab config */ +/* Tuning palette tab config */ /*********************************************************************************************************/ var tuningPalette = [{ diff --git a/src/Umbraco.Web.UI.Client/src/uSky/lib/slider.directive.js b/src/Umbraco.Web.UI.Client/src/tuning/lib/slider.directive.js similarity index 100% rename from src/Umbraco.Web.UI.Client/src/uSky/lib/slider.directive.js rename to src/Umbraco.Web.UI.Client/src/tuning/lib/slider.directive.js diff --git a/src/Umbraco.Web.UI.Client/src/uSky/lib/spectrum.directive.js b/src/Umbraco.Web.UI.Client/src/tuning/lib/spectrum.directive.js similarity index 100% rename from src/Umbraco.Web.UI.Client/src/uSky/lib/spectrum.directive.js rename to src/Umbraco.Web.UI.Client/src/tuning/lib/spectrum.directive.js diff --git a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.baseStyles.less b/src/Umbraco.Web.UI.Client/src/tuning/tuning.baseStyles.less similarity index 100% rename from src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.baseStyles.less rename to src/Umbraco.Web.UI.Client/src/tuning/tuning.baseStyles.less diff --git a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.controller.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js similarity index 93% rename from src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.controller.js rename to src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js index 8bf42f2946..24fdfaa8b9 100644 --- a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.controller.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js @@ -1,13 +1,13 @@ /*********************************************************************************************************/ -/* uSkyTuning panel app and controller */ +/* tuning panel app and controller */ /*********************************************************************************************************/ -// uSkyTuning main app -angular.module("umbraco.uSkyTuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.slider']) +// tuning main app +angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.slider']) // panel main controller -.controller("Umbraco.uSkyTuningController", function ($scope, $modal, $http, $window) { +.controller("Umbraco.tuningController", function ($scope, $modal, $http, $window, $timeout) { $scope.isOpen = false; $scope.schemaFocus = "body"; @@ -23,7 +23,7 @@ angular.module("umbraco.uSkyTuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui // Load parameters from GetLessParameters and init data of the tuning config var initTuning = function () { - $http.get('/Umbraco/Api/uSkyTuning/GetLessParameters') + $http.get('/Umbraco/Api/tuning/GetLessParameters') .success(function (data) { $.each(tuningConfig.categories, function (indexCategory, category) { @@ -161,7 +161,7 @@ angular.module("umbraco.uSkyTuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui } $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; - $http.post('/Umbraco/Api/uSkyTuning/PostLessParameters', resultParameters, { + $http.post('/Umbraco/Api/tuning/PostLessParameters', resultParameters, { headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, transformRequest: transform }) @@ -206,7 +206,7 @@ angular.module("umbraco.uSkyTuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui $scope.open = function (field) { var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', - controller: 'uskytuning.mediapickercontroller', + controller: 'tuning.mediapickercontroller', resolve: { items: function () { return field.value; @@ -222,7 +222,7 @@ angular.module("umbraco.uSkyTuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui $scope.openFontFamilyPickerModal = function (field) { var modalInstance = $modal.open({ templateUrl: 'fontFamilyPickerModel.html', - controller: 'uskytuning.fontfamilypickercontroller', + controller: 'tuning.fontfamilypickercontroller', resolve: { googleFontFamilies: function () { return $scope.googleFontFamilies; @@ -256,21 +256,29 @@ angular.module("umbraco.uSkyTuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui } // Preload of the google font - $http.get('/Umbraco/Api/uSkyTuning/GetGoogleFont').success(function (data) { + $http.get('/Umbraco/Api/tuning/GetGoogleFont').success(function (data) { $scope.googleFontFamilies = data; }) // Inicial tuning loading initTuning(); + // Wait a while until show the panel + $timeout(function () { + $("#tuningPanel").show(); + }, 0); + $timeout(function () { + $scope.togglePanel(); + }, 100); + }) // Image picker controller -.controller('uskytuning.mediapickercontroller', function ($scope, $modalInstance, items, $http) { +.controller('tuning.mediapickercontroller', function ($scope, $modalInstance, items, $http) { $scope.items = []; - $http.get('/Umbraco/Api/uSkyTuning/GetBackGroundImage') + $http.get('/Umbraco/Api/tuning/GetBackGroundImage') .success(function (data) { $scope.items = data; }); @@ -290,7 +298,7 @@ angular.module("umbraco.uSkyTuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui }) // Font picker controller -.controller('uskytuning.fontfamilypickercontroller', function ($scope, $modalInstance, item, googleFontFamilies, $http) { +.controller('tuning.fontfamilypickercontroller', function ($scope, $modalInstance, item, googleFontFamilies, $http) { $scope.safeFonts = ["Arial, Helvetica", "Impact", "Lucida Sans Unicode", "Tahoma", "Trebuchet MS", "Verdana", "Georgia", "Times New Roman", "Courier New, Courier"]; $scope.fonts = []; diff --git a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.dynamicStyles.less b/src/Umbraco.Web.UI.Client/src/tuning/tuning.dynamicStyles.less similarity index 99% rename from src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.dynamicStyles.less rename to src/Umbraco.Web.UI.Client/src/tuning/tuning.dynamicStyles.less index c9e4b535b1..11d20b7a87 100644 --- a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.dynamicStyles.less +++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.dynamicStyles.less @@ -3,7 +3,7 @@ /* IMPORTE LESS PARAMETERS */ /***************************************************************/ -@import "/Umbraco/assets/less/uSkyTuning.lessParameters.less"; +@import "/Umbraco/assets/less/tuning.lessParameters.less"; /***************************************************************/ /* FONT */ diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js new file mode 100644 index 0000000000..ab08eb4c45 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js @@ -0,0 +1,74 @@ + +/*********************************************************************************************************/ +/* Global function and variable for panel/page com */ +/*********************************************************************************************************/ + +var refrechLayout = function (parameters) { + var string = "less.modifyVars({" + parameters.join(",") + "})"; + eval(string); +} + +var closeIntelTuning = function (tuningModel) { + + if (tuningModel) { + + $('a').removeClass("myDisable"); + $('a').unbind("click.myDisable"); + + $("[tuning-over]").css('outline', 'none'); + $.each(tuningModel.categories, function (key, category) { + $.each(category.sections, function (key, section) { + $.each(section.subSections, function (key, subSection) { + if (subSection.schema) { + $(subSection.schema).unbind(); + $(subSection.schema).removeAttr("tuning-over"); + } + }); + }); + }); + } + +} + +var initIntelTuning = function (tuningModel) { + + if (tuningModel) { + + $('a').addClass("myDisable"); + $('a').bind("click.myDisable", function () { return false; }); + + $.each(tuningModel.categories, function (key, category) { + $.each(category.sections, function (key, section) { + $.each(section.subSections, function (key, subSection) { + if (subSection.schema) { + $(subSection.schema).attr("tuning-over", subSection.schema); + } + }); + }); + }); + + $(document).mousemove(function (e) { + + e.stopPropagation(); + + $("[tuning-over]").css('outline', 'none'); + + var target = $(e.target); + while (target.length > 0 && (target.attr('tuning-over') == undefined || target.attr('tuning-over') == '')) { + target = target.parent(); + } + + if (target.attr('tuning-over') != undefined || target.attr('tuning-over') != '') { + target.unbind(); + target.css('outline', '2px solid blue'); + target.click(function (e) { + e.stopPropagation(); + console.info(target.attr('tuning-over')); + parent.refrechIntelTuning(target.attr('tuning-over')); + }); + } + }); + + } + +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.global.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js similarity index 91% rename from src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.global.js rename to src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js index 41e5acd85f..f084eb938c 100644 --- a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.global.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js @@ -4,9 +4,9 @@ /*********************************************************************************************************/ /* Refresh tuning panel with selected fieds */ -var uSkyRefrechIntelTuning = function (schema) { +var refrechIntelTuning = function (schema) { - var scope = angular.element($("#uSkyTuningPanel")).scope(); + var scope = angular.element($("#tuningPanel")).scope(); var notFound = true; angular.forEach(scope.tuningModel.categories, function (category, key) { diff --git a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.html b/src/Umbraco.Web.UI.Client/src/tuning/tuning.html similarity index 94% rename from src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.html rename to src/Umbraco.Web.UI.Client/src/tuning/tuning.html index e99bef0a6d..5f99909dcd 100644 --- a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.html +++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.html @@ -4,15 +4,15 @@ - + - + -
+
@@ -172,8 +172,8 @@
- + diff --git a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.lessParameters.less b/src/Umbraco.Web.UI.Client/src/tuning/tuning.lessParameters.less similarity index 100% rename from src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.lessParameters.less rename to src/Umbraco.Web.UI.Client/src/tuning/tuning.lessParameters.less diff --git a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.front.js b/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.front.js deleted file mode 100644 index f4387fbe3f..0000000000 --- a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.front.js +++ /dev/null @@ -1,67 +0,0 @@ - -/*********************************************************************************************************/ -/* Global function and variable for panel/page com */ -/*********************************************************************************************************/ - -var refrechLayout = function (parameters) { - var string = "less.modifyVars({" + parameters.join(",") + "})"; - eval(string); -} - -var closeIntelTuning = function (tunningModel) { - - $('a').removeClass("myDisable"); - $('a').unbind("click.myDisable"); - - $("[uSky-over]").css('outline', 'none'); - $.each(tunningModel.categories, function (key, category) { - $.each(category.sections, function (key, section) { - $.each(section.subSections, function (key, subSection) { - if (subSection.schema) { - $(subSection.schema).unbind(); - $(subSection.schema).removeAttr("uSky-over"); - } - }); - }); - }); - -} - -var initIntelTuning = function (tunningModel) { - - $('a').addClass("myDisable"); - $('a').bind("click.myDisable", function () { return false; }); - - $.each(tunningModel.categories, function (key, category) { - $.each(category.sections, function (key, section) { - $.each(section.subSections, function (key, subSection) { - if (subSection.schema) { - $(subSection.schema).attr("uSky-over", subSection.schema); - } - }); - }); - }); - - $(document).mousemove(function (e) { - - e.stopPropagation(); - - $("[uSky-over]").css('outline', 'none'); - - var target = $(e.target); - while (target.length > 0 && (target.attr('uSky-over') == undefined || target.attr('uSky-over') == '')) { - target = target.parent(); - } - - if (target.attr('uSky-over') != undefined || target.attr('uSky-over') != '') { - target.unbind(); - target.css('outline', '2px solid blue'); - target.click(function (e) { - e.stopPropagation(); - console.info(target.attr('uSky-over')); - parent.uSkyRefrechIntelTuning(target.attr('uSky-over')); - }); - } - }); - -} \ 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 23f3a4049f..6d7f3ef580 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 @@ -266,6 +266,12 @@ function ContentEditController($scope, $routeParams, $q, $timeout, $window, appS $window.open('dialogs/preview.aspx?id=' + data.id, 'umbpreview'); }); }; + + $scope.tuning = function (content) { + $scope.save().then(function (data) { + $window.open('Views/tuning/tuning.html?id=' + data.id, 'umbtuning'); + }); + }; /** this method is called for all action buttons and then we proxy based on the btn definition */ $scope.performAction = function(btn) { diff --git a/src/Umbraco.Web.UI.Client/src/views/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/content/edit.html index e3c079231a..1bbb0eda40 100644 --- a/src/Umbraco.Web.UI.Client/src/views/content/edit.html +++ b/src/Umbraco.Web.UI.Client/src/views/content/edit.html @@ -39,6 +39,13 @@
+ +
+ + Tuning page + +
+
Preview page diff --git a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj index a6a7481249..cb5365fd6a 100644 --- a/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj +++ b/src/Umbraco.Web.UI/Umbraco.Web.UI.csproj @@ -537,6 +537,7 @@ treeInit.aspx + diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.config.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.config.js new file mode 100644 index 0000000000..292923cff5 --- /dev/null +++ b/src/Umbraco.Web.UI/Umbraco/js/tuning.config.js @@ -0,0 +1,1345 @@ + +/*********************************************************************************************************/ +/* Tuning setting panel config */ +/*********************************************************************************************************/ + +var tuningConfig = { + categories: [{ + name: "Background", + sections: [{ + name: "Main", + subSections: [{ + name: "Body", + schema: "body", + fields: [ + { + name: "Color", + alias: "backgroundBodyColor", + description: "Background body color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBodyBackground" + }, + { + name: "Gradient Color", + alias: "backgroundBodyGradientColor", + description: "Background body gradient color", + type: "colorPicker", + value: "" + }, + { + name: "Image/Pattern", + alias: "backgroundBodyImageOrPattern", + description: "Background body image/pattern", + type: "bgImagePicker", + value: "" + }, + { + name: "Position", + alias: "backgroundBodyPosition", + description: "Background body position", + type: "bgPositionPicker", + value: "" + }, + { + name: "Cover", + alias: "backgroundBodyCover", + description: "Background body cover", + type: "checkbox", + value: "" + }, + { + name: "Repeat", + alias: "backgroundBodyRepeat", + description: "Background body repeat", + type: "bgRepeatPicker", + value: "" + }, + { + name: "Attachment", + alias: "backgroundBodyAttachment", + description: "Background body attachment", + type: "bgAttachmentPicker", + value: "" + } + ] + }, + { + name: "Main", + schema: ".content", + fields: [ + { + name: "Color", + alias: "backgroundMainColumnColor", + description: "Background main column color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorMainColumnBackground" + }, + { + name: "Gradient Color", + alias: "backgroundMainColumnGradientColor", + description: "Background main column gradient color", + type: "colorPicker", + value: "" + }, + { + name: "Image/Pattern", + alias: "backgroundMainColumnImageOrPattern", + description: "Background main column image/pattern", + type: "bgImagePicker", + value: "" + }, + { + name: "Position", + alias: "backgroundMainColumnPosition", + description: "Background main column position", + type: "bgPositionPicker", + value: "" + }, + { + name: "Cover", + alias: "backgroundMainColumnCover", + description: "Background MainColumn cover", + type: "checkbox", + value: "" + }, + { + name: "Repeat", + alias: "backgroundMainColumnRepeat", + description: "Background main column repeat", + type: "bgRepeatPicker", + value: "" + }, + { + name: "Attachment", + alias: "backgroundMainColumnAttachment", + description: "Background main column attachment", + type: "bgAttachmentPicker", + value: "" + } + ] + }, + { + name: "Header", + schema: "header", + fields: [ + { + name: "Color", + alias: "backgroundHeaderColor", + description: "Background header color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorHeaderBackground" + }, + { + name: "Gradient Color", + alias: "backgroundHeaderGradientColor", + description: "Background header gradient color", + type: "colorPicker", + value: "" + }, + { + name: "Image/Pattern", + alias: "backgroundHeaderImageOrPattern", + description: "Background header image/pattern", + type: "bgImagePicker", + value: "" + }, + { + name: "Position", + alias: "backgroundHeaderPosition", + description: "Background header position", + type: "bgPositionPicker", + value: "" + }, + { + name: "Cover", + alias: "backgroundHeaderCover", + description: "Background Header cover", + type: "checkbox", + value: "" + }, + { + name: "Repeat", + alias: "backgroundHeaderRepeat", + description: "Background header repeat", + type: "bgRepeatPicker", + value: "" + }, + { + name: "Attachment", + alias: "backgroundHeaderAttachment", + description: "Background header attachment", + type: "bgAttachmentPicker", + value: "" + } + ] + }, + { + name: "Footer", + schema: ".footer", + fields: [ + { + name: "Color", + alias: "backgroundFooterColor", + description: "Background footer color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorHeaderBackground" + }, + { + name: "Gradient Color", + alias: "backgroundFooterGradientColor", + description: "Background footer gradient color", + type: "colorPicker", + value: "" + }, + { + name: "Image/Pattern", + alias: "backgroundFooterImageOrPattern", + description: "Background footer image/pattern", + type: "bgImagePicker", + value: "" + }, + { + name: "Position", + alias: "backgroundFooterPosition", + description: "Background footer position", + type: "bgPositionPicker", + value: "" + }, + { + name: "Cover", + alias: "backgroundFooterCover", + description: "Background Footer cover", + type: "checkbox", + value: "" + }, + { + name: "Repeat", + alias: "backgroundFooterRepeat", + description: "Background footer repeat", + type: "bgRepeatPicker", + value: "" + }, + { + name: "Attachment", + alias: "backgroundFooterAttachment", + description: "Background footer attachment", + type: "bgAttachmentPicker", + value: "" + } + ] + }] + }] + }, + { + name: "Styling", + sections: [{ + name: "General", + subSections: [{ + name: "Main", + fields: [{ + name: "Layout", + alias: "stylingMainColumnBoxed", + description: "Main column layout", + type: "layoutPicker", + value: "boxed" + }, + { + name: "Header Top Margin", + alias: "stylingHeaderTopMargin", + description: "Header top margin", + type: "slider", + min: "0", + max: "100", + value: "0" + }, + { + name: "Main Top Margin", + alias: "stylingMainColumnTopMargin", + description: "Main column top margin", + type: "slider", + min: "0", + max: "100", + value: "0" + }, + { + name: "Footer Top Margin", + alias: "stylingFooterTopMargin", + description: "Footer top margin", + type: "slider", + min: "0", + max: "100", + value: "0" + }, + { + name: "Footer Bottom Margin", + alias: "stylingFooterBottompMargin", + description: "Footer Bottom margin", + type: "slider", + min: "0", + max: "100", + value: "0" + }, + { + name: "Radius", + alias: "stylingMainColumnRadius", + description: "Main column radius", + type: "slider", + min: "0", + max: "20", + value: "0" + }, + { + name: "Shadow", + alias: "stylingMainColumnShadow", + description: "Main column shadow", + type: "slider", + min: "0", + max: "100", + value: "0" + }] + }, + { + name: "Header", + fields: [{ + name: "Top Border Size", + alias: "stylingHeaderTopBorderSize", + description: "Header top border size", + type: "slider", + min: "0", + max: "50", + value: "0" + }, + { + name: "Bottom Border Size", + alias: "stylingHeaderBottomBorderSize", + description: "Header bottom border size", + type: "slider", + min: "0", + max: "50", + value: "0" + }, + { + name: "Top Border color", + alias: "stylingHeaderTopBorderColor", + description: "Header top border color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }, + { + name: "Bottom Border color", + alias: "stylingHeaderBottomBorderColor", + description: "Header bottom border color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }, + { + name: "Min Height", + alias: "stylingHeaderMinHeight", + description: "Header min height", + type: "slider", + min: "0", + max: "500", + value: "0" + }, + { + name: "Logo Top Margin", + alias: "stylingHeaderLogoTopMargin", + description: "Header logo top margin", + type: "slider", + min: "-100", + max: "100", + value: "0" + }] + }, + { + name: "Navigation", + schema: ".navbar-collapse", + fields: [{ + name: "Display", + alias: "stylingNavDisplay", + description: "Navigation display", + type: "displayPicker", + value: "" + }, + { + name: "Background Color", + alias: "stylingNavBackgroundColor", + description: "Navigation background color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorNavBackground" + }, + { + name: "Background Color L2", + alias: "stylingNavBackgroundDdl", + description: "Navigation background color for Level 2", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorNavBackground" + }, + { + name: "Active Background Color", + alias: "stylingNavBackgroundActiveColor", + description: "Navigation active background color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }, + { + name: "Margin Top", + alias: "stylingNavMarginTop", + description: "Navigation Margin Top", + type: "slider", + min: "-200", + max: "200", + value: "0" + }, + { + name: "Radius", + alias: "stylingNavRadius", + description: "Navigation radius", + type: "slider", + min: "0", + max: "20", + value: "0" + }, + { + name: "Radius Only Top", + alias: "stylingNavRadiusOnlyTop", + description: "Navigation radius only top", + type: "checkbox", + value: "" + }, + { + name: "Active Top Border Size", + alias: "stylingNavItemTopBorderActiveSize", + description: "Navigation active top border size", + type: "slider", + min: "0", + max: "50", + value: "0" + }, + { + name: "Active Bottom Border Size", + alias: "stylingNavItemBottomBorderActiveSize", + description: "Navigation active bottom border size", + type: "slider", + min: "0", + max: "50", + value: "0" + }, + { + name: "Active Top Border Color", + alias: "stylingNavItemTopBorderActiveColor", + description: "Navigation active top border color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }, + { + name: "Active Bottom Border Color", + alias: "stylingNavItemBottomBorderActiveColor", + description: "Navigation active bottom border color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }] + }, + { + name: "Social Links", + fields: [{ + name: "Display", + alias: "stySocialDisplay", + description: "Social links list display", + type: "displayPicker", + value: "" + }, + { + name: "Background Color", + alias: "stySocialBackgroundColor", + description: "Social links list background color", + type: "colorPicker", + value: "" + }, + { + name: "Top Margin", + alias: "stySocialTopMargin", + description: "Social links list top margin", + type: "slider", + min: "0", + max: "500", + value: "0" + }, + { + name: "Border Top Size", + alias: "stySocialBorderTopSize", + description: "Social links list border top size", + type: "slider", + min: "0", + max: "50", + value: "0" + }, + { + name: "Border Bottom Size", + alias: "stySocialBorderBottomSize", + description: "Social links list border bottom size", + type: "slider", + min: "0", + max: "50", + value: "0" + }, + { + name: "Border Top Color", + alias: "stySocialBorderTopColor", + description: "Social links list border top color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }, + { + name: "Border Bottom Color", + alias: "stySocialBorderBottomColor", + description: "Social links list border bottom color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }] + }, + { + name: "Boxes", + fields: [{ + name: "Background Color", + alias: "stylingBoxesBackgroundColor", + description: "Boxes background color", + type: "colorPicker", + value: "" + }, + { + name: "Min Height", + alias: "stylingBoxesMinHeight", + description: "Boxes min height", + type: "slider", + min: "0", + max: "500", + value: "0" + }, + { + name: "Radius", + alias: "stylingBoxesRadius", + description: "Boxes radius", + type: "slider", + min: "0", + max: "20", + value: "0" + }, + { + name: "Border Size", + alias: "stylingBoxesBorderSize", + description: "Boxes border size", + type: "slider", + min: "0", + max: "50", + value: "0" + }, + { + name: "Border Color", + alias: "stylingBoxesBorderColor", + description: "Boxes border color", + type: "colorPicker", + value: "" + }] + }, + { + name: "Thumbnails", + fields: [{ + name: "Background Color", + alias: "stylingThumbnailsBackgroundColor", + description: "Thumbnails background color", + type: "colorPicker", + value: "" + }, + { + name: "Min Height", + alias: "stylingThumbnailsMinHeight", + description: "Thumbnails min height", + type: "slider", + min: "0", + max: "500", + value: "0" + }, + { + name: "Radius", + alias: "stylingThumbnailsRadius", + description: "Thumbnails radius", + type: "slider", + min: "0", + max: "20", + value: "0" + }, + { + name: "Border Size", + alias: "stylingThumbnailsBorderSize", + description: "Thumbnails border size", + type: "slider", + min: "0", + max: "50", + value: "0" + }, + { + name: "Border Color", + alias: "stylingThumbnailsBorderColor", + description: "Thumbnails border color", + type: "colorPicker", + value: "" + }] + }] + }] + }, + { + name: "Fonts", + sections: [{ + name: "Main", + subSections: [{ + name: "Body", + schema: "p", + fields: [{ + name: "Color", + alias: "FontBodyColor", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontDefault" + }, + { + name: "Size", + alias: "FontBodySize", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Line Height", + alias: "FontBodyLineHeight", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Family", + alias: "FontBodyFamily", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + }] + }, + { + name: "Navigation", + fields: [{ + name: "Font Color", + alias: "FontNavFontColor", + description: "Navigation font color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontRev" + }, + { + name: "Active Font Color", + alias: "FontNavFontActiveColor", + description: "Navigation active font color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontRevActive" + }, + { + name: "Size", + alias: "FontNavSize", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Line Height", + alias: "FontNavLineHeight", + description: "Navigation line height", + type: "slider", + min: "20", + max: "200", + value: "0" + }, + { + name: "Family", + alias: "FontNavFamily", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + }] + }, + { + name: "Social Link", + fields: [{ + name: "Font Color", + alias: "FontSocialFontColor", + description: "Social links list font color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontRev" + }, + { + name: "Font Color Hover", + alias: "FontSocialFontColorHover", + description: "Social links list font color hover", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontRevActive" + }, + { + name: "Font Size", + alias: "FontSocialFontSize", + description: "Social links list font size", + type: "slider", + min: "8", + max: "36", + value: "0" + }, + { + name: "Line Height", + alias: "FontSocialLineHeight", + description: "Social links list line height", + type: "slider", + min: "20", + max: "200", + value: "0" + }, + { + name: "Family", + alias: "FontSocialFamily", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + } + ] + }, + { + name: "H1", + schema: "h1", + fields: [{ + name: "Color", + alias: "FontH1Color", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }, + { + name: "Size", + alias: "FontH1Size", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Line Height", + alias: "FontH1LineHeight", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Top margin", + alias: "FontH1TopMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Bottom margin", + alias: "FontH1BottomMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Family", + alias: "FontH1Family", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + }] + }, { + name: "H2", + schema: "h2", + fields: [{ + name: "Color", + alias: "FontH2Color", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }, + { + name: "Size", + alias: "FontH2Size", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Line Height", + alias: "FontH2LineHeight", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Top margin", + alias: "FontH2TopMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Bottom margin", + alias: "FontH2BottomMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Family", + alias: "FontH2Family", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + }] + }, { + name: "H3", + schema: "h3", + fields: [{ + name: "Color", + alias: "FontH3Color", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }, + { + name: "Size", + alias: "FontH3Size", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Line Height", + alias: "FontH3LineHeight", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Top margin", + alias: "FontH3TopMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Bottom margin", + alias: "FontH3BottomMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Family", + alias: "FontH3Family", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + }] + }, { + name: "H4", + schema: "h4", + fields: [{ + name: "Color", + alias: "FontH4Color", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontDefault" + }, + { + name: "Size", + alias: "FontH4Size", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Line Height", + alias: "FontH4LineHeight", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Top margin", + alias: "FontH4TopMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Bottom margin", + alias: "FontH4BottomMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Family", + alias: "FontH4Family", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + }] + }, { + name: "H5", + schema: "h5", + fields: [{ + name: "Color", + alias: "FontH5Color", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontDefault" + }, + { + name: "Size", + alias: "FontH5Size", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Line Height", + alias: "FontH5LineHeight", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Top margin", + alias: "FontH5TopMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Bottom margin", + alias: "FontH5BottomMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Family", + alias: "FontH5Family", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + }] + }, { + name: "H6", + schema: "h6", + fields: [{ + name: "Color", + alias: "FontH6Color", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontDefault" + }, + { + name: "Size", + alias: "FontH6Size", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Line Height", + alias: "FontH6LineHeight", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Top margin", + alias: "FontH6TopMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Bottom margin", + alias: "FontH6BottomMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Family", + alias: "FontH6Family", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + }] + }, { + name: "Medium", + fields: [{ + name: "Color", + alias: "FontMediumColor", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontDefault" + }, { + name: "Size", + alias: "FontMediumSize", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Line Height", + alias: "FontMediumLineHeight", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Top margin", + alias: "FontMediumTopMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Bottom margin", + alias: "FontMediumBottomMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Family", + alias: "FontMediumFamily", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + }] + }, { + name: "Highlighted", + fields: [{ + name: "Color", + alias: "FontHighlightedColor", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontRev" + }, + { + name: "Background Color", + alias: "FontHighlightedBackgroundColor", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }, + { + name: "Family", + alias: "FontHighlightedFamily", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + }] + }, { + name: "Big", + fields: [{ + name: "Color", + alias: "FontBigColor", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }, + { + name: "Size", + alias: "FontBigSize", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Line Height", + alias: "FontBigLineHeight", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Top margin", + alias: "FontBigTopMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Bottom margin", + alias: "FontBigBottomMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Family", + alias: "FontBigFamily", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + }] + }, { + name: "Button", + fields: [{ + name: "Color", + alias: "FontButtonColor", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontRev" + }, + { + name: "Background Color", + alias: "FontButtonBackgroundColor", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }, + { + name: "Color Hover", + alias: "FontButtonColorHover", + description: "", + type: "colorPicker", + value: "" + }, + { + name: "Background Color Hover", + alias: "FontButtonBackgroundColorHover", + description: "", + type: "colorPicker", + value: "" + }, + { + name: "Size", + alias: "FontButtonSize", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Line Height", + alias: "FontButtonLineHeight", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Padding", + alias: "FontButtonPadding", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Family", + alias: "FontButtonFamily", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + }] + }, + { + name: "Color2", + fields: [{ + name: "Color", + alias: "FontColor2Color", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }] + }, + { + name: "Color3", + fields: [{ + name: "Color", + alias: "FontColor3Color", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontRev" + }] + }, + { + name: "Color4", + fields: [{ + name: "Color", + alias: "FontColor4Color", + description: "", + type: "colorPicker", + value: "" + }] + }, + { + name: "Link", + fields: [{ + name: "Color", + alias: "FontLinkColor", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }, { + name: "Color Hover", + alias: "FontLinkColorHover", + description: "", + type: "colorPicker", + value: "" + }] + }] + }] + }] +} diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js new file mode 100644 index 0000000000..ab08eb4c45 --- /dev/null +++ b/src/Umbraco.Web.UI/Umbraco/js/tuning.front.js @@ -0,0 +1,74 @@ + +/*********************************************************************************************************/ +/* Global function and variable for panel/page com */ +/*********************************************************************************************************/ + +var refrechLayout = function (parameters) { + var string = "less.modifyVars({" + parameters.join(",") + "})"; + eval(string); +} + +var closeIntelTuning = function (tuningModel) { + + if (tuningModel) { + + $('a').removeClass("myDisable"); + $('a').unbind("click.myDisable"); + + $("[tuning-over]").css('outline', 'none'); + $.each(tuningModel.categories, function (key, category) { + $.each(category.sections, function (key, section) { + $.each(section.subSections, function (key, subSection) { + if (subSection.schema) { + $(subSection.schema).unbind(); + $(subSection.schema).removeAttr("tuning-over"); + } + }); + }); + }); + } + +} + +var initIntelTuning = function (tuningModel) { + + if (tuningModel) { + + $('a').addClass("myDisable"); + $('a').bind("click.myDisable", function () { return false; }); + + $.each(tuningModel.categories, function (key, category) { + $.each(category.sections, function (key, section) { + $.each(section.subSections, function (key, subSection) { + if (subSection.schema) { + $(subSection.schema).attr("tuning-over", subSection.schema); + } + }); + }); + }); + + $(document).mousemove(function (e) { + + e.stopPropagation(); + + $("[tuning-over]").css('outline', 'none'); + + var target = $(e.target); + while (target.length > 0 && (target.attr('tuning-over') == undefined || target.attr('tuning-over') == '')) { + target = target.parent(); + } + + if (target.attr('tuning-over') != undefined || target.attr('tuning-over') != '') { + target.unbind(); + target.css('outline', '2px solid blue'); + target.click(function (e) { + e.stopPropagation(); + console.info(target.attr('tuning-over')); + parent.refrechIntelTuning(target.attr('tuning-over')); + }); + } + }); + + } + +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.loader.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.loader.js new file mode 100644 index 0000000000..be34e6e391 --- /dev/null +++ b/src/Umbraco.Web.UI/Umbraco/js/tuning.loader.js @@ -0,0 +1,16 @@ +LazyLoad.js([ + '/Umbraco/lib/jquery/jquery-2.0.3.min.js', + '/Umbraco/lib/jquery/jquery-ui-1.10.4.custom.min.js', + '/Umbraco/lib/angular/1.1.5/angular.min.js', + '/Umbraco/lib/angular-bootstrap/ui-bootstrap-tpls-0.10.0.min.js', + '/Umbraco/lib/spectrum/spectrum.js', + 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js', + '/Umbraco/js/tuning.config.js', + '/Umbraco/js/tuning.palettes.js', + '/umbraco/js/tuning.panel.js' +], function () { + jQuery(document).ready(function () { + angular.bootstrap(document, ['umbraco.tuning']); + }); +} +); \ No newline at end of file diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.palettes.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.palettes.js new file mode 100644 index 0000000000..56789d102e --- /dev/null +++ b/src/Umbraco.Web.UI/Umbraco/js/tuning.palettes.js @@ -0,0 +1,210 @@ + +/*********************************************************************************************************/ +/* Tuning palette tab config */ +/*********************************************************************************************************/ + +var tuningPalette = [{ + name: "orange", + mainColor: 'rgb(230, 126, 34)', + colors: [ + { alias: "backgroundBodyColor", value: "rgb(239, 239, 239)" }, + { alias: "backgroundBodyGradientColor", value: "" }, + { alias: "backgroundMainColumnColor", value: "rgb(246, 246, 246)" }, + { alias: "backgroundMainColumnGradientColor", value: "" }, + { alias: "backgroundHeaderColor", value: "rgb(51, 51, 51)" }, + { alias: "backgroundHeaderGradientColor", value: "" }, + { alias: "backgroundFooterColor", value: "rgb(51, 51, 51)" }, + { alias: "backgroundFooterGradientColor", value: "" }, + { alias: "stylingHeaderTopBorderColor", value: "rgb(230, 126, 34)" }, + { alias: "stylingHeaderBottomBorderColor", value: "rgb(230, 126, 34)" }, + { alias: "stylingNavBackgroundColor", value: "" }, + { alias: "stylingNavBackgroundDdl", value: "rgba(97, 97, 97, 0.85)" }, + { alias: "stylingNavBackgroundActiveColor", value: "rgb(230, 126, 34)" }, + { alias: "stylingNavItemTopBorderActiveColor", value: "rgb(230, 126, 34)" }, + { alias: "stylingNavItemBottomBorderActiveColor", value: "rgb(230, 126, 34)" }, + { alias: "stySocialBackgroundColor", value: "rgba(255, 255, 255, 0.08)" }, + { alias: "stySocialBorderTopColor", value: "rgb(230, 126, 34)" }, + { alias: "stySocialBorderBottomColor", value: "rgb(230, 126, 34)" }, + { alias: "stylingBoxesBackgroundColor", value: "" }, + { alias: "stylingBoxesBorderColor", value: "" }, + { alias: "stylingThumbnailsBackgroundColor", value: "" }, + { alias: "stylingThumbnailsBorderColor", value: "" }, + { alias: "FontBodyColor", value: "" }, + { alias: "FontNavFontColor", value: "rgba(255, 255, 255, 0.84)" }, + { alias: "FontNavFontActiveColor", value: "rgb(255, 255, 255)" }, + { alias: "FontSocialFontColor", value: "rgba(255, 255, 255, 0.6)" }, + { alias: "FontSocialFontColorHover", value: "rgb(255, 255, 255)" }, + { alias: "FontH1Color", value: "rgb(230, 126, 34)" }, + { alias: "FontH2Color", value: "rgb(230, 126, 34)" }, + { alias: "FontH3Color", value: "rgb(230, 126, 34)" }, + { alias: "FontH4Color", value: "" }, + { alias: "FontH5Color", value: "" }, + { alias: "FontH6Color", value: "" }, + { alias: "FontMediumColor", value: "" }, + { alias: "FontHighlightedColor", value: "" }, + { alias: "FontHighlightedBackgroundColor", value: "rgb(230, 126, 34)" }, + { alias: "FontBigColor", value: "rgb(230, 126, 34)" }, + { alias: "FontButtonColor", value: "rgba(255, 255, 255, 0.92)" }, + { alias: "FontButtonBackgroundColor", value: "rgb(230, 126, 34)" }, + { alias: "FontButtonColorHover", value: "rgba(255, 255, 255, 0.55)" }, + { alias: "FontButtonBackgroundColorHover", value: "rgba(230, 126, 34, 0.74)" }, + { alias: "FontColor2Color", value: "rgb(230, 126, 34)" }, + { alias: "FontColor3Color", value: "rgba(253, 251, 251, 0.91)" }, + { alias: "FontColor4Color", value: "rgb(170, 170, 170)" }, + { alias: "FontLinkColor", value: "rgb(230, 126, 34)" }, + { alias: "FontLinkColorHover", value: "rgba(230, 126, 34, 0.84)" } + ] +}, { + name: "red", + mainColor: 'rgb(158, 22, 23)', + colors: [ + { alias: "backgroundBodyColor", value: "rgb(239, 239, 239)" }, + { alias: "backgroundBodyGradientColor", value: "" }, + { alias: "backgroundMainColumnColor", value: "rgb(246, 246, 246)" }, + { alias: "backgroundMainColumnGradientColor", value: "" }, + { alias: "backgroundHeaderColor", value: "rgb(51, 51, 51)" }, + { alias: "backgroundHeaderGradientColor", value: "" }, + { alias: "backgroundFooterColor", value: "rgb(51, 51, 51)" }, + { alias: "backgroundFooterGradientColor", value: "" }, + { alias: "stylingHeaderTopBorderColor", value: "rgb(158, 22, 23)" }, + { alias: "stylingHeaderBottomBorderColor", value: "rgb(158, 22, 23)" }, + { alias: "stylingNavBackgroundColor", value: "" }, + { alias: "stylingNavBackgroundDdl", value: "rgba(97, 97, 97, 0.85)" }, + { alias: "stylingNavBackgroundActiveColor", value: "rgb(158, 22, 23)" }, + { alias: "stylingNavItemTopBorderActiveColor", value: "rgb(158, 22, 23)" }, + { alias: "stylingNavItemBottomBorderActiveColor", value: "rgb(158, 22, 23)" }, + { alias: "stySocialBackgroundColor", value: "rgba(255, 255, 255, 0.08)" }, + { alias: "stySocialBorderTopColor", value: "rgb(158, 22, 23)" }, + { alias: "stySocialBorderBottomColor", value: "rgb(158, 22, 23)" }, + { alias: "stylingBoxesBackgroundColor", value: "" }, + { alias: "stylingBoxesBorderColor", value: "" }, + { alias: "stylingThumbnailsBackgroundColor", value: "" }, + { alias: "stylingThumbnailsBorderColor", value: "" }, + { alias: "FontBodyColor", value: "" }, + { alias: "FontNavFontColor", value: "rgba(255, 255, 255, 0.84)" }, + { alias: "FontNavFontActiveColor", value: "rgb(255, 255, 255)" }, + { alias: "FontSocialFontColor", value: "rgba(255, 255, 255, 0.6)" }, + { alias: "FontSocialFontColorHover", value: "rgb(255, 255, 255)" }, + { alias: "FontH1Color", value: "rgb(158, 22, 23)" }, + { alias: "FontH2Color", value: "rgb(158, 22, 23)" }, + { alias: "FontH3Color", value: "rgb(158, 22, 23)" }, + { alias: "FontH4Color", value: "" }, + { alias: "FontH5Color", value: "" }, + { alias: "FontH6Color", value: "" }, + { alias: "FontMediumColor", value: "" }, + { alias: "FontHighlightedColor", value: "" }, + { alias: "FontHighlightedBackgroundColor", value: "rgb(158, 22, 23)" }, + { alias: "FontBigColor", value: "rgb(158, 22, 23)" }, + { alias: "FontButtonColor", value: "rgba(255, 255, 255, 0.92)" }, + { alias: "FontButtonBackgroundColor", value: "rgb(158, 22, 23)" }, + { alias: "FontButtonColorHover", value: "rgba(255, 255, 255, 0.55)" }, + { alias: "FontButtonBackgroundColorHover", value: "rgba(158, 22, 23, 0.74)" }, + { alias: "FontColor2Color", value: "rgb(158, 22, 23)" }, + { alias: "FontColor3Color", value: "rgba(253, 251, 251, 0.91)" }, + { alias: "FontColor4Color", value: "rgb(170, 170, 170)" }, + { alias: "FontLinkColor", value: "rgb(158, 22, 23)" }, + { alias: "FontLinkColorHover", value: "rgba(158, 22, 23, 0.84)" } + ] +}, { + name: "green", + mainColor: 'rgb(138, 198, 10)', + colors: [ + { alias: "backgroundBodyColor", value: "rgb(239, 239, 239)" }, + { alias: "backgroundBodyGradientColor", value: "" }, + { alias: "backgroundMainColumnColor", value: "rgb(246, 246, 246)" }, + { alias: "backgroundMainColumnGradientColor", value: "" }, + { alias: "backgroundHeaderColor", value: "rgb(51, 51, 51)" }, + { alias: "backgroundHeaderGradientColor", value: "" }, + { alias: "backgroundFooterColor", value: "rgb(51, 51, 51)" }, + { alias: "backgroundFooterGradientColor", value: "" }, + { alias: "stylingHeaderTopBorderColor", value: "rgb(138, 198, 10)" }, + { alias: "stylingHeaderBottomBorderColor", value: "rgb(138, 198, 10)" }, + { alias: "stylingNavBackgroundColor", value: "" }, + { alias: "stylingNavBackgroundDdl", value: "rgba(97, 97, 97, 0.85)" }, + { alias: "stylingNavBackgroundActiveColor", value: "rgb(138, 198, 10)" }, + { alias: "stylingNavItemTopBorderActiveColor", value: "rgb(138, 198, 10)" }, + { alias: "stylingNavItemBottomBorderActiveColor", value: "rgb(138, 198, 10)" }, + { alias: "stySocialBackgroundColor", value: "rgba(255, 255, 255, 0.08)" }, + { alias: "stySocialBorderTopColor", value: "rgb(138, 198, 10)" }, + { alias: "stySocialBorderBottomColor", value: "rgb(138, 198, 10)" }, + { alias: "stylingBoxesBackgroundColor", value: "" }, + { alias: "stylingBoxesBorderColor", value: "" }, + { alias: "stylingThumbnailsBackgroundColor", value: "" }, + { alias: "stylingThumbnailsBorderColor", value: "" }, + { alias: "FontBodyColor", value: "" }, + { alias: "FontNavFontColor", value: "rgba(255, 255, 255, 0.84)" }, + { alias: "FontNavFontActiveColor", value: "rgb(255, 255, 255)" }, + { alias: "FontSocialFontColor", value: "rgba(255, 255, 255, 0.6)" }, + { alias: "FontSocialFontColorHover", value: "rgb(255, 255, 255)" }, + { alias: "FontH1Color", value: "rgb(138, 198, 10)" }, + { alias: "FontH2Color", value: "rgb(138, 198, 10)" }, + { alias: "FontH3Color", value: "rgb(138, 198, 10)" }, + { alias: "FontH4Color", value: "" }, + { alias: "FontH5Color", value: "" }, + { alias: "FontH6Color", value: "" }, + { alias: "FontMediumColor", value: "" }, + { alias: "FontHighlightedColor", value: "" }, + { alias: "FontHighlightedBackgroundColor", value: "rgb(138, 198, 10)" }, + { alias: "FontBigColor", value: "rgb(138, 198, 10)" }, + { alias: "FontButtonColor", value: "rgba(255, 255, 255, 0.92)" }, + { alias: "FontButtonBackgroundColor", value: "rgb(138, 198, 10)" }, + { alias: "FontButtonColorHover", value: "rgba(255, 255, 255, 0.55)" }, + { alias: "FontButtonBackgroundColorHover", value: "rgba(138, 198, 10, 0.74)" }, + { alias: "FontColor2Color", value: "rgb(138, 198, 10)" }, + { alias: "FontColor3Color", value: "rgba(253, 251, 251, 0.91)" }, + { alias: "FontColor4Color", value: "rgb(170, 170, 170)" }, + { alias: "FontLinkColor", value: "rgb(138, 198, 10)" }, + { alias: "FontLinkColorHover", value: "rgba(138, 198, 10, 0.84)" } + ] +}, { + name: "blue", + mainColor: 'rgb(24, 94, 101)', + colors: [ + { alias: "backgroundBodyColor", value: "rgb(239, 239, 239)" }, + { alias: "backgroundBodyGradientColor", value: "" }, + { alias: "backgroundMainColumnColor", value: "rgb(246, 246, 246)" }, + { alias: "backgroundMainColumnGradientColor", value: "" }, + { alias: "backgroundHeaderColor", value: "rgb(51, 51, 51)" }, + { alias: "backgroundHeaderGradientColor", value: "" }, + { alias: "backgroundFooterColor", value: "rgb(51, 51, 51)" }, + { alias: "backgroundFooterGradientColor", value: "" }, + { alias: "stylingHeaderTopBorderColor", value: "rgb(24, 94, 101)" }, + { alias: "stylingHeaderBottomBorderColor", value: "rgb(24, 94, 101)" }, + { alias: "stylingNavBackgroundColor", value: "" }, + { alias: "stylingNavBackgroundDdl", value: "rgba(97, 97, 97, 0.85)" }, + { alias: "stylingNavBackgroundActiveColor", value: "rgb(24, 94, 101)" }, + { alias: "stylingNavItemTopBorderActiveColor", value: "rgb(24, 94, 101)" }, + { alias: "stylingNavItemBottomBorderActiveColor", value: "rgb(24, 94, 101)" }, + { alias: "stySocialBackgroundColor", value: "rgba(255, 255, 255, 0.08)" }, + { alias: "stySocialBorderTopColor", value: "rgb(24, 94, 101)" }, + { alias: "stySocialBorderBottomColor", value: "rgb(24, 94, 101)" }, + { alias: "stylingBoxesBackgroundColor", value: "" }, + { alias: "stylingBoxesBorderColor", value: "" }, + { alias: "stylingThumbnailsBackgroundColor", value: "" }, + { alias: "stylingThumbnailsBorderColor", value: "" }, + { alias: "FontBodyColor", value: "" }, + { alias: "FontNavFontColor", value: "rgba(255, 255, 255, 0.84)" }, + { alias: "FontNavFontActiveColor", value: "rgb(255, 255, 255)" }, + { alias: "FontSocialFontColor", value: "rgba(255, 255, 255, 0.6)" }, + { alias: "FontSocialFontColorHover", value: "rgb(255, 255, 255)" }, + { alias: "FontH1Color", value: "rgb(24, 94, 101)" }, + { alias: "FontH2Color", value: "rgb(24, 94, 101)" }, + { alias: "FontH3Color", value: "rgb(24, 94, 101)" }, + { alias: "FontH4Color", value: "" }, + { alias: "FontH5Color", value: "" }, + { alias: "FontH6Color", value: "" }, + { alias: "FontMediumColor", value: "" }, + { alias: "FontHighlightedColor", value: "" }, + { alias: "FontHighlightedBackgroundColor", value: "rgb(24, 94, 101)" }, + { alias: "FontBigColor", value: "rgb(24, 94, 101)" }, + { alias: "FontButtonColor", value: "rgba(255, 255, 255, 0.92)" }, + { alias: "FontButtonBackgroundColor", value: "rgb(24, 94, 101)" }, + { alias: "FontButtonColorHover", value: "rgba(255, 255, 255, 0.55)" }, + { alias: "FontButtonBackgroundColorHover", value: "rgba(24, 94, 101, 0.74)" }, + { alias: "FontColor2Color", value: "rgb(24, 94, 101)" }, + { alias: "FontColor3Color", value: "rgba(253, 251, 251, 0.91)" }, + { alias: "FontColor4Color", value: "rgb(170, 170, 170)" }, + { alias: "FontLinkColor", value: "rgb(24, 94, 101)" }, + { alias: "FontLinkColorHover", value: "rgba(24, 94, 101, 0.84)" } + ] +}]; \ No newline at end of file diff --git a/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js b/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js new file mode 100644 index 0000000000..f8b74870b7 --- /dev/null +++ b/src/Umbraco.Web.UI/Umbraco/js/tuning.panel.js @@ -0,0 +1,602 @@ + +/*********************************************************************************************************/ +/* Global function and variable for panel/page com */ +/*********************************************************************************************************/ + +/* Refresh tuning panel with selected fieds */ +var refrechIntelTuning = function (schema) { + + var scope = angular.element($("#tuningPanel")).scope(); + + var notFound = true; + angular.forEach(scope.tuningModel.categories, function (category, key) { + var isContainer = false; + angular.forEach(category.sections, function (section, key) { + angular.forEach(section.subSections, function (subSection, key) { + if (subSection.schema && schema.toLowerCase() == subSection.schema.toLowerCase()) { + isContainer = true; + notFound = false + } + + }); + }); + if (!category.active) { + category.active = isContainer; + } + }); + if (notFound) { + scope.tuningModel.categories[0].active = true; + } + scope.$apply(); + + if (notFound) { + scope.schemaFocus = "body"; + } + else { + scope.schemaFocus = schema.toLowerCase(); + } + + scope.$apply(); + +} + +/*********************************************************************************************************/ +/* tuning panel app and controller */ +/*********************************************************************************************************/ + +// tuning main app +angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.slider']) + +// panel main controller +.controller("Umbraco.tuningController", function ($scope, $modal, $http, $window, $timeout) { + + $scope.isOpen = false; + $scope.schemaFocus = "body"; + $scope.settingIsOpen = 'setting'; + $scope.previewDevice = 'desktop'; + $scope.BackgroundPositions = ['center', 'left', 'right', 'bottom center', 'bottom left', 'bottom right', 'top center', 'top left', 'top right']; + $scope.BackgroundRepeats = ['no-repeat', 'repeat', 'repeat-x', 'repeat-y']; + $scope.BackgroundAttachments = ['scroll', 'fixed']; + $scope.Layouts = ['boxed', 'wide', 'full']; + $scope.displays = ['float-left', 'float-right', 'block-left', 'block-right', 'none']; + $scope.optionHomes = ['icon', 'text', 'none']; + $scope.googleFontFamilies = {} + + // Load parameters from GetLessParameters and init data of the tuning config + var initTuning = function () { + $http.get('/Umbraco/Api/tuning/GetLessParameters') + .success(function (data) { + + $.each(tuningConfig.categories, function (indexCategory, category) { + $.each(category.sections, function (indexSection, section) { + $.each(section.subSections, function (indexSubSection, subSection) { + $.each(subSection.fields, function (indexField, field) { + + // 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 = ""; } + } + + }) + }) + }) + }); + + $scope.tuningModel = tuningConfig; + $scope.tuningPalette = tuningPalette; + + refreshtuning(); + + $scope.$watch('tuningModel', function () { + refreshtuning(); + }, true); + + }); + } + + // Refresh all less parameters for every changes watching tuningModel + var refreshtuning = function () { + var parameters = []; + $.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) { + + // value + parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "':'" + field.value + "'"); + + // special init for font family picker + if (field.type == "fontFamilyPicker") { + parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "_weight':'" + field.fontWeight + "'"); + parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "_Style':'" + field.fontStyle + "'"); + } + + }) + }) + }) + }); + + // Refrech page style + document.getElementById("resultFrame").contentWindow.refrechLayout(parameters); + + } + + var openIntelTuning = function () { + document.getElementById("resultFrame").contentWindow.initIntelTuning($scope.tuningModel); + } + + var closeIntelTuning = function () { + document.getElementById("resultFrame").contentWindow.closeIntelTuning($scope.tuningModel); + } + + // Refresh with selected tuning palette + $scope.refreshtuningByPalette = function (colors) { + + $.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; + } + }); + } + + }) + }) + }) + }); + + refreshtuning(); + } + + // Save all parameter in tuningParameters.less file + $scope.saveLessParameters = function () { + var parameters = []; + $.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) { + + // 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 : ""; + var gimport = "@import url('http://fonts.googleapis.com/css?family=" + value + variant + "');"; + if ($.inArray(gimport, parameters) < 0) { + parameters.splice(0, 0, gimport); + } + } + 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 + ";"); + } + + }) + }) + }) + }); + + var resultParameters = { result: parameters.join("") }; + var transform = function (result) { + return $.param(result); + } + + $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; + $http.post('/Umbraco/Api/tuning/PostLessParameters', resultParameters, { + headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, + transformRequest: transform + }) + .success(function (data) { + alert("Change saved !"); + }); + + } + + // Toggle panel + $scope.togglePanel = function () { + if ($scope.isOpen) { + $scope.isOpen = false; + closeIntelTuning(); + } + else { + $scope.isOpen = true; + $scope.settingOpen($scope.settingIsOpen); + } + } + + // Toggle setting + $scope.settingOpen = function (a) { + + if ($scope.settingIsOpen == "setting" && a != "setting") { + closeIntelTuning(); + } + + if (a == "setting") { + openIntelTuning(); + } + + $scope.settingIsOpen = a; + } + + // Remove value from field + $scope.removeField = function (field) { + field.value = ""; + } + + // Open image picker modal + $scope.open = function (field) { + var modalInstance = $modal.open({ + templateUrl: 'myModalContent.html', + controller: 'tuning.mediapickercontroller', + resolve: { + items: function () { + return field.value; + } + } + }); + modalInstance.result.then(function (selectedItem) { + field.value = selectedItem; + }); + }; + + // Open font family picker modal + $scope.openFontFamilyPickerModal = function (field) { + var modalInstance = $modal.open({ + templateUrl: 'fontFamilyPickerModel.html', + controller: 'tuning.fontfamilypickercontroller', + resolve: { + googleFontFamilies: function () { + return $scope.googleFontFamilies; + }, + item: function () { + return field; + } + } + }); + modalInstance.result.then(function (selectedItem) { + field.value = selectedItem.fontFamily; + field.fontType = selectedItem.fontType; + field.fontWeight = selectedItem.fontWeight; + field.fontStyle = selectedItem.fontStyle; + }); + }; + + // Set preview device + $scope.updatePreviewDevice = function (device) { + $scope.previewDevice = device; + } + + // Accordion open event + $scope.accordionOpened = function (schema) { + $scope.schemaFocus = schema; + } + + // Accordion open event + $scope.accordionWillBeOpened = function (schema) { + $scope.futurSchemaFocus = schema; + } + + // Preload of the google font + $http.get('/Umbraco/Api/tuning/GetGoogleFont').success(function (data) { + $scope.googleFontFamilies = data; + }) + + // Inicial tuning loading + initTuning(); + + // Wait a while until show the panel + $timeout(function () { + $("#tuningPanel").show(); + }, 0); + $timeout(function () { + $scope.togglePanel(); + }, 100); + +}) + +// Image picker controller +.controller('tuning.mediapickercontroller', function ($scope, $modalInstance, items, $http) { + + $scope.items = []; + + $http.get('/Umbraco/Api/tuning/GetBackGroundImage') + .success(function (data) { + $scope.items = data; + }); + + $scope.selected = { + item: $scope.items[0] + }; + + $scope.ok = function () { + $modalInstance.close($scope.selected.item); + }; + + $scope.cancel = function () { + $modalInstance.dismiss('cancel'); + }; + +}) + +// Font picker controller +.controller('tuning.fontfamilypickercontroller', function ($scope, $modalInstance, item, googleFontFamilies, $http) { + + $scope.safeFonts = ["Arial, Helvetica", "Impact", "Lucida Sans Unicode", "Tahoma", "Trebuchet MS", "Verdana", "Georgia", "Times New Roman", "Courier New, Courier"]; + $scope.fonts = []; + $scope.selectedFont = {}; + + var googleGetWeight = function (googleVariant) { + return (googleVariant != undefined && googleVariant != "") ? googleVariant.replace("italic", "") : ""; + }; + + var googleGetStyle = function (googleVariant) { + var variantStyle = ""; + if (googleVariant != undefined && googleVariant != "" && googleVariant.indexOf("italic") >= 0) { + variantWeight = googleVariant.replace("italic", ""); + variantStyle = "italic"; + } + return variantStyle; + }; + + angular.forEach($scope.safeFonts, function (value, key) { + $scope.fonts.push({ + groupName: "Safe fonts", + fontType: "safe", + fontFamily: value, + fontWeight: "normal", + fontStyle: "normal", + }); + }); + + angular.forEach(googleFontFamilies.items, function (value, key) { + var variants = value.variants; + var variant = value.variants.length > 0 ? value.variants[0] : ""; + var fontWeight = googleGetWeight(variant); + var fontStyle = googleGetStyle(variant); + $scope.fonts.push({ + groupName: "Google fonts", + fontType: "google", + fontFamily: value.family, + variants: value.variants, + variant: variant, + fontWeight: fontWeight, + fontStyle: fontStyle + }); + }); + + $scope.setStyleVariant = function () { + if ($scope.selectedFont != undefined) { + return { + 'font-family': $scope.selectedFont.fontFamily, + 'font-weight': $scope.selectedFont.fontWeight, + 'font-style': $scope.selectedFont.fontStyle + } + } + }; + + $scope.showFontPreview = function (font) { + $scope.selectedFont = font; + if (font != undefined && font.fontFamily != "" && font.fontType == "google") { + $scope.selectedFont.fontWeight = googleGetWeight($scope.selectedFont.variant); + $scope.selectedFont.fontStyle = googleGetStyle($scope.selectedFont.variant); + WebFont.load({ + google: { + families: [font.fontFamily + ":" + font.variant] + }, + loading: function () { + console.log('loading'); + } + }); + } + } + + $scope.ok = function () { + $modalInstance.close({ + fontFamily: $scope.selectedFont.fontFamily, + fontType: $scope.selectedFont.fontType, + fontWeight: $scope.selectedFont.fontWeight, + fontStyle: $scope.selectedFont.fontStyle, + }); + }; + + $scope.cancel = function () { + $modalInstance.dismiss('cancel'); + }; + + if (item != undefined) { + angular.forEach($scope.fonts, function (value, key) { + if (value.fontFamily == item.value) { + $scope.selectedFont = value; + $scope.selectedFont.variant = item.fontWeight + item.fontStyle; + $scope.selectedFont.fontWeight = item.fontWeight; + $scope.selectedFont.fontStyle = item.fontStyle; + } + }); + } + +}); + +/* + jQuery UI Slider plugin wrapper +*/ +angular.module('ui.slider', []).value('uiSliderConfig', {}).directive('uiSlider', ['uiSliderConfig', '$timeout', function (uiSliderConfig, $timeout) { + uiSliderConfig = uiSliderConfig || {}; + return { + require: 'ngModel', + compile: function () { + return function (scope, elm, attrs, ngModel) { + + function parseNumber(n, decimals) { + return (decimals) ? parseFloat(n) : parseInt(n); + }; + + var options = angular.extend(scope.$eval(attrs.uiSlider) || {}, uiSliderConfig); + // Object holding range values + var prevRangeValues = { + min: null, + max: null + }; + + // convenience properties + var properties = ['min', 'max', 'step']; + var useDecimals = (!angular.isUndefined(attrs.useDecimals)) ? true : false; + + var init = function () { + // When ngModel is assigned an array of values then range is expected to be true. + // Warn user and change range to true else an error occurs when trying to drag handle + if (angular.isArray(ngModel.$viewValue) && options.range !== true) { + console.warn('Change your range option of ui-slider. When assigning ngModel an array of values then the range option should be set to true.'); + options.range = true; + } + + // Ensure the convenience properties are passed as options if they're defined + // This avoids init ordering issues where the slider's initial state (eg handle + // position) is calculated using widget defaults + // Note the properties take precedence over any duplicates in options + angular.forEach(properties, function (property) { + if (angular.isDefined(attrs[property])) { + options[property] = parseNumber(attrs[property], useDecimals); + } + }); + + elm.slider(options); + init = angular.noop; + }; + + // Find out if decimals are to be used for slider + angular.forEach(properties, function (property) { + // support {{}} and watch for updates + attrs.$observe(property, function (newVal) { + if (!!newVal) { + init(); + elm.slider('option', property, parseNumber(newVal, useDecimals)); + } + }); + }); + attrs.$observe('disabled', function (newVal) { + init(); + elm.slider('option', 'disabled', !!newVal); + }); + + // Watch ui-slider (byVal) for changes and update + scope.$watch(attrs.uiSlider, function (newVal) { + init(); + if (newVal != undefined) { + elm.slider('option', newVal); + } + }, true); + + // Late-bind to prevent compiler clobbering + $timeout(init, 0, true); + + // Update model value from slider + elm.bind('slidestop', function (event, ui) { + ngModel.$setViewValue(ui.values || ui.value); + scope.$apply(); + }); + + // Update slider from model value + ngModel.$render = function () { + init(); + var method = options.range === true ? 'values' : 'value'; + + if (isNaN(ngModel.$viewValue) && !(ngModel.$viewValue instanceof Array)) + ngModel.$viewValue = 0; + + // Do some sanity check of range values + if (options.range === true) { + + // Check outer bounds for min and max values + if (angular.isDefined(options.min) && options.min > ngModel.$viewValue[0]) { + ngModel.$viewValue[0] = options.min; + } + if (angular.isDefined(options.max) && options.max < ngModel.$viewValue[1]) { + ngModel.$viewValue[1] = options.max; + } + + // Check min and max range values + if (ngModel.$viewValue[0] >= ngModel.$viewValue[1]) { + // Min value should be less to equal to max value + if (prevRangeValues.min >= ngModel.$viewValue[1]) + ngModel.$viewValue[0] = prevRangeValues.min; + // Max value should be less to equal to min value + if (prevRangeValues.max <= ngModel.$viewValue[0]) + ngModel.$viewValue[1] = prevRangeValues.max; + } + + // Store values for later user + prevRangeValues.min = ngModel.$viewValue[0]; + prevRangeValues.max = ngModel.$viewValue[1]; + + } + elm.slider(method, ngModel.$viewValue); + }; + + scope.$watch(attrs.ngModel, function () { + if (options.range === true) { + ngModel.$render(); + } + }, true); + + function destroy() { + elm.slider('destroy'); + } + elm.bind('$destroy', destroy); + }; + } + }; +}]); + +angular.module('spectrumcolorpicker', []) + .directive('spectrum', function () { + return { + restrict: 'E', + transclude: true, + scope: { + colorselected: '=' + }, + link: function (scope, $element) { + + $element.find("input").spectrum({ + color: scope.colorselected, + preferredFormat: "rgb", + showAlpha: true, + showInput: true, + change: function (color) { + scope.colorselected = color.toRgbString(); + scope.$apply(); + }, + move: function (color) { + } + }); + + scope.$watch('colorselected', function () { + $element.find("input").spectrum("set", scope.colorselected); + }, true); + + }, + template: + '
', + replace: true + }; + }) \ No newline at end of file diff --git a/src/Umbraco.Web.UI/umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/umbraco/config/lang/en.xml index 5d57f57f42..8f08078094 100644 --- a/src/Umbraco.Web.UI/umbraco/config/lang/en.xml +++ b/src/Umbraco.Web.UI/umbraco/config/lang/en.xml @@ -87,6 +87,7 @@ Save Save and publish Save and send for approval + Tuning Preview Preview is disabled because there's no template assigned Choose style diff --git a/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml index 54e4918126..055b0a216d 100644 --- a/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml +++ b/src/Umbraco.Web.UI/umbraco/config/lang/en_us.xml @@ -827,6 +827,7 @@ To manage your website, simply open the umbraco back office and start adding con Edit stylesheet Edit stylesheet property Name to identify the style property in the rich text editor + Tuning Preview Styles diff --git a/src/Umbraco.Web/Editors/uSkyTuningController.cs b/src/Umbraco.Web/Editors/TuningController.cs similarity index 83% rename from src/Umbraco.Web/Editors/uSkyTuningController.cs rename to src/Umbraco.Web/Editors/TuningController.cs index c8f844773b..dbaef7edaf 100644 --- a/src/Umbraco.Web/Editors/uSkyTuningController.cs +++ b/src/Umbraco.Web/Editors/TuningController.cs @@ -16,13 +16,13 @@ using System.IO; namespace Umbraco.Web.Editors { - public class uSkyTuningController : UmbracoApiController + public class TuningController : UmbracoApiController { static string basePath = HttpContext.Current.Server.MapPath(@"\Umbraco\assets\less\"); - static string resultCssPath = HttpContext.Current.Server.MapPath(@"\Css\uSkyTuning.style.css"); - static string uSkyTuningStylePath = basePath + @"uSkyTuning.style.less"; - static string uSkyTuningParametersPath = basePath + @"uSkyTuning.lessParameters.less"; + static string resultCssPath = HttpContext.Current.Server.MapPath(@"\Css\tuning.style.css"); + static string tuningStylePath = basePath + @"tuning.style.less"; + static string tuningParametersPath = basePath + @"tuning.lessParameters.less"; [HttpGet] public HttpResponseMessage GetGoogleFont() @@ -56,11 +56,11 @@ namespace Umbraco.Web.Editors if (!Directory.Exists(basePath)) Directory.CreateDirectory(basePath); - if (!File.Exists(uSkyTuningParametersPath)) - File.Create(uSkyTuningParametersPath); + if (!File.Exists(tuningParametersPath)) + File.Create(tuningParametersPath); IList parameters = new List(); - using (System.IO.StreamReader sr = new System.IO.StreamReader(uSkyTuningParametersPath)) + using (System.IO.StreamReader sr = new System.IO.StreamReader(tuningParametersPath)) { String line; while ((line = sr.ReadLine()) != null) @@ -85,8 +85,8 @@ namespace Umbraco.Web.Editors if (!Directory.Exists(basePath)) Directory.CreateDirectory(basePath); - if (!File.Exists(uSkyTuningParametersPath)) - File.Create(uSkyTuningParametersPath); + if (!File.Exists(tuningParametersPath)) + File.Create(tuningParametersPath); if (!File.Exists(resultCssPath)) File.Create(resultCssPath); @@ -95,7 +95,7 @@ namespace Umbraco.Web.Editors // Update less parameter file string gaImportList = string.Empty; - using (System.IO.StreamWriter file = new System.IO.StreamWriter(uSkyTuningParametersPath)) + using (System.IO.StreamWriter file = new System.IO.StreamWriter(tuningParametersPath)) { foreach (string parameters in result.Trim().Split(';')) { @@ -111,15 +111,15 @@ namespace Umbraco.Web.Editors } } - // Read uSkyTuning style file - string uSkyTuningStyleString = string.Empty; - using (System.IO.StreamReader sr = new System.IO.StreamReader(uSkyTuningStylePath)) + // Read Tuning style file + string tuningStyleString = string.Empty; + using (System.IO.StreamReader sr = new System.IO.StreamReader(tuningStylePath)) { - uSkyTuningStyleString = sr.ReadToEnd(); + tuningStyleString = sr.ReadToEnd(); } // Compile the Less file - string compiledStyle = GetCssFromLessString(uSkyTuningStyleString, false, true, true); + string compiledStyle = GetCssFromLessString(tuningStyleString, false, true, true); // Save compiled file using (System.IO.StreamWriter file = new System.IO.StreamWriter(resultCssPath)) diff --git a/src/Umbraco.Web/Umbraco.Web.csproj b/src/Umbraco.Web/Umbraco.Web.csproj index 7d1d6f14cf..4de97af7d7 100644 --- a/src/Umbraco.Web/Umbraco.Web.csproj +++ b/src/Umbraco.Web/Umbraco.Web.csproj @@ -310,7 +310,7 @@ - + @@ -503,6 +503,13 @@ ASPXCodeBehind + + tuning.aspx + ASPXCodeBehind + + + tuning.aspx + ASPXCodeBehind @@ -1855,6 +1862,9 @@ + + ASPXCodeBehind + ASPXCodeBehind