Merge pull request #87 from haystack/develop

Show hidden threads on margin and show msg if there are no threads in sidebar

Author: JumanaFM

public/style/plugin.css

@@ -916,7 +916,7 @@
 }
 #nb-app .nb-sidebar .thread-view .thread-row .footer > span .icon {
   height: 14px;
-  vertical-align: top;
+  vertical-align: bottom;
 }
 
 #nb-app-wrapper .thread-overflow-wrapper .tooltip-arrow {
@@ -1731,7 +1731,49 @@ nb-innotation-controller {
   background-color: #555;
 }
 
+.empty-and-filterd {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  padding: 0 20px;
+  text-align: center;
+}
+
+.empty-and-filterd .filter-icon svg {
+  font-size: 3em !important;
+  transform: initial;
+}
+
+.empty-and-filterd .text {
+  font-size: 1.5em;
+    color: #666;
+    font-weight: bold;
+    margin: 10px;
+}
+
+.empty-and-filterd button {
+  color: #fff;
+    background: #4f2874;
+    height: 30px;
+    width: 100px;
+    font-size: 1.2em;
+    border-radius: 0;
+    border: initial;
+}
+
+.empty-and-filterd button:hover {
+    background: #431f64;
+    color: #fff;
+    border: initial;
+
+}
 
