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