Skip to content

Commit 639ab2b

Browse files
PobeptoPobepto
committed
feat: updated design
1 parent 5a0bc96 commit 639ab2b

File tree

9 files changed

+266
-72
lines changed

9 files changed

+266
-72
lines changed

‎src/App.vue

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,41 @@ html {
5050
font-family: 'IBM Plex Sans', sans-serif !important;
5151
}
5252
53-
.app {
54-
display: flex;
55-
align-items: center;
56-
justify-content: center;
53+
#app {
54+
font-family: 'IBM Plex Sans', sans-serif !important;
55+
-webkit-font-smoothing: antialiased;
56+
-moz-osx-font-smoothing: grayscale;
5757
min-height: 100vh;
5858
}
5959
60+
a {
61+
color: black;
62+
transition: opacity .15s ease-in-out;
63+
cursor: pointer;
64+
text-decoration: none;
65+
}
66+
67+
a:hover {
68+
opacity: 0.8;
69+
}
70+
6071
.fullwidth {
6172
width: 100%;
6273
}
74+
75+
.el-tabs__item:hover,
76+
.el-tabs__item.is-active {
77+
color: #e43e33;
78+
}
79+
.el-tabs__active-bar {
80+
background-color: #e43e33;
81+
}
82+
.el-button--danger {
83+
background-color: #e43e33;
84+
border-color: #e43e33;
85+
}
86+
.el-tabs__item {
87+
padding: 13px 20px;
88+
height: 66px;
89+
}
6390
</style>

‎src/components/Dashboard.vue

Lines changed: 84 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
11
<template>
22
<el-container>
3-
<div @mouseenter.passive="isCollapsed = false" @mouseleave.passive="isCollapsed = true">
4-
<el-menu
3+
<el-aside width="270px" id="side-menu">
4+
<div class="title-info">
5+
<div>
6+
<p class="title">IROHA WALLET</p>
7+
</div>
8+
</div>
9+
<div class="menu-list">
10+
<el-menu
511
:router="true"
6-
:class="isCollapsed ? 'el-side-menu el-menu--collapse' : 'el-side-menu'"
712
:default-active="currentActiveMenu"
8-
>
9-
<h1 class="logo">IW</h1>
10-
<el-menu-item index="/dashboard/summary-page">
11-
<fa-icon icon="tachometer-alt" class="menu-icon" />
12-
<span slot="title">Dashboard</span>
13-
</el-menu-item>
14-
<el-menu-item index="/dashboard/wallets-page">
15-
<fa-icon icon="wallet" class="menu-icon" />
16-
<span slot="title">Wallets</span>
17-
</el-menu-item>
18-
<el-menu-item index="/logout" @click="onLogout">
19-
<fa-icon icon="sign-out-alt" class="menu-icon" />
20-
<span slot="title">Logout</span>
21-
</el-menu-item>
22-
</el-menu>
23-
</div>
24-
<el-main class="main" style="width: 100%; height: 100vh; padding: 0 0 0 62px;">
13+
>
14+
<el-menu-item index="/dashboard/summary-page">
15+
<span slot="title">Dashboard</span>
16+
</el-menu-item>
17+
<el-menu-item index="/dashboard/wallets-page">
18+
<span slot="title">Wallets</span>
19+
</el-menu-item>
20+
<el-menu-item index="/logout" @click="onLogout">
21+
<span slot="title">Logout</span>
22+
</el-menu-item>
23+
</el-menu>
24+
</div>
25+
</el-aside>
26+
<el-main id="main">
2527
<router-view />
2628
</el-main>
2729
</el-container>
@@ -65,4 +67,66 @@ export default {
6567
</script>
6668

6769
<style scoped>
70+
#side-menu {
71+
min-height: 100vh;
72+
background: white;
73+
display: flex;
74+
flex-direction: column;
75+
justify-content: space-between;
76+
position: fixed;
77+
border-right: 1px solid #eaeaea
78+
}
79+
80+
#main {
81+
padding: 0;
82+
margin-left: 270px;
83+
}
84+
85+
.title-info {
86+
display: flex;
87+
justify-content: center;
88+
font-weight: 600;
89+
padding: 1rem 0;
90+
border-bottom: 1px solid #e8e8e8;
91+
}
92+
93+
.menu-list {
94+
flex: 1;
95+
}
96+
97+
.menu-list >>> .el-menu {
98+
border-right: 0px
99+
}
100+
101+
.menu-list >>> .el-menu-item.is-active{
102+
background: #e43e33;
103+
color: rgb(255, 255, 255, 1);
104+
font-weight: 500;
105+
}
106+
107+
.menu-item {
108+
color: #00111f;
109+
display: block;
110+
padding: 1rem .5rem 1rem 1.5rem;
111+
}
112+
113+
.menu-item_text svg {
114+
margin-right: 0.5rem;
115+
width: 1rem;
116+
}
117+
.router-link-active > .menu-item_text {
118+
color: rgb(255, 255, 255, 1)
119+
}
120+
121+
.menu-item.router-link-active {
122+
background: #e43e33;
123+
color: white;
124+
font-weight: 500;
125+
pointer-events: none;
126+
}
127+
128+
a.menu-item:hover span {
129+
opacity: 1;
130+
color: #000000;
131+
}
68132
</style>

