kylefang/deployd
1
0
Fork 0
mirror of https://github.com/zhigang1992/deployd.git synced 2026-05-13 21:06:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Implemented New User form dynamically created from service. Changed color scheme to be brighter.

Browse Source
This commit is contained in:
Jeff Cross
2011-11-09 23:58:07 -07:00
parent 5290930ee0
commit df062139bf
7 changed files with 208 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
lib/app.js
View File

@@ -48,7 +48,43 @@ app.get('/plugins', function(req, res) {
name: 'Users',
overview_html: '<p>The Users plugin lets you configure users...</p>',
configurable_objects: [
{name: "Roles"}
{name: "Roles &amp; Permissions"},
{name: "Existing Users"
, list: "User List"
, source: "/users"
},
{name: "Model"},
{
name: "New User"
, helper_text: "Fill out the form below to create a new user"
, form: {
action: "/user"
, method: "POST"
, fields: [
{
name: "Full Name"
, type: "text"
, required: true
}
, {
name: "Email"
, type: "email"
, required: true
},
{
name: "Password"
, type: "password"
, required: true
}
, {
name: "Twitter"
, type: "text"
, required: false
}
]
}
}
],
_id: 1234
},

BIN
public/dashboard/css/.sass-cache/92a450c2c1d12e16ab049f497cd2f0c733306202/dashboard.scssc
View File

Binary file not shown.

81
public/dashboard/css/dashboard.css
View File

@@ -1,14 +1,32 @@
@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: #222222;
background-color: white;
font-family: Helvetica, Arial, sans-serif; }
header.top-level {
zoom: 1;
background-color: #eeeeee;
color: #222222;
border-bottom: 2px solid #003366;
color: #003366;
height: 50px;
margin-bottom: 10px; }
margin-bottom: 15px; }
header.top-level:before, header.top-level:after {
content: "";
display: table; }
@@ -20,7 +38,7 @@ header.top-level {
line-height: 50px;
margin: 0 20px; }
header.top-level a {
color: #222222;
color: #003366;
text-decoration: none; }
header.top-level a.sign-out {
display: inline-block;
@@ -32,7 +50,8 @@ header.top-level {
.app-admin {
zoom: 1;
padding-right: 5px; }
margin: auto;
padding: 0 15px; }
.app-admin:before, .app-admin:after {
content: "";
display: table; }
@@ -42,7 +61,7 @@ header.top-level {
.app-admin ul#appNav {
width: 20%;
float: left;
margin: 10px 0; }
margin: 20px 0; }
.app-admin ul#appNav, .app-admin ul#appNav ul {
list-style-type: none;
padding: 0; }
@@ -52,14 +71,25 @@ header.top-level {
min-height: 50px;
clear: right;
float: right; }
.app-admin ul#appNav > li:first-child > a {
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px; }
.app-admin ul#appNav > li:last-child {
background-color: #006699;
height: 10px;
min-height: 0;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px; }
.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, #262626), color-stop(1, #595959));
background-image: -moz-linear-gradient(center bottom, #262626 0%, #595959 76%); }
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #00334d), color-stop(1, #0077b3));
background-image: -moz-linear-gradient(center bottom, #00334d 0%, #0077b3 76%); }
.app-admin ul#appNav > li > a {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #333333), color-stop(1, #666666));
background-image: -moz-linear-gradient(center bottom, #333333 0%, #666666 76%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #004466), color-stop(1, #0088cc));
background-image: -moz-linear-gradient(center bottom, #004466 0%, #0088cc 76%);
display: block;
border-bottom: 1px solid #0c0c0c;
border-bottom: 1px solid #00111a;
color: #eeeeee;
line-height: 50px;
padding: 0 16px;
@@ -67,7 +97,7 @@ header.top-level {
font-weight: bold;
text-decoration: none; }
.app-admin ul#appNav > li > ul {
background-color: #4c4c4c;
background-color: #006699;
padding: 16px; }
.app-admin ul#appNav > li > ul li {
margin-bottom: 6px;
@@ -86,26 +116,32 @@ header.top-level {
-moz-border-radius: 9px;
border-radius: 9px;
background-color: #eeeeee;
color: #222222; }
color: #003366; }
.app-admin div#content {
float: left;
margin: 5px 0;
width: 80%;
min-height: 500px;
background-color: white; }
min-height: 900px;
background-color: white;
-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; }
.app-admin div#content header {
height: 100px;
background-color: #cccccc; }
background-color: #ccddee; }
.app-admin div#content header h2 {
color: #999999;
color: #99aabb;
margin: 0 15px;
height: 70px;
line-height: 70px;
font-size: 30px; }
.app-admin div#content header h2 em {
font-style: normal;
color: #222222; }
color: #003366; }
.app-admin div#content header ul {
list-style-type: none;
height: 30px;
@@ -117,15 +153,16 @@ header.top-level {
padding: 0;
height: 30px; }
.app-admin div#content header ul li a {
background-color: #999999;
background-color: #006699;
display: block;
padding: 0 8px;
color: #222222;
color: white;
text-decoration: none;
font-weight: bold;
font-size: 12px;
line-height: 30px; }
.app-admin div#content header ul li.active a, .app-admin div#content header ul li a:hover {
background-color: white; }
.app-admin div#content > .substance {
background-color: white;
color: #003366; }
.app-admin div#content .substance {
padding: 15px; }

64
public/dashboard/css/dashboard.scss
View File

