Changed editable-text interaction (#10)

* Changed editable-text interaction
- Use "edit" link instead of icon
- "edit" is visible for empty text values and on hover
- textarea appears flush with blackground
- textarea gets light gradient on de-focus
-  Change 'edit' to 'Add Description' when text is empty

amundsen_application/static/css/_popovers.scss

@@ -30,3 +30,37 @@
 .popover.left .arrow:after {
   border-left-color: $gray-darker;
 }
+
+.tooltip-inner {
+  padding: 0px;
+  border-radius: 3px;
+  background-color: $gray-darker;
+}
+
+.tooltip-inner button {
+  height: 36px;
+  width: 96px;
+  font-size: 14px;
+  border-radius: 3px;
+  border: none;
+  background-color: $gray-darker;
+  color: $body-bg;
+  font-family: $font-family-sans-serif-bold;
+  font-weight: $font-weight-sans-serif-bold;
+  outline: none;
+}
+.tooltip-inner button:hover {
+  color: $gray-light;
+}
+
+.error-tooltip {
+    display: flex;
+    padding: 5px;
+}
+.error-tooltip button {
+  height: 24px;
+  width: 24px;
+  font-size: 16px;
+  margin: auto;
+  font-family: 'Glyphicons Halflings';
+}

amundsen_application/static/js/components/common/EditableText/index.tsx

@@ -32,7 +32,7 @@ interface EditableTextState {
 
 class EditableText extends React.Component<EditableTextProps, EditableTextState> {
   private textAreaTarget: HTMLTextAreaElement;
-  private editButtonTarget: HTMLButtonElement;
+  private editAnchorTarget: HTMLAnchorElement;
 
   public static defaultProps: EditableTextProps = {
     editable: true,
@@ -77,7 +77,7 @@ class EditableText extends React.Component<EditableTextProps, EditableTextState>
 
   exitEditMode = () => {
     this.setState({ isDisabled: false, inEditMode: false, refreshValue: '' });
-  }
+  };
 
   enterEditMode = () => {
     if (this.props.getLatestValue) {
@@ -86,23 +86,23 @@ class EditableText extends React.Component<EditableTextProps, EditableTextState>
     } else {
       this.setState({ inEditMode: true });
     }
-  }
+  };
 
   refreshText = () => {
     this.setState({value: this.state.refreshValue, isDisabled: false, inEditMode: false, refreshValue: undefined });
-  }
+  };
 
   updateText = () => {
     const newValue = ReactDOM.findDOMNode(this.textAreaTarget).value;
     const onSuccessCallback = () => { this.setState({value: newValue, inEditMode: false, refreshValue: undefined }); };
-    const onFailureCallback = () => { this.exitEditMode(); }
+    const onFailureCallback = () => { this.exitEditMode(); };
 
     this.props.onSubmitValue(newValue, onSuccessCallback, onFailureCallback);
-  }
+  };
 
   getTarget(type) {
-    if (type === 'editButton') {
-      return ReactDOM.findDOMNode(this.editButtonTarget);
+    if (type === 'editAnchor') {
+      return ReactDOM.findDOMNode(this.editAnchorTarget);
     }
     if (type === 'textArea') {
       return ReactDOM.findDOMNode(this.textAreaTarget)
@@ -110,35 +110,42 @@ class EditableText extends React.Component<EditableTextProps, EditableTextState>
   }
 
   render() {
-    if (!this.state.inEditMode || (this.state.inEditMode && this.state.isDisabled)){
+    if (!this.state.editable) {
       return (
         <div className='editable-container'>
-          {
-            this.state.editable &&
-            <div>
-              <button
-                className='btn icon edit-button'
-                disabled= { this.state.isDisabled }
-                onClick={ this.enterEditMode }
-                ref={button => {
-                  this.editButtonTarget = button;
+           <div className='editable-text'>{ this.state.value }</div>
+        </div>
+      );
+    }
+    if (!this.state.inEditMode || (this.state.inEditMode && this.state.isDisabled)) {
+      return (
+        <div className='editable-container'>
+          <Overlay
+            placement='top'
+            show={this.state.isDisabled}
+            target={this.getTarget.bind(this,'editAnchor')}
+          >
+            <Tooltip id='error-tooltip'>
+              <div className="error-tooltip">
+                <text>This text is out of date, please refresh the component</text>
+                <button onClick={this.refreshText}>&#xe031;</button>
+              </div>
+            </Tooltip>
+          </Overlay>
+          <div className={"editable-text"}>
+            { this.state.value }
+            <a className={ "edit-link " + (this.state.value ? "" : "no-value") }
+               href="JavaScript:void(0)"
+               onClick={ this.enterEditMode }
+               ref={ anchor => {
+                  this.editAnchorTarget = anchor;
                 }}
-              />
-              <Overlay
-                placement='top'
-                show={this.state.isDisabled}
-                target={this.getTarget.bind(this,'editButton')}
-              >
-                <Tooltip id='error-tooltip'>
-                  <div className="error-tooltip">
-                    <text>This text is out of date, please refresh the component</text>
-                    <button onClick={this.refreshText}>&#xe031;</button>
-                  </div>
-                </Tooltip>
-              </Overlay>
-            </div>
-          }
-          <div className='editable-text'>{ this.state.value }</div>
+            >
+              {
+                this.state.value ? "edit" : "Add Description"
+              }
+            </a>
+          </div>
         </div>
       );
     }
@@ -167,7 +174,6 @@ class EditableText extends React.Component<EditableTextProps, EditableTextState>
             <button id='save' onClick={this.updateText}>Save</button>
           </Tooltip>
         </Overlay>
-
       </div>
     );
   }

amundsen_application/static/js/components/common/EditableText/styles.scss

@@ -4,64 +4,44 @@
   display: flex;
   font-size: 16px;
   color: $gray-light;
-}
-
-.editable-text {
-  flex-grow: 0.1;
-  word-break: break-word;
-}
-
-.editable-textarea {
-  padding: 2px 5px;
-  outline: none;
-}
-
-.editable-textarea:focus-within {
-  border: 2px solid $gradient-2;
-  outline: none;
-}
-
-.tooltip-inner {
-  padding: 0px;
-  border-radius: 3px;
-  background-color: $gray-darker;
-}
 
-.tooltip-inner button {
-  height: 36px;
-  width: 96px;
-  font-size:14px;
-  border-radius: 3px;
-  border: none;
-  background-color: $gray-darker;
-  color: $body-bg;
-  font-family: $font-family-sans-serif-bold;
-  font-weight: $font-weight-sans-serif-bold;
-  outline: none;
-}
-.tooltip-inner button:hover {
-  color: $gray-light;
-}
-
-.edit-button {
-  height: 24px;
-  width: 24px;
-  border: none;
-  border-radius: 1px;
-  margin-right: 4px;
-  background-color: $gray-light;
-  -webkit-mask-image: url('/static/images/icons/Edit.svg');
-  mask-image: url('/static/images/icons/Edit.svg');
-}
-
-.error-tooltip {
-  display: flex;
-  padding: 5px;
-}
-.error-tooltip button {
-  height: 24px;
-  width: 24px;
-  font-size: 16px;
-  margin: auto;
-  font-family: 'Glyphicons Halflings';
+  &:hover {
+   .edit-link {
+     opacity: 1;
+   }
+  }
+
+  .edit-link {
+    opacity: 0;
+    margin-left: 4px;
+    color: $gradient-3;
+    text-decoration: none;
+
+    &:hover {
+      color: $gradient-4;
+    }
+
+    &.no-value {
+      opacity: 1;
+      margin-left: 0;
+    }
+  }
+
+  .editable-text {
+    flex-grow: 0.1;
+    word-break: break-word;
+  }
+
+  .editable-textarea {
+    padding: 0;
+    outline: none;
+    border: 0;
+    background: $gradient-1;
+    caret-color: $gradient-4;
+  }
+
+  .editable-textarea:focus-within {
+    outline: none;
+    background: white;
+  }
 }