added router.svg coloring + some icons + base menu layout

This commit is contained in:
xdrm-brackets 2018-02-20 19:00:09 +01:00
parent 85782a26e2
commit 2ecfbce75f
8 changed files with 307 additions and 5 deletions

View File

@ -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(){
}
}

View File

@ -20,6 +20,15 @@
}
},
"/{path}{color}": {
"methods": ["GET"],
"controller": "svg:color",
"arguments": {
"path": ".+\\.svg",
"color": "@[a-fA-F0-9]{6}"
}
},
"/{page}/{uri}": {
"methods": ["GET"],
"controller": "page:load",

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -11,7 +11,7 @@ body{
width: 100%;
height: 100%;
background: #ccc;
background: #fefeff;
font-size: 16px;
font-family: 'Open Sans';

View File

@ -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; }
}
}

View File

@ -1,12 +1,13 @@
<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>
</div>
</div>