From d7b805826416a85d678976ff5f1dc3882006d8ff Mon Sep 17 00:00:00 2001 From: Ginger Wong Date: Wed, 19 Aug 2020 00:16:35 -0700 Subject: [PATCH] make edits for a messages-only view of the chat module --- webroot/js/chat/chat-input.js | 38 +++++----- webroot/js/chat/chat.js | 30 ++++---- webroot/js/chat/standalone.js | 26 ++++++- webroot/standalone-chat.html | 7 +- webroot/styles/chat.css | 135 ++++++++++++++++++---------------- 5 files changed, 135 insertions(+), 101 deletions(-) diff --git a/webroot/js/chat/chat-input.js b/webroot/js/chat/chat-input.js index 76a0e7a36..198501f5c 100644 --- a/webroot/js/chat/chat-input.js +++ b/webroot/js/chat/chat-input.js @@ -18,6 +18,7 @@ export default class ChatInput extends Component { constructor(props, context) { super(props, context); this.formMessageInput = createRef(); + this.emojiPickerButton = createRef(); this.messageCharCount = 0; this.maxMessageLength = 500; @@ -65,10 +66,7 @@ export default class ChatInput extends Component { custom: json, initialCategory: 'custom', showPreview: false, - position: { - top: '50%', - right: '100' - }, + position: 'top' }); this.emojiPicker.on('emoji', emoji => { this.handleEmojiSelected(emoji); @@ -81,7 +79,7 @@ export default class ChatInput extends Component { handleEmojiButtonClick() { if (this.emojiPicker) { - this.emojiPicker.togglePicker(this.emojiPicker); + this.emojiPicker.togglePicker(this.emojiPickerButton.current); } } @@ -253,20 +251,26 @@ export default class ChatInput extends Component { onPaste=${this.handlePaste} /> -
${inputWarning} - + +
+ + + +
`); diff --git a/webroot/js/chat/chat.js b/webroot/js/chat/chat.js index 8eed44ed5..54caabc4c 100644 --- a/webroot/js/chat/chat.js +++ b/webroot/js/chat/chat.js @@ -128,18 +128,6 @@ export default class Chat extends Component { this.disableChat() } - // handleSubmitChatButton(event) { - // const { inputValue } = this.state; - // var value = inputValue.trim(); - // if (value) { - // this.submitChat(value); - // event.preventDefault(); - // return false; - // } - // event.preventDefault(); - // return false; - // } - submitChat(content) { if (!content) { return; @@ -186,18 +174,26 @@ export default class Chat extends Component { render(props, state) { - const { username } = props; + const { username, messagesOnly } = props; const { messages, inputEnabled, chatUserNames } = state; + const messageList = messages.map((message) => (html`<${Message} message=${message} username=${username} key=${message.id} />`)); + + if (messagesOnly) { + return ( + html` +
+ ${messageList} +
+ `); + } + return ( html`
- ${ - messages.map(message => (html`<${Message} message=${message} username=${username} />`)) - } - messages.. + ${messageList}
<${ChatInput} chatUserNames=${chatUserNames} diff --git a/webroot/js/chat/standalone.js b/webroot/js/chat/standalone.js index cb3a8243e..90d203e62 100644 --- a/webroot/js/chat/standalone.js +++ b/webroot/js/chat/standalone.js @@ -1,4 +1,8 @@ -import { html, Component } from "https://unpkg.com/htm/preact/index.mjs?module"; +import { h, Component, Fragment } from 'https://unpkg.com/preact?module'; +import htm from 'https://unpkg.com/htm?module'; +const html = htm.bind(h); + + import UsernameForm from './username.js'; import Chat from './chat.js'; import Websocket from '../websocket.js'; @@ -33,10 +37,26 @@ export default class StandaloneChat extends Component { } render(props, state) { + const { messagesOnly } = props; const { username, userAvatarImage, websocket } = state; + + + if (messagesOnly) { + return ( + html` + <${Chat} + websocket=${websocket} + username=${username} + userAvatarImage=${userAvatarImage} + chatEnabled + messagesOnly + /> + `); + } + return ( html` -
+ <${Fragment}> <${UsernameForm} username=${username} userAvatarImage=${userAvatarImage} @@ -50,7 +70,7 @@ export default class StandaloneChat extends Component { userAvatarImage=${userAvatarImage} chatEnabled /> -
+ `); } diff --git a/webroot/standalone-chat.html b/webroot/standalone-chat.html index 370467bb2..d7fa4b7f2 100644 --- a/webroot/standalone-chat.html +++ b/webroot/standalone-chat.html @@ -4,7 +4,7 @@ - + @@ -20,8 +20,11 @@ diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css index c6b33a4b6..289c62363 100644 --- a/webroot/styles/chat.css +++ b/webroot/styles/chat.css @@ -3,6 +3,7 @@ overflow: auto; padding: 1em 0; } + #message-input-container { width: 100%; padding: 1em; @@ -13,22 +14,8 @@ align-items: flex-end; margin-bottom: 0; } -#message-body-form { - font-size: 1em; - height: 60px; -} -#message-body-form:disabled{ - opacity: .5; -} -#message-body-form img { - display: inline; - padding-left: 5px; - padding-right: 5px; -} -#message-body-form .emoji { - width: 40px; -} + #message-form-actions { flex-direction: row; @@ -37,16 +24,22 @@ width: 100%; } -.message-text img { - display: inline; - padding-left: 5px; - padding-right: 5px; +#message-form-actions-buttons { + flex-direction: row; + justify-content: flex-end; + align-items: center; } -.message-text .emoji { - width: 60px; +/* Emoji picker button */ +#emoji-button { + font-size: 1.75em; + cursor: pointer; + margin-right: .5em; } +.emoji-picker__wrapper {} + + .message { @@ -68,13 +61,37 @@ max-width: 85%; word-wrap: break-word; } -.message-content a { + + + + + + +/* MESSAGE TEXT CONTENT */ +/* MESSAGE TEXT CONTENT */ +/* MESSAGE TEXT CONTENT */ +.message-text a { color: #7F9CF5; /* indigo-400 */ } -.message-content a:hover { +.message-text a:hover { text-decoration: underline; } +.message-text img { + display: inline; + padding-left: 5px; + padding-right: 5px; +} + +.message-text code { + background-color:darkslategrey; + padding: 3px; +} + +.message-text .emoji { + width: 60px; +} + .message-text iframe { width: 100%; @@ -86,57 +103,27 @@ height: 314px; } -.message-text code { - background-color:darkslategrey; - padding: 3px; -} -/* Emoji picker */ -#emoji-button { - position: relative; - top: -65px; - right: 10px; - cursor: pointer; -} - .message-text .embedded-image { width: 100%; height: 170px; border-radius: 15px; } -.message-text code { - background-color:darkslategrey; - padding: 3px; -} - -/* Emoji picker */ -#emoji-button { - position: relative; - top: -65px; - right: 10px; - cursor: pointer; -} -.message-text .embedded-image { - width: 100%; - height: 170px; - border-radius: 15px; -} - -.message-text code { - background-color:darkslategrey; - padding: 3px; -} .message-text .highlighted { color: orange; font-weight: 400; font-size: 14px; - } +/* MESSAGE TEXT CONTENT */ +/* MESSAGE TEXT CONTENT */ +/* MESSAGE TEXT CONTENT */ +/* MESSAGE TEXT CONTENT */ + + + + + -.message-text code { - background-color:darkslategrey; - padding: 3px; -} /* The chat input has a fake placeholder that is styled below. @@ -144,6 +131,30 @@ It pulls the placeholder text from the div's placeholder attribute. But really it's just the innerHTML content. */ + + + + + + +#message-body-form { + font-size: 1em; + height: 60px; +} +#message-body-form:disabled{ + opacity: .5; +} +#message-body-form img { + display: inline; + padding-left: 5px; + padding-right: 5px; +} + +#message-body-form .emoji { + width: 40px; +} + + /* If the div is empty then show the placeholder */ #message-body-form:empty:before{ content: attr(placeholder);