diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 47a6ebabc..674351cf2 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -10412,129 +10412,6 @@ html.cssanimations .cursor-loading-indicator.hide { background-repeat: no-repeat; background-size: 50% auto; } -.callout { - font-size: 14px; - margin-bottom: 20px; -} -.callout > .close { - margin: 15px 15px 0 0; -} -.callout.callout-danger > .header { - background: #f6b5b2; -} -.callout.callout-danger > .header i { - color: #9f5551; -} -.callout.callout-danger > .content { - background: #f8d6d5; -} -.callout.callout-info > .header { - background: #b9dbef; -} -.callout.callout-info > .header i { - color: #597f97; -} -.callout.callout-info > .content { - background: #d8eaf4; -} -.callout.callout-success > .header { - background: #d3e9bf; -} -.callout.callout-success > .header i { - color: #6d915e; -} -.callout.callout-success > .content { - background: #e6f1db; -} -.callout.callout-warning > .header { - background: #f6e7b2; -} -.callout.callout-warning > .header i { - color: #9f8e51; -} -.callout.callout-warning > .content { - background: #f8f0d5; -} -.callout > .header { - padding: 20px; - padding-bottom: 15px; - -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; - color: #2f2d26; -} -.callout > .header h3 { - letter-spacing: 0; - margin: 0 0 7px 0; - font-size: 14px; - font-weight: bold; -} -.callout > .header h3, -.callout > .header p { - margin-left: 35px; -} -.callout > .header *:last-child { - margin-bottom: 0; -} -.callout > .header:last-child { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.callout > .header i { - font-size: 26px; - float: left; -} -.callout > .content { - color: #2f2d26; - padding: 16px 20px 15px; -} -.callout > .content h1, -.callout > .content h2, -.callout > .content h3, -.callout > .content h4, -.callout > .content h5, -.callout > .content h6 { - color: #2f2d26; - text-transform: none; - margin: 20px 0 5px 0; - line-height: 150%; -} -.callout > .content h1 { - font-size: 30px; -} -.callout > .content h2 { - font-size: 26px; -} -.callout > .content h3 { - font-size: 24px; -} -.callout > .content h4 { - font-size: 20px; -} -.callout > .content h5 { - font-size: 18px; -} -.callout > .content h6 { - font-size: 16px; -} -.callout > .content *:last-child { - margin-bottom: 0; -} -.callout > .content ul li, -.callout > .content ol li { - margin-bottom: 5px; -} -.callout > .content .action-panel { - padding: 10px 0 0 0; -} -.callout.no-icon > .header h3, -.callout.no-icon > .header p { - margin-left: 0; -} -.callout.no-subheader > .header i { - margin-top: -5px; -} .dropdown-menu { padding: 0; background: transparent; @@ -11113,6 +10990,22 @@ body.dropdown-open .dropdown-overlay { -moz-border-radius: 2px; border-radius: 2px; } +.flash-message.fade { + opacity: 0; + filter: alpha(opacity=0); + -webkit-transition: all 0.5s, width 0s; + transition: all 0.5s, width 0s; + -webkit-transform: scale(0.9); + -ms-transform: scale(0.9); + transform: scale(0.9); +} +.flash-message.fade.in { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} .flash-message.success { background: #8da85e; } @@ -12799,3 +12692,142 @@ div[data-control="balloon-selector"]:not(.control-disabled) ul li:hover { top: 8px; z-index: 2000; } +.callout { + font-size: 14px; + margin-bottom: 20px; +} +.callout.fade { + opacity: 0; + filter: alpha(opacity=0); + -webkit-transition: all 0.5s, width 0s; + transition: all 0.5s, width 0s; + -webkit-transform: scale(0.9); + -ms-transform: scale(0.9); + transform: scale(0.9); +} +.callout.fade.in { + opacity: 1; + filter: alpha(opacity=100); + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} +.callout > .close { + margin: 15px 15px 0 0; +} +.callout.callout-danger > .header { + background: #f6b5b2; +} +.callout.callout-danger > .header i { + color: #9f5551; +} +.callout.callout-danger > .content { + background: #f8d6d5; +} +.callout.callout-info > .header { + background: #b9dbef; +} +.callout.callout-info > .header i { + color: #597f97; +} +.callout.callout-info > .content { + background: #d8eaf4; +} +.callout.callout-success > .header { + background: #d3e9bf; +} +.callout.callout-success > .header i { + color: #6d915e; +} +.callout.callout-success > .content { + background: #e6f1db; +} +.callout.callout-warning > .header { + background: #f6e7b2; +} +.callout.callout-warning > .header i { + color: #9f8e51; +} +.callout.callout-warning > .content { + background: #f8f0d5; +} +.callout > .header { + padding: 20px; + padding-bottom: 15px; + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; + color: #2f2d26; +} +.callout > .header h3 { + letter-spacing: 0; + margin: 0 0 7px 0; + font-size: 14px; + font-weight: bold; +} +.callout > .header h3, +.callout > .header p { + margin-left: 35px; +} +.callout > .header *:last-child { + margin-bottom: 0; +} +.callout > .header:last-child { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} +.callout > .header i { + font-size: 26px; + float: left; +} +.callout > .content { + color: #2f2d26; + padding: 16px 20px 15px; +} +.callout > .content h1, +.callout > .content h2, +.callout > .content h3, +.callout > .content h4, +.callout > .content h5, +.callout > .content h6 { + color: #2f2d26; + text-transform: none; + margin: 20px 0 5px 0; + line-height: 150%; +} +.callout > .content h1 { + font-size: 30px; +} +.callout > .content h2 { + font-size: 26px; +} +.callout > .content h3 { + font-size: 24px; +} +.callout > .content h4 { + font-size: 20px; +} +.callout > .content h5 { + font-size: 18px; +} +.callout > .content h6 { + font-size: 16px; +} +.callout > .content *:last-child { + margin-bottom: 0; +} +.callout > .content ul li, +.callout > .content ol li { + margin-bottom: 5px; +} +.callout > .content .action-panel { + padding: 10px 0 0 0; +} +.callout.no-icon > .header h3, +.callout.no-icon > .header p { + margin-left: 0; +} +.callout.no-subheader > .header i { + margin-top: -5px; +} diff --git a/modules/backend/assets/js/october.callout.js b/modules/backend/assets/js/october.callout.js new file mode 100644 index 000000000..e60b4a793 --- /dev/null +++ b/modules/backend/assets/js/october.callout.js @@ -0,0 +1,87 @@ +/* + * Callout + * + * Supported options: + * - xxx - none + * + * Events: + * - close.oc.callout - triggered when a node on the tree is moved. + * + * Dependences: + */ ++function ($) { + 'use strict'; + + // CALLOUT CLASS DEFINITION + // ====================== + + var dismiss = '[data-dismiss="callout"]' + var Callout = function (el) { + $(el).on('click', dismiss, this.close) + } + + Callout.prototype.close = function (e) { + var $this = $(this) + var selector = $this.attr('data-target') + + if (!selector) { + selector = $this.attr('href') + selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7 + } + + var $parent = $(selector) + + if (e) e.preventDefault() + + if (!$parent.length) { + $parent = $this.hasClass('callout') ? $this : $this.parent() + } + + $parent.trigger(e = $.Event('close.oc.callout')) + + if (e.isDefaultPrevented()) return + + $parent.removeClass('in') + + function removeElement() { + $parent.trigger('closed.oc.callout').remove() + } + + $.support.transition && $parent.hasClass('fade') ? + $parent + .one($.support.transition.end, removeElement) + .emulateTransitionEnd(500) : + removeElement() + } + + // CALLOUT PLUGIN DEFINITION + // ======================= + + var old = $.fn.callout + + $.fn.callout = function (option) { + return this.each(function () { + var $this = $(this) + var data = $this.data('oc.callout') + + if (!data) $this.data('oc.callout', (data = new Callout(this))) + if (typeof option == 'string') data[option].call($this) + }) + } + + $.fn.callout.Constructor = Callout + + // CALLOUT NO CONFLICT + // ================= + + $.fn.callout.noConflict = function () { + $.fn.callout = old + return this + } + + // CALLOUT DATA-API + // ============== + + $(document).on('click.oc.callout.data-api', dismiss, Callout.prototype.close) + +}(jQuery); diff --git a/modules/backend/assets/js/october.flashmessage.js b/modules/backend/assets/js/october.flashmessage.js index ba64b0dcf..00c7e9df1 100644 --- a/modules/backend/assets/js/october.flashmessage.js +++ b/modules/backend/assets/js/october.flashmessage.js @@ -12,33 +12,42 @@ +function ($) { "use strict"; var FlashMessage = function (options, el) { - var + var options = $.extend({}, FlashMessage.DEFAULTS, options), - $element = $(el); + $element = $(el) $('body > p.flash-message').remove() if ($element.length == 0) $element = $('
').addClass(options.class).html(options.text) - $element.addClass('flash-message') + $element.addClass('flash-message fade') $element.attr('data-control', null) - $element.append('') + $element.append('') $element.on('click', 'button', remove) + $element.on('click', remove) - $(document.body).append($element); + $(document.body).append($element) + + setTimeout(function(){ + $element.addClass('in') + }, 1) var timer = window.setTimeout(remove, options.interval*1000) + function removeElement() { + $element.remove() + } + function remove() { window.clearInterval(timer) - $element.animate({'opacity': 0}, { - duration: 200, - queue: false, - complete: function() { - $element.remove(); - } - }) + + $element.removeClass('in') + $.support.transition && $element.hasClass('fade') ? + $element + .one($.support.transition.end, removeElement) + .emulateTransitionEnd(500) : + removeElement() } } @@ -53,8 +62,8 @@ if ($.oc === undefined) $.oc = {} - - $.oc.flashMsg = FlashMessage + + $.oc.flashMsg = FlashMessage // FLASH MESSAGE DATA-API // =============== diff --git a/modules/backend/assets/less/controls/callout.less b/modules/backend/assets/less/controls/callout.less new file mode 100644 index 000000000..4b4586799 --- /dev/null +++ b/modules/backend/assets/less/controls/callout.less @@ -0,0 +1,135 @@ +// +// Callouts +// -------------------------------------------------- + +.callout { + font-size: 14px; + margin-bottom: @line-height-computed; + + &.fade { + .opacity(0); + .transition(~'all 0.5s, width 0s'); + .transform(~'scale(0.9)'); + } + + &.fade.in { + .opacity(1); + .transform( ~'scale(1)'); + } + + > .close { + margin: 15px 15px 0 0; + } + + &.callout-danger { + > .header { + background: @callout-danger-header-bg; + i { color: @callout-danger-icon; } + } + > .content { background: @callout-danger-content-bg; } + } + + &.callout-info { + > .header { + background: @callout-info-header-bg; + i { color: @callout-info-icon; } + } + > .content { background: @callout-info-content-bg; } + } + + &.callout-success { + > .header { + background: @callout-success-header-bg; + i { color: @callout-success-icon; } + } + > .content { background: @callout-success-content-bg; } + } + + &.callout-warning { + > .header { + background: @callout-warning-header-bg; + i { color: @callout-warning-icon; } + } + > .content { background: @callout-warning-content-bg; } + } + + > .header { + padding: @callout-padding; + padding-bottom: 15px; + .border-radius(4px 4px 0 0); + color: #2f2d26; + + h3 { + letter-spacing: 0; + margin: 0 0 7px 0; + font-size: 14px; + font-weight: bold; + } + + h3, p { + margin-left: 35px; + } + + *:last-child { + margin-bottom: 0; + } + + &:last-child { + .border-radius(4px); + } + + i { + font-size: 26px; + float: left; + } + } + + > .content { + color: #2f2d26; + padding: 16px 20px 15px; + + h1, h2, h3, h4, h5, h6 { + color: #2f2d26; + text-transform: none; + margin: 20px 0 5px 0; + line-height: 150%; + } + + h1 { font-size: 30px; } + h2 { font-size: 26px; } + h3 { font-size: 24px; } + h4 { font-size: 20px; } + h5 { font-size: 18px; } + h6 { font-size: 16px; } + + *:last-child { + margin-bottom: 0; + } + + ul, ol { + li { + margin-bottom: 5px; + } + } + + .action-panel { + padding: 10px 0 0 0; + } + } + + &.no-icon { + > .header { + h3, p { + margin-left: 0; + } + } + } + + &.no-subheader { + > .header { + i { + margin-top: -5px; + } + } + } +} \ No newline at end of file diff --git a/modules/backend/assets/less/controls/common.less b/modules/backend/assets/less/controls/common.less index 75c3958b4..6f901fb1b 100644 --- a/modules/backend/assets/less/controls/common.less +++ b/modules/backend/assets/less/controls/common.less @@ -32,128 +32,3 @@ background-repeat: no-repeat; background-size: 50% auto; } - -// -// Callouts -// -------------------------------------------------- - -.callout { - font-size: 14px; - margin-bottom: @line-height-computed; - - > .close { - margin: 15px 15px 0 0; - } - - &.callout-danger { - > .header { - background: @callout-danger-header-bg; - i { color: @callout-danger-icon; } - } - > .content { background: @callout-danger-content-bg; } - } - - &.callout-info { - > .header { - background: @callout-info-header-bg; - i { color: @callout-info-icon; } - } - > .content { background: @callout-info-content-bg; } - } - - &.callout-success { - > .header { - background: @callout-success-header-bg; - i { color: @callout-success-icon; } - } - > .content { background: @callout-success-content-bg; } - } - - &.callout-warning { - > .header { - background: @callout-warning-header-bg; - i { color: @callout-warning-icon; } - } - > .content { background: @callout-warning-content-bg; } - } - - > .header { - padding: @callout-padding; - padding-bottom: 15px; - .border-radius(4px 4px 0 0); - color: #2f2d26; - - h3 { - letter-spacing: 0; - margin: 0 0 7px 0; - font-size: 14px; - font-weight: bold; - } - - h3, p { - margin-left: 35px; - } - - *:last-child { - margin-bottom: 0; - } - - &:last-child { - .border-radius(4px); - } - - i { - font-size: 26px; - float: left; - } - } - - > .content { - color: #2f2d26; - padding: 16px 20px 15px; - - h1, h2, h3, h4, h5, h6 { - color: #2f2d26; - text-transform: none; - margin: 20px 0 5px 0; - line-height: 150%; - } - - h1 { font-size: 30px; } - h2 { font-size: 26px; } - h3 { font-size: 24px; } - h4 { font-size: 20px; } - h5 { font-size: 18px; } - h6 { font-size: 16px; } - - *:last-child { - margin-bottom: 0; - } - - ul, ol { - li { - margin-bottom: 5px; - } - } - - .action-panel { - padding: 10px 0 0 0; - } - } - - &.no-icon { - > .header { - h3, p { - margin-left: 0; - } - } - } - - &.no-subheader { - > .header { - i { - margin-top: -5px; - } - } - } -} \ No newline at end of file diff --git a/modules/backend/assets/less/controls/flashmessage.less b/modules/backend/assets/less/controls/flashmessage.less index bad19473c..916c7ff05 100644 --- a/modules/backend/assets/less/controls/flashmessage.less +++ b/modules/backend/assets/less/controls/flashmessage.less @@ -18,9 +18,20 @@ z-index: 10000; .border-radius(@border-radius-base); - &.success {background: @color-flash-success-bg;} - &.error {background: @color-flash-error-bg;} - &.warning {background: @color-flash-warning-bg;} + &.fade { + .opacity(0); + .transition(~'all 0.5s, width 0s'); + .transform(~'scale(0.9)'); + } + + &.fade.in { + .opacity(1); + .transform( ~'scale(1)'); + } + + &.success { background: @color-flash-success-bg; } + &.error { background: @color-flash-error-bg; } + &.warning { background: @color-flash-warning-bg; } button { float: none; diff --git a/modules/backend/assets/less/october.less b/modules/backend/assets/less/october.less index 4a3c0b359..2b7f57420 100644 --- a/modules/backend/assets/less/october.less +++ b/modules/backend/assets/less/october.less @@ -41,3 +41,4 @@ @import "controls/ballooncontrols.less"; @import "controls/reportwidgets.less"; @import "controls/treelist.less"; +@import "controls/callout.less"; diff --git a/modules/backend/classes/BackendController.php b/modules/backend/classes/BackendController.php index ec61e09ee..ea5b2172c 100644 --- a/modules/backend/classes/BackendController.php +++ b/modules/backend/classes/BackendController.php @@ -61,7 +61,7 @@ class BackendController extends ControllerBase if ($controllerObj = $this->findController($controllerClass, $action, Config::get('cms.pluginsDir', '/plugins'))) return $controllerObj->run($action, $controllerParams); } - + /* * Fall back on Cms controller */ diff --git a/modules/backend/formwidgets/codeeditor/assets/css/codeeditor.css b/modules/backend/formwidgets/codeeditor/assets/css/codeeditor.css index c729b7d6a..4a59d2085 100644 --- a/modules/backend/formwidgets/codeeditor/assets/css/codeeditor.css +++ b/modules/backend/formwidgets/codeeditor/assets/css/codeeditor.css @@ -31,6 +31,8 @@ .field-codeeditor .ace_search { font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; + color: #333333; + z-index: 153; } .field-codeeditor .editor-code { -webkit-border-radius: 2px; diff --git a/modules/backend/formwidgets/codeeditor/assets/less/codeeditor.less b/modules/backend/formwidgets/codeeditor/assets/less/codeeditor.less index 09434b27b..a0fcbac58 100644 --- a/modules/backend/formwidgets/codeeditor/assets/less/codeeditor.less +++ b/modules/backend/formwidgets/codeeditor/assets/less/codeeditor.less @@ -20,6 +20,8 @@ .ace_search { font-family: @font-family-sans-serif; font-size: 14px; + color: @text-color; + z-index: @codeeditor-zindex + 3; } .editor-code { diff --git a/modules/backend/layouts/_head.htm b/modules/backend/layouts/_head.htm index 578d24fba..2d33dc454 100644 --- a/modules/backend/layouts/_head.htm +++ b/modules/backend/layouts/_head.htm @@ -67,6 +67,7 @@ +