WIP PWA for Grain
feat: integrate comment sheet into gallery detail page
+26
-1
+26
-1
src/components/pages/grain-gallery-detail.js
+26
-1
src/components/pages/grain-gallery-detail.js
···
9
9
import '../organisms/grain-image-carousel.js';
10
10
import '../organisms/grain-engagement-bar.js';
11
11
import '../organisms/grain-comment-list.js';
12
+
import '../organisms/grain-comment-sheet.js';
12
13
import '../atoms/grain-spinner.js';
13
14
import '../atoms/grain-icon.js';
14
15
import '../organisms/grain-action-dialog.js';
···
51
52
_loading: { state: true },
52
53
_error: { state: true },
53
54
_menuOpen: { state: true },
54
-
_deleting: { state: true }
55
+
_deleting: { state: true },
56
+
_commentSheetOpen: { state: true }
55
57
};
56
58
57
59
static styles = css`
···
127
129
this._error = null;
128
130
this._menuOpen = false;
129
131
this._deleting = false;
132
+
this._commentSheetOpen = false;
130
133
}
131
134
132
135
connectedCallback() {
···
242
245
}
243
246
}
244
247
248
+
#handleCommentClick() {
249
+
if (!auth.isAuthenticated) {
250
+
this.dispatchEvent(new CustomEvent('show-login', {
251
+
bubbles: true,
252
+
composed: true
253
+
}));
254
+
return;
255
+
}
256
+
this._commentSheetOpen = true;
257
+
}
258
+
259
+
#handleCommentSheetClose() {
260
+
this._commentSheetOpen = false;
261
+
}
262
+
245
263
#formatDate(iso) {
246
264
const date = new Date(iso);
247
265
const now = new Date();
···
351
369
galleryUri=${this._gallery.uri || ''}
352
370
?viewerHasFavorited=${this._gallery.viewerHasFavorited}
353
371
viewerFavoriteUri=${this._gallery.viewerFavoriteUri || ''}
372
+
@comment-click=${this.#handleCommentClick}
354
373
></grain-engagement-bar>
355
374
356
375
<div class="content">
···
375
394
@action=${this.#handleAction}
376
395
@close=${this.#handleMenuClose}
377
396
></grain-action-dialog>
397
+
398
+
<grain-comment-sheet
399
+
?open=${this._commentSheetOpen}
400
+
galleryUri=${this._gallery?.uri || ''}
401
+
@close=${this.#handleCommentSheetClose}
402
+
></grain-comment-sheet>
378
403
</grain-feed-layout>
379
404
`;
380
405
}