add a "labs" link, not in the menu, but useful for testing things and seeing color swatches (current behaviour)
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/e13b14dc Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/e13b14dc Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/e13b14dc Branch: refs/heads/0.6.0 Commit: e13b14dc2026498a09ae861e6ae4081cc0c193bd Parents: 9e0307a Author: Alex Heneveld <[email protected]> Authored: Sun Sep 15 21:08:43 2013 +0100 Committer: Alex Heneveld <[email protected]> Committed: Wed Sep 18 09:30:05 2013 +0100 ---------------------------------------------------------------------- usage/jsgui/src/main/webapp/assets/js/router.js | 9 ++- .../src/main/webapp/assets/tpl/labs/page.html | 79 ++++++++++++++++++++ 2 files changed, 86 insertions(+), 2 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e13b14dc/usage/jsgui/src/main/webapp/assets/js/router.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/router.js b/usage/jsgui/src/main/webapp/assets/js/router.js index 9cc76e0..a0fe75d 100644 --- a/usage/jsgui/src/main/webapp/assets/js/router.js +++ b/usage/jsgui/src/main/webapp/assets/js/router.js @@ -1,10 +1,10 @@ define([ 'brooklyn', 'underscore', 'jquery', 'backbone', "model/application", "model/app-tree", "model/location", "view/home", "view/application-explorer", "view/catalog", "view/apidoc", "view/script-groovy", - "text!tpl/help/page.html" + "text!tpl/help/page.html","text!tpl/labs/page.html" ], function (Brooklyn, _, $, Backbone, Application, AppTree, Location, HomeView, ExplorerView, CatalogView, ApidocView, ScriptGroovyView, - HelpHtml) { + HelpHtml, LabsHtml) { // add close method to all views for clean-up // (NB we have to update the prototype _here_ before any views are instantiated; @@ -59,6 +59,7 @@ define([ 'v1/apidoc':'apidocPage', 'v1/script/groovy':'scriptGroovyPage', 'v1/help':'helpPage', + 'labs':'labsPage', '*path':'defaultRoute' }, @@ -137,6 +138,10 @@ define([ $("#application-content").html(_.template(HelpHtml, {})) $(".nav1").removeClass("active") $(".nav1_help").addClass("active") + }, + labsPage:function () { + $("#application-content").html(_.template(LabsHtml, {})) + $(".nav1").removeClass("active") } }) http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e13b14dc/usage/jsgui/src/main/webapp/assets/tpl/labs/page.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/labs/page.html b/usage/jsgui/src/main/webapp/assets/tpl/labs/page.html new file mode 100644 index 0000000..8240488 --- /dev/null +++ b/usage/jsgui/src/main/webapp/assets/tpl/labs/page.html @@ -0,0 +1,79 @@ +<!-- labs page : this is not included in the menu, but by entering the url + http://localhost:8081/#/labs + this page will load, showing colours and doing other experiments --> +<div class="container container-fluid"> +<div id="labs-page"> + +<!-- --> +<!-- demo the colour themese we use --> + +<style media="screen" type="text/css"> +.swatch { + padding: 10px 10px 10px 5px; + margin: 10px 5px; + display: inline-block; + border: 2px solid #A0A0A0; +} +</style> + +<script> +var swatch = function(bg, fg, bo) { + var bgR = bg ? bg : '#808080'; + var fgR = fg ? fg : '#202020'; + var boR = bo ? bo : '#A0A0A0'; + $('#swatches').append('<div class="swatch" style="background-color: '+bgR+'; color: '+fgR+'; border: 2px solid '+boR+';">' + +'<div>'+(bg ? 'bg:'+bg : ' ')+'</div>' + +'<div>'+(fg ? 'fg:'+fg : ' ')+'</div>' + +'<div>'+(bo ? 'bo:'+bo : ' ')+'</div>' + +'</div>'); +} + +$(document).ready(function() { + // display stadard colours + var colors = [ + // border colors + //'#EEE', '#CCC', '#793', + // text colors + //'#F0F4E8' + // background colors + //'#A8B8B0', '#e0f0e0', '#e0e8e0', + ]; + + swatch('#492') + swatch('#58AA33') + swatch('#77AA3E') + swatch('#98B890') // selected alt + swatch('#A8B8B0') // paging numbers + swatch('#A8B8B0', null, '#CCC') + swatch('#A8B8B0', null, '#EEE') + swatch('#B8C8B0') // selected + swatch('#d0d8d0') // app content + swatch('#D8E0D4') // opened row + swatch('#d8e4d0') // table body + swatch('#E0E4E0') // table row hover, table header + swatch('#e8e8e8') // app content + swatch('#f0f4f0') // app content + swatch('#F9F9F9') // table odd + swatch('#FFFFFF') // table even + swatch('#261', '#F0F4E8', null) + swatch(null, '#182018') // tree node + swatch(null, '#382') // links + swatch(null, '#65AA34') // hover for above + swatch(null, '#273') + swatch('#f9f9f9', null, '#d4d4d4') // tabs + swatch('#f9f9f9', '#505050', '#a1cb8c') // add app + swatch('#f9f9f9', '#58a82e', '#58a82e') // add app hover + + + + for (c in colors) { +// $('#swatches').append('<div class="swatch" style="background-color: '+colors[c]+';">'+colors[c]+'</div>'); + } +}) +</script> + +<div id="swatches"> +</div> + +</div> +</div>
