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/plugins/notebook/res/templates/embed.html

@@ -1,20 +1,17 @@
-<div
-    class="l-flex-row l-entry-embed"
-    v-bind:class="[embed.cssClass]">
-
-    <div
-        class="snap-thumb"
+<div class="c-ne__embed">
+    <div class="c-ne__embed__snap-thumb"
         v-if="embed.snapshot"
         v-on:click="openSnapshot">
         <img v-bind:src="embed.snapshot.src">
     </div>
-
-    <div class="embed-info l-flex-col">
-        <div class="embed-title object-header">
-            <a v-on:click="navigate(embed.type)">{{embed.name}}</a>
-            <a class='context-available' v-on:click="toggleActionMenu"></a>
+    <div class="c-ne__embed__info">
+        <div class="c-ne__embed__name">
+            <a class="c-ne__embed__link"
+               v-on:click="navigate(embed.type)"
+               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="embed-date" v-if="embed.snapshot">
+        <div class="c-ne__embed__time" 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="holder flex-elem l-flex-row grows w-notebook-entry-time-and-content">
-        <div class="holder flex-elem s-notebook-entry-time">
+    <div class="c-ne__time-and-content">
+        <div class="c-ne__time">
             <span>{{formatTime(entry.createdOn, 'YYYY-MM-DD')}}</span>
             <span>{{formatTime(entry.createdOn, 'HH:mm:ss')}}</span>
         </div>
-
-        <div class="holder flex-elem l-flex-col grows l-notebook-entry-content">
-            <div class="flex-elem s-input-inline t-notebook-entry-input s-notebook-entry-text"
+        <div class="c-ne__content">
+            <!-- TODO: fix styling for c-input-inline when SCSS is merged and remove s-input-inline class here -->
+            <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="flex-elem entry-embeds l-flex-row">
+            <div class="c-ne__embeds">
                 <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">
-                <a class="s-icon-button icon-trash" title="Delete Entry" v-on:click="deleteEntry"></a>
-        </div>
+    <div class="c-ne__local-controls--hidden">
+        <a class="c-icon-button icon-trash"
+           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="l-notebook-head holder l-flex-row flex-elem">
-        <div class="c-search flex-elem holder grows">
-            <input class="c-search__search-input"
-                    type="text" tabindex="10000"
-                    v-model="entrySearch"
-                    v-on:keyup="search($event)"/>
-            <a class="c-search__clear-input clear-icon icon-x-in-circle"
-                v-bind:class="[entrySearch ? 'show': '']"
-                v-on:click="entrySearch = ''; search($event)"></a>
+<div class="c-notebook">
+    <div class="c-notebook__head">
+        <!-- TODO: use search component here -->
+        <div class="c-notebook__search c-search"
+             :class="{ 'is-active': entrySearch }">
+            <input class="c-search__input" type="search"
+                   type="text" tabindex="10000"
+                   v-model="entrySearch"
+                   v-on:keyup="search($event)"/>
+            <a class="c-search__clear-input icon-x-in-circle"
+               v-on:click="entrySearch = ''; search($event)"></a>
         </div>
-
-        <div class="notebook-view-controls l-flex-row flex-elem holder">
-            <div class="select notebook-view-controls__filter-time">
+        <div class="c-notebook__controls">
+            <div class="select c-notebook__controls__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>
-
-    <!--  drag area -->
-    <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>
-    <span class="label">To start a new entry, click here or drag and drop any object</span>
+    <div class="c-notebook__drag-area icon-plus"
+         v-on:click="newEntry($event)"
+         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>
     </div>
-
-    <!-- entries -->
-    <div class="holder flex-elem grows w-notebook-entries t-entries-list" ng-mouseover="handleActive()">
+    <div class="c-notebook__entries" 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');
                 });
             }];