Skip to content

C
console
Commit d6768812 authored by 神楽坂玲奈's avatar 神楽坂玲奈
Browse files
Options

页面

parent 8ff09af6
Hide whitespace changes
Inline Side-by-side
Showing with 126 additions and 103 deletions
app/app-detail.component.css
View file @ d6768812
......@@ -5,7 +5,7 @@
}
md-sidenav {
width: 200px;
width: 240px;
}
.example-full-width {
......@@ -22,4 +22,47 @@ h1 {
#info-contents {
margin-left: 8px;
}
md-sidenav h3 {
background: rgba(0,0,0,.32);
color: #fff;
border: none;
font-size: 10px;
letter-spacing: 1px;
line-height: 24px;
text-transform: uppercase;
font-weight: 400;
margin: 0;
padding: 0 16px;
}
md-sidenav li {
border-bottom: 1px solid;
margin: 0;
padding: 0;
border-color: rgba(0,0,0,.06);
color: rgba(0,0,0,.54);
}
md-sidenav li>a {
box-sizing: border-box;
display: block;
font-size: 14px;
font-weight: 400;
line-height: 47px;
text-decoration: none;
transition: all .3s;
padding: 0 16px;
position: relative;
color: rgba(0,0,0,.54);
}
md-sidenav li>a:hover {
background: #fafafa;
color: #00bcd4;
}
md-sidenav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
\ No newline at end of file
app/app-detail.component.html
View file @ d6768812
<md-sidenav-container *ngIf="app">
<md-sidenav mode="side" opened="true">
<h3 md-subheader>信息中心</h3>
<md-nav-list>
<a md-list-item href="#">概览</a>
</md-nav-list>
<h3 md-subheader>编辑应用</h3>
<md-nav-list>
<a md-list-item href="#">详情</a>
<a md-list-item href="#">文件</a>
</md-nav-list>
</md-sidenav>
<div class="my-content">
<div id="info">
<div>
<div id="info">
<div>
<img src="https://lh6.ggpht.com/mUAFCY_JUfHQBlAE4JsnwyrghcxIldv-uk0iPPL66IpPxM8-KQCof6NN4usLm6LUpA=h80-rw" alt="喵帕斯~">
</div>
<div id="info-contents">
<h1>{{app.name['zh-CN']}}</h1>
<div>
<span>{{app.id}}</span>
<a target="_blank" href="https://mycard.moe"> 在商店中查看 </a>
</div>
<div id="info-contents">
<h1>{{app.name['zh-CN']}}</h1>
<div>
<span>{{app.id}}</span>
<a target="_blank" href="https://mycard.moe"> 在商店中查看 </a>
</div>
<div class="IDWJ4SB-Yf-i">
<span style="color:#84a000;">已发布</span>
<span>2014年2月20日</span>
<a class="gwt-Anchor" href="javascript:">取消发布应用</a>
<a class="gwt-Anchor">删除应用</a>
</div>
<div class="IDWJ4SB-Yf-i">
<span style="color:#84a000;">已发布</span>
<span>2014年2月20日</span>
<a class="gwt-Anchor" href="javascript:">取消发布应用</a>
<a class="gwt-Anchor">删除应用</a>
</div>
</div>
</div>
<h3 md-subheader>基本信息</h3>
<form class="example-form">
<md-input-container class="example-full-width">
<input md-input name="id" placeholder="ID" disabled [(ngModel)]="app.id">
</md-input-container>
<h3 md-subheader>基本信息</h3>
<form class="example-form">
<md-input-container class="example-full-width">
<input md-input name="name" placeholder="First name" [(ngModel)]="app.name['zh-CN']">
</md-input-container>
<p>
<md-input-container class="example-full-width">
<input md-input name="id" placeholder="ID" disabled [(ngModel)]="app.id">
<textarea md-input placeholder="Address">1600 Amphitheatre Pkwy</textarea>
</md-input-container>
<md-input-container class="example-full-width">
<input md-input name="name" placeholder="First name" [(ngModel)]="app.name['zh-CN']">
<textarea md-input placeholder="Address 2"></textarea>
</md-input-container>
<p>
<md-input-container class="example-full-width">
<textarea md-input placeholder="Address">1600 Amphitheatre Pkwy</textarea>
</md-input-container>
<md-input-container class="example-full-width">
<textarea md-input placeholder="Address 2"></textarea>
</md-input-container>
</p>
<table class="example-full-width" cellspacing="0">
<tr>
<td>
<md-input-container class="example-full-width">
<input md-input placeholder="City">
</md-input-container>
</td>
<td>
<md-input-container class="example-full-width">
<input md-input placeholder="State">
</md-input-container>
</td>
<td>
<md-input-container class="example-full-width">
<input md-input #postalCode maxlength="5" placeholder="Postal Code" value="94043">
<md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
</md-input-container>
</td>
</tr>
</table>
<button md-raised-button color="primary">提交</button>
</form>
<h3 md-subheader>语言</h3>
<md-tab-group>
<md-tab>
<template md-tab-label>
The <em>best</em> pasta
</template>
<h1>Best pasta restaurants</h1>
<p>...</p>
</md-tab>
<md-tab>
<template md-tab-label>
<md-icon>home</md-icon> The worst sushi
</template>
<h1>Terrible sushi restaurants</h1>
<p>...</p>
</md-tab>
</md-tab-group>
Main content
<!--<md-icon class="md-24 fa-lg" fontSet="fa" fontIcon="fa-trophy"></md-icon>-->
</div>
</md-sidenav-container>
<md-icon fontSet="fa" fontIcon="fa-square"></md-icon>
\ No newline at end of file
</p>
<table class="example-full-width" cellspacing="0">
<tr>
<td>
<md-input-container class="example-full-width">
<input md-input placeholder="City">
</md-input-container>
</td>
<td>
<md-input-container class="example-full-width">
<input md-input placeholder="State">
</md-input-container>
</td>
<td>
<md-input-container class="example-full-width">
<input md-input #postalCode maxlength="5" placeholder="Postal Code" value="94043">
<md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
</md-input-container>
</td>
</tr>
</table>
<button md-raised-button color="primary">提交</button>
</form>
\ No newline at end of file
app/app-detail.component.ts
View file @ d6768812
import {Component, OnInit} from '@angular/core';
import {Component, OnInit, Input} from '@angular/core';
import App from '../models/app';
import {AppService} from './app.service';
import {ActivatedRoute, Params} from '@angular/router';
import {ActivatedRoute} from '@angular/router';
import 'rxjs/Rx';
import {MdIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';
@Component({
selector: 'app-detail',
moduleId: module.id,
templateUrl: 'app-detail.component.html',
styleUrls: ['app-detail.component.css']
})
export class AppDetailComponent implements OnInit {
@Input()
app: App;
constructor(private appService: AppService, private route: ActivatedRoute, iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
......@@ -26,9 +26,11 @@ export class AppDetailComponent implements OnInit {
}
async ngOnInit() {
this.route.params
.switchMap((params: Params) => this.appService.getApp(params['id']))
.subscribe(app => this.app = app);
// this.route.params
// .switchMap((params: Params) => this.appService.getApp(params['id']))
// .subscribe(app => {
// this.app = app;
// this.locales = Object.keys(this.app.name);
// });
}
}
app/mycard.module.ts
View file @ d6768812
......@@ -18,13 +18,15 @@ import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import {AppDetailComponent} from './app-detail.component';
import {AppComponent} from './app.component';
import {AppLocaleComponent} from './app-locale.component';
@NgModule({
imports: [
BrowserModule, MaterialModule.forRoot(), FormsModule, RoutingModule, HttpModule,
],
declarations: [AppsComponent, MyCardComponent, AppDetailComponent],
declarations: [AppsComponent, MyCardComponent, AppComponent, AppDetailComponent, AppLocaleComponent],
bootstrap: [MyCardComponent],
providers: [AppService, MdIconRegistry],
})
......
app/routing.module.ts
View file @ d6768812
......@@ -5,12 +5,21 @@ import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AppsComponent} from './apps.component';
import {AppDetailComponent} from './app-detail.component';
import {AppComponent} from './app.component';
import {AppLocaleComponent} from './app-locale.component';
const routes: Routes = [
{path: '', redirectTo: '/apps', pathMatch: 'full'},
{path: 'apps', component: AppsComponent},
{path: 'apps/:id', component: AppDetailComponent}
{
path: 'apps/:id',
component: AppComponent,
children: [
{path: '', component: AppDetailComponent},
{path: 'locale', component: AppLocaleComponent}
]
}
];
@NgModule({
......
package.json
View file @ d6768812
......@@ -3,7 +3,8 @@
"version": "1.0.0",
"private": true,
"scripts": {
"start": "tsc && concurrently \"node server.js\" \"lite-server\"",
"prestart": "tsc",
"start": "concurrently \"node server.js\" \"lite-server\"",
"tsc": "tsc",
"lint": "tslint -e ./node_modules/** ./**/*.ts -t verbose",
"migrate": "tsc && mongo-migrate --runMongoMigrate --config mongodb_config.json --dbPropName dbSettings"
......
systemjs.config.js
View file @ d6768812
......@@ -39,6 +39,12 @@
},
rxjs: {
defaultExtension: 'js'
},
models: {
defaultExtension: 'js'
},
db: {
defaultExtension: 'js'
}
}
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment