Fossil SCM

/chat: replaced input-related buttons with span elements in an attempt to get more consistent cross-browser results. Renamed some internal element IDs for naming consistency's sake.

stephan 2021-10-04 19:01 trunk
Commit 98b2cbe69b2e8a31c06b043bcb1fa00fcf5fc951f31b3052393dc607c677e61b
Parent ae433763ae311c5…
3 files changed +9 -9 +10 -11 +34 -29
~ src/chat.c ~ src/fossil.page.chat.js ~ src/style.chat.css
M src/chat.c
+9 -9
--- src/chat.c
+++ src/chat.c
@@ -179,19 +179,19 @@
179179
 @ <div id='chat-input-line' class='single-line'>
180180
 @ <div contenteditable id="chat-input-field" \
181181
 @ data-placeholder0="%h(zInputPlaceholder0)" \
182182
 @ data-placeholder="%h(zInputPlaceholder0)" \
183183
 @ class=""></div>
184
- @ <div id='chat-edit-buttons'>
185
- @ <button id="chat-preview-button" \
186
- @ title="Preview message (Shift-Enter)">&#128065;</button>
187
- @ <button id="chat-message-attach" \
188
- @ title="Attach file to message">%s(zPaperclip)</button>
189
- @ <button id="chat-settings-button" \
190
- @ title="Configure chat">&#9881;</button>
191
- @ <button id="chat-message-submit" \
192
- @ title="Send message (Ctrl-Enter)">&#128228;</button>
184
+ @ <div id='chat-buttons-wrapper'>
185
+ @ <span class='cbutton' id="chat-button-preview" \
186
+ @ title="Preview message (Shift-Enter)">&#128065;</span>
187
+ @ <span class='cbutton' id="chat-button-attach" \
188
+ @ title="Attach file to message">%s(zPaperclip)</span>
189
+ @ <span class='cbutton' id="chat-button-settings" \
190
+ @ title="Configure chat">&#9881;</span>
191
+ @ <span class='cbutton' id="chat-button-submit" \
192
+ @ title="Send message (Ctrl-Enter)">&#128228;</span>
193193
 @ </div>
194194
 @ </div>
195195
 @ <div id='chat-input-file-area'>
196196
 @ <div class='file-selection-wrapper hidden'>
197197
 @ <input type="file" name="file" id="chat-input-file">
198198
--- src/chat.c
+++ src/chat.c
@@ -179,19 +179,19 @@
179 @ <div id='chat-input-line' class='single-line'>
180 @ <div contenteditable id="chat-input-field" \
181 @ data-placeholder0="%h(zInputPlaceholder0)" \
182 @ data-placeholder="%h(zInputPlaceholder0)" \
183 @ class=""></div>
184 @ <div id='chat-edit-buttons'>
185 @ <button id="chat-preview-button" \
186 @ title="Preview message (Shift-Enter)">&#128065;</button>
187 @ <button id="chat-message-attach" \
188 @ title="Attach file to message">%s(zPaperclip)</button>
189 @ <button id="chat-settings-button" \
190 @ title="Configure chat">&#9881;</button>
191 @ <button id="chat-message-submit" \
192 @ title="Send message (Ctrl-Enter)">&#128228;</button>
193 @ </div>
194 @ </div>
195 @ <div id='chat-input-file-area'>
196 @ <div class='file-selection-wrapper hidden'>
197 @ <input type="file" name="file" id="chat-input-file">
198
--- src/chat.c
+++ src/chat.c
@@ -179,19 +179,19 @@
179 @ <div id='chat-input-line' class='single-line'>
180 @ <div contenteditable id="chat-input-field" \
181 @ data-placeholder0="%h(zInputPlaceholder0)" \
182 @ data-placeholder="%h(zInputPlaceholder0)" \
183 @ class=""></div>
184 @ <div id='chat-buttons-wrapper'>
185 @ <span class='cbutton' id="chat-button-preview" \
186 @ title="Preview message (Shift-Enter)">&#128065;</span>
187 @ <span class='cbutton' id="chat-button-attach" \
188 @ title="Attach file to message">%s(zPaperclip)</span>
189 @ <span class='cbutton' id="chat-button-settings" \
190 @ title="Configure chat">&#9881;</span>
191 @ <span class='cbutton' id="chat-button-submit" \
192 @ title="Send message (Ctrl-Enter)">&#128228;</span>
193 @ </div>
194 @ </div>
195 @ <div id='chat-input-file-area'>
196 @ <div class='file-selection-wrapper hidden'>
197 @ <input type="file" name="file" id="chat-input-file">
198
M src/fossil.page.chat.js
+10 -11
--- src/fossil.page.chat.js
+++ src/fossil.page.chat.js
@@ -126,19 +126,19 @@
126126
 loadOlderToolbar: undefined /* the load-posts toolbar (dynamically created) */,
