diff --git a/package-lock.json b/package-lock.json index c4955bc..07b156d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7825,6 +7825,11 @@ "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", "dev": true }, + "particles.js": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/particles.js/-/particles.js-2.0.0.tgz", + "integrity": "sha1-IThsQyjWx/lngKIB6W7t/AnHNvY=" + }, "pascalcase": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz", @@ -10949,6 +10954,11 @@ "resolved": "https://registry.npmjs.org/vue-script2/-/vue-script2-2.0.3.tgz", "integrity": "sha512-sGsFbqCIZDbPq140X1p8T6Y72MoCtkFpQ7CfhknZLqDZxMGWavFqIY/5YsnhqxxatWnYy0us/IoHSDr5l2JZzQ==" }, + "vue-smooth-reflow": { + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/vue-smooth-reflow/-/vue-smooth-reflow-0.1.12.tgz", + "integrity": "sha512-cic+dmqsBzu/lRMXf/mhUPMM0g0vancJGUyNMMGHjis0ilSFd1RjIrZYcU5B7ef+n5oshH33/zbMA8OYyRTu7Q==" + }, "vue-socket.io": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/vue-socket.io/-/vue-socket.io-3.0.4.tgz", diff --git a/package.json b/package.json index 38f794e..bfd626a 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "futoji": "^0.5.0", "jquery": "^3.4.0", "match-sorter": "^2.3.0", + "particles.js": "^2.0.0", "socket.io": "^2.2.0", "socket.io-client": "^2.2.0", "twemoji": "^11.3.0", @@ -22,6 +23,7 @@ "vue-mq": "^1.0.1", "vue-recaptcha": "^1.1.1", "vue-router": "^3.0.2", + "vue-smooth-reflow": "^0.1.12", "vue-socket.io": "^3.0.4", "vue-socket.io-extended": "^3.2.0", "vue-twitter": "^0.1.0", diff --git a/public/index.html b/public/index.html index 6f4be28..95e8eb8 100644 --- a/public/index.html +++ b/public/index.html @@ -43,8 +43,8 @@ - - diff --git a/src/Main.vue b/src/Main.vue index 20649be..1470236 100644 --- a/src/Main.vue +++ b/src/Main.vue @@ -3,3 +3,47 @@ + + diff --git a/src/assets/graphics/HomeGraphics2.png b/src/assets/graphics/HomeGraphics2.png new file mode 100644 index 0000000..2f4a027 Binary files /dev/null and b/src/assets/graphics/HomeGraphics2.png differ diff --git a/src/components/HeaderLoginTemplate.vue b/src/components/HeaderLoginTemplate.vue new file mode 100644 index 0000000..2c5fe71 --- /dev/null +++ b/src/components/HeaderLoginTemplate.vue @@ -0,0 +1,122 @@ + + + + + + diff --git a/src/components/ParticlesJS.vue b/src/components/ParticlesJS.vue new file mode 100644 index 0000000..f1c1121 --- /dev/null +++ b/src/components/ParticlesJS.vue @@ -0,0 +1,136 @@ + + + + + diff --git a/src/components/Recaptcha.vue b/src/components/Recaptcha.vue index 97df291..45323ac 100644 --- a/src/components/Recaptcha.vue +++ b/src/components/Recaptcha.vue @@ -13,6 +13,17 @@ export default { } }, + beforeMount(){ + const existing = document.getElementById('reCaptchaScript'); + if (existing) + existing.remove(); + + const $script = document.createElement('script') + $script.async = true + $script.id = "reCaptchaScript" + $script.src = 'https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit' + document.head.appendChild($script) + }, methods: { submit(response) { this.$emit('verify', response) diff --git a/src/components/Spinner.vue b/src/components/Spinner.vue index bb6c9ad..c0ed0e3 100644 --- a/src/components/Spinner.vue +++ b/src/components/Spinner.vue @@ -1,15 +1,18 @@ @@ -19,8 +22,6 @@ export default { margin: auto; } .loading-animation{ - height: 100px; - width: 100px; background-size: 100%; background-image: url(../assets/spinner.svg); display: table; diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue index f13cdf5..d76138d 100644 --- a/src/components/app/MessagePanel.vue +++ b/src/components/app/MessagePanel.vue @@ -525,8 +525,8 @@ export default { } .heading { - border-bottom: solid 2px white; - margin: 5px; + padding: 5px; + background: rgba(0, 0, 0, 0.185); margin-bottom: 0; height: 40px; padding-bottom: 2spx; diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue index ee20953..18ae4b5 100644 --- a/src/components/app/MessageTemplate.vue +++ b/src/components/app/MessageTemplate.vue @@ -278,6 +278,7 @@ export default { } .username:hover{ color: rgb(199, 199, 199); + text-decoration: underline; } .date { color: rgb(161, 161, 161); diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue index 96cc7fc..7d92700 100644 --- a/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue +++ b/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue @@ -24,8 +24,6 @@ import config from "@/config.js"; import MessageTemplate from '@/components/app/MessageTemplate.vue'; import SettingsService from '@/services/settingsService.js'; -import { mapState } from "vuex"; - export default { components: { MessageTemplate @@ -47,7 +45,9 @@ export default { } }, computed: { - ...mapState('settingsModule', ['apperance']), + apperance() { + return this.$store.getters['settingsModule/settings'].apperance; + }, user() { return this.$store.getters.user } diff --git a/src/components/app/ServerList.vue b/src/components/app/ServerList.vue index 8dfeff8..35e6219 100644 --- a/src/components/app/ServerList.vue +++ b/src/components/app/ServerList.vue @@ -1,34 +1,78 @@ diff --git a/src/components/app/ServerTemplate/ChannelTemplate.vue b/src/components/app/ServerTemplate/ChannelTemplate.vue new file mode 100644 index 0000000..d144ffa --- /dev/null +++ b/src/components/app/ServerTemplate/ChannelTemplate.vue @@ -0,0 +1,35 @@ + + + + + + diff --git a/src/components/app/ServerTemplate/ServerTemplate.vue b/src/components/app/ServerTemplate/ServerTemplate.vue new file mode 100644 index 0000000..423bc55 --- /dev/null +++ b/src/components/app/ServerTemplate/ServerTemplate.vue @@ -0,0 +1,99 @@ + + + + + diff --git a/src/components/app/Tabs/DirectMessage.vue b/src/components/app/Tabs/DirectMessage.vue index 25d5e31..fb3d562 100644 --- a/src/components/app/Tabs/DirectMessage.vue +++ b/src/components/app/Tabs/DirectMessage.vue @@ -58,8 +58,6 @@ export default { @media (max-width: 600px) { .left-panel { position: absolute; - top: 47px; - height: calc(100% - 47px); background-color: rgba(39, 39, 39, 0.97); } } diff --git a/src/components/app/Tabs/Servers.vue b/src/components/app/Tabs/Servers.vue index b06f89e..1be0bb1 100644 --- a/src/components/app/Tabs/Servers.vue +++ b/src/components/app/Tabs/Servers.vue @@ -58,8 +58,6 @@ export default { @media (max-width: 600px) { .left-panel { position: absolute; - top: 47px; - height: calc(100% - 47px); background-color: rgba(39, 39, 39, 0.97); } } diff --git a/src/components/homePage/LoggedIn.vue b/src/components/homePage/LoggedIn.vue deleted file mode 100644 index 66c15b5..0000000 --- a/src/components/homePage/LoggedIn.vue +++ /dev/null @@ -1,130 +0,0 @@ - - - - - - diff --git a/src/components/homePage/LoginPanel.vue b/src/components/homePage/LoginPanel.vue deleted file mode 100644 index 733e1e1..0000000 --- a/src/components/homePage/LoginPanel.vue +++ /dev/null @@ -1,103 +0,0 @@ - - - - - diff --git a/src/components/homePage/Popout.vue b/src/components/homePage/Popout.vue new file mode 100644 index 0000000..9b9e7d6 --- /dev/null +++ b/src/components/homePage/Popout.vue @@ -0,0 +1,131 @@ + + + + + diff --git a/src/components/homePage/RegisterPanel.vue b/src/components/homePage/RegisterPanel.vue deleted file mode 100644 index 8853f3a..0000000 --- a/src/components/homePage/RegisterPanel.vue +++ /dev/null @@ -1,120 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/homePage/RightPanel.vue b/src/components/homePage/RightPanel.vue deleted file mode 100644 index 5dfbd12..0000000 --- a/src/components/homePage/RightPanel.vue +++ /dev/null @@ -1,184 +0,0 @@ - - - - - - diff --git a/src/router.js b/src/router.js index e1ca1a2..95b1231 100644 --- a/src/router.js +++ b/src/router.js @@ -1,58 +1,88 @@ -import Vue from 'vue' -import VueRouter from 'vue-router' -Vue.use(VueRouter) -import {store} from './store/index'; -import VueSocketio from 'vue-socket.io-extended'; -import io from 'socket.io-client'; -import config from './config' -import VueMq from 'vue-mq' +import Vue from "vue"; +import VueRouter from "vue-router"; +Vue.use(VueRouter); +import { store } from "./store/index"; +import VueSocketio from "vue-socket.io-extended"; +import io from "socket.io-client"; +import config from "./config"; +import VueMq from "vue-mq"; -import MainApp from '../src/views/App.vue' -import HomePage from '../src/views/HomePage.vue' -import GDriveCallback from '../src/views/GDriveCallback.vue'; +// import MainApp from '../src/views/App.vue' +//import HomePage from '../src/views/HomePage.vue' +//import GDriveCallback from '../src/views/GDriveCallback.vue'; +//import LoginPage from '../src/views/LoginPage.vue'; +//import RegisterPage from '../src/views/RegisterPage.vue'; -// const MainApp = () => import('../src/views/App.vue'); -// const HomePage = () => import('../src/views/HomePage.vue'); -// const GDriveCallback = () => import( '../src/views/GDriveCallback.vue'); +const MainApp = () => import(/* webpackChunkName: "MainApp" */ "../src/views/App.vue"); +const HomePage = () => import(/* webpackChunkName: "HomePage" */ "../src/views/HomePage.vue"); +const GDriveCallback = () => import(/* webpackChunkName: "GDriveCallback" */ "../src/views/GDriveCallback.vue"); +const LoginPage = () => import(/* webpackChunkName: "LoginPage" */ "../src/views/LoginPage.vue"); +const RegisterPage = () => import(/* webpackChunkName: "RegisterPage" */ "../src/views/RegisterPage.vue"); export const router = new VueRouter({ - mode: 'history', + mode: "history", routes: [ { - path: '/', - name: 'HomePage', + path: "/", + name: "HomePage", component: HomePage }, { - path: '/app', - name: 'app', - component: MainApp, - beforeEnter (to, from, next) { - if (!localStorage.getItem('hauthid')){ - return router.push({ path: '/' }) + path: "/login", + name: "Login", + component: LoginPage, + beforeEnter(to, from, next) { + if (localStorage.getItem("hauthid")) { + return router.push({ path: "/app" }); } - Vue.use(VueSocketio, io(config.socketIP, { - transportOptions: { - polling: { - extraHeaders: { - authorization: localStorage.getItem('hauthid') - } - } - } - }), {store}); - Vue.use(VueMq, { - breakpoints: { - mobile: 600, - desktop: Infinity, - } - }) - next() + next(); } }, { - path: '/GDrive_callback', - name: 'GDrive callback', - component: GDriveCallback + path: "/register", + name: "Register", + component: RegisterPage, + beforeEnter(to, from, next) { + if (localStorage.getItem("hauthid")) { + return router.push({ path: "/app" }); + } + next(); + } }, + { + path: "/app", + name: "app", + component: MainApp, + beforeEnter(to, from, next) { + if (!localStorage.getItem("hauthid")) { + return router.push({ path: "/login" }); + } + Vue.use( + VueSocketio, + io(config.socketIP, { + transportOptions: { + polling: { + extraHeaders: { + authorization: localStorage.getItem("hauthid") + } + } + } + }), + { store } + ); + Vue.use(VueMq, { + breakpoints: { + mobile: 600, + desktop: Infinity + } + }); + next(); + } + }, + { + path: "/GDrive_callback", + name: "GDrive callback", + component: GDriveCallback + } ] -}) \ No newline at end of file +}); diff --git a/src/store/modules/settingsModule.js b/src/store/modules/settingsModule.js index f164752..fa66610 100644 --- a/src/store/modules/settingsModule.js +++ b/src/store/modules/settingsModule.js @@ -78,9 +78,7 @@ const actions = { const mutations = { setApperance(state, data) { - const apperance = state.apperance || {}; - apperance[Object.keys(data)[0]] = data[Object.keys(data)[0]] - state['apperance'] = apperance + Vue.set(state.apperance, Object.keys(data)[0], data[Object.keys(data)[0]]) }, setSettings(state, settings) { Vue.set(state, Object.assign(state, settings)) diff --git a/src/utils/changelog.js b/src/utils/changelog.js index 9fb6de8..0a0962e 100644 --- a/src/utils/changelog.js +++ b/src/utils/changelog.js @@ -1,14 +1,33 @@ -const config = [ - { - version: 2, + + const prototype = { + version: 3, title: "Make your own servers!", shortTitle: "Servers", date: "24/04/2019", headColor: "rgba(155, 244, 66, 0.77)", new: [ "", + "", ], next: [""] + } + +const config = [ + { + version: 3, + title: "Page Re-designs", + shortTitle: "Page Re-designs", + date: "28/04/2019", + headColor: "rgba(155, 244, 66, 0.77)", + new: [ + "Home page has been re-designed and has some cool animations.", + "New login and register pages.", + "Padding and margin adjusted and small design changes throughout the app." + ], + fix: [ + 'Fixed bugs with appearance settings not correctly working.' + ], + next: ["Servers (If nothing else distracts me -_-)"] }, { version: 1.5, diff --git a/src/views/App.vue b/src/views/App.vue index 627b2a4..1249ab8 100644 --- a/src/views/App.vue +++ b/src/views/App.vue @@ -57,7 +57,7 @@ import Spinner from "./../components/Spinner.vue"; const ElectronFrameButtons = () => import("./../components/ElectronJS/FrameButtons.vue"); -const News = () => import("./../components/app/Tabs/News.vue"); +const News = () => import(/* webpackChunkName: "News" */"./../components/app/Tabs/News.vue"); //const DirectMessage = () => import('./../components/app/Tabs/DirectMessage.vue'); const DirectMessage = () => ({ component: import("./../components/app/Tabs/DirectMessage.vue"), @@ -154,7 +154,7 @@ export default { overflow-y: hidden; overflow-x: auto; height: 35px; - max-width: 473px; + max-width: 479px; flex-basis: auto; /* default value */ flex-grow: 1; -webkit-app-region: no-drag; @@ -168,7 +168,7 @@ export default { flex-shrink: 0; margin: auto; margin-right: 1px; - margin-left: 1px; + margin-left: 3px; margin-bottom: 0; background: rgba(0, 0, 0, 0.63); color: white; @@ -227,23 +227,7 @@ export default { - - diff --git a/src/views/HomePage - Legacy.vue b/src/views/HomePage - Legacy.vue new file mode 100644 index 0000000..a92eaac --- /dev/null +++ b/src/views/HomePage - Legacy.vue @@ -0,0 +1,477 @@ + + + + + + + + + + + + diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue index 1b3bece..f069125 100644 --- a/src/views/HomePage.vue +++ b/src/views/HomePage.vue @@ -1,457 +1,409 @@ - - diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue new file mode 100644 index 0000000..19c884a --- /dev/null +++ b/src/views/LoginPage.vue @@ -0,0 +1,372 @@ + + + + + + diff --git a/src/views/RegisterPage.vue b/src/views/RegisterPage.vue new file mode 100644 index 0000000..3f3dfd5 --- /dev/null +++ b/src/views/RegisterPage.vue @@ -0,0 +1,383 @@ + + + + + +