@@ -1,5 +1,8 @@
@import "normalize.css";
//Colors
/* Gray theme */
/*
$body-color: #222;
$base-color: #222;
$contrast-color: #eee;
$content-header-color: #ccc;
@@ -12,6 +15,23 @@ $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: #fff;
$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;
@mixin clearfix {
&:before, &:after { content: ""; display: table; }
@@ -40,17 +60,36 @@ $tab-font-color: $base-color;
border-radius: $radius;
}
@mixin border-radius-top-left ($radius) {
-webkit-border-top-left-radius: $radius;
-moz-border-radius-topleft: $radius;
border-top-left-radius: $radius;
}
@mixin border-radius-bottom-left ($radius) {
-webkit-border-bottom-left-radius: $radius;
-moz-border-radius-bottomleft: $radius;
border-bottom-left-radius: $radius;
}
@mixin shadow ($hor, $vert, $blur, $spread, $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: $base-color;
background-color: $body-color;
font-family: Helvetica, Arial, sans-serif;
}
header.top-level {
@include clearfix;
background-color: $contrast-color;
border-bottom: 2px solid $base-color;
color: $base-color;
height: 50px;
margin-bottom: 10px;
margin-bottom: 15px;
h1 {
display: inline-block;
font-size: 18px;
@@ -72,12 +111,13 @@ header.top-level {
}
.app-admin {
@include clearfix;
padding-right:5px;
margin: auto;
padding: 0 15px;
}
.app-admin ul#appNav {
width: 20%;
float: left;
margin: 10px 0;
margin: 20px 0;
&, ul {
list-style-type: none;
padding:0;
@@ -88,6 +128,15 @@ header.top-level {
min-height: 50px;
clear: right;
float: right;
&:first-child > a {
@include border-radius-top-left(10px);
}
&:last-child {
background-color: $button-base-color;
height:10px;
min-height:0;
@include border-radius-bottom-left(10px);
}
&.active > a, & > a:hover {
@include background-gradient(lighten($button-base-color, 5%), darken($button-base-color, 15%));
}
@@ -134,8 +183,10 @@ header.top-level {
float:left;
margin: 5px 0;
width:80%;
min-height: 500px;
min-height: 900px;
background-color: $content-area-color;
@include shadow(0, 0, 10px, 0, rgba(0,0,0,0.5));
@include border-radius(10px);
header {
height: 100px;
background-color: $content-header-color;
@@ -174,11 +225,12 @@ header.top-level {
}
&.active a, a:hover {
background-color: $tab-active-color;
color: $tab-active-font-color;
}
}
}
}
& > .substance {
& .substance {
padding: 15px;
}
}

28
public/dashboard/index.html
View File

@@ -38,17 +38,24 @@
<% }); %>
</ul>
</li>
<li><a href="#/models">Models</a>
<ul>
<% _.each(models.models, function (model) { %>
<li><a href="#/plugins/<%= model.attributes._id %>"><%= model.attributes.name %></a></li>
<% }); %>
</ul>
</li>
<li></li>
</script>
<script id="model-detail-template" type="html/template">
<div><%= name %></div>
</script>
<script id="plugin-form-template" type="html/template">
<div class="plugin-form">
<form action="<%= action %>" method="<%= method %>">
<% _.each(fields, function (form_field) { %>
<div class="form-row">
<label for="<%= form_field.name %>"><%= form_field.name %></label>
<input name="<%= form_field.name %>" type="<%= form_field.type %>" <% if (form_field.required) { %> required="true" <%; } %> />
</div>
<% }); %>
<input type="submit" value="Submit" />
</form>
</div>
</script>
<script id="plugin-detail-template" type="html/template">
<header>
<h2>
@@ -57,7 +64,12 @@
<ul class="plugin-nav">
<li class="active"><a href="<%= url %>">Overview</a></li>
<% _.each(configurable_objects, function (navItem) { %>
<li><a href="<%= url %>/<%= navItem.name %>"><%= navItem.name %></a></li>
<li class="<%
var className = navItem.name;
while (className.indexOf(' ') > -1) {
className = className.replace(' ', '');
}
%><%= className %>"><a href="<%= url %>/<%= navItem.name %>"><%= navItem.name %></a></li>
<% }); %>
</ul>
</header>

3
public/dashboard/js/router.js
View File

@@ -95,8 +95,9 @@ var Router = Backbone.Router.extend({
var model = window[type].get(id);
model.set({type: type});
this.stage.content = new window[this.views[type]]({model: model});
model.fetch();
// model.fetch();
this.stage.render();
if (typeof context !== "undefined") this.stage.content.showContext(context);
}
// IDEA: be able to paste a deployed route with /debug and see information about it

33
public/dashboard/js/view/partial/plugin-view.js
View File

@@ -1,6 +1,37 @@
window.PluginView = View.extend({
item: 'plugin-item-template',
template: 'plugin-detail-template'
template: 'plugin-detail-template',
formTemplate: _.template($("#plugin-form-template").html()),
showContext: function (context) {
//Method used to show any configurable object in a plugin, anything other than "overview"
this.context = context;
var contexts = this.model.get("configurable_objects"), modelContext, output;
$.each(contexts, function (i, val){
if (contexts[i].name === context) {
modelContext = contexts[i];
return false; //equivalent to break;
}
});
if (typeof modelContext !== "undefined") {
output = modelContext.helper_text || "";
if (modelContext["form"] !== "undefined") {
output += this.formTemplate(modelContext["form"]);
}
}
else {
output = "No valid context to display";
}
var className = context;
while (className.indexOf(' ') > -1) {
className = className.replace(' ', '');
}
$(this.el).find(".substance").empty().html(output);
$(this.el).find("ul.plugin-nav > li.active").removeClass("active");
$(this.el).find("ul.plugin-nav > li." + className).addClass("active");
}
});