‎src/components/Login.vue

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<template>
2+
<div class="wrapper">
23
<div class="login-form-container">
34
<div class="logo">
45
<img id="logo" src="~@/assets/logo.svg" alt="Iroha">
@@ -55,6 +56,7 @@
5556
</el-form-item>
5657
</el-form>
5758
</div>
59+
</div>
5860
</template>
5961

6062
<script>
@@ -134,17 +136,24 @@ export default {
134136
</script>
135137

136138
<style scoped>
139+
.wrapper {
140+
display: flex;
141+
justify-content: center;
142+
min-height: 100vh;
143+
}
137144
.login-form-container {
138-
margin-top: -7rem;
145+
margin: auto;
139146
}
140147
.logo {
141148
display: flex;
142149
justify-content: center;
143150
}
144151
.logo img {
145152
width: 5rem;
153+
height: 5rem;
146154
}
147155
.login-form {
148156
width: 25rem;
157+
justify-content: center;
149158
}
150159
</style>

‎src/components/SummaryPage.vue

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,25 @@
11
<template>
22
<div class="summary-page">
3-
<el-row class="summary-page__row" type="flex" :gutter="15">
4-
<el-col :span="12">
5-
<el-card class="user-card">
6-
<div class="user-card__account-id">{{ accountId }}</div>
7-
8-
<div v-for="(value, key) in accountInfo" :key="key">
9-
{{ key }}: {{ value }}
10-
</div>
11-
</el-card>
3+
<el-row class="summary-page__row" type="flex">
4+
<el-col :span="10">
5+
<div v-if="accountId" class="user-card__account-id"><b>Account:</b> {{ accountId }}</div>
6+
<div v-else class="user-card__account-id"><b>Please auth!</b></div>
7+
<div v-for="(value, key) in accountInfo" :key="key">
8+
<b>{{ key }}:</b> {{ value }}
9+
</div>
1210
</el-col>
1311

14-
<el-col :span="12">
15-
<el-card class="wallet-card" v-loading="!isReady">
16-
<div v-for="wallet in wallets" :key="wallet.name">
17-
{{ wallet.name }} {{ wallet.amount }}
18-
</div>
19-
20-
<div v-if="wallets.length === 0">No assets</div>
21-
</el-card>
12+
<el-col :span="10">
13+
<div v-for="wallet in wallets" :key="wallet.name">
14+
<b>{{ wallet.name }}</b> {{ wallet.amount }}
15+
</div>
16+
<div v-if="wallets.length === 0"><b>No assets</b></div>
2217
</el-col>
2318
</el-row>
2419

2520
<el-row class="summary-page__row">
26-
<el-card>
21+
<el-card class="transactions-history">
22+
<b>Transactions history</b>
2723
<transactions currency :transactions="transactions" :loading="!isReady" />
2824
</el-card>
2925
</el-row>
@@ -73,4 +69,7 @@ export default {
7369
</script>
7470

7571
<style scoped>
72+
.summary-page__row {
73+
padding: 2rem;
74+
}
7675
</style>

‎src/components/Transactions.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<el-table-column prop="to" label="to" />
1010
<el-table-column prop="amount" label="amount" />
1111
<el-table-column v-if="currency" prop="currency" label="currency" />
12+
<el-table-column prop="message" label="message" />
1213
<el-table-column prop="date" label="date">
1314
<template slot-scope="scope">
1415
<span>{{ scope.row.date | formatDate }}</span>

‎src/components/TransferForm.vue

Lines changed: 52 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,61 @@
11
<template>
2+
<div class="wrapper">
23
<el-form
34
class="transfer-form"
45
ref="form"
56
:model="form"
67
:rules="rules"
78
label-width="6rem"
9+
label-position="top"
810
>
9-
<el-form-item label="TO:" prop="to">
11+
<el-form-item label="To:" prop="to">
1012
<el-input name="to" v-model="form.to" :disabled="loading" />
1113
</el-form-item>
1214

13-
<el-form-item label="AMOUNT:" prop="amount">
15+
<el-form-item label="Amount:" prop="amount">
1416
<el-input name="amount" v-model="form.amount" :disabled="loading" />
1517
</el-form-item>
1618

17-
<el-form-item label="MESSAGE:" prop="message">
19+
<el-form-item label="Message:" prop="message">
1820
<el-input name="message" v-model="form.message" type="textarea" :disabled="loading" />
1921
</el-form-item>
2022

23+
<el-form-item label="Private key:" prop="privateKey">
24+
<el-row type="flex" justify="space-between">
25+
<el-col :span="20">
26+
<el-input
27+
name="privateKey"
28+
v-model="form.privateKey"
29+
:disabled="isLoading"
30+
/>
31+
</el-col>
32+
<el-upload
33+
class="auth-form_upload"
34+
action=""
35+
:auto-upload="false"
36+
:show-file-list="false"
37+
:on-change="onFileChosen"
38+
:disabled="isLoading"
39+
>
40+
<el-button>
41+
<fa-icon icon="upload" />
42+
</el-button>
43+
</el-upload>
44+
</el-row>
45+
</el-form-item>
46+
2147
<el-form-item class="send-button-container">
2248
<el-button
23-
class="send-button"
24-
type="primary"
49+
class="send-button fullwidth"
50+
type="danger"
2551
@click="onSubmit"
2652
:loading="loading"
2753
>
2854
SEND
2955
</el-button>
3056
</el-form-item>
3157
</el-form>
58+
</div>
3259
</template>
3360

3461
<script>
@@ -67,6 +94,10 @@ export default {
6794
amount: [
6895
{ required: true, message: 'Please input "AMOUNT"', trigger: 'change' },
6996
{ pattern: amountRegexp, message: amountMessage, trigger: 'change' }
97+
],
98+
privateKey: [
99+
{ required: true, message: 'Please input "PRIVATE KEY"', trigger: 'change' },
100+
{ pattern: /^[A-Fa-f0-9]{64}$/, message: '"PRIVATE KEY" should match [A-Fa-f0-9]{64}', trigger: 'change' }
70101
]
71102
}
72103
}
@@ -91,10 +122,26 @@ export default {
91122
92123
clearValidationMessage () {
93124
this.$refs['form'].clearValidate()
125+
},
126+
127+
onFileChosen (file, fileList) {
128+
const reader = new FileReader()
129+
130+
reader.onload = (ev) => {
131+
this.form.privateKey = (ev.target.result || '').trim()
132+
}
133+
reader.readAsText(file.raw)
94134
}
95135
}
96136
}
97137
</script>
98138

99139
<style scoped>
140+
.wrapper {
141+
display: flex;
142+
justify-content: center;
143+
}
144+
.transfer-form {
145+
width: 25rem;
146+
}
100147
</style>

‎src/components/Wallet.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<template>
22
<div class="wallet">
3-
{{ wallet.name }} {{ wallet.amount }}
4-
53
<el-tabs class="wallet__tabs" v-model="activeTabName">
64
<el-tab-pane label="HISTORY" name="history">
75
<transactions :transactions="transactions" :loading="!isReady" />
@@ -87,6 +85,7 @@ export default {
8785
onSubmit () {
8886
this.isSending = true
8987
this.$store.dispatch('transferAsset', {
88+
privateKeys: [this.form.privateKey],
9089
assetId: this.wallet.name,
9190
to: this.form.to,
9291
amount: this.form.amount,
@@ -98,6 +97,8 @@ export default {
9897
type: 'success'
9998
})
10099
this.activeTabName = 'history'
100+
this.fetchTransactionsByWalletId(this.wallet.id)
101+
this.fetchWalletByWalletId(this.wallet.id)
101102
})
102103
.catch(err => {
103104
console.error(err)

0 commit comments

Comments
 (0)