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} ?