Fossil SCM
/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.
Commit
03f33cd3c290116e97e718bbdd9d708a3a73b0d2c378c497a21aab4f51a2afa2
Parent
cea66528e281cbd…
3 files changed
+1
-1
+1
-1
+11
-6
+1
-1
| --- src/chat.c | ||
| +++ src/chat.c | ||
| @@ -184,11 +184,11 @@ | ||
| 184 | 184 | @ <div id="chat-drop-details"></div> |
| 185 | 185 | @ </div> |
| 186 | 186 | @ </div> |
| 187 | 187 | @ </form> |
| 188 | 188 | @ <div id='chat-preview' class='hidden'> |
| 189 | - @ <header>Preview:</header> | |
| 189 | + @ <header>Preview: (<a href='%R/md_rules' target='_blank'>markdown reference</a>)</header> | |
| 190 | 190 | @ <div id='chat-preview-content' class='message-widget-content'></div> |
| 191 | 191 | @ <div id='chat-preview-buttons'><button id='chat-preview-close'>Close Preview</button></div> |
| 192 | 192 | @ </div> |
| 193 | 193 | @ <div id='chat-config' class='hidden'> |
| 194 | 194 | @ <div id='chat-config-options'></div> |
| 195 | 195 |
| --- src/chat.c | |
| +++ src/chat.c | |
| @@ -184,11 +184,11 @@ | |
| 184 | @ <div id="chat-drop-details"></div> |
| 185 | @ </div> |
| 186 | @ </div> |
| 187 | @ </form> |
| 188 | @ <div id='chat-preview' class='hidden'> |
| 189 | @ <header>Preview:</header> |
| 190 | @ <div id='chat-preview-content' class='message-widget-content'></div> |
| 191 | @ <div id='chat-preview-buttons'><button id='chat-preview-close'>Close Preview</button></div> |
| 192 | @ </div> |
| 193 | @ <div id='chat-config' class='hidden'> |
| 194 | @ <div id='chat-config-options'></div> |
| 195 |
| --- src/chat.c | |
| +++ src/chat.c | |
| @@ -184,11 +184,11 @@ | |
| 184 | @ <div id="chat-drop-details"></div> |
| 185 | @ </div> |
| 186 | @ </div> |
| 187 | @ </form> |
| 188 | @ <div id='chat-preview' class='hidden'> |
| 189 | @ <header>Preview: (<a href='%R/md_rules' target='_blank'>markdown reference</a>)</header> |
| 190 | @ <div id='chat-preview-content' class='message-widget-content'></div> |
| 191 | @ <div id='chat-preview-buttons'><button id='chat-preview-close'>Close Preview</button></div> |
| 192 | @ </div> |
| 193 | @ <div id='chat-config' class='hidden'> |
| 194 | @ <div id='chat-config-options'></div> |
| 195 |
+1
-1
| --- src/chat.js | ||
| +++ src/chat.js | ||
| @@ -1146,11 +1146,11 @@ | ||
| 1146 | 1146 | if(showIt){ |
| 1147 | 1147 | D.removeClass(Chat.e.previewArea, 'hidden'); |
| 1148 | 1148 | D.addClass([Chat.e.messagesWrapper, Chat.e.configArea], |
| 1149 | 1149 | 'hidden'); |
| 1150 | 1150 | }else{ |
| 1151 | - D.addClass(Chat.e.previewArea, 'hidden'); | |
| 1151 | + D.addClass([Chat.e.configArea, Chat.e.previewArea], 'hidden'); | |
| 1152 | 1152 | D.removeClass(Chat.e.messagesWrapper, 'hidden'); |
| 1153 | 1153 | } |
| 1154 | 1154 | return this; |
| 1155 | 1155 | }; |
| 1156 | 1156 | Chat.e.previewArea.querySelector('#chat-preview-close'). |
| 1157 | 1157 |
| --- src/chat.js | |
| +++ src/chat.js | |
| @@ -1146,11 +1146,11 @@ | |
| 1146 | if(showIt){ |
| 1147 | D.removeClass(Chat.e.previewArea, 'hidden'); |
| 1148 | D.addClass([Chat.e.messagesWrapper, Chat.e.configArea], |
| 1149 | 'hidden'); |
| 1150 | }else{ |
| 1151 | D.addClass(Chat.e.previewArea, 'hidden'); |
| 1152 | D.removeClass(Chat.e.messagesWrapper, 'hidden'); |
| 1153 | } |
| 1154 | return this; |
| 1155 | }; |
| 1156 | Chat.e.previewArea.querySelector('#chat-preview-close'). |
| 1157 |
| --- src/chat.js | |
| +++ src/chat.js | |
| @@ -1146,11 +1146,11 @@ | |
| 1146 | if(showIt){ |
| 1147 | D.removeClass(Chat.e.previewArea, 'hidden'); |
| 1148 | D.addClass([Chat.e.messagesWrapper, Chat.e.configArea], |
| 1149 | 'hidden'); |
| 1150 | }else{ |
| 1151 | D.addClass([Chat.e.configArea, Chat.e.previewArea], 'hidden'); |
| 1152 | D.removeClass(Chat.e.messagesWrapper, 'hidden'); |
| 1153 | } |
| 1154 | return this; |
| 1155 | }; |
| 1156 | Chat.e.previewArea.querySelector('#chat-preview-close'). |
| 1157 |
+11
-6
| --- src/style.chat.css | ||
| +++ src/style.chat.css | ||
| @@ -218,49 +218,54 @@ | ||
| 218 | 218 | /* Widget holding the chat message input field, send button, and |
| 219 | 219 | settings button. */ |
| 220 | 220 | body.chat #chat-input-line { |
| 221 | 221 | display: flex; |
| 222 | 222 | flex-direction: row; |
| 223 | - margin-bottom: 0.25em; | |
| 224 | 223 | align-items: stretch; |
| 225 | 224 | } |
| 226 | 225 | body.chat #chat-input-line.single-line { |
| 227 | 226 | flex-wrap: wrap; |
| 228 | - margin-bottom: 0.25em; | |
| 229 | 227 | } |
| 230 | 228 | body.chat #chat-edit-buttons { |
| 229 | + flex: 1 1 auto; | |
| 231 | 230 | display: flex; |
| 232 | 231 | flex-direction: column; |
| 233 | 232 | justify-content: space-between; |
| 234 | 233 | } |
| 235 | 234 | body.chat #chat-input-line.single-line #chat-edit-buttons { |
| 236 | 235 | flex-direction: row; |
| 237 | 236 | } |
| 238 | 237 | body.chat #chat-edit-buttons > * { |
| 239 | - /*flex: 1 5 auto;*/ | |
| 240 | - max-width: 6em; | |
| 238 | + flex: 1 1 auto; | |
| 241 | 239 | margin: 0 0.25em; |
| 242 | 240 | } |
| 241 | +body.chat #chat-input-line.single-line #chat-edit-buttons > * { | |
| 242 | +} | |
| 243 | + | |
| 243 | 244 | body.chat #chat-input-line > button { |
| 244 | 245 | max-width: 4em; |
| 245 | 246 | } |
| 246 | 247 | body.chat #chat-input-line > #chat-settings-button{ |
| 247 | 248 | margin: 0 0 0 0.25em; |
| 248 | 249 | max-width: 2em; |
| 249 | 250 | } |
| 250 | 251 | body.chat #chat-input-line > input[type=text], |
| 251 | 252 | body.chat #chat-input-line > textarea { |
| 252 | - flex: 2 1 auto; | |
| 253 | + flex: 10 1 auto; | |
| 253 | 254 | max-width: revert; |
| 254 | - min-width: 16em; | |
| 255 | + min-width: 20em; | |
| 256 | +} | |
| 257 | +body.chat #chat-input-line.single-line > input[type=text] { | |
| 258 | + margin: 0 0 0.25em 0/* gap for if/when buttons wrap*/; | |
| 255 | 259 | } |
| 256 | 260 | /* Widget holding the file selection control and preview */ |
| 257 | 261 | body.chat #chat-input-file-area { |
| 258 | 262 | display: flex; |
| 259 | 263 | flex-direction: row; |
| 260 | 264 | align-items: center; |
| 261 | 265 | flex-wrap: wrap; |
| 266 | + margin-bottom: 0.25em 0 0 0 /* avoid nudging input area */; | |
| 262 | 267 | } |
| 263 | 268 | body.chat #chat-input-file-area > .file-selection-wrapper { |
| 264 | 269 | align-self: flex-start; |
| 265 | 270 | margin-right: 0.5em; |
| 266 | 271 | flex: 0 1 auto; |
| 267 | 272 |
| --- src/style.chat.css | |
| +++ src/style.chat.css | |
| @@ -218,49 +218,54 @@ | |
| 218 | /* Widget holding the chat message input field, send button, and |
| 219 | settings button. */ |
| 220 | body.chat #chat-input-line { |
| 221 | display: flex; |
| 222 | flex-direction: row; |
| 223 | margin-bottom: 0.25em; |
| 224 | align-items: stretch; |
| 225 | } |
| 226 | body.chat #chat-input-line.single-line { |
| 227 | flex-wrap: wrap; |
| 228 | margin-bottom: 0.25em; |
| 229 | } |
| 230 | body.chat #chat-edit-buttons { |
| 231 | display: flex; |
| 232 | flex-direction: column; |
| 233 | justify-content: space-between; |
| 234 | } |
| 235 | body.chat #chat-input-line.single-line #chat-edit-buttons { |
| 236 | flex-direction: row; |
| 237 | } |
| 238 | body.chat #chat-edit-buttons > * { |
| 239 | /*flex: 1 5 auto;*/ |
| 240 | max-width: 6em; |
| 241 | margin: 0 0.25em; |
| 242 | } |
| 243 | body.chat #chat-input-line > button { |
| 244 | max-width: 4em; |
| 245 | } |
| 246 | body.chat #chat-input-line > #chat-settings-button{ |
| 247 | margin: 0 0 0 0.25em; |
| 248 | max-width: 2em; |
| 249 | } |
| 250 | body.chat #chat-input-line > input[type=text], |
| 251 | body.chat #chat-input-line > textarea { |
| 252 | flex: 2 1 auto; |
| 253 | max-width: revert; |
| 254 | min-width: 16em; |
| 255 | } |
| 256 | /* Widget holding the file selection control and preview */ |
| 257 | body.chat #chat-input-file-area { |
| 258 | display: flex; |
| 259 | flex-direction: row; |
| 260 | align-items: center; |
| 261 | flex-wrap: wrap; |
| 262 | } |
| 263 | body.chat #chat-input-file-area > .file-selection-wrapper { |
| 264 | align-self: flex-start; |
| 265 | margin-right: 0.5em; |
| 266 | flex: 0 1 auto; |
| 267 |
| --- src/style.chat.css | |
| +++ src/style.chat.css | |
| @@ -218,49 +218,54 @@ | |
| 218 | /* Widget holding the chat message input field, send button, and |
| 219 | settings button. */ |
| 220 | body.chat #chat-input-line { |
| 221 | display: flex; |
| 222 | flex-direction: row; |
| 223 | align-items: stretch; |
| 224 | } |
| 225 | body.chat #chat-input-line.single-line { |
| 226 | flex-wrap: wrap; |
| 227 | } |
| 228 | body.chat #chat-edit-buttons { |
| 229 | flex: 1 1 auto; |
| 230 | display: flex; |
| 231 | flex-direction: column; |
| 232 | justify-content: space-between; |
| 233 | } |
| 234 | body.chat #chat-input-line.single-line #chat-edit-buttons { |
| 235 | flex-direction: row; |
| 236 | } |
| 237 | body.chat #chat-edit-buttons > * { |
| 238 | flex: 1 1 auto; |
| 239 | margin: 0 0.25em; |
| 240 | } |
| 241 | body.chat #chat-input-line.single-line #chat-edit-buttons > * { |
| 242 | } |
| 243 | |
| 244 | body.chat #chat-input-line > button { |
| 245 | max-width: 4em; |
| 246 | } |
| 247 | body.chat #chat-input-line > #chat-settings-button{ |
| 248 | margin: 0 0 0 0.25em; |
| 249 | max-width: 2em; |
| 250 | } |
| 251 | body.chat #chat-input-line > input[type=text], |
| 252 | body.chat #chat-input-line > textarea { |
| 253 | flex: 10 1 auto; |
| 254 | max-width: revert; |
| 255 | min-width: 20em; |
| 256 | } |
| 257 | body.chat #chat-input-line.single-line > input[type=text] { |
| 258 | margin: 0 0 0.25em 0/* gap for if/when buttons wrap*/; |
| 259 | } |
| 260 | /* Widget holding the file selection control and preview */ |
| 261 | body.chat #chat-input-file-area { |
| 262 | display: flex; |
| 263 | flex-direction: row; |
| 264 | align-items: center; |
| 265 | flex-wrap: wrap; |
| 266 | margin-bottom: 0.25em 0 0 0 /* avoid nudging input area */; |
| 267 | } |
| 268 | body.chat #chat-input-file-area > .file-selection-wrapper { |
| 269 | align-self: flex-start; |
| 270 | margin-right: 0.5em; |
| 271 | flex: 0 1 auto; |
| 272 |