diff --git a/src/plugins/notebook/components/NotebookEntry.vue b/src/plugins/notebook/components/NotebookEntry.vue index 7aa7eec9d4..e69e34c21c 100644 --- a/src/plugins/notebook/components/NotebookEntry.vue +++ b/src/plugins/notebook/components/NotebookEntry.vue @@ -12,12 +12,11 @@
{{ entry.text.length ? entry.text : defaultText }}
+ >{{ entry.text }}
{ @@ -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; diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss index 01d3896711..50036c8475 100644 --- a/src/styles/_controls.scss +++ b/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 { diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index a3628d68d0..60337528cc 100644 --- a/src/styles/_mixins.scss +++ b/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; } } diff --git a/src/styles/notebook.scss b/src/styles/notebook.scss index 030d009da9..f72f622ef7 100644 --- a/src/styles/notebook.scss +++ b/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; } }