127127
 inputWrapper: E1("#chat-input-area"),
128128
 inputLine: E1('#chat-input-line'),
129129
 fileSelectWrapper: E1('#chat-input-file-area'),
130130
 viewMessages: E1('#chat-messages-wrapper'),
131
- btnSubmit: E1('#chat-message-submit'),
132
- btnAttach: E1('#chat-message-attach'),
131
+ btnSubmit: E1('#chat-button-submit'),
132
+ btnAttach: E1('#chat-button-attach'),
133133
 inputField: E1('#chat-input-field'),
134134
 inputFile: E1('#chat-input-file'),
135135
 contentDiv: E1('div.content'),
136136
 viewConfig: E1('#chat-config'),
137137
 viewPreview: E1('#chat-preview'),
138138
 previewContent: E1('#chat-preview-content'),
139
- btnPreview: E1('#chat-preview-button'),
139
+ btnPreview: E1('#chat-button-preview'),
140140
 views: document.querySelectorAll('.chat-view'),
141141
 activeUserListWrapper: E1('#chat-user-list-wrapper'),
142142
 activeUserList: E1('#chat-user-list')
143143
 },
144144
 me: F.user.name,
@@ -1290,21 +1290,21 @@
12901290
 return false;
12911291
 });
12921292
 Chat.e.btnAttach.addEventListener(
12931293
 'click', ()=>Chat.e.inputFile.click(), false);
