mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-14 03:51:04 +00:00
fixed annoying bugs that keep ruining my life :(
This commit is contained in:
supertiger1234
parent
2f47774500
commit
b3e683c18a
22 changed files with 312 additions and 181 deletions
|
|
@ -1,20 +1,30 @@
|
|||
<template>
|
||||
<div :class="`profile-picture ${adminType ? adminType.name : ''}`" :style="`padding: ${$props.animationPadding || '3px'}`">
|
||||
<img v-if="adminType" class="emote" :src="adminType.emotePath" :style="`width: ${$props.emoteSize || '20px'}; height: ${$props.emoteSize ||'20px'}`">
|
||||
<div class="outer-profile-picture">
|
||||
<div
|
||||
:class="`inner-profile-picture ${$props.hover ? 'hoverable' : ''}`"
|
||||
:style="`height: ${$props.size}; width: ${$props.size}; background-image: url(${$props.url})`"
|
||||
></div>
|
||||
:class="`profile-picture ${adminType ? adminType.name : ''}`"
|
||||
:style="`padding: ${$props.animationPadding || '3px'}`"
|
||||
>
|
||||
<img
|
||||
v-if="adminType"
|
||||
class="emote"
|
||||
:src="adminType.emotePath"
|
||||
:style="`width: ${$props.emoteSize || '20px'}; height: ${$props.emoteSize ||'20px'}`"
|
||||
>
|
||||
<div
|
||||
:class="`inner-profile-picture ${$props.hover ? 'hoverable' : ''}`"
|
||||
:style="`height: ${$props.size}; width: ${$props.size}; background-image: url(${$props.url})`"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ["url", "size","emoteSize", "admin", "hover", 'animationPadding'],
|
||||
props: ["url", "size", "emoteSize", "admin", "hover", "animationPadding"],
|
||||
data() {
|
||||
return {
|
||||
crown: require("twemoji/2/svg/1f451.svg"),
|
||||
flower: require("twemoji/2/svg/1f33a.svg"),
|
||||
flower: require("twemoji/2/svg/1f33a.svg")
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -36,6 +46,10 @@ export default {
|
|||
|
||||
|
||||
<style scoped>
|
||||
.outer-profile-picture{
|
||||
z-index: 9999;
|
||||
user-select: none;
|
||||
}
|
||||
.profile-picture {
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
|
|
@ -49,8 +63,11 @@ export default {
|
|||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
transition: 0.2s;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-transform: translateZ(0) scale(1, 1);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.hoverable:hover{
|
||||
.hoverable:hover {
|
||||
filter: brightness(80%);
|
||||
}
|
||||
.creator {
|
||||
|
|
|
|||
|
|
@ -351,11 +351,9 @@ export default {
|
|||
const customEmoji = emojiParser.getCustomEmojisByShortCode(shortCode)
|
||||
return (customEmoji ? this.customEmojiPath + customEmoji.emojiID : undefined)
|
||||
},
|
||||
closePanel() {
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "emojiPanel",
|
||||
visibility: false
|
||||
});
|
||||
closePanel(event) {
|
||||
if (!event.target.closest('.emojis-button'))
|
||||
this.$emit('close')
|
||||
},
|
||||
emojiByGroup(index) {
|
||||
index = parseInt(index);
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<div class="chat-input-area" v-if="selectedChannelID">
|
||||
<div style="position: relative;">
|
||||
<emoji-suggestions v-if="emojiArray" :emojiArray="emojiArray"/>
|
||||
<emoji-panel v-if="emojiPanelShow"/>
|
||||
<emoji-panel v-if="showEmojiPanel" @close="showEmojiPanel = false"/>
|
||||
</div>
|
||||
|
||||
<div class="message-area">
|
||||
|
|
@ -62,10 +62,7 @@
|
|||
v-model="message"
|
||||
@paste="onPaste"
|
||||
></textarea>
|
||||
<button
|
||||
class="emojis-button"
|
||||
@click="$store.dispatch('setPopoutVisibility', {name: 'emojiPanel', visibility: true})"
|
||||
>
|
||||
<button class="emojis-button" @click="showEmojiPanel = !showEmojiPanel">
|
||||
<i class="material-icons">face</i>
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -103,7 +100,7 @@ import emojiSuggestions from "@/components/app/EmojiPanels/emojiSuggestions.vue"
|
|||
import emojiParser from "@/utils/emojiParser.js";
|
||||
import statuses from "@/utils/statuses";
|
||||
|
||||
const emojiPanel = () => import( '@/components/app/EmojiPanels/emojiPanel.vue' );
|
||||
const emojiPanel = () => import("@/components/app/EmojiPanels/emojiPanel.vue");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -121,7 +118,8 @@ export default {
|
|||
postTimerID: null,
|
||||
getTimerID: null,
|
||||
typing: false,
|
||||
whosTyping: ""
|
||||
whosTyping: "",
|
||||
showEmojiPanel: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -300,7 +298,13 @@ export default {
|
|||
enterEmojiPanel(shortcode) {
|
||||
const target = this.$refs["input-box"];
|
||||
target.focus();
|
||||
document.execCommand("insertText", false, `:${shortcode}: `);
|
||||
|
||||
if (document.queryCommandSupported("insertText")) {
|
||||
document.execCommand("insertText", false, `:${shortcode}: `);
|
||||
} else {
|
||||
document.execCommand("paste", false, `:${shortcode}: `);
|
||||
}
|
||||
target.blur();
|
||||
this.$store.dispatch("settingsModule/addRecentEmoji", shortcode);
|
||||
},
|
||||
keyDown(event) {
|
||||
|
|
@ -442,25 +446,24 @@ export default {
|
|||
emojiArray() {
|
||||
return this.$store.getters.emojiArray;
|
||||
},
|
||||
emojiPanelShow() {
|
||||
return this.$store.getters.popouts.emojiPanel;
|
||||
},
|
||||
emojiIndex() {
|
||||
return this.$store.getters.getEmojiIndex;
|
||||
},
|
||||
userStatusColor() {
|
||||
|
||||
const selectedChannel = this.$store.getters.selectedChannelID;
|
||||
const channel = this.$store.getters.channels[selectedChannel];
|
||||
|
||||
let status = 0;
|
||||
if (!channel) {
|
||||
status = 0;
|
||||
}else if (this.$store.getters.user.friends[channel.recipients[0].uniqueID]) {
|
||||
status = this.$store.getters.user.friends[channel.recipients[0].uniqueID].recipient.status || 0
|
||||
} else if (
|
||||
this.$store.getters.user.friends[channel.recipients[0].uniqueID]
|
||||
) {
|
||||
status =
|
||||
this.$store.getters.user.friends[channel.recipients[0].uniqueID]
|
||||
.recipient.status || 0;
|
||||
}
|
||||
return statuses[status].color
|
||||
|
||||
return statuses[status].color;
|
||||
|
||||
// const allFriends = this.$store.getters.user.friends;
|
||||
// const selectedChannel = this.$store.getters.selectedChannelID;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<template>
|
||||
<div :class="{message: true, ownMessage: user.uniqueID === $props.uniqueID, ownMessageLeft: user.uniqueID === $props.uniqueID && (apperance && apperance.own_message_right === true)} ">
|
||||
<div class="outer-profile-picture">
|
||||
<profile-picture :admin="$props.admin" :url="userAvatar" size="50px" :hover="true" @click.native="openUserInformation"/>
|
||||
</div>
|
||||
<profile-picture class="avatar" :admin="$props.admin" :url="userAvatar" size="50px" :hover="true" @click.native="openUserInformation"/>
|
||||
<div class="triangle">
|
||||
<div class="triangle-inner"></div>
|
||||
</div>
|
||||
|
|
@ -129,7 +127,7 @@ export default {
|
|||
border-left: 7px solid rgba(184, 184, 184, 0.219);
|
||||
border-right: none !important;
|
||||
}
|
||||
.ownMessageLeft .profile-picture {
|
||||
.ownMessageLeft .avatar {
|
||||
margin-right: 0px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
|
@ -140,9 +138,6 @@ export default {
|
|||
|
||||
|
||||
|
||||
.outer-profile-picture{
|
||||
z-index:9999;
|
||||
}
|
||||
.message {
|
||||
margin: 10px;
|
||||
margin-top: 10px;
|
||||
|
|
@ -207,7 +202,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.profile-picture {
|
||||
.avatar {
|
||||
margin: auto;
|
||||
margin-left: 0;
|
||||
margin-right: 5px;
|
||||
|
|
|
|||
|
|
@ -54,7 +54,8 @@ export default {
|
|||
openUserInformation() {
|
||||
this.$store.dispatch('setUserInformationPopout', this.user.uniqueID)
|
||||
},
|
||||
closeMenus() {
|
||||
closeMenus(event) {
|
||||
if (event.target.closest('.status')) return;
|
||||
this.status.isPoppedOut = false;
|
||||
},
|
||||
openSurvey() {
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<drag-drop-file-upload-dialog key="ddfud" v-if="showUploadDrapDrop"/>
|
||||
<user-information-popout key="uip" v-if="popouts.userInformationPopoutID"/>
|
||||
<take-survey-popout key="tsp" v-if="popouts.surveyPopout"/>
|
||||
<AddServer key="as" v-if="false"/>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -16,6 +17,7 @@
|
|||
|
||||
//popouts
|
||||
const userInformationPopout = () => import('./Popouts/userInformationPopout.vue');
|
||||
const AddServer = () => import('./Popouts/AddServer.vue');
|
||||
const Settings = () => import('./Popouts/Settings.vue');
|
||||
const TakeSurveyPopout = () => import('./Popouts/TakeSurveyPopout.vue');
|
||||
const uploadDialog = () => import('./Popouts/uploadDialog.vue');
|
||||
|
|
@ -33,7 +35,8 @@ export default {
|
|||
userInformationPopout,
|
||||
DragDropFileUploadDialog,
|
||||
imageLargePreview,
|
||||
TakeSurveyPopout
|
||||
TakeSurveyPopout,
|
||||
AddServer
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
54
src/components/app/Popouts/Popouts/AddServer.vue
Normal file
54
src/components/app/Popouts/Popouts/AddServer.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<div class="dark-background" @click="backgroundClick">
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { bus } from "@/main";
|
||||
import settingsService from "@/services/settingsService";
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
closeMenu() {
|
||||
this.$store.dispatch("setPopoutVisibility", {
|
||||
name: "GDLinkMenu",
|
||||
visibility: false
|
||||
});
|
||||
},
|
||||
backgroundClick(e) {
|
||||
if (e.target.classList.contains("dark-background")) {
|
||||
this.closeMenu();
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.dark-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.781);
|
||||
z-index: 111111;
|
||||
display: flex;
|
||||
}
|
||||
.inner {
|
||||
margin: auto;
|
||||
height: 400px;
|
||||
width: 400px;
|
||||
background: rgb(32, 32, 32);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -2,7 +2,6 @@
|
|||
<div class="settings-darken-background">
|
||||
<div class="settings-box">
|
||||
<div class="tabs">
|
||||
|
||||
<div
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
|
|
@ -12,7 +11,6 @@
|
|||
<div class="material-icons">{{tab.icon}}</div>
|
||||
<div class="tab-name">{{tab.name}}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="title">
|
||||
|
|
@ -31,11 +29,9 @@
|
|||
<script>
|
||||
import { bus } from "@/main";
|
||||
|
||||
|
||||
const MyProfile = () => import( './SettingsPanels/MyProfile.vue' );
|
||||
const ManageEmojis = () => import( './SettingsPanels/ManageEmojis.vue' );
|
||||
const MessageDesign = () => import( './SettingsPanels/MessageDesign.vue' );
|
||||
|
||||
const MyProfile = () => import("./SettingsPanels/MyProfile.vue");
|
||||
const ManageEmojis = () => import("./SettingsPanels/ManageEmojis.vue");
|
||||
const MessageDesign = () => import("./SettingsPanels/MessageDesign.vue");
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -95,8 +91,10 @@ export default {
|
|||
.settings-box {
|
||||
height: 600px;
|
||||
display: flex;
|
||||
|
||||
margin: auto;
|
||||
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.507);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tabs {
|
||||
background: rgba(24, 24, 24, 0.938);
|
||||
|
|
@ -105,6 +103,7 @@ export default {
|
|||
min-width: 150px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.panel {
|
||||
display: flex;
|
||||
|
|
@ -168,6 +167,27 @@ export default {
|
|||
font-size: 30px;
|
||||
}
|
||||
|
||||
/* ------- SCROLL BAR -------*/
|
||||
/* width */
|
||||
.tabs::-webkit-scrollbar {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
.tabs::-webkit-scrollbar-track {
|
||||
background: #8080806b;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
.tabs::-webkit-scrollbar-thumb {
|
||||
background: #f5f5f559;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
.tabs::-webkit-scrollbar-thumb:hover {
|
||||
background: #f5f5f59e;
|
||||
}
|
||||
|
||||
@media (max-width: 815px) {
|
||||
.settings-box {
|
||||
width: 100%;
|
||||
|
|
@ -178,5 +198,24 @@ export default {
|
|||
height: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 550px) {
|
||||
.settings-box {
|
||||
flex-direction: column;
|
||||
}
|
||||
.tabs {
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tab {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.panel {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,12 @@
|
|||
<div class="drop-down">
|
||||
<div class="main-name">{{name}}</div>
|
||||
<div class="box" @click="opened = !opened">
|
||||
<div class="selected" >
|
||||
<div class="emoji" v-if="selected !== null && updateItems[selected]" v-html="updateItems[selected].emoji || ''"></div>
|
||||
<div class="selected">
|
||||
<div
|
||||
class="emoji"
|
||||
v-if="selected !== null && updateItems[selected]"
|
||||
v-html="updateItems[selected].emoji || ''"
|
||||
></div>
|
||||
{{selected === null ? 'Select One' : updateItems[selected].name}}
|
||||
</div>
|
||||
<i class="material-icons">expand_more</i>
|
||||
|
|
@ -26,7 +30,7 @@
|
|||
|
||||
<script>
|
||||
import emojiParser from "@/utils/emojiParser.js";
|
||||
import { constants } from 'crypto';
|
||||
import { constants } from "crypto";
|
||||
export default {
|
||||
model: {
|
||||
prop: "itemSelected",
|
||||
|
|
@ -48,26 +52,26 @@ export default {
|
|||
},
|
||||
watch: {
|
||||
updateItems() {
|
||||
this.selected = null;
|
||||
this.selected = null;
|
||||
},
|
||||
itemSelected(){
|
||||
itemSelected() {
|
||||
this.selected = this.itemSelected;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
updateItems() {
|
||||
this.$emit("change", null);
|
||||
this.$emit("change", null);
|
||||
let newArr = [];
|
||||
for (let index = 0; index < this.items.length; index++) {
|
||||
let element = this.items[index];
|
||||
if (element.emoji) {
|
||||
if (element.emoji.startsWith("<img")) return this.items
|
||||
element.emoji = emojiParser.replaceEmojis(element.emoji);
|
||||
newArr.push(element);
|
||||
} else {
|
||||
element.emoji = ""
|
||||
newArr.push(element);
|
||||
}
|
||||
let element = this.items[index];
|
||||
if (element.emoji) {
|
||||
if (element.emoji.startsWith("<img")) return this.items;
|
||||
element.emoji = emojiParser.replaceEmojis(element.emoji);
|
||||
newArr.push(element);
|
||||
} else {
|
||||
element.emoji = "";
|
||||
newArr.push(element);
|
||||
}
|
||||
}
|
||||
return newArr;
|
||||
}
|
||||
|
|
@ -150,4 +154,4 @@ export default {
|
|||
width: 20px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -1,15 +1,14 @@
|
|||
<template>
|
||||
<div class="my-profile-panel">
|
||||
<div class="general-information">
|
||||
<div class="profile-picture-outer">
|
||||
<profile-picture
|
||||
:url="avatar"
|
||||
:admin="user.admin"
|
||||
size="100px"
|
||||
emoteSize="30px"
|
||||
animationPadding="5px"
|
||||
/>
|
||||
</div>
|
||||
<profile-picture
|
||||
class="avatar"
|
||||
:url="avatar"
|
||||
:admin="user.admin"
|
||||
size="100px"
|
||||
emoteSize="30px"
|
||||
animationPadding="5px"
|
||||
/>
|
||||
<div class="information">
|
||||
<div class="username">
|
||||
<strong>Username:</strong>
|
||||
|
|
@ -147,13 +146,11 @@ export default {
|
|||
width: 100%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.profile-picture-outer {
|
||||
.avatar {
|
||||
display: flex;
|
||||
z-index: 99999;
|
||||
}
|
||||
.profile-picture {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.information {
|
||||
margin: auto;
|
||||
margin-left: 20px;
|
||||
|
|
@ -239,7 +236,7 @@ export default {
|
|||
display: block;
|
||||
flex-direction: column;
|
||||
}
|
||||
.profile-picture {
|
||||
.avatar{
|
||||
margin: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ export default {
|
|||
components: { DropDown },
|
||||
data() {
|
||||
return {
|
||||
surveyItems: Object.assign({},surveyItems),
|
||||
surveyItems: Object.assign({}, surveyItems),
|
||||
surveyErrorMessage: null,
|
||||
surveyValidMessage: null,
|
||||
previousLoaded: false,
|
||||
|
|
@ -91,25 +91,31 @@ export default {
|
|||
}
|
||||
}
|
||||
//checks if all values are not null
|
||||
if ( this.selected.name.trim() === "" || this.selected.about_me.trim() === "") {
|
||||
if (
|
||||
this.selected.name.trim() === "" ||
|
||||
this.selected.about_me.trim() === ""
|
||||
) {
|
||||
this.surveyErrorMessage = "Make sure you select / fill in all fields!";
|
||||
return;
|
||||
}
|
||||
this.surveyValidMessage = "Saving..."
|
||||
this.surveyValidMessage = "Saving...";
|
||||
//gets the country index after unfiltering.
|
||||
let countryIndex = undefined;
|
||||
if (this.filterCountry[this.selected.country]) {
|
||||
const selectedCountryName = this.filterCountry[this.selected.country].name;
|
||||
countryIndex = this.surveyItems.countries.findIndex(el => el.name == selectedCountryName);
|
||||
const selectedCountryName = this.filterCountry[this.selected.country]
|
||||
.name;
|
||||
countryIndex = this.surveyItems.countries.findIndex(
|
||||
el => el.name == selectedCountryName
|
||||
);
|
||||
}
|
||||
if (this.selected.name && this.selected.name.length >100) {
|
||||
this.surveyErrorMessage = "Name must be less that 100 characters."
|
||||
if (this.selected.name && this.selected.name.length > 100) {
|
||||
this.surveyErrorMessage = "Name must be less that 100 characters.";
|
||||
this.surveyValidMessage = null;
|
||||
return;
|
||||
}
|
||||
if (this.selected.about_me && this.selected.about_me.length >500) {
|
||||
this.surveyErrorMessage = "About me must be less that 500 characters."
|
||||
this.surveyValidMessage = null
|
||||
if (this.selected.about_me && this.selected.about_me.length > 500) {
|
||||
this.surveyErrorMessage = "About me must be less that 500 characters.";
|
||||
this.surveyValidMessage = null;
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -118,34 +124,38 @@ export default {
|
|||
gender: this.selected.gender,
|
||||
age: this.selected.age,
|
||||
continent: this.selected.continent,
|
||||
country: countryIndex,
|
||||
about_me: this.selected.about_me
|
||||
});
|
||||
if (ok) {
|
||||
this.surveyValidMessage = "Saved!"
|
||||
} else {
|
||||
country: countryIndex,
|
||||
about_me: this.selected.about_me
|
||||
});
|
||||
if (ok) {
|
||||
this.surveyValidMessage = "Saved!";
|
||||
} else {
|
||||
this.surveyValidMessage = null;
|
||||
this.surveyErrorMessage = error.response.data.message
|
||||
}
|
||||
this.surveyErrorMessage = error.response.data.message;
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted(){
|
||||
const {ok, error, result} = await userService.getSurvey();
|
||||
async mounted() {
|
||||
const { ok, error, result } = await userService.getSurvey();
|
||||
if (ok) {
|
||||
this.selected.continent = result.data.result.continent
|
||||
this.selected.age = result.data.result.age
|
||||
this.selected.name = result.data.result.name
|
||||
this.selected.about_me = result.data.result.about_me
|
||||
this.selected.gender = result.data.result.gender
|
||||
//filter the country
|
||||
if(result.data.result.country) {
|
||||
setTimeout(() => {
|
||||
const continentCode = surveyItems.continents[this.selected.continent].code;
|
||||
const filter = surveyItems.countries.filter(e => e.code === continentCode);
|
||||
const countryName = surveyItems.countries[result.data.result.country].name;
|
||||
this.selected.country = filter.findIndex(e => e.name === countryName);
|
||||
}, 500);
|
||||
}
|
||||
this.selected.continent = result.data.result.continent;
|
||||
this.selected.age = result.data.result.age;
|
||||
this.selected.name = result.data.result.name;
|
||||
this.selected.about_me = result.data.result.about_me;
|
||||
this.selected.gender = result.data.result.gender;
|
||||
//filter the country
|
||||
if (result.data.result.country) {
|
||||
setTimeout(() => {
|
||||
const continentCode =
|
||||
surveyItems.continents[this.selected.continent].code;
|
||||
const filter = surveyItems.countries.filter(
|
||||
e => e.code === continentCode
|
||||
);
|
||||
const countryName =
|
||||
surveyItems.countries[result.data.result.country].name;
|
||||
this.selected.country = filter.findIndex(e => e.name === countryName);
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
this.previousLoaded = true;
|
||||
},
|
||||
|
|
@ -156,7 +166,7 @@ export default {
|
|||
selectedContinentIndex
|
||||
];
|
||||
const code = selectedContinent.code;
|
||||
|
||||
|
||||
return this.surveyItems.countries.filter(element => {
|
||||
return element.code == code || !element.code;
|
||||
});
|
||||
|
|
@ -178,7 +188,8 @@ export default {
|
|||
margin-top: 10px;
|
||||
user-select: none;
|
||||
}
|
||||
.survey, .survey-inner {
|
||||
.survey,
|
||||
.survey-inner {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
margin-top: 10px;
|
||||
|
|
@ -192,9 +203,9 @@ export default {
|
|||
color: red;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.survey-valid{
|
||||
.survey-valid {
|
||||
color: green;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.survey .button {
|
||||
color: white;
|
||||
|
|
@ -217,7 +228,7 @@ export default {
|
|||
background: rgba(61, 61, 61, 0.863);
|
||||
margin-top: 5px;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.survey-input:hover {
|
||||
background: rgba(73, 73, 73, 0.863);
|
||||
|
|
@ -229,10 +240,9 @@ export default {
|
|||
border: none;
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
|
|
@ -247,4 +257,4 @@ export default {
|
|||
margin-right: 10px;
|
||||
font-size: 30px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
@ -4,15 +4,16 @@
|
|||
<spinner v-if="!user"/>
|
||||
<div class="inner" v-else>
|
||||
<div class="top">
|
||||
<div class="profile-picture-outer">
|
||||
|
||||
<profile-picture
|
||||
class="avatar"
|
||||
size="90px"
|
||||
emoteSize="28px"
|
||||
animationPadding="5px"
|
||||
:admin="user.admin"
|
||||
:url="`${avatarDomain}${user.avatar}`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<div class="username">{{user.username}}</div>
|
||||
<div class="tag">@{{user.tag}}</div>
|
||||
|
|
@ -324,7 +325,7 @@ export default {
|
|||
.button.warn:hover {
|
||||
background: #ff0000ab;
|
||||
}
|
||||
.profile-picture-outer {
|
||||
.avatar{
|
||||
display: flex;
|
||||
z-index: 9999;
|
||||
margin: auto;
|
||||
|
|
|
|||
|
|
@ -53,15 +53,16 @@ export default {
|
|||
margin: 5px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.add-server{
|
||||
background: rgba(0, 255, 21, 0.277);
|
||||
}
|
||||
|
||||
|
||||
.server:hover {
|
||||
background: rgba(0, 0, 0, 0.288);
|
||||
}
|
||||
.add-server:hover{
|
||||
background: rgba(0, 255, 21, 0.377);
|
||||
.material-icons {
|
||||
transition: 0.3s;
|
||||
}
|
||||
.add-server:hover .material-icons{
|
||||
color: rgba(20, 255, 39, 0.726);
|
||||
}
|
||||
|
||||
.small-view {
|
||||
|
|
@ -89,7 +90,7 @@ export default {
|
|||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export default {
|
|||
methods: {
|
||||
|
||||
async openChat(event) {
|
||||
if (event.target.classList[0] === "profile-picture") return;
|
||||
if (event.target.closest(".profile-picture")) return;
|
||||
bus.$emit('closeLeftMenu');
|
||||
// dismiss notification if exists
|
||||
// TODO move this into openchat or something :/
|
||||
|
|
|
|||
|
|
@ -2,14 +2,7 @@
|
|||
<div class="profile-popout">
|
||||
<div class="triangle"></div>
|
||||
<div class="inner">
|
||||
<div class="outer-profile-picture" v-if="user">
|
||||
<profile-picture
|
||||
:url="avatarDomain + user.avatar"
|
||||
:admin="user.admin"
|
||||
size="40px"
|
||||
emoteSize="17px"
|
||||
/>
|
||||
</div>
|
||||
<profile-picture v-if="user" class="avatar" :url="avatarDomain + user.avatar" :admin="user.admin" size="40px" emoteSize="17px" />
|
||||
<div class="information">
|
||||
<div
|
||||
class="username"
|
||||
|
|
@ -76,8 +69,7 @@ export default {
|
|||
padding: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.outer-profile-picture {
|
||||
z-index: 999999;
|
||||
.avatar {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.information {
|
||||
|
|
@ -107,6 +99,7 @@ export default {
|
|||
transition: 0.3s;
|
||||
cursor: default;
|
||||
font-size: 27px;
|
||||
user-select: none;
|
||||
}
|
||||
.buttons .material-icons:hover {
|
||||
color: white;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import messageModule from './modules/messageModule';
|
|||
import notificationsModule from './modules/notificationsModule';
|
||||
import settingsModule from './modules/settingsModule';
|
||||
import uploadFilesModule from './modules/uploadFilesModule';
|
||||
import popoutsModule from './modules/popoutsModule';
|
||||
import popoutsModule from './modules/popoutsModule/popoutsModule.js';
|
||||
import emojiSuggestionModule from './modules/emojiSuggestionModule';
|
||||
import {
|
||||
router
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import axios from 'axios'
|
|||
import Vue from 'vue'
|
||||
import {
|
||||
bus
|
||||
} from '../../main'
|
||||
} from '@/main'
|
||||
import VueRouter from 'vue-router';
|
||||
import NotificationSounds from '@/utils/notificationSound';
|
||||
|
||||
|
|
@ -17,7 +17,6 @@ const state = {
|
|||
dragDropFileUploadDialog: false,
|
||||
settings: false,
|
||||
GDLinkMenu: false,
|
||||
emojiPanel: false,
|
||||
}
|
||||
|
||||
const getters = {
|
||||
|
|
@ -1,15 +1,15 @@
|
|||
export default {
|
||||
gender: [
|
||||
{ emoji: "👦🏻", name: "Male" },
|
||||
{ emoji: "👧🏼", name: "Female" },
|
||||
{ emoji: "😶", name: "Rather not say" }
|
||||
{ emoji: "👦🏻", name: "Male", code:"M" },
|
||||
{ emoji: "👧🏼", name: "Female", code:"F"},
|
||||
{ emoji: "😶", name: "Rather not say", code:"no"}
|
||||
],
|
||||
age: [
|
||||
{ emoji: "", name: "13 or under" },
|
||||
{ emoji: "", name: "14-16" },
|
||||
{ emoji: "", name: "17-19" },
|
||||
{ emoji: "", name: "20 or above" },
|
||||
{ emoji: "😶", name: "Rather not say" }
|
||||
{ emoji: "", name: "13 or under", code: "-13"},
|
||||
{ emoji: "", name: "14-16", code:"1416"},
|
||||
{ emoji: "", name: "17-19", code:"1719"},
|
||||
{ emoji: "", name: "20 or above", code:"20+" },
|
||||
{ emoji: "😶", name: "Rather not say", code: "no" }
|
||||
],
|
||||
continents: [
|
||||
{ name: "Europe", emoji: "🍃", code: "EU" },
|
||||
|
|
|
|||
|
|
@ -32,8 +32,8 @@
|
|||
<div class="panel-layout">
|
||||
<news v-if="currentTab == 0"/>
|
||||
<direct-message v-if="currentTab == 1"/>
|
||||
<servers v-if="currentTab == 2"/>
|
||||
<div class="coming-soon" v-if="currentTab > 2">
|
||||
<!-- <servers v-if="currentTab == 2"/> -->
|
||||
<div class="coming-soon" v-if="currentTab > 1">
|
||||
<div class="icon">
|
||||
<i class="material-icons">cached</i>
|
||||
</div>
|
||||
|
|
@ -115,6 +115,11 @@ export default {
|
|||
|
||||
|
||||
<style scoped>
|
||||
#app {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.coming-soon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -131,6 +136,7 @@ export default {
|
|||
}
|
||||
|
||||
.direct-message-tab {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -239,12 +245,10 @@ textarea {
|
|||
}
|
||||
.background-image {
|
||||
background: url(./../assets/background.jpg);
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
|
|
|
|||
|
|
@ -12,11 +12,9 @@
|
|||
<div class="link" @click="signupPage" v-if="!loggedIn">Sign up</div>
|
||||
<div class="link" @click="loginPage" v-if="!loggedIn">Login</div>
|
||||
<spinner class="spinner-profile" :size="50" v-if="loggedIn && !user" />
|
||||
<div class="outer-profile-picture" v-if="loggedIn && user">
|
||||
<profile-picture @click.native="showPopout = !showPopout" :hover='true' :url="avatarDomain + user.avatar" :admin="user.admin" size="40px" emoteSize="17px"/>
|
||||
</div>
|
||||
<profile-picture class="avatar" v-if="loggedIn && user" @click.native="showPopout = !showPopout" :hover='true' :url="avatarDomain + user.avatar" :admin="user.admin" size="40px" emoteSize="17px"/>
|
||||
<transition name="fall-down-fast">
|
||||
<Popout v-if="user && loggedIn && showPopout" @logout="logOut" :user="user"/>
|
||||
<Popout v-if="user && loggedIn && showPopout" @logout="logOut" :user="user" v-click-outside="closePopout"/>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -73,6 +71,10 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
closePopout(event) {
|
||||
if (!event.target.closest('.avatar'))
|
||||
this.showPopout = false;
|
||||
},
|
||||
logOut() {
|
||||
localStorage.removeItem("hauthid");
|
||||
this.loggedIn = null;
|
||||
|
|
@ -251,14 +253,11 @@ body {
|
|||
margin-left: 10px;
|
||||
color: white;
|
||||
}
|
||||
.outer-profile-picture{
|
||||
user-select: none;
|
||||
z-index: 9999999;
|
||||
}
|
||||
|
||||
|
||||
.background-image {
|
||||
position: fixed;
|
||||
z-index: -1;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -268,6 +267,9 @@ body {
|
|||
transition: 0.5s;
|
||||
}
|
||||
.content {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -290,17 +292,20 @@ body {
|
|||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.title {
|
||||
font-size: 25px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.button {
|
||||
padding: 15px;
|
||||
|
|
|
|||
|
|
@ -147,6 +147,11 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.fade-up-enter-active {
|
||||
|
|
@ -186,6 +191,7 @@ export default {
|
|||
flex-direction: column;
|
||||
transition: background 10s;
|
||||
color: white;
|
||||
height: 100%;
|
||||
}
|
||||
.app-content {
|
||||
display: flex;
|
||||
|
|
@ -197,13 +203,10 @@ export default {
|
|||
padding-bottom: 100px;
|
||||
}
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: background 10s;
|
||||
|
||||
}
|
||||
|
||||
.night-background {
|
||||
|
|
@ -229,6 +232,7 @@ export default {
|
|||
display: flex;
|
||||
height: 100%;
|
||||
margin: 10px;
|
||||
flex-shrink:0;
|
||||
}
|
||||
.box {
|
||||
width: 100%;
|
||||
|
|
@ -341,7 +345,7 @@ input {
|
|||
}
|
||||
|
||||
.register-button {
|
||||
background: #2ecc70ab;
|
||||
background: rgba(46, 204, 112, 0.67);
|
||||
box-shadow: 3px 3px #0f7e3d;
|
||||
}
|
||||
.register-button.button:hover {
|
||||
|
|
|
|||
|
|
@ -158,6 +158,11 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.fade-up-enter-active {
|
||||
|
|
@ -205,16 +210,13 @@ export default {
|
|||
width: 100%;
|
||||
overflow: auto;
|
||||
z-index: 9999;
|
||||
padding-bottom: 50px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: background 10s;
|
||||
|
||||
}
|
||||
|
||||
.night-background {
|
||||
|
|
@ -240,6 +242,7 @@ export default {
|
|||
display: flex;
|
||||
height: 100%;
|
||||
margin: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.box {
|
||||
width: 100%;
|
||||
|
|
@ -352,7 +355,7 @@ input {
|
|||
}
|
||||
|
||||
.register-button {
|
||||
background: #2ecc70ab;
|
||||
background: rgba(46, 204, 112, 0.67);
|
||||
box-shadow: 3px 3px #0f7e3d;
|
||||
}
|
||||
.register-button.button:hover {
|
||||
|
|
|
|||
Loading…
Reference in a new issue