web/storagenode: notification markup
Change-Id: Ie1eacd9a0f8c27a2450705833bb248ffe78e9257
This commit is contained in:
NikolaiYurchenko
Nikolay Yurchenko
parent
ef8bc88328
commit
9f1de67f6f
@ -3,14 +3,26 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
|
<div class="container">
|
||||||
|
<SNOHeader/>
|
||||||
<router-view/>
|
<router-view/>
|
||||||
|
<SNOFooter/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Component, Vue } from 'vue-property-decorator';
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
@Component
|
import SNOFooter from '@/app/components/SNOFooter.vue';
|
||||||
|
import SNOHeader from '@/app/components/SNOHeader.vue';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
components: {
|
||||||
|
SNOHeader,
|
||||||
|
SNOFooter,
|
||||||
|
},
|
||||||
|
})
|
||||||
export default class App extends Vue {}
|
export default class App extends Vue {}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -21,6 +33,14 @@ export default class App extends Vue {}
|
|||||||
font-family: 'font_regular', sans-serif;
|
font-family: 'font_regular', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
background-color: #f4f6f9;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-display: swap;
|
font-display: swap;
|
||||||
font-family: 'font_regular';
|
font-family: 'font_regular';
|
||||||
|
|||||||
@ -13,10 +13,21 @@
|
|||||||
<RefreshIcon alt="refresh image"/>
|
<RefreshIcon alt="refresh image"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="header__content-holder__node-id-container">
|
<div class="header__content-holder__right-area">
|
||||||
<b class="header__content-holder__node-id-container__title">Node ID:</b>
|
<div class="header__content-holder__right-area__node-id-container">
|
||||||
<p class="header__content-holder__node-id-container__id">{{this.nodeId}}</p>
|
<b class="header__content-holder__right-area__node-id-container__title">Node ID:</b>
|
||||||
|
<p class="header__content-holder__right-area__node-id-container__id">{{this.nodeId}}</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="header__content-holder__right-area__bell-area" @click.stop="openNotificationPopup">
|
||||||
|
<BellIcon />
|
||||||
|
<span class="header__content-holder__right-area__bell-area__new-circle"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<NotificationsPopup
|
||||||
|
v-if="isNotificationPopupShown"
|
||||||
|
class="header__content-holder__right-area__bell-area__popup"
|
||||||
|
v-click-outside="closeNotificationPopup"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -24,6 +35,9 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Component, Vue } from 'vue-property-decorator';
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
|
import NotificationsPopup from '@/app/components/notifications/NotificationsPopup.vue';
|
||||||
|
|
||||||
|
import BellIcon from '@/../static/images/notifications/bell.svg';
|
||||||
import RefreshIcon from '@/../static/images/refresh.svg';
|
import RefreshIcon from '@/../static/images/refresh.svg';
|
||||||
import StorjIcon from '@/../static/images/storjIcon.svg';
|
import StorjIcon from '@/../static/images/storjIcon.svg';
|
||||||
|
|
||||||
@ -36,11 +50,23 @@ const {
|
|||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
components: {
|
components: {
|
||||||
|
NotificationsPopup,
|
||||||
StorjIcon,
|
StorjIcon,
|
||||||
RefreshIcon,
|
RefreshIcon,
|
||||||
|
BellIcon,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
export default class SNOHeader extends Vue {
|
export default class SNOHeader extends Vue {
|
||||||
|
public isNotificationPopupShown: boolean = false;
|
||||||
|
|
||||||
|
public openNotificationPopup(): void {
|
||||||
|
this.isNotificationPopupShown = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
public closeNotificationPopup(): void {
|
||||||
|
this.isNotificationPopupShown = false;
|
||||||
|
}
|
||||||
|
|
||||||
public async onRefresh(): Promise<void> {
|
public async onRefresh(): Promise<void> {
|
||||||
const selectedSatellite = this.$store.state.node.selectedSatellite.id;
|
const selectedSatellite = this.$store.state.node.selectedSatellite.id;
|
||||||
|
|
||||||
@ -71,6 +97,7 @@ export default class SNOHeader extends Vue {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&__logo-area {
|
&__logo-area {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -94,6 +121,11 @@ export default class SNOHeader extends Vue {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__right-area {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
|
||||||
&__node-id-container {
|
&__node-id-container {
|
||||||
color: #535f77;
|
color: #535f77;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
@ -103,6 +135,7 @@ export default class SNOHeader extends Vue {
|
|||||||
border: 1px solid #e8e8e8;
|
border: 1px solid #e8e8e8;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
margin-right: 30px;
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
min-width: 55px;
|
min-width: 55px;
|
||||||
@ -114,6 +147,35 @@ export default class SNOHeader extends Vue {
|
|||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__bell-area {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
width: 26px;
|
||||||
|
height: 32px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&__new-circle {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
display: inline-block;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #eb001b;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__popup {
|
||||||
|
position: absolute;
|
||||||
|
top: 105px;
|
||||||
|
right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,102 @@
|
|||||||
|
// Copyright (C) 2019 Storj Labs, Inc.
|
||||||
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="notification-popup-container">
|
||||||
|
<div class="notification-popup-container__header">
|
||||||
|
<p class="notification-popup-container__header__title">Notifications</p>
|
||||||
|
<router-link :to="notificationsPath">
|
||||||
|
<p class="notification-popup-container__header__link">See All</p>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="notification-popup-container__content"
|
||||||
|
:class="{'collapsed': true}"
|
||||||
|
v-if="true"
|
||||||
|
></div>
|
||||||
|
<div class="notification-popup-container__empty-state" v-if="true">
|
||||||
|
<img src="@/../static/images/notifications/EmptyState.png" alt="Empty state image">
|
||||||
|
<p class="notification-popup-container__empty-state__label">No notifications yet</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
|
import SNONotification from '@/app/components/notifications/SNONotification.vue';
|
||||||
|
|
||||||
|
import { RouteConfig } from '@/app/router';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
components: {
|
||||||
|
SNONotification,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
export default class NotificationsPopup extends Vue {
|
||||||
|
public readonly notificationsPath: string = RouteConfig.Notifications.path;
|
||||||
|
|
||||||
|
public get latestNotifications() {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.notification-popup-container {
|
||||||
|
position: relative;
|
||||||
|
width: 400px;
|
||||||
|
height: auto;
|
||||||
|
max-height: 376px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 27px 0 10px 0;
|
||||||
|
box-shadow: 0 7px 17px #e7ebee;
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
font-family: 'font_bold', sans-serif;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 36px;
|
||||||
|
color: #384b65;
|
||||||
|
margin-left: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__link {
|
||||||
|
font-family: 'font_regular', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #224ca5;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
height: 300px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__empty-state {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 46px 0;
|
||||||
|
|
||||||
|
&__label {
|
||||||
|
margin-top: 35px;
|
||||||
|
font-family: 'font_regular', sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1c2a3e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapsed {
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,148 @@
|
|||||||
|
// Copyright (C) 2019 Storj Labs, Inc.
|
||||||
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="notification-item">
|
||||||
|
<div class="row">
|
||||||
|
<div class="notification-item__new-indicator-container">
|
||||||
|
<span class="notification-item__new-indicator-container__circle"></span>
|
||||||
|
</div>
|
||||||
|
<div class="notification-item__icon-container">
|
||||||
|
<div class="icon" v-html="icon"></div>
|
||||||
|
</div>
|
||||||
|
<div class="notification-item__text-container">
|
||||||
|
<p
|
||||||
|
class="notification-item__text-container__message"
|
||||||
|
:class="{'small-font-size': isSmall}"
|
||||||
|
>
|
||||||
|
Software Update Required: Your node software version 0.12.1 is out of date.
|
||||||
|
</p>
|
||||||
|
<p class="notification-item__text-container__date" v-if="isSmall">1 hour ago</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="notification-item__date-container" v-if="!isSmall">
|
||||||
|
<p class="notification-item__date-container__date">1 hour ago</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
|
import { NotificationIcon } from '@/app/utils/notificationIcons';
|
||||||
|
|
||||||
|
@Component
|
||||||
|
export default class SNONotification extends Vue {
|
||||||
|
@Prop({default: () => ({})})
|
||||||
|
public notification: any;
|
||||||
|
@Prop({default: false})
|
||||||
|
public isSmall: boolean;
|
||||||
|
|
||||||
|
// TODO: move to notification entity.
|
||||||
|
public get icon(): string {
|
||||||
|
// switch (this.notification.type) {
|
||||||
|
// case 1:
|
||||||
|
// return NotificationIcon.FAIL;
|
||||||
|
// case 2:
|
||||||
|
// return NotificationIcon.DISQUALIFIED;
|
||||||
|
// case 3:
|
||||||
|
// return NotificationIcon.SOFTWARE_UPDATE;
|
||||||
|
// default:
|
||||||
|
// return NotificationIcon.INFO;
|
||||||
|
// }
|
||||||
|
return NotificationIcon.INFO;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.notification-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: white;
|
||||||
|
padding: 17px 24px 18px 15px;
|
||||||
|
width: calc(100% - 24px - 15px);
|
||||||
|
font-family: 'font_regular', sans-serif;
|
||||||
|
|
||||||
|
&__new-indicator-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-items: center;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
min-width: 6px;
|
||||||
|
min-height: 6px;
|
||||||
|
margin-right: 11px;
|
||||||
|
|
||||||
|
&__circle {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #2683ff;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__icon-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #f3f4f9;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
min-width: 40px;
|
||||||
|
min-height: 40px;
|
||||||
|
margin-right: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text-container {
|
||||||
|
|
||||||
|
&__message {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #535f77;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__date {
|
||||||
|
margin-top: 6px;
|
||||||
|
font-size: 9px;
|
||||||
|
color: #9ca1b2;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__date-container {
|
||||||
|
margin-left: 20px;
|
||||||
|
min-width: 60px;
|
||||||
|
|
||||||
|
&__date {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #586c86;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unread {
|
||||||
|
background-color: #f9fafd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-font-size {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -6,11 +6,13 @@ import Router from 'vue-router';
|
|||||||
|
|
||||||
import { NavigationLink } from '@/app/types/navigation';
|
import { NavigationLink } from '@/app/types/navigation';
|
||||||
import DashboardArea from '@/app/views/DashboardArea.vue';
|
import DashboardArea from '@/app/views/DashboardArea.vue';
|
||||||
|
import NotificationsArea from '@/app/views/NotificationsArea.vue';
|
||||||
|
|
||||||
Vue.use(Router);
|
Vue.use(Router);
|
||||||
|
|
||||||
export abstract class RouteConfig {
|
export abstract class RouteConfig {
|
||||||
public static Root = new NavigationLink('', 'Root');
|
public static Root = new NavigationLink('', 'Root');
|
||||||
|
public static Notifications = new NavigationLink('/notifications', 'Notifications');
|
||||||
}
|
}
|
||||||
|
|
||||||
const router = new Router({
|
const router = new Router({
|
||||||
@ -21,6 +23,11 @@ const router = new Router({
|
|||||||
name: RouteConfig.Root.name,
|
name: RouteConfig.Root.name,
|
||||||
component: DashboardArea
|
component: DashboardArea
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: RouteConfig.Notifications.path,
|
||||||
|
name: RouteConfig.Notifications.name,
|
||||||
|
component: NotificationsArea
|
||||||
|
},
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
20
web/storagenode/src/app/utils/notificationIcons.ts
Normal file
20
web/storagenode/src/app/utils/notificationIcons.ts
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
// Copyright (C) 2019 Storj Labs, Inc.
|
||||||
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
|
export class NotificationIcon {
|
||||||
|
public static readonly SOFTWARE_UPDATE: string = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M1.77228 9.83486C1.91418 10.3214 2.11111 10.7905 2.36016 11.2307L1.65065 12.1255C1.41898 12.418 1.44504 12.835 1.70568 13.0986L2.92776 14.3207C3.19129 14.5842 3.6083 14.6073 3.90079 14.3757L4.78984 13.6719C5.2474 13.9355 5.73392 14.1411 6.24071 14.2859L6.37392 15.4298C6.41736 15.8005 6.73012 16.0785 7.1008 16.0785H8.82967C9.20035 16.0785 9.51311 15.8004 9.55655 15.4298L9.68397 14.3264C10.2284 14.1845 10.7497 13.9731 11.2391 13.698L12.0992 14.3786C12.3917 14.6102 12.8087 14.5842 13.0722 14.3235L14.2943 13.1014C14.5578 12.8379 14.581 12.4209 14.3493 12.1284L13.6804 11.2799C13.9584 10.7991 14.1756 10.2866 14.3204 9.75085L15.3513 9.63212C15.722 9.58868 16 9.27592 16 8.90524V7.17636C16 6.80569 15.722 6.49292 15.3513 6.44949L14.3348 6.33075C14.1958 5.8008 13.9873 5.29401 13.7209 4.81908L14.3464 4.02849C14.5781 3.736 14.5521 3.31898 14.2914 3.05545L13.0722 1.83626C12.8087 1.57273 12.3917 1.54957 12.0992 1.78124L11.3318 2.38939C10.8337 2.0969 10.3008 1.87391 9.74192 1.72332L9.62608 0.730018C9.58264 0.359339 9.26988 0.0813293 8.8992 0.0813293H7.17033C6.79965 0.0813293 6.48689 0.359339 6.44345 0.730018L6.32761 1.72332C5.75422 1.87681 5.20689 2.10848 4.6972 2.41256L3.90082 1.78124C3.60833 1.54957 3.19132 1.57563 2.92779 1.83626L1.7057 3.05835C1.44217 3.32188 1.41901 3.73889 1.65068 4.03138L2.31675 4.8741C2.05032 5.35482 1.8476 5.8674 1.71439 6.40025L0.648689 6.52188C0.27801 6.56532 0 6.87808 0 7.24876V8.97764C0 9.34832 0.27801 9.66107 0.648689 9.70451L1.77228 9.83486ZM8.03618 5.15793C9.61157 5.15793 10.8945 6.44083 10.8945 8.01621C10.8945 9.5916 9.61157 10.8745 8.03618 10.8745C6.46082 10.8745 5.1779 9.5916 5.1779 8.01621C5.1779 6.44083 6.4608 5.15793 8.03618 5.15793Z" fill="#535F77"/>
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
public static readonly DISQUALIFIED: string = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M15.6625 12.9324C15.441 12.5231 15.2181 12.1132 14.996 11.7019C14.5825 10.939 14.1698 10.1761 13.7571 9.41319C13.2614 8.49914 12.7671 7.58367 12.2721 6.66963C11.7939 5.78722 11.3172 4.90619 10.8391 4.02453C10.4875 3.37625 10.1374 2.72727 9.78581 2.07837C9.69089 1.90259 9.59596 1.72682 9.50105 1.55243C9.40261 1.36962 9.29855 1.19384 9.14949 1.04478C8.62918 0.520942 7.76574 0.420394 7.13997 0.816268C6.87137 0.986424 6.67732 1.2276 6.52826 1.50392C6.29975 1.92581 6.07122 2.34767 5.84271 2.77096C5.42646 3.54087 5.00951 4.31081 4.59326 5.08072C4.09192 5.99971 3.59482 6.92086 3.0956 7.84192C2.6231 8.71521 2.1499 9.58707 1.6767 10.4611C1.33076 11.1009 0.984114 11.7394 0.637488 12.3792C0.546082 12.5479 0.45468 12.7167 0.363276 12.8854C0.235307 13.1231 0.134766 13.3635 0.103122 13.6378C0.013826 14.4126 0.556632 15.1762 1.30687 15.3661C1.50516 15.4167 1.70062 15.4188 1.90102 15.4188H14.276H14.2957C14.7035 15.4104 15.0902 15.2571 15.3891 14.9793C15.6773 14.7122 15.8461 14.3465 15.8939 13.9598C15.9396 13.5956 15.8341 13.2511 15.6626 12.9325L15.6625 12.9324ZM7.29666 5.27876C7.29666 4.88501 7.6187 4.59321 7.99978 4.57564C8.37947 4.55806 8.70289 4.91174 8.70289 5.27876V10.2302C8.70289 10.6239 8.38085 10.9157 7.99978 10.9333C7.62008 10.9509 7.29666 10.5972 7.29666 10.2302V5.27876ZM7.99978 13.3282C7.60462 13.3282 7.28399 13.0083 7.28399 12.6124C7.28399 12.2172 7.6039 11.8966 7.99978 11.8966C8.39493 11.8966 8.71556 12.2165 8.71556 12.6124C8.71556 13.0075 8.39495 13.3282 7.99978 13.3282Z" fill="#535F77"/>
|
||||||
|
</svg>`;
|
||||||
|
public static readonly FAIL: string = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path class="close-cross-svg-path" d="M15.7071 1.70711C16.0976 1.31658 16.0976 0.683417 15.7071 0.292893C15.3166 -0.0976311 14.6834 -0.0976311 14.2929 0.292893L15.7071 1.70711ZM0.292893 14.2929C-0.0976311 14.6834 -0.0976311 15.3166 0.292893 15.7071C0.683417 16.0976 1.31658 16.0976 1.70711 15.7071L0.292893 14.2929ZM1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L14.2929 15.7071ZM14.2929 0.292893L0.292893 14.2929L1.70711 15.7071L15.7071 1.70711L14.2929 0.292893ZM0.292893 1.70711L14.2929 15.7071L15.7071 14.2929L1.70711 0.292893L0.292893 1.70711Z" fill="#384B65"/>
|
||||||
|
</svg>
|
||||||
|
`;
|
||||||
|
|
||||||
|
public static readonly INFO: string = `<svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09394 2.14899C3.66843 2.80225 1.87523 5.10849 1.87523 7.85462V11.7819C1.87523 12.1437 1.59447 12.4364 1.25145 12.4364C0.560552 12.4364 0.000244141 13.0245 0.000244141 13.7455C0.000244141 14.469 0.560552 15.0546 1.25389 15.0546H13.7466C14.4387 15.0546 15.0002 14.4665 15.0002 13.7455C15.0002 13.0219 14.4375 12.4364 13.749 12.4364C13.4048 12.4364 13.1253 12.1449 13.1253 11.7819V7.85462C13.1253 5.1099 11.3333 2.80353 8.90655 2.14899V1.47272C8.90655 0.657093 8.27668 0 7.50031 0C6.72516 0 6.09407 0.659646 6.09407 1.47272L6.09394 2.14899ZM5.3127 15.7091H9.68766C9.68766 16.9747 8.70867 18 7.50018 18C6.29169 18 5.3127 16.9747 5.3127 15.7091Z" fill="#535F77"/>
|
||||||
|
</svg>`;
|
||||||
|
}
|
||||||
@ -2,14 +2,10 @@
|
|||||||
// See LICENSE for copying information.
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="page">
|
|
||||||
<SNOHeader/>
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<SNOContentTitle/>
|
<SNOContentTitle/>
|
||||||
<SNOContentFilling/>
|
<SNOContentFilling/>
|
||||||
</div>
|
</div>
|
||||||
<SNOFooter/>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@ -17,8 +13,6 @@ import { Component, Vue } from 'vue-property-decorator';
|
|||||||
|
|
||||||
import SNOContentFilling from '@/app/components/SNOContentFilling.vue';
|
import SNOContentFilling from '@/app/components/SNOContentFilling.vue';
|
||||||
import SNOContentTitle from '@/app/components/SNOContentTitle.vue';
|
import SNOContentTitle from '@/app/components/SNOContentTitle.vue';
|
||||||
import SNOFooter from '@/app/components/SNOFooter.vue';
|
|
||||||
import SNOHeader from '@/app/components/SNOHeader.vue';
|
|
||||||
|
|
||||||
import { NODE_ACTIONS } from '@/app/store/modules/node';
|
import { NODE_ACTIONS } from '@/app/store/modules/node';
|
||||||
|
|
||||||
@ -29,10 +23,8 @@ const {
|
|||||||
|
|
||||||
@Component ({
|
@Component ({
|
||||||
components: {
|
components: {
|
||||||
SNOHeader,
|
|
||||||
SNOContentTitle,
|
SNOContentTitle,
|
||||||
SNOContentFilling,
|
SNOContentFilling,
|
||||||
SNOFooter,
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
export default class Dashboard extends Vue {
|
export default class Dashboard extends Vue {
|
||||||
@ -44,14 +36,6 @@ export default class Dashboard extends Vue {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.page {
|
|
||||||
background-color: #f4f6f9;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 822px;
|
width: 822px;
|
||||||
padding-top: 28px;
|
padding-top: 28px;
|
||||||
|
|||||||
157
web/storagenode/src/app/views/NotificationsArea.vue
Normal file
157
web/storagenode/src/app/views/NotificationsArea.vue
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
// Copyright (C) 2019 Storj Labs, Inc.
|
||||||
|
// See LICENSE for copying information.
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="notifications-container">
|
||||||
|
<div class="notifications-container__header">
|
||||||
|
<div class="notifications-container__header__left-area">
|
||||||
|
<router-link :to="'/'" class="notifications-container__header__back-link">
|
||||||
|
<BackArrowIcon />
|
||||||
|
</router-link>
|
||||||
|
<p class="notifications-container__header__text">Notifications</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="notifications-container__header__button"
|
||||||
|
:class="{ 'disabled': isMarkAsReadPressed }"
|
||||||
|
@click="markAsRead"
|
||||||
|
>
|
||||||
|
<p class="notifications-container__header__button__label">Mark all as read</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="notifications-container__content-area" v-if="false">
|
||||||
|
<!-- <SNONotification class="notification"/>-->
|
||||||
|
</div>
|
||||||
|
<div class="notifications-container__empty-state" v-else>
|
||||||
|
<img src="@/../static/images/notifications/EmptyState.png" alt="Empty state image">
|
||||||
|
<p class="notifications-container__empty-state__label">No notifications yet</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
|
|
||||||
|
import SNONotification from '@/app/components/notifications/SNONotification.vue';
|
||||||
|
|
||||||
|
import BackArrowIcon from '@/../static/images/notifications/backArrow.svg';
|
||||||
|
|
||||||
|
@Component ({
|
||||||
|
components: {
|
||||||
|
SNONotification,
|
||||||
|
BackArrowIcon,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
export default class NotificationsArea extends Vue {
|
||||||
|
public isMarkAsReadPressed: boolean = false;
|
||||||
|
|
||||||
|
public markAsRead(): void {
|
||||||
|
this.isMarkAsReadPressed = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.notifications-container {
|
||||||
|
width: 822px;
|
||||||
|
height: calc(100vh - 89px - 89px);
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 17px;
|
||||||
|
|
||||||
|
&__left-area {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__back-link {
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
font-family: 'font_bold', sans-serif;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 57px;
|
||||||
|
color: #535f77;
|
||||||
|
margin-left: 29px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__button {
|
||||||
|
width: 140px;
|
||||||
|
height: 35px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border: 1px solid #c3cad8;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
&__label {
|
||||||
|
font-family: 'font_regular', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #535f77;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid white;
|
||||||
|
background-color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content-area {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: 62vh;
|
||||||
|
background-color: #f3f4f9;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__empty-state {
|
||||||
|
height: 62vh;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&__label {
|
||||||
|
margin-top: 35px;
|
||||||
|
font-family: 'font_regular', sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #1c2a3e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification {
|
||||||
|
margin-bottom: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background-color: #e8eaf2;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
.notifications-container__header__button__svg path {
|
||||||
|
fill: #979ba7 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notifications-container__header__button__label {
|
||||||
|
color: #979ba7 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
web/storagenode/static/images/notifications/EmptyState.png
Normal file
BIN
web/storagenode/static/images/notifications/EmptyState.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5607 0.43934C11.1464 1.02513 11.1464 1.97487 10.5607 2.56066L5.12132 8H17.5C18.3284 8 19 8.67157 19 9.5C19 10.3284 18.3284 11 17.5 11H5.12132L10.5607 16.4393C11.1464 17.0251 11.1464 17.9749 10.5607 18.5607C9.97487 19.1464 9.02513 19.1464 8.43934 18.5607L0.43934 10.5607C-0.146447 9.97487 -0.146447 9.02513 0.43934 8.43934L8.43934 0.43934C9.02513 -0.146447 9.97487 -0.146447 10.5607 0.43934Z" fill="#384B65"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 569 B |
3
web/storagenode/static/images/notifications/bell.svg
Normal file
3
web/storagenode/static/images/notifications/bell.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.1999 2.6265C5.09522 3.42494 2.7999 6.2437 2.7999 9.6001V14.4001C2.7999 14.8423 2.44053 15.2001 2.00146 15.2001C1.1171 15.2001 0.399902 15.9189 0.399902 16.8001C0.399902 17.6845 1.1171 18.4001 2.00458 18.4001H17.9954C18.8813 18.4001 19.6001 17.6813 19.6001 16.8001C19.6001 15.9157 18.8797 15.2001 17.9985 15.2001C17.5579 15.2001 17.2001 14.8438 17.2001 14.4001V9.6001C17.2001 6.24542 14.9063 3.4265 11.8001 2.6265V1.79994C11.8001 0.803059 10.9938 -6.10352e-05 10.0001 -6.10352e-05C9.00786 -6.10352e-05 8.20006 0.806179 8.20006 1.79994L8.1999 2.6265ZM7.1999 19.2001H12.7999C12.7999 20.747 11.5468 22.0001 9.9999 22.0001C8.45302 22.0001 7.1999 20.747 7.1999 19.2001Z" fill="#354049"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 841 B |
Loading…
Reference in New Issue
Block a user