12941294
1295
- (function(){/*Set up #chat-settings-button and related bits */
1295
+ (function(){/*Set up #chat-button-settings and related bits */
12961296
 if(window.innerWidth<window.innerHeight){
12971297
 // Must be set up before config view is...
12981298
 /* Alignment of 'my' messages: right alignment is conventional
12991299
 for mobile chat apps but can be difficult to read in wide
13001300
 windows (desktop/tablet landscape mode), so we default to a
13011301
 layout based on the apparent "orientation" of the window:
13021302
 tall vs wide. Can be toggled via settings. */
13031303
 document.body.classList.add('my-messages-right');
13041304
 }
1305
- const settingsButton = document.querySelector('#chat-settings-button');
1305
+ const settingsButton = document.querySelector('#chat-button-settings');
13061306
 const optionsMenu = E1('#chat-config-options');
13071307
 const cbToggle = function(ev){
13081308
 ev.preventDefault();
13091309
 ev.stopPropagation();
13101310
 Chat.setCurrentView(Chat.e.currentView===Chat.e.viewConfig
@@ -1445,13 +1445,12 @@
14451445
 /**
14461446
 Build UI for config options...
14471447
 */
14481448
 settingsOps.forEach(function f(op){
14491449
 const line = D.addClass(D.div(), 'menu-entry');
1450
- const label = op.label ? D.append(
1451
- D.addClass(D.label(), 'cbutton'/*bootstrap skin hijacks 'button'*/),
1452
- op.label) : undefined;
1450
+ const label = op.label
1451
+ ? D.append(D.label(),op.label) : undefined;
14531452
 const labelWrapper = D.addClass(D.div(), 'label-wrapper');
14541453
 var hint;
14551454
 const col0 = D.span();
14561455
 if(op.hint){
14571456
 hint = D.append(D.addClass(D.span(),'hint'),op.hint);
@@ -1510,15 +1509,15 @@
15101509
 }
15111510
 }else if(op.callback && op.checkbox){
15121511
 op.checkbox.addEventListener('change', (ev)=>op.callback(ev), false);
15131512
 }
15141513
 });
1515
- })()/*#chat-settings-button setup*/;
1514
+ })()/*#chat-button-settings setup*/;
15161515
15171516
 (function(){
15181517
 /* Install default settings... must come after
1519
- chat-settings-button setup so that the listeners which that
1518
+ chat-button-settings setup so that the listeners which that
15201519
 installs are notified via the properties getting initialized
15211520
 here. */
15221521
 Chat.settings.addListener('monospace-messages',function(s){
15231522
 document.body.classList[s.value ? 'add' : 'remove']('monospace-messages');
15241523
 })
@@ -1802,13 +1801,13 @@
18021801
 Chat.chatOnlyMode(true);
18031802
 }
18041803
 Chat.intervalTimer = setInterval(poll, 1000);
18051804
 if(0){
18061805
 const flip = (ev)=>Chat.animate(ev.target,'anim-flip-h');
1807
- document.querySelectorAll('#chat-edit-buttons button').forEach(function(e){
1806
+ document.querySelectorAll('#chat-buttons-wrapper .cbutton').forEach(function(e){
18081807
 e.addEventListener('click',flip, false);
18091808
 });
18101809
 }
18111810
 setTimeout( ()=>Chat.inputFocus(), 0 );
18121811
 Chat.animate.$disabled = false;
18131812
 F.page.chat = Chat/* enables testing the APIs via the dev tools */;
18141813
 });
18151814
--- src/fossil.page.chat.js
+++ src/fossil.page.chat.js
@@ -126,19 +126,19 @@
126 loadOlderToolbar: undefined /* the load-posts toolbar (dynamically created) */,
127 inputWrapper: E1("#chat-input-area"),
128 inputLine: E1('#chat-input-line'),
129 fileSelectWrapper: E1('#chat-input-file-area'),
130 viewMessages: E1('#chat-messages-wrapper'),
131 btnSubmit: E1('#chat-message-submit'),
132 btnAttach: E1('#chat-message-attach'),
133 inputField: E1('#chat-input-field'),
134 inputFile: E1('#chat-input-file'),
135 contentDiv: E1('div.content'),
136 viewConfig: E1('#chat-config'),
137 viewPreview: E1('#chat-preview'),
138 previewContent: E1('#chat-preview-content'),
139 btnPreview: E1('#chat-preview-button'),
140 views: document.querySelectorAll('.chat-view'),
141 activeUserListWrapper: E1('#chat-user-list-wrapper'),
142 activeUserList: E1('#chat-user-list')
143 },
144 me: F.user.name,
@@ -1290,21 +1290,21 @@
1290 return false;
1291 });
1292 Chat.e.btnAttach.addEventListener(
1293 'click', ()=>Chat.e.inputFile.click(), false);
1294
1295 (function(){/*Set up #chat-settings-button and related bits */
1296 if(window.innerWidth<window.innerHeight){
1297 // Must be set up before config view is...
1298 /* Alignment of 'my' messages: right alignment is conventional
1299 for mobile chat apps but can be difficult to read in wide
1300 windows (desktop/tablet landscape mode), so we default to a
1301 layout based on the apparent "orientation" of the window:
1302 tall vs wide. Can be toggled via settings. */
1303 document.body.classList.add('my-messages-right');
1304 }
1305 const settingsButton = document.querySelector('#chat-settings-button');
1306 const optionsMenu = E1('#chat-config-options');
1307 const cbToggle = function(ev){
1308 ev.preventDefault();
1309 ev.stopPropagation();
1310 Chat.setCurrentView(Chat.e.currentView===Chat.e.viewConfig
@@ -1445,13 +1445,12 @@
1445 /**
1446 Build UI for config options...
1447 */
1448 settingsOps.forEach(function f(op){
1449 const line = D.addClass(D.div(), 'menu-entry');
1450 const label = op.label ? D.append(
1451 D.addClass(D.label(), 'cbutton'/*bootstrap skin hijacks 'button'*/),
1452 op.label) : undefined;
1453 const labelWrapper = D.addClass(D.div(), 'label-wrapper');
1454 var hint;
1455 const col0 = D.span();
1456 if(op.hint){
1457 hint = D.append(D.addClass(D.span(),'hint'),op.hint);
@@ -1510,15 +1509,15 @@
1510 }
1511 }else if(op.callback && op.checkbox){
1512 op.checkbox.addEventListener('change', (ev)=>op.callback(ev), false);
1513 }
1514 });
1515 })()/*#chat-settings-button setup*/;
1516
1517 (function(){
1518 /* Install default settings... must come after
1519 chat-settings-button setup so that the listeners which that
1520 installs are notified via the properties getting initialized
1521 here. */
1522 Chat.settings.addListener('monospace-messages',function(s){
1523 document.body.classList[s.value ? 'add' : 'remove']('monospace-messages');
1524 })
@@ -1802,13 +1801,13 @@
1802 Chat.chatOnlyMode(true);
1803 }
1804 Chat.intervalTimer = setInterval(poll, 1000);
1805 if(0){
1806 const flip = (ev)=>Chat.animate(ev.target,'anim-flip-h');
1807 document.querySelectorAll('#chat-edit-buttons button').forEach(function(e){
1808 e.addEventListener('click',flip, false);
1809 });
1810 }
1811 setTimeout( ()=>Chat.inputFocus(), 0 );
1812 Chat.animate.$disabled = false;
1813 F.page.chat = Chat/* enables testing the APIs via the dev tools */;
1814 });
1815
--- src/fossil.page.chat.js
+++ src/fossil.page.chat.js
@@ -126,19 +126,19 @@
126 loadOlderToolbar: undefined /* the load-posts toolbar (dynamically created) */,
127 inputWrapper: E1("#chat-input-area"),
128 inputLine: E1('#chat-input-line'),
129 fileSelectWrapper: E1('#chat-input-file-area'),
130 viewMessages: E1('#chat-messages-wrapper'),
131 btnSubmit: E1('#chat-button-submit'),
132 btnAttach: E1('#chat-button-attach'),
133 inputField: E1('#chat-input-field'),
134 inputFile: E1('#chat-input-file'),
135 contentDiv: E1('div.content'),
136 viewConfig: E1('#chat-config'),
137 viewPreview: E1('#chat-preview'),
138 previewContent: E1('#chat-preview-content'),
139 btnPreview: E1('#chat-button-preview'),
140 views: document.querySelectorAll('.chat-view'),
141 activeUserListWrapper: E1('#chat-user-list-wrapper'),
142 activeUserList: E1('#chat-user-list')
143 },
144 me: F.user.name,
@@ -1290,21 +1290,21 @@
1290 return false;
1291 });
1292 Chat.e.btnAttach.addEventListener(
1293 'click', ()=>Chat.e.inputFile.click(), false);
1294
1295 (function(){/*Set up #chat-button-settings and related bits */
1296 if(window.innerWidth<window.innerHeight){
1297 // Must be set up before config view is...
1298 /* Alignment of 'my' messages: right alignment is conventional
1299 for mobile chat apps but can be difficult to read in wide
1300 windows (desktop/tablet landscape mode), so we default to a
1301 layout based on the apparent "orientation" of the window:
1302 tall vs wide. Can be toggled via settings. */
1303 document.body.classList.add('my-messages-right');
1304 }
1305 const settingsButton = document.querySelector('#chat-button-settings');
1306 const optionsMenu = E1('#chat-config-options');
1307 const cbToggle = function(ev){
1308 ev.preventDefault();
1309 ev.stopPropagation();
1310 Chat.setCurrentView(Chat.e.currentView===Chat.e.viewConfig
@@ -1445,13 +1445,12 @@
1445 /**
1446 Build UI for config options...
1447 */
1448 settingsOps.forEach(function f(op){
1449 const line = D.addClass(D.div(), 'menu-entry');
1450 const label = op.label
1451 ? D.append(D.label(),op.label) : undefined;
 
1452 const labelWrapper = D.addClass(D.div(), 'label-wrapper');
1453 var hint;
1454 const col0 = D.span();
1455 if(op.hint){
1456 hint = D.append(D.addClass(D.span(),'hint'),op.hint);
@@ -1510,15 +1509,15 @@
1509 }
1510 }else if(op.callback && op.checkbox){
1511 op.checkbox.addEventListener('change', (ev)=>op.callback(ev), false);
1512 }
1513 });
1514 })()/*#chat-button-settings setup*/;
1515
1516 (function(){
1517 /* Install default settings... must come after
1518 chat-button-settings setup so that the listeners which that
1519 installs are notified via the properties getting initialized
1520 here. */
1521 Chat.settings.addListener('monospace-messages',function(s){
1522 document.body.classList[s.value ? 'add' : 'remove']('monospace-messages');
1523 })
@@ -1802,13 +1801,13 @@
1801 Chat.chatOnlyMode(true);
1802 }
1803 Chat.intervalTimer = setInterval(poll, 1000);
1804 if(0){
1805 const flip = (ev)=>Chat.animate(ev.target,'anim-flip-h');
1806 document.querySelectorAll('#chat-buttons-wrapper .cbutton').forEach(function(e){
1807 e.addEventListener('click',flip, false);
1808 });
1809 }
1810 setTimeout( ()=>Chat.inputFocus(), 0 );
1811 Chat.animate.$disabled = false;
1812 F.page.chat = Chat/* enables testing the APIs via the dev tools */;
1813 });
1814
M src/style.chat.css
+34 -29
--- src/style.chat.css
+++ src/style.chat.css
@@ -132,11 +132,11 @@
132132
 flex: 1 1 auto;
