зеркало из https://github.com/github/vitess-gh.git
Merge pull request #1828 from enisoc/vtctld2
vtctld2: Add main toolbar and sidenav.
This commit is contained in:
Anthony Yeh
GitHub
Коммит
4ab78e2f7d
|
|
@ -17,12 +17,18 @@
|
|||
"@angular/compiler": "2.0.0-rc.3",
|
||||
"@angular/core": "2.0.0-rc.3",
|
||||
"@angular/forms": "0.1.1",
|
||||
"@angular/http": "2.0.0-rc.3",
|
||||
"@angular/http": "^2.0.0-rc.3",
|
||||
"@angular/platform-browser": "2.0.0-rc.3",
|
||||
"@angular/platform-browser-dynamic": "2.0.0-rc.3",
|
||||
"@angular/router": "3.0.0-alpha.7",
|
||||
"@angular2-material/button": "^2.0.0-alpha.5-2",
|
||||
"@angular2-material/card": "^2.0.0-alpha.5-2",
|
||||
"@angular2-material/core": "^2.0.0-alpha.5-2",
|
||||
"@angular2-material/icon": "^2.0.0-alpha.5-2",
|
||||
"@angular2-material/list": "^2.0.0-alpha.5-2",
|
||||
"@angular2-material/sidenav": "^2.0.0-alpha.5-2",
|
||||
"@angular2-material/tabs": "^2.0.0-alpha.5-2",
|
||||
"@angular2-material/toolbar": "^2.0.0-alpha.5-2",
|
||||
"es6-shim": "0.35.1",
|
||||
"reflect-metadata": "0.1.3",
|
||||
"rxjs": "5.0.0-beta.6",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,15 @@
|
|||
<h1>
|
||||
{{title}}
|
||||
</h1>
|
||||
<md-toolbar color="primary">
|
||||
<span>{{title}}</span>
|
||||
</md-toolbar>
|
||||
|
||||
<md-sidenav-layout class="flex-grow">
|
||||
<md-sidenav #sidenav mode="side" opened="true">
|
||||
<md-nav-list>
|
||||
<a md-list-item href="#dashboard"><md-icon>dashboard</md-icon> Dashboard</a>
|
||||
<a md-list-item href="#status"><md-icon>timeline</md-icon> Real-time Status</a>
|
||||
<a md-list-item href="#schema"><md-icon>storage</md-icon> Schema Manager</a>
|
||||
<a md-list-item href="#topo"><md-icon>folder</md-icon> Topology Browser</a>
|
||||
</md-nav-list>
|
||||
</md-sidenav>
|
||||
<div class="content">Content</div>
|
||||
</md-sidenav-layout>
|
||||
|
|
@ -1,5 +1,9 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { HTTP_PROVIDERS } from '@angular/http';
|
||||
import { MD_TOOLBAR_DIRECTIVES } from '@angular2-material/toolbar';
|
||||
import { MD_SIDENAV_DIRECTIVES } from '@angular2-material/sidenav';
|
||||
import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
|
||||
import { MdIcon, MdIconRegistry } from '@angular2-material/icon';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
|
|
@ -7,9 +11,16 @@ import { HTTP_PROVIDERS } from '@angular/http';
|
|||
templateUrl: 'app.component.html',
|
||||
styleUrls: ['app.component.css'],
|
||||
providers: [
|
||||
HTTP_PROVIDERS
|
||||
]
|
||||
HTTP_PROVIDERS,
|
||||
MdIconRegistry,
|
||||
],
|
||||
directives: [
|
||||
MD_TOOLBAR_DIRECTIVES,
|
||||
MD_SIDENAV_DIRECTIVES,
|
||||
MD_LIST_DIRECTIVES,
|
||||
MdIcon,
|
||||
],
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'app works!';
|
||||
title = 'Vitess Control Panel';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,22 @@
|
|||
<meta charset="utf-8">
|
||||
<title>Vitess</title>
|
||||
<base href=".">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
<app-root>Loading...</app-root>
|
||||
|
||||
|
||||
|
||||
{{#each scripts.polyfills}}
|
||||
<script src="{{.}}"></script>
|
||||
{{/each}}
|
||||
<script>
|
||||
System.import('system-config.js').then(function () {
|
||||
System.import('main');
|
||||
}).catch(console.error.bind(console));
|
||||
</script>
|
||||
|
||||
|
||||
<body class="flex-column">
|
||||
<app-root class="flex-column flex-grow">Loading...</app-root>
|
||||
|
||||
{{#each scripts.polyfills}}
|
||||
<script src="{{.}}"></script>
|
||||
{{/each}}
|
||||
<script>
|
||||
System.import('system-config.js').then(function () {
|
||||
System.import('main');
|
||||
}).catch(console.error.bind(console));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
html, body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
md-nav-list md-icon {
|
||||
color: #888;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
@ -19,6 +19,11 @@ const materialPkgs: string[] = [
|
|||
'core',
|
||||
'button',
|
||||
'card',
|
||||
'sidenav',
|
||||
'toolbar',
|
||||
'tabs',
|
||||
'icon',
|
||||
'list',
|
||||
];
|
||||
|
||||
materialPkgs.forEach((pkg) => {
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче