Skip to content

Commit 9aa9036

Browse files
gesseekurgesseekur
committedAug 3, 2020
Update copy helper,badge, banner, popup, button, notification, input
1 parent b183863 commit 9aa9036

File tree

19 files changed

+252
-120
lines changed

19 files changed

+252
-120
lines changed
 

‎.storybook/preview.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ addParameters({
4848
{ name: 'white', value: '#fff' },
4949
{ name: 'dark-blue', value: '#184f90' },
5050
{ name: 'dark mode', value: '#151a29'},
51-
{ name: 'light-green', value: '#cdf4ee'}
51+
{ name: 'light-green', value: '#f5fdfb'}
5252
],
5353
docs: {
5454
inlineStories: true,

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@myetherwallet/mew-components",
3-
"version": "0.5.1-beta",
3+
"version": "0.5.2-beta",
44
"description": "MEW Components",
55
"main": "dist/mew-components.umd.js",
66
"module": "dist/mew-components.esm.js",

‎src/components/AddressSelect/AddressSelect.vue

+14-22
Original file line numberDiff line numberDiff line change
@@ -34,22 +34,11 @@
3434

3535
<template v-slot:append>
3636
<div class="icon-container d-flex align-center">
37-
<v-tooltip
38-
content-class="tooltip-inner"
39-
color="titlePrimary--text"
40-
top
41-
>
42-
<template v-slot:activator="{ on }">
43-
<v-icon
44-
class="copy-icon mr-3 basic--text"
45-
v-on="on"
46-
@click="copyToClipboard"
47-
>
48-
mdi-content-copy
49-
</v-icon>
50-
</template>
51-
<span>{{ copyTooltip }}</span>
52-
</v-tooltip>
37+
<copy
38+
:tooltip="copyTooltip"
39+
:copy-id="getRef()"
40+
:is-ref="true"
41+
/>
5342
<v-tooltip
5443
content-class="tooltip-inner"
5544
color="titlePrimary--text"
@@ -111,6 +100,8 @@
111100
<script>
112101
import Blockie from '@/components/Blockie/Blockie.vue';
113102
import Toast from '@/components/Toast/Toast.vue';
103+
import CopyIcon from '@/components/Copy/Copy.vue';
104+
import copy from '@/helpers/copy.js';
114105
115106
export default {
116107
name: 'AddressSelect',
@@ -190,7 +181,8 @@ export default {
190181
},
191182
components: {
192183
blockie: Blockie,
193-
toast: Toast
184+
toast: Toast,
185+
copy: CopyIcon
194186
},
195187
data() {
196188
return {
@@ -205,17 +197,17 @@ export default {
205197
}
206198
},
207199
methods: {
200+
getRef() {
201+
if (this.$refs.addressInput) {
202+
return this.$refs.addressInput.$el.querySelector('input')
203+
}
204+
},
208205
saveAddress() {
209206
this.$emit('saveAddress');
210207
},
211208
toggle() {
212209
this.autoSelectMenu = !this.autoSelectMenu;
213210
},
214-
copyToClipboard() {
215-
this.$refs.addressInput.$el.querySelector('input').select();
216-
document.execCommand('copy');
217-
this.$refs.toast.showToast();
218-
},
219211
selectAddress(data) {
220212
this.autoSelectMenu = false;
221213
this.addressValue = data.address;

‎src/components/Badge/Badge.vue

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div>
3+
<span :class="[getBadgeType(), 'text-center', 'white--text', 'px-3', 'py-1', 'badge-type', 'mew-caption']">{{ badgeTitle }}</span>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
data() {
10+
return {
11+
badgeTypes: {
12+
warning: 'warning'
13+
}
14+
}
15+
},
16+
props: {
17+
/**
18+
* Badge types: 'txIn', 'txOut', 'swap, 'error', 'warning'
19+
*/
20+
badgeType: {
21+
type: String,
22+
default: ''
23+
},
24+
/**
25+
* Badge title
26+
*/
27+
badgeTitle: {
28+
type: String,
29+
default: ''
30+
}
31+
},
32+
methods: {
33+
getBadgeType() {
34+
if (this.badgeType.toLowerCase() === this.badgeTypes.warning ) {
35+
return 'warning darken-2';
36+
}
37+
return this.badgeType;
38+
}
39+
}
40+
}
41+
</script>
42+
43+
44+
<style lang="scss" scoped>
45+
.badge-type {
46+
border-radius: 4px;
47+
}
48+
</style>

‎src/components/Copy/Copy.vue

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div>
3+
<v-tooltip
4+
content-class="tooltip-inner"
5+
color="titlePrimary--text"
6+
top
7+
>
8+
<template v-slot:activator="{ on }">
9+
<v-icon
10+
class="copy-icon mr-3 basic--text"
11+
v-on="on"
12+
@click="copyToClipboard"
13+
>
14+
mdi-content-copy
15+
</v-icon>
16+
</template>
17+
<span>{{ tooltip }}</span>
18+
</v-tooltip>
19+
<toast
20+
ref="toast"
21+
:duration="2000"
22+
toast-type="success"
23+
:text="successToast"
24+
/>
25+
</div>
26+
</template>
27+
28+
<script>
29+
import copy from '@/helpers/copy.js';
30+
import Toast from '@/components/Toast/Toast.vue';
31+
32+
export default {
33+
components: {
34+
'toast': Toast
35+
},
36+
props: {
37+
isRef: {
38+
type: Boolean,
39+
default: false
40+
},
41+
copyId: {
42+
type: [String, HTMLInputElement],
43+
default: ''
44+
},
45+
tooltip: {
46+
type: String,
47+
default: 'Copy'
48+
},
49+
successToast: {
50+
type: String,
51+
default: 'Copied!'
52+
}
53+
},
54+
methods: {
55+
copyToClipboard() {
56+
copy(this.copyId, this.isRef)
57+
this.$refs.toast.showToast();
58+
}
59+
}
60+
}
61+
</script>

‎src/components/MewBanner/MewBanner.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,8 @@ export default {
6868
background-size: cover;
6969
border-top-left-radius: 10px;
7070
border-top-right-radius: 10px;
71-
min-height: 190px;
71+
min-height: 150px;
72+
height: 100%;
7273
7374
.exit-container {
7475
text-align: right;

‎src/components/MewInput/MewInput.vue

+9-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
:disabled="disabled"
66
:label="label === '' || isSearch ? '' : label"
77
:placeholder="placeholder"
8-
outlined
8+
:outlined="!hasNoBorder"
9+
:solo="hasNoBorder"
910
color="titlePrimary"
1011
v-model="inputValue"
1112
:hint="hint"
@@ -21,6 +22,13 @@
2122
export default {
2223
name: 'MewInput',
2324
props: {
25+
/**
26+
* Disables the input.
27+
*/
28+
hasNoBorder: {
29+
type: Boolean,
30+
default: false
31+
},
2432
/**
2533
* Disables the input.
2634
*/

‎src/components/MewNotification/MewNotification.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -90,14 +90,14 @@
9090
</template>
9191

9292
<script>
93-
import TxBadge from '@/components/TxBadge/TxBadge.vue';
93+
import Badge from '@/components/Badge/Badge.vue';
9494
import Blockie from '@/components/Blockie/Blockie.vue';
9595
import TransformHash from '@/components/TransformHash/TransformHash.vue';
9696
9797
export default {
9898
name: 'MewNotification',
9999
components: {
100-
'tx-badge': TxBadge,
100+
'tx-badge': Badge,
101101
'blockie': Blockie,
102102
'transform-hash': TransformHash
103103
},

‎src/components/MewPopup/MewPopup.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888
>
8989
<span
9090
class="cursor-pointer primary--text text-decoration-underline"
91-
@click="copyToClipboard()"
91+
@click="copyToClipboard"
9292
>{{ copyMsg }}</span>
9393
</div>
9494
</div>
@@ -107,6 +107,7 @@
107107
<script>
108108
import mewButton from '@/components/MewButton/MewButton.vue';
109109
import Toast from '@/components/Toast/Toast.vue';
110+
import copy from '@/helpers/copy.js';
110111
111112
export default {
112113
components: {
@@ -224,8 +225,7 @@ export default {
224225
this.$emit('onClick', btn);
225226
},
226227
copyToClipboard() {
227-
this.$refs.errContainer.select();
228-
document.execCommand('copy');
228+
copy(this.$refs.errContainer, true);
229229
this.$refs.toast.showToast();
230230
},
231231
}

‎src/components/MewSuperButton/MewSuperButton.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<v-btn
33
@click="onBtnClick()"
4-
:class="[ getClasses() , 'mew-super-button','mew-button', isColumn ? '' : 'full-width mew-super-btn-row']"
4+
:class="[ getClasses() , 'mew-super-button','mew-button', isColumn ? 'full-height' : 'full-width mew-super-btn-row']"
55
:color="getColor()"
66
:outlined="colorTheme.toLowerCase() === colorThemes.outline"
77
:ripple="false"

‎src/components/MewTable/MewTable.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ export default {
205205
}
206206
},
207207
copyToClipboard(id) {
208-
copy(id);
208+
copy(id, false);
209209
this.$refs.toast.showToast();
210210
},
211211
onClick(item) {

‎src/components/Toast/Toast.vue

+45-42
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,49 @@
11
<template>
2-
<div>
3-
<v-bottom-sheet
4-
v-model="showsToast"
5-
:hide-overlay="true"
6-
:persistent="persistent"
2+
<v-bottom-sheet
3+
class="hello"
4+
v-model="showsToast"
5+
:hide-overlay="true"
6+
:persistent="persistent"
7+
>
8+
<v-sheet
9+
class="text-center"
10+
:tile="true"
11+
height="80"
12+
:color="toastType.toLowerCase() === toastTypes.info ? 'white' : toastType"
713
>
8-
<v-sheet
9-
class="text-center"
10-
:tile="true"
11-
height="80"
12-
:color="toastType.toLowerCase() === toastTypes.info ? 'white' : toastType"
13-
>
14-
<v-container fill-height>
15-
<v-row
16-
:class="['font-weight-medium', getRowClasses()]"
17-
justify="center"
18-
align="center"
19-
>
20-
<div>
21-
<v-icon
22-
v-if="toastTypes.info !== toastType.toLowerCase()"
23-
:color="toastTypes.warning === toastType.toLowerCase() ? 'warning darken-1' : 'white'"
24-
>
25-
{{ getIcon() }}
26-
</v-icon>
27-
{{ text }}
28-
<a
29-
@click="onClick"
30-
:class="getLinkClasses()"
31-
>{{ linkObj.title }}
32-
</a>
33-
<slot name="infoBtn" />
34-
</div>
14+
<v-container fill-height>
15+
<v-row
16+
:class="['font-weight-medium', getRowClasses()]"
17+
justify="center"
18+
align="center"
19+
>
20+
<div>
3521
<v-icon
36-
color="titlePrimary"
37-
v-if="canClose"
38-
class="close"
22+
v-if="toastTypes.info !== toastType.toLowerCase()"
23+
:color="toastTypes.warning === toastType.toLowerCase() ? 'warning darken-1' : 'white'"
3924
>
40-
mdi-close
25+
{{ getIcon() }}
4126
</v-icon>
42-
</v-row>
43-
</v-container>
44-
</v-sheet>
45-
</v-bottom-sheet>
46-
</div>
27+
{{ text }}
28+
<a
29+
@click="onClick"
30+
:class="getLinkClasses()"
31+
>{{ linkObj.title }}
32+
</a>
33+
<slot name="infoBtn" />
34+
</div>
35+
<v-icon
36+
@click="close"
37+
color="titlePrimary"
38+
v-if="canClose"
39+
class="close cursor-pointer"
40+
>
41+
mdi-close
42+
</v-icon>
43+
</v-row>
44+
</v-container>
45+
</v-sheet>
46+
</v-bottom-sheet>
4747
</template>
4848

4949
<script>
@@ -99,7 +99,7 @@ export default {
9999
default: false
100100
},
101101
/**
102-
* Clicking outside of the element will not deactivate it.
102+
* Clicking outside of the element will deactivate it.
103103
*/
104104
canClose: {
105105
type: Boolean,
@@ -110,6 +110,9 @@ export default {
110110
this.setTimer();
111111
},
112112
methods: {
113+
close() {
114+
this.showsToast = false;
115+
},
113116
onClick() {
114117
this.linkObj.url !== '' && this.linkObj.url ? window.open(this.linkObj.url) : this.$emit('onClick')
115118
},

‎src/components/TxBadge/TxBadge.vue

-33
This file was deleted.

‎src/helpers/copy.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
function copyToClipboard(id) {
1+
function copyToClipboard(ref, isRef) {
2+
isRef ? (ref.select(), document.execCommand('Copy')) : createTextarea(ref);
3+
}
4+
5+
function createTextarea(id) {
26
var copyText = document.getElementById(id);
37
var textArea = document.createElement('textarea');
48
textArea.value = copyText.textContent;

‎src/wrapper.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,13 @@ import MewTable from './components/MewTable/MewTable.vue';
2222
import MewToggleButton from './components/MewToggleButton/MewToggleButton.vue';
2323
import Toast from './components/Toast/Toast.vue';
2424
import TokenContainer from './components/TokenContainer/TokenContainer.vue';
25-
import TxBadge from './components/TxBadge/TxBadge.vue';
25+
import Badge from './components/Badge/Badge.vue';
2626
import MewNotification from './components/MewNotification/MewNotification.vue';
2727
import WarningSheet from './components/WarningSheet/WarningSheet.vue';
2828
import MewIcon from './components/MewIcon/MewIcon.vue';
2929
import MewChart from './components/MewChart/MewChart.vue';
3030
import TransformHash from './components/TransformHash/TransformHash.vue';
31+
import Copy from './components/Copy/Copy.vue';
3132

3233
// import Vue from 'vue';
3334
// import wrap from '@vue/web-component-wrapper';
@@ -57,7 +58,7 @@ const Components = {
5758
MewNotification,
5859
WarningSheet,
5960
AddressSelect,
60-
TxBadge,
61+
Badge,
6162
MewBanner,
6263
MewCarousel,
6364
MewProgressBar,
@@ -66,7 +67,8 @@ const Components = {
6667
TokenContainer,
6768
MewIcon,
6869
MewChart,
69-
TransformHash
70+
TransformHash,
71+
Copy
7072
}
7173

7274
// Declare install function executed by Vue.use()

‎stories/TxBadge/TxBadge.stories.js ‎stories/Badge/Badge.stories.js

+7-6
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import {
44
optionsKnob,
55
text
66
} from '@storybook/addon-knobs';
7-
import TxBadge from '@/components/TxBadge/TxBadge.vue';
7+
import Badge from '@/components/Badge/Badge.vue';
88

99
export default {
10-
title: 'TxBadge',
10+
title: 'Badge',
1111
parameters: {
12-
component: TxBadge
12+
component: Badge
1313
},
1414
decorators: [withKnobs]
1515
};
@@ -18,11 +18,12 @@ const badgeOptions = {
1818
in: 'txIn',
1919
out: 'txOut',
2020
swap: 'swap',
21-
error: 'error'
21+
error: 'error',
22+
warning: 'warning'
2223
}
2324

24-
export const txBadge = () => ({
25-
components: { 'badge': TxBadge },
25+
export const badge = () => ({
26+
components: { 'badge': Badge },
2627
props: {
2728
enableDarkMode: {
2829
default: boolean('dark mode ?', false)

‎stories/Copy/Copy.stories.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import {
2+
withKnobs,
3+
boolean,
4+
text
5+
} from '@storybook/addon-knobs';
6+
import Copy from '@/components/Copy/Copy.vue';
7+
8+
export default {
9+
title: 'Copy',
10+
parameters: {
11+
component: Copy
12+
},
13+
decorators: [withKnobs]
14+
};
15+
16+
export const copy = () => ({
17+
components: { 'copy': Copy },
18+
props: {
19+
enableDarkMode: {
20+
default: boolean('dark mode ?', false)
21+
},
22+
tooltip: {
23+
default: text('tooltip', 'Copy')
24+
}
25+
},
26+
watch: {
27+
enableDarkMode(newVal) {
28+
this.$vuetify.theme.dark = newVal === true ? true : false;
29+
}
30+
},
31+
template: `
32+
<div>
33+
<br />
34+
<copy
35+
:tooltip="tooltip"
36+
/>
37+
</div>`
38+
});

‎stories/MewInput/MewInput.stories.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ export const MEWInput = () => ({
1717
disabled: {
1818
default: boolean('disabled', false)
1919
},
20+
hasNoBorder: {
21+
default: boolean('has-no-border', false)
22+
},
2023
label: {
2124
default: text('label', 'label')
2225
},
@@ -56,7 +59,7 @@ export const MEWInput = () => ({
5659
template: `
5760
<div>
5861
<br />
59-
<mew-input :is-search="isSearch" :rules="rules" :has-clear-btn="hasClearBtn" :symbol="symbol" :right-label="rightLabel" :hint="hint" :disabled="disabled" :label="label" :placeholder="placeholder" :value="value"
62+
<mew-input :has-no-border="hasNoBorder" :is-search="isSearch" :rules="rules" :has-clear-btn="hasClearBtn" :symbol="symbol" :right-label="rightLabel" :hint="hint" :disabled="disabled" :label="label" :placeholder="placeholder" :value="value"
6063
/>
6164
</div>`
6265
});

‎stories/MewOverlay/MewOverlay.stories.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@ export const MEWOverlay = () => ({
5757
:warning-desc="warningDesc"
5858
:right-btn-text="rightBtnText"
5959
:left-btn-text="leftBtnText"
60-
/>
60+
>
61+
<template v-slot:mewOverlayBody>
62+
<span>Mew overlay body</span>
63+
</template>
64+
</mew-overlay>
6165
</div>`
6266
});

0 commit comments

Comments
 (0)
Please sign in to comment.