openmct/src/styles/notebook.scss

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2024, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

/*********************************************** NOTEBOOK */
@mixin searchHighlight {
  background: rgba($colorBtnSelectedBg, 0.4);
  color: $colorBtnSelectedFg;
  font-weight: bold;
}

.c-notebook {
  $headerFontSize: 1.3em;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
  height: 100%;

  /****************************** CONTENT */
  &__body {
    // Holds __nav and __page-view
    display: flex;
    flex: 1 1 auto;
    overflow: hidden;
  }

  &__nav {
    flex: 0 0 auto;

    * {
      overflow: hidden;
    }
  }

  .c-sidebar {
    .c-sidebar__pane {
      flex-basis: 50%;
    }
  }

  body.mobile & {
    .c-list-button,
    &-snapshot-menubutton {
      display: none;
    }
  }

  /****************************** CONTENT */
  &__contents {
    width: 70%;
  }

  &__page-view {
    // Holds __header, __drag-area and __entries
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;

    > * {
      flex: 0 0 auto;

      + * {
        margin-top: $interiorMargin;
      }
    }
  }

  > * + * {
    margin-top: $interiorMargin;
  }

  &__head,
  &__controls,
  &__drag-area,
  &__entries {
    display: flex;
    flex-wrap: nowrap;
  }

  &__head,
  &__drag-area,
  &__controls {
    flex: 0 0 auto;
  }

  &__head {
    [class*='__'] + [class*='__'] {
      margin-left: $interiorMargin;
    }
  }

  &__search {
    flex: 1 1 auto;
  }

  &__page-locked-message,
  &__drag-area {
    border-radius: $controlCr;
    padding: 10px;

    &:before {
      margin-right: 7px !important;
    }
  }

  &__drag-area {
    background: rgba($colorKey, 0.02);
    border: 1px dashed rgba($colorKey, 0.7);
    color: $colorKey;
    cursor: pointer;
    justify-content: center;

    [class*='__label'] {
      font-style: italic;
      @include ellipsize();
    }

    &:hover {
      background: rgba($colorBodyFg, 0.2);
    }

    &.drag-active,
    &.is-active {
      // Not currently working
      border-color: $colorKey;
    }

    body.mobile & {
      display: none;
    }
  }

  /***** PAGE VIEW */
  &__page-view {
    &__header {
      display: flex;
      flex-wrap: wrap; // Allows wrapping in mobile portrait and narrow placements
      line-height: 220%;

      > * {
        flex: 0 0 auto;
      }
    }

    &__path {
      flex: 1 1 auto;
      margin: 0 $interiorMargin;
      overflow: hidden;
      white-space: nowrap;
      font-size: $headerFontSize;

      > * {
        // Section
        flex: 0 0 auto;

        + * {
          // Page
          display: inline;
          flex: 1 1 auto;
          @include ellipsize();
        }
      }
    }
  }

  &__entries {
    flex-direction: column;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: scroll;

    @include desktop() {
      padding-right: $interiorMarginSm; // Scrollbar kickoff
    }

    [class*='__entry'] + [class*='__entry'] {
      margin-top: $interiorMarginSm;
    }

    .commit-button {
      @include cButton();
      position: absolute;
      right: 5px;
      bottom: 5px;
    }
  }

  /***** SEARCH RESULTS */
  &__search-results {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow-y: auto;

    > * + * {
      margin-top: 5px;
    }

    &__header {
      font-size: $headerFontSize;
      flex: 0 0 auto;
    }

    .c-notebook__entries {
      flex: 1 1 auto;
    }

    .c-ne {
      flex-direction: column;

      > * + * {
        margin-top: $interiorMargin;
      }
    }
  }

  /***** RESTRICTED NOTEBOOK */
  &__page-locked-message {
    background: rgba($colorAlert, 0.2);
    display: flex;
    padding: 5px;

    > * + * {
      margin-left: $interiorMargin;
    }

    [class*='icon'] {
      flex: 0 0 auto;
    }

    [class*='__message'] {
      flex: 1 1 auto;
    }
  }

  &__commit-entries-control {
    display: flex;
    justify-content: flex-end;
  }
}

.is-notebook-default,
.is-status--notebook-default {
  &:after {
    color: $colorFilter;
    font-family: symbolsfont;
    font-size: 0.9em;
  }

  &.c-list__item:after {
    content: $glyph-icon-notebook-page;
    flex: 1 0 auto;
    text-align: right;
  }
}

/****************************** ENTRIES */
.c-ne {
  // A Notebook entry
  $p: $interiorMarginSm;
  @include discreteItem();
  cursor: pointer;
  display: flex;
  padding: $interiorMarginSm $interiorMarginSm $interiorMarginSm $interiorMargin;

  @include hover() {
    background: $colorDiscreteItemBgHov;
  }

  &.is-selected {
    background: rgba($colorKey, 0.1);

    .c-ne__text {
      .c-notebook--page-unlocked & {
        cursor: text;

        @include hover() {
          &:not(.locked) {
            background: $colorInputBgHov;
          }
        }
      }
    }
  }

  &__text,
  &__local-controls {
    padding-top: $p;
    padding-bottom: $p;
  }

  &__creator,
  &__embed__time {
    opacity: 0.9;
  }

  &__time-and-creator-and-delete,
  &__text,
  &__input {
    padding: $p;
  }

  &__time-and-creator-and-delete {
    display: flex;
    align-items: center;

    > * + * {
      float: right;
      margin-left: auto;
    }
  }

  &__time-and-creator {
    color: $colorA;
  }

  &__creator [class*='icon'] {
    font-size: 0.95em;
  }

  &__time-and-content {
    display: block;
    flex: 1 1 auto;
    overflow: visible;

    > * + * {
      margin-top: $interiorMarginSm;
    }
  }

  &__time {
    * {
      white-space: nowrap;
    }
  }

  &__content {
    flex-direction: column;
    flex: 1 1 auto;
    margin-right: $interiorMarginSm;
    margin-top: $interiorMargin;

    > [class*='__'] + [class*='__'] {
      margin-top: $interiorMarginSm;
    }
  }

  &__text,
  &__input {
    color: $colorBodyFgEm !important;
  }

  &__text {
    min-height: 22px; // Needed in Firefox when field is blank
    white-space: normal;

    .search-highlight {
      @include searchHighlight();
    }

    // Resets and styling for markdown
    h1,
    h2,
    h3,
    h4,
    h5 {
      margin: unset !important;
      padding: unset !important;
    }

    a {
      text-decoration: underline;
    }

    em {
      font-style: italic;
    }

    > * {
      &:not(:first-child) {
        margin-top: $interiorMarginSm;
      }
    }

    p,
    blockquote,
    pre {
      margin: 0;

      &:not(:first-child) {
        margin-top: $interiorMarginLg;
      }
    }

    blockquote {
      $m: 16px;
      margin-left: $m;
      margin-right: $m;
    }

    ul,
    ol {
      padding: 0 0 0 16px;
    }

    ul {
      list-style: square;
    }

    ol {
      list-style: decimal;
    }

    li {
      list-style-type: inherit;
    }

    table {
      width: auto;
    }

    th,
    td {
      border: 1px solid rgba($colorBodyFg, 0.7);
    }

    th {
      background: rgba($colorBodyFg, 0.2);
    }
  }

  &__input {
    // Textarea
    //@include inlineInput;
    @include reactive-input();
    padding-left: $p;
    padding-right: $p;
    overflow: unset;
    margin-bottom: $interiorMargin;
    min-height: 5rem;
    resize: vertical;
    width: 100%;
  }

  &__save-button {
    display: flex;
    justify-content: flex-end;

    .c-button {
      $lrP: 15px;
      padding-left: $lrP;
      padding-right: $lrP;
    }
  }

  &__section-and-page {
    // Shown when c-ne within search results
    background: rgba($colorBodyFg, 0.1); //$colorInteriorBorder;
    border-radius: $controlCr;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: $interiorMargin;

    .search-highlight {
      @include searchHighlight();
    }

    > * + * {
      margin-left: $interiorMargin;
    }

    [class*='icon'] {
      font-size: 0.8em;
      opacity: 0.7;
    }
  }

  &__remove {
    float: right;
  }
}

/****************************** EMBEDS */
@mixin snapThumb() {
  // LEGACY: TODO: refactor when .snap-thumb in New Entry dialog is refactored
  $d: 40px;
  border: 1px solid $colorInteriorBorder;
  cursor: pointer;
  width: $d;
  height: $d;
  border-radius: 5px;
  overflow: hidden;

  img {
    height: 100%;
    width: 100%;
  }
}

.snap-thumb {
  // LEGACY,
  @include snapThumb();
}

.c-ne__embeds-wrapper {
  max-height: 75px;
  padding-left: $interiorMargin;
  padding-top: $interiorMargin;
  display: flex;
}

.c-ne__embed {
  @include discreteItemInnerElem();
  display: inline-flex;
  flex: 0 0 auto;
  padding: $interiorMargin;
  border: 1px solid $colorInteriorBorderNotebook;

  &__info {
    display: flex;
    flex-direction: column;
    margin-left: $interiorMargin;

    a {
      color: $colorKey;
    }
  }

  &__name,
  &__link {
    // Holds __link and __context-available
    display: flex;
    align-items: center;
  }

  &__link {
    flex: 1 1 auto;

    &:before {
      display: block;
      font-size: 1em;
      margin-right: $interiorMarginSm;
    }
  }

  &__context-available {
    font-size: 0.7em;
    margin-left: $interiorMarginSm;
  }

  &__snap-thumb {
    @include snapThumb();
  }

  &__actions {
    margin: $interiorMarginSm;
  }

  &__actions-menu {
    width: 55vh;
    max-width: 500px;
    height: 130px;
    z-index: 70;

    [class*='__icon'] {
      filter: $colorKeyFilter;
      margin: 0%;
      height: 4vh;
    }

    [class*='__item-description'] {
      min-width: 200px;
    }
  }
}

/****************************** SNAPSHOTTING */
// LEGACY: TODO: refactor these names
.t-contents,
.snap-annotation {
  overflow: hidden;
}

.s-status-taking-snapshot,
.overlay.snapshot {
  // Handle overflow-y issues with tables and html2canvas
  background: $colorBodyBg; // Prevent html2canvas from using white background
  color: $colorBodyFg;
  padding: $interiorMarginSm !important; // Prevents items from going right to the edge of the image

  .l-sticky-headers .l-tabular-body {
    overflow: auto;
  }

  .l-browse-bar {
    display: none; // Suppress browse-bar when snapshotting from view-large overlay
    + * {
      margin-top: 0 !important; // Remove margin from any following elements
    }
  }

  * {
    box-shadow: none !important; // Prevent html2canvas problems with box-shadow
  }
}

.c-notebook-snapshot {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;

  > * + * {
    margin-top: $interiorMargin;
  }

  &__header {
    flex: 0 0 auto;
  }

  &__image {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    flex: 1 1 auto;
  }
}

/****************************** SNAPSHOT CONTAINER */
.c-snapshots-h {
  // Is hidden when the parent div l-shell__drawer is collapsed, so no worries about padding, etc.
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: $interiorMargin $interiorMarginLg;

  > * + * {
    margin-top: $interiorMargin;
  }

  .l-browse-bar {
    flex: 0 0 auto;
  }

  .c-snapshots-h__title {
    display: flex;
  }

  .c-snapshots {
    flex: 1 1 auto;
  }
}

.c-snapshots {
  flex-wrap: wrap;
  overflow: auto;

  .c-snapshot {
    margin: 0 $interiorMarginSm $interiorMarginSm 0;
  }

  .hint {
    font-size: 1.25em;
    font-style: italic;
    opacity: 0.7;
    padding: $interiorMarginLg;
    text-align: center;
  }
}

/****************************** PAINTERRO OVERRIDES */
.annotation-dialog .abs.editor {
  border-radius: 0;
}

#snap-annotation {
  $m: 0; //$interiorMargin;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: $m;
  right: 0;
  bottom: $m;
  left: 0; // LEGACY, deal with .editor border-radius clipping stuff
}

#snap-annotation-wrapper,
#snap-annotation-bar {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