133133
 }
134134
 /* "Chat-only mode" hides the site header/footer, showing only
135135
 the chat app. */
136136
 body.chat.chat-only-mode{}
137
-body.chat #chat-settings-button {}
137
+body.chat #chat-button-settings {}
138138
 /** Popup widget for the /chat settings. */
139139
 body.chat .chat-settings-popup {
140140
 font-size: 0.8em;
141141
 text-align: left;
142142
 display: flex;
@@ -238,11 +238,11 @@
238238
 */
239239
 }
240240
 body.chat #chat-input-line.compact #chat-input-field {
241241
 }
242242
243
-body.chat #chat-edit-buttons {
243
+body.chat #chat-buttons-wrapper {
244244
 flex: 0 1 auto;
245245
 display: flex;
246246
 flex-direction: column;
247247
 align-items: center;
248248
 min-width: 4em;
@@ -249,35 +249,51 @@
249249
 min-height: 1.5em;
250250
 align-self: flex-end
251251
 /*keep buttons stable at bottom/right even when input field
252252
 resizes */;
253253
 }
254
-body.chat #chat-input-line.compact #chat-edit-buttons {
254
+body.chat #chat-input-line.compact #chat-buttons-wrapper {
255255
 flex-direction: row;
256256
 flex: 1 1 auto;
