stream-top-bar.qtpl (5832B)
1 {% import "dkforest/pkg/database" %} 2 3 {% func RenderTopBar(CSRF string, Data chatTopBarData, AuthUser *database.User) -%} 4 <html lang="en"> 5 <head> 6 <title></title> 7 <style> 8 html, body { 9 margin: 0; 10 padding: 0; 11 } 12 body { font-family: Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; } 13 a { color: #00bc8c; text-decoration: none; font-size: 14px; } 14 a:hover { color: #007053; text-decoration: underline; } 15 .wrapper { 16 position: relative; 17 width: 500px; 18 } 19 .wrapper input, .wrapper textarea { 20 box-sizing: border-box; 21 border-radius: 10px 0px 0px 10px; 22 border: 1px solid rgba(10,10,10,255); 23 background: rgba(76, 76, 76, 255); 24 margin: 0; 25 float: left; 26 padding-right: 10px; 27 padding-left: 10px; 28 width: 421px; 29 height: 22px; 30 color: #fff; 31 box-shadow:0 0 0 black; 32 outline: none; 33 } 34 .wrapper input:focus { 35 outline: none; 36 } 37 .wrapper button { 38 border-radius: 0 10px 10px 0; 39 position: absolute; 40 top: 0; 41 right: 0; 42 width: 80px; 43 height: 22px; 44 color: white; 45 border: 1px solid rgba(10,10,10,255); 46 background: rgba(65, 65, 65, 255); 47 } 48 .wrapper button:hover { 49 background: rgba(57, 57, 57, 255); 50 } 51 {%- if Data.Multiline -%} 52 .wrapper textarea, .wrapper button { 53 height: 122px; 54 } 55 {%- endif -%} 56 * { 57 -webkit-font-smoothing: antialiased; 58 -moz-osx-font-smoothing: grayscale; 59 } 60 [list]::-webkit-calendar-picker-indicator { 61 display: none !important; 62 } 63 64 #top-bar-form { margin: 0; padding: 5px 0 0 0; } 65 #refresh-btn { line-height: 20px; } 66 #file-upload-btn { height: 16px; font-size: 9px; margin-top: 2px; margin-left: 5px; position: absolute; } 67 #err-lbl { color: #e74c3c; font-size: 80%; } 68 #success-lbl { color: #198754; font-size: 80%; } 69 #username-td { padding-right: 5px; } 70 #links-td { color: #aaa; } 71 </style> 72 </head> 73 <body> 74 <form method="post" id="top-bar-form" enctype="multipart/form-data"> 75 <input type="hidden" name="csrf" value="{%s CSRF %}" /> 76 <table> 77 <tr> 78 <td id="username-td"><span {%= unesc(AuthUser.GenerateChatStyle()) -%}>{%s string(AuthUser.Username) -%}</span></td> 79 <td> 80 <div class="wrapper"> 81 {%- if Data.Multiline -%} 82 <textarea name="message" maxlength="10000" autocomplete="off"{%- if AuthUser.SpellcheckEnabled -%} spellcheck="true"{%- endif -%} autofocus>{%s Data.Message %}</textarea> 83 {%- else -%} 84 <input value="{%s Data.Message -%}" type="text" name="message" maxlength="10000" autocomplete="off"{%- if AuthUser.SpellcheckEnabled -%} spellcheck="true"{%- endif -%} autofocus{%- if AuthUser.AutocompleteCommandsEnabled -%} list="commands"{%- endif -%} /> 85 {%- if AuthUser.AutocompleteCommandsEnabled -%} 86 <datalist id="commands"> 87 {%- for _, el := range Data.CommandsList -%}<option value="{%s el %}">{%- endfor -%} 88 </datalist> 89 {%- endif -%} 90 {%- endif -%} 91 <button type="submit" value="send_message" name="btn_submit">send</button> 92 </div> 93 </td> 94 </tr> 95 <tr> 96 <td> 97 {%- if Data.Error != "" || Data.Success != "" -%} 98 <a href="/api/v1/chat/top-bar/{%s Data.RoomName -%}?{%- if Data.Multiline -%}{%s Data.QueryParamsMl -%}{%- else -%}{%s Data.QueryParamsNml -%}{%- endif -%}" title="Refresh" id="refresh-btn">↻</a> 99 {%- endif -%} 100 </td> 101 <td id="links-td"> 102 {%- if Data.Error != "" -%} 103 <span id="err-lbl">{%s Data.Error -%}</span> 104 {%- elseif Data.Success != "" -%} 105 <span id="success-lbl">{%s Data.Success -%}</span> 106 {%- else -%} 107 <a href="/settings/chat" target="_top">Settings</a> | 108 <a href="/chat/help" target="_top">"Available commands</a> | 109 <a href="/chat/create-room" target="_top">Create room</a> 110 {%- if AuthUser.CanUseMultiline -%} | <a href="/chat/{%s Data.RoomName -%}?{%- if Data.Multiline -%}{%s Data.QueryParamsNml -%}{%- else -%}{%s Data.QueryParamsMl -%}{%- endif -%}" target="_top">ml</a>{%- endif -%} 111 {%- if AuthUser.CanUpload() -%} | <input name="file" type="file" id="file-upload-btn" />{%- endif -%} 112 {%- endif -%} 113 </td> 114 <td></td> 115 </tr> 116 </table> 117 </form> 118 </body> 119 </html> 120 {%- endfunc -%}