Fossil

Check-in [607854c90f]
Login

Check-in [607854c90f]

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

Overview
Comment:Prettified chat buttons via collaborative chat session dogfooding.
Downloads: Tarball | ZIP archive
Timelines: family | ancestors | descendants | both | chat-markdown
Files: files | file ages | folders
SHA3-256: 607854c90f95b5c8d918701d47bfb2a36e658913ce67bae160493b75938edc52
User & Date: stephan 2021-09-21 13:00:51.118
Context
2021-09-21
13:10
Reduced side margin/padding on text input field to improve phone usability. ... (check-in: ac6e7ae9da user: stephan tags: chat-markdown)
13:00
Prettified chat buttons via collaborative chat session dogfooding. ... (check-in: 607854c90f user: stephan tags: chat-markdown)
11:52
/chat: tell the file selection widget not to wrap, so that the help button stays on the same line (reported from Martin G's phone). ... (check-in: 4fc065ba4a user: stephan tags: chat-markdown)
Changes
Unified Diff Ignore Whitespace Patch
Changes to src/chat.c.
︙︙
160
161
162
163
164
165
166
167

168
169
170

171
172
173
174
175
176
177

  @     <input type="text" name="msg" id="chat-input-single" \
  @      placeholder="Type markdown-formatted message for %h(zProjectName)." \
  @      autocomplete="off">
  @     <textarea rows="8" id="chat-input-multi" \
  @      placeholder="Type markdown-formatted message for %h(zProjectName). Ctrl-Enter sends it." \
  @      class="hidden"></textarea>
  @     <div id='chat-edit-buttons'>
  @       <button id="chat-preview-button">Preview</button>

  @       <span id="chat-settings-button" class="settings-icon" \
  @         aria-label="Settings..." aria-haspopup="true" ></span>
  @       <button id="chat-message-submit">Send</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








|
>
|
|
|
>








160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

  @     <input type="text" name="msg" id="chat-input-single" \
  @      placeholder="Type markdown-formatted message for %h(zProjectName)." \
  @      autocomplete="off">
  @     <textarea rows="8" id="chat-input-multi" \
  @      placeholder="Type markdown-formatted message for %h(zProjectName). Ctrl-Enter sends it." \
  @      class="hidden"></textarea>
  @     <div id='chat-edit-buttons'>
  @       <button id="chat-preview-button" \
  @         title="Preview message">&#128065;</button>
  @       <button id="chat-settings-button" \
  @         title="Configure chat">&#9881;</button>
  @       <button id="chat-message-submit" \
  @         title="Send message">&#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
︙︙
Changes to src/chat.js.
︙︙
1023
1024
1025
1026
1027
1028
1029
1030


1031
1032
1033
1034
1035
1036
1037

1038
1039
1040
1041
1042
1043
1044

    return d.toISOString()
      .replace('T',' ').replace(/\.\d+/,'').replace('Z', ' zulu');
  };

  (function(){/*Set up #chat-settings-button */
    const settingsButton = document.querySelector('#chat-settings-button');
    const optionsMenu = E1('#chat-config-options');
    const cbToggle = function(){


      if(Chat.e.configArea.classList.contains('hidden')){
        D.removeClass(Chat.e.configArea, 'hidden');
        D.addClass([Chat.e.messagesWrapper, Chat.e.previewArea], 'hidden');
      }else{
        D.addClass(Chat.e.configArea, 'hidden');
        D.removeClass(Chat.e.messagesWrapper, 'hidden');
      }

    };
    D.attr(settingsButton, 'role', 'button').addEventListener('click', cbToggle, false);
    Chat.e.configArea.querySelector('button').addEventListener('click', cbToggle, false);
    /* Settings menu entries... */
    const settingsOps = [{
      label: "Multi-line input",
      boolValue: ()=>Chat.inputElement()===Chat.e.inputMulti,








|
>
>







>








1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047

    return d.toISOString()
      .replace('T',' ').replace(/\.\d+/,'').replace('Z', ' zulu');
  };

  (function(){/*Set up #chat-settings-button */
    const settingsButton = document.querySelector('#chat-settings-button');
    const optionsMenu = E1('#chat-config-options');
    const cbToggle = function(ev){
      ev.preventDefault();
      ev.stopPropagation();
      if(Chat.e.configArea.classList.contains('hidden')){
        D.removeClass(Chat.e.configArea, 'hidden');
        D.addClass([Chat.e.messagesWrapper, Chat.e.previewArea], 'hidden');
      }else{
        D.addClass(Chat.e.configArea, 'hidden');
        D.removeClass(Chat.e.messagesWrapper, 'hidden');
      }
      return false;
    };
    D.attr(settingsButton, 'role', 'button').addEventListener('click', cbToggle, false);
    Chat.e.configArea.querySelector('button').addEventListener('click', cbToggle, false);
    /* Settings menu entries... */
    const settingsOps = [{
      label: "Multi-line input",
      boolValue: ()=>Chat.inputElement()===Chat.e.inputMulti,
︙︙
Changes to src/style.chat.css.
︙︙
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240

  align-items: stretch;
}
body.chat #chat-edit-buttons {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body.chat #chat-input-line.single-line {
  flex-direction: column;
}
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;








<
<
<








224
225
226
227
228
229
230



231
232
233
234
235
236
237

  align-items: stretch;
}
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;
︙︙