diff --git a/.gitignore b/.gitignore index 59e3507a23..2b19cb6951 100644 --- a/.gitignore +++ b/.gitignore @@ -116,3 +116,13 @@ src/Umbraco.Web.UI/umbraco/js/init.js build/ApiDocs/* build/ApiDocs/Output/* src/Umbraco.Web.UI.Client/bower_components/* +/src/Umbraco.Web.UI/uSync +/src/Umbraco.Web.UI/uSync.Archive +/src/Umbraco.Web.UI/rs-plugin +/src/Umbraco.Web.UI/img +/src/Umbraco.Web.UI/config/uSyncSettings.config +/src/Umbraco.Web.UI/Umbraco/preview/editors/background.html +/src/Umbraco.Web.UI/Umbraco/preview/editors/colorpicker.html +/src/Umbraco.Web.UI/Umbraco/preview/editors/googlefontpicker.html +/src/Umbraco.Web.UI/Umbraco/preview/editors/gridRow.html +/src/Umbraco.Web.UI/Umbraco/preview/editors/slider.html diff --git a/src/Umbraco.Web.UI.Client/gruntFile.js b/src/Umbraco.Web.UI.Client/gruntFile.js index 9337eb3c81..6823de125b 100644 --- a/src/Umbraco.Web.UI.Client/gruntFile.js +++ b/src/Umbraco.Web.UI.Client/gruntFile.js @@ -143,9 +143,8 @@ module.exports = function (grunt) { tuning: { files: [ { dest: '<%= distdir %>/preview', src: '**/*.html', expand: true, cwd: 'src/tuning' }, - { dest: '<%= distdir %>/assets/css', src: 'tuning.defaultStyle.css', expand: true, cwd: 'src/tuning' }, - { dest: '<%= distdir %>/assets/less', src: 'tuning.defaultStyle.less', expand: true, cwd: 'src/tuning' }, - { dest: '<%= distdir %>/assets/less', src: 'tuning.gridRowStyle.less', expand: true, cwd: 'src/tuning' }, + { dest: '<%= distdir %>/preview/editors', src: '**/*.html', expand: true, cwd: 'src/tuning/editors' }, + { dest: '<%= distdir %>/assets/less', src: '**/*.less', expand: true, cwd: 'src/tuning/editors' }, { 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' } @@ -214,7 +213,7 @@ module.exports = function (grunt) { } }, tuningJs: { - src: ['src/tuning/tuning.global.js', 'src/tuning/tuning.controller.js', 'src/tuning/lib/slider.directive.js', 'src/tuning/lib/spectrum.directive.js'], + src: ['src/tuning/tuning.global.js', 'src/tuning/tuning.controller.js', 'src/tuning/editors/*.js', 'src/tuning/lib/slider.directive.js', 'src/tuning/lib/spectrum.directive.js'], dest: '<%= distdir %>/js/tuning.panel.js' }, controllers: { diff --git a/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less b/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less index 2844aabc6b..00c5ef1b0e 100644 --- a/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less +++ b/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less @@ -640,6 +640,11 @@ h2 { color: rgba(255, 255, 255, 0.57); } +.tuning .btn-group, .tuning .btn-group-vertical { + float: right; + margin: 20px; +} + /******* IFRAME *******/ .desktop { diff --git a/src/Umbraco.Web.UI.Client/src/tuning.loader.js b/src/Umbraco.Web.UI.Client/src/tuning.loader.js index 876b8f031d..01830fb49d 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning.loader.js +++ b/src/Umbraco.Web.UI.Client/src/tuning.loader.js @@ -11,8 +11,6 @@ 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/tuning.config.js', - '/Umbraco/js/tuning.palettes.js', '/umbraco/js/tuning.panel.js' ], function () { jQuery(document).ready(function () { diff --git a/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.config.js b/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.config.js index efa6ec7df6..c8e74a1eda 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.config.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.config.js @@ -4,1441 +4,19 @@ /*********************************************************************************************************/ 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", - alias: "backgroundBodyGradientColor", - description: "Fade the background to this colour at the bottom", - type: "colorPicker", - value: "" - }, - { - name: "Image/Pattern", - alias: "backgroundBodyImageOrPattern", - description: "Use an image for the background instead of a solid colour/gradient", - type: "bgImagePicker", - value: "" - }, - { - name: "Position", - alias: "backgroundBodyPosition", - description: "Background body position", - type: "bgPositionPicker", - value: "" - }, - { - name: "Cover", - alias: "backgroundBodyCover", - description: "Checked: stretches the chosen image to fill the.\nUnchecked: the image is tiled according to the Repeat setting below", - type: "checkbox", - value: "" - }, - { - name: "Repeat", - alias: "backgroundBodyRepeat", - description: "How to tile the background image", - type: "bgRepeatPicker", - value: "" - }, - { - name: "Attachment", - alias: "backgroundBodyAttachment", - description: "When fixed the background doesn't scroll with the content", - type: "bgAttachmentPicker", - value: "" - } - ] + configs: [{ + name: "Body", + schema: "body", + selector: "body", + editors: [ + { + type: "background", + name: "Image Background" }, { - 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: "" - } - ] + type: "colorpicker", + name: "Title Background Color", + css: "background-color" }] - }] - }, - { - name: "Styling", - sections: [{ - name: "General", - subSections: [{ - name: "Main Styles", - 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 Styles", - 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 Position", - alias: "stylingHeaderLogoTopMargin", - description: "Header logo top margin", - type: "slider", - min: "-100", - max: "100", - value: "0" - }] - }, - { - name: "Pre Header", - schema: ".preHeader-row", - fields: [{ - name: "Display", - alias: "styPreHeaderDisplay", - description: "PreHeader links list display", - type: "displayPicker", - value: "" - }, - { - name: "Background Color", - alias: "styPreHeaderBackgroundColor", - description: "PreHeader links list background color", - type: "colorPicker", - value: "" - }, - { - name: "Top Margin", - alias: "styPreHeaderTopMargin", - description: "PreHeader links list top margin", - type: "slider", - min: "0", - max: "500", - value: "0" - }, - { - name: "Border Top Size", - alias: "styPreHeaderBorderTopSize", - description: "PreHeader links list border top size", - type: "slider", - min: "0", - max: "50", - value: "0" - }, - { - name: "Border Bottom Size", - alias: "styPreHeaderBorderBottomSize", - description: "PreHeader links list border bottom size", - type: "slider", - min: "0", - max: "50", - value: "0" - }, - { - name: "Border Top Color", - alias: "styPreHeaderBorderTopColor", - description: "PreHeader links list border top color", - type: "colorPicker", - value: "", - colorPaletteProperty: "colorBase" - }, - { - name: "Border Bottom Color", - alias: "styPreHeaderBorderBottomColor", - description: "PreHeader links list border bottom color", - type: "colorPicker", - value: "", - colorPaletteProperty: "colorBase" - }] - }, - { - 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: "Position", - 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: "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", - schema: ".thumbnail", - 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: "Default font", - 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: "Pre Header Font", - schema: ".preHeader-row", - fields: [{ - name: "Font Color", - alias: "FontPreHeaderFontColor", - description: "PreHeader links list font color", - type: "colorPicker", - value: "", - colorPaletteProperty: "colorFontRev" - }, - { - name: "Font Color Hover", - alias: "FontPreHeaderFontColorHover", - description: "PreHeader links list font color hover", - type: "colorPicker", - value: "", - colorPaletteProperty: "colorFontRevActive" - }, - { - name: "Font Size", - alias: "FontPreHeaderFontSize", - description: "PreHeader links list font size", - type: "slider", - min: "8", - max: "36", - value: "0" - }, - { - name: "Line Height", - alias: "FontPreHeaderLineHeight", - description: "PreHeader links list line height", - type: "slider", - min: "20", - max: "200", - value: "0" - }, - { - name: "Family", - alias: "FontPreHeaderFamily", - description: "", - type: "fontFamilyPicker", - fontType: "", - fontWeight: "", - fontStyle: "", - value: "" - } - ] - }, - - { - name: "Navigation Font", - schema: ".nav", - 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: "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: "Small", - schema: ".small", - fields: [{ - name: "Color", - alias: "FontSmallColor", - description: "", - type: "colorPicker", - value: "", - colorPaletteProperty: "colorFontDefault" - }, { - name: "Size", - alias: "FontSmallSize", - description: "", - type: "slider", - min: "8", - max: "64", - value: "0" - }, - { - name: "Line Height", - alias: "FontSmallLineHeight", - description: "", - type: "slider", - min: "8", - max: "64", - value: "0" - }, - { - name: "Top margin", - alias: "FontSmallTopMargin", - description: "", - type: "slider", - min: "0", - max: "200", - value: "0" - }, - { - name: "Bottom margin", - alias: "FontSmallBottomMargin", - description: "", - type: "slider", - min: "0", - max: "200", - value: "0" - }, - { - name: "Family", - alias: "FontSmallFamily", - description: "", - type: "fontFamilyPicker", - fontType: "", - fontWeight: "", - fontStyle: "", - value: "" - }] - }, - { - name: "Blockquote", - schema: "blockquote", - fields: [{ - name: "Color", - alias: "FontBlockquoteColor", - description: "", - type: "colorPicker", - value: "", - colorPaletteProperty: "colorFontDefault" - }, { - name: "Size", - alias: "FontBlockquoteSize", - description: "", - type: "slider", - min: "8", - max: "64", - value: "0" - }, - { - name: "Line Height", - alias: "FontBlockquoteLineHeight", - description: "", - type: "slider", - min: "8", - max: "64", - value: "0" - }, - { - name: "Top margin", - alias: "FontBlockquoteTopMargin", - description: "", - type: "slider", - min: "0", - max: "200", - value: "0" - }, - { - name: "Bottom margin", - alias: "FontBlockquoteBottomMargin", - description: "", - type: "slider", - min: "0", - max: "200", - value: "0" - }, - { - name: "Family", - alias: "FontBlockquoteFamily", - description: "", - type: "fontFamilyPicker", - fontType: "", - fontWeight: "", - fontStyle: "", - value: "" - }] - }, { - name: "Highlighted", - schema: ".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: "Lead", - schema: ".lead", - fields: [{ - name: "Color", - alias: "FontLeadColor", - description: "", - type: "colorPicker", - value: "", - colorPaletteProperty: "colorBase" - }, - { - name: "Size", - alias: "FontLeadSize", - description: "", - type: "slider", - min: "8", - max: "64", - value: "0" - }, - { - name: "Line Height", - alias: "FontLeadLineHeight", - description: "", - type: "slider", - min: "8", - max: "64", - value: "0" - }, - { - name: "Top margin", - alias: "FontLeadTopMargin", - description: "", - type: "slider", - min: "0", - max: "200", - value: "0" - }, - { - name: "Bottom margin", - alias: "FontLeadBottomMargin", - description: "", - type: "slider", - min: "0", - max: "200", - value: "0" - }, - { - name: "Family", - alias: "FontLeadFamily", - description: "", - type: "fontFamilyPicker", - fontType: "", - fontWeight: "", - fontStyle: "", - value: "" - }] - }, { - name: "Button", - schema: ".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: "Link", - schema: "p a", - fields: [{ - name: "Color", - alias: "FontLinkColor", - description: "", - type: "colorPicker", - value: "", - colorPaletteProperty: "colorBase" - }, { - name: "Color Hover", - alias: "FontLinkColorHover", - description: "", - type: "colorPicker", - value: "" - }] - }] - }] }] -} - -var rowModel = { - name: "Row", - schema: "", - fields: [ - { - name: "Background color", - alias: "backgroundRowColor", - description: "Background body color", - type: "colorPicker", - value: "", - colorPaletteProperty: "colorBodyBackground" - }, - { - name: "Background gradient", - alias: "backgroundRowGradientColor", - description: "Fade the background to this colour at the bottom", - type: "colorPicker", - value: "" - }, - { - name: "Image/Pattern", - alias: "backgroundRowImageOrPattern", - description: "Use an image for the background instead of a solid colour/gradient", - type: "bgImagePicker", - value: "" - }, - { - name: "Image position", - alias: "backgroundRowPosition", - description: "Background body position", - type: "bgPositionPicker", - value: "" - }, - { - name: "Stretch background", - alias: "backgroundRowCover", - description: "Checked: stretches the chosen image to fill the.\nUnchecked: the image is tiled according to the Repeat setting below", - type: "checkbox", - value: "" - }, - { - name: "Background tiling", - alias: "backgroundRowRepeat", - description: "How to tile the background image", - type: "bgRepeatPicker", - value: "" - }, - { - name: "Background scrolling behaviour", - alias: "backgroundRowAttachment", - description: "When fixed the background doesn't scroll with the content", - type: "bgAttachmentPicker", - value: "" - }, - { - name: "Full size", - alias: "rowFullSize", - description: "", - type: "checkbox", - value: "" - } - ] -}; +}; \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.editors.js b/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.editors.js new file mode 100644 index 0000000000..efa6ec7df6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/config/tuning.editors.js @@ -0,0 +1,1444 @@ + +/*********************************************************************************************************/ +/* 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", + alias: "backgroundBodyGradientColor", + description: "Fade the background to this colour at the bottom", + type: "colorPicker", + value: "" + }, + { + name: "Image/Pattern", + alias: "backgroundBodyImageOrPattern", + description: "Use an image for the background instead of a solid colour/gradient", + type: "bgImagePicker", + value: "" + }, + { + name: "Position", + alias: "backgroundBodyPosition", + description: "Background body position", + type: "bgPositionPicker", + value: "" + }, + { + name: "Cover", + alias: "backgroundBodyCover", + description: "Checked: stretches the chosen image to fill the.\nUnchecked: the image is tiled according to the Repeat setting below", + type: "checkbox", + value: "" + }, + { + name: "Repeat", + alias: "backgroundBodyRepeat", + description: "How to tile the background image", + type: "bgRepeatPicker", + value: "" + }, + { + name: "Attachment", + alias: "backgroundBodyAttachment", + description: "When fixed the background doesn't scroll with the content", + 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 Styles", + 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 Styles", + 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 Position", + alias: "stylingHeaderLogoTopMargin", + description: "Header logo top margin", + type: "slider", + min: "-100", + max: "100", + value: "0" + }] + }, + { + name: "Pre Header", + schema: ".preHeader-row", + fields: [{ + name: "Display", + alias: "styPreHeaderDisplay", + description: "PreHeader links list display", + type: "displayPicker", + value: "" + }, + { + name: "Background Color", + alias: "styPreHeaderBackgroundColor", + description: "PreHeader links list background color", + type: "colorPicker", + value: "" + }, + { + name: "Top Margin", + alias: "styPreHeaderTopMargin", + description: "PreHeader links list top margin", + type: "slider", + min: "0", + max: "500", + value: "0" + }, + { + name: "Border Top Size", + alias: "styPreHeaderBorderTopSize", + description: "PreHeader links list border top size", + type: "slider", + min: "0", + max: "50", + value: "0" + }, + { + name: "Border Bottom Size", + alias: "styPreHeaderBorderBottomSize", + description: "PreHeader links list border bottom size", + type: "slider", + min: "0", + max: "50", + value: "0" + }, + { + name: "Border Top Color", + alias: "styPreHeaderBorderTopColor", + description: "PreHeader links list border top color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }, + { + name: "Border Bottom Color", + alias: "styPreHeaderBorderBottomColor", + description: "PreHeader links list border bottom color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }] + }, + { + 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: "Position", + 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: "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", + schema: ".thumbnail", + 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: "Default font", + 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: "Pre Header Font", + schema: ".preHeader-row", + fields: [{ + name: "Font Color", + alias: "FontPreHeaderFontColor", + description: "PreHeader links list font color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontRev" + }, + { + name: "Font Color Hover", + alias: "FontPreHeaderFontColorHover", + description: "PreHeader links list font color hover", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontRevActive" + }, + { + name: "Font Size", + alias: "FontPreHeaderFontSize", + description: "PreHeader links list font size", + type: "slider", + min: "8", + max: "36", + value: "0" + }, + { + name: "Line Height", + alias: "FontPreHeaderLineHeight", + description: "PreHeader links list line height", + type: "slider", + min: "20", + max: "200", + value: "0" + }, + { + name: "Family", + alias: "FontPreHeaderFamily", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + } + ] + }, + + { + name: "Navigation Font", + schema: ".nav", + 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: "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: "Small", + schema: ".small", + fields: [{ + name: "Color", + alias: "FontSmallColor", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontDefault" + }, { + name: "Size", + alias: "FontSmallSize", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Line Height", + alias: "FontSmallLineHeight", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Top margin", + alias: "FontSmallTopMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Bottom margin", + alias: "FontSmallBottomMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Family", + alias: "FontSmallFamily", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + }] + }, + { + name: "Blockquote", + schema: "blockquote", + fields: [{ + name: "Color", + alias: "FontBlockquoteColor", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorFontDefault" + }, { + name: "Size", + alias: "FontBlockquoteSize", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Line Height", + alias: "FontBlockquoteLineHeight", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Top margin", + alias: "FontBlockquoteTopMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Bottom margin", + alias: "FontBlockquoteBottomMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Family", + alias: "FontBlockquoteFamily", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + }] + }, { + name: "Highlighted", + schema: ".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: "Lead", + schema: ".lead", + fields: [{ + name: "Color", + alias: "FontLeadColor", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }, + { + name: "Size", + alias: "FontLeadSize", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Line Height", + alias: "FontLeadLineHeight", + description: "", + type: "slider", + min: "8", + max: "64", + value: "0" + }, + { + name: "Top margin", + alias: "FontLeadTopMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Bottom margin", + alias: "FontLeadBottomMargin", + description: "", + type: "slider", + min: "0", + max: "200", + value: "0" + }, + { + name: "Family", + alias: "FontLeadFamily", + description: "", + type: "fontFamilyPicker", + fontType: "", + fontWeight: "", + fontStyle: "", + value: "" + }] + }, { + name: "Button", + schema: ".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: "Link", + schema: "p a", + fields: [{ + name: "Color", + alias: "FontLinkColor", + description: "", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBase" + }, { + name: "Color Hover", + alias: "FontLinkColorHover", + description: "", + type: "colorPicker", + value: "" + }] + }] + }] + }] +} + +var rowModel = { + name: "Row", + schema: "", + fields: [ + { + name: "Background color", + alias: "backgroundRowColor", + description: "Background body color", + type: "colorPicker", + value: "", + colorPaletteProperty: "colorBodyBackground" + }, + { + name: "Background gradient", + alias: "backgroundRowGradientColor", + description: "Fade the background to this colour at the bottom", + type: "colorPicker", + value: "" + }, + { + name: "Image/Pattern", + alias: "backgroundRowImageOrPattern", + description: "Use an image for the background instead of a solid colour/gradient", + type: "bgImagePicker", + value: "" + }, + { + name: "Image position", + alias: "backgroundRowPosition", + description: "Background body position", + type: "bgPositionPicker", + value: "" + }, + { + name: "Stretch background", + alias: "backgroundRowCover", + description: "Checked: stretches the chosen image to fill the.\nUnchecked: the image is tiled according to the Repeat setting below", + type: "checkbox", + value: "" + }, + { + name: "Background tiling", + alias: "backgroundRowRepeat", + description: "How to tile the background image", + type: "bgRepeatPicker", + value: "" + }, + { + name: "Background scrolling behaviour", + alias: "backgroundRowAttachment", + description: "When fixed the background doesn't scroll with the content", + type: "bgAttachmentPicker", + value: "" + }, + { + name: "Full size", + alias: "rowFullSize", + description: "", + type: "checkbox", + value: "" + } + ] +}; diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/background.html b/src/Umbraco.Web.UI.Client/src/tuning/editors/background.html new file mode 100644 index 0000000000..abdf2bc1da --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/background.html @@ -0,0 +1,10 @@ + +
+ {{item.name}} +
+
+ + +
+
+
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/background.js b/src/Umbraco.Web.UI.Client/src/tuning/editors/background.js new file mode 100644 index 0000000000..6030b83b45 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/background.js @@ -0,0 +1,171 @@ + +/*********************************************************************************************************/ +/* Background editor */ +/*********************************************************************************************************/ + +angular.module("umbraco.tuning") + +.controller("Umbraco.tuning.background", function ($scope, $modal) { + + if (!$scope.item.values) { + $scope.item.values = { + imageorpattern: '' + }; + } + + // Open image picker modal + $scope.open = function (field) { + + $scope.data = { + newFolder: "", + modalField: field + }; + + var modalInstance = $modal.open({ + scope: $scope, + templateUrl: 'myModalContent.html', + controller: 'tuning.mediapickercontroller', + resolve: { + items: function () { + return field.imageorpattern; + } + } + }); + modalInstance.result.then(function (selectedItem) { + field.imageorpattern = selectedItem; + }); + }; + +}) + +.controller('tuning.mediapickercontroller', function ($scope, $modalInstance, items, $http, mediaResource, umbRequestHelper, entityResource, mediaHelper) { + + if (mediaHelper && mediaHelper.registerFileResolver) { + mediaHelper.registerFileResolver("Umbraco.UploadField", function (property, entity, thumbnail) { + if (thumbnail) { + + if (mediaHelper.detectIfImageByExtension(property.value)) { + var thumbnailUrl = umbRequestHelper.getApiUrl( + "imagesApiBaseUrl", + "GetBigThumbnail", + [{ originalImagePath: property.value }]); + + return thumbnailUrl; + } + else { + return null; + } + + } + else { + return property.value; + } + }); + } + + var modalFieldvalue = $scope.data.modalField.imageorpattern; + + $scope.currentFolder = {}; + $scope.currentFolder.children = []; + $scope.currentPath = []; + $scope.startNodeId = -1; + + $scope.options = { + url: umbRequestHelper.getApiUrl("mediaApiBaseUrl", "PostAddFile"), + formData: { + currentFolder: $scope.startNodeId + } + }; + + //preload selected item + $scope.selectedMedia = undefined; + + $scope.submitFolder = function (e) { + if (e.keyCode === 13) { + e.preventDefault(); + $scope.$parent.data.showFolderInput = false; + + if ($scope.$parent.data.newFolder && $scope.$parent.data.newFolder != "") { + mediaResource + .addFolder($scope.$parent.data.newFolder, $scope.currentFolder.id) + .then(function (data) { + $scope.$parent.data.newFolder = undefined; + $scope.gotoFolder(data); + }); + } + } + }; + + $scope.gotoFolder = function (folder) { + + if (!folder) { + folder = { id: $scope.startNodeId, name: "Media", icon: "icon-folder" }; + } + + if (folder.id > 0) { + var matches = _.filter($scope.currentPath, function (value, index) { + if (value.id == folder.id) { + value.indexInPath = index; + return value; + } + }); + + if (matches && matches.length > 0) { + $scope.currentPath = $scope.currentPath.slice(0, matches[0].indexInPath + 1); + } + else { + $scope.currentPath.push(folder); + } + } + else { + $scope.currentPath = []; + } + + //mediaResource.rootMedia() + mediaResource.getChildren(folder.id) + .then(function (data) { + folder.children = data.items ? data.items : []; + + angular.forEach(folder.children, function (child) { + child.isFolder = child.contentTypeAlias == "Folder" ? true : false; + + if (!child.isFolder) { + child.thumbnail = mediaHelper.resolveFile(child, true); + child.image = mediaHelper.resolveFile(child, false); + } + }); + + $scope.options.formData.currentFolder = folder.id; + $scope.currentFolder = folder; + }); + }; + + $scope.iconFolder = "glyphicons-icon folder-open" + + $scope.selectMedia = function (media) { + + if (!media.isFolder) { + //we have 3 options add to collection (if multi) show details, or submit it right back to the callback + $scope.selectedMedia = media; + $scope.data.modalField.imageorpattern = "url(" + $scope.selectedMedia.image + ")"; + } + else { + $scope.gotoFolder(media); + } + }; + + //default root item + if (!$scope.selectedMedia) { + $scope.gotoFolder(); + } + + $scope.ok = function () { + $modalInstance.close($scope.data.modalField.imageorpattern); + }; + + $scope.cancel = function () { + $scope.data.modalField.imageorpattern = modalFieldvalue; + $modalInstance.dismiss('cancel'); + }; + +}) \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/background.less b/src/Umbraco.Web.UI.Client/src/tuning/editors/background.less new file mode 100644 index 0000000000..8c2362ec71 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/background.less @@ -0,0 +1,23 @@ + +/************************************************************************/ +/* background -ALIAS- */ +/************************************************************************/ + +/***start-lessParam--ALIAS-***/ +@imageorpattern-ALIAS-:''; +/***end-lessParam--ALIAS-***/ + +/***start-gridStyle--ALIAS-***/ +-SCHEMA- { + background-image: @imageorpattern-ALIAS-; + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} +/***end-gridStyle--ALIAS-***/ + + diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/colorPicker.less b/src/Umbraco.Web.UI.Client/src/tuning/editors/colorPicker.less new file mode 100644 index 0000000000..ae5586bed8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/colorPicker.less @@ -0,0 +1,14 @@ + +/************************************************************************/ +/* colorPicker -ALIAS- -CSS- */ +/************************************************************************/ + +/***start-lessParam--ALIAS-***/ +@color-ALIAS-:''; +/***end-lessParam--ALIAS-***/ + +/***start-lessStyle--ALIAS-***/ +-SCHEMA- { + -CSS-:@color-ALIAS-; +} +/***end-lessStyle--ALIAS-***/ \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/colorpicker.html b/src/Umbraco.Web.UI.Client/src/tuning/editors/colorpicker.html new file mode 100644 index 0000000000..efadd3be89 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/colorpicker.html @@ -0,0 +1,8 @@ + +
+ {{item.name}} +
+ + +
+
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/colorpicker.js b/src/Umbraco.Web.UI.Client/src/tuning/editors/colorpicker.js new file mode 100644 index 0000000000..cd702c1872 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/colorpicker.js @@ -0,0 +1,16 @@ + +/*********************************************************************************************************/ +/* color editor */ +/*********************************************************************************************************/ + +angular.module("umbraco.tuning") + +.controller("Umbraco.tuning.colorpicker", function ($scope) { + + if (!$scope.item.values) { + $scope.item.values = { + color: '', + }; + } + +}) \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.html b/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.html new file mode 100644 index 0000000000..6fe38d51f1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.html @@ -0,0 +1,13 @@ + +
+ + {{item.name}}: +
+
+ Aa + {{ item.values.fontFamily }} +
+ +
+ +
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.js b/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.js new file mode 100644 index 0000000000..868379e2e9 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.js @@ -0,0 +1,189 @@ + +/*********************************************************************************************************/ +/* google font editor */ +/*********************************************************************************************************/ + +angular.module("umbraco.tuning") + +.controller("Umbraco.tuning.googlefontpicker", function ($scope, $modal) { + + if (!$scope.item.values) { + $scope.item.values = { + fontFamily: '', + fontType: '', + fontWeight: '', + fontStyle: '', + } + } + + $scope.setStyleVariant = function () { + if ($scope.item.values != undefined) { + return { + 'font-family': $scope.item.values.fontFamily, + 'font-weight': $scope.item.values.fontWeight, + 'font-style': $scope.item.values.fontStyle + } + } + }; + + $scope.open = function (field) { + + $scope.data = { + modalField: field + }; + + var modalInstance = $modal.open({ + scope: $scope, + templateUrl: 'fontFamilyPickerModel.html', + controller: 'tuning.fontfamilypickercontroller', + resolve: { + googleFontFamilies: function () { + return $scope.googleFontFamilies; + }, + item: function () { + return field; + } + } + }); + modalInstance.result.then(function (selectedItem) { + field.fontFamily = selectedItem.fontFamily; + field.fontType = selectedItem.fontType; + field.fontWeight = selectedItem.fontWeight; + field.fontStyle = selectedItem.fontStyle; + }); + }; + +}) + +.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 originalFont = {}; + originalFont.fontFamily = $scope.data.modalField.fontFamily; + originalFont.fontType = $scope.data.modalField.fontType; + originalFont.fontWeight = $scope.data.modalField.fontWeight; + originalFont.fontStyle = $scope.data.modalField.fontStyle; + + 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) { + if (font != undefined && font.fontFamily != "" && font.fontType == "google") { + + // Font needs to be independently loaded in the iframe for live preview to work. + document.getElementById("resultFrame").contentWindow.getFont(font.fontFamily + ":" + font.variant); + + WebFont.load({ + google: { + families: [font.fontFamily + ":" + font.variant] + }, + loading: function () { + console.log('loading'); + }, + active: function () { + // If $apply isn't called, the new font family isn't applied until the next user click. + $scope.$apply(function () { + $scope.selectedFont = font; + $scope.selectedFont.fontWeight = googleGetWeight($scope.selectedFont.variant); + $scope.selectedFont.fontStyle = googleGetStyle($scope.selectedFont.variant); + + // Apply to the page content as a preview. + $scope.data.modalField.fontFamily = $scope.selectedFont.fontFamily; + $scope.data.modalField.fontType = $scope.selectedFont.fontType; + $scope.data.modalField.fontWeight = $scope.selectedFont.fontWeight; + $scope.data.modalField.fontStyle = $scope.selectedFont.fontStyle; + }); + } + }); + } + else { + // Font is available, apply it immediately in modal preview. + $scope.selectedFont = font; + // And to page content. + $scope.data.modalField.fontFamily = $scope.selectedFont.fontFamily; + $scope.data.modalField.fontType = $scope.selectedFont.fontType; + $scope.data.modalField.fontWeight = $scope.selectedFont.fontWeight; + $scope.data.modalField.fontStyle = $scope.selectedFont.fontStyle; + } + } + + $scope.ok = function () { + $modalInstance.close({ + fontFamily: $scope.selectedFont.fontFamily, + fontType: $scope.selectedFont.fontType, + fontWeight: $scope.selectedFont.fontWeight, + fontStyle: $scope.selectedFont.fontStyle, + }); + }; + + $scope.cancel = function () { + // Discard font change. + $modalInstance.close({ + fontFamily: originalFont.fontFamily, + fontType: originalFont.fontType, + fontWeight: originalFont.fontWeight, + fontStyle: originalFont.fontStyle, + }); + }; + + if (item != undefined) { + angular.forEach($scope.fonts, function (value, key) { + if (value.fontFamily == item.fontFamily) { + $scope.selectedFont = value; + $scope.selectedFont.variant = item.fontWeight + item.fontStyle; + $scope.selectedFont.fontWeight = item.fontWeight; + $scope.selectedFont.fontStyle = item.fontStyle; + } + }); + } + +}); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.less b/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.less new file mode 100644 index 0000000000..5481cc74c6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.less @@ -0,0 +1,21 @@ + +/************************************************************************/ +/* font family -ALIAS- */ +/************************************************************************/ + +/***start-lessParam--ALIAS-***/ +@fontfamily-ALIAS-:''; +@fontweight-ALIAS-:''; +@fontstyle-ALIAS-:''; +@fonttype-ALIAS-:''; +/***end-lessParam--ALIAS-***/ + +/***start-gridStyle--ALIAS-***/ +-SCHEMA- { + font-family:@fontfamily-ALIAS-,Verdana,Arial,Helvetica,sans-serif; + font-weight:@fontweight-ALIAS-; + font-style:@fontstyle-ALIAS-; +} +/***end-gridStyle--ALIAS-***/ + + \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.html b/src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.html new file mode 100644 index 0000000000..c77d587348 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.html @@ -0,0 +1,20 @@ + +
+ +
+ Background color: +
+ + +
+
+ +
+ Image or Pattern: +
+ +
+ +
+ +
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.js b/src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.js new file mode 100644 index 0000000000..a8b17587f6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.js @@ -0,0 +1,41 @@ + +/*********************************************************************************************************/ +/* grid row editor */ +/*********************************************************************************************************/ + +angular.module("umbraco.tuning") + +.controller("Umbraco.tuning.gridRow", function ($scope, $modal) { + + if (!$scope.item.values) { + $scope.item.values = { + color: '', + imageorpattern: '', + fullSize:false + }; + } + + // Open image picker modal + $scope.open = function (field) { + + $scope.data = { + newFolder: "", + modalField: field + }; + + var modalInstance = $modal.open({ + scope: $scope, + templateUrl: 'myModalContent.html', + controller: 'tuning.mediapickercontroller', + resolve: { + items: function () { + return field.imageorpattern; + } + } + }); + modalInstance.result.then(function (selectedItem) { + field.imageorpattern = selectedItem; + }); + }; + +}) \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.less b/src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.less new file mode 100644 index 0000000000..a39f931e34 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/gridRow.less @@ -0,0 +1,22 @@ + +/************************************************************************/ +/* background -ALIAS- */ +/************************************************************************/ + +/***start-lessParam--ALIAS-***/ +@color-ALIAS-:''; +@imageorpattern-ALIAS-:''; +/***end-lessParam--ALIAS-***/ + +/***start-gridStyle--ALIAS-***/ +-SCHEMA- { + background-color:@color-ALIAS-; + background-image: @imageorpattern-ALIAS-; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} +/***end-gridStyle--ALIAS-***/ + + diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/slider.html b/src/Umbraco.Web.UI.Client/src/tuning/editors/slider.html new file mode 100644 index 0000000000..5d125bde01 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/slider.html @@ -0,0 +1,7 @@ + +
+ {{item.name}}: +
+
+
+
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/slider.js b/src/Umbraco.Web.UI.Client/src/tuning/editors/slider.js new file mode 100644 index 0000000000..79bee30f7d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/slider.js @@ -0,0 +1,16 @@ + +/*********************************************************************************************************/ +/* slider editor */ +/*********************************************************************************************************/ + +angular.module("umbraco.tuning") + +.controller("Umbraco.tuning.slider", function ($scope) { + + if (!$scope.item.values) { + $scope.item.values = { + slider: $scope.item.min + } + } + +}) \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/slider.less b/src/Umbraco.Web.UI.Client/src/tuning/editors/slider.less new file mode 100644 index 0000000000..95e733ffaf --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/slider.less @@ -0,0 +1,14 @@ + +/************************************************************************/ +/* slider -ALIAS- -CSS- */ +/************************************************************************/ + +/***start-lessParam--ALIAS-***/ +@slider-ALIAS-:-MIN-; +/***end-lessParam--ALIAS-***/ + +/***start-lessStyle--ALIAS-***/ +-SCHEMA- { + -CSS-:@slider-ALIAS- + 0px; +} +/***end-lessStyle--ALIAS-***/ \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/index.html b/src/Umbraco.Web.UI.Client/src/tuning/index.html index 3c894c8038..774fddcd64 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/index.html +++ b/src/Umbraco.Web.UI.Client/src/tuning/index.html @@ -15,7 +15,7 @@ -
+
@@ -55,99 +55,39 @@
- +

STYLING

- + + - - {{category.name}} - - -
- - - - - - - - {{subSection.name}} - - - -
-
- - {{field.name}}: - -
- - -
- -
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
-
-
- -
- -
- -
- -
- -
- -
- -
-
- Aa - {{ field.value }} -
- -
- -
-
- - - + + + {{configItem.name}} + + +
+
- + + - - - - + +
+ + + +
diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js index 0b9c18d786..0c8e40ad33 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js @@ -1,18 +1,15 @@ + /*********************************************************************************************************/ /* tuning panel app and controller */ /*********************************************************************************************************/ -// tuning main app angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.slider', 'umbraco.resources', 'umbraco.services']) -// panel main controller .controller("Umbraco.tuningController", function ($scope, $modal, $http, $window, $timeout, $location) { $scope.isOpen = false; $scope.frameLoaded = false; $scope.enableTuning = 0; - $scope.tuningParameterUrl = ""; - $scope.tuningGridList = ""; $scope.schemaFocus = "body"; $scope.settingIsOpen = 'previewDevice'; $scope.BackgroundPositions = ['center', 'left', 'right', 'bottom center', 'bottom left', 'bottom right', 'top center', 'top left', 'top right']; @@ -50,55 +47,40 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli var updateConfigValue = function (data) { var fonts = []; - $.each(tuningConfig.categories, function (indexCategory, category) { - $.each(category.sections, function (indexSection, section) { - $.each(section.subSections, function (indexSubSection, subSection) { - $.each(subSection.fields, function (indexField, field) { + $.each($scope.tuningModel.configs, function (indexConfig, config) { + $.each(config.editors, function (indexItem, item) { - try { + try { - // value - var newValue = eval("data." + field.alias.replace("@", "")); - if (newValue != undefined) { - field.value = newValue; - if (field.value == "''") { field.value = ""; } + if (item.values) { + angular.forEach(Object.keys(item.values), function (key, indexKey) { + + if (key != "''") { + var propertyAlias = key.toLowerCase() + item.alias.toLowerCase(); + var newValue = eval("data." + propertyAlias.replace("@", "")); + + if (newValue == "''") { + newValue = ""; + } + + item.values[key] = newValue; } - // special init for font family picker - if (field.type == "fontFamilyPicker") { - - var fontWeight = eval("data." + field.alias.replace("@", "") + "_weight"); - var fontStyle = eval("data." + field.alias.replace("@", "") + "_style"); - var fontType = eval("data." + field.alias.replace("@", "") + "_type"); - - if (fontWeight != undefined) { - field.fontWeight = fontWeight; - if (field.fontWeight == "''") { field.fontWeight = ""; } - } - - if (fontStyle != undefined) { - field.fontStyle = fontStyle; - if (field.fontStyle == "''") { field.fontStyle = ""; } - } - - if (fontType != undefined) { - field.fontType = fontType; - if (field.fontType == "''") { field.fontType = ""; } - } - - if (fontType == 'google' && field.value + field.fontWeight && $.inArray(field.value + ":" + field.fontWeight, fonts) < 0) { - fonts.splice(0, 0, field.value + ":" + field.fontWeight); - } - - } + }) + } + // TODO: special init for font family picker + if (item.type == "googlefontpicker") { + if (item.values.fontType == 'google' && item.values.fontFamily + item.values.fontWeight && $.inArray(item.values.fontFamily + ":" + item.values.fontWeight, fonts) < 0) { + fonts.splice(0, 0, item.values.fontFamily + ":" + item.values.fontWeight); } - catch (err) { - console.info("Style parameter not found " + field.alias); - } + } + + } + catch (err) { + console.info("Style parameter not found " + item.alias); + } - }) - }) }) }); @@ -111,15 +93,13 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli } // Load parameters from GetLessParameters and init data of the tuning config - var initTuning = function () { + $scope.initTuning = function () { - $http.get('/Umbraco/Api/tuning/Load', { params: { tuningStyleUrl: $scope.tuningParameterUrl, pageId: $location.search().id } }) + $http.get('/Umbraco/Api/tuning/Load', { params: { pageId: $location.search().id } }) .success(function (data) { updateConfigValue(data); - - $scope.tuningModel = tuningConfig; - $scope.tuningPalette = tuningPalette; + $scope.frameLoaded = true; if ($scope.settingIsOpen == "setting") { openIntelTuning(); @@ -129,52 +109,22 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli } - // Add Less parameters for each grid row - var initGridConfig = function () { - - if ($scope.tuningGridList) { - - $.each($scope.tuningGridList, function (index, row) { - - var stylingSubSection = tuningConfig.categories[1].sections[0].subSections - var newIndex = stylingSubSection.length + 1; - var rowFieldModel = angular.copy(rowModel); - - var rowNumber = index + 1; - rowFieldModel.name = "Grid Row " + rowNumber; - stylingSubSection.splice(newIndex + 1, 0, rowFieldModel); - stylingSubSection[newIndex - 1].schema = "." + row; - - $.each(stylingSubSection[newIndex - 1].fields, function (indexField, field) { - field.alias = field.alias + "__" + row; - }); - - }) - } - - } - // Refresh all less parameters for every changes watching tuningModel var refreshtuning = function () { var parameters = []; if ($scope.tuningModel) { - $.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 + "'"); - } + angular.forEach($scope.tuningModel.configs, function (config, indexConfig) { + angular.forEach(config.editors, function (item, indexItem) { + if (item.values) { + angular.forEach(Object.keys(item.values), function (key, indexKey) { + var propertyAlias = key.toLowerCase() + item.alias.toLowerCase(); + var value = eval("item.values." + key); + parameters.splice(parameters.length + 1, 0, "'@" + propertyAlias + "':'" + value + "'"); }) - }) + } }) }); @@ -184,49 +134,43 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli } } + $scope.createStyle = function (){ + $scope.saveLessParameters(false); + } + + $scope.saveStyle = function () { + $scope.saveLessParameters(true); + } + // Save all parameter in tuningParameters.less file - $scope.saveLessParameters = function () { + $scope.saveLessParameters = function (inherited) { var parameters = []; - var parametersGrid = []; - $.each($scope.tuningModel.categories, function (indexCategory, category) { - $.each(category.sections, function (indexSection, section) { - $.each(section.subSections, function (indexSubSection, subSection) { - $.each(subSection.fields, function (indexField, field) { - - if (subSection.schema && subSection.schema.indexOf("gridrow_") >= 0) { - var value = (field.value != 0 && (field.value == undefined || field.value == "")) ? "''" : field.value; - parametersGrid.splice(parametersGrid.length + 1, 0, "@" + field.alias + ":" + value + ";"); - } - else { - // 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 + ";"); - } - } + $.each($scope.tuningModel.configs, function (indexConfig, config) { + $.each(config.editors, function (indexItem, item) { + if (item.values) { + angular.forEach(Object.keys(item.values), function (key, indexKey) { + var propertyAlias = key.toLowerCase() + item.alias.toLowerCase(); + var value = eval("item.values." + key); + parameters.splice(parameters.length + 1, 0, "@" + propertyAlias + ":" + value + ";"); }) - }) + + // TODO: special init for font family picker + if (item.type == "googlefontpicker") { + var variant = item.values.fontWeight != "" || item.values.fontStyle != "" ? ":" + item.values.fontWeight + item.values.fontStyle : ""; + var gimport = "@import url('http://fonts.googleapis.com/css?family=" + item.values.fontFamily + variant + "');"; + if ($.inArray(gimport, parameters) < 0) { + parameters.splice(0, 0, gimport); + } + } + + } + }) }); - var resultParameters = { parameters: parameters.join(""), parametersGrid: parametersGrid.join(""), pageId: $location.search().id }; + var resultParameters = { parameters: parameters.join(""), pageId: $location.search().id, inherited: inherited }; var transform = function (result) { return $.param(result); } @@ -336,54 +280,6 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli field.value = ""; } - // Open image picker modal - $scope.open = function (field) { - $scope.data = { - newFolder: "", - modalField: field - }; - - var modalInstance = $modal.open({ - scope: $scope, - 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) { - $scope.data = { - modalField: field - }; - var modalInstance = $modal.open({ - scope: $scope, - 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; - }); - }; - // Accordion open event $scope.accordionOpened = function (schema) { $scope.schemaFocus = schema; @@ -471,288 +367,14 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli // watch framLoaded, only if iframe page have EnableTuning() $scope.$watch("enableTuning", function () { - if ($scope.enableTuning > 0) { - if ($scope.enableTuning == 1) { - initGridConfig(); + $timeout(function () { + if ($scope.enableTuning > 0) { + $scope.initTuning(); + $scope.$watch('tuningModel', function () { + refreshtuning(); + }, true); } - initTuning(); - $scope.$watch('tuningModel', function () { - refreshtuning(); - }, true); - } + }, 250); }, true) - // First default load - $timeout(function () { - // toggle panel - $scope.frameLoaded = true; - //$timeout(function () { 1000, $scope.togglePanel(); }); - }, 1000); - }) - -// Image picker controller -.controller('tuning.mediapickercontroller', function ($scope, $modalInstance, items, $http, mediaResource, umbRequestHelper, entityResource, mediaHelper) { - - if (mediaHelper && mediaHelper.registerFileResolver) { - mediaHelper.registerFileResolver("Umbraco.UploadField", function (property, entity, thumbnail) { - if (thumbnail) { - - if (mediaHelper.detectIfImageByExtension(property.value)) { - var thumbnailUrl = umbRequestHelper.getApiUrl( - "imagesApiBaseUrl", - "GetBigThumbnail", - [{ originalImagePath: property.value }]); - - return thumbnailUrl; - } - else { - return null; - } - - } - else { - return property.value; - } - }); - } - - var modalFieldvalue = $scope.data.modalField.value; - - $scope.currentFolder = {}; - $scope.currentFolder.children = []; - $scope.currentPath = []; - $scope.startNodeId = -1; - - $scope.options = { - url: umbRequestHelper.getApiUrl("mediaApiBaseUrl", "PostAddFile"), - formData: { - currentFolder: $scope.startNodeId - } - }; - - //preload selected item - $scope.selectedMedia = undefined; - - $scope.submitFolder = function (e) { - if (e.keyCode === 13) { - e.preventDefault(); - $scope.$parent.data.showFolderInput = false; - - if ($scope.$parent.data.newFolder && $scope.$parent.data.newFolder != "") { - mediaResource - .addFolder($scope.$parent.data.newFolder, $scope.currentFolder.id) - .then(function (data) { - $scope.$parent.data.newFolder = undefined; - $scope.gotoFolder(data); - }); - } - } - }; - - $scope.gotoFolder = function (folder) { - - if (!folder) { - folder = { id: $scope.startNodeId, name: "Media", icon: "icon-folder" }; - } - - if (folder.id > 0) { - var matches = _.filter($scope.currentPath, function (value, index) { - if (value.id == folder.id) { - value.indexInPath = index; - return value; - } - }); - - if (matches && matches.length > 0) { - $scope.currentPath = $scope.currentPath.slice(0, matches[0].indexInPath + 1); - } - else { - $scope.currentPath.push(folder); - } - } - else { - $scope.currentPath = []; - } - - //mediaResource.rootMedia() - mediaResource.getChildren(folder.id) - .then(function (data) { - folder.children = data.items ? data.items : []; - - angular.forEach(folder.children, function (child) { - child.isFolder = child.contentTypeAlias == "Folder" ? true : false; - - if (!child.isFolder) { - child.thumbnail = mediaHelper.resolveFile(child, true); - child.image = mediaHelper.resolveFile(child, false); - } - }); - - $scope.options.formData.currentFolder = folder.id; - $scope.currentFolder = folder; - }); - }; - - $scope.iconFolder = "glyphicons-icon folder-open" - - $scope.selectMedia = function (media) { - - if (!media.isFolder) { - //we have 3 options add to collection (if multi) show details, or submit it right back to the callback - $scope.selectedMedia = media; - $scope.data.modalField.value = "url(" + $scope.selectedMedia.image + ")"; - } - else { - $scope.gotoFolder(media); - } - }; - - //default root item - if (!$scope.selectedMedia) { - $scope.gotoFolder(); - } - - $scope.ok = function () { - $modalInstance.close($scope.data.modalField.value); - }; - - $scope.cancel = function () { - $scope.data.modalField.value = modalFieldvalue; - $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 originalFont = {}; - originalFont.fontFamily = $scope.data.modalField.value; - originalFont.fontType = $scope.data.modalField.fontType; - originalFont.fontWeight = $scope.data.modalField.fontWeight; - originalFont.fontStyle = $scope.data.modalField.fontStyle; - - 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) { - if (font != undefined && font.fontFamily != "" && font.fontType == "google") { - - // Font needs to be independently loaded in the iframe for live preview to work. - document.getElementById("resultFrame").contentWindow.getFont(font.fontFamily + ":" + font.variant); - - WebFont.load({ - google: { - families: [font.fontFamily + ":" + font.variant] - }, - loading: function () { - console.log('loading'); - }, - active: function () { - // If $apply isn't called, the new font family isn't applied until the next user click. - $scope.$apply(function () { - $scope.selectedFont = font; - $scope.selectedFont.fontWeight = googleGetWeight($scope.selectedFont.variant); - $scope.selectedFont.fontStyle = googleGetStyle($scope.selectedFont.variant); - // Apply to the page content as a preview. - $scope.data.modalField.value = $scope.selectedFont.fontFamily; - $scope.data.modalField.fontType = $scope.selectedFont.fontType; - $scope.data.modalField.fontWeight = $scope.selectedFont.fontWeight; - $scope.data.modalField.fontStyle = $scope.selectedFont.fontStyle; - }); - } - }); - } - else { - // Font is available, apply it immediately in modal preview. - $scope.selectedFont = font; - // And to page content. - $scope.data.modalField.value = $scope.selectedFont.fontFamily; - $scope.data.modalField.fontType = $scope.selectedFont.fontType; - $scope.data.modalField.fontWeight = $scope.selectedFont.fontWeight; - $scope.data.modalField.fontStyle = $scope.selectedFont.fontStyle; - } - } - - $scope.ok = function () { - $modalInstance.close({ - fontFamily: $scope.selectedFont.fontFamily, - fontType: $scope.selectedFont.fontType, - fontWeight: $scope.selectedFont.fontWeight, - fontStyle: $scope.selectedFont.fontStyle, - }); - }; - - $scope.cancel = function () { - // Discard font change. - $modalInstance.close({ - fontFamily: originalFont.fontFamily, - fontType: originalFont.fontType, - fontWeight: originalFont.fontWeight, - fontStyle: originalFont.fontStyle, - }); - }; - - 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; - } - }); - } - -}); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.css b/src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.css deleted file mode 100644 index 8df19cf3d3..0000000000 --- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.css +++ /dev/null @@ -1 +0,0 @@ -@IMPORT url('http://fonts.googleapis.com/css?family=Open Sans:300');h1,h2,h3,h4,h5,h6{text-rendering:optimizelegibility}h1{font-weight:300}.clear-container .container{padding-right:0px;padding-left:0px}.big,.medium{display:block}@media (max-width:767px){.hidden-phone{display:none !important}}@media (max-width:979px) and (min-width:768px){.hidden-tablet{display:none !important}}.wrapper{transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out;padding-right:0px;padding-left:0px;margin-right:auto;margin-left:auto}.social-row,logo-row,nav-row{padding-right:0px;padding-left:0px;margin-right:auto;margin-left:auto;width:100%;overflow:hidden}.wrapper.content,.wrapper.footer{overflow:hidden}.logo{max-width:350px;font-size:0px;margin:15px 0px 15px 0;float:left;transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out}.logo img{max-width:100%}.navbar-default .navbar-nav>li>a.fa,.navbar-default .navbar-nav>li>a.fa:focus{font-family:FontAwesome}.navbar{background:none;border:none;min-height:0px;margin-bottom:0px;border-radius:0px;-webkit-border-radius:0px;transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out}.navbar-default .navbar-collapse{border:none;max-height:none;transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .dropdown-menu>li>a:hover{background:none}.navbar-default .dropdown-menu{border:none;margin:0;padding:0;min-width:initial}.navbar-default .nav>li>a{padding:0;transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out}.navbar-default .dropdown-menu>li>a{padding:0}.navbar-default .dropdown-menu>li>a{padding:10px 10px 10px 10px}.navbar-default .navbar-nav>li>a{padding:0px 10px 0px 10px}.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{background:none}@media (min-width:768px){.navbar-default .navbar-nav>li{margin-left:5px}.navbar-nav>li:first-child{margin-left:0px}.navbar-default .dropdown-menu{margin:0;padding:0}.navbar-collapse{padding-right:0px;padding-left:0px}}@media (max-width:768px){.navbar-default .navbar-nav li{margin-bottom:3px}.navbar-default .navbar-nav .open .dropdown-menu{-webkit-border-radius:0px;border-radius:0px;margin-top:3px}.navbar-default .navbar-nav{margin:0 -15px}.navbar-default .navbar-collapse{margin-left:-15px;margin-right:-15px}.navbar-default .navbar-nav>li>a,.navbar-default .dropdown-menu>li>a{padding:10px 10px 10px 10px}.navbar-default .navbar-nav .open .dropdown-menu>li>a{padding:10px 0px 10px 25px}.navbar-toggle{margin:15px 0 15px 0}}.social-bar{list-style:none;margin-top:0;padding:0 15px 0 10px;margin:0px -15px 0px -15px;line-height:0px;font-size:0px}.social-bar li{display:inline-block;margin-left:5px}.social-bar li a{cursor:pointer;padding:0 2px 0 2px}.social-bar li a:hover{text-decoration:none}.social-bar li a span{display:none}#nav-search-form{padding:15px}#nav-search-form button{padding:5px;-webkit-border-radius:2px;border-radius:2px;background:transparent;border:none}#nav-search-form a,#nav-search-form button{margin-left:5px}#nav-search-form input{padding:2px;-webkit-border-radius:2px;border-radius:2px}@media (min-width:768px){#nav-search-form{margin-left:-203px;width:238px}}@media (max-width:768px){#nav-search-form input{width:93%}}.usky-grid-cell{margin-top:30px;margin-bottom:30px;overflow:hidden}.usky-grid-row{margin-left:0px;margin-right:0px}.usky-grid-full-size .usky-grid-row:first-child{margin-top:0}.usky-grid-full-size .usky-grid-row:last-child{margin-bottom:0}.usky-grid-full-size .usky-grid-cell{margin-top:0px;margin-bottom:0px}.usky-grid-skip-top-margin{margin-top:0px}.usky-grid-skip-bottom-margin{margin-bottom:0px}.usky-grid-column{padding-right:0px;padding-left:0px}.jumbotron{font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;background-color:#e3e1e1;margin-bottom:0px}.container .jumbotron{padding:15px}.thumbnail{margin-bottom:0px;min-height:400px}.thumbnail-container{margin:0 -15px}.thumbnail .caption{padding:0 10px 10px 10px;color:inherit}.thumbnail>a>img{display:block;height:auto;max-width:100%;margin-right:auto;margin-left:auto}@media (max-width:991px){.thumbnail-container .col-md-3{margin:30px 0 0 0}.thumbnail-container .col-md-3:first-child{margin:0 0 0 0}}.search-results-list{margin:0;padding:0;list-style:none}.search-results-list li p{margin-left:20px}.search-results-list i{margin-right:10px}.post-list img.post-image,.post-detail img.post-image{display:block;height:auto;max-width:100%;margin-right:auto;margin-left:auto}.post-list .meta{margin-bottom:10px}.post-list .meta .sep{margin:0 3px 0 3px}.post-list .meta .fn{margin:0 0 0 3px}.blog-list-widget{margin:0;padding:0;list-style:none}.blog-list-widget i{margin-right:10px}.post-detail{padding:0 15px 0 15px}.post-detail .meta{margin:0 0 20px 0}.blog-nav .fa-angle-double-left{float:left}.blog-nav .fa-angle-double-right{float:right}.blog-nav{margin:-15px 0 30px 0}.blog-nav a{font-size:28px}.blog-nav a:hover{text-decoration:none}.highlighted{padding:0 4px 2px}.button{border:0;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;padding:12px 15px 14px;margin-top:10px;display:inline-block;margin-bottom:0;font-size:14px;text-align:center;vertical-align:middle;cursor:pointer}.copyright{text-align:center}.google-maps{height:400px;margin:0 0 30px}#contact-form .error{border:1px solid red}#contact-form .success{display:none}.go-top{position:fixed;bottom:0.5em;right:0.5em;text-decoration:none;color:white;background-color:rgba(0,0,0,0.3);font-size:30px;padding:0.1em 0.3em 0.1em;display:none;border-radius:3px;z-index:500;transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-webkit-transition:all 0.2s ease-in-out}.go-top:hover{background-color:rgba(0,0,0,0.6)}body{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:14px;color:'';line-height:18px}h1{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:24px;color:#e67e22;margin-top:20px;margin-bottom:20px;line-height:26px}h2{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:18px;color:#e67e22;margin-top:5px;margin-bottom:10px;line-height:18px}h3{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:18px;color:#e67e22;margin-top:10px;margin-bottom:10px;line-height:16px}h4{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:14px;color:'';margin-top:5px;margin-bottom:10px;line-height:14px}h5{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:12px;color:'';margin-top:5px;margin-bottom:10px;line-height:12px}h6{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:12px;color:'';margin-top:5px;margin-bottom:10px;line-height:12px}.medium{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:18px;color:'';margin-top:5px;margin-bottom:10px;line-height:24px}.highlighted{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';color:'';background-color:#e67e22}.big{font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:'';font-size:26px;color:#e67e22;margin-top:5px;margin-bottom:15px;line-height:28px}.button{color:rgba(255,255,255,0.92);background-color:#e67e22;font-size:24px;line-height:24px;padding:10px;font-family:Open Sans,Verdana,Arial,Helvetica,sans-serif;font-weight:300;font-style:''}.button:hover{color:rgba(255,255,255,0.55);background-color:rgba(230,126,34,0.74)}.color2{color:#e67e22}.color3{color:rgba(253,251,251,0.91)}.color4{color:#aaa}.navbar-default .navbar-nav>li>a,.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus{font-size:18px;font-family:Open Sans;font-weight:300;font-style:''}a{color:#e67e22}a:hover{color:rgba(230,126,34,0.84)}body{background-color:#dfdfdf;background:-moz-linear-gradient(top,#dfdfdf 41%,'' 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(41%,#dfdfdf),color-stop(100%,''));background:-webkit-linear-gradient(top,#dfdfdf 41%,'' 100%);background:-o-linear-gradient(top,#dfdfdf 41%,'' 100%);background:-ms-linear-gradient(top,#dfdfdf 41%,'' 100%);background:linear-gradient(to bottom,#dfdfdf 41%,'' 100%);background-image:'';background-position:top center;background-repeat:repeat;background-attachment:fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}.wrapper.content{background-color:#f6f6f6;background:-moz-linear-gradient(top,#f6f6f6 41%,'' 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(41%,#f6f6f6),color-stop(100%,''));background:-webkit-linear-gradient(top,#f6f6f6 41%,'' 100%);background:-o-linear-gradient(top,#f6f6f6 41%,'' 100%);background:-ms-linear-gradient(top,#f6f6f6 41%,'' 100%);background:linear-gradient(to bottom,#f6f6f6 41%,'' 100%);background-image:'';background-position:'';background-repeat:'';background-attachment:fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}.wrapper.header{background-color:#333;background:-moz-linear-gradient(top,#333 41%,'' 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(41%,#333),color-stop(100%,''));background:-webkit-linear-gradient(top,#333 41%,'' 100%);background:-o-linear-gradient(top,#333 41%,'' 100%);background:-ms-linear-gradient(top,#333 41%,'' 100%);background:linear-gradient(to bottom,#333 41%,'' 100%);background-image:'';background-position:'';background-repeat:'';background-attachment:fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}.wrapper.footer{background-color:#333;background:-moz-linear-gradient(top,#333 41%,'' 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(41%,#333),color-stop(100%,''));background:-webkit-linear-gradient(top,#333 41%,'' 100%);background:-o-linear-gradient(top,#333 41%,'' 100%);background:-ms-linear-gradient(top,#333 41%,'' 100%);background:linear-gradient(to bottom,#333 41%,'' 100%);background-image:'';background-position:center;background-repeat:'';background-attachment:fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}.wrapper.header{border-top:5px solid #e67e22;border-bottom:0px solid #e67e22}@media (min-width:768px){.wrapper{width:720px}.wrapper .container{width:100%}.wrapper.header,.wrapper.content,.wrapper.footer{-webkit-box-shadow:0 0 21px rgba(0,0,0,0.5);-moz-box-shadow:0 0 21px rgba(0,0,0,0.5);box-shadow:0 0 21px rgba(0,0,0,0.5)}.wrapper.header{margin-top:21px;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0px;-moz-border-radius-topright:0px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0px;border-top-right-radius:0px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:0px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;min-height:0px}.wrapper.content{margin-top:0px}.wrapper.footer{margin-top:0px;margin-bottom:20px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0px;-webkit-border-bottom-left-radius:0px;-webkit-border-top-left-radius:0;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0px;-moz-border-radius-bottomleft:0px;-moz-border-radius-topleft:0;border-top-right-radius:0;border-bottom-right-radius:0px;border-bottom-left-radius:0px;border-top-left-radius:0;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;padding-bottom:0px}}@media (min-width:992px){.wrapper{width:940px}}@media (min-width:1200px){.wrapper{width:1140px}}.social-row{background-color:rgba(255,255,255,0.08);border-top:0px solid #e67e22;border-bottom:0px solid #e67e22}.social-bar{float:right}.contact-text{color:rgba(255,255,255,0.6);font-size:12px;line-height:34px;float:left;font-family:Arial,Helvetica;font-weight:normal;font-style:normal}.social-bar li a{color:rgba(255,255,255,0.6);font-size:12px;line-height:34px}.social-bar li a:hover{color:#fff}@media (min-width:768px){.social-row{}.social-container{background-color:rgba(255,255,255,0.08);margin-top:0px}}.nav-row{background-color:''}.navbar-default .navbar-nav>li>a,.navbar-default .navbar-nav>li>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a,.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus{color:rgba(255,255,255,0.84)}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus,.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>.active>a,.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover{background-color:#e67e22;color:#fff}.logo{}@media (min-width:768px){.nav-row{margin-top:-39px}.logo{margin-top:14px}.navbar{clear:both;margin-left:-15px;margin-right:-15px;padding-left:15px;padding-right:15px}.navbar-default .navbar-nav{float:right}.navbar-default .navbar-nav>li>a,.navbar-default .navbar-nav>li>a:focus{border-top:0px solid transparent;border-bottom:0px solid transparent;line-height:43px}.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a:focus,.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>li>a:hover,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{border-top:0px solid #e67e22;border-bottom:0px solid #e67e22;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:5px;border-top-right-radius:5px;border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:5px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box}}.navbar-default .navbar-nav>.dropdown>a .caret,.navbar-default .navbar-nav>.dropdown>a:focus .caret{border-top-color:rgba(255,255,255,0.84);border-bottom-color:rgba(255,255,255,0.84)}.navbar-default .navbar-nav>.dropdown.open>a .caret,.navbar-default .navbar-nav>.dropdown>a:hover .caret{border-top-color:#fff;border-bottom-color:#fff}.navbar-default .dropdown-menu .divider{background-color:#e67e22}.navbar-default .dropdown-menu>li>a{color:rgba(255,255,255,0.84)}.navbar-default .dropdown-menu>li>a:hover{background-color:#e67e22;color:#fff}.navbar-default .navbar-nav>li>.dropdown-menu,language{background-color:rgba(97,97,97,0.85)}@media (min-width:768px){.navbar-default .navbar-nav>li>.dropdown-menu{-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-top-left-radius:0px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-topleft:0px;border-top-right-radius:0;border-bottom-right-radius:5px;border-bottom-left-radius:5px;border-top-left-radius:0px;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background-clip:padding-box;padding-top:5px;padding-bottom:5px}}#nav-search-form a,#nav-search-form button{color:rgba(255,255,255,0.84)}#nav-search-form input{border:1px solid rgba(255,255,255,0.84)}.navbar-default .navbar-toggle{border-color:rgba(255,255,255,0.84);float:right}.navbar-default .navbar-toggle .icon-bar{background-color:rgba(255,255,255,0.84)}.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color:#e67e22}.jumbotron{min-height:0px;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;border:0px solid ''}.container .jumbotron{-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;background-color:''}.thumbnail{min-height:0px;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;border:0px solid '';background-color:''} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.less b/src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.less deleted file mode 100644 index a24c8810ff..0000000000 --- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.defaultStyle.less +++ /dev/null @@ -1,1504 +0,0 @@ -/************************************************************************/ -/* Google Fonts region */ -/************************************************************************/ -/***start-gf***/ -@import url('http://fonts.googleapis.com/css?family=Open Sans:300'); -/***end-gf***/ -/************************************************************************/ - -/************************************************************************/ -/* Less parameters */ -/************************************************************************/ -/***start-lessParam***/ -@backgroundBodyColor:rgb(223, 223, 223); -@backgroundBodyGradientColor:''; -@backgroundBodyImageOrPattern:''; -@backgroundBodyPosition:top center; -@backgroundBodyCover:true; -@backgroundBodyRepeat:repeat; -@backgroundBodyAttachment:fixed; -@backgroundMainColumnColor:rgb(246, 246, 246); -@backgroundMainColumnGradientColor:''; -@backgroundMainColumnImageOrPattern:''; -@backgroundMainColumnPosition:''; -@backgroundMainColumnCover:true; -@backgroundMainColumnRepeat:''; -@backgroundMainColumnAttachment:fixed; -@backgroundHeaderColor:rgb(51, 51, 51); -@backgroundHeaderGradientColor:''; -@backgroundHeaderImageOrPattern:''; -@backgroundHeaderPosition:''; -@backgroundHeaderCover:true; -@backgroundHeaderRepeat:''; -@backgroundHeaderAttachment:fixed; -@backgroundFooterColor:rgb(51, 51, 51); -@backgroundFooterGradientColor:''; -@backgroundFooterImageOrPattern:''; -@backgroundFooterPosition:center; -@backgroundFooterCover:true; -@backgroundFooterRepeat:''; -@backgroundFooterAttachment:fixed; -@stylingMainColumnBoxed:boxed; -@stylingHeaderTopMargin:21; -@stylingMainColumnTopMargin:0; -@stylingFooterTopMargin:0; -@stylingFooterBottompMargin:20; -@stylingMainColumnRadius:0; -@stylingMainColumnShadow:21; -@stylingHeaderTopBorderSize:5; -@stylingHeaderBottomBorderSize:0; -@stylingHeaderTopBorderColor:rgb(230, 126, 34); -@stylingHeaderBottomBorderColor:rgb(230, 126, 34); -@stylingHeaderMinHeight:0; -@stylingHeaderLogoTopMargin:14; -@stylingNavDisplay:block-right; -@stylingNavBackgroundColor:''; -@stylingNavBackgroundDdl:rgba(97, 97, 97, 0.85); -@stylingNavBackgroundActiveColor:rgb(230, 126, 34); -@stylingNavMarginTop:-39; -@stylingNavRadius:5; -@stylingNavRadiusOnlyTop:true; -@stylingNavItemTopBorderActiveSize:0; -@stylingNavItemBottomBorderActiveSize:0; -@stylingNavItemTopBorderActiveColor:rgb(230, 126, 34); -@stylingNavItemBottomBorderActiveColor:rgb(230, 126, 34); -@styPreHeaderDisplay:block-right; -@styPreHeaderBackgroundColor:rgba(255, 255, 255, 0.08); -@styPreHeaderTopMargin:0; -@styPreHeaderBorderTopSize:0; -@styPreHeaderBorderBottomSize:0; -@styPreHeaderBorderTopColor:rgb(230, 126, 34); -@styPreHeaderBorderBottomColor:rgb(230, 126, 34); -@stylingBoxesBackgroundColor:''; -@stylingBoxesMinHeight:0; -@stylingBoxesRadius:0; -@stylingBoxesBorderSize:0; -@stylingBoxesBorderColor:''; -@stylingThumbnailsBackgroundColor:''; -@stylingThumbnailsMinHeight:0; -@stylingThumbnailsRadius:0; -@stylingThumbnailsBorderSize:0; -@stylingThumbnailsBorderColor:''; -@FontBodyColor:''; -@FontBodySize:14; -@FontBodyLineHeight:18; -@FontBodyFamily:Open Sans; -@FontBodyFamily_weight:300; -@FontBodyFamily_style:''; -@FontBodyFamily_type:google; -@FontNavFontColor:rgba(255, 255, 255, 0.84); -@FontNavFontActiveColor:rgb(255, 255, 255); -@FontNavSize:18; -@FontNavLineHeight:43; -@FontNavFamily:Open Sans; -@FontNavFamily_weight:300; -@FontNavFamily_style:''; -@FontNavFamily_type:google; -@FontPreHeaderFontColor:rgba(255, 255, 255, 0.6); -@FontPreHeaderFontColorHover:rgb(255, 255, 255); -@FontPreHeaderFontSize:12; -@FontPreHeaderLineHeight:34; -@FontPreHeaderFamily:Arial, Helvetica; -@FontPreHeaderFamily_weight:normal; -@FontPreHeaderFamily_style:normal; -@FontPreHeaderFamily_type:safe; -@FontH1Color:rgb(230, 126, 34); -@FontH1Size:24; -@FontH1LineHeight:26; -@FontH1TopMargin:20; -@FontH1BottomMargin:20; -@FontH1Family:Open Sans; -@FontH1Family_weight:300; -@FontH1Family_style:''; -@FontH1Family_type:google; -@FontH2Color:rgb(230, 126, 34); -@FontH2Size:18; -@FontH2LineHeight:18; -@FontH2TopMargin:5; -@FontH2BottomMargin:10; -@FontH2Family:Open Sans; -@FontH2Family_weight:300; -@FontH2Family_style:''; -@FontH2Family_type:google; -@FontH3Color:rgb(230, 126, 34); -@FontH3Size:18; -@FontH3LineHeight:16; -@FontH3TopMargin:10; -@FontH3BottomMargin:10; -@FontH3Family:Open Sans; -@FontH3Family_weight:300; -@FontH3Family_style:''; -@FontH3Family_type:google; -@FontH4Color:''; -@FontH4Size:14; -@FontH4LineHeight:14; -@FontH4TopMargin:5; -@FontH4BottomMargin:10; -@FontH4Family:Open Sans; -@FontH4Family_weight:300; -@FontH4Family_style:''; -@FontH4Family_type:google; -@FontH5Color:''; -@FontH5Size:12; -@FontH5LineHeight:12; -@FontH5TopMargin:5; -@FontH5BottomMargin:10; -@FontH5Family:Open Sans; -@FontH5Family_weight:300; -@FontH5Family_style:''; -@FontH5Family_type:google; -@FontH6Color:''; -@FontH6Size:12; -@FontH6LineHeight:12; -@FontH6TopMargin:5; -@FontH6BottomMargin:10; -@FontH6Family:Open Sans; -@FontH6Family_weight:300; -@FontH6Family_style:''; -@FontH6Family_type:google; -@FontSmallColor:''; -@FontSmallSize:18; -@FontSmallLineHeight:24; -@FontSmallTopMargin:5; -@FontSmallBottomMargin:10; -@FontSmallFamily:Open Sans; -@FontSmallFamily_weight:300; -@FontSmallFamily_style:''; -@FontSmallFamily_type:google; -@FontBlockquoteColor:''; -@FontBlockquoteSize:18; -@FontBlockquoteLineHeight:24; -@FontBlockquoteTopMargin:5; -@FontBlockquoteBottomMargin:10; -@FontBlockquoteFamily:Open Sans; -@FontBlockquoteFamily_weight:300; -@FontBlockquoteFamily_style:''; -@FontBlockquoteFamily_type:google; -@FontHighlightedColor:''; -@FontHighlightedBackgroundColor:rgb(230, 126, 34); -@FontHighlightedFamily:Open Sans; -@FontHighlightedFamily_weight:300; -@FontHighlightedFamily_style:''; -@FontHighlightedFamily_type:google; -@FontLeadColor:rgb(230, 126, 34); -@FontLeadSize:26; -@FontLeadLineHeight:28; -@FontLeadTopMargin:5; -@FontLeadBottomMargin:15; -@FontLeadFamily:Open Sans; -@FontLeadFamily_weight:300; -@FontLeadFamily_style:''; -@FontLeadFamily_type:google; -@FontButtonColor:rgba(255, 255, 255, 0.92); -@FontButtonBackgroundColor:rgb(230, 126, 34); -@FontButtonColorHover:rgba(255, 255, 255, 0.55); -@FontButtonBackgroundColorHover:rgba(230, 126, 34, 0.74); -@FontButtonSize:24; -@FontButtonLineHeight:24; -@FontButtonPadding:10; -@FontButtonFamily:Open Sans; -@FontButtonFamily_weight:300; -@FontButtonFamily_style:''; -@FontButtonFamily_type:google; -@FontLinkColor:rgb(230, 126, 34); -@FontLinkColorHover:rgba(230, 126, 34, 0.84); -/***end-lessParam***/ -/************************************************************************/ - -/************************************************************************/ -/* Less Base Style */ -/************************************************************************/ -/***start-baseStyle***/ - -/**********************************************************/ -/* General */ -/**********************************************************/ - -h1, h2, h3, h4, h5, h6 { - text-rendering: optimizelegibility; -} - -.highlighted { - padding: 0 4px 2px; -} - -.button { - border: 0; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - padding: 12px 15px 14px; - margin-top: 10px; - display: inline-block; - margin-bottom: 0; - font-size: 14px; - text-align: center; - vertical-align: middle; - cursor: pointer; -} - -/**********************************************************/ -/* Wrapper for wide or boxed view */ -/**********************************************************/ - -.wrapper { - - transition: all .20s ease-in-out; - -moz-transition: all .20s ease-in-out; - -webkit-transition: all .20s ease-in-out; - - padding-right: 0px; - padding-left: 0px; - margin-right: auto; - margin-left: auto; -} - -.social-row, logo-row, nav-row { - padding-right: 0px; - padding-left: 0px; - margin-right: auto; - margin-left: auto; - width: 100%; - overflow: hidden; -} - -.wrapper.content, -.wrapper.footer { - overflow:hidden; -} - -.wrapper.content { - min-height: 40px; -} - -/**********************************************************/ -/* logo */ -/**********************************************************/ - -.logo { - max-width:350px; - font-size:0px; - margin:15px 0px 15px 0; - float:left; - - transition: all .20s ease-in-out; - -moz-transition: all .20s ease-in-out; - -webkit-transition: all .20s ease-in-out; -} - -.logo img { - max-width:100% -} - -/**********************************************************/ -/* navigation */ -/**********************************************************/ - -.navbar-default .navbar-nav > li > a.fa, -.navbar-default .navbar-nav > li > a.fa:focus { - font-family: FontAwesome; -} - -.navbar { - background: none; - border:none; - min-height: 0px; - margin-bottom: 0px; - border-radius: 0px; - -webkit-border-radius: 0px; - - transition: all .20s ease-in-out; - -moz-transition: all .20s ease-in-out; - -webkit-transition: all .20s ease-in-out; -} - -.navbar-default .navbar-collapse { - border: none; - max-height: none; - - transition: all .20s ease-in-out; - -moz-transition: all .20s ease-in-out; - -webkit-transition: all .20s ease-in-out; -} - -.navbar-default .navbar-nav > .open > a, -.navbar-default .navbar-nav > .open > a:hover, -.navbar-default .navbar-nav > .open > a:focus, -.navbar-default .navbar-nav > .active > a, -.navbar-default .navbar-nav > li > a:hover, -.navbar-default .navbar-nav > .active > a:hover, -.navbar-default .navbar-nav > .active > a:focus, -.navbar-default .dropdown-menu>li>a:hover { - background:none; -} - -.navbar-default .dropdown-menu { - border: none; - margin:0; - padding:0; - min-width:initial; -} - -.navbar-default .nav > li > a { - padding: 0; - transition: all .20s ease-in-out; - -moz-transition: all .20s ease-in-out; - -webkit-transition: all .20s ease-in-out; -} - -.navbar-default .dropdown-menu > li > a { - padding: 0; -} - -.navbar-default .dropdown-menu > li > a { - padding: 10px 10px 10px 10px; -} - -.navbar-default .navbar-nav > li > a { - padding: 0px 10px 0px 10px; -} - -.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus { - background: none; -} - -@media (min-width: 768px) { - - .navbar-default .navbar-nav > li { - margin-left: 5px; - } - - .navbar-nav > li:first-child { - margin-left: 0px; - } - - .navbar-default .dropdown-menu { - margin:0; - padding:0; - } - - .navbar-collapse { - padding-right: 0px; - padding-left: 0px; - } - -} - -@media (max-width: 768px) { - - .navbar-default .navbar-nav li { - margin-bottom: 3px; - } - - .navbar-default .navbar-nav .open .dropdown-menu { - -webkit-border-radius: 0px; - border-radius: 0px; - margin-top:3px; - } - - .navbar-default .navbar-nav { - margin: 0 -15px; - } - - .navbar-default .navbar-collapse { - margin-left: -15px; - margin-right: -15px; - } - - .navbar-default .navbar-nav > li > a , - .navbar-default .dropdown-menu > li > a { - padding: 10px 10px 10px 10px; - } - - .navbar-default .navbar-nav .open .dropdown-menu > li > a { - padding: 10px 0px 10px 25px; - } - - .navbar-toggle { - margin: 15px 0 15px 0; - } -} - -/**********************************************************/ -/* social list */ -/**********************************************************/ - -.social-bar { - list-style:none; - margin-top:0; - padding: 0 15px 0 10px; - margin: 0px -15px 0px -15px; - line-height: 0px; - font-size: 0px; -} - -.social-bar li { - display:inline-block; - margin-left:5px; -} - -.social-bar li a { - cursor:pointer; - padding: 0 2px 0 2px; -} - -.social-bar li a:hover { - text-decoration:none; -} - -.social-bar li a span { - display:none; -} - -/**********************************************************/ -/* nav search */ -/**********************************************************/ - -#nav-search-form { - padding: 15px; -} - -#nav-search-form button { - padding: 5px; - -webkit-border-radius: 2px; - border-radius: 2px; - background: transparent; - border: none; -} - -#nav-search-form a, #nav-search-form button { - margin-left:5px -} - -#nav-search-form input { - padding: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; -} - -@media (min-width: 768px) { - #nav-search-form { - margin-left: -203px; - width:238px; - } -} - -@media (max-width: 768px) { - #nav-search-form input { - width: 93%; - } -} - -/**********************************************************/ -/* usky-grid */ -/**********************************************************/ - -.uSky-grid .container { - padding-top: 30px; - padding-bottom: 30px; - padding-right: 30px; - padding-left: 30px; -} - -/**********************************************************/ -/* jumbotron */ -/**********************************************************/ - -.jumbotron { - font-size: inherit; - font-weight: inherit; - line-height: inherit; - color: inherit; - background-color: #e3e1e1; - margin-bottom:0px; -} - -.container .jumbotron { - padding: 15px; -} - -/**********************************************************/ -/* thumbnail */ -/**********************************************************/ - -.thumbnail { - margin-bottom:0px; - min-height:400px; -} - -.thumbnail-container { - margin: 0 -15px; -} - -.thumbnail .caption { - padding: 0 10px 10px 10px; - color: inherit; -} - -.thumbnail>a>img { - display: block; - height: auto; - max-width: 100%; - margin-right: auto; - margin-left: auto; -} - -@media (max-width: 991px) { - .thumbnail-container .col-md-3 { - margin: 30px 0 0 0; - } - - .thumbnail-container .col-md-3:first-child { - margin: 0 0 0 0; - } -} - -/**********************************************************/ -/* Search results list */ -/**********************************************************/ - -.search-results-list { - margin:0; - padding:0; - list-style:none; -} - -.search-results-list li p { - margin-left: 20px; -} - -.search-results-list i { - margin-right: 10px; -} - - -/***end-baseStyle***/ -/************************************************************************/ - -/************************************************************************/ -/* Less parameters */ -/************************************************************************/ -/***start-lessFonts***/ - -body { - font-family:@FontBodyFamily,Verdana,Arial,Helvetica,sans-serif; - font-weight:@FontBodyFamily_weight; - font-style:@FontBodyFamily_style; - font-size:@FontBodySize + 0px; - color:@FontBodyColor; - line-height:@FontBodyLineHeight + 0px; -} - -h1 { - font-family:@FontH1Family,Verdana,Arial,Helvetica,sans-serif; - font-weight:@FontH1Family_weight; - font-style:@FontH1Family_style; - font-size:@FontH1Size + 0px; - color:@FontH1Color; - margin-top:@FontH1TopMargin + 0px; - margin-bottom:@FontH1BottomMargin + 0px; - line-height:@FontH1LineHeight + 0px; -} - -h2 { - font-family:@FontH2Family,Verdana,Arial,Helvetica,sans-serif; - font-weight:@FontH2Family_weight; - font-style:@FontH2Family_style; - font-size:@FontH2Size + 0px; - color:@FontH2Color; - margin-top:@FontH2TopMargin + 0px; - margin-bottom:@FontH2BottomMargin + 0px; - line-height:@FontH2LineHeight + 0px; -} - -h3 { - font-family:@FontH3Family,Verdana,Arial,Helvetica,sans-serif; - font-weight:@FontH3Family_weight; - font-style:@FontH3Family_style; - font-size:@FontH3Size + 0px; - color:@FontH3Color; - margin-top:@FontH3TopMargin + 0px; - margin-bottom:@FontH3BottomMargin + 0px; - line-height:@FontH3LineHeight + 0px; -} - -h4 { - font-family:@FontH4Family,Verdana,Arial,Helvetica,sans-serif; - font-weight:@FontH4Family_weight; - font-style:@FontH4Family_style; - font-size:@FontH4Size + 0px; - color:@FontH4Color; - margin-top:@FontH4TopMargin + 0px; - margin-bottom:@FontH4BottomMargin + 0px; - line-height:@FontH4LineHeight + 0px; -} - -h5 { - font-family:@FontH5Family,Verdana,Arial,Helvetica,sans-serif; - font-weight:@FontH5Family_weight; - font-style:@FontH5Family_style; - font-size:@FontH5Size + 0px; - color:@FontH5Color; - margin-top:@FontH5TopMargin + 0px; - margin-bottom:@FontH5BottomMargin + 0px; - line-height:@FontH5LineHeight + 0px; -} - -h6 { - font-family:@FontH6Family,Verdana,Arial,Helvetica,sans-serif; - font-weight:@FontH6Family_weight; - font-style:@FontH6Family_style; - font-size:@FontH6Size + 0px; - color:@FontH6Color; - margin-top:@FontH6TopMargin + 0px; - margin-bottom:@FontH6BottomMargin + 0px; - line-height:@FontH6LineHeight + 0px; -} - -blockquote { - padding: 10px @FontBlockquoteLineHeight + 0px; - margin: 0 0 @FontBlockquoteLineHeight + 0px; - border-left: 5px solid @FontBlockquoteColor; - margin-top:@FontBlockquoteTopMargin + 0px; - margin-bottom:@FontBlockquoteBottomMargin + 0px; - font-family:@FontBlockquoteFamily,Verdana,Arial,Helvetica,sans-serif; - font-weight:@FontBlockquoteFamily_weight; - font-style:@FontBlockquoteFamily_style; - font-size:@FontBlockquoteSize + 0px; - color:@FontBlockquoteColor; - line-height:@FontBlockquoteLineHeight + 0px; -} - -.Small { - font-family:@FontSmallFamily,Verdana,Arial,Helvetica,sans-serif; - font-weight:@FontSmallFamily_weight; - font-style:@FontSmallFamily_style; - font-size:@FontSmallSize + 0px; - color:@FontSmallColor; - margin-top:@FontSmallTopMargin + 0px; - margin-bottom:@FontSmallBottomMargin + 0px; - line-height:@FontSmallLineHeight + 0px; -} - -.highlighted { - font-family:@FontHighlightedFamily,Verdana,Arial,Helvetica,sans-serif; - font-weight:@FontHighlightedFamily_weight; - font-style:@FontHighlightedFamily_style; - color:@FontHighlightedColor; - background-color:@FontHighlightedBackgroundColor; -} - -.lead { - font-family:@FontLeadFamily,Verdana,Arial,Helvetica,sans-serif; - font-weight:@FontLeadFamily_weight; - font-style:@FontLeadFamily_style; - font-size:@FontLeadSize + 0px; - color:@FontLeadColor; - margin-top:@FontLeadTopMargin + 0px; - margin-bottom:@FontLeadBottomMargin + 0px; - line-height:@FontLeadLineHeight + 0px; -} - -.button { - color:@FontButtonColor; - background-color:@FontButtonBackgroundColor; - font-size:@FontButtonSize + 0px; - line-height:@FontButtonLineHeight + 0px; - padding:@FontButtonPadding + 0px; - font-family:@FontButtonFamily,Verdana,Arial,Helvetica,sans-serif; - font-weight:@FontButtonFamily_weight; - font-style:@FontButtonFamily_style; -} - -.button:hover { - color:@FontButtonColorHover; - background-color:@FontButtonBackgroundColorHover; -} - -.navbar-default .navbar-nav > li > a, -.navbar-default .navbar-nav > li > a:focus, -.navbar-default .navbar-nav .open .dropdown-menu > li > a, -.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { - font-size:@FontNavSize + 0px; - font-family:@FontNavFamily; - font-weight:@FontNavFamily_weight; - font-style:@FontNavFamily_style; -} - -a { - color:@FontLinkColor; -} - -a:hover { - color:@FontLinkColorHover; -} -/***end-lessFonts***/ - -/************************************************************************/ -/* Less parameters */ -/************************************************************************/ -/***start-lessStyles***/ - -/* BACKGROUND */ - -.body-cover () when (@backgroundBodyCover = true) { - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; -} - -.maincolumn-cover () when (@backgroundMainColumnCover = true) { - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; -} - -.header-cover () when (@backgroundHeaderCover = true) { - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; -} - -.footer-cover () when (@backgroundFooterCover = true) { - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; -} - -body { - background-color:@backgroundBodyColor; - background: -moz-linear-gradient(top, @backgroundBodyColor 41%,@backgroundBodyGradientColor 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(41%,@backgroundBodyColor), color-stop(100%,@backgroundBodyGradientColor)); - background: -webkit-linear-gradient(top, @backgroundBodyColor 41%,@backgroundBodyGradientColor 100%); - background: -o-linear-gradient(top, @backgroundBodyColor 41%,@backgroundBodyGradientColor 100%); - background: -ms-linear-gradient(top, @backgroundBodyColor 41%,@backgroundBodyGradientColor 100%); - background: linear-gradient(to bottom, @backgroundBodyColor 41%,@backgroundBodyGradientColor 100%); - background-image: @backgroundBodyImageOrPattern; - background-position: @backgroundBodyPosition; - background-repeat: @backgroundBodyRepeat; - background-attachment: @backgroundBodyAttachment; - .body-cover; -} - -.wrapper.content { - background-color:@backgroundMainColumnColor; - background: -moz-linear-gradient(top, @backgroundMainColumnColor 41%,@backgroundMainColumnGradientColor 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(41%,@backgroundMainColumnColor), color-stop(100%,@backgroundMainColumnGradientColor)); - background: -webkit-linear-gradient(top, @backgroundMainColumnColor 41%,@backgroundMainColumnGradientColor 100%); - background: -o-linear-gradient(top, @backgroundMainColumnColor 41%,@backgroundMainColumnGradientColor 100%); - background: -ms-linear-gradient(top, @backgroundMainColumnColor 41%,@backgroundMainColumnGradientColor 100%); - background: linear-gradient(to bottom, @backgroundMainColumnColor 41%,@backgroundMainColumnGradientColor 100%); - background-image: @backgroundMainColumnImageOrPattern; - background-position: @backgroundMainColumnPosition; - background-repeat: @backgroundMainColumnRepeat; - background-attachment: @backgroundMainColumnAttachment; - .maincolumn-cover; -} - -.wrapper.header { - background-color:@backgroundHeaderColor; - background: -moz-linear-gradient(top, @backgroundHeaderColor 41%,@backgroundHeaderGradientColor 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(41%,@backgroundHeaderColor), color-stop(100%,@backgroundHeaderGradientColor)); - background: -webkit-linear-gradient(top, @backgroundHeaderColor 41%,@backgroundHeaderGradientColor 100%); - background: -o-linear-gradient(top, @backgroundHeaderColor 41%,@backgroundHeaderGradientColor 100%); - background: -ms-linear-gradient(top, @backgroundHeaderColor 41%,@backgroundHeaderGradientColor 100%); - background: linear-gradient(to bottom, @backgroundHeaderColor 41%,@backgroundHeaderGradientColor 100%); - background-image: @backgroundHeaderImageOrPattern; - background-position: @backgroundHeaderPosition; - background-repeat: @backgroundHeaderRepeat; - background-attachment: @backgroundHeaderAttachment; - .header-cover; -} - -.wrapper.footer { - background-color:@backgroundFooterColor; - background: -moz-linear-gradient(top, @backgroundFooterColor 41%,@backgroundFooterGradientColor 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(41%,@backgroundFooterColor), color-stop(100%,@backgroundFooterGradientColor)); - background: -webkit-linear-gradient(top, @backgroundFooterColor 41%,@backgroundFooterGradientColor 100%); - background: -o-linear-gradient(top, @backgroundFooterColor 41%,@backgroundFooterGradientColor 100%); - background: -ms-linear-gradient(top, @backgroundFooterColor 41%,@backgroundFooterGradientColor 100%); - background: linear-gradient(to bottom, @backgroundFooterColor 41%,@backgroundFooterGradientColor 100%); - background-image: @backgroundFooterImageOrPattern; - background-position: @backgroundFooterPosition; - background-repeat: @backgroundFooterRepeat; - background-attachment: @backgroundFooterAttachment; - .footer-cover; -} - -/* MAIN */ - -.full () when (@stylingMainColumnBoxed = full) { - width:100% !important; -} - -.wide-wrapper () when (@stylingMainColumnBoxed = wide) { - width:100%; -} - -.wide-wrapper-1200 () when (@stylingMainColumnBoxed = boxed) { - width: 1140px; -} - -.wide-wrapper-992 () when (@stylingMainColumnBoxed = boxed) { - width: 940px; -} - -.wide-wrapper-768 () when (@stylingMainColumnBoxed = boxed) { - width: 720px; -} - -.wide-container () when (@stylingMainColumnBoxed = boxed) { - width:100%; -} - -.wide-usky-grid-full-size() when (@stylingMainColumnBoxed = wide) { - width:100%; overflow: hidden; -} - - -.boxed-shadow () when (@stylingMainColumnBoxed = boxed) { - .drop-shadow(0, 0, @stylingMainColumnShadow + 0px, 0.5); -} - -.boxed-wrapper-header-round () when ( @stylingMainColumnTopMargin > 0 ) { - .rounded(@stylingMainColumnRadius + 0px); -} - -.boxed-wrapper-header () when ( @stylingMainColumnBoxed = boxed ) { - /*padding-top: @stylingMainColumnRadius + 0px; - padding-bottom: @stylingMainColumnRadius + 0px;*/ - margin-top: @stylingHeaderTopMargin + 0px; - .border-radius(@stylingMainColumnRadius + 0px, 0, 0, @stylingMainColumnRadius + 0px); - .boxed-wrapper-header-round; -} - -.wrapper-content() when (@stylingMainColumnBoxed = boxed) { - margin-top: @stylingMainColumnTopMargin + 0px; - .wrapper-content-top-radius; - .wrapper-content-bottom-radius; - .wrapper-content-all-radius; -} - -.wrapper-content-top-radius() when (@stylingMainColumnTopMargin > 0) { - .border-radius(@stylingMainColumnRadius + 0px, 0, 0, @stylingMainColumnRadius + 0px); - /*padding-top: @stylingMainColumnRadius + 0px;*/ -} - -.wrapper-content-bottom-radius() when (@stylingFooterTopMargin > 0) { - .border-radius(0, @stylingMainColumnRadius + 0px, @stylingMainColumnRadius + 0px, 0); - /*padding-bottom: @stylingMainColumnRadius + 0px;*/ -} - -.wrapper-content-all-radius() when (@stylingFooterTopMargin > 0) and (@stylingMainColumnTopMargin > 0) { - .rounded(@stylingMainColumnRadius + 0px); - /*padding-top: @stylingMainColumnRadius + 0px; - padding-bottom: @stylingMainColumnRadius + 0px;*/ -} - -.container { - .full; -} - -.wrapper.header { - border-top: @stylingHeaderTopBorderSize + 0px solid @stylingHeaderTopBorderColor; - border-bottom: @stylingHeaderBottomBorderSize + 0px solid @stylingHeaderBottomBorderColor; -} - -@media (min-width: 768px) { - - .wrapper { .wide-wrapper; } - .usky-grid-full-size .container { .wide-usky-grid-full-size; } - - .wrapper { .wide-wrapper-768; } - .wrapper .container { .wide-container; } - - .wrapper.header, - .wrapper.content, - .wrapper.footer { - .boxed-shadow; - } - - .wrapper.header { - .boxed-wrapper-header; - min-height: @stylingHeaderMinHeight + 0px; - } - - .wrapper.content { - .wrapper-content - } - - .wrapper-footer() when (@stylingMainColumnBoxed = boxed) { - margin-top: @stylingFooterTopMargin + 0px; - margin-bottom: @stylingFooterBottompMargin + 0px; - .border-radius(0, @stylingMainColumnRadius + 0px, @stylingMainColumnRadius + 0px, 0); - padding-bottom: @stylingMainColumnRadius + 0px; - .wrapper-footer-rounded; - } - - .wrapper-footer-rounded() when (@stylingFooterTopMargin > 0) { - .rounded(@stylingMainColumnRadius + 0px); - padding-bottom: @stylingMainColumnRadius + 0px; - } - - .wrapper.footer { - .wrapper-footer; - } - - -} - -@media (min-width: 992px) { - .wrapper { .wide-wrapper-992 } -} - -@media (min-width: 1200px) { - .wrapper { .wide-wrapper-1200 } -} - -/* */ - -.preHeader-row-none () when (@styPreHeaderDisplay = none) { - display:none; -} - -.social-bar-block-left () when (@styPreHeaderDisplay = block-left) { - float: left; -} - -.social-bar-block-right () when (@styPreHeaderDisplay = block-right) { - float: right; -} - -.social-bar-block-left-text () when (@styPreHeaderDisplay = block-left) { - text-align: left; -} - -.social-bar-block-right-text () when (@styPreHeaderDisplay = block-right) { - text-align: right; -} - -.social-bar-block-left-rev () when (@styPreHeaderDisplay = block-left) { - float: right; -} - -.social-bar-block-right-rev () when (@styPreHeaderDisplay = block-right) { - float: left; -} - -.social-bar-float-left () when (@styPreHeaderDisplay = float-left) { - border-top: @styPreHeaderBorderTopSize + 0px solid @styPreHeaderBorderTopColor; - border-bottom: @styPreHeaderBorderBottomSize + 0px solid @styPreHeaderBorderBottomColor; - float: left; -} - -.social-bar-float-right () when (@styPreHeaderDisplay = float-right) { - border-top: @styPreHeaderBorderTopSize + 0px solid @styPreHeaderBorderTopColor; - border-bottom: @styPreHeaderBorderBottomSize + 0px solid @styPreHeaderBorderBottomColor; - text-align: right; -} - -.social-bar-float-left-text () when (@styPreHeaderDisplay = float-left) { - text-align: left; -} - -.social-bar-float-right-text () when (@styPreHeaderDisplay = float-right) { - float: right; -} - -.preHeader-row-float-left () when (@styPreHeaderDisplay = float-left) { - background: none; - border: none; -} - -.preHeader-row-float-right () when (@styPreHeaderDisplay = float-right) { - background: none; - border: none; -} - -.preHeader-row { - .preHeader-row-none; - background-color: @styPreHeaderBackgroundColor; - border-top: @styPreHeaderBorderTopSize + 0px solid @styPreHeaderBorderTopColor; - border-bottom: @styPreHeaderBorderBottomSize + 0px solid @styPreHeaderBorderBottomColor; -} - -.social-bar { - .social-bar-block-left; - .social-bar-block-right; -} - -.contact-text{ - color: @FontPreHeaderFontColor; - font-size: @FontPreHeaderFontSize + 0px; - line-height: @FontPreHeaderLineHeight + 0px; - .social-bar-block-left-rev; - .social-bar-block-right-rev; - font-family:@FontPreHeaderFamily; - font-weight:@FontPreHeaderFamily_weight; - font-style:@FontPreHeaderFamily_style; -} - -.social-bar li a { - color: @FontPreHeaderFontColor; - font-size: @FontPreHeaderFontSize + 0px; - line-height: @FontPreHeaderLineHeight + 0px; -} - -.social-bar li a:hover { - color: @FontPreHeaderFontColorHover; -} - -@media (min-width: 768px) { - - .preHeader-row { - .preHeader-row-float-left; - .preHeader-row-float-right; - } - - .preHeader-container { - .social-bar-float-left; - .social-bar-float-right; - .social-bar-float-left-text; - .social-bar-float-right-text; - background-color: @styPreHeaderBackgroundColor; - margin-top:@styPreHeaderTopMargin + 0px; - } - -} - -/* NAVIGATION */ - -.condition1 () when (@stylingNavDisplay = none) { - display:none; -} - -.condition2 () when (@stylingNavDisplay = block-right) { - background-color: @stylingNavBackgroundColor; -} - -.condition3 () when (@stylingNavDisplay = block-left) { - background-color: @stylingNavBackgroundColor; -} - -.condition4 () when (@stylingNavDisplay = float-right) { - float: left; -} - -.condition5 () when (@stylingNavDisplay = float-left) { - float: right; -} - -.condition6 () when (@stylingNavDisplay = block-right) { - margin-top: @stylingNavMarginTop + 0px; -} - -.condition7 () when (@stylingNavDisplay = block-left) { - margin-top: @stylingNavMarginTop + 0px; -} - -.condition8 () when (@stylingNavDisplay = block-right) { - clear:both; margin-left:-15px; margin-right:-15px; padding-left:15px; padding-right:15px; -} - -.condition9 () when (@stylingNavDisplay = block-left) { - clear:both; margin-left:-15px; margin-right:-15px; padding-left:15px; padding-right:15px; -} - -.condition10 () when (@stylingNavDisplay = float-right) { - margin-top: @stylingNavMarginTop + 0px !important; - float: right; -} - -.condition11 () when (@stylingNavDisplay = float-left) { - margin-top: @stylingNavMarginTop + 0px !important; - float: left; -} - -.condition12 () when (@stylingNavDisplay = block-right) { - float: right; -} - -.condition13 () when (@stylingNavDisplay = block-left) { - float: left; -} - -.condition14 () when (@stylingNavDisplay = float-right) { - background-color: @stylingNavBackgroundColor; - .condition16; - .condition17; -} - -.condition15 () when (@stylingNavDisplay = float-left) { - background-color: @stylingNavBackgroundColor; - .condition18; - .condition19; -} - -.condition16 () when (@stylingNavRadiusOnlyTop = false) { - .rounded(@stylingNavRadius + 0px); -} - -.condition17 () when (@stylingNavRadiusOnlyTop = true) { - .border-radius(@stylingNavRadius + 0px, 0, 0, @stylingNavRadius + 0px); -} - -.condition18 () when (@stylingNavRadiusOnlyTop = false) { - .rounded(@stylingNavRadius + 0px); -} - -.condition19 () when (@stylingNavRadiusOnlyTop = true) { - .border-radius(@stylingNavRadius + 0px, 0, 0, @stylingNavRadius + 0px); -} - -.condition20 () when (@stylingNavRadiusOnlyTop = false) { - .rounded(@stylingNavRadius + 0px); -} - -.condition21 () when (@stylingNavRadiusOnlyTop = true) { - .border-radius(@stylingNavRadius + 0px, 0, 0, @stylingNavRadius + 0px); -} - -.nav-row { - .condition1; - .condition2; - .condition3; -} - -.navbar-default .navbar-nav > li > a, -.navbar-default .navbar-nav > li > a:focus, -.navbar-default .navbar-nav .open .dropdown-menu > li > a, -.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { - color: @FontNavFontColor; -} - -.navbar-default .navbar-nav > .open > a, -.navbar-default .navbar-nav > .open > a:hover, -.navbar-default .navbar-nav > .open > a:focus, -.navbar-default .navbar-nav > .active > a, -.navbar-default .navbar-nav > li > a:hover, -.navbar-default .navbar-nav > .active > a:hover, -.navbar-default .navbar-nav > .active > a:focus, -.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, -.navbar-default .navbar-nav .open .dropdown-menu > .active > a, -.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover { - background-color: @stylingNavBackgroundActiveColor; - color: @FontNavFontActiveColor; -} - -.logo { - .condition4; - .condition5; -} - -@media (min-width: 768px) { - - .nav-row { - .condition6; - .condition7; - } - - .logo { - margin-top: @stylingHeaderLogoTopMargin + 0px; - } - - .navbar { - .condition8; - .condition9; - .condition10; - .condition11; - } - - .navbar-default .navbar-nav { - .condition12; - .condition13; - .condition14; - .condition15; - } - - .navbar-default .navbar-nav > li > a, - .navbar-default .navbar-nav > li > a:focus { - border-top: @stylingNavItemTopBorderActiveSize + 0px solid transparent; - border-bottom: @stylingNavItemBottomBorderActiveSize + 0px solid transparent; - line-height: @FontNavLineHeight + 0px; - } - - .navbar-default .navbar-nav > .open > a, - .navbar-default .navbar-nav > .open > a:hover, - .navbar-default .navbar-nav > .open > a:focus, - .navbar-default .navbar-nav > .active > a, - .navbar-default .navbar-nav > li > a:hover, - .navbar-default .navbar-nav > .active > a:hover, - .navbar-default .navbar-nav > .active > a:focus { - border-top: @stylingNavItemTopBorderActiveSize + 0px solid @stylingNavItemTopBorderActiveColor; - border-bottom: @stylingNavItemBottomBorderActiveSize + 0px solid @stylingNavItemBottomBorderActiveColor; - .condition20; - .condition21; - } - -} - -/* dropdown-menu */ - -.condition22 () when (@stylingNavRadiusOnlyTop = true) { - .border-radius(0, @stylingNavRadius + 0px, @stylingNavRadius + 0px, 0px); - padding-top: @stylingNavRadius + 0px; -} - -.navbar-default .navbar-nav > .dropdown > a .caret, -.navbar-default .navbar-nav > .dropdown > a:focus .caret -{ - border-top-color: @FontNavFontColor; - border-bottom-color: @FontNavFontColor; -} - -.navbar-default .navbar-nav > .dropdown.open > a .caret, -.navbar-default .navbar-nav > .dropdown > a:hover .caret { - border-top-color: @FontNavFontActiveColor; - border-bottom-color: @FontNavFontActiveColor; -} - -.navbar-default .dropdown-menu .divider { - background-color: @stylingNavBackgroundActiveColor; -} - -.navbar-default .dropdown-menu > li > a { - color: @FontNavFontColor; -} - -.navbar-default .dropdown-menu > li > a:hover { - background-color: @stylingNavBackgroundActiveColor; - color: @FontNavFontActiveColor; -} - -.navbar-default .navbar-nav > li > .dropdown-menu, language -{ - background-color: @stylingNavBackgroundDdl; -} - -@media (min-width: 768px) { - .navbar-default .navbar-nav > li > .dropdown-menu { - .condition22; - padding-bottom: @stylingNavRadius + 0px; - } -} - -/* Search */ - -#nav-search-form a, #nav-search-form button { - color: @FontNavFontColor; -} - -#nav-search-form input { - border:1px solid @FontNavFontColor; -} - -/* SearchNavbar-Toggle */ - -.condition23 () when (@stylingNavDisplay = block-right) { - float: right; -} - -.condition24 () when (@stylingNavDisplay = block-left) { - float: left; -} - -.navbar-default .navbar-toggle { - border-color: @FontNavFontColor; - .condition23; - .condition24; -} - -.navbar-default .navbar-toggle .icon-bar { - background-color: @FontNavFontColor; -} - -.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { - background-color: @stylingNavBackgroundActiveColor; -} - -/* Boxes */ - -.jumbotron { - min-height: @stylingBoxesMinHeight + 0px; - .rounded(@stylingBoxesRadius + 0px); - border: @stylingBoxesBorderSize + 0px solid @stylingBoxesBorderColor; -} - -.container .jumbotron { - .rounded(@stylingBoxesRadius + 0px); - background-color: @stylingBoxesBackgroundColor; -} - -/* Thumbnail */ - -.thumbnail { - min-height: @stylingThumbnailsMinHeight + 0px; - .rounded(@stylingThumbnailsRadius + 0px); - border: @stylingThumbnailsBorderSize + 0px solid @stylingThumbnailsBorderColor; - background-color: @stylingThumbnailsBackgroundColor; -} - -/***end-lessStyles***/ - -/************************************************************************/ -/* Less ELEMENT */ -/************************************************************************/ -/***start-lessElement***/ - -/* ELEMENT */ - -.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { - background: @color; - background: -webkit-gradient(linear, - left bottom, - left top, - color-stop(0, @start), - color-stop(1, @stop)); - background: -ms-linear-gradient(bottom, - @start, - @stop); - background: -moz-linear-gradient(center bottom, - @start 0%, - @stop 100%); - background: -o-linear-gradient(@stop, - @start); - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start)); -} -.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) { - background: @color; - background: -webkit-gradient(linear, - left bottom, - left top, - color-stop(0, rgb(@start,@start,@start)), - color-stop(1, rgb(@stop,@stop,@stop))); - background: -ms-linear-gradient(bottom, - rgb(@start,@start,@start) 0%, - rgb(@stop,@stop,@stop) 100%); - background: -moz-linear-gradient(center bottom, - rgb(@start,@start,@start) 0%, - rgb(@stop,@stop,@stop) 100%); - background: -o-linear-gradient(rgb(@stop,@stop,@stop), - rgb(@start,@start,@start)); - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start))); -} -.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) { - border-top: solid 1px @top-color; - border-left: solid 1px @left-color; - border-right: solid 1px @right-color; - border-bottom: solid 1px @bottom-color; -} -.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) { - -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); - -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); - box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); -} -.rounded(@radius: 2px) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; -} -.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { - -webkit-border-top-right-radius: @topright; - -webkit-border-bottom-right-radius: @bottomright; - -webkit-border-bottom-left-radius: @bottomleft; - -webkit-border-top-left-radius: @topleft; - -moz-border-radius-topright: @topright; - -moz-border-radius-bottomright: @bottomright; - -moz-border-radius-bottomleft: @bottomleft; - -moz-border-radius-topleft: @topleft; - border-top-right-radius: @topright; - border-bottom-right-radius: @bottomright; - border-bottom-left-radius: @bottomleft; - border-top-left-radius: @topleft; - .background-clip(padding-box); -} -.opacity(@opacity: 0.5) { - -moz-opacity: @opacity; - -khtml-opacity: @opacity; - -webkit-opacity: @opacity; - opacity: @opacity; - @opperc: @opacity * 100; - -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})"; - filter: ~"alpha(opacity=@{opperc})"; -} -.transition-duration(@duration: 0.2s) { - -moz-transition-duration: @duration; - -webkit-transition-duration: @duration; - -o-transition-duration: @duration; - transition-duration: @duration; -} -.transform(...) { - -webkit-transform: @arguments; - -moz-transform: @arguments; - -o-transform: @arguments; - -ms-transform: @arguments; - transform: @arguments; -} -.rotation(@deg:5deg){ - .transform(rotate(@deg)); -} -.scale(@ratio:1.5){ - .transform(scale(@ratio)); -} -.transition(@duration:0.2s, @ease:ease-out) { - -webkit-transition: all @duration @ease; - -moz-transition: all @duration @ease; - -o-transition: all @duration @ease; - transition: all @duration @ease; -} -.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) { - -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); - -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); - box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha); -} -.box-shadow(@arguments) { - -webkit-box-shadow: @arguments; - -moz-box-shadow: @arguments; - box-shadow: @arguments; -} -.box-sizing(@sizing: border-box) { - -ms-box-sizing: @sizing; - -moz-box-sizing: @sizing; - -webkit-box-sizing: @sizing; - box-sizing: @sizing; -} -.user-select(@argument: none) { - -webkit-user-select: @argument; - -moz-user-select: @argument; - -ms-user-select: @argument; - user-select: @argument; -} -.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) { - -moz-column-width: @colwidth; - -moz-column-count: @colcount; - -moz-column-gap: @colgap; - -moz-column-rule-color: @columnRuleColor; - -moz-column-rule-style: @columnRuleStyle; - -moz-column-rule-width: @columnRuleWidth; - -webkit-column-width: @colwidth; - -webkit-column-count: @colcount; - -webkit-column-gap: @colgap; - -webkit-column-rule-color: @columnRuleColor; - -webkit-column-rule-style: @columnRuleStyle; - -webkit-column-rule-width: @columnRuleWidth; - column-width: @colwidth; - column-count: @colcount; - column-gap: @colgap; - column-rule-color: @columnRuleColor; - column-rule-style: @columnRuleStyle; - column-rule-width: @columnRuleWidth; -} -.translate(@x:0, @y:0) { - .transform(translate(@x, @y)); -} -.background-clip(@argument: padding-box) { - -moz-background-clip: @argument; - -webkit-background-clip: @argument; - background-clip: @argument; -} - -/***end-lessElement***/ \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js index e16f239442..8b50cf1b58 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js @@ -11,7 +11,6 @@ var refrechLayout = function (parameters) { eval(string); } - /* Fonts loaded in the tuning panel need to be loaded independently in * the content iframe to allow live previewing. */ @@ -55,15 +54,11 @@ var closeIntelTuning = function (tuningModel) { if (tuningModel) { $("[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"); - } - }); - }); + $.each(tuningModel.configs, function (indexConfig, config) { + if (config.schema) { + $(config.schema).unbind(); + $(config.schema).removeAttr("tuning-over"); + } }); } @@ -74,14 +69,11 @@ var initIntelTuning = function (tuningModel) { if (tuningModel) { // Add tuning-over attr for each schema from config - $.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.name); - } - }); - }); + $.each(tuningModel.configs, function (indexConfig, config) { + var schema = config.selector ? config.selector : config.schema; + if (schema) { + $(schema).attr("tuning-over", config.name); + } }); // Outline tuning-over @@ -142,6 +134,7 @@ var outlinePosition = function (target) { $("#outline-data").css('transition', 'all .05s ease-in-out'); $("#outline-data").css('-moz-transition', 'all .05s ease-in-out'); $("#outline-data").css('-webkit-transition', 'all .05s ease-in-out'); + $("#outline-data").css('z-index', '9999999999999999999999999'); $("#outline-sup").css('display', "block"); $("#outline-sup").css('height', "2px"); @@ -153,6 +146,7 @@ var outlinePosition = function (target) { $("#outline-sup").css('transition', 'all .05s ease-in-out'); $("#outline-sup").css('-moz-transition', 'all .05s ease-in-out'); $("#outline-sup").css('-webkit-transition', 'all .05s ease-in-out'); + $("#outline-sup").css('z-index', '9999999999999999999999999'); $("#outline-inf").css('display', "block"); $("#outline-inf").css('height', "2px"); @@ -164,6 +158,7 @@ var outlinePosition = function (target) { $("#outline-inf").css('transition', 'all .05s ease-in-out'); $("#outline-inf").css('-moz-transition', 'all .05s ease-in-out'); $("#outline-inf").css('-webkit-transition', 'all .05s ease-in-out'); + $("#outline-inf").css('z-index', '9999999999999999999999999'); $("#outline-left").css('display', "block"); $("#outline-left").css('height', height + "px"); @@ -175,6 +170,7 @@ var outlinePosition = function (target) { $("#outline-left").css('transition', 'all .05s ease-in-out'); $("#outline-left").css('-moz-transition', 'all .05s ease-in-out'); $("#outline-left").css('-webkit-transition', 'all .05s ease-in-out'); + $("#outline-left").css('z-index', '9999999999999999999999999'); $("#outline-right").css('display', "block"); $("#outline-right").css('height', height + "px"); @@ -186,6 +182,7 @@ var outlinePosition = function (target) { $("#outline-right").css('transition', 'all .05s ease-in-out'); $("#outline-right").css('-moz-transition', 'all .05s ease-in-out'); $("#outline-right").css('-webkit-transition', 'all .05s ease-in-out'); + $("#outline-right").css('z-index', '9999999999999999999999999'); } else { @@ -206,16 +203,75 @@ var outlineHide = function () { var initTuningPanel = function () { - // Looking for grid row - var tuningGridList = [] - $("div[class^='gridrow_']").each(function (index, value) { - tuningGridList.splice(tuningGridList.length + 1, 0, $(value).attr("class")) + // First load the tuning config from file + if (tuningConfig) { + console.info("Tuning config from file is loaded"); + } + else { + console.info("tuning config not found"); + } + + // Add tuning from HTML 5 data tags + $("[data-tuning]").each(function (index, value) { + var tagName = $(value).data("tuning") ? $(value).data("tuning") : $(value)[0].nodeName.toLowerCase(); + var tagSchema = $(value).data("schema") ? $(value).data("schema") : $(value)[0].nodeName.toLowerCase(); + var tagSelector = $(value).data("selector") ? $(value).data("selector") : tagSchema; + var tagEditors = $(value).data("editors"); //JSON.parse(...); + + tuningConfig.configs.splice(tuningConfig.configs.length, 0, { + name: tagName, + schema: tagSchema, + selector: tagSelector, + editors: tagEditors + }); + }); + console.info("HTML5 tags"); + + // For each editor config create a composite alias + $.each(tuningConfig.configs, function (configIndex, config) { + $.each(config.editors, function (editorIndex, editor) { + var clearSchema = config.schema.replace(/[^a-zA-Z0-9]+/g, '').toLowerCase(); + var clearEditor = JSON.stringify(editor).replace(/[^a-zA-Z0-9]+/g, '').toLowerCase(); + editor.alias = clearSchema + clearEditor; + }); + }); + console.info("Alias tags"); + + // Create or update the less file + $.ajax({ + url: "/Umbraco/Api/tuning/Init", + type: 'POST', + dataType: "json", + error: function (err) { + alert(err.responseText) + }, + data: { + config: JSON.stringify(tuningConfig), + pageId: pageId + }, + success: function (data) { + + // Add Less link in head + $("head").append(""); + css = $("head").children(":last"); + css.attr({ + rel: "stylesheet/less", + type: "text/css", + href: data + }); + console.info("Less styles are loaded"); + + // Init Less.js + $.getScript("/Umbraco/lib/Less/less-1.7.0.min.js", function (data, textStatus, jqxhr) { + + // Init panel + if (parent.setFrameIsLoaded) { + parent.setFrameIsLoaded(tuningConfig, tuningPalette); + } + }); + } }); - // Init panel - if (parent.setFrameIsLoaded) { - parent.setFrameIsLoaded(tuningParameterUrl, tuningGridList); - } } $(function () { diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js b/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js index a2fb8ce542..74c574b37c 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.global.js @@ -11,25 +11,11 @@ var refrechIntelTuning = function (name) { if (scope.schemaFocus != name.toLowerCase()) { 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.name && name.toLowerCase() == subSection.name.toLowerCase()) { - isContainer = true; - notFound = false - } - - }); - }); - if (!category.active) { - category.active = isContainer; + $.each(scope.tuningModel.configs, function (indexConfig, config) { + if (config.name && name.toLowerCase() == config.name.toLowerCase()) { + notFound = false } }); - if (notFound) { - scope.tuningModel.categories[0].active = true; - } - scope.$apply(); if (notFound) { scope.schemaFocus = "body"; @@ -43,10 +29,10 @@ var refrechIntelTuning = function (name) { } /* Called when the iframe is first loaded */ -var setFrameIsLoaded = function (tuningParameterUrl, tuningGridList) { +var setFrameIsLoaded = function (tuningConfig, tuningPalette) { var scope = angular.element($("#tuningPanel")).scope(); - scope.tuningParameterUrl = tuningParameterUrl; - scope.tuningGridList = tuningGridList + scope.tuningModel = tuningConfig; + scope.tuningPalette = tuningPalette; scope.enableTuning++; scope.$apply(); } \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/tuning.gridRowStyle.less b/src/Umbraco.Web.UI.Client/src/tuning/tuning.gridRowStyle.less deleted file mode 100644 index 0cef3904b2..0000000000 --- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.gridRowStyle.less +++ /dev/null @@ -1,53 +0,0 @@ - -/************************************************************************/ -/* Grid row -ID- */ -/************************************************************************/ - -/***start-lessParam--ID-***/ -@backgroundRowColor__-ID-:''; -@backgroundRowImageOrPattern__-ID-:''; -@backgroundRowGradientColor__-ID-:''; -@backgroundRowPosition__-ID-:''; -@backgroundRowCover__-ID-:''; -@backgroundRowRepeat__-ID-:''; -@backgroundRowAttachment__-ID-:''; -@rowFullSize__-ID-:false; -/***end-lessParam--ID-***/ - -/***start-gridStyle--ID-***/ -.Row-cover__-ID- () when (@backgroundRowCover__-ID- = true) { --webkit-background-size: cover; --moz-background-size: cover; --o-background-size: cover; -background-size: cover; -} - -.Row-full-size__-ID- () when (@rowFullSize__-ID- = true) { - width:100%; - padding-right: 0px; - padding-left: 0px; - padding-top: 0px; - padding-bottom: 0px -} - -.-ID- { -background-color:@backgroundRowColor__-ID-; -background: -moz-linear-gradient(top, @backgroundRowColor__-ID- 41%,@backgroundRowGradientColor__-ID- 100%); -background: -webkit-gradient(linear, left top, left bottom, color-stop(41%,@backgroundRowColor__-ID-), color-stop(100%,@backgroundRowGradientColor__-ID-)); -background: -webkit-linear-gradient(top, @backgroundRowColor__-ID- 41%,@backgroundRowGradientColor__-ID- 100%); -background: -o-linear-gradient(top, @backgroundRowColor__-ID- 41%,@backgroundRowGradientColor__-ID- 100%); -background: -ms-linear-gradient(top, @backgroundRowColor__-ID- 41%,@backgroundRowGradientColor__-ID- 100%); -background: linear-gradient(to bottom, @backgroundRowColor__-ID- 41%,@backgroundRowGradientColor__-ID- 100%); -background-image: @backgroundRowImageOrPattern__-ID-; -background-position: @backgroundRowPosition__-ID-; -background-repeat: @backgroundRowRepeat__-ID-; -background-attachment: @backgroundRowAttachment__-ID-; -.Row-cover__-ID-;} - -.-ID- .container { - .Row-full-size__-ID-; -} - -/***end-gridStyle--ID-***/ - - diff --git a/src/Umbraco.Web/Editors/TuningController.cs b/src/Umbraco.Web/Editors/TuningController.cs index 781c65f96a..d91d06efbf 100644 --- a/src/Umbraco.Web/Editors/TuningController.cs +++ b/src/Umbraco.Web/Editors/TuningController.cs @@ -55,15 +55,9 @@ namespace Umbraco.Web.Editors // Get style less url var pageId = int.Parse(HttpContext.Current.Request["pageId"]); - var tuningStyleUrl = HttpContext.Current.Request["tuningStyleUrl"]; - - if (string.IsNullOrEmpty(tuningStyleUrl)) - tuningStyleUrl = TuningUtility.tuningStylePath; - else - tuningStyleUrl = HttpContext.Current.Server.MapPath(tuningStyleUrl); // Get all parameters - string paramBlock = TuningUtility.GetLessParameters(tuningStyleUrl, pageId); + string paramBlock = TuningUtility.GetLessParameters(pageId); // Prepare string parameter result string[] paramLines = paramBlock.Trim().Split(new string[] { "\r\n" }, StringSplitOptions.RemoveEmptyEntries); @@ -91,9 +85,10 @@ namespace Umbraco.Web.Editors var parameters = HttpContext.Current.Request["parameters"]; var parametersGrid = HttpContext.Current.Request["parametersGrid"]; var pageId = int.Parse(HttpContext.Current.Request["pageId"]); + var inherited = Boolean.Parse(HttpContext.Current.Request["inherited"]); // Save and compile styles - TuningUtility.SaveAndPublishStyle(parameters, parametersGrid, pageId); + TuningUtility.SaveAndPublishStyle(parameters, pageId, inherited); var resp = new HttpResponseMessage() { @@ -121,6 +116,18 @@ namespace Umbraco.Web.Editors } + [HttpPost] + public string Init() + { + + // Get parameters + var config = HttpContext.Current.Request["config"]; + var pageId = int.Parse(HttpContext.Current.Request["pageId"]); + + return TuningUtility.CreateOrUpdateLessFile(pageId, config); + + } + } } \ No newline at end of file diff --git a/src/Umbraco.Web/TuningUtility.cs b/src/Umbraco.Web/TuningUtility.cs index b33641e73a..1f565b97ab 100644 --- a/src/Umbraco.Web/TuningUtility.cs +++ b/src/Umbraco.Web/TuningUtility.cs @@ -23,45 +23,11 @@ namespace Umbraco.Web internal static class TuningUtility { - internal static string assetBasePath = HttpContext.Current.Server.MapPath(@"\Umbraco\assets\less\"); - internal static string tuningDefaultLessPath = assetBasePath + @"tuning.defaultStyle.less"; - internal static string tuningGridRowStyle = assetBasePath + @"tuning.gridRowStyle.less"; internal static string tuningStylePath = "/Css/tuning/"; internal static string resultLessPath = tuningStylePath + @"{0}.less"; internal static string resultCssPath = tuningStylePath + @"{0}.css"; internal static string frontBasePath = HttpContext.Current.Server.MapPath(@"\Css\tuning\"); - // return the list of all grid's rows' guid for the current page - internal static String[] GetGridRows(int pageId) - { - - List result = new List(); - - // Load current page - var contentService = ApplicationContext.Current.Services.ContentService; - IContent content = contentService.GetById(pageId); - - // Look after grid properies into the current page - foreach (var property in content.Properties) - { - if (property.PropertyType.PropertyEditorAlias == "Umbraco.Grid" && property.Value != null && !string.IsNullOrEmpty(property.Value.ToString())) - { - dynamic grid = Newtonsoft.Json.Linq.JObject.Parse(property.Value.ToString()); - foreach (var column in grid.columns) - { - foreach (var row in column.rows) - { - if (row.uniqueId != null) - result.Add(row.uniqueId.Value); - } - } - } - } - - return result.ToArray(); - - } - // get style box by tag internal static String GetStyleBlock(string source, string name) { @@ -79,36 +45,27 @@ namespace Umbraco.Web } - // Create a new grid block - internal static string NewGridRowBlock(string name) + // Get less parameters from lessPath file, both general parameters and grid parameters + internal static string GetLessParameters(int pageId) { - string lessGridRowModel = string.Empty; - using (System.IO.StreamReader sr = new System.IO.StreamReader(tuningGridRowStyle)) - { - lessGridRowModel = sr.ReadToEnd(); - } + // Load current page + var contentService = ApplicationContext.Current.Services.ContentService; + IContent content = contentService.GetById(pageId); - string newTag = "gridrow_" + name; - return lessGridRowModel.Replace("-ID-", newTag); + // Get less file path from the page Id + string lessPath = GetStylesheetPath(content.Path.Split(','), true); - } - - // Get less parameters from lessPath file, both general parameters and grid parameters - internal static string GetLessParameters(string lessPath, int pageId) - { - - // Get all parameters string paramBlock = string.Empty; - if (System.IO.File.Exists(lessPath)) + if (System.IO.File.Exists(HttpContext.Current.Server.MapPath(lessPath))) { - using (System.IO.StreamReader sr = new System.IO.StreamReader(lessPath)) + using (System.IO.StreamReader sr = new System.IO.StreamReader(HttpContext.Current.Server.MapPath(lessPath))) { + string lessContent = sr.ReadToEnd(); - paramBlock = GetStyleBlock(lessContent, "lessParam"); - foreach (var gridRow in GetGridRows(pageId)) + foreach (Match match in Regex.Matches(lessContent, string.Format("@([^;\n]*):([^;\n]*);"))) { - paramBlock = paramBlock + GetStyleBlock(lessContent, "lessParam-" + "gridrow_" + gridRow); + paramBlock = paramBlock + match.Groups[0].Value + "\r\n"; } } } @@ -131,7 +88,7 @@ namespace Umbraco.Web } if (preview) - return int.Parse(path[path.Length - 1]); + return int.Parse(path[1]); else return -1; @@ -151,49 +108,119 @@ namespace Umbraco.Web } // Create new less file - internal static string CreateOrUpdateLessFile(string[] path, int pageId) + internal static string CreateOrUpdateLessFile(int pageId, string configs) { - string lessPath = GetStylesheetPath(path, true); + // Load current page + var contentService = ApplicationContext.Current.Services.ContentService; + IContent content = contentService.GetById(pageId); + + // Get less file path from the page Id + string lessPath = GetStylesheetPath(content.Path.Split(','), true); // If less file exist, Load its content string lessContent = string.Empty; - using (System.IO.StreamReader sr = new System.IO.StreamReader(System.IO.File.Exists(HttpContext.Current.Server.MapPath(lessPath)) - ? HttpContext.Current.Server.MapPath(lessPath) : tuningDefaultLessPath)) + if (System.IO.File.Exists(HttpContext.Current.Server.MapPath(lessPath))) { - lessContent = sr.ReadToEnd(); - } - - // Update with grid row style needs - string[] gridRows = TuningUtility.GetGridRows(pageId); - string parametersToAdd = string.Empty; - string styleToAdd = string.Empty; - foreach (var gridRow in gridRows) - { - if (string.IsNullOrEmpty(GetStyleBlock(lessContent, "gridStyle-" + "gridrow_" + gridRow))) + using (System.IO.StreamReader sr = new System.IO.StreamReader(HttpContext.Current.Server.MapPath(lessPath))) { - parametersToAdd += NewGridRowBlock(gridRow); + lessContent = sr.ReadToEnd(); } } - // Create front directory if necesary + // Parse the config file + // for each config read and add less script in global less + dynamic tuningConfigs = Newtonsoft.Json.Linq.JObject.Parse(configs.ToString()); + foreach (var configuration in tuningConfigs.configs) + { + foreach (var editorItem in configuration.editors) + { + + var type = (editorItem.type != null && !string.IsNullOrEmpty(editorItem.type.ToString())) ? editorItem.type.ToString() : string.Empty; + var alias = (editorItem.alias != null && !string.IsNullOrEmpty(editorItem.alias.ToString())) ? editorItem.alias.ToString() : string.Empty; + var schema = (configuration.schema != null && !string.IsNullOrEmpty(configuration.schema.ToString())) ? configuration.schema.ToString() : alias; + + if (string.IsNullOrEmpty(GetStyleBlock(lessContent, "lessParam-" + alias))) + { + + // read the less model file + var lessModelPath = string.Format("/Umbraco/assets/less/{0}.less", type); + var lessModel = string.Empty; + if (System.IO.File.Exists(HttpContext.Current.Server.MapPath(lessModelPath))) + { + using (System.IO.StreamReader sr = new System.IO.StreamReader(HttpContext.Current.Server.MapPath(lessModelPath))) + { + lessModel = sr.ReadToEnd(); + } + } + + lessContent = lessContent + Environment.NewLine + lessModel + .Replace("-ALIAS-", alias) + .Replace("-SCHEMA-", schema); + + foreach (var parameter in editorItem) + { + lessContent = lessContent.Replace("-" + parameter.Name.ToString().ToUpper() + "-", parameter.Value.ToString()); + } + + } + } + } + + //// Create front directory if necesary if (!Directory.Exists(frontBasePath)) Directory.CreateDirectory(frontBasePath); // Save less file if (string.IsNullOrEmpty(lessPath)) lessPath = string.Format("{0}{1}.less", tuningStylePath, pageId); - lessContent = lessContent + Environment.NewLine + parametersToAdd; using (System.IO.StreamWriter file = new System.IO.StreamWriter(HttpContext.Current.Server.MapPath(lessPath))) { file.Write(lessContent); } + + + + //string lessPath = GetStylesheetPath(path, true); + + //// If less file exist, Load its content + //string lessContent = string.Empty; + //using (System.IO.StreamReader sr = new System.IO.StreamReader(System.IO.File.Exists(HttpContext.Current.Server.MapPath(lessPath)) + // ? HttpContext.Current.Server.MapPath(lessPath) : tuningDefaultLessPath)) + //{ + // lessContent = sr.ReadToEnd(); + //} + + //// Update with grid row style needs + //string[] gridRows = TuningUtility.GetGridRows(pageId); + //string parametersToAdd = string.Empty; + //string styleToAdd = string.Empty; + //foreach (var gridRow in gridRows) + //{ + // if (string.IsNullOrEmpty(GetStyleBlock(lessContent, "gridStyle-" + "gridrow_" + gridRow))) + // { + // parametersToAdd += NewGridRowBlock(gridRow); + // } + //} + + //// Create front directory if necesary + //if (!Directory.Exists(frontBasePath)) + // Directory.CreateDirectory(frontBasePath); + + //// Save less file + //if (string.IsNullOrEmpty(lessPath)) lessPath = string.Format("{0}{1}.less", tuningStylePath, pageId); + //lessContent = lessContent + Environment.NewLine + parametersToAdd; + //using (System.IO.StreamWriter file = new System.IO.StreamWriter(HttpContext.Current.Server.MapPath(lessPath))) + //{ + // file.Write(lessContent); + //} + return lessPath; } // Save and publish less style - internal static void SaveAndPublishStyle(string parameters, string parametersGrid, int pageId) + internal static void SaveAndPublishStyle(string parameters, int pageId, bool inherited) { // Get inherited tuned pageId and path @@ -209,53 +236,8 @@ namespace Umbraco.Web } // Update pageId if parameters have changed - if (inheritedTunedPageId != pageId) - { - - // Parse inherited less parameters - Dictionary dicInheritedParameters = new Dictionary(); - foreach (Match m in Regex.Matches(GetStyleBlock(inheritedLessContent,"lessParam"), @"@([^:\s\n]*?):([^@;\n]*?);")) - { - if (m.Groups.Count > 2) - { - dicInheritedParameters.Add(m.Groups[1].Value, m.Groups[2].Value.Replace("''", string.Empty)); - } - } - - // Read new parameters - Dictionary dicNewParameters = new Dictionary(); - foreach (string parameter in parameters.Trim().Split(new string[] { ";" }, StringSplitOptions.RemoveEmptyEntries)) - { - if (parameter.IndexOf("@import") < 0) - { - string name = parameter.Substring(1, parameter.IndexOf(":")).Replace("@", string.Empty).Replace(":", string.Empty); - string value = parameter.Substring(parameter.IndexOf(":") + 1); - dicNewParameters.Add(name, value); - } - } - - // Compare if parameters have changed - bool noChange = true; - foreach (string keys in dicNewParameters.Keys) - { - if (!dicInheritedParameters.Keys.Where(r => r == keys).Any() || dicNewParameters[keys] != dicInheritedParameters[keys]) - { - noChange = false; - break; - } - } - - if (noChange) - pageId = inheritedTunedPageId; - - - - // Compare if parameters have changed - if (dicInheritedParameters.OrderBy(r => r.Key).SequenceEqual(dicNewParameters.OrderBy(r => r.Key))) - pageId = inheritedTunedPageId; - - } - + if (inherited) pageId = inheritedTunedPageId; + // Create front directory if necesary if (!Directory.Exists(frontBasePath)) Directory.CreateDirectory(frontBasePath); @@ -267,26 +249,16 @@ namespace Umbraco.Web { if (parameter.IndexOf("@import") < 0) { - newParamBlock += (parameter + ";").Replace(":;", ":'';") + Environment.NewLine; + string name = parameter.Substring(0, parameter.IndexOf(":")); + string value = parameter.Substring(parameter.IndexOf(":") + 1); + if (string.IsNullOrEmpty(value)) value = "''"; + inheritedLessContent = Regex.Replace(inheritedLessContent, string.Format("{0}:([^;\n]*);", name), string.Format("{0}:{1};", name, value)); } else { newGfBlock += parameter + ";" + Environment.NewLine; } } - inheritedLessContent = inheritedLessContent.Replace(GetStyleBlock(inheritedLessContent, "lessParam"), Environment.NewLine + newParamBlock); - inheritedLessContent = inheritedLessContent.Replace(GetStyleBlock(inheritedLessContent, "gf"), Environment.NewLine + newGfBlock); - - // Prepare grid parameters - string newGridParamBlock = string.Empty; - foreach (string parameter in parametersGrid.Trim().Split(new string[] { ";" }, StringSplitOptions.RemoveEmptyEntries)) - { - string name = parameter.Substring(0, parameter.IndexOf(":")); - string value = parameter.Substring(parameter.IndexOf(":") + 1); - if (string.IsNullOrEmpty(value)) value = "''"; - inheritedLessContent = Regex.Replace(inheritedLessContent, string.Format("{0}:([^;\n]*);", name), string.Format("{0}:{1};", name, value)); - - } // Save less file using (System.IO.StreamWriter file = new System.IO.StreamWriter(HttpContext.Current.Server.MapPath(string.Format(resultLessPath, pageId)))) @@ -295,7 +267,7 @@ namespace Umbraco.Web } // Compile the Less file - string compiledStyle = GetCssFromLessString(inheritedLessContent, false, true, true).Replace("@import", "@IMPORT"); + string compiledStyle = GetCssFromLessString(newGfBlock + inheritedLessContent, false, true, true).Replace("@import", "@IMPORT"); // Save compiled file using (System.IO.StreamWriter file = new System.IO.StreamWriter(HttpContext.Current.Server.MapPath(string.Format(resultCssPath, pageId)))) diff --git a/src/Umbraco.Web/UmbracoHelper.cs b/src/Umbraco.Web/UmbracoHelper.cs index faf8ffe43b..e9578c9be2 100644 --- a/src/Umbraco.Web/UmbracoHelper.cs +++ b/src/Umbraco.Web/UmbracoHelper.cs @@ -1302,22 +1302,27 @@ namespace Umbraco.Web #endregion #region tuning - + public HtmlString EnableTuning() { + return EnableTuning(string.Empty, string.Empty); + } - string previewLink = @"" + - @"" + - @"" + - @"" + - @"" + - @"" + + public HtmlString EnableTuning(string tuningConfigPath) + { + return EnableTuning(tuningConfigPath, string.Empty); + } + + public HtmlString EnableTuning(string tuningConfigPath, string tuningPalettesPath) + { + + string previewLink = @"" + + @"" + + @"" + + @"" + @""; - string noPreviewLinks = @"" + - @"" + - @"" + - @""; + string noPreviewLinks = @""; // Get page value int pageId = UmbracoContext.PublishedContentRequest.UmbracoPage.PageID; @@ -1326,9 +1331,9 @@ namespace Umbraco.Web if (UmbracoContext.Current.InPreviewMode) { - // Create or update current less file - string lessPath = TuningUtility.CreateOrUpdateLessFile(path, pageId); - result = string.Format(previewLink, lessPath); + tuningConfigPath = !string.IsNullOrEmpty(tuningConfigPath) ? tuningConfigPath : "/umbraco/js/tuning.config.js"; + tuningPalettesPath = !string.IsNullOrEmpty(tuningPalettesPath) ? tuningConfigPath : "/umbraco/js/tuning.palettes.js"; + result = string.Format(previewLink, tuningConfigPath, tuningPalettesPath, pageId); } else {