Notebook vue styling (#2169)

* Notebook styling WIP

- New notebook scss file;
- notebook.html converted;

* Notebook styling WIP

- Entries and embeds
- New discreteItem theme constants;

* Notebook styling shippable

- Notebook entries and embeds finished;
- TODO: Fix styling for c-input-inline when SCSS is merged and remove
s-input-inline class in entry.html;

* Notebook styling shippable

- Remove legacy Notebook styles;
- Painterro overrides;
- Code cleanup

* Notebook mobile styling; entry layout still WIP

- Entries now layout better in narrow containers but still WIP,
particularly for delete icon;
- Mobile styling;

* Notebook entry markup for better narrow Notebook layout

src/MCT.js

@@ -38,6 +38,7 @@ define([
     './ui/router/Browse',
     '../platform/framework/src/Main',
     './styles-new/core.scss',
+    './styles-new/notebook.scss',
     './ui/components/layout/Layout.vue',
     'vue'
 ], function (
@@ -58,6 +59,7 @@ define([
     Browse,
     Main,
     coreStyles,
+    NotebookStyles,
     Layout,
     Vue
 ) {

src/plugins/notebook/res/templates/embed.html

@@ -1,20 +1,17 @@
-<div
+<div class="c-ne__embed">
-    class="l-flex-row l-entry-embed"
+    <div class="c-ne__embed__snap-thumb"
-    v-bind:class="[embed.cssClass]">
-
-    <div
-        class="snap-thumb"
         v-if="embed.snapshot"
         v-on:click="openSnapshot">
         <img v-bind:src="embed.snapshot.src">
     </div>
-
+    <div class="c-ne__embed__info">
-    <div class="embed-info l-flex-col">
+        <div class="c-ne__embed__name">
-        <div class="embed-title object-header">
+            <a class="c-ne__embed__link"
-            <a v-on:click="navigate(embed.type)">{{embed.name}}</a>
+               v-on:click="navigate(embed.type)"
-            <a class='context-available' v-on:click="toggleActionMenu"></a>
+               v-bind:class="[embed.cssClass]">{{embed.name}}</a>
+            <a class="c-ne__embed__context-available icon-arrow-down"
+               v-on:click="toggleActionMenu"></a>
         </div>
-
         <div class="hide-menu hidden">
             <div class="menu-element context-menu-wrapper mobile-disable-select">
                 <div class="menu context-menu">
@@ -28,8 +25,7 @@
                 </div>
             </div>
         </div>
-
+        <div class="c-ne__embed__time" v-if="embed.snapshot">
-        <div class="embed-date" v-if="embed.snapshot">
                 {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
         </div>
     </div>

src/plugins/notebook/res/templates/entry.html

@@ -1,16 +1,15 @@
-<li class="l-flex-row has-local-controls l-notebook-entry s-notebook-entry"
+<li class="c-notebook__entry c-ne has-local-controls"
     v-on:drop="dropOnEntry(entry.id)"
     v-on:dragover="dragoverOnEntry"
     >
-
+    <div class="c-ne__time-and-content">
-    <div class="holder flex-elem l-flex-row grows w-notebook-entry-time-and-content">
+        <div class="c-ne__time">
-        <div class="holder flex-elem s-notebook-entry-time">
             <span>{{formatTime(entry.createdOn, 'YYYY-MM-DD')}}</span>
             <span>{{formatTime(entry.createdOn, 'HH:mm:ss')}}</span>
         </div>
-
+        <div class="c-ne__content">
-        <div class="holder flex-elem l-flex-col grows l-notebook-entry-content">
+            <!-- TODO: fix styling for c-input-inline when SCSS is merged and remove s-input-inline class here -->
-            <div class="flex-elem s-input-inline t-notebook-entry-input s-notebook-entry-text"
+            <div class="c-ne__text c-input-inline s-input-inline"
                  contenteditable="true"
                  ref="contenteditable"
                  v-on:blur="textBlur($event, entry.id)"
@@ -18,8 +17,7 @@
                  v-bind:key="entry.id"
                  v-html="entry.text">
             </div>
-
+            <div class="c-ne__embeds">
-            <div class="flex-elem entry-embeds l-flex-row">
                 <notebook-embed
                     v-for="(embed, index) in entry.embeds"
                     v-bind:embed="embed"
@@ -27,9 +25,11 @@
                 ></notebook-embed>
             </div>
         </div>
+    </div>
 
-        <div class="holder flex-elem local-control local-controls-hidden notebook-entry-delete">
+    <div class="c-ne__local-controls--hidden">
-                <a class="s-icon-button icon-trash" title="Delete Entry" v-on:click="deleteEntry"></a>
+        <a class="c-icon-button icon-trash"
-        </div>
+           title="Delete this entry"
+           v-on:click="deleteEntry"></a>
     </div>
 </li>

src/plugins/notebook/res/templates/notebook.html

@@ -1,17 +1,17 @@
-<div class="mct-notebook w-notebook l-flex-col">
+<div class="c-notebook">
-    <div class="l-notebook-head holder l-flex-row flex-elem">
+    <div class="c-notebook__head">
-        <div class="c-search flex-elem holder grows">
+        <!-- TODO: use search component here -->
-            <input class="c-search__search-input"
+        <div class="c-notebook__search c-search"
-                    type="text" tabindex="10000"
+             :class="{ 'is-active': entrySearch }">
-                    v-model="entrySearch"
+            <input class="c-search__input" type="search"
-                    v-on:keyup="search($event)"/>
+                   type="text" tabindex="10000"
-            <a class="c-search__clear-input clear-icon icon-x-in-circle"
+                   v-model="entrySearch"
-                v-bind:class="[entrySearch ? 'show': '']"
+                   v-on:keyup="search($event)"/>
-                v-on:click="entrySearch = ''; search($event)"></a>
+            <a class="c-search__clear-input icon-x-in-circle"
+               v-on:click="entrySearch = ''; search($event)"></a>
         </div>
-
+        <div class="c-notebook__controls">
-        <div class="notebook-view-controls l-flex-row flex-elem holder">
+            <div class="select c-notebook__controls__time">
-            <div class="select notebook-view-controls__filter-time">
                 <select v-model="showTime">
                     <option value="0" selected="selected">Show all</option>
                     <option value="1">Last hour</option>
@@ -19,7 +19,7 @@
                     <option value="24">Last 24 hours</option>
                 </select>
             </div>
-            <div class="select notebook-view-controls__sort">
+            <div class="select c-notebook__controls__sort">
                 <select v-model="sortEntries">
                     <option value="-createdOn" selected="selected">Newest first</option>
                     <option value="createdOn">Oldest first</option>
@@ -27,15 +27,12 @@
             </div>
         </div>
     </div>
-
+    <div class="c-notebook__drag-area icon-plus"
-    <!--  drag area -->
+         v-on:click="newEntry($event)"
-    <div class="holder flex-elem l-flex-row icon-plus labeled l-notebook-drag-area" v-on:click="newEntry($event)"
+         id="newEntry" mct-entry-dnd>
-    id="newEntry" mct-entry-dnd>
+        <span class="c-notebook__drag-area__label">To start a new entry, click here or drag and drop any object</span>
-    <span class="label">To start a new entry, click here or drag and drop any object</span>
     </div>
-
+    <div class="c-notebook__entries" ng-mouseover="handleActive()">
-    <!-- entries -->
-    <div class="holder flex-elem grows w-notebook-entries t-entries-list" ng-mouseover="handleActive()">
         <ul>
            <notebook-entry
                 v-for="entry in filterBySearch(entries, entrySearch)"

src/plugins/notebook/src/actions/AnnotateSnapshot.js

@@ -108,9 +108,6 @@ define(
                             done(true);
                         }
                     }).show(snapshot);
-
-                    $(document.body).find('.ptro-icon-btn').addClass('s-button');
-                    $(document.body).find('.ptro-input').addClass('s-button');
                 });
             }];
 

