Fossil

Check-in [03f33cd3c2]
Login

Check-in [03f33cd3c2]

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

Overview
Comment:/chat: close config/preview area if user sends a message, to help avoid confusion and a corner-case layout bug. Minor layout tweaking of the single-line edit mode via collaborative /chat effort.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 03f33cd3c290116e97e718bbdd9d708a3a73b0d2c378c497a21aab4f51a2afa2
User & Date: stephan 2021-09-21 14:24:06.574
Context
2021-09-21
14:34
/chat restored accidentally-removed configurable notification sounds. More layout tweaks on chat buttons. ... (check-in: cf81ddf97a user: stephan tags: trunk)
14:24
/chat: close config/preview area if user sends a message, to help avoid confusion and a corner-case layout bug. Minor layout tweaking of the single-line edit mode via collaborative /chat effort. ... (check-in: 03f33cd3c2 user: stephan tags: trunk)
13:34
/chat links now open in a new tab by default. Reduced min-width of input field to help out FF on Android. ... (check-in: cea66528e2 user: stephan tags: trunk)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/chat.c.
︙︙
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196

  @       <input type="file" name="file" id="chat-input-file">
  @     </div>
  @     <div id="chat-drop-details"></div>
  @   </div>
  @ </div>
  @ </form>
  @ <div id='chat-preview' class='hidden'>
  @  <header>Preview:</header>
  @  <div id='chat-preview-content' class='message-widget-content'></div>
  @  <div id='chat-preview-buttons'><button id='chat-preview-close'>Close Preview</button></div>
  @ </div>
  @ <div id='chat-config' class='hidden'>
  @ <div id='chat-config-options'></div>
    /* ^^^populated client-side */
  @ <button>Close Settings</button>








|








182
183
184
185
186
187
188
189
190
191
192
193
194
195
196

  @       <input type="file" name="file" id="chat-input-file">
  @     </div>
  @     <div id="chat-drop-details"></div>
  @   </div>
  @ </div>
  @ </form>
  @ <div id='chat-preview' class='hidden'>
  @  <header>Preview: (<a href='%R/md_rules' target='_blank'>markdown reference</a>)</header>
  @  <div id='chat-preview-content' class='message-widget-content'></div>
  @  <div id='chat-preview-buttons'><button id='chat-preview-close'>Close Preview</button></div>
  @ </div>
  @ <div id='chat-config' class='hidden'>
  @ <div id='chat-config-options'></div>
    /* ^^^populated client-side */
  @ <button>Close Settings</button>
︙︙
Changes to src/chat.js.
︙︙
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158

    */
    Chat.revealPreview = function(showIt){
      if(showIt){
        D.removeClass(Chat.e.previewArea, 'hidden');
        D.addClass([Chat.e.messagesWrapper, Chat.e.configArea],
                   'hidden');
      }else{
        D.addClass(Chat.e.previewArea, 'hidden');
        D.removeClass(Chat.e.messagesWrapper, 'hidden');
      }
      return this;
    };
    Chat.e.previewArea.querySelector('#chat-preview-close').
      addEventListener('click', ()=>Chat.revealPreview(false), false);
    let previewPending = false;








|








1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158

    */
    Chat.revealPreview = function(showIt){
      if(showIt){
        D.removeClass(Chat.e.previewArea, 'hidden');
        D.addClass([Chat.e.messagesWrapper, Chat.e.configArea],
                   'hidden');
      }else{
        D.addClass([Chat.e.configArea, Chat.e.previewArea], 'hidden');
        D.removeClass(Chat.e.messagesWrapper, 'hidden');
      }
      return this;
    };
    Chat.e.previewArea.querySelector('#chat-preview-close').
      addEventListener('click', ()=>Chat.revealPreview(false), false);
    let previewPending = false;
︙︙
Changes to src/style.chat.css.
︙︙
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230

231
232
233
234
235
236
237
238
239
240
241
242



243
244
245
246
247
248
249
250
251
252
253
254



255
256
257
258
259
260
261

262
263
264
265
266
267
268

}

/* Widget holding the chat message input field, send button, and
   settings button. */
body.chat #chat-input-line {
  display: flex;
  flex-direction: row;
  margin-bottom: 0.25em;
  align-items: stretch;
}
body.chat #chat-input-line.single-line {
  flex-wrap: wrap;
  margin-bottom: 0.25em;
}
body.chat #chat-edit-buttons {

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body.chat #chat-input-line.single-line #chat-edit-buttons {
  flex-direction: row;
}
body.chat #chat-edit-buttons > * {
  /*flex: 1 5 auto;*/
  max-width: 6em;
  margin: 0 0.25em;
}



body.chat #chat-input-line > button {
  max-width: 4em;
}
body.chat #chat-input-line > #chat-settings-button{
  margin: 0 0 0 0.25em;
  max-width: 2em;
}
body.chat #chat-input-line > input[type=text],
body.chat #chat-input-line > textarea {
  flex: 2 1 auto;
  max-width: revert;
  min-width: 16em;



}
/* Widget holding the file selection control and preview */
body.chat #chat-input-file-area  {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;

}
body.chat #chat-input-file-area > .file-selection-wrapper {
  align-self: flex-start;
  margin-right: 0.5em;
  flex: 0 1 auto;
  padding: 0.25em 0.25em 0.25em 0;
  white-space: nowrap;








<




<


>








|
<


>
>
>









|

|
>
>
>







>








216
217
218
219
220
221
222

223
224
225
226

227
228
229
230
231
232
233
234
235
236
237
238

239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273

}

/* Widget holding the chat message input field, send button, and
   settings button. */
body.chat #chat-input-line {
  display: flex;
  flex-direction: row;

  align-items: stretch;
}
body.chat #chat-input-line.single-line {
  flex-wrap: wrap;

}
body.chat #chat-edit-buttons {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body.chat #chat-input-line.single-line #chat-edit-buttons {
  flex-direction: row;
}
body.chat #chat-edit-buttons > * {
  flex: 1 1 auto;

  margin: 0 0.25em;
}
body.chat #chat-input-line.single-line #chat-edit-buttons > * {
}

body.chat #chat-input-line > button {
  max-width: 4em;
}
body.chat #chat-input-line > #chat-settings-button{
  margin: 0 0 0 0.25em;
  max-width: 2em;
}
body.chat #chat-input-line > input[type=text],
body.chat #chat-input-line > textarea {
  flex: 10 1 auto;
  max-width: revert;
  min-width: 20em;
}
body.chat #chat-input-line.single-line > input[type=text] {
  margin: 0 0 0.25em 0/* gap for if/when buttons wrap*/;
}
/* Widget holding the file selection control and preview */
body.chat #chat-input-file-area  {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.25em 0 0 0 /* avoid nudging input area */;
}
body.chat #chat-input-file-area > .file-selection-wrapper {
  align-self: flex-start;
  margin-right: 0.5em;
  flex: 0 1 auto;
  padding: 0.25em 0.25em 0.25em 0;
  white-space: nowrap;
︙︙