257257
 align-self: stretch;
258258
 justify-content: flex-end;
259259
 /*flex-wrap: wrap;*/
260260
 /* Wrapping would be ideal except that the edit widget
261261
 grows in width as the user types, moving the buttons
262262
 around */
263263
 }
264
-body.chat #chat-edit-buttons > * {
265
- padding: initial/*some skins mess this up for buttons*/;
266
- line-height:
267
- 0.1 /* buggy glyph alignment workaround for FF78, possibly
268
- others. Does not affect well-behaved browsers. */;
264
+body.chat #chat-buttons-wrapper > .cbutton {
265
+ padding: 0;
266
+ display: inline-block;
267
+ border-width: 1px;
268
+ border-style: solid;
269
+ border-radius: 0.25em;
269270
 min-width: 4ex;
270
-}
271
-body.chat #chat-input-line:not(.compact) #chat-edit-buttons > * {
272
- max-width: 6ex;
273
- min-width: 6ex;
274
- min-height: 5ex;
275
- max-height: 6ex;
271
+ max-width: 4ex;
272
+ min-height: 4ex;
273
+ max-height: 4ex;
276274
 margin: 0.125em;
275
+ display: inline-flex;
276
+ justify-content: center;
277
+ align-items: center;
278
+ cursor: pointer;
279
+ font-size: 150%;
280
+}
281
+body.chat #chat-buttons-wrapper > .cbutton:hover {
282
+ backdrop-filter: contrast(0.5);
283
+}
284
+body.chat #chat-input-line.compact #chat-buttons-wrapper > .cbutton {
285
+ margin: 2px 0.125em 0 0.125em;
286
+ min-width: 8ex;
287
+ max-width: 8ex;
288
+ min-height: 2.3ex;
289
+ max-height: 2.3ex;
290
+ font-size: 130%;
277291
 }
278
-
292
+body.chat #chat-input-line.compact #chat-buttons-wrapper #chat-button-submit {
293
+ min-width: 16ex;
294
+}
279295
 body.chat #chat-input-line:not(.compact) #chat-input-field {
280296
 /*border-left-style: double;
281297
 border-left-width: 3px;
282298
 border-right-style: double;
283299
 border-right-width: 3px;*/
@@ -299,22 +315,11 @@
299315
 The lesser of the two evils seems to be to rely on the browser
