Improve UX in URL attachment dialog

src/assets/css/attachments.css

@@ -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;
 }
 

src/components/header/AttachUrl.js

@@ -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) => {
@@ -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'),
@@ -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)
@@ -100,7 +93,6 @@ class AttachUrl extends Component {
                                 <input
                                     className="attachurl-input"
                                     type="url"
-                                    onBlur={this.handleBlurUrl}
                                     onChange={this.handleChangeUrl}
                                     value={url}
                                 />
@@ -116,7 +108,7 @@ class AttachUrl extends Component {
                                     type="text"
                                     onBlur={this.handleBlurName}
                                     onChange={this.handleChangeName}
-                                    value={name}
+                                    value={name || nameFromUrl}
                                 />
                             </div>
                         </div>

src/components/header/Attachments.js

@@ -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')}