+div.trigger span {
+  display: flex;
+  height: 100%;
+}
 
 /* UC Davis LibreTexts */
 @media (min-width: 83em) {

src/app.js

@@ -154,6 +154,7 @@ function embedNbApp() {
                 <nb-highlights
                     :key="redrawHighlightsKey"
                     :threads="filteredThreads"
+                    :threads-hidden="hiddenThreads"
                     :thread-selected="threadSelected"
                     :threads-hovered="threadsHovered"
                     :draft-range="draftRange"
@@ -408,6 +409,10 @@ function embedNbApp() {
             totalSpotlights: function () {
                 return this.threads.filter(t => (t.spotlight && t.spotlight.type && t.spotlight.type !== 'NONE') ||(t.systemSpotlight && t.systemSpotlight.type && t.systemSpotlight.type !== 'NONE')).length
             },
+            hiddenThreads: function () {
+                let ht = this.threads.filter(t => !this.filteredThreads.includes(t))
+                return ht
+            },
             filteredThreads: function () {
                 let items = this.threads
                 let searchText = this.filter.searchText
@@ -482,7 +487,9 @@ function embedNbApp() {
                 let filterUpvotes = this.filter.upvotes
                 if (filterUpvotes.length > 0) {
                     items = items.filter(item => {
-                        if ( (filterUpvotes.includes('anyone') && item.hasUpvotes()) || (this.currentConfigs.isExpClass && item.hasUserPost(this.user.id))) {
+                        if ( (filterUpvotes.includes('anyone') && item.hasUpvotes())
+                            || (this.currentConfigs.isExpClass && item.hasUserPost(this.user.id))
+                            || (this.currentConfigs.isExpClass && item.hasReplyRequests())) {
                             return true
                         }
                         if (filterUpvotes.includes('me') && item.hasMyUpvotes()) {

src/components/NbSidebar.vue

@@ -46,6 +46,7 @@
             :users="sortedUsers"
             :hashtags="sortedHashtags"
             :sync-config="syncConfig"
+            :filter-visible="filterVisible"
             :current-configs="currentConfigs"
             :filter="filter"
             @search-option="onSearchOption"
@@ -63,7 +64,9 @@
             @max-threads="onMaxThreads"
             @min-replies="onMinReplies"
             @min-reply-reqs="onMinReplyReqs"
-            @min-upvotes="onMinUpvotes">
+            @min-upvotes="onMinUpvotes"
+            @toggle-filters="onToggleFilters"
+            @filter-hide="onFilterHide">
         </filter-view>
         <list-view
             :threads="threads"
@@ -86,7 +89,8 @@
             @toggle-spotlights="onToggleSpotlights"
             @select-thread="onSelectThread"
             @hover-thread="onHoverThread"
-            @unhover-thread="onUnhoverThread">
+            @unhover-thread="onUnhoverThread"
+            @filter-show="onFilterShow">
         </list-view>
         <thread-view
             v-if="threadSelected"
@@ -253,6 +257,7 @@ export default {
     },
     data () {
         return {
+            filterVisible: false,
             replyToComment: null,
             edittingComment: null,
             editor: {
@@ -330,6 +335,15 @@ export default {
                 this.$emit('dragging', true)
             }
         },
+        onToggleFilters: function (event) {
+            this.filterVisible = !this.filterVisible
+        },
+        onFilterHide: function () {
+            this.filterVisible = false
+        },
+        onFilterShow: function () {
+            this.filterVisible = true
+        },
         onHandleRedrawHighlights: function () {
             this.$emit('handle-redraw-highlights')
         },

src/components/editor/EditorView.vue

@@ -46,7 +46,9 @@
       <div class="checkbox-buttons">
         <input type="checkbox" id="draft-request-reply" v-if="currentConfigs.isExpClass" v-model="upvotedByMe">
         <input type="checkbox" id="draft-request-reply" v-else v-model="replyRequested">
-        <label for="draft-request-reply">{{ currentConfigs.isExpClass ? "Discuss with class" : "Request replies" }}</label>
+        <label for="draft-request-reply">{{ currentConfigs.isExpClass ? "Looking for Classmates' Perspectives" : "Request replies" }}</label>
+      </div>
+      <div class="checkbox-buttons">
         <div class="buttons">
           <button class="cancel" @click="cancel" :disabled='isSubmitting'>Cancel</button>
           <button class="submit" @click="submit" :disabled='isSubmitting || !canSubmit'>

src/components/filters/FilterView.vue

@@ -43,12 +43,9 @@
         <span
             class="tooltip-target"
             v-tooltip="filterVisible ? 'hide' : 'show all filters'"
-            @click="toggleFilters">
-          <font-awesome-icon v-if="filterVisible"
-              icon="times-circle" class="icon">
-          </font-awesome-icon>
-          <font-awesome-icon v-else icon="search-plus" class="icon">
-          </font-awesome-icon>
+            @click="onToggleFilters">
+          <font-awesome-icon v-if="filterVisible" icon="times-circle" class="icon"></font-awesome-icon>
+          <font-awesome-icon v-else icon="filter" class="icon"></font-awesome-icon>
         </span>
         <template slot="popover">
           <div class="filter-options">
@@ -70,16 +67,41 @@
               </div>
             </div>
             <div class="title">Max. # of threads</div>
-             <div>
+            <div>
+              <input
+                  type="number"
+                  id="max-threads"
+                  placeholder="n/a"
+                  min="0"
+                  v-model="maxThreads"
+                  @keypress="event => validateNumber(event)"
+                  @change="onFilterChange('max-threads')">
+            </div>
+            <div class="title">{{currentConfigs.isExpClass ? `Looking for Classmates' Perspectives` : 'Upvotes'}}</div>
+            <div class="upvotes">
+              <div>
                 <input
-                    type="number"
-                    id="max-threads"
-                    placeholder="n/a"
-                    min="0"
-                    v-model="maxThreads"
-                    @keypress="event => validateNumber(event)"
-                    @change="onFilterChange('max-threads')">
+                    type="checkbox"
+                    id="anyone-upvotes"
+                    value="anyone"
+                    v-model="filterUpvotes"
+                    @change="onFilterChange('upvotes')">
+                <label for="anyone-upvotes">
+                  anyone
+                </label>
+              </div>
+              <div>
+                <input
+                    type="checkbox"
+                    id="my-upvotes"
+                    value="me"
+                    v-model="filterUpvotes"
+                    @change="onFilterChange('upvotes')">
+                <label for="my-upvotes">
+                  me
+                </label>
               </div>
+            </div>
             <div class="title">Users tagged</div>
             <div class="user-tags">
               <div>
@@ -166,31 +188,7 @@
                 </label>
               </div>
             </div>
-            <div class="title">{{currentConfigs.isExpClass ? 'Discussion comments' : 'Upvotes'}}</div>
-            <div class="upvotes">
-              <div>
-                <input
-                    type="checkbox"
-                    id="anyone-upvotes"
-                    value="anyone"
-                    v-model="filterUpvotes"
-                    @change="onFilterChange('upvotes')">
-                <label for="anyone-upvotes">
-                  anyone
-                </label>
-              </div>
-              <div>
-                <input
-                    type="checkbox"
-                    id="my-upvotes"
-                    value="me"
-                    v-model="filterUpvotes"
-                    @change="onFilterChange('upvotes')">
-                <label for="my-upvotes">
-                  me
-                </label>
-              </div>
-            </div>
+            
             <div class="title">
               Others
             </div>
@@ -424,12 +422,15 @@ export default {
     users: Array,
     hashtags: Array,
     syncConfig: Boolean,
+    filterVisible: {
+        type: Boolean,
+        default: false
+    },
     filter: Object,
     currentConfigs: Object,
   },
   data () {
     return {
-      filterVisible: false,
       filterBookmarks: false,
       filterHashtags: [],
       filterUserTags: [],
@@ -459,7 +460,7 @@ export default {
           if (this.filter.maxThreads !== this.maxThreads) {
               this.maxThreads = this.filter.maxThreads
           }
-      }
+      },
   },
   computed: {
       currentMaxThread: function() {
@@ -503,11 +504,11 @@ export default {
       this.filterBookmarks = !this.filterBookmarks
       this.onFilterChange('bookmarks')
     },
-    toggleFilters: function (event) {
-      this.filterVisible = !this.filterVisible
-    },
     onFilterHide: function () {
-      this.filterVisible = false
+       this.$emit('filter-hide')
+    },
+    onToggleFilters: function () {
+      this.$emit('toggle-filters')
     },
     onFilterChange: function (type) {
       switch (type) {

src/components/highlights/NbHighlight.vue

@@ -34,6 +34,23 @@
         </rect>
 
     </g>
+    <g
+        class="nb-highlight"
+        v-else-if="isHidden"
+        :style="style"
+        v-tooltip.right="{content: getHiddenTooltipContent()}"
+        @click="$emit('select-thread',thread)"
+        @mouseenter="onHover(true)"
+        @mouseleave="onHover(false)">
+        <rect
+            v-for="(box, index) in bounds.boxes"
+            :key="index"
+            :x="bounds.offsetX"
+            :y="box.top + bounds.offsetY"
+            :height="box.height"
+            width="20">
+        </rect>
+    </g>
     <g
         class="nb-highlight"
         v-else
@@ -47,7 +64,7 @@
             :x="bounds.offsetX"
             :y="box.top + bounds.offsetY"
             :height="box.height"
-            width="10">
+            width="20">
         </rect>
     </g>
 </template>
@@ -112,6 +129,10 @@ export default {
             type: Boolean,
             default: false
         }, 
+        isHidden: {
+            type: Boolean,
+            default: false
+        }, 
         currentConfigs: {
             type: Object,
             default: () => {}
@@ -168,6 +189,9 @@ export default {
             return this.thread.systemSpotlight ? this.thread.systemSpotlight : this.thread.spotlight
         },
         style: function () {
+            if (this.isHidden) {
+                return "fill: none; stroke: rgb(255 204 1 / 95%); stroke-dasharray: 3;"
+            }
             if (!this.thread) {
                 return 'fill: rgb(231, 76, 60); fill-opacity: 0.3; cursor: pointer;'
             }
@@ -242,7 +266,7 @@ export default {
             return bounds
         },
         visible: function () {
-            return this.showHighlights || (this.thread === this.threadSelected) || (this.showSpotlights && this.spotlight  && this.spotlight.type === 'EM')
+            return !this.isHidden && (this.showHighlights || (this.thread === this.threadSelected) || (this.showSpotlights && this.spotlight  && this.spotlight.type === 'EM'))
         }
     },
     methods: {
@@ -316,6 +340,17 @@ export default {
 
             }
         },
+        getHiddenTooltipContent: function () {
+            let content = "<span>Filtered comment:</span>"
+            content += "<br>"
+            let text = this.thread.text
+            content += text.substring(0, 30)
+            if (text.length > 30) {
+                content += "..."
+            }
+            return content
+
+        },
         getTooltipContent: function () {
             if (!this.thread || !this.showSyncFeatures) {
                 return ""