Fossil SCM

chat: minor UI refinements.

stephan 2020-12-23 22:58 trunk
Commit 8eb01c314b0d2d3d1ce4d47b14696af6125706eaf01db1fdb7deefcf2aec4417
Parent 87ff8fe35796cc0…
3 files changed +16 -4 +11 -14 +4
~ src/chat.c ~ src/chat.js ~ src/default.css
M src/chat.c
+16 -4
--- src/chat.c
+++ src/chat.c
@@ -97,11 +97,11 @@
9797
 @ flex-direction: column;
9898
 @ }
9999
 @ #chat-input-line {
100100
 @ display: flex;
101101
 @ flex-direction: row;
102
- @ margin-bottom: 1em;
102
+ @ margin-bottom: 0.25em;
103103
 @ align-items: center;
104104
 @ }
105105
 @ #chat-input-line > input[type=submit] {
106106
 @ flex: 1 5 auto;
107107
 @ max-width: 6em;
@@ -112,19 +112,24 @@
112112
 @ #chat-input-file-area {
113113
 @ display: flex;
114114
 @ flex-direction: row;
115115
 @ align-items: center;
116116
 @ }
117
- @ #chat-input-file-area > .help-buttonlet,
118
- @ #chat-input-file {
117
+ @ #chat-input-file-area > .file-selection-wrapper {
119118
 @ align-self: flex-start;
120119
 @ margin-right: 0.5em;
121120
 @ flex: 0 1 auto;
121
+ @ padding: 0.25em 0.25em 0.25em 0;
122
+ @ }
123
+ @ #chat-input-file-area .file-selection-wrapper > * {
124
+ @ vertical-align: middle;
125
+ @ margin: 0;
122126
 @ }
123127
 @ #chat-input-file {
124128
 @ border:1px solid rgba(0,0,0,0);/*avoid UI shift during drop-targeting*/
125129
 @ border-radius: 0.25em;
130
+ @ padding: 0.25em;
126131
 @ }
127132
 @ #chat-input-file > input {
128133
 @ flex: 1 0 auto;
129134
 @ }
130135
 @ .chat-timestamp {
@@ -152,11 +157,18 @@
152157
 @ <input type="text" name="msg" id="sbox" \
153158
 @ placeholder="Type message here.">
154159
 @ <input type="submit" value="Send">
155160
 @ </div>
156161
 @ <div id='chat-input-file-area'>
157
- @ <input type="file" name="file" id="chat-input-file">
162
+ @ <div class='file-selection-wrapper'>
163
+ @ <div class='help-buttonlet'>
164
+ @ Select a file to upload, drag/drop a file into this spot,
165
+ @ or paste an image from the clipboard if supported by
166
+ @ your environment.
167
+ @ </div>
168
+ @ <input type="file" name="file" id="chat-input-file">
169
+ @ </div>
158170
 @ <div id="chat-drop-details"></div>
159171
 @ </div>
160172
 @ </div>
161173
 @ </form>
162174
 @ <hr>
163175
--- src/chat.c
+++ src/chat.c
@@ -97,11 +97,11 @@
97 @ flex-direction: column;
98 @ }
99 @ #chat-input-line {
100 @ display: flex;
101 @ flex-direction: row;
102 @ margin-bottom: 1em;
103 @ align-items: center;
104 @ }
105 @ #chat-input-line > input[type=submit] {
106 @ flex: 1 5 auto;
107 @ max-width: 6em;
@@ -112,19 +112,24 @@
112 @ #chat-input-file-area {
113 @ display: flex;
114 @ flex-direction: row;
115 @ align-items: center;
116 @ }
117 @ #chat-input-file-area > .help-buttonlet,
118 @ #chat-input-file {
119 @ align-self: flex-start;
120 @ margin-right: 0.5em;
121 @ flex: 0 1 auto;
 
 
 
 
 
122 @ }
123 @ #chat-input-file {
124 @ border:1px solid rgba(0,0,0,0);/*avoid UI shift during drop-targeting*/
125 @ border-radius: 0.25em;
 
126 @ }
127 @ #chat-input-file > input {
128 @ flex: 1 0 auto;
129 @ }
130 @ .chat-timestamp {
@@ -152,11 +157,18 @@
152 @ <input type="text" name="msg" id="sbox" \
153 @ placeholder="Type message here.">
154 @ <input type="submit" value="Send">
155 @ </div>
156 @ <div id='chat-input-file-area'>
157 @ <input type="file" name="file" id="chat-input-file">
 
 
 
 
 
 
 
158 @ <div id="chat-drop-details"></div>
159 @ </div>
160 @ </div>
161 @ </form>
162 @ <hr>
163
--- src/chat.c
+++ src/chat.c
@@ -97,11 +97,11 @@
97 @ flex-direction: column;
98 @ }
99 @ #chat-input-line {
100 @ display: flex;
101 @ flex-direction: row;
102 @ margin-bottom: 0.25em;
103 @ align-items: center;
104 @ }
105 @ #chat-input-line > input[type=submit] {
106 @ flex: 1 5 auto;
107 @ max-width: 6em;
@@ -112,19 +112,24 @@
112 @ #chat-input-file-area {
113 @ display: flex;
114 @ flex-direction: row;
115 @ align-items: center;
116 @ }
117 @ #chat-input-file-area > .file-selection-wrapper {
 
