Fossil

Check-in [858e8153a7]
Login

Check-in [858e8153a7]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Button size tweaks for compact mode, to make them slightly more accessible on mobile devices.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | chat-input-rework
Files: files | file ages | folders
SHA3-256: 858e8153a7e676a9a6d9056299b6f02f412972167dbf9691a286081a46323def
User & Date: stephan 2021-10-01 15:49:35.353
Context
2021-10-01
17:14
In compact mode, move the buttons below the input field in order to stop truncation and button layout shifting as the input field automatically resizes during editing. Takes up more a bit more space but provides better UX. ... (check-in: fe0760c95d user: stephan tags: chat-input-rework)
15:49
Button size tweaks for compact mode, to make them slightly more accessible on mobile devices. ... (check-in: 858e8153a7 user: stephan tags: chat-input-rework)
14:14
Added file attachment widget toggle (on by default) and reversed order of config options (top-down instead of bottom-up) because that simply seems more intuitive. ... (check-in: 40cdaeecd4 user: stephan tags: chat-input-rework)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/chat.c.
︙︙
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182

  @         title="Preview message (Shift-Enter)">&#128065;</button>
  @       <button id="chat-settings-button" \
  @         title="Configure chat">&#9881;</button>
  @       <button id="chat-message-submit" \
  @         title="Send message (Ctrl-Enter)">&#128228;</button>
  @     </div>
  @   </div>
  @   <div id='chat-input-file-area'>
  @     <div class='file-selection-wrapper'>
  @       <div class='help-buttonlet'>
  @        Select a file to upload, drag/drop a file into this spot,
  @        or paste an image from the clipboard if supported by
  @        your environment.
  @       </div>
  @       <input type="file" name="file" id="chat-input-file">








|








168
169
170
171
172
173
174
175
176
177
178
179
180
181
182

  @         title="Preview message (Shift-Enter)">&#128065;</button>
  @       <button id="chat-settings-button" \
  @         title="Configure chat">&#9881;</button>
  @       <button id="chat-message-submit" \
  @         title="Send message (Ctrl-Enter)">&#128228;</button>
  @     </div>
  @   </div>
  @   <div id='chat-input-file-area' class='hidden'>
  @     <div class='file-selection-wrapper'>
  @       <div class='help-buttonlet'>
  @        Select a file to upload, drag/drop a file into this spot,
  @        or paste an image from the clipboard if supported by
  @        your environment.
  @       </div>
  @       <input type="file" name="file" id="chat-input-file">
︙︙
Changes to src/style.chat.css.
︙︙
215
216
217
218
219
220
221










222
223
224
225
226
227
228

  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
}
/*body.chat #chat-input-line:not(.compact) {
  flex-wrap: nowrap;
}*/










body.chat #chat-input-line.compact #chat-input-field {
}

body.chat #chat-edit-buttons {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;








>
>
>
>
>
>
>
>
>
>








215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238

  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
}
/*body.chat #chat-input-line:not(.compact) {
  flex-wrap: nowrap;
}*/
body.chat #chat-input-line.compact {
  /* "The problem" with wrapping, together with a contenteditable input
     field, is that the latter grows as the user types, so causes
     wrapping to happen while they type, then to unwrap as soon as the
     input field is cleared (when the message is sent). When we stay
     wrapped in compact mode, the wrapped buttons simply take up too
     much space. */
  /*flex-wrap: wrap;
  justify-content: flex-end;*/
}
body.chat #chat-input-line.compact #chat-input-field {
}

body.chat #chat-edit-buttons {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
︙︙
243
244
245
246
247
248
249

250
251
252
253
254
255
256

body.chat #chat-input-line:not(.compact) #chat-edit-buttons > * {
  max-width: 6ex;
  min-width: 6ex;
  min-height: 6ex;
  max-height: 6ex;
  margin: 0.25em;
}

body.chat #chat-input-line:not(.compact) #chat-input-field {
  /*border-left-style: double;
  border-left-width: 3px;
  border-right-style: double;
  border-right-width: 3px;*/
  min-height: 4rem;
  resize: both;








>








253
254
255
256
257
258
259
260
261
262
263
264
265
266
267

body.chat #chat-input-line:not(.compact) #chat-edit-buttons > * {
  max-width: 6ex;
  min-width: 6ex;
  min-height: 6ex;
  max-height: 6ex;
  margin: 0.25em;
}

body.chat #chat-input-line:not(.compact) #chat-input-field {
  /*border-left-style: double;
  border-left-width: 3px;
  border-right-style: double;
  border-right-width: 3px;*/
  min-height: 4rem;
  resize: both;
︙︙
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286


  The lesser of the two evils seems to be to rely on the browser
  feature that a manual resize of the element will pin its sits.
*/
}

body.chat #chat-input-line.compact #chat-edit-buttons > * {
  margin: 0 0.1em;
  min-width: 4ex;
  max-width: 4ex;
  min-height: 3ex;
  max-height: 3ex;
}

body.chat #chat-input-line > #chat-settings-button{
  margin: 0 0 0 0.25em;
  max-width: 2em;








|
|
|








281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297


  The lesser of the two evils seems to be to rely on the browser
  feature that a manual resize of the element will pin its sits.
*/
}

body.chat #chat-input-line.compact #chat-edit-buttons > * {
  margin: 0 0.125em 0 0.125em;
  min-width: 6ex;
  max-width: unset;
  min-height: 3ex;
  max-height: 3ex;
}

body.chat #chat-input-line > #chat-settings-button{
  margin: 0 0 0 0.25em;
  max-width: 2em;
︙︙