300316
 feature that a manual resize of the element will pin its sits.
301317
 */
302318
 }
303319
304
-body.chat #chat-input-line.compact #chat-edit-buttons > * {
305
- margin: 2px 0.125em 0 0.125em;
306
- min-width: 8ex;
307
- max-width: unset;
308
- min-height: 3ex;
309
- max-height: 3ex;
310
- /*flex: 1 1 auto;*/
311
-}
312
-body.chat #chat-input-line.compact #chat-edit-buttons #chat-message-submit {
313
- min-width: 16ex;
314
-}
315
-body.chat #chat-input-line > #chat-settings-button{
320
+body.chat #chat-input-line > #chat-button-settings{
316321
 margin: 0 0 0 0.25em;
317322
 max-width: 2em;
318323
 }
319324
 body.chat #chat-input-line > input[type=text],
320325
 body.chat #chat-input-line > textarea {
@@ -501,14 +506,14 @@
501506
 body.chat #chat-user-list .chat-user.selected {
502507
 font-weight: bold;
503508
 text-decoration: underline;
504509
 }
505510
506
-body.chat.fossil-dark-style #chat-message-attach > svg {
511
+body.chat.fossil-dark-style #chat-button-attach > svg {
507512
 /* The black paperclip is barely visible in dark-mode
508513
 skins when they have dark buttons */
509
- filter: invert(0.5);
514
+ filter: invert(0.8);
510515
 }
511516
512517
 body.chat .anim-rotate-360 {
513518
 animation: rotate-360 750ms linear;
514519
 }
515520
--- src/style.chat.css
+++ src/style.chat.css
@@ -132,11 +132,11 @@
132 flex: 1 1 auto;
133 }
134 /* "Chat-only mode" hides the site header/footer, showing only
135 the chat app. */
136 body.chat.chat-only-mode{}
137 body.chat #chat-settings-button {}
138 /** Popup widget for the /chat settings. */
139 body.chat .chat-settings-popup {
140 font-size: 0.8em;
141 text-align: left;
142 display: flex;
@@ -238,11 +238,11 @@
238 */
239 }
240 body.chat #chat-input-line.compact #chat-input-field {
241 }
242
243 body.chat #chat-edit-buttons {
244 flex: 0 1 auto;
245 display: flex;
246 flex-direction: column;
247 align-items: center;
248 min-width: 4em;
@@ -249,35 +249,51 @@
249 min-height: 1.5em;
250 align-self: flex-end
251 /*keep buttons stable at bottom/right even when input field
252 resizes */;
253 }
254 body.chat #chat-input-line.compact #chat-edit-buttons {
255 flex-direction: row;
256 flex: 1 1 auto;
257 align-self: stretch;
258 justify-content: flex-end;
259 /*flex-wrap: wrap;*/
260 /* Wrapping would be ideal except that the edit widget
261 grows in width as the user types, moving the buttons
262 around */
263 }
264 body.chat #chat-edit-buttons > * {
265 padding: initial/*some skins mess this up for buttons*/;
266 line-height:
267 0.1 /* buggy glyph alignment workaround for FF78, possibly
268 others. Does not affect well-behaved browsers. */;
 
