美化进度条

.gitignore

@@ -11,3 +11,4 @@
 .DS_Store
 Thumbs.db
 messages.xlf
+messages.xlf.bak
\ No newline at end of file

app/app-detail.component.html

 <h1>{{currentApp.name}}</h1>
-<div class="actions" *ngIf="currentApp.status.status === 'init'">
+<!--应用未安装-->
+<div class="actions" *ngIf="!currentApp.isInstalled()">
     <button i18n type="button" class="btn btn-primary" data-toggle="modal" (click)="updateInstallConfig(currentApp)" data-target="#install-modal">安装</button>
     <button i18n type="button" class="btn btn-secondary">导入</button>
 </div>
-<div i18n *ngIf="currentApp.status.status === 'installing'">正在安装...</div>
-<div i18n *ngIf="currentApp.status.status==='waiting'">等待安装...</div>
-<progress *ngIf="currentApp.status.status === 'downloading'" class="progress progress-striped progress-animated" value="{{currentApp.status.progress}}" max="{{currentApp.status.total}}"></progress>
-<div class="actions" *ngIf="currentApp.status.status==='ready' && (currentApp.id != 'ygopro')">
+
+<!--应用变更中-->
+<div class="actions" *ngIf="currentApp.isInstalled() && !currentApp.isReady()">
+    <div *ngIf="currentApp.isInstalling()">
+        <span>正在下载</span><span *ngIf="currentApp.status.total">{{currentApp.status.progress/currentApp.status.total}}%</span>
+    </div>
+    <div i18n *ngIf="currentApp.isInstalling()">正在安装...</div>
+    <div i18n *ngIf="currentApp.isWaiting()">等待安装...</div>
+    <progress class="progress" [class.progress-striped]="!currentApp.status.total" [class.progress-animated]="!currentApp.status.total" value="{{currentApp.status.progress}}" max="{{currentApp.status.total}}"></progress>
+</div>
+
+<!--应用ready-->
+<div class="actions" *ngIf="currentApp.isReady() && (currentApp.id != 'ygopro')">
     <button i18n *ngIf="currentApp.runable()" (click)="runApp(currentApp)" type="button" class="btn btn-primary">运行</button>
     <button i18n *ngIf="currentApp.runable() && currentApp.actions.get('custom')" (click)="custom(currentApp)" type="button" class="btn btn-secondary">设置</button>
     <div id="network" *ngIf="currentApp.network && currentApp.network.protocol == 'maotama'">
@@ -24,7 +34,8 @@
         </div>
     </div>
 </div>
-<ygopro *ngIf="currentApp.status.status==='ready'&& (currentApp.id == 'ygopro')" [app]="currentApp"></ygopro>
+<ygopro *ngIf="currentApp.isReady() && (currentApp.id == 'ygopro')" [app]="currentApp"></ygopro>
+
 <h2 i18n *ngIf="news && news.length">新闻</h2>
 <div id="news" *ngFor="let item of news">
     <h3>{{item.title}}</h3>
@@ -33,7 +44,6 @@
 </div>
 <div *ngIf="currentApp.isInstalled()">
     <div *ngIf="mods && mods.length">
-        <h2>扩展内容</h2>
         <table class="table table-striped">
             <thead class="thead-inverse">
             <tr>
@@ -63,6 +73,8 @@
     <button i18n type="button" class="btn btn-secondary">校验完整性</button>
     <button i18n (click)="uninstall(currentApp)" type="button" class="btn btn-secondary">卸载</button>
 </div>
+
+<!--安装modal-->
 <div class="modal fade" id="install-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" *ngIf="installConfig">
     <div class="modal-dialog" role="document">
         <form id="install-form" class="modal-content" (ngSubmit)="install(currentApp)" #theForm="ngForm">
@@ -89,7 +101,7 @@
                     <input id="create_desktop_shortcut" type="checkbox" name="desktop" [(ngModel)]="installConfig.createDesktopShortcut">
                     <label i18n for="create_desktop_shortcut">创建桌面快捷方式</label>
                 </div>
-                <h4 *ngIf="installConfig.references.length">扩展内容</h4>
+                <h4 i18n *ngIf="installConfig.references.length">扩展内容</h4>
                 <div *ngFor="let reference of installConfig.references"><label>
                     <input type="checkbox" [(ngModel)]="reference.install" name="references" value="{{reference.app.id}}"> {{reference.app.name}}
                 </label></div>