118 @ align-self: flex-start;
119 @ margin-right: 0.5em;
120 @ flex: 0 1 auto;
121 @ padding: 0.25em 0.25em 0.25em 0;
122 @ }
123 @ #chat-input-file-area .file-selection-wrapper > * {
124 @ vertical-align: middle;
125 @ margin: 0;
126 @ }
127 @ #chat-input-file {
128 @ border:1px solid rgba(0,0,0,0);/*avoid UI shift during drop-targeting*/
129 @ border-radius: 0.25em;
130 @ padding: 0.25em;
131 @ }
132 @ #chat-input-file > input {
133 @ flex: 1 0 auto;
134 @ }
135 @ .chat-timestamp {
@@ -152,11 +157,18 @@
157 @ <input type="text" name="msg" id="sbox" \
158 @ placeholder="Type message here.">
159 @ <input type="submit" value="Send">
160 @ </div>
161 @ <div id='chat-input-file-area'>
162 @ <div class='file-selection-wrapper'>
163 @ <div class='help-buttonlet'>
164 @ Select a file to upload, drag/drop a file into this spot,
165 @ or paste an image from the clipboard if supported by
166 @ your environment.
167 @ </div>
168 @ <input type="file" name="file" id="chat-input-file">
169 @ </div>
170 @ <div id="chat-drop-details"></div>
171 @ </div>
172 @ </div>
173 @ </form>
174 @ <hr>
175
M src/chat.js
+11 -14
--- src/chat.js
+++ src/chat.js
@@ -8,11 +8,12 @@
88
 const BlobXferState = {
99
 dropDetails: document.querySelector('#chat-drop-details'),
1010
 blob: undefined
1111
 };
1212
 /** Updates the paste/drop zone with details of the pasted/dropped
13
- data. */
13
+ data. The argument must be a Blob or Blob-like object (File) or
14
+ it can be falsy to reset/clear that state.*/
1415
 const updateDropZoneContent = function(blob){
1516
 const bx = BlobXferState, dd = bx.dropDetails;
1617
 bx.blob = blob;
1718
 D.clearElement(dd);
1819
 if(!blob){
@@ -65,31 +66,27 @@
6566
 //console.debug("pasted item =",item);
6667
 if('file'===item.kind){
6768
 updateDropZoneContent(false/*clear prev state*/);
6869
 updateDropZoneContent(items[0].getAsFile());
6970
 }else if(false && 'string'===item.kind){
70
- /* ----^^^^^ disabled for now:
71
-
72
- The intent here is that if form.msg is not active, populate
73
- it with this text, but whether populating it from ctrl-v when
74
- it does not have focus is a feature or a bug is debatable.
75
- */
71
+ /* ----^^^^^ disabled for now: the intent here is that if
72
+ form.msg is not active, populate it with this text, but
73
+ whether populating it from ctrl-v when it does not have focus
74
+ is a feature or a bug is debatable. It seems useful but may
75
+ violate the Principle of Least Surprise. */
7676
 if(document.activeElement !== form.msg){
7777
 /* Overwrite input field if it DOES NOT have focus,
7878
 otherwise let it do its own paste handling. */
7979
 item.getAsString((v)=>form.msg.value = v);
8080
 }
8181
 }
8282
 };
8383
 if(true){/* Add help button for drag/drop/paste zone */
84
- const help = D.div();
85
- form.file.parentNode.insertBefore(help, form.file);
86
- F.helpButtonlets.create(
87
- help,
88
- "Select a file to upload, drag/drop a file into this spot, ",
89
- "or paste an image from the clipboard if supported by ",
90
- "your environment."
84
+ form.file.parentNode.insertBefore(
85
+ F.helpButtonlets.create(
86
+ document.querySelector('#chat-input-file-area .help-buttonlet')
87
+ ), form.file
9188
 );
9289
 }
9390
 ////////////////////////////////////////////////////////////
9491
 // File drag/drop visual notification.
9592
 const dropHighlight = form.file /* target zone */;
9693
--- src/chat.js
+++ src/chat.js
@@ -8,11 +8,12 @@
8 const BlobXferState = {
9 dropDetails: document.querySelector('#chat-drop-details'),
10 blob: undefined
11 };
12 /** Updates the paste/drop zone with details of the pasted/dropped
13 data. */
 
14 const updateDropZoneContent = function(blob){
15 const bx = BlobXferState, dd = bx.dropDetails;
16 bx.blob = blob;
17 D.clearElement(dd);
18 if(!blob){
@@ -65,31 +66,27 @@
65 //console.debug("pasted item =",item);
66 if('file'===item.kind){
67 updateDropZoneContent(false/*clear prev state*/);
68 updateDropZoneContent(items[0].getAsFile());
69 }else if(false && 'string'===item.kind){
70 /* ----^^^^^ disabled for now:
71
72 The intent here is that if form.msg is not active, populate
73 it with this text, but whether populating it from ctrl-v when
74 it does not have focus is a feature or a bug is debatable.
75 */
76 if(document.activeElement !== form.msg){
77 /* Overwrite input field if it DOES NOT have focus,
78 otherwise let it do its own paste handling. */
79 item.getAsString((v)=>form.msg.value = v);
80 }
81 }
82 };
83 if(true){/* Add help button for drag/drop/paste zone */
84 const help = D.div();
85 form.file.parentNode.insertBefore(help, form.file);
86 F.helpButtonlets.create(
87 help,
88 "Select a file to upload, drag/drop a file into this spot, ",
89 "or paste an image from the clipboard if supported by ",
90 "your environment."
91 );
92 }
93 ////////////////////////////////////////////////////////////
94 // File drag/drop visual notification.
95 const dropHighlight = form.file /* target zone */;
96
--- src/chat.js
+++ src/chat.js
@@ -8,11 +8,12 @@
8 const BlobXferState = {
9 dropDetails: document.querySelector('#chat-drop-details'),
10 blob: undefined
11 };
12 /** Updates the paste/drop zone with details of the pasted/dropped
13 data. The argument must be a Blob or Blob-like object (File) or
14 it can be falsy to reset/clear that state.*/
15 const updateDropZoneContent = function(blob){
16 const bx = BlobXferState, dd = bx.dropDetails;
17 bx.blob = blob;
18 D.clearElement(dd);
19 if(!blob){
@@ -65,31 +66,27 @@
66 //console.debug("pasted item =",item);
67 if('file'===item.kind){
68 updateDropZoneContent(false/*clear prev state*/);
69 updateDropZoneContent(items[0].getAsFile());
70 }else if(false && 'string'===item.kind){
71 /* ----^^^^^ disabled for now: the intent here is that if
72 form.msg is not active, populate it with this text, but
73 whether populating it from ctrl-v when it does not have focus
74 is a feature or a bug is debatable. It seems useful but may
75 violate the Principle of Least Surprise. */
 
76 if(document.activeElement !== form.msg){
77 /* Overwrite input field if it DOES NOT have focus,
78 otherwise let it do its own paste handling. */
79 item.getAsString((v)=>form.msg.value = v);
80 }
81 }
82 };
83 if(true){/* Add help button for drag/drop/paste zone */
84 form.file.parentNode.insertBefore(
85 F.helpButtonlets.create(
86 document.querySelector('#chat-input-file-area .help-buttonlet')
87 ), form.file
 
 
 
88 );
89 }
90 ////////////////////////////////////////////////////////////
91 // File drag/drop visual notification.
92 const dropHighlight = form.file /* target zone */;
93
M src/default.css
+4
--- src/default.css
+++ src/default.css
@@ -1499,5 +1499,9 @@
14991499
 margin: 0 0.15em;
15001500
 padding: 0 0.5em 0em 0.5em;
15011501
 margin-bottom: 0.4em;
15021502
 cursor: pointer;
15031503
 }
1504
+
1505
+body.chat .fossil-tooltip.help-buttonlet-content {
1506
+ font-size: 80%;
1507
+}
15041508
--- src/default.css
+++ src/default.css
@@ -1499,5 +1499,9 @@
1499 margin: 0 0.15em;
1500 padding: 0 0.5em 0em 0.5em;
1501 margin-bottom: 0.4em;
1502 cursor: pointer;
1503 }
 
 
 
 
1504
--- src/default.css
+++ src/default.css
@@ -1499,5 +1499,9 @@
1499 margin: 0 0.15em;
1500 padding: 0 0.5em 0em 0.5em;
1501 margin-bottom: 0.4em;
1502 cursor: pointer;
1503 }
1504
1505 body.chat .fossil-tooltip.help-buttonlet-content {
1506 font-size: 80%;
1507 }
1508

Keyboard Shortcuts

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