github-mirror/BookStack
github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-04-02 21:59:06 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Embedded SVG icons in css/js files

Browse Source 
Allows removal of hacky /icon endpoint solution.
Fixes PDF exports with WKHTML and allows the icon to show in HTML
exports.

Fixes #796
This commit is contained in:
Dan Brown 2018-05-20 11:55:23 +01:00
parent a1ecdcacba
commit 6e7adcc095
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
5 changed files with 6 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/Http/Controllers/HomeController.php
View File

@ -108,27 +108,6 @@ class HomeController extends Controller
]); ]);
} }
/**
* Get an icon via image request.
* Can provide a 'color' parameter with hex value to color the icon.
* @param $iconName
* @param Request $request
* @return \Illuminate\Contracts\Routing\ResponseFactory|\Symfony\Component\HttpFoundation\Response
*/
public function getIcon($iconName, Request $request)
{
$attrs = [];
if ($request->filled('color')) {
$attrs['fill'] = '#' . $request->get('color');
}
$icon = icon($iconName, $attrs);
return response($icon, 200, [
'Content-Type' => 'image/svg+xml',
'Cache-Control' => 'max-age=3600',
]);
}
/** /**
* Get custom head HTML, Used in ajax calls to show in editor. * Get custom head HTML, Used in ajax calls to show in editor.
* @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View

2
resources/assets/icons/warning.svg
View File

@ -1,4 +1,4 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 24 24" fill="#b6531c" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/> <path d="M0 0h24v24H0z" fill="none"/>
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/> <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 176 B

After

Width:  |  Height:  |  Size: 191 B

2
resources/assets/js/components/wysiwyg-editor.js
View File

@ -292,7 +292,7 @@ function drawIoPlugin() {
editor.addButton('drawio', { editor.addButton('drawio', {
tooltip: 'Drawing', tooltip: 'Drawing',
image: window.baseUrl('/icon/drawing.svg?color=000000'), image: `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMDAwMDAiICB4bWxucz0iaHR0cDovL3d3 dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTIzIDdWMWgtNnYySDdWMUgxdjZoMnYx MEgxdjZoNnYtMmgxMHYyaDZ2LTZoLTJWN2gyek0zIDNoMnYySDNWM3ptMiAxOEgzdi0yaDJ2Mnpt MTItMkg3di0ySDVWN2gyVjVoMTB2MmgydjEwaC0ydjJ6bTQgMmgtMnYtMmgydjJ6TTE5IDVWM2gy djJoLTJ6bS01LjI3IDloLTMuNDlsLS43MyAySDcuODlsMy40LTloMS40bDMuNDEgOWgtMS42M2wt Ljc0LTJ6bS0zLjA0LTEuMjZoMi42MUwxMiA4LjkxbC0xLjMxIDMuODN6Ii8+CiAgICA8cGF0aCBk PSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPg==`,
cmd: 'drawio' cmd: 'drawio'
}); });

8
resources/assets/sass/_blocks.scss
View File

@ -138,7 +138,7 @@
display: block; display: block;
position: relative; position: relative;
&:before { &:before {
background-image: url("/icon/info-filled.svg?color=015380"); background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMwMTUzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTZoMnY2em0wLThoLTJWN2gydjJ6Ii8+PC9zdmc+');
background-repeat: no-repeat; background-repeat: no-repeat;
content: ''; content: '';
width: 1.2em; width: 1.2em;
@ -157,7 +157,7 @@
color: darken($positive, 16%); color: darken($positive, 16%);
} }
&.success:before { &.success:before {
background-image: url("/icon/check-circle.svg?color=376c39"); background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
} }
&.danger { &.danger {
border-left-color: $negative; border-left-color: $negative;
@ -165,7 +165,7 @@
color: darken($negative, 20%); color: darken($negative, 20%);
} }
&.danger:before { &.danger:before {
background-image: url("/icon/danger.svg?color=b91818"); background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
} }
&.info { &.info {
border-left-color: $info; border-left-color: $info;
@ -178,7 +178,7 @@
color: darken($warning, 16%); color: darken($warning, 16%);
} }
&.warning:before { &.warning:before {
background-image: url("/icon/warning.svg?color=b6531c"); background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
} }
} }

1
routes/web.php
View File

@ -1,7 +1,6 @@
<?php <?php
Route::get('/translations', 'HomeController@getTranslations'); Route::get('/translations', 'HomeController@getTranslations');
Route::get('/icon/{iconName}.svg', 'HomeController@getIcon');
Route::get('/robots.txt', 'HomeController@getRobots'); Route::get('/robots.txt', 'HomeController@getRobots');
// Authenticated routes... // Authenticated routes...