Skip to content
This repository has been archived by the owner on Dec 13, 2020. It is now read-only.

Commit

Permalink
Merge pull request #1236 from metasfresh/dev-1220
Browse files Browse the repository at this point in the history
Improve UX in URL attachment dialog
  • Loading branch information
teosarca authored Oct 6, 2017
2 parents 1413c6f + 979696c commit 5face70
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 30 deletions.
28 changes: 27 additions & 1 deletion src/assets/css/attachments.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,36 @@
.subheader-attachurl {
cursor: pointer;
position: relative;
width: 100%;
display: block;
padding: .75rem 1.25rem;
text-decoration: none !important;
background-color: $brand-light-color;
color: $brand-font-color;
}

.subheader-attachurl:hover {
background-color: $brand-color-primary;
color: #fff;
}

.subheader-attachurl:focus {
background-color: $brand-color-primary;
color: #fff;
}

.subheader-attachurl i {
margin-right: 5px;
}

.panel-attachurl {
display: flex;
flex-direction: column;
justify-content: space-between;

/* create small window */
width: auto;
width: 50%;
min-width: 288px; /* 320px mobile * 90% */
height: auto;
}

Expand Down
48 changes: 20 additions & 28 deletions src/components/header/AttachUrl.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,38 +8,33 @@ class AttachUrl extends Component {
state = {
url: '',
name: '',
nameFromUrl: '',
}

getName = () => {
const { url } = this.state;

updateNameFromUrl = (url) => {
// generate name from URL by getting part after last / and before ? or #
// TODO: handle edge cases like URL with trailing slash
return url.split('/').pop().split('#')[0].split('?')[0];
this.setState({
// TODO: handle edge cases like URL with trailing slash
nameFromUrl: url.split('/').pop().split('#')[0].split('?')[0],
});
}

handleChangeName = ({ target: { value: name } }) => {
this.setState({ name });
}

handleBlurName = () => {
const { name } = this.state;
// generate name from URL if name is not set
const { name, url } = this.state;

if (!name) {
this.setState({ name: this.getName() });
this.updateNameFromUrl(url);
}
}

handleChangeUrl = ({ target: { value: url } }) => {
this.setState({ url });
}

handleBlurUrl = () => {
const { name } = this.state;

if (!name) {
this.setState({ name: this.getName() });
}
this.updateNameFromUrl(url);
}

handleClick = (event) => {
Expand All @@ -49,18 +44,16 @@ class AttachUrl extends Component {
const {
windowId, documentId, handleClose, dispatch, fetchAttachments,
} = this.props;
const { url, name } = this.state;

// TODO: Add translations for notifications
createUrlAttachment({ windowId, documentId, url, name }).then(() => {
const { url, name, nameFromUrl } = this.state;

createUrlAttachment({
windowId,
documentId,
url,
name: name || nameFromUrl,
}).then(() => {
handleClose(event);
fetchAttachments();

dispatch(addNotification(
counterpart.translate('window.attachment.url.title'),
counterpart.translate('window.attachment.url.success'),
5000, 'success',
));
}).catch(() => {
dispatch(addNotification(
counterpart.translate('window.attachment.url.title'),
Expand All @@ -72,7 +65,7 @@ class AttachUrl extends Component {

render() {
const { handleClose } = this.props;
const { url, name } = this.state;
const { url, name, nameFromUrl } = this.state;

// TODO: increase max-len or find another way to avoid this
// (following this rule here decreases this JSX' readability)
Expand Down Expand Up @@ -100,7 +93,6 @@ class AttachUrl extends Component {
<input
className="attachurl-input"
type="url"
onBlur={this.handleBlurUrl}
onChange={this.handleChangeUrl}
value={url}
/>
Expand All @@ -116,7 +108,7 @@ class AttachUrl extends Component {
type="text"
onBlur={this.handleBlurName}
onChange={this.handleChangeName}
value={name}
value={name || nameFromUrl}
/>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/header/Attachments.js
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ class Attachments extends Component {

return (
<div
className="subheader-item js-subheader-item"
className="subheader-attachurl"
onClick={this.handleClickAttachUrl}
>
{counterpart.translate('window.attachment.url.add')}
Expand Down

0 comments on commit 5face70

Please sign in to comment.