mirror of
https://github.com/danbulant/Nertivia-Client
synced 2026-06-16 04:51:16 +00:00
added developer badge, added general tab.
This commit is contained in:
supertiger1234
parent
67e7fcc2ef
commit
2e1b75d654
8 changed files with 277 additions and 17 deletions
|
|
@ -27,6 +27,7 @@ export default {
|
|||
crown: require("twemoji/2/svg/1f451.svg"),
|
||||
flower: require("twemoji/2/svg/1f33a.svg"),
|
||||
heart: require("twemoji/2/svg/2764.svg"),
|
||||
developer: require("twemoji/2/svg/2728.svg"),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -46,6 +47,11 @@ export default {
|
|||
name: "supporter",
|
||||
emotePath: this.heart
|
||||
};
|
||||
if (this.$props.admin == 6)
|
||||
return {
|
||||
name: "developer",
|
||||
emotePath: this.developer
|
||||
};
|
||||
return ""
|
||||
},
|
||||
statusColor() {
|
||||
|
|
@ -126,6 +132,15 @@ export default {
|
|||
left: -3px;
|
||||
}
|
||||
|
||||
.developer {
|
||||
background: linear-gradient(30deg, #6853b9, rgba(254, 94, 189, .8));
|
||||
}
|
||||
.developer .emote {
|
||||
z-index: 999;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.emote {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
|
|
|
|||
|
|
@ -184,6 +184,10 @@ export default {
|
|||
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
}
|
||||
.presence-message {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<div class="drop-down">
|
||||
<div class="title">{{name}}</div>
|
||||
<div class="current-select-box" ref="dropDown" @click="dropped = !dropped"><div class="name">{{selectedItem ? selectedItem.name : items[0].name}}</div><div class="material-icons">expand_more</div></div>
|
||||
<div class="drop" v-if="dropped">
|
||||
<div v-for="(item, index) of items" :key="index" class="item" :class="{selected: selectedItem === item}" @click="itemClick(item)">{{item.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['items', 'name', 'selectedItem'],
|
||||
data() {
|
||||
return {
|
||||
dropped: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
itemClick(item) {
|
||||
this.$emit('change', item)
|
||||
},
|
||||
documentClick(e) {
|
||||
const target = e.target;
|
||||
const el = this.$refs.dropDown
|
||||
if (((el !== target) && !el.contains(target)) && this.dropped) {
|
||||
this.dropped = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
document.addEventListener('click', this.documentClick);
|
||||
},
|
||||
destroyed() {
|
||||
document.removeEventListener('click', this.documentClick);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.drop-down {
|
||||
background-color: rgb(44, 44, 44);
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.title {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.current-select-box {
|
||||
background: rgba(22, 22, 22, 0.411);
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.current-select-box:hover {
|
||||
background: rgba(22, 22, 22, 0.788);
|
||||
}
|
||||
.current-select-box div {
|
||||
align-self: center;
|
||||
}
|
||||
.current-select-box .name {
|
||||
margin: auto;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.drop {
|
||||
position: absolute;
|
||||
background: rgb(80, 80, 80);
|
||||
border-radius: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 11111;
|
||||
max-height: 100px;
|
||||
overflow: auto;
|
||||
padding: 2px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.item {
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
background: rgba(37, 37, 37, 0.322);
|
||||
}
|
||||
.item:hover {
|
||||
background: rgb(37, 37, 37);
|
||||
}
|
||||
.item.selected {
|
||||
background: rgb(41, 41, 41);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -1,10 +1,30 @@
|
|||
<template>
|
||||
<div class="content-inner">
|
||||
<div class="top">
|
||||
<div class="server-avatar"></div>
|
||||
<div class="server-name">{{server.name}}</div>
|
||||
<div class="content-inner">
|
||||
<div class="top">
|
||||
<!-- <div class="server-avatar"></div> -->
|
||||
<div class="input">
|
||||
<div class="input-title">Server Name</div>
|
||||
<input
|
||||
type="text"
|
||||
ref="name"
|
||||
placeholder="Channel Name"
|
||||
:default-value.prop="server.name"
|
||||
@input="inputEvent('name', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details">
|
||||
<div class="options">
|
||||
<drop-down
|
||||
:items="channels"
|
||||
:selected-item="defaultChannel"
|
||||
name="Default Channel"
|
||||
@change="changeEvent('default_channel_id', $event.channelID)"
|
||||
/>
|
||||
</div>
|
||||
<div class="button save-button" v-if="changed">Save Changes</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -12,34 +32,122 @@ import config from "@/config.js";
|
|||
import { bus } from "@/main";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import ServerService from "@/services/ServerService";
|
||||
import DropDown from "./DropDownMenu";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
components: {Spinner},
|
||||
components: { Spinner, DropDown },
|
||||
data() {
|
||||
return {
|
||||
changed: false,
|
||||
update: {}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
inputEvent(name, event) {
|
||||
this.$set(this.update, name, event.target.value);
|
||||
},
|
||||
changeEvent(name, value) {
|
||||
this.$set(this.update, name, value);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
update(test) {
|
||||
this.changed = true;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
server() {
|
||||
const serverID = this.$store.state.popoutsModule.serverSettings.serverID
|
||||
return this.$store.getters['servers/servers'][serverID]
|
||||
const serverID = this.$store.state.popoutsModule.serverSettings.serverID;
|
||||
return this.$store.getters["servers/servers"][serverID];
|
||||
},
|
||||
defaultChannel() {
|
||||
const channels = this.$store.getters.channels;
|
||||
if (this.update.default_channel_id) {
|
||||
return channels[this.update.default_channel_id];
|
||||
}
|
||||
return channels[this.server.default_channel_id];
|
||||
},
|
||||
channels() {
|
||||
const serverID = this.$store.state.popoutsModule.serverSettings.serverID;
|
||||
const channelsIds = this.$store.getters["servers/channelsIDs"][serverID];
|
||||
if (channelsIds) {
|
||||
let channels = [];
|
||||
for (let channelID of channelsIds) {
|
||||
channels.push(this.$store.getters.channels[channelID]);
|
||||
}
|
||||
return channels;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content-inner {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.server-avatar {
|
||||
background: grey;
|
||||
height: 90px;
|
||||
width: 90px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.top {
|
||||
margin: 10px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.options {
|
||||
width: 230px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-self: center;
|
||||
}
|
||||
.server-name {
|
||||
align-self: center;
|
||||
margin-left: 10px;
|
||||
|
||||
}
|
||||
.input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: rgb(44, 44, 44);
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
align-self: center;
|
||||
margin: 10px;
|
||||
}
|
||||
.input input {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.button {
|
||||
background: rgba(17, 148, 255, 0.692);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
align-self: center;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.button:hover {
|
||||
background: rgb(17, 148, 255);
|
||||
}
|
||||
.save-button {
|
||||
margin-top: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<input type="text" ref="name" placeholder="Channel Name" :default-value.prop="channels[selectedChannelIndex].name" @input="inputEvent('name', $event)">
|
||||
</div>
|
||||
<div class="button" v-if="update.name" @click="updateChannel">Save Changes</div>
|
||||
<div class="button warn delete-server" v-if="server.default_channel_id !== channels[selectedChannelIndex].channelID" @click="deleteChannel">{{deleteButtonConfirmed ? 'ARE YOU SURE?' : 'Delete Channel' }}</div>
|
||||
<div class="button warn delete-server" :class="{disabled: deleteClicked}" v-if="server.default_channel_id !== channels[selectedChannelIndex].channelID" @click="deleteChannel">{{deleteButtonConfirmed ? 'ARE YOU SURE?' : 'Delete Channel' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -27,6 +27,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
deleteButtonConfirmed: false,
|
||||
deleteClicked: false,
|
||||
selectedChannelIndex: 0,
|
||||
update: {
|
||||
name: null
|
||||
|
|
@ -47,11 +48,15 @@ export default {
|
|||
}
|
||||
},
|
||||
async deleteChannel() {
|
||||
if (this.deleteClicked) return;
|
||||
if (!this.deleteButtonConfirmed) {
|
||||
return this.deleteButtonConfirmed = true;
|
||||
}
|
||||
this.deleteClicked = true;
|
||||
const {ok, error, result} = await ServerService.deleteChannel(this.server.server_id, this.channels[this.selectedChannelIndex].channelID)
|
||||
console.log({ok, error, result})
|
||||
this.deleteButtonConfirmed = false;
|
||||
this.selectedChannelIndex = null;
|
||||
this.deleteClicked = false;
|
||||
},
|
||||
inputEvent(name, event) {
|
||||
this.update.name = event.target.value
|
||||
|
|
@ -109,10 +114,12 @@ export default {
|
|||
display: flex;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.channel .name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.channel div {
|
||||
align-self: center;
|
||||
|
|
@ -134,6 +141,7 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.button {
|
||||
background: rgba(17, 148, 255, 0.692);
|
||||
|
|
@ -154,6 +162,13 @@ export default {
|
|||
.button.warn:hover {
|
||||
background: rgb(255, 17, 17);
|
||||
}
|
||||
.button.disabled {
|
||||
background: grey;
|
||||
}
|
||||
.button.disabled:hover {
|
||||
background: grey;
|
||||
}
|
||||
|
||||
.delete-server{
|
||||
margin: auto;
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
</div>
|
||||
<div class="content">
|
||||
<div class="header" :class="{critical: tabs[index].critical}"><div class="material-icons">{{tabs[index].icon}}</div><div>{{tabs[index].title}}</div></div>
|
||||
<!-- <general v-if="index === 0"/> -->
|
||||
<manage-channels v-if="index === 0"/>
|
||||
<delete-server v-if="index === 1"/>
|
||||
<general v-if="index === 0"/>
|
||||
<manage-channels v-if="index === 1"/>
|
||||
<delete-server v-if="index === 2"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -32,7 +32,7 @@ export default {
|
|||
return {
|
||||
index: 0,
|
||||
tabs: [
|
||||
// {title: "General", icon: "info"},
|
||||
{title: "General", icon: "info"},
|
||||
{title: "Manage Channels", icon: "storage"},
|
||||
// {title: "Manage Invites", icon: "local_post_office"},
|
||||
{title: "Delete Server", icon: "warning", critical: true},
|
||||
|
|
@ -92,6 +92,8 @@ export default {
|
|||
flex-direction: column;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(26, 26, 26, 0.897);
|
||||
height: 100%;
|
||||
width: 180px;
|
||||
|
|
@ -106,6 +108,7 @@ export default {
|
|||
user-select: none;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tab .material-icons {
|
||||
margin-right: 3px;
|
||||
|
|
@ -135,4 +138,19 @@ export default {
|
|||
align-self: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 614px) {
|
||||
.inner {
|
||||
flex-direction: column;
|
||||
}
|
||||
.tabs {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
flex-direction: row;
|
||||
overflow: auto;
|
||||
}
|
||||
.tabs::-webkit-scrollbar {
|
||||
height: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ export default {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
z-index: 99999999;
|
||||
display: flex;
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -194,7 +194,6 @@ export default {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.notifyAnimation{
|
||||
animation: notifyAnime;
|
||||
animation-duration: 1s;
|
||||
|
|
@ -266,6 +265,9 @@ export default {
|
|||
.tabs::-webkit-scrollbar {
|
||||
height: 5px;
|
||||
}
|
||||
.tabs {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex-shrink: 0;
|
||||
|
|
@ -326,6 +328,7 @@ export default {
|
|||
|
||||
|
||||
<style>
|
||||
|
||||
textarea {
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue