Ensure method of adding contact when contacts exist (#10963)

feature/default_network_editable
David Walsh 4 years ago committed by GitHub
parent 7c602266cc
commit bc24d9e696
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 23
      ui/pages/settings/contact-list-tab/contact-list-tab.component.js
  2. 19
      ui/pages/settings/contact-list-tab/index.scss

@ -5,6 +5,7 @@ import {
CONTACT_ADD_ROUTE, CONTACT_ADD_ROUTE,
CONTACT_VIEW_ROUTE, CONTACT_VIEW_ROUTE,
} from '../../../helpers/constants/routes'; } from '../../../helpers/constants/routes';
import Button from '../../../components/ui/button';
import EditContact from './edit-contact'; import EditContact from './edit-contact';
import AddContact from './add-contact'; import AddContact from './add-contact';
import ViewContact from './view-contact'; import ViewContact from './view-contact';
@ -66,6 +67,25 @@ export default class ContactListTab extends Component {
); );
} }
renderAddButton() {
const { history } = this.props;
return (
<div className="address-book-add-button">
<Button
className="address-book-add-button__button"
type="secondary"
rounded
onClick={() => {
history.push(CONTACT_ADD_ROUTE);
}}
>
{this.context.t('addContact')}
</Button>
</div>
);
}
renderContactContent() { renderContactContent() {
const { const {
viewingContact, viewingContact,
@ -106,10 +126,13 @@ export default class ContactListTab extends Component {
} }
render() { render() {
const { addingContact, addressBook } = this.props;
return ( return (
<div className="address-book-wrapper"> <div className="address-book-wrapper">
{this.renderAddressBookContent()} {this.renderAddressBookContent()}
{this.renderContactContent()} {this.renderContactContent()}
{!addingContact && addressBook.length > 0 && this.renderAddButton()}
</div> </div>
); );
} }

@ -250,23 +250,14 @@
.address-book-add-button { .address-book-add-button {
&__button { &__button {
position: absolute; position: absolute;
top: 80px; top: 85px;
right: 16px; right: 16px;
height: 56px; width: auto;
width: 56px; border-radius: 100px;
border-radius: 18px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border-width: 1px;
background: $primary-blue;
margin-right: 5px;
cursor: pointer;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
@media screen and (max-width: 576px) { @media screen and (max-width: 576px) {
top: 10px; top: 16px;
right: 60px;
} }
} }
} }

Loading…
Cancel
Save