sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added incons & implemented design for header component

Browse Source
This commit is contained in:
Eraldo Hasanaj
2019-01-17 12:26:12 +01:00
parent 2221b48bec
commit ce100ee4e1
14 changed files with 428 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/app/layouts/header/header.component.html
View File

@@ -1,7 +1,28 @@
<div class="grid-container">
<div class="grid-item align-left">
{# <img class="logo" src="/assets/images/hugendubel.png"> #}
<div class="three-col-grid-container">
<div class="align-left">
<img src="/assets/images/hugendubel.jpg">
</div>
<div class="align-center">
<div class="two-col-grid-container pt-5">
<div class="align-right">
<img class="header-icon" src="/assets/images/newspaper_active.svg">
</div>
<div class="align-left">
<img class="header-icon" src="/assets/images/notification_inactive.svg">
</div>
</div>
</div>
<div class="align-right">
<div class="three-col-grid-container-fixed pt-5">
<div class="align-right">
<img class="header-icon profile-icon" src="/assets/images/avatar_active.svg">
</div>
<div class="align-right pt-3">
<span class="profile-name">{{customer}}</span>
</div>
<div class="align-right pt-3">
<img class="header-icon" src="/assets/images/more_inactive.svg">
</div>
</div>
</div>
<div class="grid-item align-center">2</div>
<div class="grid-item align-right">3</div>
</div>

27
src/app/layouts/header/header.component.scss
View File

@@ -1,13 +1,32 @@
.grid-container {
@import "../../../assets/scss/variables";
.three-col-grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 3vh;
margin-top: 20px;
}
.three-col-grid-container-fixed {
display: grid;
grid-template-columns: auto min-content 40px;
grid-column-gap: 1vh;
}
.profile-name {
font-weight: bold;
color: #4F6575;
}
.two-col-grid-container {
display: grid;
grid-template-columns: auto auto;
grid-column-gap: 2vh;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
}
.logo {
height: 50px;
.header-icon {
width: 20px;
}

2
src/app/layouts/header/header.component.ts
View File

@@ -9,7 +9,7 @@ export class HeaderComponent implements OnInit {
constructor() { }
welcome = 'Hugendubel InstoreApp';
customer = 'Kunden';
ngOnInit() {
}

0
src/assets/csss/index.ts
View File

37
src/assets/images/avatar_active.svg Normal file
View File

@@ -0,0 +1,37 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve" width="512px" height="512px">
<g>
<path d="M612,306.036C612,137.405,474.595,0,305.964,0S0,137.405,0,306.036c0,92.881,42.14,176.437,107.698,232.599 c0.795,0.795,1.59,1.59,3.108,2.313C163.86,585.473,231.804,612,306.759,612c73.365,0,141.309-26.527,194.363-69.462 c3.108-0.795,5.493-3.108,7.011-5.493C571.451,480.088,612,398.122,612,306.036z M28.117,306.036 c0-153.018,124.901-277.919,277.919-277.919s277.919,124.901,277.919,277.919c0,74.955-29.635,142.826-78.063,192.845 c-7.806-36.719-31.225-99.169-103.072-139.718c16.408-20.311,25.732-46.838,25.732-74.955c0-67.149-54.644-121.793-121.793-121.793 s-121.793,54.644-121.793,121.793c0,28.117,10.119,53.849,25.732,74.955c-72.497,40.549-95.916,103-102.928,139.718 C58.547,449.658,28.117,380.991,28.117,306.036z M212.36,284.93c0-51.536,42.14-93.676,93.676-93.676s93.676,42.14,93.676,93.676 s-42.14,93.676-93.676,93.676S212.36,336.466,212.36,284.93z M132.707,523.023c1.59-22.624,14.022-99.169,98.374-142.104 c21.106,16.408,46.838,25.732,74.955,25.732c28.117,0,54.644-10.119,75.75-26.527c83.556,42.935,96.784,117.89,99.169,142.104 c-47.633,38.237-108.493,61.655-174.052,61.655C240.478,583.955,180.34,561.331,132.707,523.023z" fill="#4f6575"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

37
src/assets/images/avatar_inactive.svg Normal file
View File

@@ -0,0 +1,37 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve" width="512px" height="512px">
<g>
<path d="M612,306.036C612,137.405,474.595,0,305.964,0S0,137.405,0,306.036c0,92.881,42.14,176.437,107.698,232.599 c0.795,0.795,1.59,1.59,3.108,2.313C163.86,585.473,231.804,612,306.759,612c73.365,0,141.309-26.527,194.363-69.462 c3.108-0.795,5.493-3.108,7.011-5.493C571.451,480.088,612,398.122,612,306.036z M28.117,306.036 c0-153.018,124.901-277.919,277.919-277.919s277.919,124.901,277.919,277.919c0,74.955-29.635,142.826-78.063,192.845 c-7.806-36.719-31.225-99.169-103.072-139.718c16.408-20.311,25.732-46.838,25.732-74.955c0-67.149-54.644-121.793-121.793-121.793 s-121.793,54.644-121.793,121.793c0,28.117,10.119,53.849,25.732,74.955c-72.497,40.549-95.916,103-102.928,139.718 C58.547,449.658,28.117,380.991,28.117,306.036z M212.36,284.93c0-51.536,42.14-93.676,93.676-93.676s93.676,42.14,93.676,93.676 s-42.14,93.676-93.676,93.676S212.36,336.466,212.36,284.93z M132.707,523.023c1.59-22.624,14.022-99.169,98.374-142.104 c21.106,16.408,46.838,25.732,74.955,25.732c28.117,0,54.644-10.119,75.75-26.527c83.556,42.935,96.784,117.89,99.169,142.104 c-47.633,38.237-108.493,61.655-174.052,61.655C240.478,583.955,180.34,561.331,132.707,523.023z" fill="#c4e0f5"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/images/hugendubel.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

0
src/assets/images/index.ts
View File

39
src/assets/images/more_active.svg Normal file
View File

@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" width="512px" height="512px">
<g>
<path d="M8,22c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S12.411,22,8,22z" fill="#4f6575"/>
<path d="M52,22c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S56.411,22,52,22z" fill="#4f6575"/>
<path d="M30,22c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S34.411,22,30,22z" fill="#4f6575"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 816 B

39
src/assets/images/more_inactive.svg Normal file
View File

@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve" width="512px" height="512px">
<g>
<path d="M8,22c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S12.411,22,8,22z" fill="#c4e0f5"/>
<path d="M52,22c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S56.411,22,52,22z" fill="#c4e0f5"/>
<path d="M30,22c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S34.411,22,30,22z" fill="#c4e0f5"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 816 B

64
src/assets/images/newspaper_active.svg Normal file
View File

@@ -0,0 +1,64 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 477.867 477.867" style="enable-background:new 0 0 477.867 477.867;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M460.8,119.467h-85.333v-102.4C375.467,7.641,367.826,0,358.4,0H17.067C7.641,0,0,7.641,0,17.067V409.6 c0,37.703,30.564,68.267,68.267,68.267H409.6c37.703,0,68.267-30.564,68.267-68.267V136.533 C477.867,127.108,470.226,119.467,460.8,119.467z M68.267,443.733c-18.851,0-34.133-15.282-34.133-34.133V34.133h307.2V409.6 c0.041,4.114,0.458,8.216,1.246,12.254c0.171,0.973,0.358,1.929,0.58,2.884c0.843,3.866,2.019,7.652,3.516,11.315 c0,0.171,0.171,0.324,0.239,0.478c1.05,2.47,2.247,4.875,3.584,7.202H68.267z M443.733,409.6 c0,18.851-15.282,34.133-34.133,34.133s-34.133-15.282-34.133-34.133v-256h68.267V409.6z" fill="#4f6575"/>
</g>
</g>
<g>
<g>
<path d="M238.933,85.333h-102.4c-9.426,0-17.067,7.641-17.067,17.067s7.641,17.067,17.067,17.067h102.4 c9.426,0,17.067-7.641,17.067-17.067S248.359,85.333,238.933,85.333z" fill="#4f6575"/>
</g>
</g>
<g>
<g>
<path d="M290.133,170.667h-204.8c-9.426,0-17.067,7.641-17.067,17.067c0,9.426,7.641,17.067,17.067,17.067h204.8 c9.426,0,17.067-7.641,17.067-17.067C307.2,178.308,299.559,170.667,290.133,170.667z" fill="#4f6575"/>
</g>
</g>
<g>
<g>
<path d="M290.133,238.933h-204.8c-9.426,0-17.067,7.641-17.067,17.067c0,9.426,7.641,17.067,17.067,17.067h204.8 c9.426,0,17.067-7.641,17.067-17.067C307.2,246.574,299.559,238.933,290.133,238.933z" fill="#4f6575"/>
</g>
</g>
<g>
<g>
<path d="M290.133,307.2h-204.8c-9.426,0-17.067,7.641-17.067,17.067c0,9.426,7.641,17.067,17.067,17.067h204.8 c9.426,0,17.067-7.641,17.067-17.067C307.2,314.841,299.559,307.2,290.133,307.2z" fill="#4f6575"/>
</g>
</g>
<g>
<g>
<path d="M290.133,375.467h-204.8c-9.426,0-17.067,7.641-17.067,17.067S75.908,409.6,85.333,409.6h204.8 c9.426,0,17.067-7.641,17.067-17.067S299.559,375.467,290.133,375.467z" fill="#4f6575"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

64
src/assets/images/newspaper_inactive.svg Normal file
View File

@@ -0,0 +1,64 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 477.867 477.867" style="enable-background:new 0 0 477.867 477.867;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M460.8,119.467h-85.333v-102.4C375.467,7.641,367.826,0,358.4,0H17.067C7.641,0,0,7.641,0,17.067V409.6 c0,37.703,30.564,68.267,68.267,68.267H409.6c37.703,0,68.267-30.564,68.267-68.267V136.533 C477.867,127.108,470.226,119.467,460.8,119.467z M68.267,443.733c-18.851,0-34.133-15.282-34.133-34.133V34.133h307.2V409.6 c0.041,4.114,0.458,8.216,1.246,12.254c0.171,0.973,0.358,1.929,0.58,2.884c0.843,3.866,2.019,7.652,3.516,11.315 c0,0.171,0.171,0.324,0.239,0.478c1.05,2.47,2.247,4.875,3.584,7.202H68.267z M443.733,409.6 c0,18.851-15.282,34.133-34.133,34.133s-34.133-15.282-34.133-34.133v-256h68.267V409.6z" fill="#c4e0f5"/>
</g>
</g>
<g>
<g>
<path d="M238.933,85.333h-102.4c-9.426,0-17.067,7.641-17.067,17.067s7.641,17.067,17.067,17.067h102.4 c9.426,0,17.067-7.641,17.067-17.067S248.359,85.333,238.933,85.333z" fill="#c4e0f5"/>
</g>
</g>
<g>
<g>
<path d="M290.133,170.667h-204.8c-9.426,0-17.067,7.641-17.067,17.067c0,9.426,7.641,17.067,17.067,17.067h204.8 c9.426,0,17.067-7.641,17.067-17.067C307.2,178.308,299.559,170.667,290.133,170.667z" fill="#c4e0f5"/>
</g>
</g>
<g>
<g>
<path d="M290.133,238.933h-204.8c-9.426,0-17.067,7.641-17.067,17.067c0,9.426,7.641,17.067,17.067,17.067h204.8 c9.426,0,17.067-7.641,17.067-17.067C307.2,246.574,299.559,238.933,290.133,238.933z" fill="#c4e0f5"/>
</g>
</g>
<g>
<g>
<path d="M290.133,307.2h-204.8c-9.426,0-17.067,7.641-17.067,17.067c0,9.426,7.641,17.067,17.067,17.067h204.8 c9.426,0,17.067-7.641,17.067-17.067C307.2,314.841,299.559,307.2,290.133,307.2z" fill="#c4e0f5"/>
</g>
</g>
<g>
<g>
<path d="M290.133,375.467h-204.8c-9.426,0-17.067,7.641-17.067,17.067S75.908,409.6,85.333,409.6h204.8 c9.426,0,17.067-7.641,17.067-17.067S299.559,375.467,290.133,375.467z" fill="#c4e0f5"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

49
src/assets/images/notification_active.svg Normal file
View File

@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M467.819,431.851l-36.651-61.056c-16.896-28.181-25.835-60.437-25.835-93.312V224 c0-82.325-67.008-149.333-149.333-149.333S106.667,141.675,106.667,224v53.483c0,32.875-8.939,65.131-25.835,93.312 l-36.651,61.056c-1.984,3.285-2.027,7.403-0.149,10.731c1.899,3.349,5.461,5.419,9.301,5.419h405.333 c3.84,0,7.403-2.069,9.301-5.419C469.845,439.253,469.803,435.136,467.819,431.851z M72.171,426.667l26.944-44.907 C118.016,350.272,128,314.219,128,277.483V224c0-70.592,57.408-128,128-128s128,57.408,128,128v53.483 c0,36.736,9.984,72.789,28.864,104.277l26.965,44.907H72.171z" fill="#4f6575"/>
</g>
</g>
<g>
<g>
<path d="M256,0c-23.531,0-42.667,19.136-42.667,42.667v42.667C213.333,91.221,218.112,96,224,96s10.667-4.779,10.667-10.667 V42.667c0-11.776,9.557-21.333,21.333-21.333s21.333,9.557,21.333,21.333v42.667C277.333,91.221,282.112,96,288,96 s10.667-4.779,10.667-10.667V42.667C298.667,19.136,279.531,0,256,0z" fill="#4f6575"/>
</g>
</g>
<g>
<g>
<path d="M302.165,431.936c-3.008-5.077-9.515-6.741-14.613-3.819c-5.099,2.987-6.805,9.536-3.819,14.613 c2.773,4.715,4.288,10.368,4.288,15.936c0,17.643-14.357,32-32,32c-17.643,0-32-14.357-32-32c0-5.568,1.515-11.221,4.288-15.936 c2.965-5.099,1.259-11.627-3.819-14.613c-5.141-2.923-11.627-1.259-14.613,3.819c-4.715,8.064-7.211,17.301-7.211,26.731 C202.667,488.085,226.581,512,256,512s53.333-23.915,53.376-53.333C309.376,449.237,306.88,440,302.165,431.936z" fill="#4f6575"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

49
src/assets/images/notification_inactive.svg Normal file
View File

@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M467.819,431.851l-36.651-61.056c-16.896-28.181-25.835-60.437-25.835-93.312V224 c0-82.325-67.008-149.333-149.333-149.333S106.667,141.675,106.667,224v53.483c0,32.875-8.939,65.131-25.835,93.312 l-36.651,61.056c-1.984,3.285-2.027,7.403-0.149,10.731c1.899,3.349,5.461,5.419,9.301,5.419h405.333 c3.84,0,7.403-2.069,9.301-5.419C469.845,439.253,469.803,435.136,467.819,431.851z M72.171,426.667l26.944-44.907 C118.016,350.272,128,314.219,128,277.483V224c0-70.592,57.408-128,128-128s128,57.408,128,128v53.483 c0,36.736,9.984,72.789,28.864,104.277l26.965,44.907H72.171z" fill="#c4e0f5"/>
</g>
</g>
<g>
<g>
<path d="M256,0c-23.531,0-42.667,19.136-42.667,42.667v42.667C213.333,91.221,218.112,96,224,96s10.667-4.779,10.667-10.667 V42.667c0-11.776,9.557-21.333,21.333-21.333s21.333,9.557,21.333,21.333v42.667C277.333,91.221,282.112,96,288,96 s10.667-4.779,10.667-10.667V42.667C298.667,19.136,279.531,0,256,0z" fill="#c4e0f5"/>
</g>
</g>
<g>
<g>
<path d="M302.165,431.936c-3.008-5.077-9.515-6.741-14.613-3.819c-5.099,2.987-6.805,9.536-3.819,14.613 c2.773,4.715,4.288,10.368,4.288,15.936c0,17.643-14.357,32-32,32c-17.643,0-32-14.357-32-32c0-5.568,1.515-11.221,4.288-15.936 c2.965-5.099,1.259-11.627-3.819-14.613c-5.141-2.923-11.627-1.259-14.613,3.819c-4.715,8.064-7.211,17.301-7.211,26.731 C202.667,488.085,226.581,512,256,512s53.333-23.915,53.376-53.333C309.376,449.237,306.88,440,302.165,431.936z" fill="#c4e0f5"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB