289 lines
11 KiB
Vue
289 lines
11 KiB
Vue
<template>
|
|
<div style="display:flex;flex-direction:column;height:100%;padding:1px" :class="'platform-' + platform">
|
|
<div v-html="styling"></div>
|
|
<div style="display:flex;align-items:stretch;" class="border-bottom" id="window-tabs">
|
|
<h4>F-Chat</h4>
|
|
<div class="btn" :class="'btn-' + (hasUpdate ? 'warning' : 'light')" @click="openMenu">
|
|
<i class="fa fa-cog"></i>
|
|
</div>
|
|
<ul class="nav nav-tabs" style="border-bottom:0" ref="tabs">
|
|
<li v-for="tab in tabs" :key="tab.view.id" class="nav-item">
|
|
<a href="#" @click.prevent="show(tab)" class="nav-link"
|
|
:class="{active: tab === activeTab, hasNew: tab.hasNew && tab !== activeTab}">
|
|
<img v-if="tab.user" :src="'https://static.f-list.net/images/avatar/' + tab.user.toLowerCase() + '.png'"/>
|
|
{{tab.user || l('window.newTab')}}
|
|
<a href="#" class="btn" :aria-label="l('action.close')" style="margin-left:10px;padding:0;color:inherit"
|
|
@click.stop="remove(tab)"><i class="fa fa-times"></i>
|
|
</a>
|
|
</a>
|
|
</li>
|
|
<li v-show="canOpenTab" class="addTab nav-item" id="addTab">
|
|
<a href="#" @click.prevent="addTab" class="nav-link"><i class="fa fa-plus"></i></a>
|
|
</li>
|
|
</ul>
|
|
<div style="flex:1;display:flex;justify-content:flex-end;-webkit-app-region:drag;margin-top:3px" class="btn-group"
|
|
id="windowButtons">
|
|
<i class="far fa-window-minimize btn btn-light" @click.stop="minimize"></i>
|
|
<i class="far btn btn-light" :class="'fa-window-' + (isMaximized ? 'restore' : 'maximize')" @click="maximize"></i>
|
|
<span class="btn btn-light" @click.stop="close">
|
|
<i class="fa fa-times fa-lg"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Sortable = require('sortablejs'); //tslint:disable-line:no-require-imports
|
|
|
|
import * as electron from 'electron';
|
|
import * as fs from 'fs';
|
|
import * as path from 'path';
|
|
import * as url from 'url';
|
|
import Vue from 'vue';
|
|
import Component from 'vue-class-component';
|
|
import l from '../chat/localize';
|
|
import {GeneralSettings} from './common';
|
|
|
|
const browserWindow = electron.remote.getCurrentWindow();
|
|
|
|
function getWindowBounds(): Electron.Rectangle {
|
|
const bounds = browserWindow.getContentBounds();
|
|
const height = document.body.offsetHeight;
|
|
return {x: 0, y: height, width: bounds.width, height: bounds.height - height};
|
|
}
|
|
|
|
interface Tab {
|
|
user: string | undefined,
|
|
view: Electron.BrowserView
|
|
hasNew: boolean
|
|
tray: Electron.Tray
|
|
}
|
|
|
|
const trayIcon = path.join(__dirname, <string>require('./build/tray.png')); //tslint:disable-line:no-require-imports
|
|
|
|
@Component
|
|
export default class Window extends Vue {
|
|
//tslint:disable:no-null-keyword
|
|
settings!: GeneralSettings;
|
|
tabs: Tab[] = [];
|
|
activeTab: Tab | null = null;
|
|
tabMap: {[key: number]: Tab} = {};
|
|
isMaximized = browserWindow.isMaximized();
|
|
canOpenTab = true;
|
|
l = l;
|
|
hasUpdate = false;
|
|
platform = process.platform;
|
|
|
|
mounted(): void {
|
|
this.addTab();
|
|
electron.ipcRenderer.on('settings', (_: Event, settings: GeneralSettings) => this.settings = settings);
|
|
electron.ipcRenderer.on('allow-new-tabs', (_: Event, allow: boolean) => this.canOpenTab = allow);
|
|
electron.ipcRenderer.on('open-tab', () => this.addTab());
|
|
electron.ipcRenderer.on('update-available', () => this.hasUpdate = true);
|
|
electron.ipcRenderer.on('quit', () => this.tabs.forEach((tab) => this.remove(tab, false)));
|
|
electron.ipcRenderer.on('connect', (_: Event, id: number, name: string) => {
|
|
const tab = this.tabMap[id];
|
|
tab.user = name;
|
|
tab.tray.setToolTip(`${l('title')} - ${tab.user}`);
|
|
const menu = this.createTrayMenu(tab);
|
|
menu.unshift({label: tab.user, enabled: false}, {type: 'separator'});
|
|
tab.tray.setContextMenu(electron.remote.Menu.buildFromTemplate(menu));
|
|
});
|
|
electron.ipcRenderer.on('disconnect', (_: Event, id: number) => {
|
|
const tab = this.tabMap[id];
|
|
if(tab.hasNew) {
|
|
tab.hasNew = false;
|
|
electron.ipcRenderer.send('has-new', this.tabs.reduce((cur, t) => cur || t.hasNew, false));
|
|
}
|
|
tab.user = undefined;
|
|
tab.tray.setToolTip(l('title'));
|
|
tab.tray.setContextMenu(electron.remote.Menu.buildFromTemplate(this.createTrayMenu(tab)));
|
|
});
|
|
electron.ipcRenderer.on('has-new', (_: Event, id: number, hasNew: boolean) => {
|
|
const tab = this.tabMap[id];
|
|
tab.hasNew = hasNew;
|
|
electron.ipcRenderer.send('has-new', this.tabs.reduce((cur, t) => cur || t.hasNew, false));
|
|
});
|
|
browserWindow.on('maximize', () => {
|
|
this.isMaximized = true;
|
|
this.activeTab!.view.setBounds(getWindowBounds());
|
|
});
|
|
browserWindow.on('unmaximize', () => {
|
|
this.isMaximized = false;
|
|
this.activeTab!.view.setBounds(getWindowBounds());
|
|
});
|
|
document.addEventListener('click', () => this.activeTab!.view.webContents.focus());
|
|
window.addEventListener('focus', () => this.activeTab!.view.webContents.focus());
|
|
|
|
Sortable.create(this.$refs['tabs'], {
|
|
animation: 50,
|
|
onEnd: (e: {oldIndex: number, newIndex: number}) => {
|
|
if(e.oldIndex === e.newIndex) return;
|
|
const tab = this.tabs.splice(e.oldIndex, 1)[0];
|
|
this.tabs.splice(e.newIndex, 0, tab);
|
|
},
|
|
onMove: (e: {related: HTMLElement}) => e.related.id !== 'addTab',
|
|
filter: '.addTab'
|
|
});
|
|
|
|
window.onbeforeunload = () => {
|
|
const isConnected = this.tabs.reduce((cur, tab) => cur || tab.user !== undefined, false);
|
|
if(process.env.NODE_ENV !== 'production' || !isConnected) {
|
|
this.tabs.forEach((tab) => this.remove(tab, false));
|
|
return;
|
|
}
|
|
if(!this.settings.closeToTray)
|
|
return setImmediate(() => {
|
|
if(confirm(l('chat.confirmLeave'))) this.tabs.forEach((tab) => this.remove(tab, false));
|
|
});
|
|
browserWindow.hide();
|
|
return false;
|
|
};
|
|
}
|
|
|
|
get styling(): string {
|
|
try {
|
|
return `<style>${fs.readFileSync(path.join(__dirname, `themes/${this.settings.theme}.css`))}</style>`;
|
|
} catch(e) {
|
|
if((<Error & {code: string}>e).code === 'ENOENT' && this.settings.theme !== 'default') {
|
|
this.settings.theme = 'default';
|
|
return this.styling;
|
|
}
|
|
throw e;
|
|
}
|
|
}
|
|
|
|
createTrayMenu(tab: Tab): Electron.MenuItemConstructorOptions[] {
|
|
return [
|
|
{
|
|
label: l('action.open'), click: () => {
|
|
browserWindow.show();
|
|
this.show(tab);
|
|
}
|
|
},
|
|
{label: l('action.quit'), click: () => this.remove(tab, false)}
|
|
];
|
|
}
|
|
|
|
addTab(): void {
|
|
const tray = new electron.remote.Tray(trayIcon);
|
|
tray.setToolTip(l('title'));
|
|
tray.on('click', (_) => browserWindow.show());
|
|
const view = new electron.remote.BrowserView();
|
|
view.setAutoResize({width: true, height: true});
|
|
view.webContents.loadURL(url.format({
|
|
pathname: path.join(__dirname, 'index.html'),
|
|
protocol: 'file:',
|
|
slashes: true,
|
|
query: {settings: JSON.stringify(this.settings)}
|
|
}));
|
|
electron.ipcRenderer.send('tab-added', view.webContents.id);
|
|
const tab = {active: false, view, user: undefined, hasNew: false, tray};
|
|
tray.setContextMenu(electron.remote.Menu.buildFromTemplate(this.createTrayMenu(tab)));
|
|
this.tabs.push(tab);
|
|
this.tabMap[view.webContents.id] = tab;
|
|
this.show(tab);
|
|
}
|
|
|
|
show(tab: Tab): void {
|
|
this.activeTab = tab;
|
|
browserWindow.setBrowserView(tab.view);
|
|
tab.view.setBounds(getWindowBounds());
|
|
}
|
|
|
|
remove(tab: Tab, shouldConfirm: boolean = true): void {
|
|
if(shouldConfirm && tab.user !== undefined && !confirm(l('chat.confirmLeave'))) return;
|
|
this.tabs.splice(this.tabs.indexOf(tab), 1);
|
|
electron.ipcRenderer.send('has-new', this.tabs.reduce((cur, t) => cur || t.hasNew, false));
|
|
delete this.tabMap[tab.view.webContents.id];
|
|
tab.tray.destroy();
|
|
tab.view.webContents.loadURL('about:blank');
|
|
electron.ipcRenderer.send('tab-closed');
|
|
delete tab.view;
|
|
if(this.tabs.length === 0) {
|
|
if(process.env.NODE_ENV === 'production') browserWindow.close();
|
|
} else if(this.activeTab === tab) this.show(this.tabs[0]);
|
|
}
|
|
|
|
minimize(): void {
|
|
browserWindow.minimize();
|
|
}
|
|
|
|
maximize(): void {
|
|
if(browserWindow.isMaximized()) browserWindow.unmaximize();
|
|
else browserWindow.maximize();
|
|
}
|
|
|
|
close(): void {
|
|
browserWindow.close();
|
|
}
|
|
|
|
openMenu(): void {
|
|
electron.remote.Menu.getApplicationMenu()!.popup();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
#window-tabs {
|
|
user-select: none;
|
|
.btn {
|
|
border-radius: 0;
|
|
padding: 5px 15px;
|
|
display: flex;
|
|
margin: 0px -1px -1px 0;
|
|
align-items: center;
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
.btn-default {
|
|
background: transparent;
|
|
}
|
|
|
|
li {
|
|
height: 100%;
|
|
a {
|
|
display: flex;
|
|
padding: 5px 10px;
|
|
height: 100%;
|
|
align-items: center;
|
|
&:first-child {
|
|
border-top-left-radius: 0;
|
|
}
|
|
}
|
|
|
|
img {
|
|
height: 28px;
|
|
margin: -5px 3px -5px -5px;
|
|
}
|
|
|
|
&.active {
|
|
margin-bottom: -2px;
|
|
}
|
|
}
|
|
|
|
h4 {
|
|
margin: 0 10px;
|
|
user-select: none;
|
|
cursor: default;
|
|
align-self: center;
|
|
-webkit-app-region: drag;
|
|
}
|
|
}
|
|
|
|
#windowButtons .btn {
|
|
margin: -4px -1px -1px 0;
|
|
border-top: 0;
|
|
}
|
|
|
|
.platform-darwin {
|
|
#windowButtons .btn {
|
|
display: none;
|
|
}
|
|
|
|
#window-tabs h4 {
|
|
margin: 9px 34px 9px 77px;
|
|
}
|
|
}
|
|
</style> |