Skip to content

M
mycard
Commit 668c1f58 authored by hjistc's avatar hjistc
Browse files
Options

ygopro ui

parent 1ec68850
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 403 additions and 119 deletions
app/app-detail.component.css
View file @ 668c1f58
......@@ -3,20 +3,22 @@
flex-grow: 1;
position: relative;
}
/*:host:before {*/
/*content: '';*/
/*background-image: url('http://vignette2.wikia.nocookie.net/touhou/images/2/2c/Th10_cover.jpg/revision/latest?cb=20071101234746');*/
/*position: absolute;*/
/*top: 0;*/
/*left: 0;*/
/*right: 0;*/
/*bottom: 0;*/
/*z-index: -1;*/
/*filter: grayscale(50%) opacity(10%);*/
/*background-repeat: no-repeat;*/
/*background-size: 100% auto;*/
/*}*/
:host:before {
content: '';
background-image: url('http://vignette2.wikia.nocookie.net/touhou/images/2/2c/Th10_cover.jpg/revision/latest?cb=20071101234746');
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
filter: grayscale(50%) opacity(10%);
background-repeat: no-repeat;
background-size: 100% auto;
}
.scroll {
padding: 1rem;
height: 100%;
......@@ -52,7 +54,6 @@ progress {
#news a {
display: block;
margin-bottom: 1rem;
}
#network {
......@@ -75,11 +76,78 @@ progress {
width: 100%;
}
.custom-file-control:lang(en)::after{
.custom-file-control:lang(en)::after {
content: initial;
}
.custom-file-control {
overflow: hidden;
white-space: nowrap;
}
h1 {
font-size: 28px;
margin-left: 1rem;
}
#status {
font-size: 15px;
}
h2 {
font-size: 20px;
margin-bottom: 0;
}
#icon {
width: 128px;
height: 128px;
}
#main {
display: flex;
flex-direction: row;
}
.panel {
border: 1px solid #eceeef;
border-radius: 6px;
background: rgba(255, 255, 255, .7);
padding: .8rem;
margin-bottom: 1rem;
position: relative;
}
#news h3 {
padding-top: .8rem;
margin-bottom: 0;
font-size: 1rem;
}
#news p {
font-size: 14px;
color: #888;
}
#news a {
font-size: 14px;
color: #00a4d9;
}
#news span {
font-size: 12px;
color: #ccc;
}
.moreinfo {
color: #00a4d9;
display: block;
position: absolute;
top: 12px;
right: 18px;
font-size: 14px;
}
#local h2 {
margin-bottom: .8rem;
}
\ No newline at end of file
app/app-detail.component.html
View file @ 668c1f58
<div class="scroll">
<h1>{{currentApp.name}}</h1>
<!--应用未安装-->
<div class="actions" *ngIf="!currentApp.isInstalled()">
<button i18n (click)="updateInstallOption(currentApp)" type="button" class="btn btn-primary" data-toggle="modal" data-target="#install-modal">安装</button>
<button i18n *ngIf="currentApp.runnable()" (click)="updateInstallOption(currentApp)" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#import-modal">导入</button>
</div>
<!--应用变更中-->
<div class="actions" *ngIf="currentApp.isInstalled() && !currentApp.isReady()">
<div>
<span i18n *ngIf="currentApp.isDownloading()">正在下载</span>
<span i18n *ngIf="currentApp.isInstalling()">正在安装...</span>
<span i18n *ngIf="currentApp.isUninstalling()">正在卸载...</span>
<span i18n *ngIf="currentApp.isWaiting()">等待安装...</span>
<span i18n *ngIf="currentApp.isUpdating()">正在更新...</span>
<span *ngIf="currentApp.status.total">{{(currentApp.status.progress/currentApp.status.total * 100).toFixed()}}%</span>
<span>{{currentApp.progressMessage()}}</span>
</div>
<progress class="progress" [class.progress-striped]="!currentApp.status.total" [class.progress-animated]="!currentApp.status.total" value="{{currentApp.status.total ? currentApp.status.progress : 1}}" max="{{currentApp.status.total}}"></progress>
</div>
<ygopro *ngIf="currentApp.isReady() && (currentApp.id == 'ygopro')" [app]="currentApp" [currentApp]="currentApp"></ygopro>
<!--应用ready-->
<div class="actions" *ngIf="currentApp.isReady() && (currentApp.id != 'ygopro')">
<button i18n *ngIf="currentApp.runnable()" (click)="runApp(currentApp)" [disabled]="!appsService.allReady(currentApp)" type="button" class="btn btn-primary">运行</button>
<button i18n *ngIf="currentApp.runnable() && currentApp.actions.get('custom')" [disabled]="!appsService.allReady(currentApp)" (click)="custom(currentApp)" type="button" class="btn btn-secondary">设置</button>
<div id="network" *ngIf="currentApp.network && currentApp.network.protocol == 'maotama'">
<div class="input-group">
<input *ngIf="appsService.connections.get(currentApp)" [value]="appsService.connections.get(currentApp).address || 'Loading...'" readonly type="text" class="form-control" title="address">
<div class="input-group-btn" style="flex-direction: row">
<button i18n *ngIf="!appsService.connections.get(currentApp)" [disabled]="!appsService.allReady(currentApp)" (click)="appsService.network(currentApp, currentApp.network.servers[0])" type="button" class="btn btn-secondary">联机</button>
<button i18n *ngIf="appsService.connections.get(currentApp)" (click)="copy(appsService.connections.get(currentApp).address)" [disabled]="!appsService.connections.get(currentApp).address" type="button" class="btn btn-secondary">复制</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" style="height: 38px;"></button>
<div class="dropdown-menu" [class.dropdown-menu-right]="appsService.connections.get(currentApp)">
<h6 i18n class="dropdown-header">选择服务器</h6>
<a *ngFor="let server of currentApp.network.servers" (click)="appsService.network(currentApp, server)" class="dropdown-item" href="#">{{server.id}}</a>
<div *ngIf="appsService.connections.get(currentApp)" class="dropdown-divider"></div>
<a i18n *ngIf="appsService.connections.get(currentApp)" (click)="appsService.connections.get(currentApp).connection.close()" class="dropdown-item" href="#">取消</a>
</div>
</div>
<div class="panel panel-default">
<h2 i18n *ngIf="news && news.length">新闻</h2>
<div id="news" *ngFor="let item of news">
<h3>{{item.title}}</h3>
<span>2017-01-18</span>
<p>{{item.text}}</p>
<a i18n *ngIf="item.url" [href]="item.url" target="_blank">了解更多</a>
</div>
<a href="https://mycard.moe/ygopro/arena/" target="_blank" class="moreinfo">查看所有新闻</a>
</div>
</div>
<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>
<p>{{item.text}}</p>
<a i18n *ngIf="item.url" [href]="item.url" target="_blank">了解更多</a>
</div>
<div *ngIf="currentApp.isReady()">
<div *ngIf="currentApp.isReady()">
<div *ngIf="mods && mods.length">
<table class="table table-striped">
<thead class="thead-inverse">
......@@ -78,10 +42,19 @@
</tbody>
</table>
</div>
<h2 i18n>本地文件</h2>
<button i18n (click)="appsService.browse(currentApp)" [disabled]="!appsService.allReady(currentApp)" type="button" class="btn btn-secondary">浏览本地文件</button>
<button i18n type="button" (click)="verifyFiles(currentApp)" [disabled]="!appsService.allReady(currentApp)" class="btn btn-secondary">校验完整性</button>
<button i18n (click)="uninstall(currentApp)" [disabled]="!appsService.allReady(currentApp)" type="button" class="btn btn-secondary">卸载</button>
<div class="panel panel-default" id="local">
<h2 i18n>本地文件</h2>
<div>
<button i18n (click)="appsService.browse(currentApp)" [disabled]="!appsService.allReady(currentApp)" type="button" class="btn btn-secondary btn-sm">浏览本地文件</button>
<button i18n type="button" (click)="verifyFiles(currentApp)" [disabled]="!appsService.allReady(currentApp)" class="btn btn-secondary btn-sm">校验完整性</button>
<button i18n (click)="uninstall(currentApp)" [disabled]="!appsService.allReady(currentApp)" type="button" class="btn btn-secondary btn-sm">卸载</button>
</div>
</div>
</div>
<!--安装modal-->
......
app/lobby.component.html
View file @ 668c1f58
......@@ -11,7 +11,8 @@
<ul *ngIf="grouped_apps.installed" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.installed" class="nav-item">
<a (click)="$event.preventDefault(); chooseApp(app)" class="nav-link" [class.active]="app===currentApp" [href]="'https://mycard.moe/' + app.id">
<!--<img class="icon" src="https://lh3.googleusercontent.com/-crYEtoQ-4Ho/AAAAAAAAAAI/AAAAAAAAAAA/AKB_U8u0CDmxkVqQgOKesrJIb-6eiXacgA/s32-c-mo/photo.jpg">-->{{app.name}}<i *ngIf="!app.isReady() && !app.status.total" class="spin fa fa-circle-o-notch fa-spin fa-fw"></i>
<img class="icon" src="https://lh3.googleusercontent.com/-crYEtoQ-4Ho/AAAAAAAAAAI/AAAAAAAAAAA/AKB_U8u0CDmxkVqQgOKesrJIb-6eiXacgA/s32-c-mo/photo.jpg">
{{app.name}}<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>
......
app/roster.component.css
View file @ 668c1f58
:host {
display: none;
}
\ No newline at end of file
/*:host {*/
/*display: none;*/
/*}*/
\ No newline at end of file
app/ygopro.component.css
View file @ 668c1f58
......@@ -87,4 +87,130 @@ dl {
.modal-dialog {
max-width: 600px;
}
label {
font-size: 15px;
}
h2 {
font-size: 20px;
}
dt, dd {
font-size: 14px;
}
.panel {
border: 1px solid #eceeef;
border-radius: 6px;
background: rgba(255,255,255,.7);
padding: .8rem;
margin-bottom: 1rem;
}
table {
margin-bottom: 0;
}
table th, table td {
border-top: none;
font-size: 14px;
font-weight: normal;
}
/*.table-curved {*/
/*border-collapse: separate;*/
/*border: solid #ccc 1px;*/
/*border-radius: 6px;*/
/*border-left: 0px;*/
/*border-top: 0px;*/
/*}*/
/*.table-curved > thead:first-child > tr:first-child > th {*/
/*border-bottom: 0px;*/
/*border-top: solid #ccc 1px;*/
/*}*/
/*.table-curved td, .table-curved th {*/
/*border-left: 1px solid #ccc;*/
/*border-top: 1px solid #ccc;*/
/*}*/
/*.table-curved > :first-child > :first-child > :first-child {*/
/*border-radius: 6px 0 0 0;*/
/*}*/
/*.table-curved > :first-child > :first-child > :last-child {*/
/*border-radius: 0 6px 0 0;*/
/*}*/
/*.table-curved > :last-child > :last-child > :first-child {*/
/*border-radius: 0 0 0 6px;*/
/*}*/
/*.table-curved > :last-child > :last-child > :last-child {*/
/*border-radius: 0 0 6px 0;*/
/*}*/
#icon {
width: 128px;
height: 128px;
box-shadow: 0 0 4px #ccc;
}
#main {
display: flex;
flex-direction: row;
}
.panel {
border: 1px solid #eceeef;
border-radius: 6px;
background: rgba(255,255,255,.7);
padding: .8rem;
margin-bottom: 1rem;
position: relative;
}
#right {
margin-left: 1rem;
}
h1 {
font-size: 28px;
margin-bottom: 0;
}
#time {
font-size: 14px;
margin-bottom: .6rem;
}
#action {
margin-bottom: .5rem;
}
form {
margin-bottom: 0;
}
.btn-primary {
background-color: #00a4d9;
border-color: #008dbb;
}
th {
width: 25%;
}
.moreinfo {
color: #00a4d9;
display: block;
position: absolute;
top: 12px;
right: 18px;
font-size: 14px;
}
#arena {
position: relative;
}
select {
margin-right: 0 !important;
}
\ No newline at end of file
app/ygopro.component.html
View file @ 668c1f58
This diff is collapsed.
app/ygopro.component.ts
View file @ 668c1f58
......@@ -100,6 +100,8 @@ let matching_arena: string | undefined;
export class YGOProComponent implements OnInit {
@Input()
app: App;
@Input()
currentApp: App;
decks: string[] = [];
current_deck: string;
system_conf: string;
......
locale/messages.en-US.xlf
View file @ 668c1f58
......@@ -263,7 +263,7 @@
</trans-unit>
<trans-unit datatype="html" id="86738bd5d32223ffbb690a7c71360ddf8e7b1b2e">
<source>竞技匹配</source>
<target>Ranked Match</target>
<target>Ranked</target>
</trans-unit>
<trans-unit datatype="html" id="37869c115276c5df476f1f5aae75c099ffb35b59">
......@@ -273,7 +273,7 @@
</trans-unit>
<trans-unit datatype="html" id="0bf938a69dc640aba46428d1cbbd2fef34c88daa">
<source>娱乐匹配</source>
<target>Unranked Match</target>
<target>Unranked</target>
</trans-unit>
<trans-unit datatype="html" id="19923836b1ae79614782426a7a001d8ccfa27b5c">
......@@ -283,7 +283,7 @@
</trans-unit>
<trans-unit datatype="html" id="c54a3c40a2766446dd03b0af75f64055aa404855">
<source>房间列表</source>
<target>Game List</target>
<target>Custom Game</target>
</trans-unit>
<trans-unit datatype="html" id="3768b60a7e2625bb1fc2db37eb8c6b8e4bd99101">
......
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