diff --git a/src/Umbraco.Web.UI.Client/gruntFile.js b/src/Umbraco.Web.UI.Client/gruntFile.js index 1d1549763b..aceb2f9be6 100644 --- a/src/Umbraco.Web.UI.Client/gruntFile.js +++ b/src/Umbraco.Web.UI.Client/gruntFile.js @@ -215,7 +215,7 @@ module.exports = function (grunt) { } }, tuningJs: { - 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'], + src: ['src/tuning/tuning.global.js', 'src/tuning/tuning.controller.js', 'src/tuning/editors/*.js', 'src/tuning/lib/*.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 fcb0116b0b..8e62e2bc8e 100644 --- a/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less +++ b/src/Umbraco.Web.UI.Client/src/less/tuning.panelStyles.less @@ -1,279 +1,497 @@ -html { - height: 100%; + +/******* font-face *******/ + +@font-face { + src: url('/Umbraco/assets/fonts/helveticons/helveticons.eot') !important; + src: url('/Umbraco/assets/fonts/helveticons/helveticons.eot?#iefix') format('embedded-opentype'), url('/Umbraco/assets/fonts/helveticons/helveticons.ttf') format('truetype'), url('/Umbraco/assets/fonts/helveticons/helveticons.svg#icomoon') format('svg') !important; +} + + + + +/****************************/ + +body { + overflow: hidden; + height: 100%; + padding: 0; + margin: 0; + font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 20px; + color: #343434; + background-color: #F5F5F5; +} + +h4 { + padding: 10px 20px; + margin: 0; + font-size: 16px; + color: #D3D3D3; + background-color: #535353; + border-top: 1px solid #6B6B6B; + border-bottom: 1px solid #6B6B6B; +} + +h5 { + margin: 0 0 10px 0; + color: #D3D3D3; + font-size: 12px; +} + +ul { + list-style:none; + margin:0; + padding:0; +} + +a, a:hover{ + color:#333; + text-decoration:none; } body { - height: 100%; - padding: 0; - margin: 0; - text-align: center; - background-color: #EEEEEE; - -webkit-transition: all .3s linear; - -moz-transition: all .3s linear; - transition: all .3s linear; + padding-left:80px; } -body.open { - padding-left:275px; +body.rightOpen { + padding-right: 250px } -h2 { - margin-left: 10px; - font-size: 14px; - color: #d9d9d9; - text-align: center; + +.fix-left-menu { + position: fixed; + top: 0; + left: 0; + width: 80px; + height: 100%; + padding: 0; + margin-left: -80px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + line-height: 16px; + background: #1D1D1D; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + z-index: 9999; } -.tuning #TuningBg { - position: fixed; - top: 0; - left: 0; - z-index: 999; - width: 275px; - height: 100%; - padding: 0; - margin-left: -275px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - line-height: 16px; - background: #1D1D1D; - -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0); - -moz-box-shadow: 0 0 14px rgba(0, 0, 0, 0); - box-shadow: 0 0 14px rgba(0, 0, 0, 0); - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; +.avatar { + text-align:center; + padding: 25px 0 29px 0; + border-bottom: 1px solid #343434; } -.show { - display: block !important; +.help { + position: absolute; + bottom: 0; + left: 0; + display: block; + width: 100%; + margin: 0; + font-size: 30px; + text-align: center; + color: #d9d9d9; + opacity: 0.4; + -webkit-transition: all .3s linear; + -moz-transition: all .3s linear; + transition: all .3s linear; } -.wait { - margin: 10px 0 0 0; +ul.sections { + display: block; + background: #1d1d1d; + height: 100%; + position:absolute; + top: 90px; + width: 80px; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + list-style:none; + margin:0; + padding:0; + margin-left: -80px; } -.tuning .tuning-wrapper { - height: 100%; - overflow-y: auto; - text-align: left; +ul.sections li { + display: block; + border-left: 4px #1d1d1d solid; + -webkit-transition: all .3s linear; + -moz-transition: all .3s linear; + transition: all .3s linear; } -.tuning .wrapper-pading { - padding: 10px; +.fix-left-menu ul.sections li a span, +.fix-left-menu ul.sections li a i { + color: #d9d9d9; + -webkit-transition: all .3s linear; + -moz-transition: all .3s linear; + transition: all .3s linear; } -.tuning #TuningBg.open { - margin-left: 0; - -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); - box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); +ul.sections li a { + display: block; + width: 100%; + height: 100%; + padding: 20px 4px 15px 0; + margin: 0 0 0 -4px; + text-align: center; + text-decoration: none; + border-bottom: 1px solid #343434; } -.tuning .colpick { - z-index: 99999999; +ul.sections li a i { + font-size: 30px; + opacity: 0.4; } -.tuning .nav { - padding: 0 10px; - margin-top: 12px; - margin-bottom: 30px; - text-transform: uppercase; - border-bottom: none; +ul.sections li a span { + display:block; + font-size: 10px; + line-height: 1.4em; + opacity: 0.4; } -.tuning .nav-tabs > li > a { - color: #d9d9d9 !important; - background-color: #1D1D1D !important; - border: none; - border-bottom: 3px solid transparent; +ul.sections li.current, ul.sections li:hover { + border-left: 4px #f57020 solid; } -.tuning .nav-tabs > li.active > a, -.tuning .nav-tabs > li.active > a:hover, -.tuning .nav-tabs > li.active > a:focus { - color: #d9d9d9; - cursor: default; - background-color: #1D1D1D !important; - border: none; - border-bottom: 3px solid #d9d9d9; +.fix-left-menu:hover ul.sections li a span, +.fix-left-menu:hover ul.sections li a i, +.fix-left-menu:hover .help { + opacity: 1; } -.tuning .nav-tabs > li > a:hover { - color: #d9d9d9 !important; - background-color: #1D1D1D !important; - border: none !important; - border-bottom: 3px solid #d9d9d9 !important; +.fix-left-menu.selected, +.sections.selected { + margin-left:0px; } -.tuning .nav > li > a:hover, -.tuning .nav > li > a:focus { - color: #d9d9d9 !important; - text-decoration: none !important; - background-color: #1D1D1D !important; - border: none !important; - border-bottom: 3px solid #d9d9d9 !important; + + + + + + + + + + + + + + +.float-left-menu { + position: absolute; + top: 0; + left: 0; + z-index: 999; + min-width: 250px; + height: 100%; + padding: 0; + margin-left: -330px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + line-height: 16px; + background: #ffffff; + box-shadow: 3px 0 7px #dbdbdb; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } -.tuning .nav-tabs > li > a { - border-bottom: 3px solid transparent; - /*border-radius: 2px 2px 0 0;*/ - +.float-left-menu.selected{ + margin-left: 80px; } -.nav-tabs > li { - float: left; - margin-top: 1px; - margin-bottom: -1px; +.float-left-menu .header { + padding: 28px 20px 32px 20px; + font-weight: bold; + /* text-align: center; */ + background: #f8f8f8; + border-bottom: 1px solid #d9d9d9; } -.tuning .nav-tabs > li > a { - color: #ffffff; - cursor: pointer; +.float-left-menu .header h3 { + color: rgba(179, 179, 179, 0.49); + font-size: 24px; + margin:0; } -.tuning .nav > li > a { - padding: 5px 7px; +.float-left-menu .content { + padding:20px 0; } -.tuning .panel-title > a span { - display: block; + + + + + + + + + + + +.samples h4 { + font-weight: normal; + margin: 0 0 5px 0; } -.tuning .panel-title > a:hover { - text-decoration: none; +.samples > li { + padding: 10px 20px; } -/* .panel-heading */ +.samples > li:hover { + background: #f8f8f8; +} -.tab-pane { - border-bottom: 1px solid #343434; +.samples > li ul { + border:1px solid #DDDDDD; + display:table; + width:100%; } -.tuning .panel-heading { - padding: 0; +.samples > li ul > li { + display:table-cell; + height: 20px; + padding: 0px; } -.tuning .panel-default > .panel-heading { - color: #d9d9d9; - background-color: #1D1D1D; - border-left: 4px transparent solid; - border-color: none; - border-radius: 0; +.sample1 { + background-color:aliceblue !important; } -.tuning .panel-default > .panel-heading:hover, -.tuning .panel-default.selected > .panel-heading { - color: #d9d9d9; - text-decoration: none; - background-color: rgba(255, 255, 255, 0.09); - border-left: 4px #f57020 solid; - -webkit-transition: all .3s linear; - -moz-transition: all .3s linear; - transition: all .3s linear; +.sample2 { + background-color:aquamarine !important; } -.tuning .panel-title > a { - display: block; - padding: 5px 0 5px 17px; - font-size: 13px; - line-height: 22px; - color: #d9d9d9; - cursor: pointer; +.sample3 { + background-color:cadetblue !important; } -.tuning .panel-default > .panel-heading h4 { - margin: 0 0 0 -4px; - border-top: 1px solid #343434; +.sample4 { + background-color:darkolivegreen !important; } -.panel-group .panel + .panel { - margin-top: 0; +.sample5 { + background-color:CaptionText !important; } -.tuning .panel-default.selected { - margin: 1px 0 0 0; +.sample6 { + background-color:greenyellow !important; } -.tuning .panel-default.selected > .panel-heading h4 { - margin: 0 0 0 0; - color: #d9d9d9; - border-top: none; - border-bottom: 1px solid #6D6D6D; + + + + + + + + + + + +.fix-right-menu { + position: fixed; + top: 0; + right: 0; + z-index: 9999; + width: 250px; + height: 100%; + padding: 0; + margin-right: -250px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + line-height: 16px; + background: #1D1D1D; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + overflow-y: scroll; } -.tuning .panel-default.selected > .panel-heading h4 a { - padding: 5px 0 5px 13px; +.fix-right-menu.selected{ + margin-right: 0px; } -/* panel */ - -.tuning .panel-default { - background-color: #1D1D1D; - border: 0 solid rgba(217, 217, 217, 0.5); - border-radius: 0; +.fix-right-menu .header { + padding: 28px 20px 32px 20px; + font-weight: bold; + text-align: center; } -.tuning .panel-group .panel { - border-radius: 1px; +.fix-right-menu .header h3 { + color: rgba(179, 179, 179, 1); + font-size: 24px; + margin:0; + font-weight: 100; } -.panel-collapse { - background-color: rgba(255, 255, 255, 0.09); - border-left: 4px #f57020 solid; +.fix-right-menu .content { + padding:0px; + color: #B3B3B3; } -.tuning .btn-default-save, -.tuning .btn-default-save:focus { - float: right; - margin-top: 20px; - margin-right: 20px; - color: #fff; - background-color: #53a93f; - border-color: #ccc; - border-radius: 2px; +/*h4.panel-title { + padding: 10px 20px; + background-color: #2B2B2B; + margin: 0; + border-top: 1px solid #343434; + border-bottom: 1px solid #343434; +}*/ + +.tuning-panel-container { + padding: 20px 20px 10px 20px; } -.tuning .btn-default-save:hover { - color: #fff; - background-color: rgba(83, 169, 63, 0.81); +.tuning-panel-property { + clear: both; + overflow: hidden; + margin: 0 0 10px 0; } -.tuning .btn-default-delete, -.tuning .btn-default-delete:focus { - float: right; - margin-top: 20px; - margin-right: 10px; - color: #343434; - background: #e4e4e4; - border-color: #ccc; - border-radius: 2px; -} -.tuning .btn-default-delete:hover { - color: #343434; - background-color: rgba(228, 228, 228, 0.65); -} -.tuning .field-title { + + + + + + + + + + .field-title { float: left; margin-right: 10px; font-size: 11px; color: #d9d9d9; } -.tuning .div-field { + .div-field { margin-bottom: 10px; overflow: hidden; clear: both; } -.tuning .sp-replacer { +.tuning .box-slider { + padding: 0px 0px 10px 0px; + overflow: hidden; + clear: both; +} + +.fontFamilyPickerPreview { float: left; - padding: 0; - margin-top: 0; - background: none; - border: solid 1px #d9d9d9; + width: 90%; + padding: 8px; + margin-top: 4px; + clear: both; + font-size: 18px; + color: rgba(255, 255, 255, 0.8); + cursor: pointer; + background-color: rgba(0, 0, 0, 0.28); + border: 1px solid rgba(217, 217, 217, 0.5); +} + +.fontFamilyPickerPreview span { + font-size: 32px; + line-height: 32px; +} + +.fontFamilyPickerPreview:hover { + color: #d9d9d9; + border: 1px solid #d9d9d9; +} + +.tuning .ui-widget-content { + background: rgba(255, 255, 255, 0.09) !important; + border: 0px solid #fff !important; + border-radius: 1px !important; +} + +.tuning .ui-slider-horizontal { + /* float: left; */ + /* width: 155px; */ + /* height: .3em !important; */ + margin: 14px 11px 0 11px; + /* padding: 10px; */ +} + +/*.tuning .ui-slider .ui-slider-handle { + + margin-left: 0; + color: #d9d9d9 !important; + cursor: pointer; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; + border-top-left-radius: 1px; +}*/ + +.ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, +.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, +.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { + border: 1px solid #ccc !important; + background: #D1D1D1 !important; + background-color:none !important; + outline:none; +} + +.tuning .ui-slider .ui-slider-handle:hover, +.tuning .ui-slider .ui-slider-handle:focus { + color: #d9d9d9 !important; +} + + + +.tuning .ui-slider .ui-slider-handle span { + position: absolute !important; + margin: -15px 0 0 -8px !important; + color: #bbb !important; + font-size: 9px !important; + text-align: -webkit-center !important; + display: block !important; + width: 30px !important; +} + +.tuning .slider-input { + float: right; + width: 25px; + padding: 0; + margin-top: -9px; + margin-right: 1px; + font-size: 11px; + color: #d9d9d9; + text-align: right; + background-color: transparent; + border: none; + +} + +/*.tuning .slider-span { + float: right; + margin: -9px 0 0 0; + font-size: 11px; + color: #d9d9d9; +}*/ + +@-moz-document url-prefix() { + .tuning .slider-input { + margin-top: -6px; + } +} + +.tuning .sp-replacer { + padding: 0; + margin: 0; + display: block; + border: none; + height: 26px; + border-radius: 1px; } .tuning .panel-body { @@ -289,232 +507,252 @@ h2 { } .tuning .sp-preview { - width: 17px; - height: 17px; - margin-right: 0; - border: none; + width: 100%; + height: 100%; + margin-right: 0; + border: none; + display: block; } -.tuning .box-slider { - padding: 7px 2px 12px 2px; - clear: both; +.colorPickerDelete { + position: absolute; + margin: -23px 0 0 0; + cursor: pointer; } -.tuning .ui-widget-content { - background: rgba(255, 255, 255, 0.09) !important; - border: 0px solid #fff !important; - border-radius: 2px !important; +.borderStyleSelect +{ + display: inline-block; + /* display: inherit; */ + width: 57px; + height: 25px; + float: right; } -.tuning .ui-slider-horizontal { - float: left; - width: 155px; - height: .3em !important; + + + + + + + + + + + + + + + + + + + +.float-right-menu { + position: fixed; + top: 0; + right: 0; + z-index: 999; + width: 250px; + height: 100%; + padding: 0; + margin-right: -480px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + line-height: 16px; + background: #ffffff; + background: #ffffff; + -webkit-box-shadow: 0 3px 7px rgba(0,0,0,0.3); + -moz-box-shadow: 0 3px 7px rgba(0,0,0,0.3); + box-shadow: 0 3px 7px rgba(0,0,0,0.3); + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } -.tuning .ui-slider .ui-slider-handle { - top: -0.3em; - width: 0.3em !important; - height: 0.9em !important; - margin-left: 0; - color: #d9d9d9 !important; - cursor: pointer; - border-top-right-radius: 1px; - border-bottom-right-radius: 1px; - border-bottom-left-radius: 1px; - border-top-left-radius: 1px; +.float-right-menu.selected{ + margin-right: 250px; } -.tuning .ui-slider .ui-slider-handle:hover, -.tuning .ui-slider .ui-slider-handle:focus { - color: #d9d9d9 !important; + +/******* IFRAME *******/ + +.desktop { + width: 100%; + height: 100%; + margin: 0 auto; + overflow: hidden; } -.tuning .slider-input { - float: right; - width: 25px; - padding: 0; - margin-top: -9px; - margin-right: 1px; - font-size: 11px; - color: #d9d9d9; - text-align: right; - background-color: transparent; - border: none; +.laptop { + width: 1366px; + height: 768px; } -.tuning .slider-span { - float: right; - margin: -9px 0 0 0; - font-size: 11px; - color: #d9d9d9; +.iPad-portrait { + width: 769px; + height: 929px; } -@-moz-document url-prefix() { - .tuning .slider-input { - margin-top: -6px; - } +.iPad-landscape { + width: 1024px; + height: 675px; } -.tuning .imagePickerPreviewContainer { - float: left; +.smartphone-portrait { + width: 320px; + height: 504px; } -.tuning .imagePickerPreview { - float: left; - width: 50px; - height: 30px; - clear: both; - color: rgba(217, 217, 217, 0.5); - text-align: center; - cursor: pointer; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - border: 1px solid rgba(217, 217, 217, 0.5); +.smartphone-landscape { + width: 480px; + height: 256px; } -.tuning .imagePickerPreview:hover { - color: #d9d9d9; - border: 1px solid #d9d9d9; +.border { + margin: 75px auto; + background-color: #ffffff; + border-radius: 10px; + opacity: 1.0; + box-shadow: 0 0 0 29px #ECECEC, 0 0 0 30px #C4C4C4; + transition: all 0.5s ease-in-out; } -.tuning .imagePickerPreview i { - font-size: 14px; - line-height: 30px; - cursor: pointer; +iframe { + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + overflow-x: hidden; + overflow-y: hidden; } -.tuning .colorPickerDelete { - float: left; - margin-top: 5px; - margin-left: 3px; - font-size: 10px; - color: rgba(217, 217, 217, 0.5); - cursor: pointer; +.flip:before { + -webkit-transform: rotate(90deg); + -moz-transform: rotate(90deg); + -o-transform: rotate(90deg); } -.tuning .colorPickerDelete:hover { - color: #d9d9d9; -} -.tuning .tuning-tools { - position: absolute; - right: -28px; - margin: 25px 0 0 0; -} -.tuning #TuningBg.open .tuning-tools { - right: -33px; -} -.tuning .tuning-tools div { - display: block; - padding: 8px 8px 8px 9px; - margin: 5px 0 0 0; - font-size: 16px; - color: rgba(255, 255, 255, 0.8); - cursor: pointer; - background: #353535; - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); - box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); -} -.tuning .tuning-tools div:hover, -.tuning .tuning-tools div.selected { - color: rgba(255, 255, 255, 0.8); - background: #1D1D1D; -} + + + + + /* image picker */ +.imagePickerPreview { + height: 20px; + text-align: center; + background-color: #383838; + padding: 6px 0 0 0; + cursor: pointer; + background-size: cover; + border-radius:1px; +} + +.sp-clear-display { + background-image: none !important; +} + +.imagePickerPreview i { + font-size:24px; +} + .tuningImagePicker { - height: 500px; - padding: 0; - margin-top: 10px; - overflow: auto; - text-align: left; - list-style: none; + padding: 0; + margin-top: 10px; + overflow: auto; + text-align: left; + list-style: none; } .tuningImagePicker ul { - padding: 0; - margin: 0; - margin-left: 17px; - list-style: none; + padding: 0; + margin: 0; + margin-left: 20px; + list-style: none; } .tuningImagePicker li { - display: inline-block; - margin-bottom: 10px; + display: inline-block; + margin-bottom: 10px; } .tuningImagePicker ul.media-items li { - margin-right: 17px; + margin-right: 20px; } .tuningImagePicker .media-preview { - position: relative; - display: inline-block; - width: 110px; - height: 60px; - cursor: pointer; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - border: 2px solid #F3F2F2; + position: relative; + display: inline-block; + width: 91px; + height: 78px; + cursor: pointer; + background-position: center center; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + border: 2px solid #F3F2F2; } .tuningImagePicker .media-preview .folder { - position: absolute; - top: -5px; - left: 0; - width: 100%; - font-size: 40px; - color: gainsboro; - text-align: center; + position: absolute; + top: 30px; + left: 0; + width: 100%; + font-size: 40px; + color: gainsboro; + text-align: center; } .tuningImagePicker .media-preview .folder-name { - margin-top: -5px; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 13px; - line-height: 0; - color: grey; + margin-top: -5px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + line-height: 0; + color: grey; } .tuningImagePicker .media-preview:hover, .media-preview.selected { - border: 2px solid #84B8F0; + border: 2px solid #84B8F0; } -.bodyTuningImagePicker { - padding: 10px 20px 0 15px; -} +/*.bodyTuningImagePicker { + padding: 10px 20px 0 15px; +}*/ .tuningImagePicker .modal-dialog { - width: 618px; - font-weight: normal; + width: 618px; + font-weight: normal; } .bodyTuningImagePicker .breadcrumb { - margin-top: 4px; - margin-bottom: 10px; - font-size: 16px; - text-align: left; + margin-top: 4px; + margin-bottom: 10px; + font-size: 16px; + text-align: left; } .bodyTuningImagePicker .breadcrumb > li { display: inline; } +.breadcrumb{ + font-size: 12px; +} + .bodyTuningImagePicker .breadcrumb > li a { - cursor: pointer; + cursor: pointer; } .bodyTuningImagePicker .breadcrumb input { @@ -554,280 +792,116 @@ h2 { color: #555555; } -/* font picker */ -.tuning-fontfamilypicker .show { - margin-top: 10px; - font-size: 32px; - line-height: 34px; - color: #242424; + + + + + + + + + + + + + + + + + +/******* BORDER *******/ + +.box-preview { + display:inline-block; } -.tuning .fontFamilyPickerPreview { - float: left; - width: 90%; - min-height: 50px; - padding: 8px; - margin-top: 4px; - clear: both; - font-size: 18px; - color: rgba(255, 255, 255, 0.8); - cursor: pointer; - background-color: rgba(0, 0, 0, 0.28); - border: 1px solid rgba(217, 217, 217, 0.5); +.box-preview li { + height: 26px; + width: 30px; + border-radius: 1px; + border: none; + display:inline-block; + background-color:#383838; + cursor:pointer; + margin-right: 6px; + position:relative; } -.tuning .fontFamilyPickerPreview span { - font-size: 32px; - line-height: 32px; +.box-preview li:last-child{ + margin-right: 0px; } -.tuning .fontFamilyPickerPreview:hover { - color: #d9d9d9; - border: 1px solid #d9d9d9; +.box-preview li.selected { + border-color:#fff !important; } -.tuning-fontfamilypicker { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; - line-height: 14px; +.box-preview li.border-all { + border: 4px solid; + height: 18px; + width: 22px; + margin-left:0px } -.tuning .palette { - padding: 0; - margin: 20px 0 20px 20px; - list-style: none; +.box-preview li.border-left { + border-left: 4px solid; + width: 26px; } -.tuning .palette li { - margin: 10px 0 0 0; - overflow: hidden; - clear: both; - cursor: pointer; - background-color: rgba(0, 0, 0, 0.12); +.box-preview li.border-right { + border-right: 4px solid; + width: 26px; } -.tuning .palette div { - display: inline-block; - float: left; - border: 1px solid rgba(255, 255, 255, 0.61); +.box-preview li.border-top { + border-top: 4px solid; + height: 22px; } -.tuning .palette li:hover { - background-color: rgba(0, 0, 0, 0.4); +.box-preview li.border-bottom { + border-bottom: 4px solid; + height: 22px; } -.tuning .palette li:hover div { - border: 1px solid #ffffff; +.bordereditor .spectrumcolorpicker { + display: inline-block; + width: 120px; + float: left; } -.tuning .palette li:hover p { - color: #ffffff; +.radius-top-left, .radius-top-right, .radius-bottom-left, .radius-bottom-right { + display: block; + position: absolute; + background-color: #B3B3B3; + width: 10px; + height: 10px; } -.tuning .palette div span { - display: table-cell; - width: 30px; - height: 30px; - padding: 0 0 0 0; - margin: 0; - border: 1px solid rgba(0, 0, 0, 0.55); +.box-preview li.selected span { + background-color:#fff; } -.tuning .palette p { - float: left; - margin: 7px 0 0 10px; - color: rgba(255, 255, 255, 0.57); +.radius-top-left{ + top:0; + left:0; } -.tuning .btn-group, .tuning .btn-group-vertical { - float: right; - margin: 20px; +.radius-top-right{ + top:0; + right:0; } -/******* IFRAME *******/ - -.desktop { - width: 100%; - height: 100%; - margin: 0 auto; - overflow: hidden; +.radius-bottom-left{ + bottom:0; + left:0; } -.laptop { - width: 1366px; - height: 768px; +.radius-bottom-right{ + bottom:0; + right:0 } -.iPad-portrait { - width: 769px; - height: 929px; -} -.iPad-landscape { - width: 1024px; - height: 675px; -} -.smartphone-portrait { - width: 320px; - height: 504px; -} -.smartphone-landscape { - width: 480px; - height: 256px; -} -.border { - margin: 75px auto; - background-color: #ffffff; - border-radius: 10px; - opacity: 1.0; - box-shadow: 0 0 0 29px #fff, 0 0 0 30px #dee0e3; - transition: all 0.5s ease-in-out; -} - -iframe { - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - overflow: hidden; - overflow-x: hidden; - overflow-y: hidden; -} - -.flip:before { - -webkit-transform: rotate(90deg); - -moz-transform: rotate(90deg); - -o-transform: rotate(90deg); -} - -/******* preview-device *******/ - -ul.preview-device { - padding: 0; - margin: 0; - list-style: none; - border-top: 1px solid #343434; -} - -ul.preview-device li { - display: block; - overflow: hidden; - clear: both; - text-align: center; - cursor: pointer; - border-left: 4px solid transparent; - -webkit-transition: all .3s linear; - -moz-transition: all .3s linear; - transition: all .3s linear; -} - -ul.preview-device li div { - padding: 10px; - border-bottom: 1px solid #343434; -} - -ul.preview-device li:hover, -ul.preview-device li.selected { - background-color: rgba(255, 255, 255, 0.09); - border-left: 4px #f57020 solid; -} - -ul.preview-device li i { - font-size: 80px; - line-height: 80px; - color: #d9d9d9; -} - -ul.preview-device li span { - display: block; - color: #d9d9d9; -} - -/******* font-face *******/ - -#speechbubble { - position: absolute; - right: 0; - bottom: 40px; - left: 0; - z-index: 1000; - display: none; - padding: 0; - margin: auto; - margin-left: 300px; - text-align: left; - background: none; - border: none; - border-bottom: none; -} - -#speechbubble p { - position: relative; - padding: 8px 30px 8px 20px; - margin: auto; - margin-top: 5px; - font-size: 12px; - color: #ffffff; - text-shadow: none; - background-color: #46a546; - border: none; - border-color: transparent; - border-radius: 5px; -} - -/* New colapse style */ - -.tuning .tuning-panel-property { - margin-top: 1px; -} - -.tuning .tuning-panel-property .tuning-panel-property-heading { - border-left: 4px transparent solid; -} - -.tuning .tuning-panel-property .tuning-panel-property-heading h4 { - border-bottom: 1px solid transparent; -} - -.tuning .tuning-panel-property.selected .tuning-panel-property-heading, -.tuning .tuning-panel-property .tuning-panel-property-heading:hover { - color: #d9d9d9; - text-decoration: none; - background-color: rgba(255, 255, 255, 0.09); - border-left: 4px #f57020 solid; -} - -.tuning .tuning-panel-property.selected .tuning-panel-property-heading h4 { - margin: 0 0 0 0; - color: #d9d9d9; - border-top: none; - border-bottom: 1px solid #6D6D6D; -} - -.tuning .tuning-panel-property .tuning-property-collapse { - display:none; - overflow:hidden; - border-left-width: 4px; - border-left-color: transparent; - border-left-style: solid; - padding: 15px; - background-color: rgba(255, 255, 255, 0.0901961); -} - -.tuning .tuning-panel-property.selected .tuning-property-collapse { - display:block; - border-left-color: rgb(245, 112, 32); -} - -/******* font-face *******/ - -@font-face { - src: url('/Umbraco/assets/fonts/helveticons/helveticons.eot') !important; - src: url('/Umbraco/assets/fonts/helveticons/helveticons.eot?#iefix') format('embedded-opentype'), url('/Umbraco/assets/fonts/helveticons/helveticons.ttf') format('truetype'), url('/Umbraco/assets/fonts/helveticons/helveticons.svg#icomoon') format('svg') !important; -} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning.loader.js b/src/Umbraco.Web.UI.Client/src/tuning.loader.js index 01830fb49d..856f18ad62 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning.loader.js +++ b/src/Umbraco.Web.UI.Client/src/tuning.loader.js @@ -8,10 +8,15 @@ LazyLoad.js([ '/Umbraco/js/umbraco.services.js', '/Umbraco/js/umbraco.security.js', '/Umbraco/ServerVariables', - '/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.panel.js' + '/umbraco/js/tuning.panel.js', + + '/umbraco/lib/jquery/jquery-mousewheel.js', + '/umbraco/lib/antiscroll/antiscroll.js', + '/umbraco/lib/antiscroll/angular-antiscroll.js', + + ], function () { jQuery(document).ready(function () { angular.bootstrap(document, ['umbraco.tuning']); 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 c8e74a1eda..b1f2e83003 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 @@ -11,12 +11,45 @@ var tuningConfig = { editors: [ { type: "background", - name: "Image Background" + category: "Color", + name: "Background", + css: "color" }, { - type: "colorpicker", - name: "Title Background Color", - css: "background-color" - }] + type: "color", + category: "Font", + name: "Font Color", + css: "color" + }, + { + type: "googlefontpicker", + category: "Font", + name: "Font Family", + css: "color" + }, + { + type: "border", + category: "Styling", + name: "Border", + schema: ".wrapper" + }, + { + type: "radius", + category: "Styling", + name: "Radius", + schema: ".wrapper" + }, + { + type: "padding", + category: "Position", + name: "Padding" + }, + { + type: "margin", + category: "Position", + name: "Margin" + } + ] }] -}; \ No newline at end of file +}; + diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/background.html b/src/Umbraco.Web.UI.Client/src/tuning/editors/background.html index abdf2bc1da..98b57ed6db 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/background.html +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/background.html @@ -1,10 +1,59 @@ 
- {{item.name}} + +
{{item.name}}
+
- - + +
-
\ No newline at end of file + +
+ + +
+ + + + \ 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 index 6030b83b45..633c26a8dc 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/background.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/background.js @@ -5,40 +5,39 @@ angular.module("umbraco.tuning") -.controller("Umbraco.tuning.background", function ($scope, $modal) { +.controller("Umbraco.tuning.background", function ($scope, dialogService) { if (!$scope.item.values) { $scope.item.values = { - imageorpattern: '' + imageorpattern: '', + color:'' }; } - // Open image picker modal $scope.open = function (field) { - $scope.data = { - newFolder: "", - modalField: field + var config = { + template: "mediaPickerModal.html", + change: function (data) { + $scope.item.values.imageorpattern = data; + }, + callback: function (data) { + $scope.item.values.imageorpattern = data; + }, + cancel: function (data) { + $scope.item.values.imageorpattern = data; + }, + dialogData: $scope.googleFontFamilies, + dialogItem: $scope.item.values.imageorpattern }; - 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; - }); + dialogService.open(config); + }; }) -.controller('tuning.mediapickercontroller', function ($scope, $modalInstance, items, $http, mediaResource, umbRequestHelper, entityResource, mediaHelper) { +.controller('tuning.mediaPickerModal', function ($scope, $http, mediaResource, umbRequestHelper, entityResource, mediaHelper) { if (mediaHelper && mediaHelper.registerFileResolver) { mediaHelper.registerFileResolver("Umbraco.UploadField", function (property, entity, thumbnail) { @@ -63,7 +62,7 @@ angular.module("umbraco.tuning") }); } - var modalFieldvalue = $scope.data.modalField.imageorpattern; + var modalFieldvalue = $scope.dialogItem; $scope.currentFolder = {}; $scope.currentFolder.children = []; @@ -128,10 +127,15 @@ angular.module("umbraco.tuning") 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); + angular.forEach(child.properties, function (property) { + // TODO, resolve with thumbnail + if (property.alias = "umbracoFile" && property.value.src) + { + child.thumbnail = property.value.src; + child.image = property.value.src; + } + }) } }); @@ -147,11 +151,13 @@ angular.module("umbraco.tuning") 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 + ")"; + modalFieldvalue = "url(" + $scope.selectedMedia.image + ")"; + $scope.change(modalFieldvalue); } else { $scope.gotoFolder(media); } + }; //default root item @@ -159,13 +165,17 @@ angular.module("umbraco.tuning") $scope.gotoFolder(); } - $scope.ok = function () { - $modalInstance.close($scope.data.modalField.imageorpattern); + $scope.submitAndClose = function () { + if (modalFieldvalue != "") { + $scope.submit(modalFieldvalue); + } else { + $scope.cancel(); + } + }; - $scope.cancel = function () { - $scope.data.modalField.imageorpattern = modalFieldvalue; - $modalInstance.dismiss('cancel'); - }; + $scope.cancelAndClose = function () { + $scope.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 index 8c2362ec71..2cf031862e 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/background.less +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/background.less @@ -5,6 +5,7 @@ /***start-lessParam--ALIAS-***/ @imageorpattern-ALIAS-:''; +@color-ALIAS-:''; /***end-lessParam--ALIAS-***/ /***start-gridStyle--ALIAS-***/ @@ -17,6 +18,7 @@ -moz-background-size: cover; -o-background-size: cover; background-size: cover; + background-color:@color-ALIAS-; } /***end-gridStyle--ALIAS-***/ diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/border.html b/src/Umbraco.Web.UI.Client/src/tuning/editors/border.html new file mode 100644 index 0000000000..dcffa630c7 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/border.html @@ -0,0 +1,26 @@ + +
+ +
{{item.name}}
+ +
+ +
+ +
+ + + +
+ +
+
+
+ +
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/border.js b/src/Umbraco.Web.UI.Client/src/tuning/editors/border.js new file mode 100644 index 0000000000..c527fe767d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/border.js @@ -0,0 +1,114 @@ + +/*********************************************************************************************************/ +/* Background editor */ +/*********************************************************************************************************/ + +angular.module("umbraco.tuning") + +.controller("Umbraco.tuning.border", function ($scope, dialogService) { + + $scope.borderList = ["all", "left", "right", "top", "bottom"]; + $scope.bordertypes = ["solid", "dashed", "dotted"]; + $scope.selectedBorder = { + name: "all", + size: 0, + color: '', + type: '' + }; + + $scope.setselectedBorder = function (bordertype) { + + if (bordertype == "all") { + $scope.selectedBorder.name="all"; + $scope.selectedBorder.size= $scope.item.values.bordersize; + $scope.selectedBorder.color= $scope.item.values.bordercolor; + $scope.selectedBorder.type= $scope.item.values.bordertype; + } + + if (bordertype == "left") { + $scope.selectedBorder.name= "left"; + $scope.selectedBorder.size= $scope.item.values.leftbordersize; + $scope.selectedBorder.color= $scope.item.values.leftbordercolor; + $scope.selectedBorder.type= $scope.item.values.leftbordertype; + } + + if (bordertype == "right") { + $scope.selectedBorder.name= "right"; + $scope.selectedBorder.size= $scope.item.values.rightbordersize; + $scope.selectedBorder.color= $scope.item.values.rightbordercolor; + $scope.selectedBorder.type= $scope.item.values.rightbordertype; + } + + if (bordertype == "top") { + $scope.selectedBorder.name= "top"; + $scope.selectedBorder.size= $scope.item.values.topbordersize; + $scope.selectedBorder.color= $scope.item.values.topbordercolor; + $scope.selectedBorder.type= $scope.item.values.topbordertype; + } + + if (bordertype == "bottom") { + $scope.selectedBorder.name= "bottom"; + $scope.selectedBorder.size= $scope.item.values.bottombordersize; + $scope.selectedBorder.color= $scope.item.values.bottombordercolor; + $scope.selectedBorder.type= $scope.item.values.bottombordertype; + } + + } + + if (!$scope.item.values) { + $scope.item.values = { + bordersize: '0', + bordercolor: '', + bordertype: 'solid', + leftbordersize: '0', + leftbordercolor: '', + leftbordertype: 'solid', + rightbordersize: '0', + rightbordercolor: '', + rightbordertype: 'solid', + topbordersize: '0', + topbordercolor: '', + topbordertype: 'solid', + bottombordersize: '0', + bottombordercolor: '', + bottombordertype: 'solid', + }; + } + + $scope.setselectedBorder("all"); + + $scope.$watch( "selectedBorder", function () { + + if ($scope.selectedBorder.name == "all") { + $scope.item.values.bordersize = $scope.selectedBorder.size; + $scope.item.values.bordercolor = $scope.selectedBorder.color; + $scope.item.values.bordertype =$scope.selectedBorder.type; + } + + if ($scope.selectedBorder.name == "left") { + $scope.item.values.leftbordersize = $scope.selectedBorder.size; + $scope.item.values.leftbordercolor = $scope.selectedBorder.color; + $scope.item.values.leftbordertype = $scope.selectedBorder.type; + } + + if ($scope.selectedBorder.name == "right") { + $scope.item.values.rightbordersize = $scope.selectedBorder.size; + $scope.item.values.rightbordercolor = $scope.selectedBorder.color; + $scope.item.values.rightbordertype = $scope.selectedBorder.type; + } + + if ($scope.selectedBorder.name == "top") { + $scope.item.values.topbordersize = $scope.selectedBorder.size; + $scope.item.values.topbordercolor = $scope.selectedBorder.color; + $scope.item.values.topbordertype = $scope.selectedBorder.type; + } + + if ($scope.selectedBorder.name == "bottom") { + $scope.item.values.bottombordersize = $scope.selectedBorder.size; + $scope.item.values.bottombordercolor = $scope.selectedBorder.color; + $scope.item.values.bottombordertype = $scope.selectedBorder.type; + } + + }, true) + +}) \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/border.less b/src/Umbraco.Web.UI.Client/src/tuning/editors/border.less new file mode 100644 index 0000000000..16e35fa8e6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/border.less @@ -0,0 +1,66 @@ + +/************************************************************************/ +/* border -ALIAS- */ +/************************************************************************/ + +/***start-lessParam--ALIAS-***/ +@bordersize-ALIAS-:0; +@bordercolor-ALIAS-:''; +@bordertype-ALIAS-:solid; + +@leftbordersize-ALIAS-:0; +@leftbordercolor-ALIAS-:''; +@leftbordertype-ALIAS-:solid; + +@rightbordersize-ALIAS-:0; +@rightbordercolor-ALIAS-:''; +@rightbordertype-ALIAS-:solid; + +@topbordersize-ALIAS-:0; +@topbordercolor-ALIAS-:''; +@topbordertype-ALIAS-:solid; + +@bottombordersize-ALIAS-:0; +@bottombordercolor-ALIAS-:''; +@bottombordertype-ALIAS-:solid; + +/***end-lessParam--ALIAS-***/ + +/***start-lessStyle--ALIAS-***/ + +.left () when (@leftbordersize-ALIAS- > 0) { + border-left: @leftbordersize-ALIAS- + 0px; + border-left-color:@leftbordercolor-ALIAS-; + border-left-style:@leftbordertype-ALIAS-; +} + +.right () when (@rightbordersize-ALIAS- > 0) { + border-right: @rightbordersize-ALIAS- + 0px; + border-right-color:@rightbordercolor-ALIAS-; + border-right-style:@rightbordertype-ALIAS-; +} + +.top () when (@topbordersize-ALIAS- > 0) { + border-top: @topbordersize-ALIAS- + 0px; + border-top-color:@topbordercolor-ALIAS-; + border-top-style:@topbordertype-ALIAS-; +} + +.bottom () when (@bottombordersize-ALIAS- > 0) { + border-bottom: @bottombordersize-ALIAS- + 0px; + border-bottom-color:@bottombordercolor-ALIAS-; + border-bottom-style:@bottombordertype-ALIAS-; +} + +-SCHEMA- { + border: @bordersize-ALIAS- + 0px; + border-color:@bordercolor-ALIAS-; + border-style:@bordertype-ALIAS-; + .left; + .right; + .top; + .bottom; +} +/***end-lessStyle--ALIAS-***/ + + diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/color.html b/src/Umbraco.Web.UI.Client/src/tuning/editors/color.html new file mode 100644 index 0000000000..1aeb4ae772 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/color.html @@ -0,0 +1,11 @@ + +
+ +
{{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/color.js similarity index 85% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/colorpicker.js rename to src/Umbraco.Web.UI.Client/src/tuning/editors/color.js index cd702c1872..df12670a84 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/colorpicker.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/color.js @@ -5,7 +5,7 @@ angular.module("umbraco.tuning") -.controller("Umbraco.tuning.colorpicker", function ($scope) { +.controller("Umbraco.tuning.color", function ($scope) { if (!$scope.item.values) { $scope.item.values = { diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/colorPicker.less b/src/Umbraco.Web.UI.Client/src/tuning/editors/color.less similarity index 90% rename from src/Umbraco.Web.UI.Client/src/tuning/editors/colorPicker.less rename to src/Umbraco.Web.UI.Client/src/tuning/editors/color.less index ae5586bed8..efa24384a6 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/colorPicker.less +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/color.less @@ -1,6 +1,6 @@  /************************************************************************/ -/* colorPicker -ALIAS- -CSS- */ +/* color -ALIAS- -CSS- */ /************************************************************************/ /***start-lessParam--ALIAS-***/ diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/colorpicker.html b/src/Umbraco.Web.UI.Client/src/tuning/editors/colorpicker.html deleted file mode 100644 index efadd3be89..0000000000 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/colorpicker.html +++ /dev/null @@ -1,8 +0,0 @@ - -
- {{item.name}} -
- - -
-
\ 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 index 6fe38d51f1..1fee2efc61 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.html +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.html @@ -10,4 +10,26 @@ - \ 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 index 868379e2e9..c81373eafe 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/googlefontpicker.js @@ -5,7 +5,7 @@ angular.module("umbraco.tuning") -.controller("Umbraco.tuning.googlefontpicker", function ($scope, $modal) { +.controller("Umbraco.tuning.googlefontpicker", function ($scope, dialogService) { if (!$scope.item.values) { $scope.item.values = { @@ -28,45 +28,33 @@ angular.module("umbraco.tuning") $scope.open = function (field) { - $scope.data = { - modalField: field + var config = { + template: "googlefontdialog.html", + change: function (data) { + $scope.item.values = data; + }, + callback: function (data) { + $scope.item.values = data; + }, + cancel: function (data) { + $scope.item.values = data; + }, + dialogData: $scope.googleFontFamilies, + dialogItem: $scope.item.values }; - 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; - }); + dialogService.open(config); + }; }) -.controller('tuning.fontfamilypickercontroller', function ($scope, $modalInstance, item, googleFontFamilies, $http) { +.controller("googlefontdialog.controller", function ($scope) { $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", "") : ""; }; @@ -90,7 +78,7 @@ angular.module("umbraco.tuning") }); }); - angular.forEach(googleFontFamilies.items, function (value, key) { + angular.forEach($scope.dialogData.items, function (value, key) { var variants = value.variants; var variant = value.variants.length > 0 ? value.variants[0] : ""; var fontWeight = googleGetWeight(variant); @@ -107,7 +95,7 @@ angular.module("umbraco.tuning") }); $scope.setStyleVariant = function () { - if ($scope.selectedFont != undefined) { + if ($scope.dialogItem != undefined) { return { 'font-family': $scope.selectedFont.fontFamily, 'font-weight': $scope.selectedFont.fontWeight, @@ -117,6 +105,7 @@ angular.module("umbraco.tuning") }; $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. @@ -130,34 +119,35 @@ angular.module("umbraco.tuning") 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; - }); + $scope.selectedFont = font; + $scope.selectedFont.fontWeight = googleGetWeight($scope.selectedFont.variant); + $scope.selectedFont.fontStyle = googleGetStyle($scope.selectedFont.variant); } }); + } 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; } + + // If $apply isn't called, the new font family isn't applied until the next user click. + $scope.change({ + fontFamily: $scope.selectedFont.fontFamily, + fontType: $scope.selectedFont.fontType, + fontWeight: $scope.selectedFont.fontWeight, + fontStyle: $scope.selectedFont.fontStyle, + }); + } - $scope.ok = function () { - $modalInstance.close({ + $scope.cancelAndClose = function () { + $scope.cancel(); + } + + $scope.submitAndClose = function () { + $scope.submit({ fontFamily: $scope.selectedFont.fontFamily, fontType: $scope.selectedFont.fontType, fontWeight: $scope.selectedFont.fontWeight, @@ -165,23 +155,13 @@ angular.module("umbraco.tuning") }); }; - $scope.cancel = function () { - // Discard font change. - $modalInstance.close({ - fontFamily: originalFont.fontFamily, - fontType: originalFont.fontType, - fontWeight: originalFont.fontWeight, - fontStyle: originalFont.fontStyle, - }); - }; - - if (item != undefined) { + if ($scope.dialogItem != undefined) { angular.forEach($scope.fonts, function (value, key) { - if (value.fontFamily == item.fontFamily) { + if (value.fontFamily == $scope.dialogItem.fontFamily) { $scope.selectedFont = value; - $scope.selectedFont.variant = item.fontWeight + item.fontStyle; - $scope.selectedFont.fontWeight = item.fontWeight; - $scope.selectedFont.fontStyle = item.fontStyle; + $scope.selectedFont.variant = $scope.dialogItem.fontWeight + $scope.dialogItem.fontStyle; + $scope.selectedFont.fontWeight = $scope.dialogItem.fontWeight; + $scope.selectedFont.fontStyle = $scope.dialogItem.fontStyle; } }); } diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/margin.html b/src/Umbraco.Web.UI.Client/src/tuning/editors/margin.html new file mode 100644 index 0000000000..f4f640df4d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/margin.html @@ -0,0 +1,20 @@ + +
+ +
{{item.name}}
+ +
+ +
+ +
+
+
+ +
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/margin.js b/src/Umbraco.Web.UI.Client/src/tuning/editors/margin.js new file mode 100644 index 0000000000..18788c2555 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/margin.js @@ -0,0 +1,82 @@ + +/*********************************************************************************************************/ +/* margin editor */ +/*********************************************************************************************************/ + +angular.module("umbraco.tuning") + +.controller("Umbraco.tuning.margin", function ($scope, dialogService) { + + $scope.marginList = ["all", "left", "right", "top", "bottom"]; + + $scope.selectedmargin = { + name: "all", + value: 0, + }; + + $scope.setSelectedmargin = function (margintype) { + + if (margintype == "all") { + $scope.selectedmargin.name="all"; + $scope.selectedmargin.value= $scope.item.values.marginvalue; + } + + if (margintype == "left") { + $scope.selectedmargin.name= "left"; + $scope.selectedmargin.value= $scope.item.values.leftmarginvalue; + } + + if (margintype == "right") { + $scope.selectedmargin.name= "right"; + $scope.selectedmargin.value= $scope.item.values.rightmarginvalue; + } + + if (margintype == "top") { + $scope.selectedmargin.name= "top"; + $scope.selectedmargin.value= $scope.item.values.topmarginvalue; + } + + if (margintype == "bottom") { + $scope.selectedmargin.name= "bottom"; + $scope.selectedmargin.value= $scope.item.values.bottommarginvalue; + } + + } + + if (!$scope.item.values) { + $scope.item.values = { + marginvalue: '0', + leftmarginvalue: '0', + rightmarginvalue: '0', + topmarginvalue: '0', + bottommarginvalue: '0', + }; + } + + $scope.setSelectedmargin("all"); + + $scope.$watch( "selectedmargin", function () { + + if ($scope.selectedmargin.name == "all") { + $scope.item.values.marginvalue = $scope.selectedmargin.value; + } + + if ($scope.selectedmargin.name == "left") { + $scope.item.values.leftmarginvalue = $scope.selectedmargin.value; + } + + if ($scope.selectedmargin.name == "right") { + $scope.item.values.rightmarginvalue = $scope.selectedmargin.value; + } + + if ($scope.selectedmargin.name == "top") { + $scope.item.values.topmarginvalue = $scope.selectedmargin.value; + } + + if ($scope.selectedmargin.name == "bottom") { + $scope.item.values.bottommarginvalue = $scope.selectedmargin.value; + } + + }, true) + +}) \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/margin.less b/src/Umbraco.Web.UI.Client/src/tuning/editors/margin.less new file mode 100644 index 0000000000..4de36348e2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/margin.less @@ -0,0 +1,43 @@ + +/************************************************************************/ +/* margin -ALIAS- */ +/************************************************************************/ + +/***start-lessParam--ALIAS-***/ +@marginvalue-ALIAS-:0; +@leftmarginvalue-ALIAS-:0; +@rightmarginvalue-ALIAS-:0; +@topmarginvalue-ALIAS-:0; +@bottommarginvalue-ALIAS-:0; + + +/***end-lessParam--ALIAS-***/ + +/***start-lessStyle--ALIAS-***/ + +.left () when (@leftmarginvalue-ALIAS- > 0) { + margin-left: @leftmarginvalue-ALIAS- + 0px; +} + +.right () when (@rightmarginvalue-ALIAS- > 0) { + margin-right: @rightmarginvalue-ALIAS- + 0px; +} + +.top () when (@topmarginvalue-ALIAS- > 0) { + margin-top: @topmarginvalue-ALIAS- + 0px; +} + +.bottom () when (@bottommarginvalue-ALIAS- > 0) { + margin-bottom: @bottommarginvalue-ALIAS- + 0px; +} + +-SCHEMA- { + margin: @marginvalue-ALIAS- + 0px; + .left; + .right; + .top; + .bottom; +} +/***end-lessStyle--ALIAS-***/ + + diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/padding.html b/src/Umbraco.Web.UI.Client/src/tuning/editors/padding.html new file mode 100644 index 0000000000..8f7e1bfa4f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/padding.html @@ -0,0 +1,20 @@ + +
+ +
{{item.name}}
+ +
+ +
+ +
+
+
+ +
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/padding.js b/src/Umbraco.Web.UI.Client/src/tuning/editors/padding.js new file mode 100644 index 0000000000..676ca80244 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/padding.js @@ -0,0 +1,82 @@ + +/*********************************************************************************************************/ +/* padding editor */ +/*********************************************************************************************************/ + +angular.module("umbraco.tuning") + +.controller("Umbraco.tuning.padding", function ($scope, dialogService) { + + $scope.paddingList = ["all", "left", "right", "top", "bottom"]; + + $scope.selectedpadding = { + name: "all", + value: 0, + }; + + $scope.setSelectedpadding = function (paddingtype) { + + if (paddingtype == "all") { + $scope.selectedpadding.name="all"; + $scope.selectedpadding.value= $scope.item.values.paddingvalue; + } + + if (paddingtype == "left") { + $scope.selectedpadding.name= "left"; + $scope.selectedpadding.value= $scope.item.values.leftpaddingvalue; + } + + if (paddingtype == "right") { + $scope.selectedpadding.name= "right"; + $scope.selectedpadding.value= $scope.item.values.rightpaddingvalue; + } + + if (paddingtype == "top") { + $scope.selectedpadding.name= "top"; + $scope.selectedpadding.value= $scope.item.values.toppaddingvalue; + } + + if (paddingtype == "bottom") { + $scope.selectedpadding.name= "bottom"; + $scope.selectedpadding.value= $scope.item.values.bottompaddingvalue; + } + + } + + if (!$scope.item.values) { + $scope.item.values = { + paddingvalue: '0', + leftpaddingvalue: '0', + rightpaddingvalue: '0', + toppaddingvalue: '0', + bottompaddingvalue: '0', + }; + } + + $scope.setSelectedpadding("all"); + + $scope.$watch( "selectedpadding", function () { + + if ($scope.selectedpadding.name == "all") { + $scope.item.values.paddingvalue = $scope.selectedpadding.value; + } + + if ($scope.selectedpadding.name == "left") { + $scope.item.values.leftpaddingvalue = $scope.selectedpadding.value; + } + + if ($scope.selectedpadding.name == "right") { + $scope.item.values.rightpaddingvalue = $scope.selectedpadding.value; + } + + if ($scope.selectedpadding.name == "top") { + $scope.item.values.toppaddingvalue = $scope.selectedpadding.value; + } + + if ($scope.selectedpadding.name == "bottom") { + $scope.item.values.bottompaddingvalue = $scope.selectedpadding.value; + } + + }, true) + +}) \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/padding.less b/src/Umbraco.Web.UI.Client/src/tuning/editors/padding.less new file mode 100644 index 0000000000..1e308813fb --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/padding.less @@ -0,0 +1,43 @@ + +/************************************************************************/ +/* padding -ALIAS- */ +/************************************************************************/ + +/***start-lessParam--ALIAS-***/ +@paddingvalue-ALIAS-:0; +@leftpaddingvalue-ALIAS-:0; +@rightpaddingvalue-ALIAS-:0; +@toppaddingvalue-ALIAS-:0; +@bottompaddingvalue-ALIAS-:0; + + +/***end-lessParam--ALIAS-***/ + +/***start-lessStyle--ALIAS-***/ + +.left () when (@leftpaddingvalue-ALIAS- > 0) { + padding-left: @leftpaddingvalue-ALIAS- + 0px; +} + +.right () when (@rightpaddingvalue-ALIAS- > 0) { + padding-right: @rightpaddingvalue-ALIAS- + 0px; +} + +.top () when (@toppaddingvalue-ALIAS- > 0) { + padding-top: @toppaddingvalue-ALIAS- + 0px; +} + +.bottom () when (@bottompaddingvalue-ALIAS- > 0) { + padding-bottom: @bottompaddingvalue-ALIAS- + 0px; +} + +-SCHEMA- { + padding: @paddingvalue-ALIAS- + 0px; + .left; + .right; + .top; + .bottom; +} +/***end-lessStyle--ALIAS-***/ + + diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/radius.html b/src/Umbraco.Web.UI.Client/src/tuning/editors/radius.html new file mode 100644 index 0000000000..9ea8f078c1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/radius.html @@ -0,0 +1,25 @@ + +
+ +
{{item.name}}
+ +
+ +
+ +
+
+
+ +
\ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/radius.js b/src/Umbraco.Web.UI.Client/src/tuning/editors/radius.js new file mode 100644 index 0000000000..5f7e0b2459 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/radius.js @@ -0,0 +1,82 @@ + +/*********************************************************************************************************/ +/* radius editor */ +/*********************************************************************************************************/ + +angular.module("umbraco.tuning") + +.controller("Umbraco.tuning.radius", function ($scope, dialogService) { + + $scope.radiusList = ["all", "topleft", "topright", "bottomleft", "bottomright"]; + + $scope.selectedradius = { + name: "all", + value: 0, + }; + + $scope.setSelectedradius = function (radiustype) { + + if (radiustype == "all") { + $scope.selectedradius.name="all"; + $scope.selectedradius.value= $scope.item.values.radiusvalue; + } + + if (radiustype == "topleft") { + $scope.selectedradius.name = "topleft"; + $scope.selectedradius.value = $scope.item.values.topleftradiusvalue; + } + + if (radiustype == "topright") { + $scope.selectedradius.name = "topright"; + $scope.selectedradius.value = $scope.item.values.toprightradiusvalue; + } + + if (radiustype == "bottomleft") { + $scope.selectedradius.name = "bottomleft"; + $scope.selectedradius.value = $scope.item.values.bottomleftradiusvalue; + } + + if (radiustype == "bottomright") { + $scope.selectedradius.name = "bottomright"; + $scope.selectedradius.value = $scope.item.values.bottomrightradiusvalue; + } + + } + + if (!$scope.item.values) { + $scope.item.values = { + radiusvalue: '0', + topleftradiusvalue: '0', + toprightradiusvalue: '0', + bottomleftradiusvalue: '0', + bottomrightradiusvalue: '0', + }; + } + + $scope.setSelectedradius("all"); + + $scope.$watch( "selectedradius", function () { + + if ($scope.selectedradius.name == "all") { + $scope.item.values.radiusvalue = $scope.selectedradius.value; + } + + if ($scope.selectedradius.name == "topleft") { + $scope.item.values.topleftradiusvalue = $scope.selectedradius.value; + } + + if ($scope.selectedradius.name == "topright") { + $scope.item.values.toprightradiusvalue = $scope.selectedradius.value; + } + + if ($scope.selectedradius.name == "bottomleft") { + $scope.item.values.bottomleftradiusvalue = $scope.selectedradius.value; + } + + if ($scope.selectedradius.name == "bottomright") { + $scope.item.values.bottomrightradiusvalue = $scope.selectedradius.value; + } + + }, true) + +}) \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/editors/radius.less b/src/Umbraco.Web.UI.Client/src/tuning/editors/radius.less new file mode 100644 index 0000000000..7d0427e950 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/editors/radius.less @@ -0,0 +1,54 @@ + +/************************************************************************/ +/* radius -ALIAS- */ +/************************************************************************/ + +/***start-lessParam--ALIAS-***/ +@radiusvalue-ALIAS-:0; +@topleftradiusvalue-ALIAS-:0; +@toprightradiusvalue-ALIAS-:0; +@bottomleftradiusvalue-ALIAS-:0; +@bottomrightradiusvalue-ALIAS-:0; + + +/***end-lessParam--ALIAS-***/ + +/***start-lessStyle--ALIAS-***/ + +.topleft () when (@topleftradiusvalue-ALIAS- > 0) { + -webkit-border-top-left-radius: @topleftradiusvalue-ALIAS- + 0px; + -moz-border-radius-topleft: @topleftradiusvalue-ALIAS- + 0px; + border-top-left-radius: @topleftradiusvalue-ALIAS- + 0px; +} + +.topright () when (@toprightradiusvalue-ALIAS- > 0) { + -webkit-border-top-right-radius: @toprightradiusvalue-ALIAS- + 0px; + -moz-border-radius-topright: @toprightradiusvalue-ALIAS- + 0px; + border-top-right-radius: @toprightradiusvalue-ALIAS- + 0px; +} + +.bottomleft () when (@bottomleftradiusvalue-ALIAS- > 0) { + -webkit-border-bottom-left-radius: @bottomleftradiusvalue-ALIAS- + 0px; + -moz-border-radius-bottomleft: @bottomleftradiusvalue-ALIAS- + 0px; + border-bottom-left-radius: @bottomleftradiusvalue-ALIAS- + 0px; +} + +.bottomright () when (@bottomrightradiusvalue-ALIAS- > 0) { + -webkit-border-bottom-right-radius: @bottomrightradiusvalue-ALIAS- + 0px; + -moz-border-radius-bottomright: @bottomrightradiusvalue-ALIAS- + 0px; + border-bottom-right-radius: @bottomrightradiusvalue-ALIAS- + 0px; +} + + +-SCHEMA- { + -webkit-border-radius: @radiusvalue-ALIAS- + 0px; + -moz-border-radius: @radiusvalue-ALIAS- + 0px; + border-radius: @radiusvalue-ALIAS- + 0px; + .topleft; + .topright; + .bottomleft; + .bottomright; +} +/***end-lessStyle--ALIAS-***/ + + diff --git a/src/Umbraco.Web.UI.Client/src/tuning/index.html b/src/Umbraco.Web.UI.Client/src/tuning/index.html index 8c8f42a7d1..4e6501adf9 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/index.html +++ b/src/Umbraco.Web.UI.Client/src/tuning/index.html @@ -1,13 +1,15 @@  - + - + - + + +
Loading ...
@@ -15,186 +17,139 @@ -
+
-
- -
- -
- - -
- -
- -
- -
- -
- -
- -
+
+
+
-
-
+
    +
  • + +
  • +
  • + +
  • +
-

DEVICES

-
    -
  • -
    {{device.name}}
    -
  • -
-
- -
- -

STYLING

- -
- - - -
-
-
-
-
-
-
-
-
- -
- - - - -
- - - -
- -
- -
- -

PALETTE COLORS

-
    -
  • -
    - -
    -

    {{ palette.name }}

    -
  • -
- - - - -
+ +
+
- - - -
+ + + + + + + + + + +
+ +
+ +
+

{{configItem.name}}

+
+
+
+

{{category}}

+
+
+ +
+
+
+ +
+ +
+ + + + +
+ +
+ +
-
+ diff --git a/src/Umbraco.Web.UI.Client/src/tuning/lib/dialog.service.js b/src/Umbraco.Web.UI.Client/src/tuning/lib/dialog.service.js new file mode 100644 index 0000000000..6e392a33b1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/tuning/lib/dialog.service.js @@ -0,0 +1,108 @@ + +/*********************************************************************************************************/ +/* jQuery UI Slider plugin wrapper */ +/*********************************************************************************************************/ + +angular.module("umbraco.tuning").factory('dialogService', function ($rootScope, $q, $http, $timeout, $compile, $templateCache) { + + + function closeDialog(dialog) { + if (dialog.element) { + dialog.element.removeClass("selected"); + dialog.element.html(""); + dialog.scope.$destroy(); + } + } + + function open() { + } + + return { + + open: function (options) { + + var defaults = { + template: "", + callback: undefined, + change: undefined, + cancel: undefined, + element: undefined, + dialogItem: undefined, + dialogData: undefined + }; + + var dialog = angular.extend(defaults, options); + + var scope = (options && options.scope) || $rootScope.$new(); + + // Save original value for cancel action + var originalDialogItem = angular.copy(dialog.dialogItem); + + dialog.element = $(".float-right-menu"); + + + /************************************/ + $(document).mousedown(function (e) { + var container = dialog.element; + if (!container.is(e.target) && container.has(e.target).length === 0) { + closeDialog(dialog); + } + }); + /************************************/ + + + $q.when($templateCache.get(dialog.template) || $http.get(dialog.template, { cache: true }).then(function (res) { return res.data; })) + .then(function onSuccess(template) { + + dialog.element.html(template); + + $timeout(function () { + $compile(dialog.element)(scope); + }); + + dialog.element.addClass("selected") + + scope.cancel = function () { + if (dialog.cancel) { + dialog.cancel(originalDialogItem); + } + closeDialog(dialog); + } + + scope.change = function (data) { + if (dialog.change) { + dialog.change(data); + } + } + + scope.submit = function (data) { + if (dialog.callback) { + dialog.callback(data); + } + closeDialog(dialog); + }; + + scope.close = function () { + closeDialog(dialog); + } + + scope.dialogData = dialog.dialogData; + scope.dialogItem = dialog.dialogItem; + + dialog.scope = scope; + + }); + + return dialog; + + }, + + close: function() { + var modal = $(".float-right-menu"); + modal.removeClass("selected") + } + + } + + +}); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/tuning/lib/slider.directive.js b/src/Umbraco.Web.UI.Client/src/tuning/lib/slider.directive.js index 6d7fe6ee74..76c97ba4f6 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/lib/slider.directive.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/lib/slider.directive.js @@ -7,7 +7,7 @@ angular.module('ui.slider', []).value('uiSliderConfig', {}).directive('uiSlider' uiSliderConfig = uiSliderConfig || {}; return { require: 'ngModel', - template: '
px
', + template: '
', replace: true, compile: function () { return function (scope, elm, attrs, ngModel) { @@ -71,6 +71,7 @@ angular.module('ui.slider', []).value('uiSliderConfig', {}).directive('uiSlider' init(); if (newVal != undefined) { elm.find(".slider").slider('option', newVal); + elm.find(".ui-slider-handle").html("" + ui.value + "px") } }, true); @@ -86,6 +87,7 @@ angular.module('ui.slider', []).value('uiSliderConfig', {}).directive('uiSlider' elm.bind('slide', function (event, ui) { event.stopPropagation(); elm.find(".slider-input").val(ui.value); + elm.find(".ui-slider-handle").html("" + ui.value + "px") }); // Update slider from model value @@ -125,6 +127,7 @@ angular.module('ui.slider', []).value('uiSliderConfig', {}).directive('uiSlider' } elm.find(".slider").slider(method, ngModel.$viewValue); + elm.find(".ui-slider-handle").html("" + ngModel.$viewValue + "px") }; scope.$watch("value", function () { diff --git a/src/Umbraco.Web.UI.Client/src/tuning/lib/spectrum.directive.js b/src/Umbraco.Web.UI.Client/src/tuning/lib/spectrum.directive.js index 88c357ac89..53b7da0a99 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/lib/spectrum.directive.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/lib/spectrum.directive.js @@ -17,6 +17,7 @@ angular.module('spectrumcolorpicker', []) $element.find("input").spectrum({ color: scope.colorselected, + allowEmpty: true, preferredFormat: "rgb", showAlpha: true, showInput: true, @@ -44,7 +45,7 @@ angular.module('spectrumcolorpicker', []) }, template: - '
', + '
', replace: true }; }) \ No newline at end of file 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 b78f379041..12534a4acc 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.controller.js @@ -3,21 +3,16 @@ /* tuning panel app and controller */ /*********************************************************************************************************/ -angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.slider', 'umbraco.resources', 'umbraco.services']) +var app = angular.module("umbraco.tuning", ['spectrumcolorpicker', 'ui.slider', 'umbraco.resources', 'umbraco.services', 'antiscroll']) -.controller("Umbraco.tuningController", function ($scope, $modal, $http, $window, $timeout, $location) { +.controller("Umbraco.tuningController", function ($scope, $http, $window, $timeout, $location, dialogService) { $scope.isOpen = false; $scope.frameLoaded = false; $scope.enableTuning = 0; $scope.schemaFocus = "body"; $scope.settingIsOpen = 'previewDevice'; - $scope.BackgroundPositions = ['center', 'left', 'right', 'bottom center', 'bottom left', 'bottom right', 'top center', 'top left', 'top right']; - $scope.BackgroundRepeats = ['no-repeat', 'repeat', 'repeat-x', 'repeat-y']; - $scope.BackgroundAttachments = ['scroll', 'fixed']; - $scope.Layouts = ['boxed', 'wide', 'full']; - $scope.displays = ['float-left', 'float-right', 'block-left', 'block-right', 'none']; - $scope.optionHomes = ['icon', 'text', 'none']; + $scope.propertyCategories = []; $scope.googleFontFamilies = {}; $scope.pageId = "../dialogs/Preview.aspx?id=" + $location.search().id; $scope.devices = [ @@ -50,22 +45,19 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli $.each($scope.tuningModel.configs, function (indexConfig, config) { $.each(config.editors, function (indexItem, item) { + /* try to get value */ try { 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; } - }) } @@ -99,11 +91,10 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli .success(function (data) { updateConfigValue(data); - $scope.frameLoaded = true; - - if ($scope.settingIsOpen == "setting") { - openIntelTuning(); - } + + $timeout(function () { + $scope.frameLoaded = true; + }, 200); }); @@ -111,13 +102,21 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli // Refresh all less parameters for every changes watching tuningModel var refreshtuning = function () { + var parameters = []; if ($scope.tuningModel) { - angular.forEach($scope.tuningModel.configs, function (config, indexConfig) { + + // Get currrent selected element + if ($scope.schemaFocus && angular.lowercase($scope.schemaFocus) == angular.lowercase(config.name)) { + $scope.currentSelected = config.selector ? config.selector : config.schema; + } + angular.forEach(config.editors, function (item, indexItem) { + + // Add new style if (item.values) { angular.forEach(Object.keys(item.values), function (key, indexKey) { var propertyAlias = key.toLowerCase() + item.alias.toLowerCase(); @@ -130,6 +129,11 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli // Refrech page style refreshFrontStyles(parameters); + + // Refrech layout of selected element + if ($scope.currentSelected) { + setSelectedSchema($scope.currentSelected); + } } } @@ -249,67 +253,86 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli /* Panel managment */ /*****************************************************************************/ - // Toggle panel - $scope.togglePanel = function () { - if ($scope.isOpen) { - $scope.isOpen = false; - closeIntelTuning(); - } - else { - $scope.isOpen = true; - $scope.settingOpen($scope.settingIsOpen); + $scope.openPreviewDevice = function () { + $scope.showDevicesPreview = true; + $scope.closeIntelTuning() + } + + $scope.closePreviewDevice = function(){ + $scope.showDevicesPreview = false; + if ($scope.showStyleEditor) { + $scope.openIntelTuning(); } } + $scope.openPalettePicker = function () { + $scope.showPalettePicker = true; + $scope.showStyleEditor = false; + $scope.closeIntelTuning() + } + + $scope.openStyleEditor = function () { + $scope.showStyleEditor = true; + $scope.showPalettePicker = false; + $scope.openIntelTuning() + } + + // Toggle panel + //$scope.togglePanel = function () { + // if ($scope.isOpen) { + // $scope.isOpen = false; + // closeIntelTuning(); + // } + // else { + // $scope.isOpen = true; + // $scope.settingOpen($scope.settingIsOpen); + // } + //} + // Toggle setting - $scope.settingOpen = function (a) { + //$scope.settingOpen = function (a) { - if ($scope.settingIsOpen == "setting" && a != "setting") { - closeIntelTuning(); - } + // if ($scope.settingIsOpen == "setting" && a != "setting") { + // closeIntelTuning(); + // } - if (a == "setting") { - openIntelTuning(); - } + // if (a == "setting") { + // openIntelTuning(); + // } - $scope.settingIsOpen = a; - } + // $scope.settingIsOpen = a; + //} // Remove value from field $scope.removeField = function (field) { field.value = ""; } - // Accordion open event - $scope.accordionOpened = function (schema) { - $scope.schemaFocus = schema; - } + //// Accordion open event + //$scope.accordionOpened = function (schema) { + // $scope.schemaFocus = schema; + //} - // Focus schema in front - $scope.accordionWillBeOpened = function (editor) { - var selector = editor.selector ? editor.selector : editor.schema - setSelectedSchema(selector); - } + //// Focus schema in front + //$scope.accordionWillBeOpened = function (editor) { + // var selector = editor.selector ? editor.selector : editor.schema + // setSelectedSchema(selector); + //} /*****************************************************************************/ /* Call function into the front-end */ /*****************************************************************************/ - var openIntelTuning = function () { - if (document.getElementById("resultFrame").contentWindow.initIntelTuning) - document.getElementById("resultFrame").contentWindow.initIntelTuning($scope.tuningModel); - } - - var closeIntelTuning = function () { - if (document.getElementById("resultFrame").contentWindow.closeIntelTuning) - document.getElementById("resultFrame").contentWindow.closeIntelTuning($scope.tuningModel); - } - var loadGoogleFontInFront = function (font) { if (document.getElementById("resultFrame").contentWindow.getFont) document.getElementById("resultFrame").contentWindow.getFont(font); } + var setOutlinePosition = function (schema) { + if (document.getElementById("resultFrame").contentWindow.setOutlinePosition) + document.getElementById("resultFrame").contentWindow.setOutlinePosition(schema); + } + var setSelectedSchema = function (schema) { if (document.getElementById("resultFrame").contentWindow.setSelectedSchema) document.getElementById("resultFrame").contentWindow.setSelectedSchema(schema); @@ -320,6 +343,34 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli document.getElementById("resultFrame").contentWindow.refrechLayout(parameters); } + $scope.openIntelTuning = function () { + if (document.getElementById("resultFrame").contentWindow.initIntelTuning) + document.getElementById("resultFrame").contentWindow.initIntelTuning($scope.tuningModel); + + // Refrech layout of selected element + if ($scope.currentSelected) { + setSelectedSchema($scope.currentSelected); + } + + } + + $scope.closeIntelTuning = function () { + if (document.getElementById("resultFrame").contentWindow.closeIntelTuning) + document.getElementById("resultFrame").contentWindow.closeIntelTuning($scope.tuningModel); + $scope.outlinePositionHide(); + $scope.outlineSelectedHide(); + } + + $scope.outlinePositionHide = function () { + if (document.getElementById("resultFrame").contentWindow.outlinePositionHide) + document.getElementById("resultFrame").contentWindow.outlinePositionHide(); + } + + $scope.outlineSelectedHide = function () { + if (document.getElementById("resultFrame").contentWindow.outlineSelectedHide) + document.getElementById("resultFrame").contentWindow.outlineSelectedHide(); + } + /*****************************************************************************/ /* Google font loader, TODO: put together from directive, front and back */ /*****************************************************************************/ @@ -368,7 +419,32 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli $scope.$watch("enableTuning", function () { $timeout(function () { if ($scope.enableTuning > 0) { - $scope.initTuning(); + + + + + $.each($scope.tuningModel.configs, function (indexConfig, config) { + $.each(config.editors, function (indexItem, item) { + + /* get distinct dategoryies */ + if (item.category) { + if ($.inArray(item.category, $scope.propertyCategories) < 0) { + $scope.propertyCategories.splice($scope.propertyCategories.length + 1, 0, item.category); + } + } + + }) + }); + + + + + + $scope.$watch('ngRepeatFinished', function (ngRepeatFinishedEvent) { + $scope.initTuning(); + }); + + $scope.$watch('tuningModel', function () { refreshtuning(); }, true); @@ -377,3 +453,18 @@ angular.module("umbraco.tuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.sli }, true) }) + +.directive('onFinishRenderFilters', function ($timeout) { + return { + restrict: 'A', + link: function (scope, element, attr) { + if (scope.$last === true) { + $timeout(function () { + scope.$emit('ngRepeatFinished'); + }); + } + } + } +}); + + 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 5b3767786d..04baa3b592 100644 --- a/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js +++ b/src/Umbraco.Web.UI.Client/src/tuning/tuning.front.js @@ -45,10 +45,14 @@ var getFont = function (font) { } } -var setSelectedSchema = function (schema) { +var setOutlinePosition = function (schema) { outlinePosition($(schema)); } +var setSelectedSchema = function (schema) { + outlineSelected($(schema)); +} + var closeIntelTuning = function (tuningModel) { if (tuningModel) { @@ -73,6 +77,7 @@ var initIntelTuning = function (tuningModel) { var schema = config.selector ? config.selector : config.schema; if (schema) { $(schema).attr("tuning-over", config.name); + $(schema).css("cursor", "default"); } }); @@ -88,19 +93,18 @@ var initIntelTuning = function (tuningModel) { if (target.attr('tuning-over') != undefined && target.attr('tuning-over') != '') { target.unbind(); - outlinePosition(target); - target.click(function (e) { e.stopPropagation(); e.preventDefault(); console.info(target.attr('tuning-over')); + outlineSelected(target); parent.refrechIntelTuning(target.attr('tuning-over')); return false; }); } else { - outlineHide(); + outlinePositionHide(); } }); @@ -108,6 +112,14 @@ var initIntelTuning = function (tuningModel) { } + + + + + + + + var outlinePosition = function (target) { if (target.length > 0 && target.attr('tuning-over') != undefined && target.attr('tuning-over') != '') { @@ -119,86 +131,55 @@ var outlinePosition = function (target) { var posY = position.top - $(window).scrollTop(); var posX = position.left - $(window).scrollLeft(); + $(".tuning-overlay").css('display', 'block'); + $(".tuning-overlay").css('left', posX); + $(".tuning-overlay").css('top', posY); + $(".tuning-overlay").css('width', width + "px"); + $(".tuning-overlay").css('height', height + "px"); + console.info("element select " + localname); - - $("#outline-data").html(target.attr('tuning-over')); - $("#outline-data").css('position', 'fixed'); - $("#outline-data").css('top', posY); - $("#outline-data").css('left', posX); - $("#outline-data").css('display', 'block'); - $("#outline-data").css('position', 'fixed'); - $("#outline-data").css('background-color', 'rgb(164, 198, 253)'); - $("#outline-data").css('color', '#000000'); - $("#outline-data").css('padding', '0px 5px 0px 5px'); - $("#outline-data").css('font-size', '11px'); - $("#outline-data").css('transition', 'all .05s ease-in-out'); - $("#outline-data").css('-moz-transition', 'all .05s ease-in-out'); - $("#outline-data").css('-webkit-transition', 'all .05s ease-in-out'); - $("#outline-data").css('z-index', '9999999999999999999999999'); - - $("#outline-sup").css('display', "block"); - $("#outline-sup").css('height', "2px"); - $("#outline-sup").css('width', width + "px"); - $("#outline-sup").css('position', 'fixed'); - $("#outline-sup").css('top', posY); - $("#outline-sup").css('left', posX); - $("#outline-sup").css('background-color', '#a4c6fd'); - $("#outline-sup").css('transition', 'all .05s ease-in-out'); - $("#outline-sup").css('-moz-transition', 'all .05s ease-in-out'); - $("#outline-sup").css('-webkit-transition', 'all .05s ease-in-out'); - $("#outline-sup").css('z-index', '9999999999999999999999999'); - - $("#outline-inf").css('display', "block"); - $("#outline-inf").css('height', "2px"); - $("#outline-inf").css('width', Number(width + 2) + "px"); - $("#outline-inf").css('position', 'fixed'); - $("#outline-inf").css('top', posY + height); - $("#outline-inf").css('left', posX); - $("#outline-inf").css('background-color', '#a4c6fd'); - $("#outline-inf").css('transition', 'all .05s ease-in-out'); - $("#outline-inf").css('-moz-transition', 'all .05s ease-in-out'); - $("#outline-inf").css('-webkit-transition', 'all .05s ease-in-out'); - $("#outline-inf").css('z-index', '9999999999999999999999999'); - - $("#outline-left").css('display', "block"); - $("#outline-left").css('height', height + "px"); - $("#outline-left").css('width', "2px"); - $("#outline-left").css('position', 'fixed'); - $("#outline-left").css('top', posY); - $("#outline-left").css('left', posX); - $("#outline-left").css('background-color', '#a4c6fd'); - $("#outline-left").css('transition', 'all .05s ease-in-out'); - $("#outline-left").css('-moz-transition', 'all .05s ease-in-out'); - $("#outline-left").css('-webkit-transition', 'all .05s ease-in-out'); - $("#outline-left").css('z-index', '9999999999999999999999999'); - - $("#outline-right").css('display', "block"); - $("#outline-right").css('height', height + "px"); - $("#outline-right").css('width', "2px"); - $("#outline-right").css('position', 'fixed'); - $("#outline-right").css('top', posY); - $("#outline-right").css('left', posX + width); - $("#outline-right").css('background-color', '#a4c6fd'); - $("#outline-right").css('transition', 'all .05s ease-in-out'); - $("#outline-right").css('-moz-transition', 'all .05s ease-in-out'); - $("#outline-right").css('-webkit-transition', 'all .05s ease-in-out'); - $("#outline-right").css('z-index', '9999999999999999999999999'); + $(".tuning-overlay span").html(target.attr('tuning-over')); } else { - outlineHide(); + outlinePositionHide(); console.info("element not found select"); } } -var outlineHide = function () { +var outlineSelected = function (target) { - $("#outline-data").css('display', "none"); - $("#outline-sup").css('display', "none"); - $("#outline-inf").css('display', "none"); - $("#outline-right").css('display', "none"); - $("#outline-left").css('display', "none"); + if (target.length > 0 && target.attr('tuning-over') != undefined && target.attr('tuning-over') != '') { + var localname = target[0].localName; + var height = $(target).outerHeight(); + var width = $(target).outerWidth(); + var position = $(target).offset(); + var posY = position.top - $(window).scrollTop(); + var posX = position.left - $(window).scrollLeft(); + + $(".tuning-overlay-selected").css('display', 'block'); + $(".tuning-overlay-selected").css('left', posX); + $(".tuning-overlay-selected").css('top', posY); + $(".tuning-overlay-selected").css('width', width + "px"); + $(".tuning-overlay-selected").css('height', height + "px"); + + console.info("element select " + localname); + + } + else { + outlinePositionHide(); + console.info("element not found select"); + } + +} + +var outlinePositionHide = function () { + $(".tuning-overlay").css('display', "none"); +} + +var outlineSelectedHide = function () { + $(".tuning-overlay-selected").css('display', "none"); } var initTuningPanel = function () { @@ -278,8 +259,9 @@ $(function () { if (parent.setFrameIsLoaded) { - // Init ouline layer - $("body").append("
"); + // Overlay background-color: rgba(28, 203, 255, 0.05); + $("body").append("
"); + $("body").append("
"); // Init tuning panel initTuningPanel(); diff --git a/src/Umbraco.Web/TuningUtility.cs b/src/Umbraco.Web/TuningUtility.cs index 1f565b97ab..8dab1be699 100644 --- a/src/Umbraco.Web/TuningUtility.cs +++ b/src/Umbraco.Web/TuningUtility.cs @@ -155,7 +155,7 @@ namespace Umbraco.Web } lessContent = lessContent + Environment.NewLine + lessModel - .Replace("-ALIAS-", alias) + .Replace("-ALIAS-", alias.ToLower()) .Replace("-SCHEMA-", schema); foreach (var parameter in editorItem)