Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add login link to chat if required

Browse Source
This commit is contained in:
James Lyne 2021-01-24 22:35:59 +00:00
parent 8423a05b84
commit 31b05f2296
2 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/ChatBox.vue
View File

@ -26,6 +26,9 @@
placeholder="Type your chat message here..." :disabled="sendingMessage"> placeholder="Type your chat message here..." :disabled="sendingMessage">
<button class="chat__send" :disabled="!enteredMessage || sendingMessage">Send</button> <button class="chat__send" :disabled="!enteredMessage || sendingMessage">Send</button>
</form> </form>
<div v-if="loginRequired" class="chat__login">
Please <a href="login.html">login</a> to send chat messages
</div>
</section> </section>
</template> </template>
@ -45,10 +48,11 @@
componentSettings = computed(() => store.state.components.chatBox), componentSettings = computed(() => store.state.components.chatBox),
chatBoxVisible = computed(() => store.state.ui.visibleElements.has('chat')), chatBoxVisible = computed(() => store.state.ui.visibleElements.has('chat')),
sendingEnabled = computed(() => { loginRequired = computed(() => {
return store.state.components.chatSending && return store.state.components.chatSending && store.state.components.chatSending.loginRequired
(!store.state.components.chatSending.loginRequired || store.state.loggedIn); && !store.state.loggedIn;
}), }),
sendingEnabled = computed(() => store.state.components.chatSending && !loginRequired.value),
messageMaxLength = computed(() => store.state.components.chatSending?.maxLength), messageMaxLength = computed(() => store.state.components.chatSending?.maxLength),
chatInput = ref<HTMLInputElement | null>(null), chatInput = ref<HTMLInputElement | null>(null),
@ -101,6 +105,7 @@
enteredMessage, enteredMessage,
sendMessage, sendMessage,
messages, messages,
loginRequired,
sendingEnabled, sendingEnabled,
sendingMessage, sendingMessage,
sendingError, 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) { @media (max-width: 25rem), (max-height: 30rem) {
bottom: 6.5rem; bottom: 6.5rem;
left: 6.5rem; left: 6.5rem;

4
src/scss/style.scss
View File

@ -111,6 +111,10 @@ h2 {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
a {
color: $global-text-color;
}
button { button {
@extend %button; @extend %button;
} }