Closes #6060

- Styles added to support Shift Log and hover behavior for entries on locked pages.
- Removed `--major` styling from Shift Log Commit Entries button
to reduce confusion with entry commit button.
- CSS code cleanups.

src/plugins/notebook/components/Notebook.vue

@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-
+tabs
 <template>
   <div class="c-notebook" :class="[{ 'c-notebook--restricted': isRestricted }]">
     <div class="c-notebook__head">
@@ -62,7 +62,12 @@
         @selectSection="selectSection"
         @toggleNav="toggleNav"
       />
-      <div class="c-notebook__page-view">
+      <div class="c-notebook__page-view"
+           :class="{
+                    'c-notebook--page-locked': selectedPage.isLocked,
+                    'c-notebook--page-unlocked': !selectedPage.isLocked
+                }"
+      >
         <div class="c-notebook__page-view__header">
           <button
             class="c-notebook__toggle-nav-button c-icon-button c-icon-button--major icon-menu-hamburger"
@@ -98,18 +103,18 @@
           @drop.capture="dropCapture"
           @drop="dropOnEntry($event)"
         >
-          <span class="c-notebook__drag-area__label">
-            To start a new entry, click here or drag and drop any object
-          </span>
+                  <span class="c-notebook__drag-area__label">
+                    To start a new entry, click here or drag and drop any object
+                  </span>
         </div>
         <progress-bar
           v-if="savingTransaction"
           class="c-telemetry-table__progress-bar"
           :model="{ progressPerc: null }"
         />
-        <div v-if="selectedPage && selectedPage.isLocked" class="c-notebook__page-locked">
+        <div v-if="selectedPage && selectedPage.isLocked" class="c-notebook__page-locked-message">
           <div class="icon-lock"></div>
-          <div class="c-notebook__page-locked__message">
+          <div class="c-notebook__page-locked-message-text">
             This page has been committed and cannot be modified or removed
           </div>
         </div>
@@ -142,7 +147,7 @@
           class="c-notebook__commit-entries-control"
         >
           <button
-            class="c-button c-button--major commit-button icon-lock"
+            class="c-button commit-button icon-lock"
             title="Commit entries and lock this page from further changes"
             @click="lockPage()"
           >
@@ -155,13 +160,13 @@
 </template>
 
 <script>
-import { debounce } from 'lodash';
+import {debounce} from 'lodash';
 
 import Search from '@/ui/components/Search.vue';
 
 import ProgressBar from '../../../ui/components/ProgressBar.vue';
 import objectLink from '../../../ui/mixins/object-link';
-import { isNotebookViewType, RESTRICTED_NOTEBOOK_TYPE } from '../notebook-constants';
+import {isNotebookViewType, RESTRICTED_NOTEBOOK_TYPE} from '../notebook-constants';
 import {
   addNotebookEntry,
   createNewEmbed,
@@ -185,6 +190,7 @@ import {
 import NotebookEntry from './NotebookEntry.vue';
 import SearchResults from './SearchResults.vue';
 import Sidebar from './Sidebar.vue';
+
 function objectCopy(obj) {
   return JSON.parse(JSON.stringify(obj));
 }
@@ -436,7 +442,10 @@ export default {
         });
       }
     },
-    changeSelectedSection({ sectionId, pageId }) {
+    changeSelectedSection({
+      sectionId,
+      pageId
+    }) {
       const sections = this.sections.map((s) => {
         s.isSelected = false;
 
@@ -459,7 +468,7 @@ export default {
         return s;
       });
 
-      this.sectionsChanged({ sections });
+      this.sectionsChanged({sections});
       this.resetSearch();
     },
     cleanupDefaultNotebook() {
@@ -860,7 +869,10 @@ export default {
     orientationChange() {
       this.formatSidebar();
     },
-    pagesChanged({ pages = [], id = null }) {
+    pagesChanged({
+      pages = [],
+      id = null
+    }) {
       const selectedSection = this.selectedSection;
       if (!selectedSection) {
         return;
@@ -875,7 +887,7 @@ export default {
         return section;
       });
 
-      this.sectionsChanged({ sections });
+      this.sectionsChanged({sections});
     },
     removeDefaultClass(identifier) {
       this.openmct.status.delete(identifier);
@@ -974,7 +986,10 @@ export default {
         sectionId: this.selectedSectionId
       });
     },
-    sectionsChanged({ sections, id = undefined }) {
+    sectionsChanged({
+      sections,
+      id = undefined
+    }) {
       this.sections = [...sections];
       this.startTransaction();
       mutateObject(this.openmct, this.domainObject, 'configuration.sections', sections);

src/styles/notebook.scss

@@ -113,7 +113,7 @@
         flex: 1 1 auto;
     }
 
-    &__page-locked,
+    &__page-locked-message,
     &__drag-area {
         border-radius: $controlCr;
         padding: 10px;
@@ -136,8 +136,7 @@
         }
 
         &:hover {
-            background: rgba($colorBodyFg, 0.1); //$colorInteriorBorder;
-            //color: $colorBodyFg;
+            background: rgba($colorBodyFg, 0.1);
         }
 
         &.drag-active,
@@ -236,7 +235,7 @@
     }
 
     /***** RESTRICTED NOTEBOOK */
-    &__page-locked {
+    &__page-locked-message {
         background: rgba($colorAlert, 0.2);
         display: flex;
         padding: 5px;
@@ -292,17 +291,16 @@
         background: rgba($colorKey, 0.2);
 
         .c-ne__text {
-            cursor: text;
+            .c-notebook--page-unlocked & {
+                cursor: text;
 
-            @include hover() {
-                &:not(:focus, .locked) {
-                    background: $colorInputBg;
+                @include hover() {
+                    &:not(:focus, .locked) {
+                        background: $colorInputBg;
+                    }
                 }
-            }
 
-            //&:focus {
-            //    background: $colorInputBg;
-            //}
+            }
         }
     }