Fossil SCM

chat: improved visual notification of drag/drop into the file input selector.

stephan 2020-12-23 15:12 chatroom-dev
Commit d5210076029f28380c30de2e2c2d056e4d6215a849655c77b0c55290eb6ebef9
Parent 7e48953c16df07d…
2 files changed +11 -7 +22
~ src/chat.c ~ src/chat.js
M src/chat.c
+11 -7
--- src/chat.c
+++ src/chat.c
@@ -79,20 +79,24 @@
7979
 @ max-width: 6em;
8080
 @ }
8181
 @ #chat-input-line > input[type=text] {
8282
 @ flex: 5 1 auto;
8383
 @ }
84
- @ #chat-input-file {
84
+ @ #chat-input-file-area {
8585
 @ display: flex;
8686
 @ flex-direction: row;
8787
 @ align-items: center;
8888
 @ }
89
- @ #chat-input-file > .help-buttonlet,
90
- @ #chat-input-file > input[type=file] {
89
+ @ #chat-input-file-area > .help-buttonlet,
90
+ @ #chat-input-file {
9191
 @ align-self: flex-start;
9292
 @ margin-right: 0.5em;
93
- @ flex: 1 1 auto;
93
+ @ flex: 0 1 auto;
94
+ @ }
95
+ @ #chat-input-file {
96
+ @ border: 1px solid rgba(0,0,0,0);/*to avoid UI shift during drop-targeting*/
97
+ @ border-radius: 0.25em;
9498
 @ }
9599
 @ #chat-input-file > input {
96100
 @ flex: 1 0 auto;
97101
 @ }
98102
 @ .chat-timestamp {
@@ -100,11 +104,11 @@
100104
 @ font-size: 0.8em;
101105
 @ white-space: pre;
102106
 @ text-align: left;
103107
 @ opacity: 0.8;
104108
 @ }
105
- @ .dragover {
109
+ @ #chat-input-file.dragover {
106110
 @ border: 1px dashed green;
107111
 @ }
108112
 @ #chat-drop-details {
109113
 @ flex: 0 1 auto;
110114
 @ padding: 0.5em 1em;
@@ -119,12 +123,12 @@
119123
 @ <div id='chat-input-line'>
120124
 @ <input type="text" name="msg" id="sbox" \
121125
 @ placeholder="Type message here.">
122126
 @ <input type="submit" value="Send">
123127
 @ </div>
124
- @ <div id='chat-input-file'>
125
- @ <input type="file" name="file">
128
+ @ <div id='chat-input-file-area'>
129
+ @ <input type="file" name="file" id="chat-input-file">
126130
 @ <div id="chat-drop-details"></div>
127131
 @ </div>
128132
 @ </div>
129133
 @ </form>
130134
 @ <hr>
131135
--- src/chat.c
+++ src/chat.c
@@ -79,20 +79,24 @@
79 @ max-width: 6em;
80 @ }
81 @ #chat-input-line > input[type=text] {
82 @ flex: 5 1 auto;
83 @ }
84 @ #chat-input-file {
85 @ display: flex;
86 @ flex-direction: row;
87 @ align-items: center;
88 @ }
89 @ #chat-input-file > .help-buttonlet,
90 @ #chat-input-file > input[type=file] {
91 @ align-self: flex-start;
92 @ margin-right: 0.5em;
93 @ flex: 1 1 auto;
 
 
 
 
94 @ }
95 @ #chat-input-file > input {
96 @ flex: 1 0 auto;
97 @ }
98 @ .chat-timestamp {
@@ -100,11 +104,11 @@
100 @ font-size: 0.8em;
101 @ white-space: pre;
102 @ text-align: left;
103 @ opacity: 0.8;
104 @ }
105 @ .dragover {
106 @ border: 1px dashed green;
107 @ }
108 @ #chat-drop-details {
109 @ flex: 0 1 auto;
110 @ padding: 0.5em 1em;
@@ -119,12 +123,12 @@
119 @ <div id='chat-input-line'>
120 @ <input type="text" name="msg" id="sbox" \
121 @ placeholder="Type message here.">
122 @ <input type="submit" value="Send">
123 @ </div>
124 @ <div id='chat-input-file'>
125 @ <input type="file" name="file">
126 @ <div id="chat-drop-details"></div>
127 @ </div>
128 @ </div>
129 @ </form>
130 @ <hr>
131
--- src/chat.c
+++ src/chat.c
@@ -79,20 +79,24 @@
79 @ max-width: 6em;
80 @ }
81 @ #chat-input-line > input[type=text] {
82 @ flex: 5 1 auto;
83 @ }
84 @ #chat-input-file-area {
85 @ display: flex;
86 @ flex-direction: row;
87 @ align-items: center;
88 @ }
89 @ #chat-input-file-area > .help-buttonlet,
90 @ #chat-input-file {
91 @ align-self: flex-start;
92 @ margin-right: 0.5em;
93 @ flex: 0 1 auto;
94 @ }
95 @ #chat-input-file {
96 @ border: 1px solid rgba(0,0,0,0);/*to avoid UI shift during drop-targeting*/
97 @ border-radius: 0.25em;
98 @ }
99 @ #chat-input-file > input {
100 @ flex: 1 0 auto;
101 @ }
102 @ .chat-timestamp {
@@ -100,11 +104,11 @@
104 @ font-size: 0.8em;
105 @ white-space: pre;
106 @ text-align: left;
107 @ opacity: 0.8;
108 @ }
109 @ #chat-input-file.dragover {
110 @ border: 1px dashed green;
111 @ }
112 @ #chat-drop-details {
113 @ flex: 0 1 auto;
114 @ padding: 0.5em 1em;
@@ -119,12 +123,12 @@
123 @ <div id='chat-input-line'>
124 @ <input type="text" name="msg" id="sbox" \
125 @ placeholder="Type message here.">
126 @ <input type="submit" value="Send">
127 @ </div>
128 @ <div id='chat-input-file-area'>
129 @ <input type="file" name="file" id="chat-input-file">
130 @ <div id="chat-drop-details"></div>
131 @ </div>
132 @ </div>
133 @ </form>
134 @ <hr>
135
M src/chat.js
+22
--- src/chat.js
+++ src/chat.js
@@ -76,10 +76,32 @@
7676
 "Select a file to upload, drag/drop a file into this spot, ",
7777
 "or paste an image from the clipboard if supported by ",
7878
 "your environment."
7979
 );
8080
 }
81
+ ////////////////////////////////////////////////////////////
82
+ // File drag/drop visual notification.
83
+ const dropHighlight = form.file /* target zone */;
84
+ const dropEvents = {
85
+ drop: function(ev){
86
+ D.removeClass(dropHighlight, 'dragover');
87
+ },
88
+ dragenter: function(ev){
89
+ ev.preventDefault();
90
+ ev.dataTransfer.dropEffect = "copy";
91
+ D.addClass(dropHighlight, 'dragover');
92
+ },
93
+ dragleave: function(ev){
94
+ D.removeClass(dropHighlight, 'dragover');
95
+ },
96
+ dragend: function(ev){
97
+ D.removeClass(dropHighlight, 'dragover');
98
+ }
99
+ };
100
+ Object.keys(dropEvents).forEach(
101
+ (k)=>form.file.addEventListener(k, dropEvents[k], true)
102
+ );
81103
82104
 /* Injects element e as a new row in the chat, at the top of the list */
83105
 const injectMessage = function f(e){
84106
 if(!f.injectPoint){
85107
 f.injectPoint = document.querySelector('#message-inject-point');
86108
--- src/chat.js
+++ src/chat.js
@@ -76,10 +76,32 @@
76 "Select a file to upload, drag/drop a file into this spot, ",
77 "or paste an image from the clipboard if supported by ",
78 "your environment."
79 );
80 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
81
82 /* Injects element e as a new row in the chat, at the top of the list */
83 const injectMessage = function f(e){
84 if(!f.injectPoint){
85 f.injectPoint = document.querySelector('#message-inject-point');
86
--- src/chat.js
+++ src/chat.js
@@ -76,10 +76,32 @@
76 "Select a file to upload, drag/drop a file into this spot, ",
77 "or paste an image from the clipboard if supported by ",
78 "your environment."
79 );
80 }
81 ////////////////////////////////////////////////////////////
82 // File drag/drop visual notification.
83 const dropHighlight = form.file /* target zone */;
84 const dropEvents = {
85 drop: function(ev){
86 D.removeClass(dropHighlight, 'dragover');
87 },
88 dragenter: function(ev){
89 ev.preventDefault();
90 ev.dataTransfer.dropEffect = "copy";
91 D.addClass(dropHighlight, 'dragover');
92 },
93 dragleave: function(ev){
94 D.removeClass(dropHighlight, 'dragover');
95 },
96 dragend: function(ev){
97 D.removeClass(dropHighlight, 'dragover');
98 }
99 };
100 Object.keys(dropEvents).forEach(
101 (k)=>form.file.addEventListener(k, dropEvents[k], true)
102 );
103
104 /* Injects element e as a new row in the chat, at the top of the list */
105 const injectMessage = function f(e){
106 if(!f.injectPoint){
107 f.injectPoint = document.querySelector('#message-inject-point');
108

Keyboard Shortcuts

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