From 31b05f229621a8f1adf386eb853fa87fc9842c46 Mon Sep 17 00:00:00 2001 From: James Lyne Date: Sun, 24 Jan 2021 22:35:59 +0000 Subject: [PATCH] Add login link to chat if required --- src/components/ChatBox.vue | 21 ++++++++++++++++++--- src/scss/style.scss | 4 ++++ 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/components/ChatBox.vue b/src/components/ChatBox.vue index 78d72ff..afd2236 100644 --- a/src/components/ChatBox.vue +++ b/src/components/ChatBox.vue @@ -26,6 +26,9 @@ placeholder="Type your chat message here..." :disabled="sendingMessage"> +
+ Please login to send chat messages +
@@ -45,10 +48,11 @@ componentSettings = computed(() => store.state.components.chatBox), chatBoxVisible = computed(() => store.state.ui.visibleElements.has('chat')), - sendingEnabled = computed(() => { - return store.state.components.chatSending && - (!store.state.components.chatSending.loginRequired || store.state.loggedIn); + loginRequired = computed(() => { + return store.state.components.chatSending && store.state.components.chatSending.loginRequired + && !store.state.loggedIn; }), + sendingEnabled = computed(() => store.state.components.chatSending && !loginRequired.value), messageMaxLength = computed(() => store.state.components.chatSending?.maxLength), chatInput = ref(null), @@ -101,6 +105,7 @@ enteredMessage, sendMessage, messages, + loginRequired, sendingEnabled, sendingMessage, sendingError, @@ -175,6 +180,16 @@ } } + .chat__login { + font-size: 1.6rem; + padding: 1.2rem; + background-color: #333333; + color: #aaaaaa; + margin: 1.5rem -1.5rem -1.5rem; + border-bottom-left-radius: $global-border-radius; + border-bottom-right-radius: $global-border-radius; + } + @media (max-width: 25rem), (max-height: 30rem) { bottom: 6.5rem; left: 6.5rem; diff --git a/src/scss/style.scss b/src/scss/style.scss index c1e5955..4f74d32 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -111,6 +111,10 @@ h2 { margin-bottom: 1rem; } +a { + color: $global-text-color; +} + button { @extend %button; }