app/app.ts

@@ -62,7 +62,19 @@ export class App {
     conference: string | undefined;
 
     isInstalled(): boolean {
-        return !!this.local;
+        return this.status.status != 'init';
+    }
+
+    isReady(): boolean {
+        return this.status.status == 'ready';
+    }
+
+    isInstalling(): boolean {
+        return this.status.status == 'installing';
+    }
+
+    isWaiting(): boolean {
+        return this.status.status == 'waiting';
     }
 
     runable() {

app/lobby.component.css

@@ -46,4 +46,69 @@ span {
 
 .actions {
     margin-bottom: 1em;
+}
+
+.progress {
+    height: 1em;
+    width: 1em;
+    float: right;
+    margin: 14px;
+    position: relative;
+}
+
+.pie {
+    height: 100%;
+    width: 100%;
+    clip: rect(0, 1em, 1em, 0.5em);
+    left: 0;
+    position: absolute;
+    top: 0;
+}
+
+.half-circle {
+    height: 100%;
+    width: 100%;
+    border: 0.2em solid #3498db;
+    border-radius: 50%;
+    clip: rect(0, 0.5em, 1em, 0);
+    left: 0;
+    position: absolute;
+    top: 0;
+}
+
+.shadow {
+    height: 100%;
+    width: 100%;
+    border: 0.2em solid #bdc3c7;
+    border-radius: 50%;
+}
+
+.right-side {
+    display: none;
+}
+
+.half-circle {
+    /*border-color: #e74c3c;*/
+    border-color: rgb(0, 116, 217);
+}
+
+.left-side {
+    /*transform: rotate(1turn);*/
+    /*在前台用Angular填写*/
+}
+
+.second-half {
+    clip: rect(auto, auto, auto, auto);
+}
+
+.second-half > .right-side {
+    display: inherit;
+    transform: rotate(0.5turn);
+}
+
+.fa-spin {
+    margin: 14px;
+    color: #0275d8;
+    font-weight: bold;
+    float: right;
 }
\ No newline at end of file

app/lobby.component.html

 <!-- Begin page content -->
 <div id="main">
+
     <div id="apps" *ngIf="apps">
         <span *ngIf="grouped_apps.installed">已安装</span>
         <ul *ngIf="grouped_apps.installed" class="nav nav-sidebar">
             <li *ngFor="let app of grouped_apps.installed" [class.active]="app===currentApp">
+                <i *ngIf="!app.isReady() && !app.status.total" class="spin fa fa-circle-o-notch fa-spin fa-fw"></i>
+                <div *ngIf="!app.isReady() && app.status.total" class="progress">
+                    <div class="pie" [class.second-half]="app.status.progress/app.status.total>0.5">
+                        <div class="left-side half-circle" [style.transform]="'rotate('+(app.status.progress/app.status.total).toString()+'turn)'"></div>
+                        <div class="right-side half-circle"></div>
+                    </div>
+                    <div class="shadow"></div>
+                </div>
                 <a (click)="chooseApp(app)" href="#">{{app.name}}</a>
             </li>
         </ul>
@@ -41,4 +50,5 @@
     <app-detail *ngIf="currentApp" [currentApp]="currentApp"></app-detail>
     <roster></roster>
 </div>
+
 <webview *ngIf="currentApp" #candy id="candy" [src]="candy_url" nodeintegration></webview>

package.json

@@ -12,7 +12,7 @@
     "pack": "tsc && build --dir",
     "dist": "tsc && build",
     "tsc": "tsc",
-    "i18n": "ng-xi18n"
+    "i18n": "ng-xi18n && sed -i.bak 's/source-language=\"en\"/source-language=\"zh-CN\"/' messages.xlf"
   },
   "dependencies": {
     "@angular/common": "latest",
@@ -39,7 +39,7 @@
     "reflect-metadata": "latest",
     "rxjs": "5.0.0-beta.12",
     "systemjs": "mycard/systemjs#mycard",
-    "systemjs-plugin-text":"latest",
+    "systemjs-plugin-text": "latest",
     "tether": "latest",
     "zone.js": "^0.6.26"
   },