Commit 1c9f0dd3 authored by 神楽坂玲奈's avatar 神楽坂玲奈

页面

parent d6768812
.my-content {
min-height: 1000px;
padding-left: 20px;
padding-top: 20px;
}
md-sidenav {
width: 240px;
}
.example-full-width {
width: 100%;
}
#info {
display: flex;
}
h1 {
margin: 4px 0;
}
#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
<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 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>
<div *ngIf="app">
<!--<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">
......@@ -58,4 +40,5 @@
</table>
<button md-raised-button color="primary">提交</button>
</form>
\ No newline at end of file
</form>
</div>
\ No newline at end of file
import {Component, OnInit, Input} from '@angular/core';
import App from '../models/app';
import {Component, OnInit} from '@angular/core';
import App from '../models/browserapp';
import {AppService} from './app.service';
import {ActivatedRoute} from '@angular/router';
import {ActivatedRoute, Params} from '@angular/router';
import 'rxjs/Rx';
import {MdIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';
......@@ -12,25 +12,16 @@ import {DomSanitizer} from '@angular/platform-browser';
styleUrls: ['app-detail.component.css']
})
export class AppDetailComponent implements OnInit {
@Input()
app: App;
constructor(private appService: AppService, private route: ActivatedRoute, iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
// iconRegistry.registerFontClassAlias('fontawesome', 'fa');
// iconRegistry
// .addSvgIconSetInNamespace('thumbs-up', 'fonts/core-icon-set.svg')
// iconRegistry.addSvgIcon(
// 'thumbs-up',
// sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg')
// );
}
async ngOnInit() {
// this.route.params
// .switchMap((params: Params) => this.appService.getApp(params['id']))
// .subscribe(app => {
// this.app = app;
// this.locales = Object.keys(this.app.name);
// });
this.route.parent.params
.switchMap((params: Params) => this.appService.getApp(params['id']))
.subscribe(app => {
this.app = app;
});
}
}
.example-full-width {
width: 100%;
}
<!--<h3 md-subheader>语言</h3>-->
<md-tab-group>
<md-tab *ngFor="let locale of locales" [label]="locale">
<form class="example-form" style="margin-top:16px;">
<md-input-container class="example-full-width">
<input md-input name="name" placeholder="应用名称" [(ngModel)]="app.name[locale]">
</md-input-container>
<md-input-container class="example-full-width">
<textarea md-input name="description" placeholder="应用介绍" [(ngModel)]="app.description">1600 Amphitheatre Pkwy</textarea>
</md-input-container>
<button md-raised-button color="primary">提交</button>
</form>
</md-tab>
</md-tab-group>
\ No newline at end of file
import {Component, OnInit} from '@angular/core';
import App from '../models/browserapp';
import {AppService} from './app.service';
import {ActivatedRoute, Params} from '@angular/router';
import 'rxjs/Rx';
import {MdIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';
@Component({
moduleId: module.id,
templateUrl: 'app-locales.component.html',
styleUrls: ['app-locales.component.css']
})
export class AppLocalesComponent implements OnInit {
app: App;
locales: string[];
constructor(private appService: AppService, private route: ActivatedRoute, iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
}
async ngOnInit() {
this.route.parent.params
.switchMap((params: Params) => this.appService.getApp(params['id']))
.subscribe(app => {
this.app = app;
this.locales = Object.keys(this.app.name);
});
}
}
.example-full-width {
width: 100%;
}
<h3 md-subheader>语言</h3>
<md-tab-group>
<md-tab *ngFor="let locale of locales" [label]="locale">
<form class="example-form" style="margin-top:16px;">
<md-input-container class="example-full-width">
<input md-input name="name" placeholder="应用名称" [(ngModel)]="app.name[locale]">
</md-input-container>
<md-input-container class="example-full-width">
<textarea md-input name="description" placeholder="应用介绍" [(ngModel)]="app.description">1600 Amphitheatre Pkwy</textarea>
</md-input-container>
<button md-raised-button color="primary">提交</button>
</form>
</md-tab>
</md-tab-group>
\ No newline at end of file
import {Component, OnInit} from '@angular/core';
import App from '../models/browserapp';
import {AppService} from './app.service';
import {ActivatedRoute, Params} from '@angular/router';
import 'rxjs/Rx';
import {MdIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';
@Component({
moduleId: module.id,
templateUrl: 'app-packages.component.html',
styleUrls: ['app-packages.component.css']
})
export class AppPackagesComponent implements OnInit {
app: App;
constructor(private appService: AppService, private route: ActivatedRoute, iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
}
async ngOnInit() {
this.route.parent.params
.switchMap((params: Params) => this.appService.getApp(params['id']))
.subscribe(app => {
this.app = app;
});
}
}
.wrapper {
min-height: 1000px;
padding-left: 20px;
padding-top: 20px;
}
md-sidenav {
width: 240px;
}
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;
}
#info {
display: flex;
}
h1 {
margin: 0;
font-size: 32px;
}
#info-contents {
margin-left: 12px;
}
#info-contents a, #info-contents span {
line-height: 20px;
padding: 0 4px;
min-width: inherit;
}
md-toolbar {
padding-bottom: 12px;
font-size: 14px;
}
md-toolbar /deep/ md-toolbar-row {
height: auto;
}
\ No newline at end of file
<md-sidenav-container>
<md-sidenav mode="side" opened="true">
<h3>信息中心</h3>
<ul>
<li><a md-list-item href="#">概览</a></li>
</ul>
<h3>编辑应用</h3>
<ul>
<li><a md-list-item routerLink="detail">详情</a></li>
<li><a md-list-item routerLink="locales">语言</a></li>
<li><a md-list-item routerLink="packages">文件</a></li>
</ul>
</md-sidenav>
<md-toolbar *ngIf="app" id="info" color="primary">
<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 md-button target="_blank" href="https://mycard.moe">在商店中查看</a>
</div>
<div class="IDWJ4SB-Yf-i">
<span style="color:#84a000;">已发布</span>
<span>2014年2月20日</span>
<a md-button href="#">取消发布应用</a>
<a md-button href="#">删除应用</a>
</div>
</div>
</md-toolbar>
<div class="wrapper">
<router-outlet></router-outlet>
</div>
</md-sidenav-container>
\ No newline at end of file
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';
import {AppService} from './app.service';
import App from '../models/browserapp';
@Component({
moduleId: module.id,
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent implements OnInit {
app: App;
constructor(private route: ActivatedRoute, private appService: AppService) {
}
ngOnInit() {
this.route.params
.switchMap((params: Params) => this.appService.getApp(params['id']))
.subscribe(app => {
this.app = app;
});
}
}
......@@ -19,14 +19,15 @@ 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';
import {AppLocalesComponent} from './app-locales.component';
import {AppPackagesComponent} from './app-packages.component';
@NgModule({
imports: [
BrowserModule, MaterialModule.forRoot(), FormsModule, RoutingModule, HttpModule,
],
declarations: [AppsComponent, MyCardComponent, AppComponent, AppDetailComponent, AppLocaleComponent],
declarations: [AppsComponent, MyCardComponent, AppComponent, AppDetailComponent, AppLocalesComponent, AppPackagesComponent],
bootstrap: [MyCardComponent],
providers: [AppService, MdIconRegistry],
})
......
......@@ -6,7 +6,8 @@ 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';
import {AppLocalesComponent} from './app-locales.component';
import {AppPackagesComponent} from './app-packages.component';
const routes: Routes = [
......@@ -16,8 +17,9 @@ const routes: Routes = [
path: 'apps/:id',
component: AppComponent,
children: [
{path: '', component: AppDetailComponent},
{path: 'locale', component: AppLocaleComponent}
{path: 'detail', component: AppDetailComponent},
{path: 'locales', component: AppLocalesComponent},
{path: 'packages', component: AppPackagesComponent}
]
}
];
......
/**
* Created by zh99998 on 2017/1/4.
*/
interface I18n<T> {
[locale: string]: T;
}
class App {
id: string;
name: I18n<string>;
parent?: string;
locales: string[];
news: I18n<{title: string, url: string, image: string}[]>;
conference?: string;
data: any;
}
export class BrowserApp {
id: string;
name: I18n<string>;
parent?: string;
locales: string[];
news: I18n<{title: string, url: string, image: string}[]>;
conference?: string;
data: any;
}
export default App;
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