Improve the hint API, add inset mode to loader

modules/backend/assets/css/october.css

@@ -2051,6 +2051,8 @@ html.cssanimations .loading-indicator.size-small > span,html.cssanimations .load
 .loading-indicator.indicator-center,.loading-indicator-container.indicator-center .loading-indicator{padding:20px}
 .loading-indicator.indicator-center > span,.loading-indicator-container.indicator-center .loading-indicator > span{left:50%;margin-left:-20px;margin-top:-20px}
 .loading-indicator.indicator-center > div,.loading-indicator-container.indicator-center .loading-indicator > div{top:auto;text-align:center;position:relative}
+.loading-indicator.indicator-inset,.loading-indicator-container.indicator-inset .loading-indicator{padding-left:80px}
+.loading-indicator.indicator-inset > span,.loading-indicator-container.indicator-inset .loading-indicator > span{left:20px}
 .loading-indicator-container.size-form-field .loading-indicator,.loading-indicator-container.size-input-text .loading-indicator{background-color:transparent;padding:0;margin:0}
 .loading-indicator-container.size-form-field .loading-indicator > span,.loading-indicator-container.size-input-text .loading-indicator > span{padding:0;margin:0;left:auto;right:7px;top:6px;width:23px;height:23px;background-size:23px 23px}
 .loading-indicator-container.size-form-field .loading-indicator > span{top:0;right:0;width:20px;height:20px;background-size:20px 20px}
@@ -3366,4 +3368,4 @@ html.cssanimations .fancy-layout .form-tabless-fields .loading-indicator-contain
 .flyout-toggle i{margin:7px 0 0 6px;display:inline-block}
 .flyout-toggle:hover i{color:#ffffff}
 body.flyout-visible{overflow:hidden}
-body.flyout-visible .flyout-overlay{background-color:rgba(0,0,0,0.3)}
+body.flyout-visible .flyout-overlay{background-color:rgba(0,0,0,0.3)}

modules/backend/classes/Controller.php

@@ -598,10 +598,15 @@ class Controller extends Extendable
      * @param  array  $params  Extra parameters
      * @return string
      */
-    public function makeHintPartial($name, $partial = null, array $params = [])
+    public function makeHintPartial($name, $partial = null, $params = [])
     {
+        if (is_array($partial)) {
+            $params = $partial;
+            $partial = null;
+        }
+
         if (!$partial) {
-            $partial = $name;
+            $partial = array_get($params, 'partial', $name);
         }
 
         return $this->makeLayoutPartial('hint', [

modules/backend/layouts/_hint.htm

@@ -1,8 +1,13 @@
-<?php
-    $type = !empty($type) ? $type : 'info';
-?>
 <?php if (empty($hintName) || !$this->isBackendHintHidden($hintName)): ?>
-    <div class="callout callout-<?= $type ?> fade in <?=empty($icon)?'no-icon':''?> <?=empty($subtitle)?'no-subheader':''?>">
+    <?php
+        $type = !empty($type) ? $type : 'info';
+        $cssClasses = ['callout fade in'];
+        $cssClasses[] = 'callout-'.$type;
+        if (empty($icon)) $cssClasses[] = 'no-icon';
+        if (empty($subtitle)) $cssClasses[] = 'no-subheader';
+        if (!empty($cssClass)) $cssClasses[] = $cssClass;
+    ?>
+    <div class="<?= implode(' ', $cssClasses) ?>">
         <?php if (!empty($hintName)): ?>
             <button
                 type="button"

modules/system/assets/ui/docs/loader.md

@@ -61,6 +61,13 @@ A loading indicator can be aligned to the center by adding `indicator-center` to
         </div>
     </div>
 
+    <div class="loading-indicator-container">
+        <div class="loading-indicator indicator-inset">
+            <span></span>
+            <div>Loading (inset)</div>
+        </div>
+    </div>
+
     <div class="loading-indicator-container">
         <div class="loading-indicator size-small">
             <span></span>

modules/system/assets/ui/less/loader.less

@@ -114,6 +114,16 @@ html.cssanimations {
     }
 }
 
+// Inset
+
+.loading-indicator.indicator-inset,
+.loading-indicator-container.indicator-inset .loading-indicator {
+    padding-left: 80px;
+
+    > span {
+        left: 20px;
+    }
+}
 
 // Form fields