Skip to content

Commit fc654d8

Browse files
evandorevandor
committed
wip
1 parent c6f239d commit fc654d8

File tree

13 files changed

+178
-67
lines changed

13 files changed

+178
-67
lines changed

‎commands/AddTabToTabsetCommand.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@ export class AddTabToTabsetCommand implements Command<any> {
7878
this.tab.tabReferences = this.tab.tabReferences.concat(useContentStore().currentTabReferences)
7979

8080
// Article (ReaderMode)
81-
console.log('checking article', useContentStore().currentTabArticle)
8281
if (useFeaturesStore().hasFeature(FeatureIdent.READING_MODE)) {
82+
console.log('checking article', useContentStore().currentTabArticle)
8383
const article = useContentStore().currentTabArticle
8484
if (article && article['title' as keyof object] && article['textContent' as keyof object]) {
8585
const content: string = article['textContent' as keyof object]

‎components/helper/SidePanelSharedInfoMarkup.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<template>
2+
<span></span>
3+
</template>
4+
<script lang="ts" setup></script>

‎layouts/TabGrid2.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
>
4848
<q-menu touch-position context-menu v-if="inBexMode()">
4949
<q-list dense style="min-width: 100px">
50-
<q-item clickable v-close-popup @click="createThumbnail(item.tab)">
50+
<q-item clickable v-close-popup @click="createThumbnail(item.tab, props.tabset)">
5151
<q-item-section>(re-)create thumbnail</q-item-section>
5252
</q-item>
5353
</q-list>
@@ -223,7 +223,7 @@ const movedEvent = (i: any, newX: any, newY: any) => {
223223
}
224224
}
225225
226-
const createThumbnail = async (tab: Tab) => {
226+
const createThumbnail = async (tab: Tab, tabset: Tabset) => {
227227
if (!tab || !tab.url) {
228228
return
229229
}
@@ -234,10 +234,10 @@ const createThumbnail = async (tab: Tab) => {
234234
if (openTab) {
235235
console.log('found open tab', openTab.id)
236236
await chrome.tabs.update(openTab.id || 0, { active: true })
237-
useThumbnailsService().captureVisibleTab(tab.id, '?????', (tabId: string, tabsetId: string, dataUrl: string) => {
237+
useThumbnailsService().captureVisibleTab(tab.id, tabset.id, (tabId: string, tabsetId: string, dataUrl: string) => {
238238
AppEventDispatcher.dispatchEvent('capture-screenshot', {
239239
tabId: tabId,
240-
tabsetId: '?????',
240+
tabsetId: tabset.id,
241241
data: dataUrl,
242242
})
243243
if (currentTab) {

‎models/Tab.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,7 @@ export class Tab {
162162
// canvasHeight: number | undefined
163163

164164
comments: TabComment[] = []
165+
commentsLastUpdated: number = 0
165166

166167
snippets: TabSnippet[] = []
167168

‎persistence/IndexedDbTabsetsPersistence.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ class IndexedDbTabsetsPersistence implements TabsetsPersistence {
101101
loadPublicTabset(sharedId: string): Promise<Tabset> {
102102
const useDb = useDB().tabsetsDb
103103
// delegate to cloud db
104-
return useDb.loadPublicTabset(sharedId)
104+
return useDb.loadPublicTabset(sharedId, '???')
105105
}
106106

107107
shareWith(

‎persistence/TabsetsPersistence.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ interface TabsetsPersistence {
3434
sharedBy: string | undefined,
3535
): Promise<TabsetSharing | void>
3636

37-
loadPublicTabset(sharedId: string): Promise<Tabset>
37+
loadPublicTabset(sharedId: string, sharedBy: string | undefined): Promise<Tabset>
3838

3939
// optional migration code for 0.4.11 to 0.5.0
4040
migrate(): any

‎stores/tabsetsStore.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -460,7 +460,7 @@ export const useTabsetsStore = defineStore('tabsets', () => {
460460
return tabset.tabs.filter((t: Tab) => t.page !== undefined)
461461
}
462462

463-
const loadPublicTabset = (sharedId: string) => storage.loadPublicTabset(sharedId)
463+
const loadPublicTabset = (sharedId: string) => storage.loadPublicTabset(sharedId, undefined)
464464

465465
const removeReminder = (tab: Tab) =>
466466
(reminderTabset.value.tabs = reminderTabset.value.tabs.filter((t: Tab) => t.id !== tab.id))

‎widgets/ImageForTab.vue‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<q-img
3+
v-if="thumbnail"
4+
style="border: 0 dotted white; border-radius: 3px; cursor: move"
5+
:ratio="16 / 9"
6+
:src="thumbnail">
7+
<q-tooltip class="tooltip" :delay="1000" v-if="useSettingsStore().has('DEBUG_MODE')">Thumbnail</q-tooltip>
8+
</q-img>
9+
<q-img
10+
v-else-if="props.tab.image && props.tab.image.startsWith('blob://')"
11+
no-spinner
12+
style="border: 0 dotted white; border-radius: 5px"
13+
:src="imgFromBlob">
14+
<q-tooltip class="tooltip" :delay="1000" v-if="useSettingsStore().has('DEBUG_MODE')"
15+
>tab.image typeof blob
16+
</q-tooltip>
17+
</q-img>
18+
<q-img
19+
v-else-if="props.tab.image"
20+
style="border: 0 dotted white; border-radius: 5px"
21+
:src="props.tab.image"
22+
no-spinner>
23+
<q-tooltip class="tooltip" :delay="1000" v-if="useSettingsStore().has('DEBUG_MODE')">tab.image other </q-tooltip>
24+
</q-img>
25+
<q-img
26+
v-else
27+
no-spinner
28+
style="border: 0 dotted white; border-radius: 3px; cursor: move"
29+
:ratio="16 / 9"
30+
src="https://placehold.co/600x400?text=no+thumbnail" />
31+
</template>
32+
<script lang="ts" setup>
33+
import { useSettingsStore } from 'src/core/stores/settingsStore'
34+
import { Tab } from 'src/tabsets/models/Tab'
35+
import { useTabsetService } from 'src/tabsets/services/TabsetService2'
36+
import { useTabsetsStore } from 'src/tabsets/stores/tabsetsStore'
37+
import { useThumbnailsService } from 'src/thumbnails/services/ThumbnailsService'
38+
import { useAuthStore } from 'stores/authStore'
39+
import { ref, watchEffect } from 'vue'
40+
41+
const props = defineProps<{ tab: Tab; sharedById: string | undefined }>()
42+
43+
const imgFromBlob = ref<string>('')
44+
const thumbnail = ref<string | undefined>(undefined)
45+
46+
watchEffect(() => {
47+
if (useTabsetsStore().loaded) {
48+
const blobImgPath = props.tab.image
49+
if (blobImgPath && blobImgPath.startsWith('blob://')) {
50+
console.log('starting with blob', blobImgPath)
51+
useTabsetService()
52+
.getBlob(blobImgPath.replace('blob://', ''))
53+
.then((res) => {
54+
let reader = new FileReader()
55+
reader.readAsDataURL(res.content)
56+
reader.onloadend = function () {
57+
let base64data = reader.result
58+
if (base64data) {
59+
imgFromBlob.value = base64data as string
60+
}
61+
}
62+
})
63+
.catch((err) => console.error(err))
64+
}
65+
}
66+
})
67+
68+
const thumbnailFor = async (tab: Tab): Promise<string> => {
69+
return useThumbnailsService().getThumbnailFor(tab.id, props.sharedById ? props.sharedById : useAuthStore().user.uid)
70+
}
71+
72+
// eslint-disable-next-line @typescript-eslint/no-misused-promises
73+
watchEffect(async () => {
74+
if (props.tab) {
75+
//console.log('>>>getting for ', props.tab.id, props.sharedById)
76+
try {
77+
thumbnail.value = await thumbnailFor(props.tab)
78+
} catch (err: any) {
79+
console.log('problem getting thumbnail', err)
80+
}
81+
// .then((tn: string) => {
82+
// console.log('data', tn)
83+
// if (tn) {
84+
// thumbnail.value = tn
85+
// }
86+
//})
87+
}
88+
})
89+
</script>

‎widgets/PanelTabListContextMenu.vue‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@
1313
</q-item-section>
1414
<q-item-section> Tab Details (dev)</q-item-section>
1515
</q-item>
16+
<q-item clickable v-close-popup @click.stop="showTabsJson(props['tab' as keyof object])">
17+
<q-item-section style="padding-right: 0; min-width: 25px; max-width: 25px">
18+
<q-icon size="xs" name="o_info" color="accent" />
19+
</q-item-section>
20+
<q-item-section>Tab's JSON</q-item-section>
21+
</q-item>
1622
</template>
1723

1824
<q-separator inset />
@@ -23,8 +29,7 @@
2329
<q-item-section> Edit Tab</q-item-section>
2430
</q-item>
2531

26-
<template
27-
v-if="useSettingsStore().has('DEV_MODE') && props.tabset?.type.toString() !== TabsetType.DYNAMIC.toString()">
32+
<template v-if="props.tabset?.type.toString() !== TabsetType.DYNAMIC.toString()">
2833
<q-item clickable v-close-popup @click.stop="addCommentDialog()">
2934
<q-item-section style="padding-right: 0; min-width: 25px; max-width: 25px">
3035
<q-icon size="xs" name="o_note" color="info" />
@@ -191,10 +196,14 @@ const deleteTab = async () => {
191196
192197
const showTabDetails = async (tab: Tab) => {
193198
const useTab: Tab = await tabToUse(tab)
194-
console.log('showing tab details for', useTab)
195199
router.push('/sidepanel/tab/' + useTab.id)
196200
}
197201
202+
const showTabsJson = async (tab: Tab) => {
203+
const useTab: Tab = await tabToUse(tab)
204+
useNavigationService().browserTabFor(chrome.runtime.getURL(`/www/index.html#/mainpanel/tab/${useTab.id}?tab=debug`))
205+
}
206+
198207
const showTabDetailsMenuEntry = (tab: Tab) => useSettingsStore().has('DEV_MODE') && !fullpageView
199208
200209
const deleteTabLabel = (tab: Tab) =>

‎widgets/PanelTabListElementWidget2.vue‎

Lines changed: 58 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@
1818
</div>
1919
<div
2020
class="text-right"
21-
:style="TabService.isCurrentTab(props.tab) ? 'border-right:3px solid #1565C0;border-radius:3px' : ''">
21+
:style="
22+
TabService.isCurrentTab(props.tab)
23+
? 'border-right:3px solid #1565C0;border-radius:3px'
24+
: 'border-right:3px solid #F5F5F5;border-radius:3px'
25+
">
2226
<slot name="actionPart">
2327
<q-icon
2428
v-if="(props.tab as Tab).placeholders"
@@ -40,16 +44,17 @@
4044
<q-tooltip class="tooltip-small">Click here to open in Reading Mode</q-tooltip>
4145
</q-icon>
4246

43-
<q-icon
47+
<q-btn
4448
v-if="(props.tab as Tab).comments && (props.tab as Tab).comments.length > 0"
45-
name="o_chat"
46-
size="16px"
47-
color="primary"
48-
style="position: relative; top: 1px"
49-
class="q-ma-none q-pa-none q-ml-xs"
49+
icon="o_chat"
50+
flat
51+
size="12px"
52+
style="position: relative; top: 4px"
53+
class="q-ma-none q-pa-none q-mx-xs"
5054
@click.stop="toggleShowWith('comments')">
55+
<q-badge floating color="warning" text-color="primary">{{ newCommentsCount() }}</q-badge>
5156
<q-tooltip class="tooltip-small">There are comments for this tab</q-tooltip>
52-
</q-icon>
57+
</q-btn>
5358

5459
<q-icon
5560
v-if="props.tab.reminder"
@@ -161,19 +166,36 @@
161166
style="border: 0 solid brown">
162167
<div class="col-1 q-ml-sm q-mt-xs"></div>
163168
<div class="col">
164-
<div
165-
v-if="showCommentList"
166-
v-for="c in props.tab.comments.sort((a: TabComment, b: TabComment) => b.date - a.date)"
167-
class="row q-mr-md q-mt-sm q-pa-sm"
168-
style="border: 1px solid #efefef; border-radius: 3px">
169-
<div class="col-10 text-body2" @click.stop="editComment(c)">
170-
{{ c.comment }}
169+
<template v-if="showCommentList">
170+
<div
171+
v-if="showCommentList"
172+
v-for="c in props.tab.comments.sort((a: TabComment, b: TabComment) => a.date - b.date)"
173+
class="row q-mr-md q-mt-sm q-pa-sm"
174+
:style="
175+
c.date > commentsUpdateThreshold
176+
? 'border: 1px solid blue; border-radius: 3px'
177+
: 'border: 1px solid #efefef; border-radius: 3px'
178+
">
179+
<div class="col-10 text-body2" @click.stop="editComment(c)">{{ c.comment }}</div>
180+
<div class="col text-right">
181+
<q-icon size="14px" color="primary" name="sym_o_delete" @click.stop="deleteComment(c)" />
182+
</div>
183+
<div class="col-12 text-right text-caption q-mt-xs">{{ formatDate(c.date) }}</div>
171184
</div>
172-
<div class="col text-right">
173-
<q-icon size="14px" color="primary" name="sym_o_delete" @click.stop="deleteComment(c)" />
185+
<div class="row">
186+
<div class="col-10 q-mx-sm">
187+
<q-input type="text" filled dense autogrow v-model="newComment" />
188+
</div>
189+
<div class="col q-pr-sm" style="border: 0 solid green; display: flex">
190+
<q-icon
191+
name="send"
192+
@click="addComment()"
193+
color="warning"
194+
style="align-self: center; margin-left: auto"
195+
:disable="!newComment" />
196+
</div>
174197
</div>
175-
<div class="col-12 text-right text-caption q-mt-xs">{{ formatDate(c.date) }}</div>
176-
</div>
198+
</template>
177199
<div
178200
v-else-if="props.tab.comments.length > 0"
179201
class="q-ml-sm text-caption"
@@ -399,6 +421,7 @@ import { RestTab } from 'src/rest/models/RestTab'
399421
import TabService from 'src/services/TabService'
400422
import { Suggestion } from 'src/suggestions/domain/models/Suggestion'
401423
import { useSuggestionsStore } from 'src/suggestions/stores/suggestionsStore'
424+
import { AddCommentCommand } from 'src/tabsets/commands/AddCommentCommand'
402425
import { CreateFolderCommand } from 'src/tabsets/commands/CreateFolderCommand'
403426
import { DeleteCommentCommand } from 'src/tabsets/commands/DeleteCommentCommand'
404427
import { OpenTabCommand } from 'src/tabsets/commands/OpenTabCommand'
@@ -435,14 +458,17 @@ const suggestion = ref<Suggestion | undefined>(undefined)
435458
const doShowDetails = ref(false)
436459
const showCommentList = ref(false)
437460
const showRssFeedList = ref(false)
461+
const commentsUpdateThreshold = ref(0)
438462
const showPlaceholderList = ref(false)
439463
const opensearchterm = ref<string | undefined>(undefined)
440464
const monitor = ref<MonitoredTab | undefined>(undefined)
441465
const rssTabReferences = ref<TabReference[]>(
442466
props.tab.tabReferences?.filter((r: TabReference) => r.type === TabReferenceType.RSS && r.status !== 'IGNORED'),
443467
)
468+
const newComment = ref<string | undefined>(undefined)
444469
445470
onMounted(() => {
471+
commentsUpdateThreshold.value = props.tab.commentsLastUpdated || 0
446472
// if (props.tabset?.id) {
447473
// newCommentIds.value = useEventsServices().listNewComments(props.tabset.id, props.tab)
448474
// }
@@ -477,6 +503,10 @@ const toggleLists = (ident: string) => {
477503
case 'comments':
478504
showCommentList.value = !showCommentList.value
479505
console.log('showCommentList set to', showCommentList.value)
506+
if (showCommentList.value && props.tab) {
507+
props.tab.commentsLastUpdated = new Date().getTime()
508+
console.log('***', props.tab.commentsLastUpdated)
509+
}
480510
break
481511
case 'placeholder':
482512
showPlaceholderList.value = !showPlaceholderList.value
@@ -647,6 +677,15 @@ const callRestApi = (tab: Tab) => {
647677
console.log(`about to call ${restTab.api} with ${JSON.stringify(restTab.params)}`)
648678
useNavigationService().browserTabFor(chrome.runtime.getURL('www/index.html/#/mainpanel/restapi/' + restTab.id))
649679
}
680+
681+
const addComment = () => {
682+
if (newComment.value) {
683+
useCommandExecutor().executeFromUi(new AddCommentCommand(props.tab.id, newComment.value))
684+
}
685+
}
686+
687+
const newCommentsCount = () =>
688+
props.tab.comments.filter((c: TabComment) => c.date > commentsUpdateThreshold.value).length
650689
</script>
651690

652691
<style lang="scss" src="src/tabsets/widgets/css/panelTabListElementWidget.scss" />

0 commit comments

Comments
 (0)