From df062139bfd58b01bd37e30dca2a441f1cf82dea Mon Sep 17 00:00:00 2001 From: Jeff Cross Date: Wed, 9 Nov 2011 23:58:07 -0700 Subject: [PATCH] Implemented New User form dynamically created from service. Changed color scheme to be brighter. --- lib/app.js | 38 +++++++- .../dashboard.scssc | Bin 17146 -> 22202 bytes public/dashboard/css/dashboard.css | 81 +++++++++++++----- public/dashboard/css/dashboard.scss | 64 ++++++++++++-- public/dashboard/index.html | 28 ++++-- public/dashboard/js/router.js | 3 +- .../dashboard/js/view/partial/plugin-view.js | 33 ++++++- 7 files changed, 208 insertions(+), 39 deletions(-) diff --git a/lib/app.js b/lib/app.js index 160af6b..f3edadd 100644 --- a/lib/app.js +++ b/lib/app.js @@ -48,7 +48,43 @@ app.get('/plugins', function(req, res) { name: 'Users', overview_html: '

The Users plugin lets you configure users...

', configurable_objects: [ - {name: "Roles"} + {name: "Roles & 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 }, diff --git a/public/dashboard/css/.sass-cache/92a450c2c1d12e16ab049f497cd2f0c733306202/dashboard.scssc b/public/dashboard/css/.sass-cache/92a450c2c1d12e16ab049f497cd2f0c733306202/dashboard.scssc index b244a0902c020f91a1a882704f09ed6081e5c1bf..eafaf4bf63c1c4b720061f300ab5d35b8a1c349a 100644 GIT binary patch literal 22202 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 delta 3741 zcmZ`+Yiv~45$4#wcX#hTj30N`-etXamwoxYPw(2-HjANw*u{1rB^A!YYwy}#9$w=I zj{qT21#KY^U?>vwLDH18kS2~qshU;_iIiVWq(Xk=N2T=fqd%&ol`2J5MO3vj=Pv7O zAV2QiIdf*_o0&5+=k9OcV)st4b8@&ll1$|%vfa^CqC1z*Mkf+<|J2#Uph&|Hud_F&02=$mI z_AccMA+IGwu5wvFR-Fa* zv8E`&fvPYw!_}&g$$VcC)&}gIWhIMRUsPoiw`f0NQXPdS)P{nnHsY@nAMSt!WTA!G zAR~<8`@9fh)$p$1vR)>v%bH9z{8jLC0$;)m#gC0m?*3dbypF``B1g1feTLMv{z z!lvqNLK{+T@I;FYH>%@8JFeOxQ`5{^FykI*vZv)J=Cnd!xTB*kcx8Ce-Ucm=P9cU{ zG5E;7(;n9++B8wj9VRV)cK0$8JnN`oNtkoA`4lpjB*PC;)DVU-3%ut@L!H$LYa0fH z6iTPySZ5ntb*&T9xJpB3AO^R62G$L`JJK*7FtQ#53d0wT7Fi|B!-S!uK#9rlxG4Zz zoNHMxC~aME)+w?+Snf`7OZ}kqMw`qLB^H@Ggt{B_(HLgv=v0IV!JSMM47-f-MuJ%+ z7##(BT%*DO@&@32*8tnZqsPjPZZ4|*M&1L~g~Ie~dvR%z^iPxi=0{QR%(_AL4R9(E zNt!QA&n%+gV{j+Z%eH{W-Osj?=f=3^?BnpKrWpLeZDoV-ncG>nS?|1y4^+%urOZk*W6$OM6SZeKh5^!xc}^smZQrtx)hs&jz*w z<4?0E>1fR6D8{Og>bJlfmEmVfy?H0evkK(xgs7|0U&25R$IxxB2ww0GvZr{yt_B3h zxAmElf^7ZT>&JyX&rw>f@jMxX2sbR$H`xu+=F^!FzQRO zr(t&>3Gexg>=~$*bZ7eP>LY%R$Ce1z2gb`4W6n-477pYIXP7)0U!h3wJ^zxb}vFDG)6tehqHC&_6yk{nXU*Gc?6{2i7DvsK8UR*qwoc_z-|e0{R>ILyY_ z6ujNifN%0@iqFQjR-1JSrOOY_lTl$BIn(6{FoQ+WW$5CCUBC&^%Xafl+e5AF*t@z= zlzxRGoh-*UOWw0elwKJ~OQe-1Egc2X&Ovs7M|%)=4q|D>_zXN$wsM$f;EdD2o+m#f zDWar!5{}TgsXM9HP$BN_#_GmbhWc@p&e&Zym37Q&)i`zTHK zBQ$lkmDm<`1ZHAe#iNMIj^aI^3BTn8dGs5Ko1K8(M5BZ>4;PouC1iJLODClx@pxni zDXkUkBp-4T&Q(6+*mrSkL?M$jKq1g&mXZ-|(zEaLC~qg*#Zv@%ikHBfsanTrGW$9A zLr?Ou=?(b7nwHqhTzMoN70;0J8B`9#+i9!kEGbu25pxx(T?l5LNwK?Ce1#-lAy;9o zN2*}w=q5I$O1_=PO4`6KVDBVNrJIQXVfgd=)PQeIDK8fZtdoQ3N&2cd+Y@I$;AsEs ziFRBfv`hM9FrXpiU0lVRp>Gg&mIG1Sm4U7h&^I}do`lQl5c?tb{Jxhz!jMwz$E9mQ zWIuuPy&K?f9bxF}usL2OI|sNOJqhlezrcL7L+1v+c%1~V(>SVNH)u9hus5+s``9n3h1cB= z<}H18c*nA9*s?95UQ*`R@WjwyUtA}@2~Y3buPH11zqH6Y4{KX0{ zZ}Q!Ii8 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; } diff --git a/public/dashboard/css/dashboard.scss b/public/dashboard/css/dashboard.scss index 705eefe..3a09f6b 100644 --- a/public/dashboard/css/dashboard.scss +++ b/public/dashboard/css/dashboard.scss @@ -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; } } \ No newline at end of file diff --git a/public/dashboard/index.html b/public/dashboard/index.html index 6caa2b8..36083f3 100644 --- a/public/dashboard/index.html +++ b/public/dashboard/index.html @@ -38,17 +38,24 @@ <% }); %> -
  • Models - -
    • +
  • +