Merge branch 'develop' of github.com:octobercms/october into develop

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;
+}

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);

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 = $('<p/>').addClass(options.class).html(options.text)
 
-        $element.addClass('flash-message')
+        $element.addClass('flash-message fade')
         $element.attr('data-control', null)
-        $element.append('<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>')
+        $element.append('<button type="button" class="close" aria-hidden="true">&times;</button>')
         $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
     // ===============

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;
+            }
+        }
+    }
+}

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;
-            }
-        }
-    }
-}

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;

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";

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
          */

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;

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 {

modules/backend/layouts/_head.htm

@@ -67,6 +67,7 @@
 <script src="<?= URL::asset('modules/backend/assets/js/october.rowlink.js') ?>"></script>
 <script src="<?= URL::asset('modules/backend/assets/js/october.treelist.js') ?>"></script>
 <script src="<?= URL::asset('modules/backend/assets/js/october.autocomplete.js') ?>"></script>
+<script src="<?= URL::asset('modules/backend/assets/js/october.callout.js') ?>"></script>
 
 
 <script>

modules/backend/layouts/_hint.htm

@@ -2,7 +2,7 @@
     $type = !empty($type) ? $type : 'info';
 ?>
 <?php if (empty($hintName) || !$this->isBackendHintHidden($hintName)): ?>
-    <div class="callout callout-<?= $type ?> <?=empty($icon)?'no-icon':''?> <?=empty($subtitle)?'no-subheader':''?>">
+    <div class="callout callout-<?= $type ?> fade in <?=empty($icon)?'no-icon':''?> <?=empty($subtitle)?'no-subheader':''?>">
         <?php if (!empty($hintName)): ?>
             <button
                 type="button"

modules/cms/classes/Controller.php

@@ -106,9 +106,9 @@ class Controller extends BaseController
      * If the parameter is omitted, the current URL used.
      * @return string Returns the processed page content.
      */
-    public function run($url = null)
+    public function run($url = '/')
     {
-        if (!$url)
+        if ($url === null)
             $url = Request::path();
 
         if (!strlen($url))
@@ -690,8 +690,13 @@ class Controller extends BaseController
         if ($routePersistence)
             $parameters = array_merge($this->router->getParameters(), $parameters);
 
-        $url = $this->router->findByFile($name, $parameters);
-        return ($url) ? URL::to($url) : null;
+        if (!$url = $this->router->findByFile($name, $parameters))
+            return null;
+
+        if (substr($url, 0, 1) == '/')
+            $url = substr($url, 1);
+
+        return URL::action('Cms\Classes\Controller@run', ['slug' => $url]);
     }
 
     /**

modules/cms/widgets/assetlist/assets/css/assetlist.css

@@ -201,7 +201,7 @@
 }
 .control-assetlist ul li .checkbox {
   position: absolute;
-  top: 3px;
+  top: 13px;
   right: 17px;
 }
 .control-assetlist ul li .checkbox label {

modules/cms/widgets/assetlist/assets/less/assetlist.less

@@ -185,7 +185,7 @@
 
             .checkbox {
                 position: absolute;
-                top: 3px;
+                top: 13px;
                 right: 17px;
 
                 label {