From 44b783288ffe44b6abb9ccb810a985bcc1661821 Mon Sep 17 00:00:00 2001 From: Jumana Almahmoud Date: Fri, 6 Oct 2023 01:29:04 -0400 Subject: [PATCH 1/3] WIP show hidden threads on margin and show msg if there is no thread --- public/style/plugin.css | 42 ++++++++++++++++++++++ src/app.js | 5 +++ src/components/NbSidebar.vue | 18 ++++++++-- src/components/filters/FilterView.vue | 24 ++++++------- src/components/highlights/NbHighlight.vue | 39 ++++++++++++++++++-- src/components/highlights/NbHighlights.vue | 23 ++++++++++++ src/components/list/ListView.vue | 18 ++++++++++ 7 files changed, 153 insertions(+), 16 deletions(-) diff --git a/public/style/plugin.css b/public/style/plugin.css index 648681e..a39ad55 100644 --- a/public/style/plugin.css +++ b/public/style/plugin.css @@ -1667,7 +1667,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) { diff --git a/src/app.js b/src/app.js index 0c15748..4d1418c 100644 --- a/src/app.js +++ b/src/app.js @@ -155,6 +155,7 @@ function embedNbApp() { (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 diff --git a/src/components/NbSidebar.vue b/src/components/NbSidebar.vue index bf47db7..2bd140a 100644 --- a/src/components/NbSidebar.vue +++ b/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"> + @unhover-thread="onUnhoverThread" + @filter-show="onFilterShow"> - - - - + @click="onToggleFilters"> + + @@ -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 / 55%); 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 = "Filtered comment:" + content += "
" + 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 "" diff --git a/src/components/highlights/NbHighlights.vue b/src/components/highlights/NbHighlights.vue index 084531c..a80d8e1 100644 --- a/src/components/highlights/NbHighlights.vue +++ b/src/components/highlights/NbHighlights.vue @@ -18,6 +18,25 @@ @unhover-thread="$emit('unhover-thread',thread)" @new-recent-thread="$emit('new-recent-thread', thread)"> + + @@ -56,6 +75,10 @@ export default { type: Array, default: () => [] }, + threadsHidden: { + type: Array, + default: () => [] + }, threadSelected: Object, threadsHovered: { type: Array, diff --git a/src/components/list/ListView.vue b/src/components/list/ListView.vue index a1e795d..fae934e 100644 --- a/src/components/list/ListView.vue +++ b/src/components/list/ListView.vue @@ -53,6 +53,15 @@

Fetching Annotations...

+
+
+ +
+
Filters are applied, edit filters to show more threads
+ +
0) + }, currentThreadsCount: function () { return this.threads.length }, @@ -245,6 +257,12 @@ export default { onHandleRedrawHighlights: function () { this.$emit('handle-redraw-highlights') }, + onFilterShow: function () { + this.$emit('filter-show') + }, + onHandleClearFilters: function () { + this.$emit('handle-clear-filters') + }, toggleHighlights: function () { if( this.showHighlights ) { this.onLogNb('HIDE_HIGHLIGHT') From 0ebbdcee25ed4cb01a7e725f60ece731490c85a9 Mon Sep 17 00:00:00 2001 From: Jumana Almahmoud Date: Mon, 6 Nov 2023 13:35:06 -0500 Subject: [PATCH 2/3] show hidden threads on margin and show msg if there is no thread --- src/components/highlights/NbHighlight.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/highlights/NbHighlight.vue b/src/components/highlights/NbHighlight.vue index d63df34..90d214c 100644 --- a/src/components/highlights/NbHighlight.vue +++ b/src/components/highlights/NbHighlight.vue @@ -190,7 +190,7 @@ export default { }, style: function () { if (this.isHidden) { - return "fill: none; stroke: rgb(255 204 1 / 55%); stroke-dasharray: 3;" + return "fill: none; stroke: rgb(255 204 1 / 75%); stroke-dasharray: 3;" } if (!this.thread) { return 'fill: rgb(231, 76, 60); fill-opacity: 0.3; cursor: pointer;' From 6ca724ecc1a1406a027fb78191b7ef37e06b1de2 Mon Sep 17 00:00:00 2001 From: Jumana Almahmoud Date: Fri, 10 Nov 2023 02:04:31 -0500 Subject: [PATCH 3/3] change Exp label --- public/style/plugin.css | 2 +- src/app.js | 4 +- src/components/editor/EditorView.vue | 4 +- src/components/filters/FilterView.vue | 67 ++++++++++++----------- src/components/highlights/NbHighlight.vue | 2 +- src/components/thread/ThreadComment.vue | 8 +-- 6 files changed, 46 insertions(+), 41 deletions(-) diff --git a/public/style/plugin.css b/public/style/plugin.css index 39f4bb0..308fbfd 100644 --- a/public/style/plugin.css +++ b/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 { diff --git a/src/app.js b/src/app.js index 537cea2..7b28153 100644 --- a/src/app.js +++ b/src/app.js @@ -487,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()) { diff --git a/src/components/editor/EditorView.vue b/src/components/editor/EditorView.vue index dae3eaa..faa5039 100644 --- a/src/components/editor/EditorView.vue +++ b/src/components/editor/EditorView.vue @@ -46,7 +46,9 @@
- + +
+
Max. # of threads
-
+
+ +
+
{{currentConfigs.isExpClass ? `Looking for Classmates' Perspectives` : 'Upvotes'}}
+
+
+ type="checkbox" + id="anyone-upvotes" + value="anyone" + v-model="filterUpvotes" + @change="onFilterChange('upvotes')"> + +
+
+ +
+
Users tagged
@@ -163,31 +188,7 @@
-
{{currentConfigs.isExpClass ? 'Discussion comments' : 'Upvotes'}}
-
-
- - -
-
- - -
-
+
Others
diff --git a/src/components/highlights/NbHighlight.vue b/src/components/highlights/NbHighlight.vue index 90d214c..2d7ecfa 100644 --- a/src/components/highlights/NbHighlight.vue +++ b/src/components/highlights/NbHighlight.vue @@ -190,7 +190,7 @@ export default { }, style: function () { if (this.isHidden) { - return "fill: none; stroke: rgb(255 204 1 / 75%); stroke-dasharray: 3;" + 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;' diff --git a/src/components/thread/ThreadComment.vue b/src/components/thread/ThreadComment.vue index 39d9ab2..9db0d7d 100644 --- a/src/components/thread/ThreadComment.vue +++ b/src/components/thread/ThreadComment.vue @@ -104,11 +104,11 @@  ·  - - - {{ comment.upvoteCount }} + 👁️‍🗨️ + + {{ comment.upvoteCount }}  ·