From 0889a08ee1c7d93b8136d01f5d398f0b9b1a93d8 Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn123@googlemail.com>
Date: Fri, 23 Aug 2019 19:47:36 +0100
Subject: [PATCH] creating explore main page.

---
 .../ServerSettingsPanels/ServerSettings.vue   |  10 +-
 .../ServerSettingsPanels/ServerVisibility.vue |  93 ++++++
 src/components/app/Tabs/Explore.vue           | 160 ++++++++++
 .../app/Tabs/Explore/searchHeader.vue         |  39 +++
 src/components/app/Tabs/Explore/servers.vue   | 280 ++++++++++++++++++
 5 files changed, 578 insertions(+), 4 deletions(-)
 create mode 100644 src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue
 create mode 100644 src/components/app/Tabs/Explore.vue
 create mode 100644 src/components/app/Tabs/Explore/searchHeader.vue
 create mode 100644 src/components/app/Tabs/Explore/servers.vue

diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
index 1bae4c4..861f0fb 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
@@ -8,7 +8,8 @@
         <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 === 1"/>
-        <delete-server v-if="index === 2"/>
+        <server-visibility v-if="index === 2"/>
+        <delete-server v-if="index === 3"/>
       </div>
     </div>
   </div>
@@ -24,9 +25,9 @@ import { mapState } from "vuex";
 import General from './General.vue'
 import DeleteServer from './DeleteServer.vue'
 import ManageChannels from './ManageChannels.vue'
