Fossil SCM

Refactored the chat input area from a table to a flexbox-based layout.

stephan 2020-12-22 05:15 chatroom-dev
Commit ba5c9147727d7e70a04f15c9f0e609cc74f5152edad8918503a87611f91b470d
Parent 84b31f44950caa7…
1 file changed +41 -17
~ tools/chat.tcl
M tools/chat.tcl
+41 -17
--- tools/chat.tcl
+++ tools/chat.tcl
@@ -36,22 +36,21 @@
3636
 </div>
3737
 }
3838
 return
3939
 }
4040
 wapp-trim {
41
- <form accept-encoding="utf-8">
42
- <table border="0" cellpadding="2" id="intab" width="100%">
43
- <tr>
44
- <td align="right">Message:</td>
45
- <td width="100%"><input type="text" name="msg" id="sbox"></td>
46
- <td><input type="submit" value="Send"></td>
47
- </tr>
48
- <tr>
49
- <td align="right">File:</td>
50
- <td align="left"><input type="file" name="file"></td>
51
- </tr>
52
- </table>
41
+ <form accept-encoding="utf-8" id="chat-form">
42
+ <div id='chat-input-area'>
43
+ <div id='chat-input-line'>
44
+ <input type="text" name="msg" id="sbox" placeholder="Type message here.">
45
+ <input type="submit" value="Send">
46
+ </div>
47
+ <div id='chat-input-file'>
48
+ <span>File:</span>
49
+ <input type="file" name="file">
50
+ </div>
51
+ </div>
5352
 </form>
5453
5554
 <hr>
5655
 <table id="dialog">
5756
 </table>
@@ -74,21 +73,46 @@
7473
 padding: 0.5em;
7574
 border-radius: 1em;
7675
 background-color: #d2dde1;
7776
 border: 1px solid black;
7877
 }
79
- </style>
78
+\#chat-input-area {
79
+ width: 100%;
80
+ display: flex;
81
+ flex-direction: column;
82
+}
83
+\#chat-input-line {
84
+ display: flex;
85
+ flex-direction: row;
86
+ margin-bottom: 1em;
87
+ align-items: center;
88
+}
89
+\#chat-input-line > input[type=submit] {
90
+ flex: 1 5 auto;
91
+ max-width: 6em;
92
+}
93
+\#chat-input-line > input[type=text] {
94
+ flex: 5 1 auto;
95
+}
96
+\#chat-input-file {
97
+ display: flex;
98
+ flex-direction: row;
99
+ align-items: center;
100
+}
101
+\#chat-input-file > input {
102
+ flex: 1 0 auto;
103
+}
104
+</style>
80105
 }
81106
 set nonce [wapp-param FOSSIL_NONCE]
82107
 set submiturl [wapp-param SCRIPT_NAME]/send
83108
 set pollurl [wapp-param SCRIPT_NAME]/poll
84109
 set downloadurl [wapp-param SCRIPT_NAME]/download
85110
 set me [wapp-param FOSSIL_USER]