269 min-width: 4ex;
270 }
271 body.chat #chat-input-line:not(.compact) #chat-edit-buttons > * {
272 max-width: 6ex;
273 min-width: 6ex;
274 min-height: 5ex;
275 max-height: 6ex;
276 margin: 0.125em;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
277 }
278
 
 
279 body.chat #chat-input-line:not(.compact) #chat-input-field {
280 /*border-left-style: double;
281 border-left-width: 3px;
282 border-right-style: double;
283 border-right-width: 3px;*/
@@ -299,22 +315,11 @@
299 The lesser of the two evils seems to be to rely on the browser
300 feature that a manual resize of the element will pin its sits.
301 */
302 }
303
304 body.chat #chat-input-line.compact #chat-edit-buttons > * {
305 margin: 2px 0.125em 0 0.125em;
306 min-width: 8ex;
307 max-width: unset;
308 min-height: 3ex;
309 max-height: 3ex;
310 /*flex: 1 1 auto;*/
311 }
312 body.chat #chat-input-line.compact #chat-edit-buttons #chat-message-submit {
313 min-width: 16ex;
314 }
315 body.chat #chat-input-line > #chat-settings-button{
316 margin: 0 0 0 0.25em;
317 max-width: 2em;
318 }
319 body.chat #chat-input-line > input[type=text],
320 body.chat #chat-input-line > textarea {
@@ -501,14 +506,14 @@
501 body.chat #chat-user-list .chat-user.selected {
502 font-weight: bold;
503 text-decoration: underline;
504 }
505
506 body.chat.fossil-dark-style #chat-message-attach > svg {
507 /* The black paperclip is barely visible in dark-mode
508 skins when they have dark buttons */
509 filter: invert(0.5);
510 }
511
512 body.chat .anim-rotate-360 {
513 animation: rotate-360 750ms linear;
514 }
515
--- src/style.chat.css
+++ src/style.chat.css
@@ -132,11 +132,11 @@
132 flex: 1 1 auto;
133 }
134 /* "Chat-only mode" hides the site header/footer, showing only
135 the chat app. */
136 body.chat.chat-only-mode{}
137 body.chat #chat-button-settings {}
138 /** Popup widget for the /chat settings. */
139 body.chat .chat-settings-popup {
140 font-size: 0.8em;
141 text-align: left;
142 display: flex;
@@ -238,11 +238,11 @@
238 */
239 }
240 body.chat #chat-input-line.compact #chat-input-field {
241 }
242
243 body.chat #chat-buttons-wrapper {
244 flex: 0 1 auto;
245 display: flex;
246 flex-direction: column;
247 align-items: center;
248 min-width: 4em;
@@ -249,35 +249,51 @@
249 min-height: 1.5em;
250 align-self: flex-end
251 /*keep buttons stable at bottom/right even when input field
252 resizes */;
253 }
254 body.chat #chat-input-line.compact #chat-buttons-wrapper {
255 flex-direction: row;
256 flex: 1 1 auto;
257 align-self: stretch;
258 justify-content: flex-end;
259 /*flex-wrap: wrap;*/
260 /* Wrapping would be ideal except that the edit widget
261 grows in width as the user types, moving the buttons
262 around */
263 }
264 body.chat #chat-buttons-wrapper > .cbutton {
265 padding: 0;
266 display: inline-block;
267 border-width: 1px;
268 border-style: solid;
269 border-radius: 0.25em;
270 min-width: 4ex;
271 max-width: 4ex;
272 min-height: 4ex;
273 max-height: 4ex;
 
 
 
274 margin: 0.125em;
275 display: inline-flex;
276 justify-content: center;
277 align-items: center;
278 cursor: pointer;
279 font-size: 150%;
280 }
281 body.chat #chat-buttons-wrapper > .cbutton:hover {
282 backdrop-filter: contrast(0.5);
283 }
284 body.chat #chat-input-line.compact #chat-buttons-wrapper > .cbutton {
285 margin: 2px 0.125em 0 0.125em;
286 min-width: 8ex;
287 max-width: 8ex;
288 min-height: 2.3ex;
289 max-height: 2.3ex;
290 font-size: 130%;
291 }
292 body.chat #chat-input-line.compact #chat-buttons-wrapper #chat-button-submit {
293 min-width: 16ex;
294 }
295 body.chat #chat-input-line:not(.compact) #chat-input-field {
296 /*border-left-style: double;
297 border-left-width: 3px;
298 border-right-style: double;
299 border-right-width: 3px;*/
@@ -299,22 +315,11 @@
315 The lesser of the two evils seems to be to rely on the browser
316 feature that a manual resize of the element will pin its sits.
317 */
318 }
319
320 body.chat #chat-input-line > #chat-button-settings{
 
 
 
 
 
 
 
 
 
 
 
321 margin: 0 0 0 0.25em;
322 max-width: 2em;
323 }
324 body.chat #chat-input-line > input[type=text],
325 body.chat #chat-input-line > textarea {
@@ -501,14 +506,14 @@
506 body.chat #chat-user-list .chat-user.selected {
507 font-weight: bold;
508 text-decoration: underline;
509 }
510
511 body.chat.fossil-dark-style #chat-button-attach > svg {
512 /* The black paperclip is barely visible in dark-mode
513 skins when they have dark buttons */
514 filter: invert(0.8);
515 }
516
517 body.chat .anim-rotate-360 {
518 animation: rotate-360 750ms linear;
519 }
520

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button