WIP PWA for Grain
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: add focus photo support to comment sheet

+23 -3
+23 -3
src/components/organisms/grain-comment-sheet.js
··· 12 12 static properties = { 13 13 open: { type: Boolean, reflect: true }, 14 14 galleryUri: { type: String }, 15 + focusPhotoUri: { type: String }, 16 + focusPhotoUrl: { type: String }, 15 17 _comments: { state: true }, 16 18 _loading: { state: true }, 17 19 _loadingMore: { state: true }, ··· 20 22 _replyToUri: { state: true }, 21 23 _replyToHandle: { state: true }, 22 24 _pageInfo: { state: true }, 23 - _totalCount: { state: true } 25 + _totalCount: { state: true }, 26 + _focusPhotoUri: { state: true }, 27 + _focusPhotoUrl: { state: true } 24 28 }; 25 29 26 30 static styles = css` ··· 134 138 this._replyToHandle = null; 135 139 this._pageInfo = { hasNextPage: false, endCursor: null }; 136 140 this._totalCount = 0; 141 + this._focusPhotoUri = null; 142 + this._focusPhotoUrl = null; 137 143 } 138 144 139 145 updated(changedProps) { 140 146 if (changedProps.has('open') && this.open && this.galleryUri) { 141 147 this.#loadComments(); 148 + this._focusPhotoUri = this.focusPhotoUri || null; 149 + this._focusPhotoUrl = this.focusPhotoUrl || null; 142 150 } 143 151 } 144 152 ··· 228 236 const commentUri = await mutations.createComment( 229 237 this.galleryUri, 230 238 text, 231 - this._replyToUri 239 + this._replyToUri, 240 + this._focusPhotoUri 232 241 ); 233 242 234 243 // Add new comment to list ··· 240 249 displayName: auth.user?.displayName || '', 241 250 avatarUrl: auth.user?.avatar?.url || '', 242 251 replyToUri: this._replyToUri, 243 - isReply: !!this._replyToUri 252 + isReply: !!this._replyToUri, 253 + focusImageUrl: this._focusPhotoUrl || null, 254 + focusImageAlt: '' 244 255 }; 245 256 246 257 if (this._replyToUri) { ··· 275 286 this._inputValue = ''; 276 287 this._replyToUri = null; 277 288 this._replyToHandle = null; 289 + this._focusPhotoUri = null; 290 + this._focusPhotoUrl = null; 278 291 this.shadowRoot.querySelector('grain-comment-input')?.clear(); 279 292 } catch (err) { 280 293 console.error('Failed to post comment:', err); ··· 295 308 296 309 // Focus input 297 310 this.shadowRoot.querySelector('grain-comment-input')?.focus(); 311 + } 312 + 313 + #handleClearFocus() { 314 + this._focusPhotoUri = null; 315 + this._focusPhotoUrl = null; 298 316 } 299 317 300 318 async #handleDelete(e) { ··· 370 388 avatarUrl=${userAvatarUrl} 371 389 .value=${this._inputValue} 372 390 ?loading=${this._posting} 391 + focusPhotoUrl=${this._focusPhotoUrl || ''} 373 392 @input-change=${this.#handleInputChange} 374 393 @send=${this.#handleSend} 394 + @clear-focus=${this.#handleClearFocus} 375 395 ></grain-comment-input> 376 396 </div> 377 397 </div>