Conversations and other stuff
This commit is contained in:
Troplo
parent
c0940970c9
commit
1d910927fe
30 changed files with 3468 additions and 35 deletions
|
|
@ -1,5 +1,5 @@
|
|||
VUE_APP_APIENDPOINT="/api/"
|
||||
VUE_APP_APIVERSION="v1"
|
||||
VUE_APP_GATEWAYENDPOINT="http://localhost:23981"
|
||||
VUE_APP_GATEWAYENDPOINT="/socket.io/"
|
||||
VUE_APP_STAGING=true
|
||||
VUE_APP_RELEASE="Canary"
|
||||
|
|
@ -1,3 +1,11 @@
|
|||
.large-icon {
|
||||
font-size: 60px;
|
||||
}
|
||||
.vertical {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
"i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales 'src/locales/**/*.json'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@kangc/v-md-editor": "^1.6.0",
|
||||
"@vue/cli": "^4.5.10",
|
||||
"axios": "^0.21.1",
|
||||
"buefy": "^0.9.4",
|
||||
|
|
@ -17,6 +18,8 @@
|
|||
"dotenv-webpack": "^6.0.0",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"socket.io": "^3.1.0",
|
||||
"tiptap": "^1.32.0",
|
||||
"tiptap-extensions": "^1.35.0",
|
||||
"to-boolean": "^1.0.0",
|
||||
"v-offline": "^1.3.0",
|
||||
"vue": "^2.6.11",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<style lang="scss">
|
||||
@import './assets/scss/buefy';
|
||||
@import './assets/scss/editor';
|
||||
</style>
|
||||
<style>
|
||||
@import 'https://kit-pro.fontawesome.com/releases/v5.15.1/css/pro.min.css';
|
||||
|
|
|
|||
222
src/assets/scss/editor.scss
Normal file
222
src/assets/scss/editor.scss
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
$color-black: #000000;
|
||||
$color-white: #ffffff;
|
||||
$color-grey: #dddddd;
|
||||
|
||||
.editor {
|
||||
position: relative;
|
||||
max-width: 30rem;
|
||||
margin: 0 auto 5rem auto;
|
||||
|
||||
&__content {
|
||||
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
|
||||
* {
|
||||
caret-color: currentColor;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 0.7rem 1rem;
|
||||
border-radius: 5px;
|
||||
background: $color-black;
|
||||
color: $color-white;
|
||||
font-size: 0.8rem;
|
||||
overflow-x: auto;
|
||||
|
||||
code {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
p code {
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 5px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
background: rgba($color-black, 0.1);
|
||||
color: rgba($color-black, 0.8);
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
li > p,
|
||||
li > ol,
|
||||
li > ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 3px solid rgba($color-black, 0.1);
|
||||
color: rgba($color-black, 0.8);
|
||||
padding-left: 0.8rem;
|
||||
font-style: italic;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
|
||||
td, th {
|
||||
min-width: 1em;
|
||||
border: 2px solid $color-grey;
|
||||
padding: 3px 5px;
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.selectedCell:after {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
background: rgba(200, 200, 255, 0.4);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.column-resize-handle {
|
||||
position: absolute;
|
||||
right: -2px; top: 0; bottom: 0;
|
||||
width: 4px;
|
||||
z-index: 20;
|
||||
background-color: #adf;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tableWrapper {
|
||||
margin: 1em 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.resize-cursor {
|
||||
cursor: ew-resize;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.menubar {
|
||||
|
||||
margin-bottom: 1rem;
|
||||
transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
|
||||
|
||||
&.is-hidden {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.is-focused {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0.2s, opacity 0.2s;
|
||||
}
|
||||
|
||||
&__button {
|
||||
font-weight: bold;
|
||||
display: inline-flex;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: $color-black;
|
||||
padding: 0.2rem 0.5rem;
|
||||
margin-right: 0.2rem;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($color-black, 0.05);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: rgba($color-black, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
span#{&}__button {
|
||||
font-size: 13.3333px;
|
||||
}
|
||||
}
|
||||
|
||||
.menububble {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
z-index: 20;
|
||||
background: $color-black;
|
||||
border-radius: 5px;
|
||||
padding: 0.3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
transform: translateX(-50%);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s, visibility 0.2s;
|
||||
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&__button {
|
||||
display: inline-flex;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: $color-white;
|
||||
padding: 0.2rem 0.5rem;
|
||||
margin-right: 0.2rem;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($color-white, 0.1);
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: rgba($color-white, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__input {
|
||||
font: inherit;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
315
src/assets/scss/elementStyles.scss
Normal file
315
src/assets/scss/elementStyles.scss
Normal file
|
|
@ -0,0 +1,315 @@
|
|||
@import './variables.scss';
|
||||
|
||||
body {
|
||||
background-color: rgba(245, 245, 245, 0.5);
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: $color__gray--primary;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 700;
|
||||
color: $color__darkgray--darker;
|
||||
position: relative;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=) repeat-x 100% 100%;
|
||||
text-decoration: none;
|
||||
|
||||
|
||||
&:hover, &:visited {
|
||||
color: $color__darkgray--primary;
|
||||
}
|
||||
&:active {
|
||||
color: $color__darkgray--darker;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background-color: $color__gray--primary;
|
||||
border-left: thick solid $color__gray--darkest;
|
||||
|
||||
& * {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.picture_circle {
|
||||
border-radius: 100%;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: calc(100% - 4px);
|
||||
height: calc(100% - 4px);
|
||||
left: 0;
|
||||
top: 0;
|
||||
border: 2px solid rgba(150, 150, 150, 0.25);
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
border: 1.5px solid $color__gray--darkest;
|
||||
display: inline-block;
|
||||
border-radius: 0.25rem;
|
||||
text-align: center;
|
||||
@include text($font--role-default, 1rem, bold);
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.25px;
|
||||
background: none;
|
||||
background-color: #fff;
|
||||
color: lighten($color__text--primary, 30%) ;
|
||||
transition: background-color 0.2s, border-color 0.2s, filter 0.2s;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
background-color: $color__lightgray--primary;
|
||||
border-color: $color__gray--darkest;
|
||||
}
|
||||
&:active {
|
||||
background-color: $color__lightgray--darker;
|
||||
border-color: $color__gray--darkest;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner { border: 0; }
|
||||
|
||||
@at-root #{&}--borderless {
|
||||
color: $color__text--secondary;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@at-root #{&}--thin_text {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@at-root #{&}--margin {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
@at-root #{&}--modal {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
@at-root #{&}--color_input {
|
||||
width: 10rem;
|
||||
margin-bottom: 1rem;
|
||||
height: 31px;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
@at-root #{&}--disabled {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
|
||||
@include user-select(none);
|
||||
|
||||
filter: saturate(80%) grayscale(40%) brightness(110%);
|
||||
}
|
||||
|
||||
@at-root #{&}--lightblue {
|
||||
border-color: $color__blue--primary;
|
||||
|
||||
&:hover, &:active {
|
||||
border-color: $color__blue--darker;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin filled_button($background, $border, $text: #fff) {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
color: $text ;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($background, 5%);
|
||||
border-color: rgba($border, 0.6);
|
||||
color: darken(#fff, 5%) ;
|
||||
}
|
||||
&:active {
|
||||
background-color: darken($background, 10%);
|
||||
border-color: rgba($border, 0.6);
|
||||
color: darken(#fff, 10%) ;
|
||||
}
|
||||
}
|
||||
@at-root #{&}--blue {
|
||||
@include filled_button(
|
||||
$color__blue--primary,
|
||||
$color__blue--darker
|
||||
);
|
||||
}
|
||||
@at-root #{&}--green {
|
||||
@include filled_button($color__green--primary, $color__green--darker);
|
||||
}
|
||||
@at-root #{&}--red {
|
||||
@include filled_button($color__red--primary, $color__red--darker);
|
||||
}
|
||||
}
|
||||
@media (max-width: 420px) {
|
||||
.button {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
border: 1.5px solid $color__gray--darkest;
|
||||
border-radius: 0.25rem;
|
||||
@include text;
|
||||
padding: 0.25rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
@include text($font--role-default, 3rem);
|
||||
}
|
||||
.h3 {
|
||||
@include text($font--role-default, 1.5rem);
|
||||
font-weight: 500;
|
||||
|
||||
@at-root #{&}--margin_top {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.p--condensed {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.category_widget {
|
||||
@at-root #{&}__box {
|
||||
background-color: #fff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
border: thin solid $color__gray--darker;
|
||||
}
|
||||
|
||||
@at-root #{&}__text {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@at-root #{&}__title {
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.overlay_message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-right: 5rem;
|
||||
font-size: 2rem;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
transition: none;
|
||||
color: $color__gray--darkest;
|
||||
|
||||
span {
|
||||
font-size: 4rem;
|
||||
color: $color__gray--darker;
|
||||
}
|
||||
|
||||
@at-root #{&}__loading {
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 420px) {
|
||||
div.overlay_message {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin-top: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.admin_badge {
|
||||
background: $color__darkgray--primary;
|
||||
border-radius: 0.25rem;
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
padding: 0.1rem 0.3rem;
|
||||
|
||||
@at-root #{&}--large {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.link_preview {
|
||||
border: thick solid $color__gray--primary;
|
||||
padding: 1rem;
|
||||
|
||||
h1, h2, p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
color: $color__darkgray--primary;
|
||||
}
|
||||
p {
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
img {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
#{&}__partial {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote.twitter-tweet {
|
||||
padding: 1rem;
|
||||
padding-top: 0;
|
||||
background-color: unset;
|
||||
margin: 0;
|
||||
border: thick solid $color__gray--primary;
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//Vue transition class
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-enter-active, .slide-leave-active {
|
||||
transition: opacity 0.2s, max-height 0.2s;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slide-enter, .slide-leave-to {
|
||||
max-height: 0;
|
||||
}
|
||||
.slide-enter-to, .slide-leave {
|
||||
max-height: 20rem;
|
||||
}
|
||||
84
src/assets/scss/elements.scss
Normal file
84
src/assets/scss/elements.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
@import './variables.scss';
|
||||
|
||||
.input {
|
||||
border: thin solid $gray-2;
|
||||
border-radius: 0.25rem;
|
||||
font-family: $font-family;
|
||||
font-weight: 300;
|
||||
height: 1.5rem;
|
||||
outline: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
transition: box-shadow 0.2s, border-color 0.2s;
|
||||
width: 100%;
|
||||
|
||||
&:hover, &:active {
|
||||
border-color: $gray-3;
|
||||
}
|
||||
&:focus {
|
||||
border-color: $gray-2;
|
||||
box-shadow: 0 0 0 2px $gray-2;
|
||||
}
|
||||
}
|
||||
.input--textarea {
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.85rem;
|
||||
height: unset;
|
||||
width: unset;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.label .input {
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
|
||||
.button {
|
||||
background-color: #fff;
|
||||
border: thin solid $gray-2;
|
||||
border-radius: 0.25rem;
|
||||
font-family: $font-family;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-hover;
|
||||
}
|
||||
&:active {
|
||||
background-color: $gray-0;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2px $gray-2;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
.button--blue {
|
||||
background-color: $blue-2;
|
||||
border-color: $blue-5;
|
||||
color: #fff;
|
||||
|
||||
&:hover { background-color: darken($blue-2, 5%) }
|
||||
&:active { background-color: darken($blue-2, 7.5%) }
|
||||
&:focus { box-shadow: 0 0 0 2px $blue-5; }
|
||||
}
|
||||
.button--blue_border {
|
||||
border-color: $blue-5;
|
||||
color: $blue-5;
|
||||
&:focus {
|
||||
border-color: $blue-4;
|
||||
box-shadow: 0 0 0 2px $blue-4;
|
||||
}
|
||||
}
|
||||
.button--red {
|
||||
background-color: $red-1;
|
||||
border-color: $red-5;
|
||||
color: #fff;
|
||||
|
||||
&:hover { background-color: darken($red-1, 5%) }
|
||||
&:active { background-color: darken($red-1, 7.5%) }
|
||||
&:focus { box-shadow: 0 0 0 2px $red-5; }
|
||||
}
|
||||
282
src/components/ChatConversationInput.vue
Normal file
282
src/components/ChatConversationInput.vue
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
<template>
|
||||
<div class='new_conversation_input'>
|
||||
<div
|
||||
class='new_conversation_input__input_bar'
|
||||
:class='{ "new_conversation_input__input_bar--focus": inputFocused }'
|
||||
>
|
||||
<div class='new_conversation_input__selected_user' v-for='(user) in selected' :key='"conversation-selected-" + user.id'>
|
||||
{{user.username}}
|
||||
</div>
|
||||
<div class='new_conversation_input__selected_users' v-if="selected.user">
|
||||
</div>
|
||||
<div class='new_conversation_input__placeholders_input'>
|
||||
<input
|
||||
ref='input'
|
||||
v-model='input'
|
||||
placeholder="Enter a username"
|
||||
class='new_conversation_input__input'
|
||||
@keydown='inputHandler'
|
||||
@focus='inputFocused = true;'
|
||||
@blur='inputFocused = false;'
|
||||
/>
|
||||
<div class='new_conversation_input__placeholders'>
|
||||
<span
|
||||
class='new_conversation_input__placeholder--hidden'
|
||||
>
|
||||
{{placeholders[0]}}
|
||||
</span>
|
||||
<span
|
||||
class='new_conversation_input__placeholder'
|
||||
v-if='placeholders[1]'
|
||||
>
|
||||
{{placeholders[1]}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<transition name='transition-slide-fade'>
|
||||
<div class='new_conversation_input__suggestions' v-if='suggestions.length'>
|
||||
<div
|
||||
class='new_conversation_input__suggestion_item'
|
||||
:class='{ "new_conversation_input__suggestion_item--focus": focusedSuggestionIndex === $index }'
|
||||
tabindex='0'
|
||||
v-for='(suggestion, $index) in suggestions'
|
||||
:key='"conversation-suggestion-" + suggestion.id'
|
||||
@click='addUser(suggestion)'
|
||||
>
|
||||
<div>
|
||||
<div class='new_conversation_input__profile_picture'></div>
|
||||
</div>
|
||||
<div class='new_conversation_input__name'>{{suggestion.username}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'new-conversation-input',
|
||||
props: ['value'],
|
||||
data () {
|
||||
return {
|
||||
input: '',
|
||||
inputFocused: false,
|
||||
suggestionsData: [],
|
||||
selected: [],
|
||||
focusedSuggestionIndex: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
suggestions () {
|
||||
return this.suggestionsData.filter(user => {
|
||||
return (
|
||||
!this.selected.filter(u => u.id === user.id).length &&
|
||||
user.username !== this.$store.state.username
|
||||
);
|
||||
});
|
||||
},
|
||||
selectedSuggestionIndex () {
|
||||
if(this.focusedSuggestionIndex !== null) {
|
||||
return this.focusedSuggestionIndex;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
placeholders () {
|
||||
if(!this.suggestions.length) {
|
||||
return ['', ''];
|
||||
}
|
||||
let firstSuggestion = this.suggestions[this.selectedSuggestionIndex].username;
|
||||
|
||||
return [
|
||||
firstSuggestion.slice(0, this.input.length),
|
||||
firstSuggestion.slice(this.input.length, firstSuggestion.length)
|
||||
];
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
inputHandler (e) {
|
||||
//tab, space or enter
|
||||
if([9, 32, 13].indexOf(e.keyCode) > -1) {
|
||||
e.preventDefault();
|
||||
this.addUser();
|
||||
//backspace
|
||||
} else if (
|
||||
e.keyCode === 8 &&
|
||||
!this.input.length &&
|
||||
this.selected.length
|
||||
) {
|
||||
this.input = this.selected.pop().username;
|
||||
//Down
|
||||
} else if(e.keyCode === 40) {
|
||||
this.setSelectionFocus(1);
|
||||
//Up
|
||||
} else if(e.keyCode === 38) {
|
||||
this.setSelectionFocus(-1);
|
||||
}
|
||||
},
|
||||
setSelectionFocus (direction) {
|
||||
let index = this.focusedSuggestionIndex;
|
||||
let length = this.suggestions.length;
|
||||
|
||||
if(!length) return;
|
||||
|
||||
if(index !== null) {
|
||||
let newIndex = (index + 1*direction) % length;
|
||||
this.focusedSuggestionIndex = (newIndex > 0) ? newIndex : null;
|
||||
} else if (direction === 1 && index === null) {
|
||||
this.focusedSuggestionIndex = 0;
|
||||
}
|
||||
},
|
||||
addUser (user) {
|
||||
if(user) {
|
||||
this.selected.push(user);
|
||||
} else if(this.suggestions.length) {
|
||||
this.selected.push(
|
||||
this.suggestions[this.selectedSuggestionIndex]
|
||||
);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
this.input = '';
|
||||
this.focusedSuggestionIndex = null;
|
||||
this.$refs.input.focus();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
input () {
|
||||
let input = this.input.trim();
|
||||
|
||||
if(input) {
|
||||
this.axios
|
||||
.get('/api/v1/kaverti/search/user/?q=' + input)
|
||||
.then(res => {
|
||||
this.suggestionsData = res.data.users;
|
||||
})
|
||||
.catch(e => {
|
||||
this.$store.commit('setErrors', e.response.data.errors);
|
||||
})
|
||||
} else {
|
||||
this.suggestionsData = [];
|
||||
}
|
||||
},
|
||||
selected () {
|
||||
this.$emit('input', this.selected);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import '../assets/scss/variables.scss';
|
||||
@import '../assets/scss/elements.scss';
|
||||
|
||||
.new_conversation_input {
|
||||
position: relative;
|
||||
|
||||
@at-root #{&}__input_bar {
|
||||
@extend .input;
|
||||
|
||||
display: flex;
|
||||
height: 2rem;
|
||||
padding: 0 0.25rem;
|
||||
padding-left: 0.125rem;
|
||||
width: 30rem;
|
||||
overflow-x: hidden;
|
||||
|
||||
@at-root #{&}--focus {
|
||||
border-color: $gray-2;
|
||||
box-shadow: 0 0 0 2px $gray-2;
|
||||
}
|
||||
}
|
||||
@at-root #{&}__selected_users {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-weight: 300;
|
||||
font-size: 0.85rem;
|
||||
margin-right: 0.125rem;
|
||||
}
|
||||
@at-root #{&}__selected_user {
|
||||
background-color: $gray-1;
|
||||
border-radius: 0.25rem;
|
||||
cursor: default;
|
||||
font-size: 0.8rem;
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
margin: 0.125rem;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
@at-root #{&}__placeholders_input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
@at-root #{&}__input {
|
||||
border: 0;
|
||||
font-family: $font-family;
|
||||
font-weight: 300;
|
||||
font-size: 0.85rem;
|
||||
height: 100%;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
@at-root #{&}__placeholders {
|
||||
align-items: center;
|
||||
color: $gray-2;
|
||||
display: flex;
|
||||
font-size: 0.85rem;
|
||||
height: 100%;
|
||||
left: 1px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
@at-root #{&}__placeholder {
|
||||
margin-left: -0.5px;
|
||||
|
||||
@at-root #{&}--hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@at-root #{&}__suggestions {
|
||||
background-color: #fff;
|
||||
border: thin solid $gray-2;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2);
|
||||
left: calc(50% - 15rem);
|
||||
max-height: 25rem;
|
||||
overflow-y: auto;
|
||||
padding: 0.25rem 0;
|
||||
position: absolute;
|
||||
top: calc(100% + 0.25rem);
|
||||
width: 30rem;
|
||||
}
|
||||
@at-root #{&}__suggestion_item {
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
font-weight: 300;
|
||||
padding: 0.5rem 1rem;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-hover;
|
||||
}
|
||||
@at-root #{&}--focus {
|
||||
background-color: $gray-0;
|
||||
}
|
||||
&:active, &:focus {
|
||||
background-color: $gray-0;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@at-root #{&}__profile_picture {
|
||||
border-radius: 100%;
|
||||
background-color: $gray-1;
|
||||
height: 1.5rem;
|
||||
margin-right: 0.5rem;
|
||||
width: 1.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
src/components/ChatMenu.vue
Normal file
115
src/components/ChatMenu.vue
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
<template>
|
||||
<div class='c_menu'>
|
||||
<div
|
||||
class='c_menu__slot'
|
||||
:class='{ "c_menu__slot--show": showMenu }'
|
||||
@click='showMenu = true'
|
||||
ref='slot'
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div
|
||||
class='c_menu__menu'
|
||||
:style='{ "left": left, "right": right }'
|
||||
:class='{ "c_menu__menu--show": showMenu }'
|
||||
>
|
||||
<div
|
||||
class='c_menu__item'
|
||||
:v-for='item in items'
|
||||
@click='showMenu = false; $emit(item.event)'
|
||||
>
|
||||
{{item.text}}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class='c_menu__overlay'
|
||||
:class='{ "c_menu__overlay--show": showMenu }'
|
||||
@click='showMenu = false'
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'c-menu',
|
||||
props: ['items'],
|
||||
data () {
|
||||
return {
|
||||
showMenu: false,
|
||||
left: '0',
|
||||
right: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
let rect = this.$refs.slot.getBoundingClientRect();
|
||||
let rem = 16;
|
||||
|
||||
if(rect.right + 10*rem + 0.5*rem > window.innerWidth) {
|
||||
this.left = null;
|
||||
this.right = '0';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import '../assets/scss/variables.scss';
|
||||
|
||||
.c_menu {
|
||||
position: relative;
|
||||
|
||||
@at-root #{&}__slot {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@at-root #{&}__overlay {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
|
||||
@at-root #{&}--show {
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
@at-root #{&}__menu {
|
||||
background-color: #fff;
|
||||
border: 1px solid $gray-2;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2);
|
||||
margin-top: -0.5rem;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
padding: 0.25rem 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: calc(100% + 0.25rem);
|
||||
transition: margin-top 0.2s, opacity 0.2s;
|
||||
width: 10rem;
|
||||
z-index: 3;
|
||||
|
||||
@at-root #{&}--show {
|
||||
margin-top: 0;
|
||||
pointer-events: all;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@at-root #{&}__item {
|
||||
cursor: default;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1rem;
|
||||
text-align: left;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: $gray-hover;
|
||||
}
|
||||
&:active {
|
||||
background-color: $gray-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
28
src/components/ChatPagination.vue
Normal file
28
src/components/ChatPagination.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<div class='scroll_load' @scroll='handler'>
|
||||
<c-loading-icon v-if='position === "top" && loading'>LOAD TOP</c-loading-icon>
|
||||
<slot></slot>
|
||||
<c-loading-icon v-if='position === "bottom" && loading'>LOAD BOTTOM</c-loading-icon>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'c-scroll-load',
|
||||
props: ['position', 'loading'],
|
||||
methods: {
|
||||
handler (e) {
|
||||
let $el = e.target;
|
||||
let height = $el.scrollHeight - $el.scrollTop - 16 <= $el.clientHeight;
|
||||
|
||||
if(
|
||||
(this.position === 'top' && $el.scrollTop < 16) ||
|
||||
(this.position === 'bottom' && height)
|
||||
) {
|
||||
this.$emit('load');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
41
src/components/ChatUserTyping.vue
Normal file
41
src/components/ChatUserTyping.vue
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<transition name='transition-fade'>
|
||||
<div class='user_typing' v-if='typingUsers.length'>
|
||||
<div class='user_typing__users' v-if='users.length > 2'>{{userList}} {{typingUsers.length > 2 ? "are" : "is"}} typing</div>
|
||||
<c-loading-dots>Loading</c-loading-dots>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'user-typing',
|
||||
props: ['users', 'typing-users'],
|
||||
computed: {
|
||||
userList () {
|
||||
this.typingUsers
|
||||
return this.typingUsers
|
||||
.map(u => u.username)
|
||||
.join(', ')
|
||||
.replace(/, ([^,]*)$/, ' and $1');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import '../assets/scss/variables.scss';
|
||||
|
||||
.user_typing {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.5rem 0;
|
||||
|
||||
@at-root #{&}__users {
|
||||
color: $text-secondary;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
113
src/components/ConversationMessage.vue
Normal file
113
src/components/ConversationMessage.vue
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<div
|
||||
class='conversation_message'
|
||||
:class='{
|
||||
"conversation_message--self": self,
|
||||
"conversation_message--margin": useMargin
|
||||
}'
|
||||
>
|
||||
<conversation-time-break :message='message' :previous='adjacentMessages.previous'></conversation-time-break>
|
||||
<div
|
||||
class='conversation_message__username'
|
||||
v-if='showUsername'
|
||||
>
|
||||
{{message.User.username}}
|
||||
</div>
|
||||
<pre
|
||||
class='conversation_message__message'
|
||||
:class='{
|
||||
"conversation_message__message--self": self
|
||||
}'
|
||||
>{{message.content}}</pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ConversationTimeBreak from './ConversationTimeBreak';
|
||||
|
||||
export default {
|
||||
name: 'conversation-message',
|
||||
props: ['message', 'users', 'context'],
|
||||
components: {
|
||||
ConversationTimeBreak
|
||||
},
|
||||
computed: {
|
||||
self () {
|
||||
return this.message.User.username === this.$store.state.username;
|
||||
},
|
||||
showUsername () {
|
||||
let prev = this.adjacentMessages.previous;
|
||||
let selfUsername = this.message.User.username;
|
||||
|
||||
//If first message or not from the same user
|
||||
//and there are more than two users in the conversation
|
||||
return (
|
||||
(!prev || prev.User.username !== selfUsername) &&
|
||||
(this.users.length > 2 && !this.self)
|
||||
);
|
||||
},
|
||||
useMargin () {
|
||||
let next = this.context[1];
|
||||
|
||||
//If next message exists and is not from the same user
|
||||
return (
|
||||
next &&
|
||||
next.User.username !== this.message.User.username
|
||||
);
|
||||
},
|
||||
adjacentMessages () {
|
||||
let currentIndex = this.context.findIndex(m => m.id === this.message.id);
|
||||
|
||||
return {
|
||||
previous: this.context[currentIndex-1],
|
||||
next: this.context[currentIndex+1]
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import '../assets/scss/variables.scss';
|
||||
|
||||
.conversation_message {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.125rem;
|
||||
|
||||
@at-root #{&}--self {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
@at-root #{&}--margin {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@at-root #{&}__username {
|
||||
color: $text-secondary;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 300;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
@at-root #{&}__message {
|
||||
background-color: $gray-0;
|
||||
border-radius: 1rem;
|
||||
font-family: $font-family;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
max-width: 75%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
white-space: pre-line;
|
||||
word-break: break-all;
|
||||
|
||||
@at-root #{&}--self {
|
||||
background-color: $blue-2;
|
||||
border-radius: 1rem;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
53
src/components/ConversationTimeBreak.vue
Normal file
53
src/components/ConversationTimeBreak.vue
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<div class='conversation_time_break' v-if='showDate'>
|
||||
{{formattedDate}}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'conversation-time-break',
|
||||
props: ['message', 'previous'],
|
||||
computed: {
|
||||
formattedDate () {
|
||||
let date = new Date(this.message.createdAt);
|
||||
|
||||
let beginningOfToday = new Date();beginningOfToday.setMilliseconds(0);beginningOfToday.setSeconds(0);beginningOfToday.setMinutes(0);beginningOfToday.setHours(0);
|
||||
let beginningOfYesterday = new Date(beginningOfToday - 24*60*60*1000);
|
||||
let timeString = date.toTimeString().slice(0, 5);
|
||||
|
||||
if(date - beginningOfToday >= 0) {
|
||||
return timeString;
|
||||
} else if(date - beginningOfYesterday >= 0) {
|
||||
return 'Yesterday at ' + timeString;
|
||||
} else {
|
||||
return date.toLocaleDateString() + ' at ' + timeString;
|
||||
}
|
||||
},
|
||||
showDate () {
|
||||
if(!this.previous) {
|
||||
return true;
|
||||
} else {
|
||||
let date = new Date(this.message.createdAt);
|
||||
let prev = new Date(this.previous.createdAt);
|
||||
|
||||
//Greater than 30 minutes difference
|
||||
return !prev || (date - prev) > 1000*60*30;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import '../assets/scss/variables.scss';
|
||||
|
||||
.conversation_time_break {
|
||||
color: $text-secondary;
|
||||
cursor: default;
|
||||
font-size: 0.85rem;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
13
src/components/Editor.vue
Normal file
13
src/components/Editor.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Editor"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
67
src/components/EditorIcons.vue
Normal file
67
src/components/EditorIcons.vue
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div class="icon" :class="[`icon--${name}`, `icon--${size}`, { 'has-align-fix': fixAlign }]">
|
||||
<svg class="icon__svg">
|
||||
<use xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="'#icon--' + name"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: {},
|
||||
size: {
|
||||
default: 'normal',
|
||||
},
|
||||
modifier: {
|
||||
default: null,
|
||||
},
|
||||
fixAlign: {
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
margin: 0 .3rem;
|
||||
top: -.05rem;
|
||||
fill: currentColor;
|
||||
// &.has-align-fix {
|
||||
// top: -.1rem;
|
||||
// }
|
||||
&__svg {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
// svg sprite
|
||||
body > svg,
|
||||
.icon use > svg,
|
||||
symbol {
|
||||
path,
|
||||
rect,
|
||||
circle,
|
||||
g {
|
||||
fill: currentColor;
|
||||
stroke: none;
|
||||
}
|
||||
*[d="M0 0h24v24H0z"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -224,7 +224,7 @@
|
|||
required>
|
||||
</b-input>
|
||||
</b-field>
|
||||
<b-checkbox v-model="register.agree">{{$t('register.agree')}} <router-link to="/legal/tos">{{$t('tos')}}</router-link></b-checkbox>
|
||||
<b-checkbox v-model="register.agree">{{$t('register.agree')}} <router-link @click="registerModal = false " to="/legal/tos">{{$t('tos')}}</router-link></b-checkbox>
|
||||
</section>
|
||||
<footer class="modal-card-foot">
|
||||
<b-button
|
||||
|
|
|
|||
236
src/components/SidebarChat.vue
Normal file
236
src/components/SidebarChat.vue
Normal file
|
|
@ -0,0 +1,236 @@
|
|||
<template>
|
||||
<div class=''>
|
||||
<div class='side_panel__header'>
|
||||
<c-menu
|
||||
class='side_panel__username'
|
||||
:items='userMenu'
|
||||
@logout='logout'
|
||||
>
|
||||
{{$store.state.username}} <font-awesome-icon icon='angle-down'></font-awesome-icon>
|
||||
</c-menu>
|
||||
<b-button
|
||||
class='side_panel__add button button--blue_border'
|
||||
@click='$router.push("/chat/conversation")'
|
||||
>
|
||||
New conversation
|
||||
</b-button>
|
||||
</div>
|
||||
<br>
|
||||
<div class='side_panel__search'>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='Search conversations and people'
|
||||
class='input side_panel__search__input'
|
||||
:class='{
|
||||
"side_panel__search__input--small": showCloseButton
|
||||
}'
|
||||
@focus='setShowCloseButton(true)'
|
||||
@keyup='getConversations'
|
||||
v-model='searchQuery'
|
||||
>
|
||||
<transition name='transition-grow'>
|
||||
<button
|
||||
class='button side_panel__search__close'
|
||||
v-if='showCloseButton'
|
||||
@click='setShowCloseButton(false)'
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</transition>
|
||||
</div>
|
||||
<c-scroll-load
|
||||
class='side_panel__conversations'
|
||||
:class='{ "side_panel__conversations--empty": !$store.state.user.conversations.length }'
|
||||
|
||||
:loading='loading'
|
||||
position='bottom'
|
||||
@load='getConversations'
|
||||
>
|
||||
<side-panel-conversation
|
||||
:v-for='conversation in $store.state.user.conversations'
|
||||
:conversation='conversation'
|
||||
tabindex='0'
|
||||
></side-panel-conversation>
|
||||
|
||||
<div v-if='!$store.state.user.conversations.length && !loading'>
|
||||
No conversations
|
||||
</div>
|
||||
</c-scroll-load>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CMenu from './ChatMenu';
|
||||
import CScrollLoad from './ChatPagination';
|
||||
import SidePanelConversation from './SidebarChatComp';
|
||||
|
||||
export default {
|
||||
name: 'side-panel',
|
||||
components: {
|
||||
CMenu,
|
||||
CScrollLoad,
|
||||
SidePanelConversation
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
page: 0,
|
||||
|
||||
loading: false,
|
||||
userMenu: [
|
||||
{ text: 'Settings', event: 'settings' },
|
||||
{ text: 'Log out', event: 'logout' }
|
||||
],
|
||||
|
||||
showCloseButton: false,
|
||||
searchQuery: ''
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
//When typing for each letter clear the data
|
||||
searchQuery () {
|
||||
this.page = 0;
|
||||
this.$store.commit('clearConversations');
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
logout () {
|
||||
this.axios
|
||||
.post('/api/user/logout')
|
||||
.then(() => {
|
||||
this.$store.commit('setUser', { id: null, username: null });
|
||||
this.$router.push('/');
|
||||
})
|
||||
.catch(e => {
|
||||
this.$store.commit('setErrors', e.response.data.errors);
|
||||
});
|
||||
},
|
||||
setShowCloseButton (val) {
|
||||
if(this.showCloseButton !== val) {
|
||||
this.showCloseButton = val;
|
||||
this.$store.commit('clearConversations');
|
||||
this.page = 0;
|
||||
|
||||
if(!val) {
|
||||
this.searchQuery = '';
|
||||
this.getConversations();
|
||||
}
|
||||
}
|
||||
},
|
||||
getConversations () {
|
||||
if(!this.loading && this.page !== null) {
|
||||
let params = { page: this.page };
|
||||
let searchQuery = this.searchQuery.trim();
|
||||
if(searchQuery) params.search = searchQuery;
|
||||
|
||||
this.loading = true;
|
||||
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `users/conversations`, { params })
|
||||
.then(res => {
|
||||
this.loading = false;
|
||||
this.$store.commit('addConversations', res.data.Conversations);
|
||||
this.page = res.data.continuePagination ? this.page+1 : null;
|
||||
})
|
||||
.catch(e => {
|
||||
this.loading = false;
|
||||
this.$store.commit('setErrors', e.response.data.errors);
|
||||
});
|
||||
}
|
||||
},
|
||||
updateConversations (updatedConversation) {
|
||||
//If conversation is already open, assume message has been read
|
||||
if(
|
||||
this.$route.name === 'conversation' &&
|
||||
this.$route.params.id &&
|
||||
+this.$route.params.id === updatedConversation.id
|
||||
) {
|
||||
updatedConversation.lastRead = new Date() + '';
|
||||
}
|
||||
this.$store.commit('updateUnshiftConversation', updatedConversation);
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getConversations();
|
||||
this.$io.on('conversation', this.updateConversations);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import '../assets/scss/variables.scss';
|
||||
|
||||
.side_panel {
|
||||
border-right: thin solid $gray-1;
|
||||
display: grid;
|
||||
grid-template-rows: 4rem 2.75rem auto;
|
||||
height: 100%;
|
||||
width: 17rem;
|
||||
|
||||
@at-root #{&}__username {
|
||||
svg {
|
||||
color: $gray-5;
|
||||
position: relative;
|
||||
top: 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@at-root #{&}__header {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
display: flex;
|
||||
font-weight: 300;
|
||||
justify-content: space-between;
|
||||
padding: 0 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
@at-root #{&}__username {
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
color: $gray-4;
|
||||
font-size: 0.85rem;
|
||||
margin-left: -0.25rem;
|
||||
}
|
||||
}
|
||||
@at-root #{&}__add {
|
||||
cursor: pointer;
|
||||
height: 2rem;
|
||||
}
|
||||
@at-root #{&}__search {
|
||||
align-self: start;
|
||||
display: grid;
|
||||
grid-template-columns: auto min-content;
|
||||
padding: 0 0.5rem;
|
||||
|
||||
@at-root #{&}__input {
|
||||
padding: 1rem 0.75rem;
|
||||
transition: padding 0.2s;
|
||||
|
||||
@at-root #{&}--small {
|
||||
padding: 1rem 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@at-root #{&}__close {
|
||||
margin-left: 0.25rem;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
}
|
||||
@at-root #{&}__conversations {
|
||||
align-self: start;
|
||||
//border-top: thin solid $gray-1;
|
||||
max-height: 100%;
|
||||
padding: 0.25rem;
|
||||
overflow-y: auto;
|
||||
|
||||
@at-root #{&}--empty {
|
||||
align-items: center;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
212
src/components/SidebarChatComp.vue
Normal file
212
src/components/SidebarChatComp.vue
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
<template>
|
||||
<div
|
||||
class='side_panel_conversation'
|
||||
:class='{
|
||||
"side_panel_conversation--selected": selected,
|
||||
"side_panel_conversation--unread": unread
|
||||
}'
|
||||
@click='goToConversation'
|
||||
@keydown.enter='goToConversation'
|
||||
>
|
||||
<div>
|
||||
<div class='side_panel_conversation__profile_picture'>
|
||||
<div
|
||||
class='side_panel_conversation__profile_picture__letter'
|
||||
:v-for='userLetter in userLetters'
|
||||
:class='[
|
||||
"side_panel_conversation__profile_picture__letter--" + userLetters.length
|
||||
]'
|
||||
:style='{
|
||||
"background-color": userLetter.color
|
||||
}'
|
||||
>
|
||||
{{userLetter.letter}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='side_panel_conversation__conversation_content'>
|
||||
<div class='side_panel_conversation__name'>{{conversation.name}}</div>
|
||||
<div class='side_panel_conversation__snippet'>
|
||||
{{username}}:
|
||||
{{conversation.Messages[0].content}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'side-panel-conversation',
|
||||
props: ['conversation'],
|
||||
computed: {
|
||||
selected () {
|
||||
return (
|
||||
this.$route.name === 'conversation' &&
|
||||
+this.$route.params.id === this.conversation.id
|
||||
);
|
||||
},
|
||||
unread () {
|
||||
return (
|
||||
new Date(this.conversation.lastRead) - new Date(this.conversation.Messages[0].createdAt) < 0
|
||||
);
|
||||
},
|
||||
username () {
|
||||
let username = this.conversation.Messages[0].User.username;
|
||||
|
||||
if(username === this.$store.state.username) {
|
||||
return 'You';
|
||||
} else {
|
||||
return username;
|
||||
}
|
||||
},
|
||||
userLetters () {
|
||||
return this.conversation.Users
|
||||
.filter(u => u.username !== this.$store.state.username)
|
||||
.map(u => {
|
||||
return {
|
||||
letter: u.username[0].toUpperCase(),
|
||||
color: u.color
|
||||
};
|
||||
})
|
||||
.slice(0, 4);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goToConversation () {
|
||||
this.$router.push("/chat/" + this.conversation.id);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import '../assets/scss/variables.scss';
|
||||
|
||||
.side_panel_conversation {
|
||||
background-color: #fff;
|
||||
//border-bottom: thin solid $gray-1;
|
||||
border-radius: 0.25rem;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
height: 5rem;
|
||||
margin: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
position: relative;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: $gray-hover;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: $gray-3;
|
||||
border-radius: 0.25rem 0 0 0.25rem;
|
||||
content: '';
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: opacity 0.2s;
|
||||
width: 0.25rem;
|
||||
}
|
||||
|
||||
@at-root #{&}--selected {
|
||||
background-color: $gray-0;
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: $gray-0;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@at-root #{&}--unread {
|
||||
background-color: transparentize($blue-1, 0.7);
|
||||
font-weight: bold;
|
||||
|
||||
&:hover { background-color: transparentize($blue-1, 0.7); }
|
||||
}
|
||||
|
||||
@at-root #{&}__profile_picture {
|
||||
background-color: $gray-1;
|
||||
border-radius: 100%;
|
||||
height: 3rem;
|
||||
overflow: hidden;
|
||||
width: 3rem;
|
||||
|
||||
@at-root #{&}__letter {
|
||||
font-weight: 300;
|
||||
padding: 0.25rem;
|
||||
text-align: center;
|
||||
|
||||
@at-root #{&}--1, #{&}--2 {
|
||||
font-size: 1.5rem;
|
||||
height: 3rem;
|
||||
line-height: 2.5rem;
|
||||
width: 3rem;
|
||||
}
|
||||
@at-root #{&}--2 {
|
||||
display: inline-block;
|
||||
font-size: 1rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
@at-root #{&}--3 {
|
||||
height: 1.5rem;
|
||||
|
||||
&:nth-child(1), &:nth-child(2) {
|
||||
display: inline-block;
|
||||
padding-bottom: 0;
|
||||
width: 1.5rem;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0;
|
||||
width: 3rem;
|
||||
}
|
||||
}
|
||||
@at-root #{&}--4 {
|
||||
display: inline-block;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
|
||||
&:nth-child(1), &:nth-child(2) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&:nth-child(3), &:nth-child(4) {
|
||||
padding-top: 0;
|
||||
}
|
||||
&:nth-child(1), &:nth-child(3) {
|
||||
padding-right: 0;
|
||||
}
|
||||
&:nth-child(2), &:nth-child(4) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@at-root #{&}__name {
|
||||
display: block;
|
||||
max-height: 1.25rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 10.25rem;
|
||||
}
|
||||
@at-root #{&}__conversation_content {
|
||||
font-size: 0.9rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
@at-root #{&}__snippet {
|
||||
color: $text-secondary;
|
||||
font-weight: 300;
|
||||
height: 2.5rem;
|
||||
overflow-y: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -186,7 +186,8 @@
|
|||
"text": "Modify user badges"
|
||||
},
|
||||
"home": {
|
||||
"globalWall": "Global Wall"
|
||||
"globalWall": "Global Wall",
|
||||
"news": "Kaverti News"
|
||||
},
|
||||
"badges": {
|
||||
"admin": "Admin",
|
||||
|
|
|
|||
40
src/main.js
40
src/main.js
|
|
@ -7,6 +7,46 @@ import axios from 'axios'
|
|||
import VueAxios from 'vue-axios'
|
||||
import i18n from './i18n'
|
||||
import moment from 'moment'
|
||||
import VMdEditor from '@kangc/v-md-editor';
|
||||
import '@kangc/v-md-editor/lib/style/base-editor.css';
|
||||
import enUS from '@kangc/v-md-editor/lib/lang/en-US';
|
||||
import createHljsTheme from '@kangc/v-md-editor/lib/theme/hljs';
|
||||
import json from 'highlight.js/lib/languages/json';
|
||||
const hljsTheme = createHljsTheme();
|
||||
import io from 'socket.io-client'
|
||||
import VueSocketIO from "vue-socket.io";
|
||||
Vue.use(
|
||||
new VueSocketIO({
|
||||
debug: true,
|
||||
connection: io(process.env.VUE_APP_GATEWAYENDPOINT), // options object is Optional
|
||||
})
|
||||
);
|
||||
Vue.use(VMdEditor)
|
||||
VMdEditor.lang.use('en-US', enUS);
|
||||
hljsTheme.extend((md, hljs) => {
|
||||
md.set({
|
||||
html: false, // Enable HTML tags in source
|
||||
xhtmlOut: false, // Use '/' to close single tags (<br />).
|
||||
// This is only for full CommonMark compatibility.
|
||||
breaks: true, // Convert '\n' in paragraphs into <br>
|
||||
langPrefix: 'language-', // CSS language prefix for fenced blocks. Can be
|
||||
// useful for external highlighters.
|
||||
linkify: true, // Autoconvert URL-like text to links
|
||||
image: false,
|
||||
|
||||
// Enable some language-neutral replacement + quotes beautification
|
||||
typographer: true,
|
||||
|
||||
// Double + single quotes replacement pairs, when typographer enabled,
|
||||
// and smartquotes on. Could be either a String or an Array.
|
||||
//
|
||||
// For example, you can use '«»„“' for Russian, '„“‚‘' for German,
|
||||
// and ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] for French (including nbsp).
|
||||
quotes: '“”‘’'
|
||||
})
|
||||
md.disable('image')
|
||||
hljs.registerLanguage('json', json);
|
||||
});
|
||||
Vue.use(VueAxios, axios)
|
||||
Vue.use(Buefy)
|
||||
Vue.config.productionTip = false
|
||||
|
|
|
|||
|
|
@ -51,6 +51,17 @@ const routes = [
|
|||
{ path: 'friends', component: route('UserFriends') },
|
||||
{ path: 'awards', component: route('UserAwards') }
|
||||
] },
|
||||
{
|
||||
path: '/chat',
|
||||
component: route('Chat'),
|
||||
redirect: ('/chat/home'),
|
||||
children: [
|
||||
{ path: '/', component: route('ChatHome') },
|
||||
{ path: '/home', component: route('ChatHome') },
|
||||
{ path: 'conversation', component: route('ChatMessage') },
|
||||
{ path: 'conversation/:id', component: route('ChatMessage'), name: 'conversation' }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/awards',
|
||||
name: 'Awards',
|
||||
|
|
|
|||
|
|
@ -46,7 +46,8 @@ export default new Vuex.Store({
|
|||
modeler: false,
|
||||
developerMode: false,
|
||||
executive: false,
|
||||
description: ''
|
||||
description: '',
|
||||
conversations: []
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
|
|
@ -131,6 +132,43 @@ export default new Vuex.Store({
|
|||
},
|
||||
brokenRoute(state, value) {
|
||||
state.enableBrokenRoutes = value
|
||||
},
|
||||
clearConversations (state) {
|
||||
state.user.conversations = [];
|
||||
},
|
||||
addConversations (state, conversations) {
|
||||
state.user.conversations.push(...conversations);
|
||||
},
|
||||
updateConversationLastRead (state, id) {
|
||||
let index = state.user.conversations.findIndex(conversation => {
|
||||
return conversation.id === id;
|
||||
});
|
||||
|
||||
let conversation = state.user.conversations[index];
|
||||
conversation.lastRead = new Date() + '';
|
||||
|
||||
state.user.conversations.splice(index, 1, conversation);
|
||||
},
|
||||
updateUnshiftConversation (state, updatedConversation) {
|
||||
let index = state.user.conversations.findIndex(conversation => {
|
||||
return conversation.id === updatedConversation.id;
|
||||
});
|
||||
|
||||
if(index > -1) {
|
||||
state.user.conversations.splice(index, 1);
|
||||
}
|
||||
|
||||
state.user.conversations.unshift(updatedConversation);
|
||||
},
|
||||
updateConversationName (state, { id, name }) {
|
||||
let index = state.user.conversations.findIndex(conversation => {
|
||||
return conversation.id === id;
|
||||
});
|
||||
|
||||
let conversation = state.user.conversations[index];
|
||||
conversation.name = name;
|
||||
|
||||
state.user.conversations.splice(index, 1, conversation);
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
|
|
|||
29
src/views/Chat.vue
Normal file
29
src/views/Chat.vue
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<main class="section">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="box">
|
||||
<SidebarChat></SidebarChat>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-10">
|
||||
<div class="box">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
<script>
|
||||
import SidebarChat from "@/components/SidebarChat";
|
||||
export default {
|
||||
components: {
|
||||
SidebarChat
|
||||
},
|
||||
name: "Chat"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
27
src/views/ChatHome.vue
Normal file
27
src/views/ChatHome.vue
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<template>
|
||||
<main>
|
||||
<div class="hero is-large is-large">
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<i class="fas fa-comment-lines large-icon"></i>
|
||||
<h1 class="title">
|
||||
Kaverti Messaging
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Chat with anyone on the Kaverti platform, all you need is their username!
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ChatHome"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
434
src/views/ChatMessage.vue
Normal file
434
src/views/ChatMessage.vue
Normal file
|
|
@ -0,0 +1,434 @@
|
|||
<template>
|
||||
<div class='conversation'>
|
||||
<b-modal
|
||||
v-model='showDeleteModal'
|
||||
button-text='OK, delete'
|
||||
color='red'
|
||||
@confirm='alert'
|
||||
>
|
||||
Are you sure you want to delete this conversation?
|
||||
</b-modal>
|
||||
|
||||
<b-modal
|
||||
v-model='showEditModal'
|
||||
button-text='Change name'
|
||||
color='blue'
|
||||
@confirm='saveEditModalModelName'
|
||||
>
|
||||
Enter the new name for your chat below
|
||||
<input
|
||||
type='text'
|
||||
placeholder='Chat name'
|
||||
class='input'
|
||||
style='margin-top: 0.5rem;'
|
||||
v-model='editModalModel'
|
||||
/>
|
||||
</b-modal>
|
||||
|
||||
<transition name='transition-fade' mode='out-in'>
|
||||
<div
|
||||
class='conversation__header'
|
||||
key='new-conversation'
|
||||
v-if='showNewConversationBar'
|
||||
>
|
||||
<new-conversation-input
|
||||
class='conversation__new_conversation_input'
|
||||
@input='selected => { newConversationUsers = selected }'
|
||||
></new-conversation-input>
|
||||
</div>
|
||||
<div class='conversation__header' key='header' v-else>
|
||||
<div class='conversation__title'>{{name}}</div>
|
||||
<div class='conversation__actions'>
|
||||
<c-menu
|
||||
:items='settingsItems'
|
||||
@delete='showDeleteModal = true'
|
||||
@edit='showEditModal = true'
|
||||
>Settings</c-menu>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<c-scroll-load
|
||||
class='conversation__main'
|
||||
position='top'
|
||||
:loading='loading'
|
||||
@load='getConversation'
|
||||
|
||||
ref='conversation'
|
||||
>
|
||||
<div class='conversation__main__conversations'>
|
||||
<conversation-message
|
||||
:v-for='message in messages'
|
||||
:context='messages'
|
||||
:message='message'
|
||||
:users='users'
|
||||
></conversation-message>
|
||||
</div>
|
||||
|
||||
<user-typing :users='users' :typing-users='typingUsers'></user-typing>
|
||||
|
||||
<div style='padding: 2.5rem'></div>
|
||||
</c-scroll-load>
|
||||
|
||||
|
||||
<div class='conversation__input_bar input'>
|
||||
<textarea
|
||||
class='input--textarea conversation__input'
|
||||
placeholder='Type your message here'
|
||||
@keydown.enter.prevent='() => $route.params.id ? sendMessage() : createConversation()'
|
||||
@keydown='sendTyping'
|
||||
v-model='input'
|
||||
></textarea>
|
||||
<button
|
||||
class='conversation__submit button button--blue'
|
||||
@click='() => $route.params.id ? sendMessage() : createConversation()'
|
||||
>
|
||||
<font-awesome-icon icon='paper-plane'></font-awesome-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CMenu from '../components/ChatMenu';
|
||||
import ConversationMessage from '../components/ConversationMessage';
|
||||
import ConversationTimeBreak from '../components/ConversationTimeBreak';
|
||||
import CScrollLoad from '../components/ChatPagination';
|
||||
import NewConversationInput from '../components/ChatConversationInput';
|
||||
import UserTyping from '../components/ChatUserTyping';
|
||||
|
||||
export default {
|
||||
name: 'conversation',
|
||||
components: {
|
||||
CMenu,
|
||||
ConversationMessage,
|
||||
// eslint-disable-next-line vue/no-unused-components
|
||||
ConversationTimeBreak,
|
||||
CScrollLoad,
|
||||
NewConversationInput,
|
||||
UserTyping
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
name: '',
|
||||
messages: [],
|
||||
users: [],
|
||||
input: '',
|
||||
page: 1,
|
||||
|
||||
typingUsers: [],
|
||||
typingInterval: null,
|
||||
typingTimer: null,
|
||||
|
||||
newConversationUsers: [],
|
||||
|
||||
settingsItems: [
|
||||
{ text: 'Delete', event: 'delete' },
|
||||
{ text: 'Edit chat name', event: 'edit' }
|
||||
],
|
||||
|
||||
showDeleteModal: false,
|
||||
|
||||
showEditModal: false,
|
||||
editModalModel: '',
|
||||
|
||||
showNewConversationBar: !this.$route.params.id,
|
||||
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
alert () {
|
||||
console.log('Confirm')
|
||||
},
|
||||
saveEditModalModelName () {
|
||||
let name = this.editModalModel.trim();
|
||||
|
||||
if(name.length) {
|
||||
this.axios
|
||||
.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `chat/conversation/${this.$route.params.id}/name`, { name })
|
||||
.then(res => {
|
||||
this.name = name;
|
||||
res
|
||||
this.$store.commit(
|
||||
'updateConversationName',
|
||||
{ id: +this.$route.params.id, name }
|
||||
);
|
||||
})
|
||||
.catch(e => {
|
||||
this.$store.commit('setErrors', e.response.data.errors);
|
||||
});
|
||||
}
|
||||
|
||||
this.editModalModel = '';
|
||||
},
|
||||
clearData () {
|
||||
this.name = '';
|
||||
this.messages = [];
|
||||
this.page = 1;
|
||||
this.newConversationUsers = [];
|
||||
|
||||
this.$socket.emit('leaveConversation', {
|
||||
conversationId: +this.$route.params.id || 0
|
||||
});
|
||||
},
|
||||
hasConversationGotScrollbar () {
|
||||
let $el = this.$refs.conversation.$el;
|
||||
|
||||
return $el.scrollHeight > $el.clientHeight;
|
||||
},
|
||||
getConversation () {
|
||||
//If there all pages have been loaded or
|
||||
//a new page is currently loading
|
||||
//then do not send off another request
|
||||
if(!this.$route.params.id || this.page === null || this.loading) return;
|
||||
|
||||
|
||||
this.showNewConversationBar = false;
|
||||
this.loading = true;
|
||||
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `chat/conversation/${this.$route.params.id}?page=${this.page}`)
|
||||
.then(res => {
|
||||
this.loading = false;
|
||||
this.showModal = false;
|
||||
|
||||
this.users = res.data.Users;
|
||||
this.name = res.data.name;
|
||||
this.page= res.data.continuePagination ? this.page + 1 : null;
|
||||
|
||||
let $conversation = this.$refs.conversation.$el;
|
||||
let scrollBottom = $conversation.scrollHeight - $conversation.scrollTop;
|
||||
|
||||
let ids = this.messages.map(m => m.id);
|
||||
let uniqueMessages = res.data.Messages.filter(message => {
|
||||
return !ids.includes(message.id);
|
||||
});
|
||||
this.messages.unshift(...uniqueMessages);
|
||||
|
||||
//Scroll back to original position before new messages were added
|
||||
this.$nextTick(() => {
|
||||
$conversation.scrollTop = $conversation.scrollHeight - scrollBottom;
|
||||
});
|
||||
|
||||
//Keep loading conversations until there is a scroll bar
|
||||
//To enable the scroll load mechanism
|
||||
if(!this.hasConversationGotScrollbar()) {
|
||||
this.getConversation();
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
this.loading = false;
|
||||
this.$store.commit('setErrors', e.response.data.errors);
|
||||
});
|
||||
},
|
||||
createConversation () {
|
||||
let userIds = this.newConversationUsers.map(user => user.id);
|
||||
userIds.push(+this.$store.state.user.id);
|
||||
|
||||
//If there is no message or only one user (themselves)
|
||||
//then do not create new conversation
|
||||
if(!this.input.trim().length || userIds.length < 2) return;
|
||||
|
||||
this.axios
|
||||
.post('/api/v1/chat/conversation', { userIds })
|
||||
.then(res => {
|
||||
this.name = res.data.name;
|
||||
this.$router.push({
|
||||
name: 'conversation',
|
||||
params: { id: res.data.id }
|
||||
});
|
||||
this.sendMessage();
|
||||
})
|
||||
.catch(e => {
|
||||
this.$store.commit('setErrors', e.response.data.errors);
|
||||
});
|
||||
},
|
||||
updateLastRead () {
|
||||
//this.axios.put('/api/v1/chat/conversation/' + this.$route.params.id);
|
||||
|
||||
//Conversation panel might not have loaded request, so try again in 200 msec
|
||||
if(!this.$store.state.user.conversations.length) {
|
||||
setTimeout(this.updateLastRead, 200);
|
||||
} else {
|
||||
this.$store.commit('updateConversationLastRead', +this.$route.params.id);
|
||||
}
|
||||
},
|
||||
sendMessage () {
|
||||
if(!this.input.trim().length) return;
|
||||
|
||||
this.$socket.emit('stopTyping', {
|
||||
conversationId: +this.$route.params.id
|
||||
});
|
||||
|
||||
this.axios
|
||||
.post('/api/v1/chat/message', {
|
||||
content: this.input.trim(),
|
||||
conversationId: +this.$route.params.id
|
||||
})
|
||||
.then(res => {
|
||||
res
|
||||
this.input = '';
|
||||
})
|
||||
.catch(e => {
|
||||
this.$store.commit('setErrors', e.response.data.errors);
|
||||
});
|
||||
},
|
||||
setTypingTimer () {
|
||||
this.typingTimer = setTimeout(() => {
|
||||
this.typingInterval = null;
|
||||
|
||||
this.$socket.emit('stopTyping', {
|
||||
conversationId: +this.$route.params.id
|
||||
});
|
||||
}, 2000);
|
||||
},
|
||||
sendTyping (e) {
|
||||
//Ignore enter keypress or if no conversation created yet
|
||||
if(e.keyCode === 13 || !this.$route.params.id) return;
|
||||
|
||||
//if interval does not exist --> send startTyping, start timer
|
||||
if(this.typingInterval === null) {
|
||||
this.$socket.emit('startTyping', {
|
||||
conversationId: +this.$route.params.id
|
||||
});
|
||||
|
||||
this.typingInterval = new Date();
|
||||
this.setTypingTimer();
|
||||
//if interval is less than 2 seconds --> clear timer
|
||||
} else if (new Date() - this.typingInterval < 2000) {
|
||||
clearTimeout(this.typingTimer);
|
||||
this.setTypingTimer();
|
||||
}
|
||||
},
|
||||
scrollToBottom (scrollIfNotAtBottom) {
|
||||
let $conversation = this.$refs.conversation.$el;
|
||||
|
||||
//If currently scorlled to bottom or parameter set to true
|
||||
if(
|
||||
scrollIfNotAtBottom ||
|
||||
$conversation.scrollHeight - $conversation.scrollTop === $conversation.clientHeight
|
||||
) {
|
||||
this.$nextTick(() => {
|
||||
$conversation.scrollTop = $conversation.scrollHeight;
|
||||
});
|
||||
}
|
||||
},
|
||||
pageLoad () {
|
||||
this.clearData();
|
||||
|
||||
if(this.$route.params.id) {
|
||||
this.$socket.emit('joinConversation', {
|
||||
conversationId: +this.$route.params.id
|
||||
});
|
||||
this.getConversation();
|
||||
this.updateLastRead();
|
||||
} else {
|
||||
this.showNewConversationBar = true;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.params': 'pageLoad'
|
||||
},
|
||||
mounted () {
|
||||
this.pageLoad();
|
||||
|
||||
this.$io.on('message', message => {
|
||||
if(message.ConversationId !== +this.$route.params.id) return;
|
||||
|
||||
this.messages.push(message);
|
||||
this.scrollToBottom();
|
||||
this.updateLastRead();
|
||||
});
|
||||
this.$io.on('startTyping', ({ userId }) => {
|
||||
let user = this.users.find(u => u.id === userId);
|
||||
this.typingUsers.push(user);
|
||||
this.scrollToBottom();
|
||||
});
|
||||
this.$io.on('stopTyping', ({ userId }) => {
|
||||
let index = this.typingUsers.findIndex(u => u.id === userId);
|
||||
this.typingUsers.splice(index, 1);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import '../assets/scss/variables';
|
||||
|
||||
.conversation {
|
||||
display: grid;
|
||||
grid-template-rows: 3rem auto;
|
||||
position: relative;
|
||||
|
||||
@at-root #{&}__header {
|
||||
border-bottom: thin solid $gray-1;
|
||||
display: grid;
|
||||
grid-column-gap: 0.5rem;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
padding: 0rem 2rem;
|
||||
}
|
||||
@at-root #{&}__title, #{&}__new_conversation_input {
|
||||
align-self: center;
|
||||
font-weight: bold;
|
||||
grid-column: 2;
|
||||
justify-self: center;
|
||||
}
|
||||
@at-root #{&}__actions {
|
||||
align-self: center;
|
||||
font-weight: 300;
|
||||
grid-column: 3;
|
||||
justify-self: end;
|
||||
}
|
||||
@at-root #{&}__main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
overflow-y: auto;
|
||||
padding: 0 1rem;
|
||||
padding-top: 1rem;
|
||||
|
||||
@at-root #{&}__conversations {
|
||||
align-content: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@at-root #{&}__input_bar {
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 6px 0px $gray-1;
|
||||
bottom: 0.5rem;
|
||||
display: flex;
|
||||
height: unset;
|
||||
margin: 0 2rem;
|
||||
padding: 0rem;
|
||||
position: absolute;
|
||||
width: calc(100% - 4rem);
|
||||
}
|
||||
@at-root #{&}__input {
|
||||
border: 0;
|
||||
font-family: $font-family;
|
||||
height: 3.25rem;
|
||||
padding: 0.75rem;
|
||||
width: 100%;
|
||||
}
|
||||
@at-root #{&}__submit {
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 4px 6px rgba($blue-5, 0.25);
|
||||
font-size: 1rem;
|
||||
height: 2rem;
|
||||
margin: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
width: 2rem;
|
||||
|
||||
svg {
|
||||
left: -0.1rem;
|
||||
position: relative;
|
||||
top: -0.15rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,144 @@
|
|||
<template>
|
||||
<main>
|
||||
<div class="section">
|
||||
<h1 class="title">{{thread.name}}</h1>
|
||||
<div class="column is-9" v-for='(post) in thread.Posts' :key='"threadPost-" + post.id'>
|
||||
<main class="section">
|
||||
<b-modal v-model="postModal">
|
||||
<div class="editor">
|
||||
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
|
||||
<div class="menubar">
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.bold() }"
|
||||
@click="commands.bold"
|
||||
>
|
||||
<icon name="bold" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.italic() }"
|
||||
@click="commands.italic"
|
||||
>
|
||||
<icon name="italic" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.strike() }"
|
||||
@click="commands.strike"
|
||||
>
|
||||
<icon name="strike" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.underline() }"
|
||||
@click="commands.underline"
|
||||
>
|
||||
<icon name="underline" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.code() }"
|
||||
@click="commands.code"
|
||||
>
|
||||
<icon name="code" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.paragraph() }"
|
||||
@click="commands.paragraph"
|
||||
>
|
||||
<icon name="paragraph" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.heading({ level: 1 }) }"
|
||||
@click="commands.heading({ level: 1 })"
|
||||
>
|
||||
H1
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.heading({ level: 2 }) }"
|
||||
@click="commands.heading({ level: 2 })"
|
||||
>
|
||||
H2
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.heading({ level: 3 }) }"
|
||||
@click="commands.heading({ level: 3 })"
|
||||
>
|
||||
H3
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.bullet_list() }"
|
||||
@click="commands.bullet_list"
|
||||
>
|
||||
<icon name="ul" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.ordered_list() }"
|
||||
@click="commands.ordered_list"
|
||||
>
|
||||
<icon name="ol" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.blockquote() }"
|
||||
@click="commands.blockquote"
|
||||
>
|
||||
<icon name="quote" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
:class="{ 'is-active': isActive.code_block() }"
|
||||
@click="commands.code_block"
|
||||
>
|
||||
<icon name="code" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
@click="commands.horizontal_rule"
|
||||
>
|
||||
<icon name="hr" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
@click="commands.undo"
|
||||
>
|
||||
<icon name="undo" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="menubar__button"
|
||||
@click="commands.redo"
|
||||
>
|
||||
<icon name="redo" />
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</editor-menu-bar>
|
||||
|
||||
<editor-content class="editor__content" :editor="editor" />
|
||||
</div>
|
||||
</b-modal>
|
||||
<h1 class="title">{{thread.name}} <b-tag v-if="thread.locked">Locked</b-tag><b-button @click="replyToThread()"><i class="fas fa-reply-all"></i></b-button></h1>
|
||||
<div class="">
|
||||
<div class="column" v-for='(post) in thread.Posts' :key='"threadPost-" + post.id'>
|
||||
<article class="media box">
|
||||
<figure class="media-left">
|
||||
<p class="image is-64x64">
|
||||
|
|
@ -18,6 +154,9 @@
|
|||
<div v-html="post.content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<b-button @click="replyToPost(post)"><i class="fas fa-reply"></i></b-button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,16 +165,72 @@
|
|||
|
||||
<script>
|
||||
import AjaxErrorHandler from "../../assets/js/errorHandler";
|
||||
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
|
||||
import {
|
||||
Blockquote,
|
||||
CodeBlock,
|
||||
HardBreak,
|
||||
Heading,
|
||||
HorizontalRule,
|
||||
OrderedList,
|
||||
BulletList,
|
||||
ListItem,
|
||||
TodoItem,
|
||||
TodoList,
|
||||
Bold,
|
||||
Code,
|
||||
Italic,
|
||||
Link,
|
||||
Strike,
|
||||
Underline,
|
||||
History,
|
||||
} from 'tiptap-extensions'
|
||||
import Icon from '../components/EditorIcons'
|
||||
export default {
|
||||
name: "ForumThread",
|
||||
components: {
|
||||
EditorContent,
|
||||
EditorMenuBar,
|
||||
Icon
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
thread: [],
|
||||
responseContent: '',
|
||||
offset: 0,
|
||||
loading: true
|
||||
loading: true,
|
||||
editor: new Editor({
|
||||
extensions: [
|
||||
new Blockquote(),
|
||||
new BulletList(),
|
||||
new CodeBlock(),
|
||||
new HardBreak(),
|
||||
new Heading({ levels: [1, 2, 3] }),
|
||||
new HorizontalRule(),
|
||||
new ListItem(),
|
||||
new OrderedList(),
|
||||
new TodoItem(),
|
||||
new TodoList(),
|
||||
new Link(),
|
||||
new Bold(),
|
||||
new Code(),
|
||||
new Italic(),
|
||||
new Strike(),
|
||||
new Underline(),
|
||||
new History(),
|
||||
],
|
||||
content: '<p>What do you have to say</p>'
|
||||
}),
|
||||
postModal: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
replyToThread() {
|
||||
|
||||
},
|
||||
replyToPost(post) {
|
||||
post
|
||||
},
|
||||
getThread(initial) {
|
||||
this.loading = true
|
||||
if(initial) {
|
||||
|
|
@ -58,6 +253,9 @@ export default {
|
|||
},
|
||||
mounted () {
|
||||
this.getThread(true)
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.editor.destroy()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class='thread_display__content'>
|
||||
{{thread.Posts[0].content}}
|
||||
{{thread.Posts[0].plainText}}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<main class="section">
|
||||
<div class="columns is-centered" v-if="$store.state.user.username">
|
||||
<main>
|
||||
<div class="columns is-centered section" v-if="$store.state.user.username">
|
||||
<div class="column is-4 has-text-centered">
|
||||
<h1 class="title has-text-centered">{{$store.state.user.username}}</h1>
|
||||
<div class="box">
|
||||
|
|
@ -53,7 +53,89 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-if="!$store.state.user.username">
|
||||
This route requires authentication
|
||||
<section class="hero is-info is-large is-fullheight-with-navbar" style="overflow: auto">
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="title">
|
||||
Kaverti
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
Kaverti is a new 3D sandbox gaming platform, and avatar social website.
|
||||
<br />
|
||||
Kaverti is home to hundreds of users who enjoy using it
|
||||
<br />
|
||||
So why not sign up today!
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="hero is-medium" style="overflow: auto">
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="title">
|
||||
The stats:
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-vcentered has-text-centered">
|
||||
<h1 class="title">{{$t('stats.users')}}</h1>
|
||||
<div class="box">
|
||||
<h1 class="title" v-if="!loading">
|
||||
{{users}}
|
||||
</h1>
|
||||
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-vcentered has-text-centered">
|
||||
<h1 class="title">{{$t('stats.posts')}}</h1>
|
||||
<div class="box">
|
||||
<h1 class="title" v-if="!loading">
|
||||
{{posts}}
|
||||
</h1>
|
||||
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-vcentered has-text-centered">
|
||||
<h1 class="title">{{$t('stats.purchased')}}</h1>
|
||||
<div class="box">
|
||||
<h1 class="title" v-if="!loading">
|
||||
{{inventory}}
|
||||
</h1>
|
||||
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-vcentered has-text-centered">
|
||||
<h1 class="title">{{$t('stats.teams')}}</h1>
|
||||
<div class="box">
|
||||
<h1 class="title" v-if="!loading">
|
||||
{{teams}}
|
||||
</h1>
|
||||
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-vcentered has-text-centered">
|
||||
<h1 class="title">{{$t('stats.items')}}</h1>
|
||||
<div class="box">
|
||||
<h1 class="title" v-if="!loading">
|
||||
{{items}}
|
||||
</h1>
|
||||
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-vcentered has-text-centered">
|
||||
<h1 class="title">{{$t('stats.threads')}}</h1>
|
||||
<div class="box">
|
||||
<h1 class="title" v-if="!loading">
|
||||
{{threads}}
|
||||
</h1>
|
||||
<b-skeleton size="is-large" :active="loading" :count="2"></b-skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
|
@ -75,7 +157,14 @@ export default {
|
|||
wallText: '',
|
||||
mentions: '',
|
||||
loadingWallButton: false,
|
||||
loadingWall: true
|
||||
loadingWall: true,
|
||||
users: 0,
|
||||
posts: 0,
|
||||
inventory: 0,
|
||||
teams: 0,
|
||||
threads: 0,
|
||||
items: 0,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -112,6 +201,18 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
this.axios.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'kaverti/stats')
|
||||
.then(res => {
|
||||
this.users = res.data.users
|
||||
this.posts = res.data.posts
|
||||
this.inventory = res.data.inventory
|
||||
this.items = res.data.items
|
||||
this.teams = res.data.teams
|
||||
this.threads = res.data.threads
|
||||
this.loading = false
|
||||
}).catch(() => {
|
||||
this.$buefy.snackbar.open({message:this.$t('errors.authFail'), type: 'is-warning'})
|
||||
})
|
||||
this.axios
|
||||
.get(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + `/` + `blog/posts`)
|
||||
.then(res => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<main>
|
||||
<main class="section">
|
||||
<div class="column is-vcentered">
|
||||
<h1 class="title">{{$t('stats.title')}}</h1>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue