From 43e1c742b789f473c693c45969b0143bc146f9f6 Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Sun, 3 Dec 2017 16:02:18 +0100 Subject: [PATCH] upd: updated iface --- public_html/css/header.css | 48 +++++++++++-------- public_html/css/layout.css | 15 +++--- public_html/css/menu.css | 7 +-- public_html/image/header/info/error.svg | 6 +-- public_html/image/header/info/info.svg | 24 +++------- public_html/image/header/info/warning.svg | 25 ++++------ public_html/image/header/notif/bell.svg | 12 ++--- public_html/image/header/notif/menu.svg | 38 +++++---------- public_html/image/header/notif/message.svg | 18 +++---- public_html/image/header/notif/search.svg | 14 +++--- public_html/image/menu/dashboard.svg | 55 +++++++++++++++++++++- public_html/image/menu/messages.svg | 44 ++++++++++++++++- public_html/image/menu/profile.svg | 46 +++++++++++++++++- view/vue-config.js | 16 +++++-- view/vue/header.vue | 14 +++--- view/vue/menu.vue | 2 +- 16 files changed, 257 insertions(+), 127 deletions(-) diff --git a/public_html/css/header.css b/public_html/css/header.css index 6008c7c..2633f49 100644 --- a/public_html/css/header.css +++ b/public_html/css/header.css @@ -4,16 +4,15 @@ position: absolute; top: 0; left: 0; - width: calc( 20em - 3em - 2px ); - height: calc( 100% - 2*1.7em ); + width: calc( 15em - 3em ); + height: calc( 100% - 2*1em ); - padding: 1.7em 0; + padding: 1em 0; padding-left: 3em; - border-right: 2px solid #294496; background: url('/image/header-icon.svg') center left 2em no-repeat; background-size: 1.7em; - background-color: #2a469c; + background-color: rgba(0,0,0,.7); color: #fff; } @@ -27,6 +26,10 @@ font-size: 1.2em; letter-spacing: 2px; + background: -webkit-linear-gradient(top left, #474dff, #00E288); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + overflow: hidden; } @@ -40,19 +43,19 @@ display: block; position: absolute; top: 0; - left: 20em; - width: calc( 100% - 20em - 12em - 2em - 5em ); - height: calc( 100% - 2*1.7em ); + left: 15em; + width: calc( 100% - 15em - 12em - 2em - 5em ); + height: calc( 100% - 2*1.2em ); - padding: 1.7em 0; + padding: 1.2em 0; padding-left: 5em; - background: url('/image/header/info/info.svg') center left 2em no-repeat; + background: url('/image/header/info/info.svg@2299e3') center left 2em no-repeat; background-size: 1.6em; } -#header-info.info{ background-image: url('/image/header/info/info.svg'); } -#header-info.warning{ background-image: url('/image/header/info/warning.svg'); } -#header-info.error{ background-image: url('/image/header/info/error.svg'); } +#header-info.info{ background-image: url('/image/header/info/info.svg@2299e3'); } +#header-info.warning{ background-image: url('/image/header/info/warning.svg@ed5e17'); } +#header-info.error{ background-image: url('/image/header/info/error.svg@d7373a'); } /****************************/ @@ -84,7 +87,7 @@ width: 2em; height: 2em; - background: url('/image/header/notif/bell.svg') center center no-repeat; + background: url('/image/header/notif/bell.svg@aaaaaa') center center no-repeat; background-size: 50%; background-color: transparent; @@ -92,16 +95,23 @@ cursor: pointer; - transition: background-color .2s ease-in-out; + transition: background .2s ease-in-out; } +#header-notif .hnotif.message{ background-image: url('/image/header/notif/message.svg@aaaaaa'); } +#header-notif .hnotif.search{ background-image: url('/image/header/notif/search.svg@aaaaaa'); } +#header-notif .hnotif.menu{ background-image: url('/image/header/notif/menu.svg@aaaaaa'); } +/* HOVER */ #header-notif .hnotif:hover{ - background-color: #294496; + background-color: #ddd; + background-image: url('/image/header/notif/bell.svg@ee9a31'); } -#header-notif .hnotif.message{ background-image: url('/image/header/notif/message.svg'); } -#header-notif .hnotif.search{ background-image: url('/image/header/notif/search.svg'); } -#header-notif .hnotif.menu{ background-image: url('/image/header/notif/menu.svg'); } +#header-notif .hnotif.message:hover{ background-image: url('/image/header/notif/message.svg@23c795'); } +#header-notif .hnotif.search:hover{ background-image: url('/image/header/notif/search.svg@ae51da'); } +#header-notif .hnotif.menu:hover{ background-image: url('/image/header/notif/menu.svg@4a8ad8'); } + + /* Counter element */ #header-notif .hnotif[data-count]:before{ diff --git a/public_html/css/layout.css b/public_html/css/layout.css index 6f1b270..033fae9 100644 --- a/public_html/css/layout.css +++ b/public_html/css/layout.css @@ -27,7 +27,7 @@ body{ width: 100%; height: 100%; - background-color: #fff; + background-color: #eee; overflow: hidden; } @@ -39,14 +39,15 @@ body{ top: 0; left: 0; width: 100%; - height: calc( 4.5em - 1px ); + height: calc( 3.5em - 1px ); - background: #3756b2; + background: #fff; + /* background: -webkit-linear-gradient(top right, #2428ff, #00E288); */ color: #fff; font-family: inherit; - border-bottom: 1px solid #2a469c; + border-bottom: 1px solid #ddd; overflow: hidden; } @@ -55,14 +56,14 @@ body{ #MENU{ display: flex; position: absolute; - top: 4.5em; + top: 3.5em; left: 0; - width: calc( 20em - 2px ); + width: calc( 15em - 1px ); height: calc( 100% - 5em ); background-color: #fff; - border-right: 2px solid #eee; + border-right: 1px solid #ddd; flex-direction: column; justify-content: flex-start; diff --git a/public_html/css/menu.css b/public_html/css/menu.css index ccae55e..6ac3fbf 100644 --- a/public_html/css/menu.css +++ b/public_html/css/menu.css @@ -19,11 +19,12 @@ top: 0; left: 0; width: calc( 100% - 3em ); - height: calc( 100% - 1.5em ); + height: calc( 100% - 1.4em ); - background-color: #fff; + background: #fff url('/image/menu/dashboard.svg') center left 1em no-repeat; + background-size: 1.2em auto; - padding-top: 1.5em; + padding-top: 1.4em; padding-left: 3em; color: #888; diff --git a/public_html/image/header/info/error.svg b/public_html/image/header/info/error.svg index 753883a..8f088c7 100644 --- a/public_html/image/header/info/error.svg +++ b/public_html/image/header/info/error.svg @@ -21,7 +21,7 @@ image/svg+xml - + @@ -42,7 +42,7 @@ showgrid="false" inkscape:zoom="14.024285" inkscape:cx="5.7725748" - inkscape:cy="4.573557" + inkscape:cy="10.277948" inkscape:window-x="0" inkscape:window-y="24" inkscape:window-maximized="1" @@ -57,7 +57,7 @@ + inkscape:current-layer="svg4175" /> <defs id="defs4179" /> - <g - fill="none" - fill-rule="evenodd" - id="Icons with numbers" - stroke="none" - stroke-width="1"> - <g - fill="#000000" - id="Group" - transform="translate(-576.000000, -432.000000)" - style="fill:#e8b522;fill-opacity:1"> - <path - d="M583,435 L583,437 L585,437 L585,435 Z M584,448 C579.581722,448 576,444.418278 576,440 C576,435.581722 579.581722,432 584,432 C588.418278,432 592,435.581722 592,440 C592,444.418278 588.418278,448 584,448 Z M583,439 L583,445 L585,445 L585,439 Z M583,439" - id="Oval 208" - style="fill:#e8b522;fill-opacity:1" /> - </g> - </g> + <path + d="M 7,3 7,5 9,5 9,3 Z M 8,16 C 3.58172,16 0,12.41828 0,8 0,3.58172 3.58172,0 8,0 c 4.41828,0 8,3.58172 8,8 0,4.41828 -3.58172,8 -8,8 z M 7,7 7,13 9,13 9,7 Z m 0,0" + id="fill-edit" + style="fill:#e8b522;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1" + inkscape:connector-curvature="0" /> </svg> diff --git a/public_html/image/header/info/warning.svg b/public_html/image/header/info/warning.svg index 0ea8c81..8a003ab 100644 --- a/public_html/image/header/info/warning.svg +++ b/public_html/image/header/info/warning.svg @@ -22,7 +22,7 @@ <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> - <dc:title></dc:title> + <dc:title /> </cc:Work> </rdf:RDF> </metadata> @@ -40,30 +40,21 @@ id="namedview4207" showgrid="false" inkscape:zoom="10.518213" - inkscape:cx="-9.6618773" + inkscape:cx="-25.586636" inkscape:cy="6.3550537" inkscape:window-x="0" inkscape:window-y="24" inkscape:window-maximized="1" - inkscape:current-layer="Icons new Arranged Names" + inkscape:current-layer="svg4198" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" /> <defs id="defs4202" /> - <g - id="Icons new Arranged Names" - style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1" - transform="translate(-3.1164357,-5.0939031)"> - <g - id="101 Warning" - style="fill:#e9202a;fill-opacity:1"> - <path - d="m 14.424233,6.1483927 c 0.870066,-1.4076629 2.282795,-1.4043083 3.150787,0 L 28.36011,23.59738 C 29.521639,25.476595 28.675546,27 26.471407,27 L 5.5278464,27 C 3.3232156,27 2.4738632,25.482664 3.6391433,23.59738 Z M 16,20 c 0.552285,0 1,-0.453036 1,-0.99703 l 0,-6.00594 C 17,12.446386 16.556135,12 16,12 c -0.552285,0 -1,0.453036 -1,0.99703 l 0,6.00594 C 15,19.553614 15.443865,20 16,20 Z m 0,4 c 0.552285,0 1,-0.447715 1,-1 0,-0.552285 -0.447715,-1 -1,-1 -0.552285,0 -1,0.447715 -1,1 0,0.552285 0.447715,1 1,1 z m 0,0" - id="Triangle 29" - style="fill:#eb8c1e;fill-opacity:1" - inkscape:connector-curvature="0" /> - </g> - </g> + <path + d="m 11.307797,1.0544896 c 0.870066,-1.4076629 2.282795,-1.4043083 3.150787,0 l 10.78509,17.4489874 c 1.161529,1.879215 0.315436,3.40262 -1.888703,3.40262 l -20.9435603,0 c -2.2046308,0 -3.0539832,-1.517336 -1.8887031,-3.40262 z m 1.575767,13.8516074 c 0.552285,0 1,-0.453036 1,-0.99703 l 0,-6.0059401 c 0,-0.550644 -0.443865,-0.99703 -1,-0.99703 -0.552285,0 -1,0.453036 -1,0.99703 l 0,6.0059401 c 0,0.550644 0.443865,0.99703 1,0.99703 z m 0,4 c 0.552285,0 1,-0.447715 1,-1 0,-0.552285 -0.447715,-1 -1,-1 -0.552285,0 -1,0.447715 -1,1 0,0.552285 0.447715,1 1,1 z m 0,0" + id="fill-edit" + style="fill:#eb8c1e;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1" + inkscape:connector-curvature="0" /> </svg> diff --git a/public_html/image/header/notif/bell.svg b/public_html/image/header/notif/bell.svg index 13d181e..73bfd25 100644 --- a/public_html/image/header/notif/bell.svg +++ b/public_html/image/header/notif/bell.svg @@ -33,14 +33,14 @@ id="namedview4201" showgrid="false" inkscape:zoom="6.7169026" - inkscape:cx="70.865997" + inkscape:cx="68.781703" inkscape:cy="70.865997" inkscape:window-x="0" inkscape:window-y="24" inkscape:window-maximized="1" inkscape:current-layer="Livello_1" /><g - id="Livello_114"><path - d="M135.055,115.131c0-3.528-2.861-6.396-6.395-6.396c-8.83,0-15.988-7.158-15.988-15.99V54.367 c0-20.006-14.209-36.709-33.139-40.679c0.588-1.242,0.928-2.628,0.928-4.095C80.462,4.296,76.165,0,70.866,0 c-5.299,0-9.594,4.296-9.594,9.598c0,1.467,0.339,2.853,0.927,4.095c-18.928,3.97-33.137,20.673-33.137,40.679v38.377 c0,8.832-7.159,15.99-15.99,15.99c-3.533,0-6.396,2.864-6.396,6.396c0,3.531,2.862,6.396,6.396,6.396h15.99h29.011 c0,9.716,5.729,17.591,12.793,17.591c7.064,0,12.792-7.875,12.792-17.591h29.014h15.988l0,0 C132.194,121.526,135.055,118.664,135.055,115.131" - id="path4198" - style="fill:#ffffff" /></g><g - id="Livello_1_1_" /></svg> \ No newline at end of file + id="g5841"><path + d="m 135.055,115.131 c 0,-3.528 -2.861,-6.396 -6.395,-6.396 -8.83,0 -15.988,-7.158 -15.988,-15.99 l 0,-38.378 C 112.672,34.361 98.463,17.658 79.533,13.688 80.121,12.446 80.461,11.06 80.461,9.593 80.462,4.296 76.165,0 70.866,0 c -5.299,0 -9.594,4.296 -9.594,9.598 0,1.467 0.339,2.853 0.927,4.095 -18.928,3.97 -33.137,20.673 -33.137,40.679 l 0,38.377 c 0,8.832 -7.159,15.99 -15.99,15.99 -3.533,0 -6.396,2.864 -6.396,6.396 0,3.531 2.862,6.396 6.396,6.396 l 15.99,0 29.011,0 c 0,9.716 5.729,17.591 12.793,17.591 7.064,0 12.792,-7.875 12.792,-17.591 l 29.014,0 15.988,0 0,0 c 3.534,-0.005 6.395,-2.867 6.395,-6.4" + id="fill-edit" + style="fill:#ffffff" + inkscape:connector-curvature="0" /></g></svg> \ No newline at end of file diff --git a/public_html/image/header/notif/menu.svg b/public_html/image/header/notif/menu.svg index 4701211..09b1876 100644 --- a/public_html/image/header/notif/menu.svg +++ b/public_html/image/header/notif/menu.svg @@ -34,16 +34,16 @@ guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" - inkscape:window-width="640" - inkscape:window-height="480" + inkscape:window-width="1920" + inkscape:window-height="1056" id="namedview4219" showgrid="false" - inkscape:zoom="14.75" - inkscape:cx="8" - inkscape:cy="8" + inkscape:zoom="3.6875" + inkscape:cx="-10.285784" + inkscape:cy="17.130472" inkscape:window-x="0" inkscape:window-y="24" - inkscape:window-maximized="0" + inkscape:window-maximized="1" inkscape:current-layer="svg4207" /> <title id="title4209" /> @@ -51,24 +51,10 @@ id="desc4211" /> <defs id="defs4213" /> - <g - fill="none" - fill-rule="evenodd" - id="Page-1" - stroke="none" - stroke-width="1"> - <g - fill="#000000" - id="Core" - transform="translate(-340.000000, -4.000000)"> - <g - id="apps" - transform="translate(340.000000, 4.000000)"> - <path - d="M0,4 L4,4 L4,0 L0,0 L0,4 L0,4 Z M6,16 L10,16 L10,12 L6,12 L6,16 L6,16 Z M0,16 L4,16 L4,12 L0,12 L0,16 L0,16 Z M0,10 L4,10 L4,6 L0,6 L0,10 L0,10 Z M6,10 L10,10 L10,6 L6,6 L6,10 L6,10 Z M12,0 L12,4 L16,4 L16,0 L12,0 L12,0 Z M6,4 L10,4 L10,0 L6,0 L6,4 L6,4 Z M12,10 L16,10 L16,6 L12,6 L12,10 L12,10 Z M12,16 L16,16 L16,12 L12,12 L12,16 L12,16 Z" - id="Shape" - style="fill:#ffffff" /> - </g> - </g> - </g> + <path + inkscape:connector-curvature="0" + style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:1" + id="fill-edit" + d="M 0,4 4,4 4,0 0,0 0,4 0,4 Z m 6,12 4,0 0,-4 -4,0 0,4 0,0 z m -6,0 4,0 0,-4 -4,0 0,4 0,0 z m 0,-6 4,0 0,-4 -4,0 0,4 0,0 z m 6,0 4,0 0,-4 -4,0 0,4 0,0 z m 6,-10 0,4 4,0 0,-4 -4,0 0,0 z M 6,4 10,4 10,0 6,0 6,4 6,4 Z m 6,6 4,0 0,-4 -4,0 0,4 0,0 z m 0,6 4,0 0,-4 -4,0 0,4 0,0 z" + class="fill-edit" /> </svg> diff --git a/public_html/image/header/notif/message.svg b/public_html/image/header/notif/message.svg index 1c87d15..df837ae 100644 --- a/public_html/image/header/notif/message.svg +++ b/public_html/image/header/notif/message.svg @@ -28,19 +28,19 @@ guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" - inkscape:window-width="640" - inkscape:window-height="480" + inkscape:window-width="1920" + inkscape:window-height="1056" id="namedview4226" showgrid="false" inkscape:zoom="9.8333333" - inkscape:cx="12" + inkscape:cx="-22.067797" inkscape:cy="12" inkscape:window-x="0" inkscape:window-y="24" - inkscape:window-maximized="0" + inkscape:window-maximized="1" inkscape:current-layer="Layer_1" /><path - clip-rule="evenodd" - d="M11.984,13C10.031,13-0.031,4.891-0.031,4.891V4c0-1.104,0.896-2,2.002-2h20.026 C23.104,2,24,2.896,24,4l-0.016,1C23.984,5,14.031,13,11.984,13z M11.984,15.75c2.141,0,12-7.75,12-7.75L24,20 c0,1.104-0.896,2-2.003,2H1.971c-1.105,0-2.002-0.896-2.002-2l0.016-12C-0.016,8,10.031,15.75,11.984,15.75z" - fill-rule="evenodd" - id="path4224" - style="fill:#ffffff" /></svg> \ No newline at end of file + d="M 11.984,13 C 10.031,13 -0.031,4.891 -0.031,4.891 l 0,-0.891 c 0,-1.104 0.896,-2 2.002,-2 L 21.997,2 C 23.104,2 24,2.896 24,4 l -0.016,1 c 0,0 -9.953,8 -12,8 z m 0,2.75 c 2.141,0 12,-7.75 12,-7.75 L 24,20 c 0,1.104 -0.896,2 -2.003,2 L 1.971,22 C 0.866,22 -0.031,21.104 -0.031,20 L -0.015,8 c -0.001,0 10.046,7.75 11.999,7.75 z" + id="fill-edit" + style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" + class="fill-edit" + inkscape:connector-curvature="0" /></svg> \ No newline at end of file diff --git a/public_html/image/header/notif/search.svg b/public_html/image/header/notif/search.svg index 89c085d..718f562 100644 --- a/public_html/image/header/notif/search.svg +++ b/public_html/image/header/notif/search.svg @@ -32,13 +32,15 @@ inkscape:window-height="1056" id="namedview4235" showgrid="false" - inkscape:zoom="0.4609375" - inkscape:cx="256" - inkscape:cy="516.33898" + inkscape:zoom="1.3037281" + inkscape:cx="-124.44228" + inkscape:cy="283.03834" inkscape:window-x="0" inkscape:window-y="24" inkscape:window-maximized="1" inkscape:current-layer="Layer_1" /><path - d="M445,386.7l-84.8-85.9c13.8-24.1,21-50.9,21-77.9c0-87.6-71.2-158.9-158.6-158.9C135.2,64,64,135.3,64,222.9 c0,87.6,71.2,158.9,158.6,158.9c27.9,0,55.5-7.7,80.1-22.4l84.4,85.6c1.9,1.9,4.6,3.1,7.3,3.1c2.7,0,5.4-1.1,7.3-3.1l43.3-43.8 C449,397.1,449,390.7,445,386.7z M222.6,125.9c53.4,0,96.8,43.5,96.8,97c0,53.5-43.4,97-96.8,97c-53.4,0-96.8-43.5-96.8-97 C125.8,169.4,169.2,125.9,222.6,125.9z" - id="path4233" - style="fill:#ffffff" /></svg> \ No newline at end of file + d="m 445,386.7 -84.8,-85.9 c 13.8,-24.1 21,-50.9 21,-77.9 C 381.2,135.3 310,64 222.6,64 135.2,64 64,135.3 64,222.9 c 0,87.6 71.2,158.9 158.6,158.9 27.9,0 55.5,-7.7 80.1,-22.4 l 84.4,85.6 c 1.9,1.9 4.6,3.1 7.3,3.1 2.7,0 5.4,-1.1 7.3,-3.1 L 445,401.2 c 4,-4.1 4,-10.5 0,-14.5 z M 222.6,125.9 c 53.4,0 96.8,43.5 96.8,97 0,53.5 -43.4,97 -96.8,97 -53.4,0 -96.8,-43.5 -96.8,-97 0,-53.5 43.4,-97 96.8,-97 z" + id="fill-edit" + style="fill:#ffffff" + class="fill-edit" + inkscape:connector-curvature="0" /></svg> \ No newline at end of file diff --git a/public_html/image/menu/dashboard.svg b/public_html/image/menu/dashboard.svg index ecbb277..862cfa9 100644 --- a/public_html/image/menu/dashboard.svg +++ b/public_html/image/menu/dashboard.svg @@ -1 +1,54 @@ -<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h48v48h-48z" fill="none"/><path d="M6 26h16v-20h-16v20zm0 16h16v-12h-16v12zm20 0h16v-20h-16v20zm0-36v12h16v-12h-16z"/></svg> \ No newline at end of file +<?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="48" + viewBox="0 0 48 48" + width="48" + id="svg4262" + version="1.1" + inkscape:version="0.91 r13725" + sodipodi:docname="dashboard.svg"> + <metadata + id="metadata4272"> + <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="defs4270" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1056" + id="namedview4268" + showgrid="false" + inkscape:zoom="19.833333" + inkscape:cx="24" + inkscape:cy="24" + inkscape:window-x="0" + inkscape:window-y="24" + inkscape:window-maximized="1" + inkscape:current-layer="svg4262" /> + <path + d="M 6,26 22,26 22,6 6,6 6,26 Z m 0,16 16,0 0,-12 -16,0 0,12 z m 20,0 16,0 0,-20 -16,0 0,20 z M 26,6 26,18 42,18 42,6 26,6 Z" + id="fill-edit" + inkscape:connector-curvature="0" /> +</svg> diff --git a/public_html/image/menu/messages.svg b/public_html/image/menu/messages.svg index e576ad6..6f7dcfc 100644 --- a/public_html/image/menu/messages.svg +++ b/public_html/image/menu/messages.svg @@ -1 +1,43 @@ -<?xml version="1.0" ?><svg style="enable-background:new 0 0 24 24;" version="1.1" viewBox="0 0 24 24" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="info"/><g id="icons"><path d="M20,1H4C1.8,1,0,2.8,0,5v10c0,2.2,1.8,4,4,4v3c0,0.9,1.1,1.3,1.7,0.7L9.4,19H20c2.2,0,4-1.8,4-4V5 C24,2.8,22.2,1,20,1z M14,13H8c-0.6,0-1-0.4-1-1c0-0.6,0.4-1,1-1h6c0.6,0,1,0.4,1,1C15,12.6,14.6,13,14,13z M16,9H8 C7.4,9,7,8.6,7,8c0-0.6,0.4-1,1-1h8c0.6,0,1,0.4,1,1C17,8.6,16.6,9,16,9z" id="message"/></g></svg> \ No newline at end of file +<?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" + style="enable-background:new 0 0 24 24;" + version="1.1" + viewBox="0 0 24 24" + xml:space="preserve" + id="svg4274" + inkscape:version="0.91 r13725" + sodipodi:docname="messages.svg"><metadata + id="metadata4283"><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="defs4281" /><sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="715" + inkscape:window-height="480" + id="namedview4279" + showgrid="false" + inkscape:zoom="9.8333333" + inkscape:cx="12" + inkscape:cy="12" + inkscape:window-x="0" + inkscape:window-y="24" + inkscape:window-maximized="0" + inkscape:current-layer="svg4274" /><g + id="info" /><path + inkscape:connector-curvature="0" + id="fill-edit" + d="M 20,1 4,1 C 1.8,1 0,2.8 0,5 l 0,10 c 0,2.2 1.8,4 4,4 l 0,3 c 0,0.9 1.1,1.3 1.7,0.7 L 9.4,19 20,19 c 2.2,0 4,-1.8 4,-4 L 24,5 C 24,2.8 22.2,1 20,1 Z M 14,13 8,13 C 7.4,13 7,12.6 7,12 7,11.4 7.4,11 8,11 l 6,0 c 0.6,0 1,0.4 1,1 0,0.6 -0.4,1 -1,1 z M 16,9 8,9 C 7.4,9 7,8.6 7,8 7,7.4 7.4,7 8,7 l 8,0 c 0.6,0 1,0.4 1,1 0,0.6 -0.4,1 -1,1 z" /></svg> \ No newline at end of file diff --git a/public_html/image/menu/profile.svg b/public_html/image/menu/profile.svg index 90bf628..58065f9 100644 --- a/public_html/image/menu/profile.svg +++ b/public_html/image/menu/profile.svg @@ -1 +1,45 @@ -<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 48 48" height="48px" id="Layer_1" version="1.1" viewBox="0 0 48 48" width="48px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path clip-rule="evenodd" d="M43,42H5c-2.209,0-4-1.791-4-4V17c0-2.209,1.791-4,4-4h15V9c0-2.209,1.791-4,4-4 s4,1.791,4,4v4h15c2.209,0,4,1.791,4,4v21C47,40.209,45.209,42,43,42z M17.014,34.488c0,0.003,0,0.004,0,0.004 c-0.004,0-0.018-0.781-0.018-0.781s1.166-0.601,2.031-1.378c0.507-0.417,0.741-1.362,0.741-1.362 c0.137-0.828,0.238-2.877,0.238-3.703c0-2.062-1.033-4.28-4.007-4.28V22.98v0.007c-2.974,0-4.007,2.219-4.007,4.28 c0,0.826,0.102,2.875,0.238,3.703c0,0,0.234,0.945,0.741,1.362c0.865,0.777,2.031,1.378,2.031,1.378s-0.014,0.781-0.018,0.781 c0,0,0-0.001,0-0.004c0,0,0.029,1.146,0.029,1.487c0,1.362-1.365,2.018-2.223,2.018c-0.002,0-0.002,0-0.003,0 c-2.593,0.113-3.205,0.976-3.21,0.984C9.419,39.23,9.199,39.482,8.998,40h14.004c-0.201-0.518-0.421-0.77-0.582-1.022 c-0.005-0.009-0.617-0.871-3.21-0.984c-0.001,0-0.001,0-0.003,0c-0.857,0-2.223-0.655-2.223-2.018 C16.984,35.634,17.014,34.488,17.014,34.488z M26,9c0-1.104-0.896-2-2-2s-2,0.896-2,2v6c0,1.104,0.896,2,2,2s2-0.896,2-2V9z M45,17 c0-1.104-0.896-2-2-2H28c0,2.209-1.791,4-4,4s-4-1.791-4-4H5c-1.104,0-2,0.896-2,2v21c0,1.104,0.896,2,2,2h1.797 c0.231-0.589,0.656-1.549,1.16-2.24c0.025-0.014,0.848-1.739,4.998-1.79c0.006-0.021,0.01-1.042,0.022-1.027 c-0.32-0.202-0.737-0.516-1.051-0.816c-0.255-0.156-1.161-1.029-1.452-2.583c-0.087-0.542-0.488-3.099-0.488-4.166 c0-3.171,1.265-6.381,5.953-6.381c0.021,0,0.1,0,0.121,0c4.688,0,5.953,3.21,5.953,6.381c0,1.067-0.401,3.624-0.488,4.166 c-0.291,1.554-1.197,2.427-1.452,2.583c-0.313,0.301-0.73,0.614-1.051,0.816c0.013-0.015,0.017,1.007,0.022,1.027 c4.151,0.051,4.974,1.776,4.998,1.79c0.504,0.691,0.929,1.651,1.16,2.24H43c1.104,0,2-0.896,2-2V17z M40,26H28c-0.553,0-1-0.447-1-1 s0.447-1,1-1h12c0.553,0,1,0.447,1,1S40.553,26,40,26z M28,30h2c0.553,0,1,0.447,1,1s-0.447,1-1,1h-2c-0.553,0-1-0.447-1-1 S27.447,30,28,30z M28,34h6c0.553,0,1,0.447,1,1s-0.447,1-1,1h-6c-0.553,0-1-0.447-1-1S27.447,34,28,34z M32,31c0-0.553,0.447-1,1-1 h4c0.553,0,1,0.447,1,1s-0.447,1-1,1h-4C32.447,32,32,31.553,32,31z M23,9h2v2h-2V9z" fill-rule="evenodd"/></svg> \ No newline at end of file +<?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 48 48" + height="48px" + id="Layer_1" + version="1.1" + viewBox="0 0 48 48" + width="48px" + xml:space="preserve" + inkscape:version="0.91 r13725" + sodipodi:docname="profile.svg"><metadata + id="metadata4223"><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="defs4221" /><sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1056" + id="namedview4219" + showgrid="false" + inkscape:zoom="13.906433" + inkscape:cx="16.712255" + inkscape:cy="22.408078" + inkscape:window-x="0" + inkscape:window-y="24" + inkscape:window-maximized="1" + inkscape:current-layer="Layer_1" /><path + d="M 43,42 5,42 C 2.791,42 1,40.209 1,38 L 1,17 c 0,-2.209 1.791,-4 4,-4 l 15,0 0,-4 c 0,-2.209 1.791,-4 4,-4 2.209,0 4,1.791 4,4 l 0,4 15,0 c 2.209,0 4,1.791 4,4 l 0,21 c 0,2.209 -1.791,4 -4,4 z M 17.014,34.488 c 0,0.003 0,0.004 0,0.004 -0.004,0 -0.018,-0.781 -0.018,-0.781 0,0 1.166,-0.601 2.031,-1.378 0.507,-0.417 0.741,-1.362 0.741,-1.362 0.137,-0.828 0.238,-2.877 0.238,-3.703 0,-2.062 -1.033,-4.28 -4.007,-4.28 l 0,-0.008 0,0.007 c -2.974,0 -4.007,2.219 -4.007,4.28 0,0.826 0.102,2.875 0.238,3.703 0,0 0.234,0.945 0.741,1.362 0.865,0.777 2.031,1.378 2.031,1.378 0,0 -0.014,0.781 -0.018,0.781 0,0 0,-10e-4 0,-0.004 0,0 0.029,1.146 0.029,1.487 0,1.362 -1.365,2.018 -2.223,2.018 -0.002,0 -0.002,0 -0.003,0 -2.593,0.113 -3.205,0.976 -3.21,0.984 C 9.419,39.23 9.199,39.482 8.998,40 l 14.004,0 c -0.201,-0.518 -0.421,-0.77 -0.582,-1.022 -0.005,-0.009 -0.617,-0.871 -3.21,-0.984 -0.001,0 -0.001,0 -0.003,0 -0.857,0 -2.223,-0.655 -2.223,-2.018 0,-0.342 0.03,-1.488 0.03,-1.488 z M 26,9 C 26,7.896 25.104,7 24,7 22.896,7 22,7.896 22,9 l 0,6 c 0,1.104 0.896,2 2,2 1.104,0 2,-0.896 2,-2 l 0,-6 z m 19,8 c 0,-1.104 -0.896,-2 -2,-2 l -15,0 c 0,2.209 -1.791,4 -4,4 -2.209,0 -4,-1.791 -4,-4 L 5,15 c -1.104,0 -2,0.896 -2,2 l 0,21 c 0,1.104 0.896,2 2,2 l 1.797,0 c 0.231,-0.589 0.656,-1.549 1.16,-2.24 0.025,-0.014 0.848,-1.739 4.998,-1.79 0.006,-0.021 0.01,-1.042 0.022,-1.027 -0.32,-0.202 -0.737,-0.516 -1.051,-0.816 -0.255,-0.156 -1.161,-1.029 -1.452,-2.583 -0.087,-0.542 -0.488,-3.099 -0.488,-4.166 0,-3.171 1.265,-6.381 5.953,-6.381 0.021,0 0.1,0 0.121,0 4.688,0 5.953,3.21 5.953,6.381 0,1.067 -0.401,3.624 -0.488,4.166 -0.291,1.554 -1.197,2.427 -1.452,2.583 -0.313,0.301 -0.73,0.614 -1.051,0.816 0.013,-0.015 0.017,1.007 0.022,1.027 4.151,0.051 4.974,1.776 4.998,1.79 0.504,0.691 0.929,1.651 1.16,2.24 L 43,40 c 1.104,0 2,-0.896 2,-2 l 0,-21 z m -5,9 -12,0 c -0.553,0 -1,-0.447 -1,-1 0,-0.553 0.447,-1 1,-1 l 12,0 c 0.553,0 1,0.447 1,1 0,0.553 -0.447,1 -1,1 z m -12,4 2,0 c 0.553,0 1,0.447 1,1 0,0.553 -0.447,1 -1,1 l -2,0 c -0.553,0 -1,-0.447 -1,-1 0,-0.553 0.447,-1 1,-1 z m 0,4 6,0 c 0.553,0 1,0.447 1,1 0,0.553 -0.447,1 -1,1 l -6,0 c -0.553,0 -1,-0.447 -1,-1 0,-0.553 0.447,-1 1,-1 z m 4,-3 c 0,-0.553 0.447,-1 1,-1 l 4,0 c 0.553,0 1,0.447 1,1 0,0.553 -0.447,1 -1,1 l -4,0 c -0.553,0 -1,-0.447 -1,-1 z m -9,-22 2,0 0,2 -2,0 0,-2 z" + id="fill-edit" + inkscape:connector-curvature="0" + style="clip-rule:evenodd;fill-rule:evenodd" /></svg> \ No newline at end of file diff --git a/view/vue-config.js b/view/vue-config.js index dd89b35..250d68b 100644 --- a/view/vue-config.js +++ b/view/vue-config.js @@ -1,13 +1,22 @@ import {GlobalStore} from './lib/gstore-es6' window.gstore = new GlobalStore(); + +// Header window.gstore.add('header_title', 'ndli1718'); -window.gstore.add('notif', { +window.gstore.add('info', { active: false, type: 'warning', message: 'Warning! blabla' }); -window.gstore.add('menu_item_active', 'dashboard'); +window.gstore.add('notif', [ + { class: 'bell', count: 4 }, + { class: 'message', count: 23 }, + { class: 'search', count: '' }, + { class: 'menu', count: '' } +]) + +// Menu window.gstore.add('menu_item', { dashboard: { label: 'Dashboard', @@ -19,4 +28,5 @@ window.gstore.add('menu_item', { label: 'Boîte de réception', icon: 'messages' } -}); \ No newline at end of file +}); +window.gstore.add('menu_item_active', 'dashboard'); \ No newline at end of file diff --git a/view/vue/header.vue b/view/vue/header.vue index 5b6a7e5..600803d 100644 --- a/view/vue/header.vue +++ b/view/vue/header.vue @@ -8,14 +8,11 @@ </div> <!-- Header Info --> - <div id='header-info' v-show='gstore.notif.active' :class='gstore.notif.type'>{{ gstore.notif.message }}</div> + <div id='header-info' v-show='gstore.info.active' :class='gstore.info.type'>{{ gstore.info.message }}</div> <!-- Header Notif --> <div id='header-notif'> - <div class='hnotif bell' data-count='4'></div> - <div class='hnotif message'data-count='23'></div> - <div class='hnotif search'></div> - <div class='hnotif menu'></div> + <div v-for='notif in gstore.notif' :class='"hnotif " + notif.class' :data-count='notif.count'></div> </div> </div> @@ -26,6 +23,11 @@ <script> export default { name: 'HEADER', - data(){ return { gstore: window.gstore.data }; } + data(){ return { gstore: window.gstore.data }; }, + methods: { + show_notif(){ + + } + } } </script> \ No newline at end of file diff --git a/view/vue/menu.vue b/view/vue/menu.vue index 0f2c23b..0b48780 100644 --- a/view/vue/menu.vue +++ b/view/vue/menu.vue @@ -4,7 +4,7 @@ <div v-for='(item, index) in gstore.menu_item' class='menu-item-wrapper'> - <div :class="(index == gstore.menu_item_active) ? 'menu-item active' : 'menu-item'" @click='navigate_menu(index)'>{{ item.label }}</div> + <div :class="(index == gstore.menu_item_active) ? 'menu-item active' : 'menu-item'" @click='navigate_menu(index)' :style='"background-image: url(/image/menu/" + item.icon + ".svg@aaaaaa"'>{{ item.label }}</div> </div>