Notebook fixes for NT10 'click-to-edit entry' (#3475)

* Notebook fixes for NT10 'click-to-edit entry'

- Hovering over entries now displays a subtle background change, and
only displays the 'inline input' look when clicked into;
- Changed default styling and behavior to not apply default text
content: new entries now start with a blank entry, and do not include
'placeholder' formatting;
- Refactored styles associated with `c-input-inline`, `c-ne__input` and
`reactive-input` mixin;
- New mixin `inlineInput`;
- Removed unused CSS classes, general cleanups;

* fixed defaultText as blank issue and some cleanup

* Update _mixins.scss

- Remove commented code;

Co-authored-by: Nikhil Mandlik <nikhil.k.mandlik@nasa.gov>

src/plugins/notebook/components/NotebookEntry.vue

@@ -12,12 +12,11 @@
         <div class="c-ne__content">
             <div :id="entry.id"
                  class="c-ne__text"
-                 :class="{'c-input-inline' : !readOnly }"
+                 :class="{'c-ne__input' : !readOnly }"
                  :contenteditable="!readOnly"
-                 :style="!entry.text.length ? defaultEntryStyle : ''"
                  @blur="updateEntryValue($event, entry.id)"
                  @focus="updateCurrentEntryValue($event, entry.id)"
-            >{{ entry.text.length ? entry.text : defaultText }}</div>
+            >{{ entry.text }}</div>
             <div class="c-snapshots c-ne__embeds">
                 <NotebookEmbed v-for="embed in entry.embeds"
                                :key="embed.id"
@@ -106,12 +105,7 @@ export default {
     },
     data() {
         return {
-            currentEntryValue: '',
-            defaultEntryStyle: {
-                fontStyle: 'italic',
-                color: '#6e6e6e'
-            },
-            defaultText: 'add description'
+            currentEntryValue: ''
         };
     },
     computed: {
@@ -235,24 +229,13 @@ export default {
             this.entry.embeds.splice(embedPosition, 1);
             this.updateEntry(this.entry);
         },
-        selectTextInsideElement(element) {
-            const range = document.createRange();
-            range.selectNodeContents(element);
-            let selection = window.getSelection();
-            selection.removeAllRanges();
-            selection.addRange(range);
-        },
         updateCurrentEntryValue($event) {
             if (this.readOnly) {
                 return;
             }
 
             const target = $event.target;
-            this.currentEntryValue = target ? target.innerText : '';
-
-            if (!this.entry.text.length) {
-                this.selectTextInsideElement(target);
-            }
+            this.currentEntryValue = target ? target.textContent : '';
         },
         updateEmbed(newEmbed) {
             this.entry.embeds.some(e => {
@@ -292,6 +275,8 @@ export default {
             const entryPos = this.entryPosById(entryId);
             const value = target.textContent.trim();
             if (this.currentEntryValue !== value) {
+                target.textContent = value;
+
                 const entries = getNotebookEntries(this.domainObject, this.selectedSection, this.selectedPage);
                 entries[entryPos].text = value;
 

src/styles/_controls.scss

@@ -300,19 +300,7 @@ input[type=number]::-webkit-outer-spin-button {
     &-inline,
     &--inline {
         // A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
-        @include reactive-input($bg: transparent);
-        box-shadow: none;
-        display: block !important;
-        min-width: 0;
-        padding-left: 0;
-        padding-right: 0;
-        overflow: hidden;
-        transition: all 250ms ease;
-        white-space: nowrap;
-
-        &:not(:focus) {
-            text-overflow: ellipsis;
-        }
+        @include inlineInput;
 
         &:hover,
         &:focus {

src/styles/_mixins.scss

@@ -380,11 +380,21 @@
     &:focus {
         box-shadow: $shdwInputFoc;
     }
+}
 
-    @include hover() {
-        &:not(:focus) {
-            box-shadow: $shdwInputHov;
-        }
+@mixin inlineInput() {
+    @include reactive-input($bg: transparent);
+    box-shadow: none;
+    display: block !important;
+    min-width: 0;
+    padding-left: 0;
+    padding-right: 0;
+    overflow: hidden;
+    transition: all 250ms ease;
+    white-space: nowrap;
+
+    &:not(:focus) {
+        text-overflow: ellipsis;
     }
 }
 

src/styles/notebook.scss

@@ -275,21 +275,22 @@
     &__text {
         min-height: 22px; // Needed in Firefox when field is blank
         white-space: pre-wrap;
-
-        &.is-blank-notebook-entry {
-            &:not(:focus):before {
-                content: 'Blank entry';
-                font-style: italic;
-                opacity: 0.5;
-            }
-        }
     }
 
-    &__embeds {
-        //flex-wrap: wrap;
+    &__input {
+        // Appended to __text element when Notebook is not in readOnly mode
+        @include inlineInput;
+        padding-left: $inputTextPLeftRight;
+        padding-right: $inputTextPLeftRight;
 
-        > [class*="__embed"] {
-            //margin: 0 $interiorMarginSm $interiorMarginSm 0;
+        @include hover {
+            &:not(:focus) {
+                background: rgba($colorBodyFg, 0.1);
+            }
+        }
+
+        &:focus {
+            background: $colorInputBg;
         }
     }