-
+import ServerVisibility from './ServerVisibility.vue'
 export default {
-  components: { General, DeleteServer, ManageChannels},
+  components: { General, DeleteServer, ManageChannels, ServerVisibility},
   data() {
     return {
       index: 0,
@@ -34,6 +35,7 @@ export default {
          {title: "General", icon: "info"},
         {title: "Manage Channels", icon: "storage"},
         // {title: "Manage Invites", icon: "local_post_office"},
+        {title: "Server Visibility", icon: "visibility"},
         {title: "Delete Server", icon: "warning", critical: true},
       ]
     }
@@ -104,7 +106,7 @@ export default {
   margin: 5px;
   padding: 5px;
   transition: 0.2s;
-  cursor: default;
+  cursor: pointer;
   user-select: none;
   display: flex;
   align-content: center;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue
new file mode 100644
index 0000000..7e08c7c
--- /dev/null
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue
@@ -0,0 +1,93 @@
+<template>
+    <div class="content-inner" v-if="server">
+      <div class="details">Making your server visibility public means that your server will be shown publicly in the Nertivia's "Explore" tab.</div>
+      <div class="content">
+        <div class="toggle">
+          <div class="title">Server Visibility</div>
+          <div class="item" @click="privateServer = false"><div class="box" :class="{selected: !privateServer}"></div> Public</div>
+          <div class="item" @click="privateServer = true"><div class="box" :class="{selected: privateServer}"></div> Private</div>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+import config from "@/config.js";
+import { bus } from "@/main";
+
+
+export default {
+  components: {},
+  data() {
+    return {
+      privateServer: true
+    }
+  },
+  methods: {
+
+  },
+  computed: {
+    server() {
+      const serverID = this.$store.state.popoutsModule.serverSettings.serverID
+      return this.$store.getters['servers/servers'][serverID]
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+.content-inner {
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+}
+
+.details {
+  margin: 10px;
+  opacity: 0.9;
+}
+
+.content {
+  display: flex;
+}
+
+.toggle {
+  background: rgb(46, 46, 46);
+  border-radius: 5px;
+  padding: 5px;
+  margin-left: 10px;
+  display: flex;
+  flex-direction: column;
+  .item {
+    display: flex;
+    margin: 3px;
+    cursor: pointer;
+    .box {
+      width: 20px;
+      height: 20px;
+      border-radius: 5px;
+      background: rgb(95, 95, 95);
+      margin-right: 5px;
+      &.selected {
+        background: rgb(34, 156, 255);
+      }
+    }
+  }
+}
+
+
+.button {
+  padding: 10px;
+  background: rgba(255, 0, 0, 0.719);
+  margin: auto;
+  border-radius: 10px;
+  transition: 0.3s;
+  user-select: none;
+}
+.button:hover {
+  background: rgb(255, 0, 0);
+}
+</style>
+
+
diff --git a/src/components/app/Tabs/Explore.vue b/src/components/app/Tabs/Explore.vue
new file mode 100644
index 0000000..1b691f0
--- /dev/null
+++ b/src/components/app/Tabs/Explore.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="explore-tab">
+    <div class="left-panel">
+      <div class="header">
+        <div class="icon">
+          <i class="material-icons">explore</i>
+        </div>
+        <div class="details">
+          <div class="title">Explore</div>
+          <div class="description">Find new servers, Emojis and more!</div>
+        </div>
+      </div>
+      <div class="items">
+        <div
+          class="item"
+          v-for="(tab, index) in tabs"
+          :key="index"
+          :class="{selected: selectedTab === index}"
+          @click="selectedTab = index"
+        >
+          <i class="material-icons">{{tab.icon}}</i>
+          {{tab.name}}
+        </div>
+      </div>
+    </div>
+    <div class="right-panel">
+      <div class="header"> <i class="material-icons">{{tabs[selectedTab].icon}}</i>{{tabs[selectedTab].name}}</div>
+      <div class="coming-soon" v-if="selectedTab > 0">
+        <div class="icon">
+          <i class="material-icons">explore</i>
+        </div>
+        <div class="text">Coming soon!</div>
+      </div>
+      <component :is="tabs[selectedTab].component" /> 
+    </div>
+  </div>
+</template>
+
+<script>
+import { bus } from "@/main";
+import Servers from './Explore/servers'
+export default {
+  components: { Servers },
+  data() {
+    return {
+      selectedTab: 0,
+      tabs: [
+        // {icon: "home", name: "home", component: ""},
+        { icon: "rss_feed", name: "Servers", component: "servers" },
+        { icon: "face", name: "Emojis", component: "" },
+        { icon: "brush", name: "Themes", component: "" },
+        { icon: "message", name: "Message Styles", component: "" }
+      ]
+    };
+  },
+  mounted() {},
+  methods: {},
+  computed: {}
+};
+</script>
+
+
+<style lang="scss" scoped>
+.explore-tab {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.459);
+  color: white;
+}
+.left-panel {
+  display: flex;
+  flex-direction: column;
+  background: rgba(0, 0, 0, 0.274);
+  width: 300px;
+  flex-shrink: 0;
+  .items {
+    user-select: none;
+    .item {
+      .material-icons {
+        margin-right: 5px;
+      }
+      display: flex;
+      align-content: center;
+      align-items: center;
+      background: rgba(0, 0, 0, 0.199);
+      margin: 5px;
+      padding: 10px;
+      border-radius: 5px;
+      cursor: pointer;
+      transition: 0.3s;
+      &:hover {
+        background: rgba(0, 0, 0, 0.452);
+      }
+      &.selected {
+        background: rgba(0, 0, 0, 0.452);
+      }
+    }
+  }
+  .header {
+    display: flex;
+    height: 100px;
+    background: rgba(0, 0, 0, 0.226);
+    user-select: none;
+    .icon {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      align-content: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: 100px;
+      .material-icons {
+        font-size: 70px;
+      }
+    }
+    .details {
+      align-self: center;
+      .title {
+        font-size: 20px;
+        margin-bottom: 5px;
+      }
+      .description {
+        opacity: 0.7;
+        font-size: 14px;
+      }
+    }
+  }
+}
+.coming-soon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.39);
+  color: white;
+  .material-icons {
+    font-size: 100px;
+  }
+}
+
+.right-panel {
+  .header {
+    background: rgba(0, 0, 0, 0.448);
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    .material-icons {margin-right: 5px;}
+    user-select: none;
+    cursor: default;
+  }
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/app/Tabs/Explore/searchHeader.vue b/src/components/app/Tabs/Explore/searchHeader.vue
new file mode 100644
index 0000000..099ba35
--- /dev/null
+++ b/src/components/app/Tabs/Explore/searchHeader.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="search-header">
+    <div class="search-area">
+      <input type="text" :placeholder="`Search for ${name}`">
+    </div>
+    <div class="filter-area"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: [
+    'name'
+  ]
+}
+</script>
+
+<style lang="scss" scoped>
+.search-header {
+  display: flex;
+  background: rgba(0, 0, 0, 0.231);
+  width: 100%;
+  height: 70px;
+  flex-shrink: 0;
+}
+.search-area {
+  height: 100%;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-content: center;
+  flex-direction: column;
+  justify-content: center;
+}
+input {
+  border-radius: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/app/Tabs/Explore/servers.vue b/src/components/app/Tabs/Explore/servers.vue
new file mode 100644
index 0000000..6214512
--- /dev/null
+++ b/src/components/app/Tabs/Explore/servers.vue
@@ -0,0 +1,280 @@
+<template>
+  <div class="servers-tab">
+    <search-header name="servers" />
+    <div class="items-main-container">
+      <div class="items-container">
+        <div class="items">
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+          <div class="item">
+            <div class="top">
+              <div class="avatar"></div>
+              <div class="name">Nertivia</div>
+            </div>
+            <div class="bottom">
+              <div class="description">Nertivia is a cool server.</div>
+              <div class="button">Join</div>
+            </div>
+          </div>
+    
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import searchHeader from "./searchHeader";
+
+export default {
+  components: { searchHeader }
+};
+</script>
+
+<style lang="scss" scoped>
+.servers-tab {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+.items-main-container {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+
+}
+.items-container {
+  display: block;
+  align-content: center;
+  align-items: center;
+  max-width: 1066px;
+  margin: auto;
+  width: 100%;
+  .items {
+    margin-top: 40px;
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, 250px);
+    grid-auto-rows: min-content;
+    align-items: stretch;
+    justify-content: space-evenly;
+    user-select: none;
+
+    .item {
+      width: 250px;
+      height: 270px;
+      background: rgba(0, 0, 0, 0.479);
+      opacity: 0.9;
+      margin: 5px;
+      flex-shrink: 0;
+      border-radius: 10px;
+      transition: 0.3s;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      &:hover {
+        opacity: 1;
+      }
+      .top {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 140px;
+        justify-content: center;
+        align-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        .avatar {
+          background: rgb(26, 133, 255);
+          height: 80px;
+          width: 80px;
+          border-radius: 50%;
+          margin-bottom: 10px;
+        }
+        .name {
+          font-size: 23px;
+        }
+      }
+      .bottom {
+        display: flex;
+        flex-direction: column;
+        background: rgba(0, 0, 0, 0.194);
+        flex: 1;
+        .description {
+          margin: 20px;
+          margin-top: 20px;
+          margin-bottom: 10px;
+          height: 100%;
+          opacity: 0.9;
+        }
+        .button {
+          background: rgba(40, 140, 255, 0.8);
+          border-radius: 5px;
+          align-self: flex-end;
+          flex-shrink: 0;
+          margin-bottom: 10px;
+          margin-right: 10px;
+          padding: 7px;
+          transition: 0.3s;
+          cursor: pointer;
+          &:hover {
+            background: rgb(40, 140, 255);
+          }
+        }
+      }
+    }
+
+  }
+}
+</style>
\ No newline at end of file