WIP PWA for Grain
0
fork

Configure Feed

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

feat: add share button to engagement bar

+38 -3
+2 -2
src/components/atoms/grain-icon.js
··· 5 5 heart: 'fa-regular fa-heart', 6 6 heartFilled: 'fa-solid fa-heart', 7 7 comment: 'fa-regular fa-comment', 8 - share: 'fa-solid fa-paper-plane', 9 8 back: 'fa-solid fa-arrow-left', 10 9 home: 'fa-solid fa-house', 11 10 homeLine: 'fa-regular fa-house', ··· 21 20 ellipsisVertical: 'fa-solid fa-ellipsis-vertical', 22 21 download: 'fa-solid fa-download', 23 22 share: 'fa-solid fa-arrow-up-from-bracket', 24 - camera: 'fa-solid fa-camera' 23 + camera: 'fa-solid fa-camera', 24 + paperPlane: 'fa-regular fa-paper-plane' 25 25 }; 26 26 27 27 export class GrainIcon extends LitElement {
+36 -1
src/components/organisms/grain-engagement-bar.js
··· 1 1 import { LitElement, html, css } from 'lit'; 2 + import { share } from '../../services/share.js'; 2 3 import '../molecules/grain-stat-count.js'; 4 + import '../atoms/grain-icon.js'; 5 + import '../atoms/grain-toast.js'; 3 6 4 7 export class GrainEngagementBar extends LitElement { 5 8 static properties = { 6 9 favoriteCount: { type: Number }, 7 - commentCount: { type: Number } 10 + commentCount: { type: Number }, 11 + url: { type: String } 8 12 }; 9 13 10 14 static styles = css` ··· 20 24 padding-right: 0; 21 25 } 22 26 } 27 + .share-button { 28 + display: flex; 29 + align-items: center; 30 + justify-content: center; 31 + background: none; 32 + border: none; 33 + padding: var(--space-sm); 34 + margin: calc(-1 * var(--space-sm)); 35 + cursor: pointer; 36 + color: var(--color-text-primary); 37 + border-radius: var(--border-radius); 38 + transition: opacity 0.2s; 39 + } 40 + .share-button:hover { 41 + opacity: 0.7; 42 + } 43 + .share-button:active { 44 + transform: scale(0.95); 45 + } 23 46 `; 24 47 25 48 constructor() { 26 49 super(); 27 50 this.favoriteCount = 0; 28 51 this.commentCount = 0; 52 + this.url = ''; 53 + } 54 + 55 + async #handleShare() { 56 + const result = await share(this.url || window.location.href); 57 + if (result.success && result.method === 'clipboard') { 58 + this.shadowRoot.querySelector('grain-toast').show('Link copied'); 59 + } 29 60 } 30 61 31 62 render() { ··· 38 69 icon="comment" 39 70 count=${this.commentCount} 40 71 ></grain-stat-count> 72 + <button class="share-button" type="button" aria-label="Share" @click=${this.#handleShare}> 73 + <grain-icon name="paperPlane" size="16"></grain-icon> 74 + </button> 75 + <grain-toast></grain-toast> 41 76 `; 42 77 } 43 78 }