diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss
index 15a48da2..f2ccf482 100644
--- a/assets/chat/css/style.scss
+++ b/assets/chat/css/style.scss
@@ -1092,6 +1092,81 @@ hr {
}
}
+/* Poll input */
+#chat-poll-input {
+ &.active {
+ display: block;
+ }
+ display: none;
+ background-color: $color-surface-dark1;
+ z-index: 132;
+ border-radius: $bradius $bradius 0 0;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 0.5em;
+ border: 1px solid $color-surface-dark3;
+ .chat-poll-input-section {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ padding: 0.5em;
+ &:not(:last-child) {
+ border-bottom: 1px solid $color-surface-dark4;
+ }
+ &.chat-poll-input-title h2 {
+ margin: 0 0 0.5em 0;
+ }
+ &.chat-poll-input-buttons .chat-poll-input-row {
+ justify-content: space-between;
+ }
+ .chat-poll-input-row {
+ width: 100%;
+ align-items: center;
+ display: flex;
+ padding: 0.5em 0;
+ justify-content: center;
+ &.chat-poll-input-answer:nth-child(-n + 2) .chat-poll-input-button {
+ display: none;
+ }
+ span {
+ font-weight: 500;
+ padding: 0.25em;
+ }
+ input {
+ width: 100%;
+ padding: 0.25em;
+ margin: 0 0.25em;
+ border-radius: $bradius;
+ color: $color-chat-text2;
+ background-color: $color-surface-dark2;
+ border: 1px solid $color-red;
+ outline: none;
+ resize: none;
+ &:not(:placeholder-shown) {
+ border: 1px solid $color-surface-dark3;
+ }
+ }
+ .chat-poll-input-button {
+ margin: 0 0.5em 0 0.5em;
+ padding: 0.25em 0.75em;
+ border-radius: $bradius;
+ color: #fff;
+ font-weight: 500;
+ &.chat-poll-input-button-add,
+ &.chat-poll-input-button-send {
+ background: $color-green;
+ }
+ &.chat-poll-input-button-remove,
+ &.chat-poll-input-button-cancel {
+ background: $color-red;
+ }
+ }
+ }
+ }
+}
+
/* Auto complete */
#chat-auto-complete {
pointer-events: none;
diff --git a/assets/chat/js/autocomplete.js b/assets/chat/js/autocomplete.js
index 3ff9cd3f..16ba8e55 100644
--- a/assets/chat/js/autocomplete.js
+++ b/assets/chat/js/autocomplete.js
@@ -81,9 +81,10 @@ function selectHelper(ac) {
}
class ChatAutoComplete {
- constructor() {
+ constructor(chat) {
+ this.chat = chat;
/** @member jQuery */
- this.ui = $(`
`);
+ this.ui = this.chat.ui.find('#chat-auto-complete');
this.ui.on('click', 'li', (e) =>
this.select(parseInt(e.currentTarget.getAttribute('data-index'), 10)),
);
@@ -98,7 +99,6 @@ class ChatAutoComplete {
bind(chat) {
this.chat = chat;
this.input = chat.input;
- this.ui.insertBefore(chat.input);
let originval = '';
let shiftdown = false;
let keypressed = false;
diff --git a/assets/chat/js/chat.js b/assets/chat/js/chat.js
index ee355b68..c6fa90fa 100644
--- a/assets/chat/js/chat.js
+++ b/assets/chat/js/chat.js
@@ -31,6 +31,7 @@ import {
ChatEmoteTooltip,
ChatSettingsMenu,
ChatUserInfoMenu,
+ ChatPollInput,
} from './menus';
import ChatAutoComplete from './autocomplete';
import ChatInputHistory from './history';
@@ -94,7 +95,7 @@ class Chat {
this.windows = new Map();
this.settings = new Map(settingsdefault);
this.commands = new ChatCommands();
- this.autocomplete = new ChatAutoComplete();
+ this.autocomplete = null;
this.menus = new Map();
this.taggednicks = new Map();
this.taggednotes = new Map();
@@ -295,6 +296,7 @@ class Chat {
this.loginscrn = this.ui.find('#chat-login-screen');
this.loadingscrn = this.ui.find('#chat-loading');
this.windowselect = this.ui.find('#chat-windows-select');
+ this.autocomplete = new ChatAutoComplete(this);
this.inputhistory = new ChatInputHistory(this);
this.userfocus = new ChatUserFocus(this, this.css);
this.mainwindow = new ChatWindow('main').into(this);
@@ -352,6 +354,10 @@ class Chat {
this,
),
);
+ this.menus.set(
+ 'poll-input',
+ new ChatPollInput(this.ui.find('#chat-poll-input'), null, this),
+ );
this.autocomplete.bind(this);
@@ -1490,19 +1496,8 @@ class Chat {
}
cmdPOLL(parts, command) {
- const slashCommand = `/${command.toLowerCase()}`;
const textOnly = parts.join(' ');
- try {
- // Assume the command's format is invalid if an exception is thrown.
- parseQuestionAndTime(textOnly);
- } catch {
- MessageBuilder.info(
- `Usage: ${slashCommand} ?