mirror_php/winter
1
0
Fork 0
mirror of https://github.com/wintercms/winter.git synced 2024-06-28 05:33:29 +02:00
Code Issues Projects Releases Wiki Activity

Fixes #742 - escape SVG opening with PHP instead of LESS

Browse Source
This commit is contained in:
Samuel Georges 2015-03-06 18:12:57 +11:00
parent bc317ffbb8
commit 1890df6471
2 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
modules/backend/models/BrandSettings.php
View File

@ -90,13 +90,22 @@ class BrandSettings extends Model
{
$parser = new Less_Parser(['compress' => true]);
$parser->ModifyVars([
$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>');
$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."'"
];
$parser->ModifyVars($vars);
$parser->parse(
File::get(base_path().'/modules/backend/models/brandsettings/custom.less')
@ -107,4 +116,15 @@ class BrandSettings extends Model
return $css;
}
/**
* Escape for RFC 3986, generally good for CSS
* @param string $string
*/
protected static function cssEscape($string)
{
$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));
}
}

15
modules/backend/models/brandsettings/custom.less
View File

@ -63,14 +63,11 @@ body.outer .layout > .layout-row.layout-head {
@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: 'data:image/svg+xml;charset=UTF-8,';
@tab-svg-part2: escape('<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">');
@tab-svg-part3: escape('<path d="M0,30C5,30,10,0,20,0c5,0,60,0,65,0c10,0,10,30,15,30"/>');
@tab-svg-part4: escape('<path fill="@{color-fancy-form-tabless-fields-bg}" d="M0,70c5,0,10-30,20-30c0,10,0,15,0,15v15"/>');
@tab-svg-part5: 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-part6: escape('<path fill="@{color-fancy-form-inactive-tab}" d="M0,110c5,0,10-30,20-30c0,10,0,15,0,15v15"/>');
@tab-svg-part7: escape('<path fill="@{color-fancy-form-inactive-tab}" d="M100,110c-5,0-10-30-20-30c0,10,0,15,0,15v15"/>');
@tab-svg-part8: escape('</svg>');
@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 {
@ -93,7 +90,7 @@ body.outer .layout > .layout-row.layout-head {
a > span.title {
background-color: @color-fancy-form-inactive-tab;
&:before, &:after {
background-image: url(~'@{tab-svg-part1}@{tab-svg-part2}@{tab-svg-part3}@{tab-svg-part4}@{tab-svg-part5}@{tab-svg-part6}@{tab-svg-part7}@{tab-svg-part8}');
background-image: url(~'@{svg-head}@{svg-open}@{tab-svg-part1}@{tab-svg-part2}@{tab-svg-part3}@{tab-svg-part4}@{tab-svg-part5}@{svg-close}');
}
}
&.active {