Process SVG CSS by hand - Fixes #1137

modules/backend/models/BrandSettings.php

@@ -97,19 +97,17 @@ class BrandSettings extends Model
     {
         $parser = new Less_Parser(['compress' => true]);
 
-        $svgHead  = 'data:image/svg+xml;charset=UTF-8,';
+        $primaryColorLight = self::get('primary_color_light', self::PRIMARY_LIGHT);
-        $svgOpen  = static::cssEscape('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="100px" height="110px" viewBox="0 0 100 110" enable-background="new 0 0 100 110" xml:space="preserve">');
+        $primaryColorDark = self::get('primary_color_dark', self::PRIMARY_DARK);
-        $svgClose = static::cssEscape('</svg>');
+        $secondaryColorLight = self::get('secondary_color_light', self::SECONDARY_LIGHT);
+        $secondaryColorDark = self::get('secondary_color_dark', self::SECONDARY_DARK);
 
         $vars = [
             'logo-image'            => "'".self::getLogo()."'",
-            'primary-color-light'   => self::get('primary_color_light', self::PRIMARY_LIGHT),
+            'primary-color-light'   => $primaryColorLight,
-            'primary-color-dark'    => self::get('primary_color_dark', self::PRIMARY_DARK),
+            'primary-color-dark'    => $primaryColorDark,
-            'secondary-color-light' => self::get('secondary_color_light', self::SECONDARY_LIGHT),
+            'secondary-color-light' => $secondaryColorLight,
-            'secondary-color-dark'  => self::get('secondary_color_dark', self::SECONDARY_DARK),
+            'secondary-color-dark'  => $secondaryColorDark,
-            'svg-head'              => "'".$svgHead."'",
-            'svg-open'              => "'".$svgOpen."'",
-            'svg-close'             => "'".$svgClose."'"
         ];
 
         $parser->ModifyVars($vars);
@@ -120,18 +118,66 @@ class BrandSettings extends Model
         );
 
         $css = $parser->getCss();
+        $css .= self::makeTabSvg($primaryColorLight, $primaryColorDark);
 
         return $css;
     }
 
     /**
-     * Escape for RFC 3986, generally good for CSS
+     * The PHP LESS parser dies trying to dynamically generate 
-     * @param string $string
+     * the tab SVG CSS, so process it manually instead.
+     * @param string $light
+     * @param string $dark
+     * @return string
      */
-    protected static function cssEscape($string)
+    protected static function makeTabSvg($light, $dark)
     {
-        $entities = array('%21', '%2A', '%27', '%28', '%29', '%3B', '%3A', '%40', '%26', '%3D', '%2B', '%24', '%2C', '%2F', '%3F', '%25', '%23', '%5B', '%5D');
+        /*
-        $replacements = array('!', '*', "'", "(", ")", ";", ":", "@", "&", "=", "+", "$", ",", "/", "?", "%", "#", "[", "]");
+         * Desaturate and darken the dark color
-        return str_replace($entities, $replacements, rawurlencode($string));
+         */
+        $dark = substr($dark, 1); // Remove the #
+        $func = new \Less_Functions(null);
+        $value = new \Less_Tree_Dimension('14.5', '%');
+        $color = new \Less_Tree_Color($dark);
+        $color = $func->desaturate($color, $value);
+        $value = new \Less_Tree_Dimension('5', '%');
+        $black = new \Less_Tree_Color('000000');
+        $color = $func->mix($black, $color, $value);
+        $dark = $color->toRGB();
+
+        /*
+         * SVG Definition
+         */
+        $svg = '';
+        $svg .= '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" width="100px" height="110px" viewBox="0 0 100 110" enable-background="new 0 0 100 110" xml:space="preserve">';
+        $svg .= '<path d="M0,30C5,30,10,0,20,0c5,0,60,0,65,0c10,0,10,30,15,30"/>';
+        $svg .= '<path fill="'.$light.'" d="M0,70c5,0,10-30,20-30c0,10,0,15,0,15v15"/>';
+        $svg .= '<path fill="'.$light.'" d="M100,70c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>';
+        $svg .= '<path fill="'.$dark.'" d="M0,110c5,0,10-30,20-30c0,10,0,15,0,15v15"/>';
+        $svg .= '<path fill="'.$dark.'" d="M100,110c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>';
+        $svg .= '</svg>';
+
+        /*
+         * Escape CSS
+         */
+        $revert = ['%21'=>'!', '%2A'=>'*', '%27'=>"'",'%3F'=>'?','%26'=>'&','%2C'=>',','%2F'=>'/','%40'=>'@','%2B'=>'+','%24'=>'$'];
+        $svg = strtr(rawurlencode($svg), $revert);
+
+        /*
+         * Add header
+         */
+        $svg = 'data:image/svg+xml;charset=UTF-8,' . $svg;
+
+        /*
+         * Compile CSS
+         */
+        $css = '';
+        $css .= '.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:before,';
+        $css .= '.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:before,';
+        $css .= '.fancy-layout .control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:after,';
+        $css .= '.fancy-layout.control-tabs.master > div > div.tabs-container > ul.nav-tabs > li a > span.title:after {';
+        $css .= "background-image: url('".$svg."')}";
+
+        return $css;
     }
 }

modules/backend/models/brandsettings/custom.less

@@ -114,12 +114,6 @@ table.table.data {
 @color-fancy-master-tabs-bg: @primary-color-dark;
 @color-fancy-form-inactive-tab: mix(black, desaturate(@primary-color-dark, 14.5%), 5%);
 
-@tab-svg-part1: escape('<path d="M0,30C5,30,10,0,20,0c5,0,60,0,65,0c10,0,10,30,15,30"/>');
-@tab-svg-part2: escape('<path fill="@{color-fancy-form-tabless-fields-bg}" d="M0,70c5,0,10-30,20-30c0,10,0,15,0,15v15"/>');
-@tab-svg-part3: escape('<path fill="@{color-fancy-form-tabless-fields-bg}" d="M100,70c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>');
-@tab-svg-part4: escape('<path fill="@{color-fancy-form-inactive-tab}" d="M0,110c5,0,10-30,20-30c0,10,0,15,0,15v15"/>');
-@tab-svg-part5: escape('<path fill="@{color-fancy-form-inactive-tab}" d="M100,110c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>');
-
 .fancy-layout {
     .control-tabs, &.control-tabs {
         &.master {
@@ -150,9 +144,14 @@ table.table.data {
             > div > div.tabs-container > ul.nav-tabs > li {
                 a > span.title {
                     background-color: @color-fancy-form-inactive-tab;
-                    &:before, &:after {
+
-                        background-image: url(~'@{svg-head}@{svg-open}@{tab-svg-part1}@{tab-svg-part2}@{tab-svg-part3}@{tab-svg-part4}@{tab-svg-part5}@{svg-close}');
+                    //
-                    }
+                    // Disabled: See BrandSettings::makeTabSvg()
+                    //
+                    //&:before, &:after {
+                    //    background-image: url(~'@{tab-svg}');
+                    //}
+
                 }
                 &.active {
                     a > span.title {

modules/backend/models/brandsettings/fields.yaml

@@ -11,7 +11,7 @@ tabs:
             commentAbove: backend::lang.branding.logo_description
             mode: image
             imageHeight: 170
-            imageWidth: 170
+            imageWidth: 340
             tab: backend::lang.branding.brand
 
         app_name: