openmct/src/styles/notebook.scss

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2022, 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,
    &__drag-area {
        border-radius: $controlCr;
        padding: 10px;

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

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

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

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

        &.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 {
        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();
    display: flex;
    padding: $interiorMarginSm $interiorMarginSm $interiorMarginSm $interiorMargin;

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

    &__creator,
    &__embed__time {
        opacity: 0.7;
    }

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

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

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

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

        [class*='created-'] {
            color: pullForward($colorBodyFg, 20%);
        }
    }

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

    &__content {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;

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

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

        &:not(.highlight) {
            white-space: pre-wrap;
        }

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

    &__input {
        // Appended to __text element when Notebook is not in readOnly mode
        @include inlineInput;
        padding-left: $p;
        padding-right: $p;

        @include hover {
            &:not(:focus, .locked) {
                background: rgba($colorBodyFg, 0.1);
            }
        }

        &:focus {
            background: $colorInputBg;
        }

        white-space: pre-wrap;
    }

    &__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;
        }
    }
}

/****************************** EMBEDS */
@mixin snapThumb() {
    // LEGACY: TODO: refactor when .snap-thumb in New Entry dialog is refactored
    $d: 30px;
    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__embed {
    @include discreteItemInnerElem();
    display: inline-flex;
    flex: 0 0 auto;
    padding: $interiorMargin;

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

    &__info {
        display: flex;
        flex-direction: column;

        a {
            color: $colorKey;
        }
    }

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

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

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

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

/****************************** 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: $interiorMarginLg;

    > * {
        flex: 1 1 auto;

        &:first-child {
            flex: 0 0 auto;
        }
    }

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

.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;
        }
    }

    &.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: '';
                }
            }
        }
    }
}