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_VIEW_ROUTE,
} from '../../../helpers/constants/routes';
import Button from '../../../components/ui/button';
import EditContact from './edit-contact';
import AddContact from './add-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() {
const {
viewingContact,
@ -106,10 +126,13 @@ export default class ContactListTab extends Component {
}
render() {
const { addingContact, addressBook } = this.props;
return (
<div className="address-book-wrapper">
{this.renderAddressBookContent()}
{this.renderContactContent()}
{!addingContact && addressBook.length > 0 && this.renderAddButton()}
</div>
);
}

@ -250,23 +250,14 @@
.address-book-add-button {
&__button {
position: absolute;
top: 80px;
top: 85px;
right: 16px;
height: 56px;
width: 56px;
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);
width: auto;
border-radius: 100px;
@media screen and (max-width: 576px) {
top: 10px;
top: 16px;
right: 60px;
}
}
}

Loading…
Cancel
Save