mirror of
https://github.com/Eugeny/tabby
synced 2024-11-14 17:07:15 +00:00
.
This commit is contained in:
parent
d4c3efdea1
commit
2f4afd7625
13 changed files with 203 additions and 28 deletions
|
@ -10,3 +10,25 @@ html
|
|||
script(src='./bundle.js', defer)
|
||||
body(style='background: ; min-height: 100vh; overflow: hidden')
|
||||
app-root
|
||||
.preload-logo
|
||||
div
|
||||
.terminus-logo.animated
|
||||
.part(style='transform: rotateZ(0deg)')
|
||||
div
|
||||
.part(style='transform: rotateZ(51deg)')
|
||||
div
|
||||
.part(style='transform: rotateZ(102deg)')
|
||||
div
|
||||
.part(style='transform: rotateZ(154deg)')
|
||||
div
|
||||
.part(style='transform: rotateZ(205deg)')
|
||||
div
|
||||
.part(style='transform: rotateZ(257deg)')
|
||||
div
|
||||
.part(style='transform: rotateZ(308deg)')
|
||||
div
|
||||
h1.terminus-title Terminus
|
||||
.progress
|
||||
.bar(style='width: 50%')
|
||||
|
||||
|
||||
|
|
10
app/main.js
10
app/main.js
|
@ -23,6 +23,12 @@ require('electron-debug')({enabled: true, showDevTools: process.argv.indexOf('--
|
|||
let windowConfig = new Config({name: 'window'})
|
||||
|
||||
|
||||
if (!process.env.TERMINUS_PLUGINS) {
|
||||
process.env.TERMINUS_PLUGINS = ''
|
||||
}
|
||||
|
||||
process.env.TERMINUS_PLUGINS += `:${path.resolve(__dirname, '..')}`
|
||||
|
||||
setupWindowManagement = () => {
|
||||
let windowCloseable
|
||||
|
||||
|
@ -144,7 +150,7 @@ start = () => {
|
|||
minHeight: 100,
|
||||
'web-preferences': {'web-security': false},
|
||||
//- background to avoid the flash of unstyled window
|
||||
backgroundColor: '#1D272D',
|
||||
backgroundColor: '#131d27',
|
||||
frame: false,
|
||||
//type: 'toolbar',
|
||||
}
|
||||
|
@ -161,7 +167,7 @@ start = () => {
|
|||
app.commandLine.appendSwitch('disable-http-cache')
|
||||
|
||||
app.window = new electron.BrowserWindow(options)
|
||||
app.window.loadURL(`file://${app.getAppPath()}/assets/webpack/index.html`, {extraHeaders: "pragma: no-cache\n"})
|
||||
app.window.loadURL(`file://${app.getAppPath()}/dist/index.html`, {extraHeaders: "pragma: no-cache\n"})
|
||||
|
||||
if (platform != 'darwin') {
|
||||
app.window.setMenu(null)
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
import { NgModule } from '@angular/core'
|
||||
import { BrowserModule } from '@angular/platform-browser'
|
||||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
|
||||
import { loadPlugins } from './plugins'
|
||||
|
||||
export async function getRootModule(): Promise<any> {
|
||||
let plugins = await loadPlugins()
|
||||
export async function getRootModule(plugins: any[]): Promise<any> {
|
||||
let imports = [
|
||||
BrowserModule,
|
||||
...(plugins.map(x => x.default.forRoot ? x.default.forRoot() : x.default)),
|
||||
|
|
|
@ -1,2 +1,3 @@
|
|||
import 'source-sans-pro'
|
||||
import 'font-awesome/css/font-awesome.css'
|
||||
import './preload.scss'
|
||||
|
|
|
@ -8,16 +8,21 @@ import 'rxjs'
|
|||
// Always land on the start view
|
||||
location.hash = ''
|
||||
|
||||
import { getRootModule } from './app.module'
|
||||
import { enableProdMode } from '@angular/core'
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
|
||||
|
||||
import { getRootModule } from './app.module'
|
||||
import { loadPlugins } from './plugins'
|
||||
|
||||
if ((<any>global).require('electron-is-dev')) {
|
||||
console.warn('Running in debug mode')
|
||||
} else {
|
||||
enableProdMode()
|
||||
}
|
||||
|
||||
getRootModule().then(module => {
|
||||
loadPlugins((current, total) => {
|
||||
document.querySelector('.progress .bar').style.width = 100 * current / total + '%'
|
||||
}).then(async plugins => {
|
||||
let module = await getRootModule(plugins)
|
||||
platformBrowserDynamic().bootstrapModule(module)
|
||||
})
|
||||
|
|
|
@ -17,26 +17,40 @@ if (process.env.TERMINUS_PLUGINS) {
|
|||
process.env.TERMINUS_PLUGINS.split(':').map(x => nodeModule.globalPaths.unshift(normalizePath(x)))
|
||||
}
|
||||
|
||||
export async function loadPlugins (): Promise<any[]> {
|
||||
export declare type ProgressCallback = (current, total) => void
|
||||
|
||||
interface IFoundPlugin {
|
||||
name: string
|
||||
path: string
|
||||
}
|
||||
|
||||
export async function loadPlugins (progress: ProgressCallback): Promise<any[]> {
|
||||
let paths = nodeModule.globalPaths
|
||||
let plugins: any[] = []
|
||||
let foundPlugins: IFoundPlugin[] = []
|
||||
|
||||
progress(0, 1)
|
||||
for (let pluginDir of paths) {
|
||||
pluginDir = normalizePath(pluginDir)
|
||||
if (!await fs.exists(pluginDir)) {
|
||||
continue
|
||||
}
|
||||
for (let pluginName of await fs.readdir(pluginDir)) {
|
||||
if (/^terminus-/.exec(pluginName)) {
|
||||
let pluginPath = path.join(pluginDir, pluginName)
|
||||
console.info(`Loading ${pluginName}: ${(<any>global).require.resolve(pluginPath)}`)
|
||||
try {
|
||||
let pluginModule = (<any>global).require(pluginPath)
|
||||
plugins.push(pluginModule)
|
||||
} catch (error) {
|
||||
console.error(`Could not load ${pluginName}:`, error)
|
||||
}
|
||||
}
|
||||
}
|
||||
let pluginNames = await fs.readdir(pluginDir)
|
||||
pluginNames.filter(pluginName => /^terminus-/.exec(pluginName)).forEach(name => {
|
||||
foundPlugins.push({ name, path: path.join(pluginDir, name) })
|
||||
})
|
||||
}
|
||||
foundPlugins.forEach((foundPlugin, index) => {
|
||||
console.info(`Loading ${foundPlugin.name}: ${(<any>global).require.resolve(foundPlugin.path)}`)
|
||||
progress(index, foundPlugins.length)
|
||||
try {
|
||||
let pluginModule = (<any>global).require(foundPlugin.path)
|
||||
plugins.push(pluginModule)
|
||||
} catch (error) {
|
||||
console.error(`Could not load ${foundPlugin.name}:`, error)
|
||||
}
|
||||
})
|
||||
|
||||
progress(1, 1)
|
||||
return plugins
|
||||
}
|
||||
|
|
102
app/src/preload.scss
Normal file
102
app/src/preload.scss
Normal file
|
@ -0,0 +1,102 @@
|
|||
$color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
|
||||
.preload-logo {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
animation: 0.5s ease-out fadeIn;
|
||||
|
||||
&>div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: auto;
|
||||
flex: none;
|
||||
|
||||
.progress {
|
||||
background: rgba(0,0,0,.25);
|
||||
height: 3px;
|
||||
margin: 10px 50px;
|
||||
|
||||
.bar {
|
||||
transition: 1s ease-out width;
|
||||
background: $color;
|
||||
height: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.terminus-logo {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
|
||||
.part {
|
||||
position: absolute;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
top: 33px;
|
||||
left: 24px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: rgba(0,0,0, .75);
|
||||
transform: rotateX(52deg) rotateY(-42deg);
|
||||
animation: terminusLogoPartOnce ease-out 1s;
|
||||
}
|
||||
}
|
||||
|
||||
&.animated .part div {
|
||||
animation: terminusLogoPart infinite ease-out 2s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.terminus-title {
|
||||
color: $color;
|
||||
font-family: 'Source Sans Pro';
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
font-size: 42px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@keyframes terminusLogoPart {
|
||||
0% {
|
||||
transform: rotateX(90deg) rotateY(-90deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotateX(52deg) rotateY(-42deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotateX(52deg) rotateY(-42deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(-90deg) rotateY(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes terminusLogoPartOnce {
|
||||
0% {
|
||||
transform: rotateX(90deg) rotateY(-90deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(52deg) rotateY(-42deg);
|
||||
}
|
||||
}
|
|
@ -12,9 +12,8 @@ module.exports = {
|
|||
context: __dirname,
|
||||
devtool: 'source-map',
|
||||
output: {
|
||||
path: path.join(__dirname, 'assets', 'webpack'),
|
||||
path: path.join(__dirname, 'dist'),
|
||||
pathinfo: true,
|
||||
//publicPath: 'assets/webpack/',
|
||||
filename: '[name].js'
|
||||
},
|
||||
resolve: {
|
||||
|
|
|
@ -1,13 +1,14 @@
|
|||
{
|
||||
"name": "term",
|
||||
"devDependencies": {
|
||||
"@types/fs-promise": "^1.0.1",
|
||||
"@types/core-js": "^0.9.35",
|
||||
"@types/electron": "1.4.34",
|
||||
"@types/fs-promise": "^1.0.1",
|
||||
"@types/node": "^7.0.5",
|
||||
"@types/webpack-env": "^1.13.0",
|
||||
"apply-loader": "^0.1.0",
|
||||
"awesome-typescript-loader": "3.1.2",
|
||||
"cross-env": "^4.0.0",
|
||||
"css-loader": "0.26.1",
|
||||
"electron": "1.6.2",
|
||||
"electron-builder": "10.6.1",
|
||||
|
@ -16,7 +17,6 @@
|
|||
"file-loader": "^0.9.0",
|
||||
"font-awesome": "4.7.0",
|
||||
"html-loader": "^0.4.4",
|
||||
"source-sans-pro": "^2.0.10",
|
||||
"less": "^2.7.1",
|
||||
"less-loader": "^2.2.3",
|
||||
"node-gyp": "^3.4.0",
|
||||
|
@ -26,6 +26,7 @@
|
|||
"pug-static-loader": "0.0.1",
|
||||
"raw-loader": "^0.5.1",
|
||||
"sass-loader": "^6.0.3",
|
||||
"source-sans-pro": "^2.0.10",
|
||||
"style-loader": "^0.13.1",
|
||||
"to-string-loader": "^1.1.5",
|
||||
"tslint": "5.0.0",
|
||||
|
@ -58,6 +59,7 @@
|
|||
"scripts": {
|
||||
"build": "webpack --progress --color",
|
||||
"watch": "webpack --progress --color --watch",
|
||||
"start": "cross-env DEV=1 electron app --debug",
|
||||
"pack": "build --dir",
|
||||
"postinstall": "install-app-deps",
|
||||
"dist": "build"
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
-webkit-user-select: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
cursor: default;
|
||||
animation: 0.5s ease-out fadeIn;
|
||||
}
|
||||
|
||||
$tabs-height: 40px;
|
||||
|
|
|
@ -1,5 +1,22 @@
|
|||
div
|
||||
button.btn.btn-outline-info.btn-lg.btn-block(
|
||||
.terminus-logo
|
||||
.part(style='transform: rotateZ(0deg)')
|
||||
div
|
||||
.part(style='transform: rotateZ(51deg)')
|
||||
div
|
||||
.part(style='transform: rotateZ(102deg)')
|
||||
div
|
||||
.part(style='transform: rotateZ(154deg)')
|
||||
div
|
||||
.part(style='transform: rotateZ(205deg)')
|
||||
div
|
||||
.part(style='transform: rotateZ(257deg)')
|
||||
div
|
||||
.part(style='transform: rotateZ(308deg)')
|
||||
div
|
||||
h1.terminus-title Terminus
|
||||
|
||||
button.btn.btn-outline-primary.btn-lg.btn-block(
|
||||
*ngFor='let button of getButtons()',
|
||||
(click)='button.click()',
|
||||
)
|
||||
|
|
|
@ -3,11 +3,15 @@
|
|||
flex: auto;
|
||||
}
|
||||
|
||||
:host div {
|
||||
:host > div {
|
||||
flex: none;
|
||||
margin: auto;
|
||||
width: 400px;
|
||||
width: 300px;
|
||||
max-width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.terminus-title {
|
||||
margin: 0 0 60px;
|
||||
}
|
||||
|
|
|
@ -145,7 +145,7 @@ app-root {
|
|||
}
|
||||
|
||||
&.tabs-on-top .tab-bar {
|
||||
margin-top: 3px;
|
||||
margin-top: 5px;
|
||||
|
||||
tab-header {
|
||||
.wrapper {
|
||||
|
@ -318,6 +318,10 @@ ngb-tabset .tab-content {
|
|||
i + * {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&.btn-lg i + * {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon + .form-control {
|
||||
|
|
Loading…
Reference in a new issue