86111
 wapp-trim {
87
- <script nonce="%string($nonce)">
112
+<script nonce="%string($nonce)">(function(){
88113
 let x = document.getElementById("sbox");
89
- x.size = (window.outerWidth/10) - 10;
90114
 let form = document.forms[0]
91115
 var mxMsg = 0
92116
 var _me = "%string($me)"
93117
 form.addEventListener('submit',(e)=>{
94118
 e.preventDefault();
@@ -149,12 +173,12 @@
149173
 }
150174
 async function poll(){
151175
 fetch("%string($pollurl)/" + mxMsg)
152176
 .then(x => x.json()).then(y => newcontent(y))
153177
 }
154
- poll()
155
- </script>
178
+ poll();
179
+})();</script>
156180
 }
157181
158182
 # Make sure the chat database exists
159183
 sqlite3 db [chat-db-name]
160184
 if {[db one {PRAGMA journal_mode}]!="wal"} {
161185
--- tools/chat.tcl
+++ tools/chat.tcl
@@ -36,22 +36,21 @@
36 </div>
37 }
38 return
39 }
40 wapp-trim {
41 <form accept-encoding="utf-8">
42 <table border="0" cellpadding="2" id="intab" width="100%">
43 <tr>
44 <td align="right">Message:</td>
45 <td width="100%"><input type="text" name="msg" id="sbox"></td>
46 <td><input type="submit" value="Send"></td>
47 </tr>
48 <tr>
49 <td align="right">File:</td>
50 <td align="left"><input type="file" name="file"></td>
51 </tr>
52 </table>
53 </form>
54
55 <hr>
56 <table id="dialog">
57 </table>
@@ -74,21 +73,46 @@
74 padding: 0.5em;
75 border-radius: 1em;
76 background-color: #d2dde1;
77 border: 1px solid black;
78 }
79 </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
80 }
81 set nonce [wapp-param FOSSIL_NONCE]
82 set submiturl [wapp-param SCRIPT_NAME]/send
83 set pollurl [wapp-param SCRIPT_NAME]/poll
84 set downloadurl [wapp-param SCRIPT_NAME]/download
85 set me [wapp-param FOSSIL_USER]
86 wapp-trim {
87 <script nonce="%string($nonce)">
88 let x = document.getElementById("sbox");
89 x.size = (window.outerWidth/10) - 10;
90 let form = document.forms[0]
91 var mxMsg = 0
92 var _me = "%string($me)"
93 form.addEventListener('submit',(e)=>{
94 e.preventDefault();
@@ -149,12 +173,12 @@
149 }
150 async function poll(){
151 fetch("%string($pollurl)/" + mxMsg)
152 .then(x => x.json()).then(y => newcontent(y))
153 }
154 poll()
155 </script>
156 }
157
158 # Make sure the chat database exists
159 sqlite3 db [chat-db-name]
160 if {[db one {PRAGMA journal_mode}]!="wal"} {
161
--- tools/chat.tcl
+++ tools/chat.tcl
@@ -36,22 +36,21 @@
36 </div>
37 }
38 return
39 }
40 wapp-trim {
41 <form accept-encoding="utf-8" id="chat-form">
42 <div id='chat-input-area'>
43 <div id='chat-input-line'>
44 <input type="text" name="msg" id="sbox" placeholder="Type message here.">
45 <input type="submit" value="Send">
46 </div>
47 <div id='chat-input-file'>
48 <span>File:</span>
49 <input type="file" name="file">
50 </div>
51 </div>
 
52 </form>
53
54 <hr>
55 <table id="dialog">
56 </table>
@@ -74,21 +73,46 @@
73 padding: 0.5em;
74 border-radius: 1em;
75 background-color: #d2dde1;
76 border: 1px solid black;
77 }
78 \#chat-input-area {
79 width: 100%;
80 display: flex;
81 flex-direction: column;
82 }
83 \#chat-input-line {
84 display: flex;
85 flex-direction: row;
86 margin-bottom: 1em;
87 align-items: center;
88 }
89 \#chat-input-line > input[type=submit] {
90 flex: 1 5 auto;
91 max-width: 6em;
92 }
93 \#chat-input-line > input[type=text] {
94 flex: 5 1 auto;
95 }
96 \#chat-input-file {
97 display: flex;
98 flex-direction: row;
99 align-items: center;
100 }
101 \#chat-input-file > input {
102 flex: 1 0 auto;
103 }
104 </style>
105 }
106 set nonce [wapp-param FOSSIL_NONCE]
107 set submiturl [wapp-param SCRIPT_NAME]/send
108 set pollurl [wapp-param SCRIPT_NAME]/poll
109 set downloadurl [wapp-param SCRIPT_NAME]/download
110 set me [wapp-param FOSSIL_USER]
111 wapp-trim {
112 <script nonce="%string($nonce)">(function(){
113 let x = document.getElementById("sbox");
 
114 let form = document.forms[0]
115 var mxMsg = 0
116 var _me = "%string($me)"
117 form.addEventListener('submit',(e)=>{
118 e.preventDefault();
@@ -149,12 +173,12 @@
173 }
174 async function poll(){
175 fetch("%string($pollurl)/" + mxMsg)
176 .then(x => x.json()).then(y => newcontent(y))
177 }
178 poll();
179 })();</script>
180 }
181
182 # Make sure the chat database exists
183 sqlite3 db [chat-db-name]
184 if {[db one {PRAGMA journal_mode}]!="wal"} {
185

Keyboard Shortcuts

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