src/styles-new/_constants-snow.scss

@@ -1,6 +1,6 @@
 @import "constants";
 
-// Mixins
+// Functions
 @function pullForward($c: $colorBodyBg, $p: 20%) {
     // For dark interfaces, lighter things come forward - opposite for light interfaces
     @return darken($c, $p);
@@ -294,3 +294,16 @@ $colorLoadingBg: rgba($colorLoadingFg, 0.1);
 // Transitions
 $transIn: all 50ms ease-in;
 $transOut: all 250ms ease-out;
+
+// Discrete items, like Notebook entries, Widget rules
+@mixin discreteItem() {
+    background: rgba($colorBodyFg,0.1);
+    border: 1px solid $colorInteriorBorder;
+    border-radius: $controlCr;
+    .c-input-inline:hover {
+        background: $colorBodyBg;
+    }
+}
+@mixin discreteItemInnerElem() {
+    border: 1px solid $colorBodyBg;
+    border-radius: $controlCr; }

src/styles-new/_controls.scss

@@ -50,8 +50,9 @@
 }
 
 /********* Buttons */
-// Optionally can include icon in :before
+// Optionally can include icon in :before via markup
-.c-button {
+.c-button,
+button {
     @extend %c-button;
 }
 

src/styles-new/_global.scss

@@ -169,6 +169,48 @@ li {
     padding: 0;
 }
 
+
+/******************************************************** HAS */
+// Local Controls: Controls placed in proximity to or overlaid on components and views
+body.desktop .has-local-controls {
+    // Provides hover ability to show local controls
+    &:hover [class*="local-controls--hidden"] {
+        transition: opacity 50ms ease-in-out;
+        opacity: 1;
+        pointer-events: inherit;
+    }
+
+    [class*="local-controls--hidden"] {
+        transition: opacity 500ms ease-in-out;
+        opacity: 0;
+        pointer-events: none;
+    }
+}
+
+//[class*="local-controls"] {
+//    // An explicit outer holder for controls. Typically placed in upper right.
+//    //font-size: 0.7rem;
+//    display: flex;
+//    align-items: center;
+//    justify-content: flex-end;
+//
+//
+//    &.h-local-controls-overlay-content {
+//        // Imagery controls
+//        $p: $interiorMargin;
+//        position: absolute;
+//        top: $p; right: $p;
+//        z-index: 2;
+//    }
+
+    //.l-btn-set,
+    //.s-button {
+    //    &:not(:first-child) {
+    //        margin-left: $interiorMargin;
+    //    }
+    //}
+//}
+
 /************************** LEGACY */
 
 mct-container {

src/styles-new/legacy-styles.scss

@@ -64,7 +64,7 @@
 @import "../styles/items/item";
 @import "../styles/mobile/item";
 @import "../styles/table";
-@import "../styles/notebook/notebook";
+//@import "../styles/notebook/notebook";
 //
 //!********************************* TO BE MOVED *!
 @import "../styles/autoflow";
@@ -76,4 +76,4 @@
 //@import "../styles/app-start";
 
 @import "../styles/conductor/time-conductor-snow";
-@import "../styles/notebook/notebook-snow";
+//@import "../styles/notebook/notebook-snow";

src/styles-new/notebook.scss

@@ -0,0 +1,385 @@
+/*********************************************** NOTEBOOK */
+@import "sass-base.scss";
+
+
+.c-notebook {
+    //@include test(orange);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+
+    > [class*="__"] + [class*="__"] {
+        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;
+    }
+
+    &__drag-area {
+        background: rgba($colorKey, 0.1);
+        border: 1px dashed rgba($colorKey, 0.7);
+        border-radius: $controlCr;
+        color: rgba($colorBodyFg, 0.7);
+        padding: 10px;
+        cursor: pointer;
+
+        &:before {
+            margin-right: 7px !important;
+        }
+
+        [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;
+        }
+    }
+
+    &__entries {
+        flex-direction: column;
+        flex: 1 1 auto;
+        padding-right: $interiorMarginSm;
+        overflow-x: hidden;
+        overflow-y: scroll;
+
+        [class*="__entry"] + [class*="__entry"] {
+            margin-top: $interiorMarginSm;
+        }
+
+    }
+}
+
+/****************************** ENTRIES */
+.c-ne {
+    // A Notebook entry
+    $p: $interiorMarginSm;
+    @include discreteItem();
+    display: flex;
+    //flex-wrap: wrap;
+    padding: $interiorMarginSm $interiorMarginSm $interiorMarginSm $interiorMargin;
+
+    &__time,
+    &__text,
+    &__local-controls {
+        padding-top: $p;
+        padding-bottom: $p;
+    }
+
+    &__time,
+    &__embed__time {
+        opacity: 0.7;
+    }
+
+    &__time-and-content {
+        display: flex;
+        flex: 1 1 auto;
+        flex-wrap: wrap;
+    }
+
+    &__time {
+        flex: 0 1 auto;
+        min-width: 130px;
+        margin-right: $interiorMarginLg;
+
+        * {
+            white-space: nowrap;
+        }
+    }
+
+    &__content {
+        flex: 1 1 auto;
+
+       > [class*="__"] + [class*="__"] {
+            margin-top: $interiorMarginSm;
+       }
+    }
+
+    &__text {
+        min-height: 24px; // 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;
+
+        > [class*="__embed"] {
+            margin: 0 $interiorMarginSm $interiorMarginSm 0;
+        }
+    }
+}
+
+/****************************** EMBEDS */
+@mixin snapThumb() {
+    // LEGACY: TODO: refactor when .snap-thumb in New Entry dialog is refactored
+    $d: 50px;
+    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
+    .l-sticky-headers .l-tabular-body { overflow: auto; }
+}
+
+/****************************** PAINTERRO OVERRIDES */
+.annotation-dialog .abs.editor {
+    border-radius: 0;
+}
+
+#snap-annotation {
+    $m: $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;
+
+    order: 1;
+    flex: 0 0 auto;
+    height: auto;
+    background-color: transparent !important;
+    margin-bottom: $interiorMargin;
+
+    > div > span {
+        display: flex;
+        align-items: center;
+        font-size: $fs;
+    }
+
+    > div,
+    > div > span,
+    .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
+        &:first-child {
+            margin-left: 0 !important;
+        }
+        display: inline-block;
+        font-family: inherit;
+        font-size: $fs !important;
+        height: $h !important;
+        margin: 0 0 0 5px;
+        position: relative;
+        width: auto !important;
+        line-height: $h !important;
+        top: auto;
+        right: auto;
+        bottom: auto;
+        left: auto;
+        vertical-align: top;
+    }
+
+    .ptro-tool-ctl-name {
+        border-radius: 0;
+        background: none;
+        top: auto;
+        font-family: inherit;
+        padding: 0;
+    }
+
+    .ptro-color-btn {
+        width: $h !important;
+    }
+
+    .ptro-color-control,
+    .ptro-icon-btn,
+    .ptro-named-btn {
+        // Buttons in toolbar. Why the f* they're named like this is a mystery
+        background-color: $colorBtnBg;
+        color: $colorBtnFg;
+        padding: 0 $interiorMargin;
+
+        &:hover {
+            background: $colorBtnBgHov;
+            color: $colorBtnFgHov;
+        }
+
+        i {
+            display: contents;
+            font-size: $fs * 1.2;
+            line-height: inherit;
+        }
+    }
+
+    .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 {
+            flex-direction: column;
+
+            > [class*="__"] + [class*="__"] {
+                margin-left: 0;
+                margin-top: $interiorMargin;
+            }
+        }
+
+        .c-notebook__entry {
+            [class*="text"] {
+                min-height: 0;
+                padding: 0;
+                pointer-events: none;
+            }
+        }
+    }
+}

src/ui/components/controls/search.vue

@@ -47,7 +47,7 @@
         &__input {
             background: none  !important;
             box-shadow: none !important; // !important needed to override default for [input]
-            flex: 0 1 100%;
+            flex: 1 1 auto;
             padding-left: 2px !important;
             padding-right: 2px !important;
             min-width: 10px; // Must be set to allow input to collapse below browser min