Skip to content
This repository has been archived by the owner on Mar 23, 2023. It is now read-only.

feat: adapt the contacts page to new design #1007

Merged
merged 12 commits into from Jan 28, 2019
Merged

feat: adapt the contacts page to new design #1007

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
d1f9b11
feat: show contact balance on list layout
j-a-m-l Jan 21, 2019
6035920
feat: adapt the contacts page to the new style
j-a-m-l Jan 21, 2019
5c43038
Merge branch 'develop' into new-contacts-style
j-a-m-l Jan 24, 2019
5c82827
Merge branch 'develop' into new-contacts-style
alexbarnsley Jan 24, 2019
18972f5
refactor: increase padding
j-a-m-l Jan 24, 2019
ec732fe
fix: increase the font weight of the "i" badge on contact placeholder
j-a-m-l Jan 25, 2019
f2d5962
feat: show contact balance on list layout
j-a-m-l Jan 21, 2019
67ef1bb
feat: adapt the contacts page to the new style
j-a-m-l Jan 21, 2019
3ee5ff5
refactor: increase padding
j-a-m-l Jan 24, 2019
6d5051b
fix: increase the font weight of the "i" badge on contact placeholder
j-a-m-l Jan 25, 2019
9e77f8d
Merge branch 'new-contacts-style' of github.com:ArkEcosystem/desktop-…
j-a-m-l Jan 25, 2019
f3b5709
Merge branch 'develop' into new-contacts-style
luciorubeens Jan 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 0 additions & 11 deletions src/renderer/components/Wallet/WalletTable.vue
View file
Open in desktop
Expand Up @@ -119,10 +119,6 @@ export default {
},

props: {
isContactsTable: {
type: Boolean,
default: false
},
showVotedDelegates: {
type: Boolean,
default: false,
Expand Down Expand Up @@ -166,13 +162,6 @@ export default {
}
]

if (this.isContactsTable) {
const index = columns.findIndex(el => {
return el.field === 'balance'
})
columns.splice(index, 1)
}

if (!this.showVotedDelegates) {
const index = columns.findIndex(el => {
return el.field === this.delegateName
Expand Down
1 change: 1 addition & 0 deletions src/renderer/i18n/locales/en-US.js
View file
Open in desktop
Expand Up @@ -420,6 +420,7 @@ export default {
CREATE_CONTACT: 'Create contact',
IMPORT_CONTACT: 'Import contact',
DELETE_CONTACT: 'Delete this contact',
INSTRUCTIONS: 'This page allows you to create contacts, making it easier for you to work with addresses by giving them an identifiable name',
HEADER: 'My contacts',
SHOW_CONTACT: 'Show contact'
},
Expand Down
88 changes: 44 additions & 44 deletions src/renderer/pages/Contact/ContactAll.vue
View file
Open in desktop
@@ -1,27 +1,46 @@
<template>
<div class="ContactAll relative bg-theme-feature rounded-lg m-r-4 p-10">
<div class="block h-full">
<div class="ContactAll__header">
<h3>{{ $t('PAGES.CONTACT_ALL.HEADER') }}</h3>

<div class="flex items-center">
<button
v-if="!hasWalletGridLayout"
class="ContactAll__CreateButton"
@click="createContact"
>
<span class="ContactAll__CreateButton__icon">
<SvgIcon
name="plus"
view-box="0 0 9 9"
class="text-center"
/>
</span>

<span class="flex items-center h-10 px-4">
{{ $t('PAGES.CONTACT_ALL.CREATE_CONTACT') }}
</span>
</button>
<div class="ContactAll flex flex-col">
<div class="ContactAll__header flex flex-row space-between bg-theme-feature rounded-lg px-10 py-2 mb-3">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we change this to py-5 instead of py-2, I think the identicon looks a little close to the edge:

py-2:
image

py-5:
image

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've changed it. I was feeling the same way, but I tried to follow the original design.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@olejegcord could you confirm this change?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please make "I" more bold 2-3 times.
"py-5" - ok =)

<div>
<WalletIdenticonPlaceholder
:size="60"
class="identicon opacity-50"
/>
<span
class="rounded-full flex items-center justify-center absolute ml-8 -mt-8 w-8 h-8 bg-theme-feature text-theme-page-text-light"
>
i
</span>
</div>

<div class="ml-8 p-2 hidden md:flex">
{{ $t('PAGES.CONTACT_ALL.INSTRUCTIONS') }}
</div>

<button
class="ContactAll__CreateButton justify-end"
@click="createContact"
>
<span class="ContactAll__CreateButton__icon">
<SvgIcon
name="plus"
view-box="0 0 9 9"
class="text-center"
/>
</span>

<span class="flex items-center h-10 px-4 whitespace-no-wrap">
{{ $t('PAGES.CONTACT_ALL.CREATE_CONTACT') }}
</span>
</button>
</div>

<div class="flex flex-1 flex-col bg-theme-feature rounded-lg p-10">
<div class="block w-full">
<div class="flex items-center justify-between h-8">
<h3 class=" items-center">
{{ $t('PAGES.CONTACT_ALL.HEADER') }}
</h3>

<ButtonLayout
:grid-layout="hasWalletGridLayout"
Expand All @@ -43,25 +62,6 @@
v-if="hasWalletGridLayout && !isLoading"
>
<div class="ContactAll__grid mt-10 justify-center">
<div class="ContactAll__grid__contact w-full overflow-hidden bg-theme-feature lg:bg-transparent rounded-lg border-theme-wallet-overview-border border-b border-r mb-3">
<div class="flex flex-row items-center">
<RouterLink :to="{ name: 'contact-new' }">
<WalletIdenticonPlaceholder
:size="60"
class="identicon opacity-50"
/>
</RouterLink>
<div class="flex flex-col justify-center overflow-hidden pl-4 font-semibold">
<RouterLink :to="{ name: 'contact-new' }">
{{ $t('PAGES.CONTACT_ALL.CREATE_CONTACT') }}
</RouterLink>
<span class="font-bold mt-2 opacity-50 text-lg">
{{ formatter_networkCurrency(0, 2) }}
</span>
</div>
</div>
</div>

<div
v-for="contact in selectableContacts"
:key="contact.id"
Expand Down Expand Up @@ -256,7 +256,7 @@ export default {

<style lang="postcss" scoped>
.ContactAll__header {
@apply .flex .items-center .justify-between .h-8;
@apply .flex .items-center .justify-between;
}
.ContactAll__grid {
display: grid;
Expand All @@ -275,7 +275,7 @@ export default {
}
.ContactAll__CreateButton {
transition: all .1s ease-in;
@apply .flex .items-center .mx-auto .font-semibold .bg-theme-button .rounded .cursor-pointer .text-theme-option-button-text .mr-6;
@apply .flex .items-center .font-semibold .bg-theme-button .rounded .cursor-pointer .text-theme-button-text .ml-12;
}
.ContactAll__CreateButton:hover {
@apply .bg-blue .text-white;
Expand Down