web/storagenode: node id copy
Change-Id: I07f19c2ff3d1771761b16f6adfea741b2eac01fc
This commit is contained in:
NickolaiYurchenko
Nikolay Yurchenko
parent
89dd0b475b
commit
52c651286a
@ -3,9 +3,12 @@
|
||||
|
||||
<template>
|
||||
<div class="title-area">
|
||||
<div class="title-area__node-id-container">
|
||||
<b class="title-area__node-id-container__title">Node ID:</b>
|
||||
<p class="title-area__node-id-container__id">{{ this.nodeId }}</p>
|
||||
<div class="title-area__node-id-container" v-clipboard="this.nodeId">
|
||||
<b class="title-area__node-id-container__title">Node ID</b>
|
||||
<div class="title-area__node-id-container__right-area">
|
||||
<p class="title-area__node-id-container__id">{{ this.nodeId }}</p>
|
||||
<CopyIcon />
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="title-area__title">Your Storage Node Stats</h1>
|
||||
<div class="title-area__info-container">
|
||||
@ -59,6 +62,8 @@ import { Component, Vue } from 'vue-property-decorator';
|
||||
|
||||
import VInfo from '@/app/components/VInfo.vue';
|
||||
|
||||
import CopyIcon from '@/../static/images/Copy.svg';
|
||||
|
||||
import { StatusOnline } from '@/app/store/modules/node';
|
||||
import { Duration, millisecondsInSecond, minutesInHour, secondsInHour, secondsInMinute } from '@/app/utils/duration';
|
||||
|
||||
@ -90,6 +95,7 @@ class NodeInfo {
|
||||
@Component ({
|
||||
components: {
|
||||
VInfo,
|
||||
CopyIcon,
|
||||
},
|
||||
})
|
||||
export default class SNOContentTitle extends Vue {
|
||||
@ -149,6 +155,13 @@ export default class SNOContentTitle extends Vue {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.svg {
|
||||
|
||||
path {
|
||||
fill: var(--node-id-copy-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
.title-area {
|
||||
font-family: 'font_regular', sans-serif;
|
||||
margin-bottom: 9px;
|
||||
@ -157,20 +170,41 @@ export default class SNOContentTitle extends Vue {
|
||||
color: var(--regular-text-color);
|
||||
height: 44px;
|
||||
padding: 14px;
|
||||
border: 1px solid #e8e8e8;
|
||||
border: 1px solid var(--node-id-border-color);
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
margin-right: 30px;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
min-width: 55px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&__id {
|
||||
margin-right: 20px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
&__right-area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--node-id-border-hover-color);
|
||||
color: var(--node-id-hover-text-color);
|
||||
|
||||
.svg {
|
||||
|
||||
path {
|
||||
fill: var(--node-id-border-hover-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@ -244,6 +278,7 @@ export default class SNOContentTitle extends Vue {
|
||||
&__node-id-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 0 20px 0;
|
||||
height: auto;
|
||||
|
||||
|
||||
@ -19,11 +19,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__content-holder__right-area">
|
||||
<div class="header__content-holder__right-area__node-id-container">
|
||||
<div class="header__content-holder__right-area__node-id-container" v-clipboard="this.nodeId">
|
||||
<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>
|
||||
<p class="header__content-holder__right-area__node-id-container__id">{{ this.nodeId }}</p>
|
||||
<CopyIcon />
|
||||
</div>
|
||||
<div class="options-button" @click="openOptionsDropdown" >
|
||||
<div class="options-button" @click="openOptionsDropdown">
|
||||
<SettingsIcon />
|
||||
</div>
|
||||
<OptionsDropdown
|
||||
@ -54,6 +55,7 @@ import { Component, Vue } from 'vue-property-decorator';
|
||||
import NotificationsPopup from '@/app/components/notifications/NotificationsPopup.vue';
|
||||
import OptionsDropdown from '@/app/components/OptionsDropdown.vue';
|
||||
|
||||
import CopyIcon from '@/../static/images/Copy.svg';
|
||||
import StorjIconWithoutText from '@/../static/images/LogoWithoutText.svg';
|
||||
import BellIcon from '@/../static/images/notifications/bell.svg';
|
||||
import RefreshIcon from '@/../static/images/refresh.svg';
|
||||
@ -81,6 +83,7 @@ const {
|
||||
RefreshIcon,
|
||||
BellIcon,
|
||||
StorjIconWithoutText,
|
||||
CopyIcon,
|
||||
},
|
||||
})
|
||||
export default class SNOHeader extends Vue {
|
||||
@ -170,6 +173,34 @@ export default class SNOHeader extends Vue {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.svg {
|
||||
|
||||
path {
|
||||
fill: var(--node-id-copy-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
.storj-logo {
|
||||
|
||||
path {
|
||||
fill: var(--icon-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-icon {
|
||||
|
||||
circle {
|
||||
fill: var(--regular-icon-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.notifications-bell-icon {
|
||||
|
||||
path {
|
||||
fill: var(--regular-icon-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0 36px;
|
||||
width: calc(100% - 72px);
|
||||
@ -233,23 +264,38 @@ export default class SNOHeader extends Vue {
|
||||
justify-content: flex-end;
|
||||
|
||||
&__node-id-container {
|
||||
color: #535f77;
|
||||
color: var(--node-id-text-color);
|
||||
height: 44px;
|
||||
padding: 0 14px 0 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #e8e8e8;
|
||||
border: 1px solid var(--node-id-border-color);
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
&__title {
|
||||
font-family: 'font_bold', sans-serif;
|
||||
min-width: 55px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&__id {
|
||||
font-size: 11px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--node-id-border-hover-color);
|
||||
color: var(--node-id-hover-text-color);
|
||||
|
||||
.svg {
|
||||
|
||||
path {
|
||||
fill: var(--node-id-border-hover-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -284,27 +330,6 @@ export default class SNOHeader extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
.storj-logo {
|
||||
|
||||
path {
|
||||
fill: var(--icon-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-icon {
|
||||
|
||||
circle {
|
||||
fill: var(--regular-icon-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.notifications-bell-icon {
|
||||
|
||||
path {
|
||||
fill: var(--regular-icon-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.options-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -48,6 +48,11 @@
|
||||
--loading-screen-background-color: #e9ecf2;
|
||||
--loader-fill-color: #133e9c;
|
||||
--loader-logo-color: #929baf;
|
||||
--node-id-text-color: #535f77;
|
||||
--node-id-hover-text-color: #133e9c;
|
||||
--node-id-border-color: #e8e8e8;
|
||||
--node-id-border-hover-color: #133e9c;
|
||||
--node-id-copy-icon-color: #354049;
|
||||
--tooltip-background-path: url('../../static/images/tooltipBack.png');
|
||||
--tooltip-arrow-path: url('../../static/images/tooltipArrow.png');
|
||||
--info-image-arrow-middle-path: url('../../static/images/Message.png');
|
||||
@ -102,6 +107,11 @@
|
||||
--loading-screen-background-color: #1e1e26;
|
||||
--loader-fill-color: #4f97f7;
|
||||
--loader-logo-color: #414148;
|
||||
--node-id-text-color: #818493;
|
||||
--node-id-hover-text-color: white;
|
||||
--node-id-border-color: #818493;
|
||||
--node-id-border-hover-color: white;
|
||||
--node-id-copy-icon-color: #818493;
|
||||
--tooltip-background-path: url('../../static/images/tooltipBackDark.png');
|
||||
--tooltip-arrow-path: url('../../static/images/tooltipArrowDark.png');
|
||||
--info-image-arrow-middle-path: url('../../static/images/MessageDark.png');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user