#snap-annotation-wrapper {
  background: rgba($colorBodyFg, 0.1);
  border: 1px solid $colorInteriorBorder;
  order: 2;
  flex: 10 0 auto;
}

#snap-annotation-bar {
  // Holds tool buttons, color selectors, etc.
  $h: 22px;
  $fs: 0.8rem;
  $m: $interiorMarginSm;

  display: flex;
  align-items: center;
  height: $h + ($m * 2) !important;
  margin-bottom: $interiorMarginLg;
  order: 1;
  flex: 0 0 auto;
  background-color: transparent !important;
  padding: $interiorMarginSm;

  > div {
    display: contents;

    > * + * {
      margin-left: $interiorMargin !important;
    }
  }

  .ptro-tool-controls {
    display: flex;
    margin-left: $interiorMarginLg !important;

    > * + * {
      margin-left: $interiorMargin !important;
    }
  }

  .ptro-icon-btn,
  .ptro-named-btn,
  .ptro-color-btn,
  .ptro-bordered-btn,
  .ptro-tool-ctl-name,
  .ptro-color-btn,
  .tool-controls,
  .ptro-input {
    // Lot of resets for crappy CSS in Painterro
    font-family: inherit;
    font-size: $fs !important;
    height: $h !important;
    margin: 0;
    position: relative;
    line-height: $h !important;
  }

  .ptro-tool-ctl-name {
    border-radius: 0;
    background: none;
    color: $colorBodyFg;
    top: auto;
    font-family: inherit;
    padding: 0;
  }

  .ptro-color-btn {
    width: $h !important;
  }

  .ptro-check,
  .ptro-color-control,
  .ptro-icon-btn,
  .ptro-named-btn {
    // Buttons in toolbar
    border-radius: $smallCr;
    box-shadow: rgba($colorBtnFg, 0.3) 0 0 0 1px;
    color: $colorBtnFg !important;
    padding: 1px $interiorMargin;

    &:hover {
      background: $colorBtnBgHov;
      color: $colorBtnFgHov;
    }

    i {
      display: contents;
      font-size: $fs * 1.2;
      line-height: inherit;
    }
  }

  .ptro-color-control,
  .ptro-icon-btn,
  .ptro-named-btn {
    // Buttons in toolbar
    background-color: $colorBtnBg;
  }

  .ptro-color-active-control {
    background: $colorBtnMajorBg !important;
    color: $colorBtnMajorFg !important;
  }

  .ptro-info,
  .ptro-btn-color-checkers-bar,
  *[title='Font name'],
  *[title='Stroke color'],
  *[title='Stroke width'],
  *[data-id='fontName'],
  *[data-id='fontStrokeSize'],
  *[data-id='stroke'] {
    display: none;
  }
}

/****************************** MOBILE */
body.mobile {
  .c-notebook__drag-area {
    display: none;
  }

  .c-notebook__entry {
    [class*='local-controls'] {
      display: none;
      height: fit-content;
    }
  }

  &.phone.portrait {
    .c-notebook__head,
    .c-notebook__entry,
    .c-ne__time-and-content {
      flex-direction: column;

      > [class*='__'] + [class*='__'] {
        margin-left: 0;
        margin-top: $interiorMargin;
      }
    }

    .c-notebook__entry {
      [class*='text'] {
        min-height: 0;
        pointer-events: none;
      }
    }
  }
}

/****************************** INDICATOR */
.c-indicator.has-new-snapshot {
  $c: $colorOk;
  @include pulseProp(
    $animName: flashSnapshot,
    $dur: 500ms,
    $iter: infinite,
    $prop: background,
    $valStart: rgba($c, 0.4),
    $valEnd: rgba($c, 0)
  );
}

/****************************** RESTRICTED NOTEBOOK / SHIFT LOG */
.c-notebook--restricted {
  .c-notebook__pages {
    .c-list__item {
      // Can display lock icon when a page is committed.
      &:before {
        $s: 0.8em;
        color: $colorAlert;
        display: block;
        font-size: $s;
        width: $s;
        margin-right: $interiorMarginSm;
      }

      &:not([class*='lock']) {
        &:before {
          content: '';
        }
      }
    }
  }
}

.c-list__item {
  &__name:focus {
    text-overflow: clip;
  }
}