WIP PWA for Grain
feat: add focus photo thumbnail to comment input
+40
-1
+40
-1
src/components/molecules/grain-comment-input.js
+40
-1
src/components/molecules/grain-comment-input.js
···
8
8
value: { type: String },
9
9
placeholder: { type: String },
10
10
disabled: { type: Boolean },
11
-
loading: { type: Boolean }
11
+
loading: { type: Boolean },
12
+
focusPhotoUrl: { type: String }
12
13
};
13
14
14
15
static styles = css`
···
63
64
grain-spinner {
64
65
--spinner-size: 16px;
65
66
}
67
+
.focus-photo {
68
+
position: relative;
69
+
flex-shrink: 0;
70
+
}
71
+
.focus-photo img {
72
+
width: 32px;
73
+
height: 32px;
74
+
border-radius: 4px;
75
+
object-fit: cover;
76
+
}
77
+
.focus-photo .clear-btn {
78
+
position: absolute;
79
+
top: -4px;
80
+
right: -4px;
81
+
width: 16px;
82
+
height: 16px;
83
+
border-radius: 50%;
84
+
background: var(--color-bg-elevated);
85
+
border: 1px solid var(--color-border);
86
+
display: flex;
87
+
align-items: center;
88
+
justify-content: center;
89
+
cursor: pointer;
90
+
font-size: 10px;
91
+
color: var(--color-text-secondary);
92
+
padding: 0;
93
+
}
66
94
`;
67
95
68
96
constructor() {
···
72
100
this.placeholder = 'Add a comment...';
73
101
this.disabled = false;
74
102
this.loading = false;
103
+
this.focusPhotoUrl = '';
75
104
}
76
105
77
106
#handleInput(e) {
···
88
117
}));
89
118
}
90
119
120
+
#handleClearFocus() {
121
+
this.dispatchEvent(new CustomEvent('clear-focus'));
122
+
}
123
+
91
124
focus() {
92
125
this.shadowRoot.querySelector('input')?.focus();
93
126
}
···
101
134
102
135
return html`
103
136
<grain-avatar src=${this.avatarUrl} size="sm"></grain-avatar>
137
+
${this.focusPhotoUrl ? html`
138
+
<div class="focus-photo">
139
+
<img src=${this.focusPhotoUrl} alt="Commenting on this photo" />
140
+
<button class="clear-btn" @click=${this.#handleClearFocus}>×</button>
141
+
</div>
142
+
` : ''}
104
143
<div class="input-wrapper">
105
144
<input
106
145
type="text"