added router.svg coloring + some icons + base menu layout
This commit is contained in:
xdrm-brackets
parent
85782a26e2
commit
2ecfbce75f
|
|
@ -0,0 +1,60 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
namespace router\controller;
|
||||||
|
|
||||||
|
|
||||||
|
class svg{
|
||||||
|
|
||||||
|
|
||||||
|
private $path;
|
||||||
|
private $color;
|
||||||
|
|
||||||
|
/* PRE-CALL
|
||||||
|
*
|
||||||
|
* @url<String> Calling URI
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
public function __construct($url){
|
||||||
|
$this->path = $url['path'];
|
||||||
|
$this->color = substr($url['color'], 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Colorate svg
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
public function color(){
|
||||||
|
header('Content-Type: image/svg+xml');
|
||||||
|
|
||||||
|
// On crée la partie ajoutée
|
||||||
|
$stylesheet = "\n<style type='text/css'>\n";
|
||||||
|
$stylesheet .= "\t#fill-edit{\n";
|
||||||
|
$stylesheet .= "\t\tfill: #".$this->color." !important;\n";
|
||||||
|
$stylesheet .= "\t\tfill-opacity: 1 !important;\n";
|
||||||
|
$stylesheet .= "\t}\n";
|
||||||
|
$stylesheet .= "\t#stroke-edit{\n";
|
||||||
|
$stylesheet .= "\t\tstroke: #".$this->color." !important;\n";
|
||||||
|
$stylesheet .= "\t\tstroke-opacity: 1 !important;\n";
|
||||||
|
$stylesheet .= "\t}\n";
|
||||||
|
$stylesheet .= "</style></svg>";
|
||||||
|
|
||||||
|
// On récupère le fichier
|
||||||
|
$file = file_get_contents(__PUBLIC__.'/'.$this->path);
|
||||||
|
|
||||||
|
// On ajoute le style
|
||||||
|
$file = str_replace('</svg>', $stylesheet, $file);
|
||||||
|
|
||||||
|
echo $file;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* POST-CALL
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
public function __destruct(){
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -20,6 +20,15 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
"/{path}{color}": {
|
||||||
|
"methods": ["GET"],
|
||||||
|
"controller": "svg:color",
|
||||||
|
"arguments": {
|
||||||
|
"path": ".+\\.svg",
|
||||||
|
"color": "@[a-fA-F0-9]{6}"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
"/{page}/{uri}": {
|
"/{page}/{uri}": {
|
||||||
"methods": ["GET"],
|
"methods": ["GET"],
|
||||||
"controller": "page:load",
|
"controller": "page:load",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
height="1024"
|
||||||
|
width="768"
|
||||||
|
version="1.1"
|
||||||
|
id="svg4"
|
||||||
|
sodipodi:docname="if_file-text_298777.svg"
|
||||||
|
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
|
||||||
|
<metadata
|
||||||
|
id="metadata10">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs8" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="812"
|
||||||
|
inkscape:window-height="480"
|
||||||
|
id="namedview6"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="0.23046875"
|
||||||
|
inkscape:cx="384"
|
||||||
|
inkscape:cy="512"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="29"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="svg4" />
|
||||||
|
<path
|
||||||
|
d="M448 256H128v64h320V256zM576 64H0v896h768V256L576 64zM704 896H64V128h448l192 192V896zM128 768h512v-64H128V768zM128 640h512v-64H128V640zM128 512h512v-64H128V512z"
|
||||||
|
id="path2"
|
||||||
|
style="fill:#f2f2f2" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,54 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
height="1024"
|
||||||
|
width="1024"
|
||||||
|
version="1.1"
|
||||||
|
id="svg4"
|
||||||
|
sodipodi:docname="home.svg"
|
||||||
|
inkscape:version="0.92.2 5c3e80d, 2017-08-06">
|
||||||
|
<metadata
|
||||||
|
id="metadata10">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs8" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="812"
|
||||||
|
inkscape:window-height="480"
|
||||||
|
id="namedview6"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="0.23046875"
|
||||||
|
inkscape:cx="512"
|
||||||
|
inkscape:cy="512"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="29"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="svg4" />
|
||||||
|
<path
|
||||||
|
d="m 192,576 64,384 H 448 V 640 H 576 V 960 H 768 L 832,576 512,256 Z M 832,384 V 128 H 704 L 704.312,256.312 512,64 0,576 H 128 L 512,192 896,576 h 128 z"
|
||||||
|
id="stylisable"
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
style="fill:#f2f2f2" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,47 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
enable-background="new 0 0 500 500"
|
||||||
|
height="500px"
|
||||||
|
id="Layer_1"
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 500 500"
|
||||||
|
width="500px"
|
||||||
|
xml:space="preserve"
|
||||||
|
sodipodi:docname="manage.svg"
|
||||||
|
inkscape:version="0.92.2 5c3e80d, 2017-08-06"><metadata
|
||||||
|
id="metadata9"><rdf:RDF><cc:Work
|
||||||
|
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
|
||||||
|
id="defs7" /><sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="812"
|
||||||
|
inkscape:window-height="480"
|
||||||
|
id="namedview5"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="0.472"
|
||||||
|
inkscape:cx="250"
|
||||||
|
inkscape:cy="250"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="29"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:current-layer="Layer_1" /><path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M31.949,403.452c0,35.164,28.435,63.599,63.599,63.599 c17.529,0,33.891-6.637,45.426-18.172l115.93-116.018l31.072,31.071c-4.182,15.265-0.181,32.345,11.905,44.518l45.063,45.063 c17.985,17.901,46.782,18.08,64.504,0.362c17.719-17.721,17.539-46.511-0.366-64.504l-45.063-45.063 c-12.174-12.085-29.254-16.078-44.514-11.898l-31.072-30.991l19.983-19.983c42.516,10.722,89.397-0.459,122.563-32.888 c22.803-22.35,35.352-50.698,37.07-80.04v-1.543c0-9.91-8.181-17.905-18.26-17.905c-5.001,0-9.544,2.006-12.907,5.181l-5.353,5.271 l-18.356,17.985c-11.543,11.268-27.984,17.896-45.701,17.896c-17.622,0-33.165-7.718-44.701-19.076 c-11.355-11.533-19.166-27.167-19.166-44.788c0-17.717,6.63-34.159,17.897-45.702l17.985-18.358l5.269-5.351 c3.18-3.363,5.181-7.906,5.181-12.91c0-10.079-7.992-18.26-17.904-18.26h-1.544c-29.34,1.721-57.687,14.268-80.038,37.071 c-32.43,33.165-43.52,80.047-32.802,122.477l-20.069,20.069l-83.863-83.943v-22.988L59.205,76.376l-27.256,27.256l27.256,54.513 h22.891l83.951,83.863L50.119,358.026C38.586,369.561,31.949,385.923,31.949,403.452z M77.375,398.909 c0-12.536,10.177-22.711,22.714-22.711c12.538,0,22.713,10.175,22.713,22.711s-10.175,22.716-22.713,22.716 C87.553,421.625,77.375,411.445,77.375,398.909z"
|
||||||
|
fill="#010101"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
id="path2"
|
||||||
|
style="fill:#f2f2f2" /></svg>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -11,7 +11,7 @@ body{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
background: #ccc;
|
background: #fefeff;
|
||||||
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: 'Open Sans';
|
font-family: 'Open Sans';
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
$menu-bg: #163042;
|
||||||
|
|
||||||
|
#side-menu{
|
||||||
|
|
||||||
|
/* (1) Container
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 4.5em;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
background-color: $menu-bg;
|
||||||
|
|
||||||
|
// flex properties
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
/* (2) Items
|
||||||
|
---------------------------------------------------------*/
|
||||||
|
.item{
|
||||||
|
display: block;
|
||||||
|
width: 3.5em;
|
||||||
|
height: 3.5em;
|
||||||
|
|
||||||
|
border-radius: 3px / 3px;
|
||||||
|
|
||||||
|
// box-shadow: inset 0 0 5px darken($menu-bg, 6%);
|
||||||
|
|
||||||
|
background: url('/asset/svg/home.svg') center center no-repeat;
|
||||||
|
background-size: 50%;
|
||||||
|
|
||||||
|
border: 1px solid lighten($menu-bg, 5%);
|
||||||
|
|
||||||
|
transition: all .2s ease-in-out;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
/* (1) Set icons */
|
||||||
|
&[data-icon='home']{ background-image: url('/asset/svg/home.svg'); }
|
||||||
|
&[data-icon='manage']{ background-image: url('/asset/svg/manage.svg'); }
|
||||||
|
&[data-icon='fiche']{ background-image: url('/asset/svg/fiche.svg'); }
|
||||||
|
&[data-icon='login']{ background-image: url('/asset/svg/login.svg'); }
|
||||||
|
&[data-icon='logout']{ background-image: url('/asset/svg/logout.svg'); }
|
||||||
|
|
||||||
|
/* (2) On mouseover */
|
||||||
|
&:hover{
|
||||||
|
border: 1px solid lighten($menu-bg, 20%);
|
||||||
|
// box-shadow: inset 0 0 5px darken($menu-bg, 60%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* (3) Label */
|
||||||
|
span{
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
// display: block;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: calc( 3.5em / 4 );
|
||||||
|
left: calc( 100% + .5em );
|
||||||
|
|
||||||
|
padding: .3em .7em;
|
||||||
|
|
||||||
|
background-color: $menu-bg;
|
||||||
|
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
border-radius: 3px / 3px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* (4) Display label on item hover */
|
||||||
|
&:hover span{ display: block; }
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,12 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
|
|
||||||
<div id='MENU'>
|
<div id='side-menu'>
|
||||||
|
|
||||||
<div v-for='(item, index) in gstore.menu_item' class='side-menu'>
|
<div v-for='(item, index) in gstore.menu_item'
|
||||||
|
:class="(index == gstore.menu_item_active) ? 'item active' : 'item'"
|
||||||
|
@click='navigate(index)'
|
||||||
|
:data-icon='item.icon'>
|
||||||
|
|
||||||
<div :class="(index == gstore.menu_item_active) ? 'side-menu-item active' : 'side-menu-item'" @click='navigate(index)' :data-icon='item.icon'>
|
|
||||||
<span>{{ item.label }}</span>
|
<span>{{ item.label }}</span>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue