Process SVG CSS by hand - Fixes #1137
This commit is contained in:
Samuel Georges
parent
ccf8073ad6
commit
4f2c11e9db
|
|
@ -97,19 +97,17 @@ class BrandSettings extends Model
|
|||
{
|
||||
$parser = new Less_Parser(['compress' => true]);
|
||||
|
||||
$svgHead = 'data:image/svg+xml;charset=UTF-8,';
|
||||
$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">');
|
||||
$svgClose = static::cssEscape('</svg>');
|
||||
$primaryColorLight = self::get('primary_color_light', self::PRIMARY_LIGHT);
|
||||
$primaryColorDark = self::get('primary_color_dark', self::PRIMARY_DARK);
|
||||
$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-dark' => self::get('primary_color_dark', self::PRIMARY_DARK),
|
||||
'secondary-color-light' => self::get('secondary_color_light', self::SECONDARY_LIGHT),
|
||||
'secondary-color-dark' => self::get('secondary_color_dark', self::SECONDARY_DARK),
|
||||
'svg-head' => "'".$svgHead."'",
|
||||
'svg-open' => "'".$svgOpen."'",
|
||||
'svg-close' => "'".$svgClose."'"
|
||||
'primary-color-light' => $primaryColorLight,
|
||||
'primary-color-dark' => $primaryColorDark,
|
||||
'secondary-color-light' => $secondaryColorLight,
|
||||
'secondary-color-dark' => $secondaryColorDark,
|
||||
];
|
||||
|
||||
$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
|
||||
* @param string $string
|
||||
* The PHP LESS parser dies trying to dynamically generate
|
||||
* 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('!', '*', "'", "(", ")", ";", ":", "@", "&", "=", "+", "$", ",", "/", "?", "%", "#", "[", "]");
|
||||
return str_replace($entities, $replacements, rawurlencode($string));
|
||||
/*
|
||||
* Desaturate and darken the dark color
|
||||
*/
|
||||
$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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
Loading…
Reference in New Issue