fixed some problems with frame buttons.

This commit is contained in:
supertiger1234 2019-08-11 21:21:10 +01:00
parent 48f3f80a6e
commit 2f54b04afb
7 changed files with 60 additions and 25 deletions

View file

@ -4,6 +4,9 @@
</div> </div>
</template> </template>
<style> <style>
html { html {

View file

@ -1,19 +1,19 @@
<template> <template>
<div class="frame-buttons"> <div class="frame-buttons">
<div <div
class="minimize" class="button minimize"
@click="minimizeWindow()" @click="minimizeWindow()"
> >
<i class="material-icons">minimize</i> <i class="material-icons">minimize</i>
</div> </div>
<div <div
class="res-max" class="button res-max"
@click="maximizeWindow()" @click="maximizeWindow()"
> >
<i class="material-icons">check_box_outline_blank</i> <i class="material-icons">check_box_outline_blank</i>
</div> </div>
<div <div
class="close" class="button close"
@click="closeWindow()" @click="closeWindow()"
> >
<i class="material-icons">close</i> <i class="material-icons">close</i>
@ -48,9 +48,19 @@ export default {
<style scoped> <style scoped>
.frame-buttons { .frame-buttons {
display: flex; display: flex;
align-items: center;
-webkit-app-region: drag;
user-select: none; user-select: none;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 9999999999999999;
height: 30px;
-webkit-app-region: drag;
justify-content: flex-end;
}
.button {
-webkit-app-region: no-drag;
} }
.frame-buttons div { .frame-buttons div {
display: flex; display: flex;

View file

@ -46,6 +46,7 @@ export default {
}, },
data() { data() {
return { return {
isElectron: window && window.process && window.process.type,
currentTab: 0, currentTab: 0,
tabs: [ tabs: [
{ {
@ -78,7 +79,7 @@ export default {
methods: { methods: {
logout() { logout() {
this.$store.dispatch("logout"); this.$store.dispatch("logout");
window.location.href = "/"; this.isElectron ? window.location.href = '/login' : window.location.href = "/";
}, },
close() { close() {
this.$store.dispatch("setPopoutVisibility", { this.$store.dispatch("setPopoutVisibility", {

View file

@ -14,6 +14,18 @@
const config = [ const config = [
{
version: 6.0,
title: "Desktop app!",
shortTitle: "",
date: "11/08/2019",
headColor: "rgba(255, 80, 17, 0.77)",
new: [
"Desktop app is available to download!"
],
msg: 'Download: https://github.com/supertiger1234/nertivia-desktop-app/releases'
},
{ {
version: 5.9, version: 5.9,
title: "More Bug fixes!", title: "More Bug fixes!",

View file

@ -30,8 +30,10 @@
Ad Ad
</div> --> </div> -->
</div> </div>
<div class="drag-area" v-if="isElectron"></div> <div class="window-buttons" v-if="isElectron">
<electron-frame-buttons v-if="isElectron"/> <electron-frame-buttons />
</div>
</div> </div>
<div class="panel-layout"> <div class="panel-layout">
<news v-if="currentTab == 0"/> <news v-if="currentTab == 0"/>
@ -60,11 +62,9 @@ import Spinner from "./../components/Spinner.vue";
const ElectronFrameButtons = () => const ElectronFrameButtons = () =>
import("./../components/ElectronJS/FrameButtons.vue"); import("@/components/ElectronJS/FrameButtons.vue");
const News = () => const News = () =>
import(/* webpackChunkName: "News" */ "./../components/app/Tabs/News.vue"); import(/* webpackChunkName: "News" */ "./../components/app/Tabs/News.vue");
//const DirectMessage = () => import('./../components/app/Tabs/DirectMessage.vue');
const DirectMessage = () => ({ const DirectMessage = () => ({
component: import("./../components/app/Tabs/DirectMessage.vue"), component: import("./../components/app/Tabs/DirectMessage.vue"),
loading: Spinner, loading: Spinner,
@ -79,12 +79,13 @@ const Servers = () => ({
export default { export default {
name: "app", name: "app",
components: { components: {
ElectronFrameButtons,
DirectMessage, DirectMessage,
Servers, Servers,
ConnectingScreen, ConnectingScreen,
Popouts, Popouts,
News News,
ElectronFrameButtons
}, },
data() { data() {
return { return {
@ -267,21 +268,19 @@ export default {
flex-shrink: 0; flex-shrink: 0;
} }
.drag-area { .window-buttons {
display: flex; position: relative;
min-width: 20px; min-width: 175px;
flex: 1; flex: 1;
-webkit-app-region: drag;
} }
.tabs { .tabs {
display: flex; display: flex;
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto; overflow-x: auto;
max-width: 560px; max-width: 500px;
flex-basis: auto; /* default value */ flex-basis: auto; /* default value */
flex-grow: 1; flex-grow: 1;
-webkit-app-region: no-drag;
} }
.tabs::-webkit-scrollbar { .tabs::-webkit-scrollbar {

View file

@ -1,5 +1,6 @@
<template> <template>
<div id="app"> <div id="app">
<electron-frame-buttons v-if="isElectron" />
<div class="app-content"> <div class="app-content">
<header-login @isDay="isDayEvent" /> <header-login @isDay="isDayEvent" />
<div class="content"> <div class="content">
@ -111,10 +112,16 @@ import Recaptcha from "@/components/Recaptcha.vue";
import HeaderLogin from "@/components/HeaderLoginTemplate.vue"; import HeaderLogin from "@/components/HeaderLoginTemplate.vue";
import AuthenticationService from "@/services/AuthenticationService"; import AuthenticationService from "@/services/AuthenticationService";
import particlesJS from "@/components/ParticlesJS.vue"; import particlesJS from "@/components/ParticlesJS.vue";
const ElectronFrameButtons = () =>
import("@/components/ElectronJS/FrameButtons.vue");
export default { export default {
components: { HeaderLogin, Recaptcha, particlesJS }, components: { HeaderLogin, Recaptcha, particlesJS, ElectronFrameButtons },
data() { data() {
return { return {
isElectron: window && window.process && window.process.type,
showCaptcha: false, showCaptcha: false,
visible: true, visible: true,
email: { value: "", alert: "" }, email: { value: "", alert: "" },
@ -248,11 +255,9 @@ html, body {
display: flex; display: flex;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
height: 100%;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
z-index: 9999; z-index: 9999;
padding-bottom: 100px;
} }
.background { .background {
position: fixed; position: fixed;

View file

@ -1,5 +1,6 @@
<template> <template>
<div id="app"> <div id="app">
<electron-frame-buttons v-if="isElectron" />
<div class="app-content"> <div class="app-content">
<header-login @isDay="isDayEvent" /> <header-login @isDay="isDayEvent" />
<div class="content"> <div class="content">
@ -124,10 +125,16 @@ import Recaptcha from "@/components/Recaptcha.vue";
import HeaderLogin from "@/components/HeaderLoginTemplate.vue"; import HeaderLogin from "@/components/HeaderLoginTemplate.vue";
import AuthenticationService from "@/services/AuthenticationService"; import AuthenticationService from "@/services/AuthenticationService";
import particlesJS from "@/components/ParticlesJS.vue"; import particlesJS from "@/components/ParticlesJS.vue";
const ElectronFrameButtons = () =>
import("@/components/ElectronJS/FrameButtons.vue");
export default { export default {
components: { HeaderLogin, Recaptcha, particlesJS }, components: { HeaderLogin, Recaptcha, particlesJS, ElectronFrameButtons },
data() { data() {
return { return {
isElectron: window && window.process && window.process.type,
showCaptcha: false, showCaptcha: false,
visible: true, visible: true,
email: { value: "", alert: "" }, email: { value: "", alert: "" },
@ -254,11 +261,9 @@ html, body {
display: flex; display: flex;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
height: 100%;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
z-index: 9999; z-index: 9999;
padding-bottom: 100px;
} }
.background { .background {
position: fixed; position: fixed;