mirror of
https://github.com/zhigang1992/deployd.git
synced 2026-05-30 01:47:22 +08:00
Implemented new UI styles to dashboard, refactored settings model further.
This commit is contained in:
Jeff Cross
5
.gitignore
vendored
5
.gitignore
vendored
@@ -2,4 +2,7 @@
|
||||
lib-cov
|
||||
|
||||
# dev testing
|
||||
bin/test
|
||||
bin/test
|
||||
|
||||
.DS_Store
|
||||
.sass-cache/
|
||||
|
||||
34
public/dashboard/css/app.css
Normal file
34
public/dashboard/css/app.css
Normal file
@@ -0,0 +1,34 @@
|
||||
/* top */
|
||||
#nav {
|
||||
background: #222;
|
||||
border-bottom: solid 4px #00A5FF;
|
||||
padding: 11px 20px 13px 20px;
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#nav h1 {font-size: 18px; margin: 0; padding: 0; color: #fff;}
|
||||
#nav a {font-size: 14px; line-height: 14px; padding-right: 10px; color: #fff;}
|
||||
#nav .button {padding: 5px 20px 6px}
|
||||
|
||||
#menu {}
|
||||
#menu .active {color: #000; font-weight: bold}
|
||||
#menu .links a {display: block}
|
||||
div.panel {margin: 0 0 18px 0; padding: 20px; box-shadow: none; border: solid 1px #e8e8e8;}
|
||||
|
||||
#bread h4 {color: #ccc;}
|
||||
#bread a {color: #000;}
|
||||
|
||||
/* global */
|
||||
h6 {font-weight: bold;}
|
||||
fieldset {background: #ececec;}
|
||||
|
||||
/* tabs */
|
||||
dl.tabs dd a {color: #777; font-weight: bold}
|
||||
.tabs .active {color: #000;}
|
||||
|
||||
/* user */
|
||||
.description input {display: inline; width: 114px}
|
||||
.description div.custom.dropdown {top: -2px;}
|
||||
.roles input {width: 274px}
|
||||
.search {width: 99% !important} /* breaks on mobile */
|
||||
@@ -1,149 +1,4 @@
|
||||
@import url(normalize.css);
|
||||
/* Gray theme */
|
||||
/*
|
||||
$body-color: #222;
|
||||
$base-color: #222;
|
||||
$contrast-color: #eee;
|
||||
$content-header-color: #ccc;
|
||||
$content-area-color: #fff;
|
||||
$button-base-color: #4c4c4c;
|
||||
|
||||
$text-prominent-color: $base-color;
|
||||
$text-subtle-color: #999;
|
||||
|
||||
$tab-color: #999;
|
||||
$tab-active-color: $content-area-color;
|
||||
$tab-font-color: $base-color;
|
||||
$tab-active-font-color: $base-color;*/
|
||||
/* Blue Theme */
|
||||
body {
|
||||
background-color: #eeeeee;
|
||||
font-family: Helvetica, Arial, sans-serif; }
|
||||
|
||||
header.top-level {
|
||||
zoom: 1;
|
||||
background-color: #eeeeee;
|
||||
color: #003366;
|
||||
height: 50px; }
|
||||
header.top-level:before, header.top-level:after {
|
||||
content: "";
|
||||
display: table; }
|
||||
header.top-level:after {
|
||||
clear: both; }
|
||||
header.top-level h1 {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
line-height: 50px;
|
||||
margin: 0 20px; }
|
||||
header.top-level a {
|
||||
color: #003366;
|
||||
text-decoration: none; }
|
||||
header.top-level a.sign-out {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 30px;
|
||||
padding: 10px 20px; }
|
||||
|
||||
.app-admin {
|
||||
zoom: 1;
|
||||
margin: auto; }
|
||||
.app-admin:before, .app-admin:after {
|
||||
content: "";
|
||||
display: table; }
|
||||
.app-admin:after {
|
||||
clear: both; }
|
||||
|
||||
.app-admin ul#appNav {
|
||||
margin: 0;
|
||||
width: 20%;
|
||||
float: left; }
|
||||
.app-admin ul#appNav, .app-admin ul#appNav ul {
|
||||
list-style-type: none;
|
||||
padding: 0; }
|
||||
.app-admin ul#appNav > li {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
clear: right;
|
||||
float: right; }
|
||||
.app-admin ul#appNav > li.active > a, .app-admin ul#appNav > li > a:hover {
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0077b3), color-stop(1, #005580));
|
||||
background-image: -moz-linear-gradient(center bottom, #0077b3 0%, #005580 76%); }
|
||||
.app-admin ul#appNav > li > a {
|
||||
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #005580), color-stop(1, #0077b3));
|
||||
background-image: -moz-linear-gradient(center bottom, #005580 0%, #0077b3 76%);
|
||||
display: block;
|
||||
border-bottom: 1px solid #00111a;
|
||||
color: #eeeeee;
|
||||
line-height: 50px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-decoration: none; }
|
||||
.app-admin ul#appNav > li > ul {
|
||||
background-color: #006699;
|
||||
padding: 16px; }
|
||||
.app-admin ul#appNav > li > ul li {
|
||||
margin-bottom: 6px;
|
||||
height: 18px; }
|
||||
.app-admin ul#appNav > li > ul li a {
|
||||
text-decoration: none;
|
||||
color: #eeeeee;
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
padding: 0 7px;
|
||||
font-size: 12px; }
|
||||
.app-admin ul#appNav > li > ul li.active a, .app-admin ul#appNav > li > ul li:hover a {
|
||||
font-weight: bold;
|
||||
-webkit-border-radius: 9px;
|
||||
-moz-border-radius: 9px;
|
||||
border-radius: 9px;
|
||||
background-color: #eeeeee;
|
||||
color: #003366; }
|
||||
|
||||
.app-admin div#content {
|
||||
float: left;
|
||||
width: 80%;
|
||||
min-height: 900px;
|
||||
background-color: white; }
|
||||
.app-admin div#content header {
|
||||
height: 100px;
|
||||
background-color: #ccddee; }
|
||||
.app-admin div#content header h2 {
|
||||
color: #99aabb;
|
||||
margin: 0 15px;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
font-size: 30px; }
|
||||
.app-admin div#content header h2 em {
|
||||
font-style: normal;
|
||||
color: #003366; }
|
||||
.app-admin div#content header ul {
|
||||
list-style-type: none;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-left: 9px; }
|
||||
.app-admin div#content header ul li {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
height: 30px; }
|
||||
.app-admin div#content header ul li a {
|
||||
background-color: #006699;
|
||||
display: block;
|
||||
padding: 0 8px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 30px; }
|
||||
.app-admin div#content header ul li.active a, .app-admin div#content header ul li a:hover {
|
||||
background-color: white;
|
||||
color: #003366; }
|
||||
.app-admin div#content header ul li.active a {
|
||||
font-weight: bold; }
|
||||
.app-admin div#content .substance {
|
||||
padding: 15px; }
|
||||
@import url(foundation.css);
|
||||
@import url(ie.css);
|
||||
@import url(app.css);
|
||||
|
||||
@@ -1,37 +1,7 @@
|
||||
@import "normalize.css";
|
||||
//Colors
|
||||
/* Gray theme */
|
||||
/*
|
||||
$body-color: #222;
|
||||
$base-color: #222;
|
||||
$contrast-color: #eee;
|
||||
$content-header-color: #ccc;
|
||||
$content-area-color: #fff;
|
||||
$button-base-color: #4c4c4c;
|
||||
|
||||
$text-prominent-color: $base-color;
|
||||
$text-subtle-color: #999;
|
||||
|
||||
$tab-color: #999;
|
||||
$tab-active-color: $content-area-color;
|
||||
$tab-font-color: $base-color;
|
||||
$tab-active-font-color: $base-color;*/
|
||||
|
||||
/* Blue Theme */
|
||||
$body-color: #eee;
|
||||
$base-color: #036;
|
||||
$contrast-color: #eee;
|
||||
$content-header-color: #cde;
|
||||
$content-area-color: #fff;
|
||||
$button-base-color: #069;
|
||||
|
||||
$text-prominent-color: $base-color;
|
||||
$text-subtle-color: #9ab;
|
||||
|
||||
$tab-color: #069;
|
||||
$tab-active-color: $content-area-color;
|
||||
$tab-font-color: #fff;
|
||||
$tab-active-font-color: $base-color;
|
||||
@import "foundation.css";
|
||||
@import "ie.css";
|
||||
@import "app.css";
|
||||
|
||||
@mixin clearfix {
|
||||
&:before, &:after { content: ""; display: table; }
|
||||
@@ -76,149 +46,4 @@ $tab-active-font-color: $base-color;
|
||||
-webkit-box-shadow: $hor $vert $blur $spread $color;
|
||||
-moz-box-shadow: $hor $vert $blur $spread $color;
|
||||
box-shadow: $hor $vert $blur $spread $color;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
background-color: $body-color;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
header.top-level {
|
||||
@include clearfix;
|
||||
background-color: $contrast-color;
|
||||
color: $base-color;
|
||||
height: 50px;
|
||||
h1 {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
line-height: 50px;
|
||||
margin:0 20px;
|
||||
}
|
||||
a {
|
||||
color: $base-color;
|
||||
text-decoration: none;
|
||||
&.sign-out {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 30px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.app-admin {
|
||||
@include clearfix;
|
||||
margin: auto;
|
||||
}
|
||||
.app-admin ul#appNav {
|
||||
margin: 0;
|
||||
width: 20%;
|
||||
float: left;
|
||||
&, ul {
|
||||
list-style-type: none;
|
||||
padding:0;
|
||||
}
|
||||
& > li {
|
||||
display:block;
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
clear: right;
|
||||
float: right;
|
||||
&.active > a, & > a:hover {
|
||||
@include background-gradient(darken($button-base-color, 5%), lighten($button-base-color, 5%));
|
||||
}
|
||||
& > a {
|
||||
@include background-gradient(lighten($button-base-color, 5%), darken($button-base-color, 5%));
|
||||
display: block;
|
||||
border-bottom: 1px solid darken($button-base-color, 25%);
|
||||
color: $contrast-color;
|
||||
line-height: 50px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
& > ul {
|
||||
background-color: $button-base-color;
|
||||
padding: 16px;
|
||||
li {
|
||||
margin-bottom: 6px;
|
||||
height: 18px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $contrast-color;
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
padding: 0 7px;
|
||||
font-size: 12px;
|
||||
|
||||
}
|
||||
&.active a, &:hover a {
|
||||
font-weight: bold;
|
||||
@include border-radius(9px);
|
||||
background-color: $contrast-color;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-admin div#content {
|
||||
float:left;
|
||||
width:80%;
|
||||
min-height: 900px;
|
||||
background-color: $content-area-color;
|
||||
header {
|
||||
height: 100px;
|
||||
background-color: $content-header-color;
|
||||
h2 {
|
||||
color: $text-subtle-color;
|
||||
margin:0 15px;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
font-size:30px;
|
||||
em {
|
||||
font-style: normal;
|
||||
color: $text-prominent-color ;
|
||||
}
|
||||
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
height: 30px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-left: 9px;
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
height: 30px;
|
||||
|
||||
a {
|
||||
background-color: $tab-color;
|
||||
display:block;
|
||||
padding:0 8px;
|
||||
color: $tab-font-color;
|
||||
text-decoration:none;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
}
|
||||
&.active a, a:hover {
|
||||
background-color: $tab-active-color;
|
||||
color: $tab-active-font-color;
|
||||
}
|
||||
&.active a {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
& .substance {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
1060
public/dashboard/css/foundation.css
vendored
Normal file
1060
public/dashboard/css/foundation.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
3
public/dashboard/css/ie.css
Normal file
3
public/dashboard/css/ie.css
Normal file
@@ -0,0 +1,3 @@
|
||||
/* This is for all IE specfific style less than IE9. We hate IE. */
|
||||
|
||||
div.panel { border: 1px solid #ccc; }
|
||||
BIN
public/dashboard/images/.DS_Store
vendored
Normal file
BIN
public/dashboard/images/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
public/dashboard/images/misc/button-gloss.png
Normal file
BIN
public/dashboard/images/misc/button-gloss.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 B |
BIN
public/dashboard/images/misc/button-overlay.png
Normal file
BIN
public/dashboard/images/misc/button-overlay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 141 B |
BIN
public/dashboard/images/misc/custom-form-sprites.png
Normal file
BIN
public/dashboard/images/misc/custom-form-sprites.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
public/dashboard/images/misc/input-bg.png
Normal file
BIN
public/dashboard/images/misc/input-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
public/dashboard/images/misc/modal-gloss.png
Normal file
BIN
public/dashboard/images/misc/modal-gloss.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
public/dashboard/images/misc/table-sorter.png
Normal file
BIN
public/dashboard/images/misc/table-sorter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
public/dashboard/images/orbit/bullets.jpg
Normal file
BIN
public/dashboard/images/orbit/bullets.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 657 B |
BIN
public/dashboard/images/orbit/left-arrow.png
Normal file
BIN
public/dashboard/images/orbit/left-arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 679 B |
BIN
public/dashboard/images/orbit/loading.gif
Normal file
BIN
public/dashboard/images/orbit/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
public/dashboard/images/orbit/mask-black.png
Normal file
BIN
public/dashboard/images/orbit/mask-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 705 B |
BIN
public/dashboard/images/orbit/pause-black.png
Normal file
BIN
public/dashboard/images/orbit/pause-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 330 B |
BIN
public/dashboard/images/orbit/right-arrow.png
Normal file
BIN
public/dashboard/images/orbit/right-arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 664 B |
BIN
public/dashboard/images/orbit/rotator-black.png
Normal file
BIN
public/dashboard/images/orbit/rotator-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 733 B |
BIN
public/dashboard/images/orbit/timer-black.png
Normal file
BIN
public/dashboard/images/orbit/timer-black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 705 B |
@@ -7,11 +7,261 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="top-level">
|
||||
<h1>MyApp Dashboard</h1>
|
||||
<a href="#" class="sign-out">sign out</a>
|
||||
</header>
|
||||
<section class="app-admin">
|
||||
<div id="nav">
|
||||
<div class="row">
|
||||
<div class="three columns">
|
||||
<h1>Deployd</h1>
|
||||
</div>
|
||||
<div class="nine columns">
|
||||
<strong class="right">
|
||||
<a href="">Settings</a>
|
||||
<a href="">Your Account</a>
|
||||
<a href="">Your Apps</a>
|
||||
<a href="">Docs</a>
|
||||
<a href="">Plugins</a>
|
||||
<a href="" class="small radius nice blue button">New App</a>
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- container -->
|
||||
<div class="container">
|
||||
|
||||
<div id="bread" class="row">
|
||||
<div class="twelve columns">
|
||||
<h4>
|
||||
<a href="" id="app-name">My App</a>
|
||||
>
|
||||
<a href="" id="current-page">Users</a>
|
||||
</h4>
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div id="menu" class="three columns">
|
||||
<div class="panel">
|
||||
<h5>Plugins</h5>
|
||||
<div class="links">
|
||||
<a href="" class="active">Users</a>
|
||||
<a href="">Settings</a>
|
||||
<a href="">Graph</a>
|
||||
<a href="">Logs</a>
|
||||
<a href="">Analytics</a>
|
||||
<a href="">Email</a>
|
||||
<a href="">Notifications</a>
|
||||
<a href="">Facebook</a>
|
||||
<a href="">Twitter</a>
|
||||
<hr />
|
||||
<a href="">My Custom Plugin</a>
|
||||
<a href="">My Testing Plugin</a>
|
||||
<a href="">SEO Meta</a>
|
||||
</div>
|
||||
<hr />
|
||||
<p>Browse the <a href="">plugin library</a> for useful add-ons or use our plugin generator to quickly build your own.</p>
|
||||
<a href="" class="small radius nice blue button">Create New Plugin</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nine columns">
|
||||
<dl class="tabs">
|
||||
<dd><a href="#simple1" class="active">Settings</a></dd>
|
||||
<dd><a href="#simple2">Search Users</a></dd>
|
||||
</dl>
|
||||
|
||||
<ul class="tabs-content" id="content">
|
||||
<li class="active" id="simple1Tab">
|
||||
<div class="row">
|
||||
<div class="six columns">
|
||||
<div class="panel">
|
||||
<h6>User Description</h6>
|
||||
<hr />
|
||||
<form class="description nice custom">
|
||||
<fieldset>
|
||||
<input class="input-text" type="text" value="email">
|
||||
<span>is a</span>
|
||||
<select>
|
||||
<option>string</option>
|
||||
<option SELECTED>email</option>
|
||||
<option>password</option>
|
||||
<option>boolean</option>
|
||||
<option>binary</option>
|
||||
</select>
|
||||
<label for="unique1">
|
||||
<input type="checkbox" id="unique1" style="display: none;">
|
||||
<span class="custom checkbox"></span> unique in this collection
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<input class="input-text" type="text" value="password">
|
||||
<span>is a</span>
|
||||
<select>
|
||||
<option>string</option>
|
||||
<option>email</option>
|
||||
<option SELECTED>password</option>
|
||||
<option>boolean</option>
|
||||
<option>binary</option>
|
||||
</select>
|
||||
<label for="unique1">
|
||||
<input type="checkbox" id="unique1" style="display: none;">
|
||||
<span class="custom checkbox"></span> unique in this collection
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<input class="input-text" type="text" value="name">
|
||||
<span>is a</span>
|
||||
<select>
|
||||
<option SELECTED>string</option>
|
||||
<option>email</option>
|
||||
<option>password</option>
|
||||
<option>boolean</option>
|
||||
<option>binary</option>
|
||||
</select>
|
||||
<label for="unique1">
|
||||
<input type="checkbox" id="unique1" style="display: none;">
|
||||
<span class="custom checkbox"></span> unique in this collection
|
||||
</label>
|
||||
</fieldset>
|
||||
<a href="#" class="nice small radius blue button">Add New Property</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="six columns">
|
||||
<div class="panel">
|
||||
<h6>User Groups</h6>
|
||||
<hr />
|
||||
<form class="roles nice custom">
|
||||
<fieldset>
|
||||
<input class="input-text" type="text" placeholder="Group Name" value="Authors">
|
||||
<input class="input-text" type="text" placeholder="Group Name" value="Editors">
|
||||
<input class="input-text" type="text" placeholder="Group Name" value="Banned">
|
||||
<input class="input-text" type="text" placeholder="New Group Name">
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="twelve columns">
|
||||
<div class="panel">
|
||||
<h6>User Permissions</h6>
|
||||
<hr />
|
||||
<form class="description nice custom">
|
||||
<fieldset>
|
||||
<input class="input-text" type="text" value="email">
|
||||
<span>can be <strong>seen</strong> by</span>
|
||||
<select>
|
||||
<option>You</option>
|
||||
<option>Authors</option>
|
||||
<option>Editors</option>
|
||||
<option SELECTED>Everyone</option>
|
||||
</select>
|
||||
<span> and is <strong>editable</strong> by</span>
|
||||
<select>
|
||||
<option>You</option>
|
||||
<option>Authors</option>
|
||||
<option>Editors</option>
|
||||
<option>Everyone</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<input class="input-text" type="text" value="password">
|
||||
<span>is <strong>encrypted</strong> and cannot be changed by anyone but the user.</span>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<input class="input-text" type="text" value="name">
|
||||
<span>can be <strong>seen</strong> by</span>
|
||||
<select>
|
||||
<option>You</option>
|
||||
<option>Authors</option>
|
||||
<option>Editors</option>
|
||||
<option SELECTED>Everyone</option>
|
||||
</select>
|
||||
<span> and is <strong>editable</strong> by</span>
|
||||
<select>
|
||||
<option>You</option>
|
||||
<option>Authors</option>
|
||||
<option>Editors</option>
|
||||
<option>Everyone</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<select>
|
||||
<option>You</option>
|
||||
<option>Authors</option>
|
||||
<option>Editors</option>
|
||||
<option SELECTED>Everyone</option>
|
||||
<option SELECTED>Its creator</option>
|
||||
</select>
|
||||
<span> can <strong>delete</strong> this.</span>
|
||||
</fieldset>
|
||||
<a href="#" class="nice small radius blue button">Add New Property</a>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li id="simple2Tab">
|
||||
<form class="nice">
|
||||
<input class="large input-text search" type="text" placeholder="Search Users" />
|
||||
</form>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Email</th>
|
||||
<th>Name</th>
|
||||
<th>Password</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>skawful@gmail.com</td>
|
||||
<td>Ritchie Martori</td>
|
||||
<td class="password">encrypted</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>bob@gmail.com</td>
|
||||
<td>Bob Joeson</td>
|
||||
<td class="password">encrypted</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>dood@gmail.com</td>
|
||||
<td>Guy Man</td>
|
||||
<td class="password">encrypted</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<ul class="pagination">
|
||||
<li class="unavailable"><a href="">«</a></li>
|
||||
<li class="current"><a href="">1</a></li>
|
||||
<li><a href="">2</a></li>
|
||||
<li><a href="">3</a></li>
|
||||
<li><a href="">4</a></li>
|
||||
<li class="unavailable"><a href="">…</a></li>
|
||||
<li><a href="">12</a></li>
|
||||
<li><a href="">13</a></li>
|
||||
<li><a href="">»</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="simple3Tab">
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- container -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--<section class="app-admin">
|
||||
<ul role="navigation" id="appNav">
|
||||
<li><a href="#/">Config</a></li>
|
||||
<li><a href="#/plugins">Plugins</a>
|
||||
@@ -22,13 +272,21 @@
|
||||
<li><a href="#/models">Models</a></li>
|
||||
</ul>
|
||||
<div id="content"><strong>Loading...</strong></div>
|
||||
</section>
|
||||
</section>-->
|
||||
|
||||
<!-- PARTIAL TEMPLATES -->
|
||||
|
||||
<script id="nav-item-template" type="html/template">
|
||||
<% _.each(plugins, function (value, key, list) { %>
|
||||
<a href="/dashboard/#/plugins/<%= key %>"> <%= key %> </a>
|
||||
<%}); %>
|
||||
</script>
|
||||
|
||||
|
||||
<script id="app-detail-template" type="html/template">
|
||||
<div>App Name: <%= name %></div>
|
||||
</script>
|
||||
|
||||
<script id="app-nav-template" type="html/template">
|
||||
<li><a href="#/">Config</a></li>
|
||||
<li><a href="#/plugins">Plugins</a>
|
||||
@@ -151,6 +409,7 @@
|
||||
.script(l + 'backbone.js')
|
||||
.script(l + 'json.min.js')
|
||||
.script(l + 'jquery.cookie.js')
|
||||
.script(l + 'foundation.js')
|
||||
// model
|
||||
.script(m + 'app.js')
|
||||
.script(m + 'list.js')
|
||||
|
||||
948
public/dashboard/js/libs/foundation.js
vendored
Normal file
948
public/dashboard/js/libs/foundation.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -1,23 +1,33 @@
|
||||
window.Settings = Backbone.Model.extend({
|
||||
url: "/settings",
|
||||
parse: function (response) {
|
||||
var plugins = {}, app = [];
|
||||
var plugins, app = [];
|
||||
|
||||
//First generate the plugins hash
|
||||
_.each(response, function (item) {
|
||||
if (typeof item !== "undefined"
|
||||
&& typeof item.plugin !== "undefined"
|
||||
&& typeof item.name !== "undefined") {
|
||||
if (typeof plugins[item.plugin] === "undefined") {
|
||||
plugins[item.plugin] = [];
|
||||
}
|
||||
plugins[item.plugin].push(item);
|
||||
}
|
||||
else if (item.app) {
|
||||
//TODO: parse app settings as well
|
||||
}
|
||||
plugins = _.groupBy(response, function(obj) {
|
||||
return obj.plugin;
|
||||
});
|
||||
|
||||
delete plugins["undefined"];
|
||||
|
||||
|
||||
/*
|
||||
Model should look like...
|
||||
{
|
||||
plugins: [
|
||||
{
|
||||
name: "graph",
|
||||
_id: 123,
|
||||
settings: [
|
||||
{
|
||||
name: "whatever",
|
||||
_id: 234,
|
||||
...
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
*/
|
||||
|
||||
return { plugins: plugins, app: app };
|
||||
}
|
||||
});
|
||||
@@ -19,29 +19,13 @@ var Router = Backbone.Router.extend({
|
||||
Backbone.emulateHTTP = true;
|
||||
dashboard = new Dashboard();
|
||||
this.stage = new DashboardView({model: dashboard, el: $('#content')});
|
||||
|
||||
window.plugins = new Plugins;
|
||||
plugins.fetch({
|
||||
success: loader.loaded
|
||||
});
|
||||
window.models = new Models;
|
||||
models.fetch({
|
||||
success: loader.loaded
|
||||
});
|
||||
window.appNav = new Backbone.Model({plugins: plugins, models: models});
|
||||
this.appNavView = new AppNavView({model: appNav, el: $('#appNav')});
|
||||
this.appNavView.render();
|
||||
plugins.bind("all",function () {
|
||||
this.appNavView.render();
|
||||
}, this);
|
||||
models.bind("all",function () {
|
||||
this.appNavView.render();
|
||||
}, this);
|
||||
|
||||
var settings = new Settings();
|
||||
settings.fetch({
|
||||
success: function (model, response) {
|
||||
console.log(model.toJSON());
|
||||
var navTemplate = _.template($("#nav-item-template").html());
|
||||
$("#menu > .panel > .links").empty().html(navTemplate(model.toJSON()));
|
||||
}
|
||||
});
|
||||
},
|
||||
@@ -98,6 +82,7 @@ var Router = Backbone.Router.extend({
|
||||
|
||||
detail: function(type, id, context) {
|
||||
//TODO: Handle the context passed in somehow
|
||||
console.log("Detail()");
|
||||
var model = window[type].get(id);
|
||||
model.set({type: type});
|
||||
this.stage.content = new window[this.views[type]]({model: model});
|
||||
|
||||
Reference in New Issue
Block a user