Skip to content

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

UI

parent 07328b74
Hide whitespace changes
Inline Side-by-side
Showing with 354 additions and 91 deletions
app/app-detail.component.css
View file @ a85894c9
:host {
/*background-color: #c3d9ff;*/
flex-grow: 1;
overflow-y: auto;
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;
}
.scroll {
padding: 1rem;
height: 100%;
}
.actions {
......
app/app-detail.component.html
View file @ a85894c9
<div class="scroll">
<h1>{{currentApp.name}}</h1>
<!--应用未安装-->
<div class="actions" *ngIf="!currentApp.isInstalled()">
......@@ -176,4 +177,5 @@
</div>
</form>
</div>
</div>
</div>
\ No newline at end of file
app/lobby.component.css
View file @ a85894c9
:host {
display: flex;
}
#right {
display: flex;
flex-direction: column;
flex-grow: 1;
}
#main {
......@@ -10,7 +14,13 @@
#candy {
background-color: #444;
height: 236px;
height: 230px;
flex-shrink: 0;
}
roster {
width: 190px;
background-color: #f7f7f9;
flex-shrink: 0;
}
......@@ -32,7 +42,10 @@
/*}*/
span {
margin-left: 8px;
margin: 12px 0 8px 8px;
color: #a7a7a7;
font-size: 14px;
display: block;
}
.actions {
......@@ -105,18 +118,14 @@ span {
}
.sidebar {
width: 240px;
width: 190px;
flex-shrink: 0;
overflow-y: auto;
background-color: #f5f5f5;
background-color: #f7f7f9;
border-right: 1px solid #eee;
padding-top: 10px;
}
/* Sidebar navigation */
.sidebar {
padding-left: 0;
padding-right: 0;
padding-top: 20px;
}
.sidebar .nav {
......@@ -133,4 +142,43 @@ span {
.sidebar .nav-link {
border-radius: 0;
}
.nav-link {
padding: .3em 1em;
color: black;
font-size: 15px;
}
.nav-link.active {
background-color: #ebf3f8;
color: #00a4d9;
}
a {
cursor: default;
}
.search {
background-color: #ebf3f8;
border: none;
}
i.search {
color: #a7a7a7;
}
input.search {
padding-left: 0;
font-size: 14px;
font-family: -apple-system, Arial, 'Source Sans Pro', "Microsoft YaHei", 'Microsoft JhengHei', "WenQuanYi Micro Hei", sans-serif;
}
input.search::-webkit-input-placeholder{
color: #a7a7a7;
}
#search {
padding: 0 10px;
}
.icon {
width: 16px;
height: 16px;
}
\ No newline at end of file
app/lobby.component.html
View file @ a85894c9
<!-- Begin page content -->
<div id="main">
<nav id="apps" *ngIf="apps" class="bg-faded sidebar">
<span i18n *ngIf="grouped_apps.installed">已安装</span>
<ul *ngIf="grouped_apps.installed" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.installed" class="nav-item">
<a (click)="chooseApp(app)" class="nav-link" [class.active]="app===currentApp" href="#">{{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>
<div class="right-side half-circle"></div>
</div>
<div class="shadow"></div>
<nav id="apps" *ngIf="apps" class="bg-faded sidebar scroll">
<div id="search" class="input-group">
<i class="fa fa-search input-group-addon search" id="basic-addon1"></i>
<input type="text" class="form-control search" placeholder="搜索游戏" aria-describedby="basic-addon1">
</div>
<span i18n *ngIf="grouped_apps.installed">已安装</span>
<ul *ngIf="grouped_apps.installed" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.installed" class="nav-item">
<a (click)="chooseApp(app)" class="nav-link" [class.active]="app===currentApp" href="#">
<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>
<div class="right-side half-circle"></div>
</div>
</a>
</li>
</ul>
<span i18n *ngIf="grouped_apps.recommend">推荐</span>
<ul *ngIf="grouped_apps.recommend" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.recommend" class="nav-item">
<a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
</li>
</ul>
<span i18n *ngIf="grouped_apps.mysterious">迷之物体</span>
<ul *ngIf="grouped_apps.mysterious" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.mysterious" class="nav-item">
<a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
</li>
</ul>
<span i18n *ngIf="grouped_apps.touhou">东方 Project</span>
<ul *ngIf="grouped_apps.touhou" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.touhou" class="nav-item">
<a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
</li>
</ul>
<span i18n *ngIf="grouped_apps.touhou_pc98">东方旧作</span>
<ul *ngIf="grouped_apps.touhou_pc98" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.touhou_pc98" class="nav-item">
<a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
</li>
</ul>
<span i18n *ngIf="grouped_apps.runtime_installed">已安装的运行库</span>
<ul *ngIf="grouped_apps.runtime_installed" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.runtime_installed" class="nav-item">
<a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
</li>
</ul>
</nav>
<div class="shadow"></div>
</div>
</a>
</li>
</ul>
<span i18n *ngIf="grouped_apps.recommend">推荐</span>
<ul *ngIf="grouped_apps.recommend" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.recommend" class="nav-item">
<a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
</li>
</ul>
<span i18n *ngIf="grouped_apps.mysterious">迷之物体</span>
<ul *ngIf="grouped_apps.mysterious" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.mysterious" class="nav-item">
<a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
</li>
</ul>
<span i18n *ngIf="grouped_apps.touhou">东方 Project</span>
<ul *ngIf="grouped_apps.touhou" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.touhou" class="nav-item">
<a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
</li>
</ul>
<span i18n *ngIf="grouped_apps.touhou_pc98">东方旧作</span>
<ul *ngIf="grouped_apps.touhou_pc98" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.touhou_pc98" class="nav-item">
<a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
</li>
</ul>
<span i18n *ngIf="grouped_apps.runtime_installed">已安装的运行库</span>
<ul *ngIf="grouped_apps.runtime_installed" class="nav nav-pills flex-column">
<li *ngFor="let app of grouped_apps.runtime_installed" class="nav-item">
<a (click)="chooseApp(app)" href="#" class="nav-link" [class.active]="app===currentApp">{{app.name}}</a>
</li>
</ul>
</nav>
<div id="right">
<div id="main">
<app-detail *ngIf="currentApp" [currentApp]="currentApp"></app-detail>
<roster></roster>
<roster class="scroll"></roster>
</div>
<webview *ngIf="currentApp" #candy id="candy" [src]="candy_url" (new-window)="openExternal($event.url)"
nodeintegration></webview>
</div>
app/mycard.component.css
View file @ a85894c9
......@@ -6,9 +6,9 @@
#avatar {
display: block;
float: left;
border-radius: 50%;
height: 2rem;
margin-top: 0.175rem;
border-radius: 10%;
height: 1.5rem;
margin-top: 0.475rem;
}
.item {
......@@ -16,9 +16,17 @@
float: left;
padding-top: .425rem;
padding-bottom: .425rem;
margin-left: 4px;
color: #eceeef;
margin: 0 0.8rem;
text-decoration: none;
color: #a7a7a7;
}
.item-icon {
color: #a7a7a7;
font-size: 18px;
margin: .6rem .3rem;
}
.item:hover, .item-icon:hover, .nav-link:hover {
color: #5e5e5e;
}
#update-status > i {
......@@ -28,10 +36,6 @@
padding-bottom: .425rem;
}
.item:hover, li > a:hover {
color: #fff;
}
a {
cursor: default;
}
......@@ -43,4 +47,35 @@ lobby[hidden], webview[hidden] {
flex: 0 1;
display: inherit !important;
overflow: hidden;
}
#navbar {
background-color: #f7f7f9!important;
padding: 0;
}
#navbar-brand {
color: #00a4d9;
font-size: 24px;
width: 190px;
margin: 0;
text-align: center;
}
#navbar .nav-link {
font-size: 18px;
color: #a7a7a7;
padding: .8rem 1.2em;
}
.nav-item.active {
background-color: white;
}
#navbar .nav-item.active .nav-link {
color: #00a4d9;
}
#border {
margin: .2rem 0.4rem;
color: #a7a7a7;
font-size: 1.2rem;
}
\ No newline at end of file
app/mycard.component.html
View file @ a85894c9
<nav id="navbar" class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
<a class="navbar-brand" href="#">MyCard</a>
<nav id="navbar" class="navbar navbar-toggleable-md navbar-light">
<a id="navbar-brand" class="navbar-brand" href="#">MyCard</a>
<ul class="navbar-nav mr-auto">
<li *ngIf="!loginService.logged_in" class="nav-item active">
<a i18n class="nav-link" href="#">登录</a>
</li>
<!--
<li [ngClass]="{active: routingService.component == 'store'}" class="nav-item">
<a (click)="changeFouce('store')" class="nav-link" href="#">商店</a>
</li>
-->
<!--<li *ngIf="loginService.logged_in" [ngClass]="{active: currentPage === 'store'}" class="nav-item">-->
<!--<a (click)="currentPage = 'store'" class="nav-link" href="#">商店</a>-->
<!--</li>-->
<li *ngIf="loginService.logged_in" [ngClass]="{active: currentPage === 'lobby'}" class="nav-item">
<a i18n (click)="currentPage='lobby'" class="nav-link" href="#">游戏</a>
</li>
......@@ -29,9 +29,10 @@
<div id="user" *ngIf="loginService.logged_in">
<a href="#" class="profile"><img id="avatar" [src]="loginService.user.avatar_url" alt="image"></a>
<a href="#" class="profile item" id="username">{{loginService.user.username}}</a>
<a i18n href="#" (click)="loginService.logout()" class="item">切换账号</a>
<a i18n href="#" data-toggle="modal" data-target="#settings-modal" class="item">设置</a>
<i (click)="loginService.logout()" class="fa fa-sign-out item-icon" aria-hidden="true"></i>
<i data-toggle="modal" data-target="#settings-modal" class="fa fa-cog item-icon" aria-hidden="true"></i>
</div>
<div id="border">|</div>
<div id="window-buttons">
<i (click)="currentWindow.minimize()" class="fa fa-minus"></i>
<i *ngIf="!currentWindow.isMaximized()" (click)="currentWindow.maximize()" class="fa fa-expand"></i>
......
app/roster.component.css
View file @ a85894c9
:host {
background-color: bisque;
display: none;
width: 250px;
}
\ No newline at end of file
candy.html
View file @ a85894c9
......@@ -4,12 +4,45 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Candy - Chats are not dead yet</title>
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="node_modules/candy/libs.min.css"/>
<link rel="stylesheet" type="text/css" href="node_modules/candy/res/default.css"/>
<style>
body {
font-family: -apple-system, Arial, 'Source Sans Pro', "Microsoft YaHei", 'Microsoft JhengHei', "WenQuanYi Micro Hei", sans-serif;
}
/* Turn on custom 8px wide scrollbar */
::-webkit-scrollbar {
width: 8px; /* 1px wider than Lion. */
/* This is more usable for users trying to click it. */
background-color: rgba(0,0,0,0);
-webkit-border-radius: 100px;
}
/* hover effect for both scrollbar area, and scrollbar 'thumb' */
::-webkit-scrollbar:active {
background-color: rgba(0, 0, 0, 0.05);
}
/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
::-webkit-scrollbar-thumb:vertical {
/* This is the EXACT color of Mac OS scrollbars.
Yes, I pulled out digital color meter */
background: rgba(0,0,0,0.1);
-webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:vertical:active {
background: rgba(0,0,0,0.2); /* Some darker color when you click it */
-webkit-border-radius: 100px;
}
.scroll {
overflow-y: hidden;
}
.scroll:hover {
overflow-y: auto;
}
</style>
<script>delete module.exports</script>
......@@ -47,6 +80,93 @@
<!--正在输入那个插件不好用-->
<!--<script type="text/javascript" src="node_modules/candy-shop/typingnotifications/typingnotifications.js"></script>-->
<!--<link rel="stylesheet" type="text/css" href="node_modules/candy-shop/typingnotifications/typingnotifications.css" />-->
<style>
.message-pane-wrapper, .message-form-wrapper {
margin-right: 190px;
}
.roster-pane, #chat-toolbar{
width: 190px
}
</style>
<style>
#candy {
background-color: #f7f7f9;
}
#chat-tabs li {
box-shadow: 0 0 1px 1px #ccc;
}
#chat-tabs a {
color: #999;
background-color: #ececec;
}
#chat-tabs .active a.label {
background-color: white;
}
#chat-tabs .active .transition, #chat-tabs .transition {
background: none;
/*background-color: white;*/
}
.message-pane-wrapper{
background-color: white;
padding: 0;
}
.message-pane li {
border-bottom: none;
box-shadow: none;
padding: 0 5px;
}
.message-pane li>div {
padding: 0 0 0 150px;
line-height: 28px;
}
.message-pane .label {
margin-left: -150px;
width: 130px;
}
.roster-pane {
background-color: initial;
border-top: none;
box-shadow: none;
margin: 30px 0 32px 0;
}
.roster-pane .user {
border-bottom: none;
box-shadow: none;
color: black;
}
.roster-pane .user:hover {
background-color: #ebf3f8;
}
#chat-toolbar {
background-color: initial;
border-top: 1px solid #eee;
box-shadow: none;
}
.message-form-wrapper {
border-top: 1px solid #eee;
}
.roster-pane .label{
text-shadow: none
}
#candy {
border-top: 1px solid #eee;
box-shadow: inset 0 1px 2px white;
}
.usercount span {
background-color: initial;
color: #a7a7a7;
}
/*#chat-toolbar #emoticons-icon, #chat-toolbar .usercount {*/
/*background-image: initial;*/
/*}*/
/*#chat-toolbar #emoticons-icon::before, #chat-toolbar .usercount::before {*/
/*font-size: 16px;*/
/*}*/
</style>
</head>
<body>
<div id="candy"></div>
......@@ -71,6 +191,7 @@
const params = new URLSearchParams(location.search);
Candy.View.Template.Login.form = '<form method="post" id="login-form" class="login-form">' + '<input type="hidden" id="nickname" name="nickname" value="' + params.get('nickname') + '"/>' + '{{#displayUsername}}<input type="hidden" id="username" name="username" value="' + params.get('jid') + '"/>' + '{{#displayDomain}} <span class="at-symbol">@</span> ' + '<select id="domain" name="domain">{{#domains}}<option value="{{domain}}">{{domain}}</option>{{/domains}}</select>' + "{{/displayDomain}}" + "{{/displayUsername}}" + '{{#presetJid}}<input type="hidden" id="username" name="username" value="{{presetJid}}"/>{{/presetJid}}' + '{{#displayPassword}}<input type="hidden" id="password" name="password" value="' + params.get('password') + '"/>{{/displayPassword}}' + '<input type="submit" class="button" value="{{_loginSubmit}}" /></form>';
// Candy.View.Template.Chat.toolbar = '<ul id="chat-toolbar">' + '<li id="emoticons-icon" class="fa fa-smile-o" data-tooltip="{{tooltipEmoticons}}"></li>' + '<li id="chat-sound-control" class="checked" data-tooltip="{{tooltipSound}}"></li>' + '<li class="checked" id="chat-statusmessage-control" data-tooltip="{{tooltipStatusmessage}}">' + '</li><li class="context" data-tooltip="{{tooltipAdministration}}"></li>' + '<li class="usercount fa fa-user-o" data-tooltip="{{tooltipUsercount}}">' + '<span id="chat-usercount"></span></li></ul>',
Candy.Util.setCookie('candy-nostatusmessages', '1', 365);
Candy.init('wss://chat.mycard.moe:5280/websocket', {
......
styles.css
View file @ a85894c9
......@@ -17,12 +17,13 @@ mycard {
}
#window-buttons > i {
color: rgba(255, 255, 255, .75);
margin: .5rem;
color: #a7a7a7;
font-size: 18px;
margin: .6rem .3rem;
}
#window-buttons > i:hover {
color: #fff;
color: #5e5e5e;
}
#navbar {
......@@ -36,11 +37,44 @@ mycard {
-webkit-app-region: no-drag;
}
#navbar-right > div, #user > .item {
#navbar-right > div {
float: left;
margin: 0 0.5rem;
margin: 0 0.3rem;
}
.darwin #navbar {
padding-left: 80px;
}
\ No newline at end of file
}
/* Turn on custom 8px wide scrollbar */
::-webkit-scrollbar {
width: 8px; /* 1px wider than Lion. */
/* This is more usable for users trying to click it. */
background-color: rgba(0,0,0,0);
-webkit-border-radius: 100px;
}
/* hover effect for both scrollbar area, and scrollbar 'thumb' */
::-webkit-scrollbar:active {
background-color: rgba(0, 0, 0, 0.05);
}
/* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
::-webkit-scrollbar-thumb:vertical {
/* This is the EXACT color of Mac OS scrollbars.
Yes, I pulled out digital color meter */
background: rgba(0,0,0,0.1);
-webkit-border-radius: 100px;
}
::-webkit-scrollbar-thumb:vertical:active {
background: rgba(0,0,0,0.2); /* Some darker color when you click it */
-webkit-border-radius: 100px;
}
.scroll {
overflow-y: hidden;
}
.scroll:hover {
overflow-y: auto;
}
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