WIP PWA for Grain
refactor: use grain-form-field in grain-create-gallery
+20
-46
+20
-46
src/components/pages/grain-create-gallery.js
+20
-46
src/components/pages/grain-create-gallery.js
···
4
4
import { draftGallery } from '../../services/draft-gallery.js';
5
5
import '../atoms/grain-icon.js';
6
6
import '../atoms/grain-button.js';
7
+
import '../atoms/grain-input.js';
8
+
import '../atoms/grain-textarea.js';
9
+
import '../molecules/grain-form-field.js';
7
10
8
11
const UPLOAD_BLOB_MUTATION = `
9
12
mutation UploadBlob($data: String!, $mimeType: String!) {
···
117
120
.form {
118
121
padding: var(--space-sm);
119
122
}
120
-
.form input,
121
-
.form textarea {
122
-
width: 100%;
123
-
padding: var(--space-sm);
124
-
border: 1px solid var(--color-border);
125
-
border-radius: 6px;
126
-
background: var(--color-bg-primary);
127
-
color: var(--color-text-primary);
128
-
font-size: var(--font-size-sm);
129
-
font-family: inherit;
130
-
margin-bottom: var(--space-sm);
131
-
box-sizing: border-box;
132
-
}
133
-
.form textarea {
134
-
min-height: 100px;
135
-
resize: vertical;
136
-
}
137
-
.form input:focus,
138
-
.form textarea:focus {
139
-
outline: none;
140
-
border-color: var(--color-accent, #0066cc);
141
-
}
142
123
.error {
143
124
color: #ff4444;
144
125
padding: var(--space-sm);
145
126
text-align: center;
146
-
}
147
-
.char-count {
148
-
font-size: var(--font-size-xs);
149
-
color: var(--color-text-secondary);
150
-
text-align: right;
151
-
margin-top: -8px;
152
-
margin-bottom: var(--space-sm);
153
127
}
154
128
`;
155
129
···
186
160
}
187
161
188
162
#handleTitleChange(e) {
189
-
this._title = e.target.value.slice(0, 100);
163
+
this._title = e.detail.value.slice(0, 100);
190
164
}
191
165
192
166
#handleDescriptionChange(e) {
193
-
this._description = e.target.value.slice(0, 1000);
167
+
this._description = e.detail.value.slice(0, 1000);
194
168
}
195
169
196
170
get #canPost() {
···
306
280
${this._error ? html`<p class="error">${this._error}</p>` : ''}
307
281
308
282
<div class="form">
309
-
<input
310
-
type="text"
311
-
placeholder="Add a title..."
312
-
.value=${this._title}
313
-
@input=${this.#handleTitleChange}
314
-
maxlength="100"
315
-
>
316
-
<div class="char-count">${this._title.length}/100</div>
283
+
<grain-form-field .value=${this._title} .maxlength=${100}>
284
+
<grain-input
285
+
placeholder="Add a title..."
286
+
.value=${this._title}
287
+
@input=${this.#handleTitleChange}
288
+
></grain-input>
289
+
</grain-form-field>
317
290
318
-
<textarea
319
-
placeholder="Add a description (optional)..."
320
-
.value=${this._description}
321
-
@input=${this.#handleDescriptionChange}
322
-
maxlength="1000"
323
-
></textarea>
324
-
<div class="char-count">${this._description.length}/1000</div>
291
+
<grain-form-field .value=${this._description} .maxlength=${1000}>
292
+
<grain-textarea
293
+
placeholder="Add a description (optional)..."
294
+
.value=${this._description}
295
+
.maxlength=${1000}
296
+
@input=${this.#handleDescriptionChange}
297
+
></grain-textarea>
298
+
</grain-form-field>
325
299
</div>
326
300
`;
327
301
}