JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/multinode: navigation panel added

Browse Source 
Change-Id: Ia8d56cfce14476e1f4b59f4d13f239dda4a87b4f
This commit is contained in:
NickolaiYurchenko 2020-12-29 19:59:57 +02:00 committed by Nikolay Yurchenko
parent 69a491aa6f
commit 857155f5ac
11 changed files with 199 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/multinode/package-lock.json generated
View File

@ -12767,6 +12767,15 @@
"integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
"dev": true
},
"svg-to-vue": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/svg-to-vue/-/svg-to-vue-0.7.0.tgz",
"integrity": "sha512-Tg2nMmf3BQorYCAjxbtTkYyWPVSeox5AZUFvfy4MoWK/5tuQlnA/h3LAlTjV3sEvOC5FtUNovRSj3p784l4KOA==",
"dev": true,
"requires": {
"svgo": "^1.3.2"
}
},
"svgo": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@ -13902,6 +13911,16 @@
}
}
},
"vue-svg-loader": {
"version": "0.16.0",
"resolved": "https://registry.npmjs.org/vue-svg-loader/-/vue-svg-loader-0.16.0.tgz",
"integrity": "sha512-2RtFXlTCYWm8YAEO2qAOZ2SuIF2NvLutB5muc3KDYoZq5ZeCHf8ggzSan3ksbbca7CJ/Aw57ZnDF4B7W/AkGtw==",
"dev": true,
"requires": {
"loader-utils": "^1.2.3",
"svg-to-vue": "^0.7.0"
}
},
"vue-template-compiler": {
"version": "2.6.11",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",

1
web/multinode/package.json
View File

@ -33,6 +33,7 @@
"tslint-consistent-codestyle": "1.16.0",
"tslint-loader": "3.5.4",
"typescript": "3.7.4",
"vue-svg-loader": "0.16.0",
"vue-template-compiler": "2.6.11",
"vue-tslint": "0.3.2",
"vue-tslint-loader": "3.5.6",

124
web/multinode/src/app/components/navigation/NavigationArea.vue Normal file
View File

@ -0,0 +1,124 @@
// Copyright (C) 2020 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div class="navigation-area">
<storj-logo class="navigation-area__logo" />
<router-link
:aria-label="navItem.name"
class="navigation-area__item-container"
v-for="navItem in navigation"
:key="navItem.name"
:to="navItem.path"
>
<div class="navigation-area__item-container__link">
<component :is="navItem.icon"></component>
<p class="navigation-area__item-container__link__title">{{ navItem.name }}</p>
</div>
</router-link>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import MyNodesIcon from '@/../static/images/icons/navigation/nodes.svg';
import NotificationIcon from '@/../static/images/icons/navigation/notifications.svg';
import PayoutsIcon from '@/../static/images/icons/navigation/payouts.svg';
import ReputationIcon from '@/../static/images/icons/navigation/reputation.svg';
import TrafficIcon from '@/../static/images/icons/navigation/traffic.svg';
import StorjLogo from '@/../static/images/Logo.svg';
export class NavigationLink {
constructor(
public name: string = '',
public path: string = '',
public icon: Vue = new Vue(),
) {}
}
@Component({
components: {
StorjLogo,
MyNodesIcon,
PayoutsIcon,
ReputationIcon,
TrafficIcon,
NotificationIcon,
},
})
export default class NavigationArea extends Vue {
/**
* Array of navigation links with icons.
*/
// TODO: add actual routes
public readonly navigation: NavigationLink[] = [
new NavigationLink('My Nodes', '/my-nodes', MyNodesIcon),
new NavigationLink('Payouts', '/payouts', PayoutsIcon),
new NavigationLink('Bandwidth & Disk', '/traffic', TrafficIcon),
new NavigationLink('Reputation', '/reputation', ReputationIcon),
new NavigationLink('Notifications', '/notifications', NotificationIcon),
];
}
</script>
<style scoped lang="scss">
.navigation-area {
box-sizing: border-box;
padding: 30px 24px;
height: 100vh;
display: flex;
flex-direction: column;
align-items: flex-start;
border-right: 1px solid var(--c-gray--light);
&__logo {
margin-bottom: 62px;
}
&__item-container {
flex: 0 0 auto;
padding: 10px;
width: calc(100% - 20px);
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 20px;
text-decoration: none;
path {
fill: var(--c-label);
}
&__link {
display: flex;
justify-content: flex-start;
align-items: center;
&__title {
font-family: 'font_semiBold', sans-serif;
font-size: 16px;
line-height: 23px;
margin: 0 0 0 15px;
white-space: nowrap;
color: var(--c-label);
}
}
&.router-link-active,
&:hover {
background: #e7e9eb;
border-radius: 6px;
.navigation-area__item-container__link__title {
color: var(--c-title);
}
path {
fill: var(--c-title) !important;
opacity: 1;
}
}
}
}
</style>

20
web/multinode/src/app/views/Dashboard.vue
View File

@ -2,15 +2,29 @@
// See LICENSE for copying information.
<template>
<div>
<div class="dashboard-area">
<div class="dashboard-area__navigation-area">
<navigation-area />
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
import NavigationArea from '@/app/components/navigation/NavigationArea.vue';
@Component({
components: {NavigationArea},
})
export default class Dashboard extends Vue {}
</script>
<style lang="scss" scoped>
.dashboard-area {
display: flex;
&__navigation-area {
width: 280px;
}
}
</style>

10
web/multinode/static/images/Logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

3
web/multinode/static/images/icons/navigation/nodes.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 2.50065C2.5 1.58018 3.24619 0.833984 4.16667 0.833984H15.8333C16.7538 0.833984 17.5 1.58018 17.5 2.50065V17.5006C17.5 18.4211 16.7538 19.1673 15.8333 19.1673H4.16667C3.24619 19.1673 2.5 18.4211 2.5 17.5006V2.50065ZM6.25 6.66732C6.71025 6.66732 7.08333 6.29423 7.08333 5.83398C7.08333 5.37373 6.71025 5.00065 6.25 5.00065C5.78975 5.00065 5.41667 5.37373 5.41667 5.83398C5.41667 6.29423 5.78975 6.66732 6.25 6.66732ZM7.91667 5.83398C7.91667 5.37375 8.28976 5.00065 8.75 5.00065H13.75C14.2102 5.00065 14.5833 5.37375 14.5833 5.83398C14.5833 6.29422 14.2102 6.66732 13.75 6.66732H8.75C8.28976 6.66732 7.91667 6.29422 7.91667 5.83398ZM8.75 9.16732C8.28976 9.16732 7.91667 9.54041 7.91667 10.0007C7.91667 10.4609 8.28976 10.834 8.75 10.834H13.75C14.2102 10.834 14.5833 10.4609 14.5833 10.0007C14.5833 9.54041 14.2102 9.16732 13.75 9.16732H8.75ZM8.75 13.334C8.28976 13.334 7.91667 13.7071 7.91667 14.1673C7.91667 14.6276 8.28976 15.0006 8.75 15.0006H13.75C14.2102 15.0006 14.5833 14.6276 14.5833 14.1673C14.5833 13.7071 14.2102 13.334 13.75 13.334H8.75ZM6.25 10.834C6.71025 10.834 7.08333 10.4609 7.08333 10.0007C7.08333 9.5404 6.71025 9.16732 6.25 9.16732C5.78975 9.16732 5.41667 9.5404 5.41667 10.0007C5.41667 10.4609 5.78975 10.834 6.25 10.834ZM6.25 15.0006C6.71025 15.0006 7.08333 14.6276 7.08333 14.1673C7.08333 13.7071 6.71025 13.334 6.25 13.334C5.78975 13.334 5.41667 13.7071 5.41667 14.1673C5.41667 14.6276 5.78975 15.0006 6.25 15.0006Z" fill="#586474"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

3
web/multinode/static/images/icons/navigation/notifications.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 20C11.1 20 12 19.1 12 18H8C8 19.1 8.9 20 10 20ZM16 14V9C16 5.93 14.37 3.36 11.5 2.68V2C11.5 1.17 10.83 0.5 10 0.5C9.17 0.5 8.5 1.17 8.5 2V2.68C5.64 3.36 4 5.92 4 9V14L2 16V17H18V16L16 14ZM14 15H6V9C6 6.52 7.51 4.5 10 4.5C12.49 4.5 14 6.52 14 9V15Z" fill="#586474"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 382 B

4
web/multinode/static/images/icons/navigation/payouts.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 10H16V14H14V10Z" fill="#586474"/>
<path d="M17.2 5.50039V3.70039C17.2 2.70769 16.3927 1.90039 15.4 1.90039H3.7C2.2114 1.90039 1 3.11179 1 4.60039V15.4004C1 17.3813 2.6146 18.1004 3.7 18.1004H17.2C18.1927 18.1004 19 17.2931 19 16.3004V7.30039C19 6.30769 18.1927 5.50039 17.2 5.50039ZM3.7 3.70039H15.4V5.50039H3.7C3.46827 5.49002 3.24946 5.39067 3.08915 5.22303C2.92883 5.05538 2.83936 4.83235 2.83936 4.60039C2.83936 4.36843 2.92883 4.1454 3.08915 3.97775C3.24946 3.81011 3.46827 3.71076 3.7 3.70039ZM17.2 16.3004H3.7108C3.295 16.2896 2.8 16.1249 2.8 15.4004V7.13389C3.0826 7.23559 3.3823 7.30039 3.7 7.30039H17.2V16.3004Z" fill="#586474"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 756 B

3
web/multinode/static/images/icons/navigation/reputation.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.996 0.250003C10.3133 0.249188 10.6035 0.428639 10.7446 0.712863L13.1308 5.52073L18.4523 6.29668C18.7658 6.34239 19.0262 6.56186 19.1244 6.86304C19.2225 7.16422 19.1414 7.49502 18.9151 7.71666L15.0444 11.5074L15.9636 16.7734C16.0183 17.0871 15.8895 17.4047 15.6315 17.5915C15.3736 17.7784 15.0317 17.8019 14.7507 17.6521L9.99818 15.119L5.24675 17.652C4.96552 17.802 4.62341 17.7784 4.36543 17.5912C4.10745 17.4041 3.97879 17.0862 4.03398 16.7724L4.95973 11.5074L1.08283 7.71717C0.856142 7.49555 0.774837 7.1645 0.87307 6.86308C0.971303 6.56165 1.23206 6.34208 1.5458 6.29658L6.8962 5.52074L9.24979 0.716704C9.38939 0.431758 9.67869 0.250818 9.996 0.250003ZM10.003 2.96758L8.1994 6.64896C8.07832 6.89612 7.84301 7.06755 7.57064 7.10704L3.45354 7.70405L6.43915 10.6229C6.63585 10.8152 6.72498 11.0922 6.67734 11.3631L5.97158 15.3769L9.60611 13.4393C9.85112 13.3087 10.1451 13.3087 10.3901 13.4393L14.0282 15.3784L13.3272 11.3621C13.28 11.0917 13.369 10.8154 13.5651 10.6234L16.5469 7.70314L12.4582 7.10695C12.1876 7.06749 11.9535 6.89777 11.832 6.6528L10.003 2.96758Z" fill="#586474"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

4
web/multinode/static/images/icons/navigation/traffic.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.1595 5.95509C6.21995 6.23073 5.41536 7.00873 5.41536 8.13094C5.41536 8.92561 5.77129 9.55151 6.3613 9.94129C6.90384 10.2997 7.57734 10.4172 8.20591 10.4172L11.6654 10.4175L11.7852 10.4172C12.4138 10.4172 13.088 10.2997 13.6315 9.94223C14.2224 9.5536 14.582 8.92806 14.582 8.13094C14.582 7.37062 14.2809 6.75139 13.7476 6.34748C13.4693 6.13672 13.1547 6.00459 12.8355 5.92898C12.7176 5.41471 12.4741 4.95056 12.1066 4.57903C11.5663 4.0327 10.8214 3.75081 9.9986 3.75081C9.18143 3.75081 8.43641 4.02397 7.89429 4.57032C7.51798 4.94955 7.27357 5.42597 7.1595 5.95509ZM8.73903 8.75052C8.74653 8.75052 8.754 8.75062 8.76145 8.75081H11.2209C11.2283 8.75062 11.2358 8.75052 11.2433 8.75052H11.7852C12.241 8.75052 12.5485 8.65969 12.7157 8.54975C12.8354 8.47098 12.9153 8.37007 12.9153 8.13094C12.9153 7.844 12.8215 7.73679 12.7413 7.67608C12.6285 7.59064 12.4177 7.51441 12.1037 7.51148L12.0849 7.51169C11.6247 7.51169 11.2516 7.13859 11.2516 6.67836C11.2516 6.24477 11.1107 5.94219 10.9216 5.75103C10.7338 5.56108 10.4355 5.41748 9.9986 5.41748C9.55609 5.41748 9.26072 5.55947 9.07736 5.74425C8.89451 5.92852 8.75297 6.22612 8.75116 6.6697L8.7512 6.67806C8.7512 6.73474 8.74554 6.7901 8.73475 6.84361C8.65809 7.22469 8.32146 7.51169 7.91781 7.51169L7.90041 7.51151C7.34512 7.51902 7.08203 7.88433 7.08203 8.13094C7.08203 8.37251 7.1625 8.47307 7.27999 8.55068C7.44495 8.65966 7.75005 8.75052 8.20591 8.75052H8.73903Z" fill="#131D3A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.94915 1.91213C3.03015 1.52628 3.37046 1.25 3.76471 1.25H16.2573C16.6523 1.25 16.993 1.52729 17.0732 1.91404L19.1462 11.9058C19.1588 11.9632 19.1654 12.0229 19.1654 12.0841V17.5008C19.1654 17.9611 18.7923 18.3341 18.332 18.3341H1.66536C1.20513 18.3341 0.832031 17.9611 0.832031 17.5008V12.0841C0.832031 12.0208 0.83909 11.9592 0.852463 11.8999L2.94915 1.91213ZM15.5791 2.91667L17.3082 11.2508H2.69172L4.44127 2.91667H15.5791ZM15.832 14.7925C15.832 15.3678 15.3657 15.8341 14.7904 15.8341C14.2151 15.8341 13.7487 15.3678 13.7487 14.7925C13.7487 14.2172 14.2151 13.7508 14.7904 13.7508C15.3657 13.7508 15.832 14.2172 15.832 14.7925Z" fill="#131D3A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

11
web/multinode/vue.config.js
View File

@ -29,5 +29,16 @@ module.exports = {
args[0].template = './index.html';
return args
});
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.use('babel-loader')
.loader('babel-loader')
.end()
.use('vue-svg-loader')
.loader('vue-svg-loader');
}
};