applied general jsgui prettiness from krome and others noticed
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/7e6c5243 Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/7e6c5243 Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/7e6c5243 Branch: refs/heads/0.5.0 Commit: 7e6c524366a2ecf519b01843b9b6f74b153e23d8 Parents: 381bff4 Author: Alex Heneveld <[email protected]> Authored: Mon Nov 26 15:04:53 2012 +0000 Committer: Alex Heneveld <[email protected]> Committed: Tue Nov 27 15:50:07 2012 -0800 ---------------------------------------------------------------------- .../src/main/webapp/assets/css/prettybrook.css | 407 +++++++++++++++++-- .../assets/images/addApplication-plus-hover.png | Bin 0 -> 1620 bytes .../assets/images/addApplication-plus.png | Bin 0 -> 1680 bytes .../images/application-icon-add-hover.png | Bin 0 -> 1402 bytes .../assets/images/application-icon-add.png | Bin 0 -> 1291 bytes .../images/application-icon-refresh-hover.png | Bin 0 -> 1263 bytes .../assets/images/application-icon-refresh.png | Bin 0 -> 1225 bytes .../images/brooklyn-header-background.png | Bin 0 -> 2162 bytes .../main/webapp/assets/images/brooklyn-logo.png | Bin 0 -> 7055 bytes .../assets/images/main-menu-tab-active.png | Bin 0 -> 974 bytes .../assets/images/main-menu-tab-hover.png | Bin 0 -> 985 bytes .../main/webapp/assets/images/main-menu-tab.png | Bin 0 -> 985 bytes .../assets/images/nav-tabs-background.png | Bin 0 -> 985 bytes .../assets/images/roundedSummary-background.png | Bin 0 -> 998 bytes .../webapp/assets/js/view/application-tree.js | 14 +- .../src/main/webapp/assets/js/view/catalog.js | 30 +- .../src/main/webapp/assets/js/view/home.js | 8 +- .../main/webapp/assets/tpl/apps/details.html | 18 +- .../main/webapp/assets/tpl/apps/summary.html | 2 +- .../main/webapp/assets/tpl/catalog/page.html | 8 +- .../webapp/assets/tpl/home/applications.html | 17 +- .../main/webapp/assets/tpl/home/summaries.html | 6 +- usage/jsgui/src/main/webapp/index.html | 4 +- .../src/test/javascript/specs/home-spec.js | 5 +- 24 files changed, 439 insertions(+), 80 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/css/prettybrook.css ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/css/prettybrook.css b/usage/jsgui/src/main/webapp/assets/css/prettybrook.css index edcc7dd..d9aae39 100644 --- a/usage/jsgui/src/main/webapp/assets/css/prettybrook.css +++ b/usage/jsgui/src/main/webapp/assets/css/prettybrook.css @@ -54,6 +54,10 @@ ul.dropdown-menu { text-align: left; } +.navbar .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover { + background-color: #58AA33; /* that seems necessary to result in the color we want, viz ~ 77AA3E; */ +} + /* tabs eg catalog page */ .nav-tabs>li,.nav-pills>li { float: left; @@ -77,25 +81,28 @@ ul.dropdown-menu { /* bootstrap overrides */ a { - color: #075; + color: #382; +} +a:hover { + color: #65AA34; } code { color: #273; } /* buttons (override bootstrap) */ .btn-info { - background-color: #49cdaf; - *background-color: #2fb496; - background-image: -ms-linear-gradient(top, #5bdec0, #2fb496); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bdec0), to(#2fb496)); - background-image: -webkit-linear-gradient(top, #5bdec0, #2fb496); - background-image: -o-linear-gradient(top, #5bdec0, #2fb496); - background-image: -moz-linear-gradient(top, #5bdec0, #2fb496); - background-image: linear-gradient(top, #5bdec0, #2fb496); + background-color: #90C858; + *background-color: #609040; + background-image: -ms-linear-gradient(top, #90C858, #609040); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#90C858), to(#609040)); + background-image: -webkit-linear-gradient(top, #90C858, #609040); + background-image: -o-linear-gradient(top, #90C858, #609040); + background-image: -moz-linear-gradient(top, #90C858, #609040); + background-image: linear-gradient(top, #90C858, #609040); background-repeat: repeat-x; - border-color: #2fb496 #2fb496 #1f7763; + border-color: #609040 #609040 #609040; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#5bdec0', endColorstr='#2fb496', GradientType=0); + filter: progid:dximagetransform.microsoft.gradient(startColorstr='#90C858', endColorstr='#609040', GradientType=0); filter: progid:dximagetransform.microsoft.gradient(enabled=false); } @@ -104,13 +111,13 @@ code { .btn-info.active, .btn-info.disabled, .btn-info[disabled] { - background-color: #2fb496; - *background-color: #2aa085; + background-color: #609040; + *background-color: #508030; } .btn-info:active, .btn-info.active { - background-color: #248c74 \9; + background-color: #508030 \9; } /* unchanged from bootstrap @@ -147,49 +154,106 @@ code { /* home page squares */ + +/* HOME BODY */ +#application-content { + background-color: #e8e8e8 !important; + padding-top: 30px !important; +} + +.home-first-row { + padding: 0px; +} + .home-summaries-row { - text-align: center; - margin: 0px 0px 30px 0px; + text-align: center; + margin: 0px 0px 30px 0px; } .roundedSummary { - -webkit-border-radius: 15px; - -moz-border-radius: 15px; - border-radius: 15px; - background-color: #f7f6e8; - padding: 20px 20px; - margin: 20px 40px; - width: 240px; - height: 160px; - line-height: 1.2; - font-size: 140%; - display: inline-block; - text-align: left; + float: left; + border: 1px solid #d4d4d4; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; + background-color: #f7f6e8; + margin: 10px 15px 0px 0px; + padding: 20px 20px; + width: 264px; + height: 160px; + line-height: 1.2; + font-size: 140%; + display: inline-block; + text-align: left; + background: #f9f9f9 url(../images/roundedSummary-background.png) top + repeat-x !important; +} + +.roundedSummary:last-child { + margin-right: 0px; } .roundedSummary:before { /* makes the summary vertically centered */ - content: ''; - display: inline-block; - height: 100%; - vertical-align: middle; - margin-right: -0.25em; /* adjusts for horiz spacing */ + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + margin-right: 0px !important; + /* + margin-right: -0.25em; + adjusts for horiz spacing */ } .roundedSummaryText { - display: inline-block; - vertical-align: middle; + display: inline-block; + vertical-align: middle; +} + +.addApplication { + border: 1px solid #a1cb8c !important; + color: #505050 !important; + background: url(../images/addApplication-plus.png) no-repeat !important; + padding: 10px 0px 0px 74px !important; + width: 298px !important; + height: 201px !important; +} + +.addApplication:hover { + border: 1px solid #58a82e !important; + color: #58a82e !important; + background: url(../images/addApplication-plus-hover.png) no-repeat + !important; +} + +.home-summaries-row { + padding: 0px 0px 0px 0px !important; + margin: 0px !important; } .big { font-size: 180%; } +.home-second-row { + background-color: #dddddd !important; + padding: 24px 0px 30px 0px !important; + border-top: 1px solid #efefef; + margin: 30px 0px 0px 0px; +} + .home-widgets-row { text-align: center; } .map-container { - width: 45%; + -webkit-border-radius: 13px 13px 13px 13px; + -moz-border-radius: 13px 13px 13px 13px; + border-radius: 13px 13px 13px 13px; + background-color: #f7f7f7; + border: 1px solid #d4d4d4; + padding: 13px !important; + width: 440px; + margin: 10px 0px 0px 13px !important; display: inline-block; text-align: left; vertical-align: top; @@ -221,11 +285,14 @@ code { color: inherit; } .apps-summary-container { - width: 45%; + width: 440px; display: inline-block; text-align: left; vertical-align: top; - margin: 0px 20px; + display: inline-block; + margin: 10px -6px 0px 24px; + text-align: left; + vertical-align: top; } #new-application-resource { text-align: right; @@ -345,7 +412,9 @@ line-height: 18px; } .cssninja ol.tree { padding: 0; + width: auto; } + /* effector modal dialog */ #params td { vertical-align: middle; @@ -521,10 +590,13 @@ div.for-empty-table { margin-top: 8px; } .help-logo-right { + padding-left: 1.5em; + padding-top: 1.5em; float: right; } .help-logo-right img { - border: 3px solid #333030; + border: 3px solid #6C6C6C; + border-radius: 2px; } .control-group { margin-top: 6px; @@ -532,6 +604,16 @@ div.for-empty-table { } +#application-explorer div#summary { + padding-right: 16px; + padding-left: 24px; + margin-left: -16px; +} +#application-explorer div#summary textarea { + width: 100%; + cursor: auto; +} + /* catalog */ .accordion-head { -webkit-border-radius: 5px; @@ -551,16 +633,23 @@ div.for-empty-table { overflow-x: scroll; overflow-y: scroll; background-color: white; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; } .accordion-head:hover { background-color: #E0E4E0; cursor: hand; cursor: pointer; } +.catalog-accordion-wrapper { + margin-bottom: 6px; + background-color: #F0F0F0; + border-radius: 5px; +} .accordion-item { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; - margin: 9px -4px; + margin-top: -1px; border: 1px solid lightgray; } .accordion-nav-row:hover { @@ -570,9 +659,25 @@ div.for-empty-table { .accordion-nav-row.active { font-weight: bold; } +.catalog-details-generic { + padding-left: 16px; + padding-right: 25px; + padding-top: 8px; + padding-bottom: 8px; +} .catalog-details h3 { - margin-bottom: 8px; + margin-bottom: 8px; } +.catalog-details-generic textarea { + width: 100%; + cursor: auto; +} +.catalog-details#details-empty { + padding-top: 60px; + padding-bottom: 180px; + text-align: center; +} + .float-right { float: right; } @@ -674,3 +779,223 @@ input[type="file"] { width: 300px; } + + + + +/* KROME STYLES */ +BODY { + background-color: #e8e8e8 !important; + color: #505050 !important; +} + +textarea { + white-space: pre; + word-wrap: normal; + overflow-x: scroll; +} + +/* HEADER */ +.logo { + height: 44px !important; + width: 195px !important; + background: url(../images/brooklyn-logo.png) no-repeat; + margin-top: 50px; +} + +.navbar-inner { + min-height: 105px !important; + border-bottom: 2px solid #a9a9a9; + background: #383737 url(../images/brooklyn-header-background.png) + repeat-x top; +} + +.menubar-top { + padding-right: 0px !important +} + +.navbar .nav { + margin-right: 0px !important; +} + +.navbar .nav>li { + margin: 35px 0px 0px 3px !important; +} + +.navbar .nav>li>a { + border: 1px solid #151515; + padding: 8px 11px !important; + font-size: 15px !important; + background: url(../images/main-menu-tab.png) top !important; +} + +.navbar .nav>li>a.active { + background: url(../images/main-menu-tab-active.png) top !important; + margin-top: 3px !important +} + +.navbar .nav>li>a:hover { + color: #FFF !important; + background: url(../images/main-menu-tab-hover.png) top !important; +} + +.table-bordered thead:first-child tr:first-child th:first-child,.table-bordered tbody:first-child tr:first-child td:first-child + { + -webkit-border-top-left-radius: 13px !important; + -moz-border-top-left-radius: 13px !important; + border-top-left-radius: 13px !important; + background-color: #f7f7f7 !important; +} + +.table-bordered thead:first-child tr:first-child th:last-child,.table-bordered tbody:first-child tr:first-child td:last-child + { + -webkit-border-top-right-radius: 13px !important; + -moz-border-top-right-radius: 13px !important; + border-top-right-radius: 13px !important; + background-color: #f7f7f7 !important; +} + +.table-condensed th { + background-color: #f7f7f7 !important; + padding: 8px; +} + +.table-bordered tr td { + background-color: #f7f7f7 !important; + padding: 8px; +} + +.table-bordered thead:last-child tr:last-child th:first-child,.table-bordered tbody:last-child tr:last-child td:first-child + { + -webkit-border-top-right-radius: 0 0 0 13px !important; + -moz-border-top-right-radius: 0 0 0 13px !important; + border-bottom-right-radius: 13px; +} + +.table-bordered thead:last-child tr:last-child th:last-child,.table-bordered tbody:last-child tr:last-child td:last-child + { + -webkit-border-top-right-radius: 0 0 13px 0 !important; + -moz-border-top-right-radius: 0 0 13px 0 !important; + border-bottom-left-radius: 13px; +} +/*HOME BODY */ + +/*APP PAGE*/ +.row-fluid .span4 { + width: 300px !important; + margin-left: 34px !important; + float: left !important; + margin-top: 10px !important +} + +.row-fluid .span8 { + width: 607px !important; + margin-right: -26px !important; + float: left !important; + margin-top: 10px !important +} + +.navbar_top { + background-color: #f0f0f0 !important; + -webkit-border-radius: 13px 13px 0 0 !important; + -moz-border-radius: 13px 13px 0 0 !important; + border-radius: 13px 13px 0 0 !important; + border: 1px solid #d3d3d3; + border-bottom: none; +} + +.navbar_top h3 { + line-height: 24px !important; +} + +.navbar_main_wrapper { + background-color: #ffffff !important; + -webkit-border-radius: 0 0 13px 13px !important; + -moz-border-radius: 0 0 13px 13px !important; + border-radius: 0 0 13px 13px !important; + border: 1px solid #d3d3d3; + border-top: 4px solid #e2e2e2; +} + +.apps-tree-toolbar { + float: right; + margin: 0px !important; + margin-top: -18px !important; +} + +.icon-plus-sign { + background: url(../images/application-icon-add.png) top left !important; + width: 15px !important; + height: 15px !important; +} + +.icon-plus-sign:hover { + background: url(../images/application-icon-add-hover.png) top left + !important; +} + +.icon-refresh { + background: url(../images/application-icon-refresh.png) top left + !important; + width: 15px !important; + height: 15px !important; +} + +.icon-refresh:hover { + background: url(../images/application-icon-refresh-hover.png) top left + !important; +} + +#details { + background-color: #f0f0f0 !important; + -webkit-border-radius: 13px 13px 13px 13px !important; + -moz-border-radius: 13px 13px 13px 13px !important; + border-radius: 13px 13px 13px 13px !important; + border: 1px solid #d3d3d3; + padding-top: 9px; +} + +.tab-content { + background-color: #ffffff !important; + border: none !important; + -webkit-border-radius: 0 0 13px 13px !important; + -moz-border-radius: 0 0 13px 13px !important; + border-radius: 0 0 13px 13px !important; +} + +.nav-tabs { + border-bottom: 4px solid #e2e2e2 !important; +} + +.nav-tabs>.active>a,.nav-tabs>.active { + color: #549e2b !important; +} + +.nav-tabs>.active>a,.nav-tabs>.active a { + background: #ffffff !important; +} + +.nav-tabs>li>a { + color: #444444 !important; + border: 1px solid #dddddd !important; + background: #ffffff url(../images/nav-tabs-background.png) top + !important; + padding-bottom: 7px !important; + padding-top: 9px !important; +} + +.nav-tabs>li>a:hover { + color: #549e2b !important; + background: #ffffff none !important; +} + +#effectors-table th { + background: #ffffff !important +} +/*APP PAGE*/ + +/* END KROME STYLES */ + + + + http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/images/addApplication-plus-hover.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/images/addApplication-plus-hover.png b/usage/jsgui/src/main/webapp/assets/images/addApplication-plus-hover.png new file mode 100755 index 0000000..7137d51 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/images/addApplication-plus-hover.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/images/addApplication-plus.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/images/addApplication-plus.png b/usage/jsgui/src/main/webapp/assets/images/addApplication-plus.png new file mode 100755 index 0000000..c4ff5e6 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/images/addApplication-plus.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/images/application-icon-add-hover.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/images/application-icon-add-hover.png b/usage/jsgui/src/main/webapp/assets/images/application-icon-add-hover.png new file mode 100755 index 0000000..95c9bc8 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/images/application-icon-add-hover.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/images/application-icon-add.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/images/application-icon-add.png b/usage/jsgui/src/main/webapp/assets/images/application-icon-add.png new file mode 100755 index 0000000..b795bc5 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/images/application-icon-add.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/images/application-icon-refresh-hover.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/images/application-icon-refresh-hover.png b/usage/jsgui/src/main/webapp/assets/images/application-icon-refresh-hover.png new file mode 100755 index 0000000..6d23b8f Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/images/application-icon-refresh-hover.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/images/application-icon-refresh.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/images/application-icon-refresh.png b/usage/jsgui/src/main/webapp/assets/images/application-icon-refresh.png new file mode 100755 index 0000000..4f13df4 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/images/application-icon-refresh.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/images/brooklyn-header-background.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/images/brooklyn-header-background.png b/usage/jsgui/src/main/webapp/assets/images/brooklyn-header-background.png new file mode 100755 index 0000000..3399da7 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/images/brooklyn-header-background.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/images/brooklyn-logo.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/images/brooklyn-logo.png b/usage/jsgui/src/main/webapp/assets/images/brooklyn-logo.png new file mode 100755 index 0000000..27b2e5a Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/images/brooklyn-logo.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/images/main-menu-tab-active.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/images/main-menu-tab-active.png b/usage/jsgui/src/main/webapp/assets/images/main-menu-tab-active.png new file mode 100755 index 0000000..50e905b Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/images/main-menu-tab-active.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/images/main-menu-tab-hover.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/images/main-menu-tab-hover.png b/usage/jsgui/src/main/webapp/assets/images/main-menu-tab-hover.png new file mode 100755 index 0000000..cb8a106 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/images/main-menu-tab-hover.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/images/main-menu-tab.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/images/main-menu-tab.png b/usage/jsgui/src/main/webapp/assets/images/main-menu-tab.png new file mode 100755 index 0000000..ae62fd5 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/images/main-menu-tab.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/images/nav-tabs-background.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/images/nav-tabs-background.png b/usage/jsgui/src/main/webapp/assets/images/nav-tabs-background.png new file mode 100755 index 0000000..043df7c Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/images/nav-tabs-background.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/images/roundedSummary-background.png ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/images/roundedSummary-background.png b/usage/jsgui/src/main/webapp/assets/images/roundedSummary-background.png new file mode 100755 index 0000000..4e6f579 Binary files /dev/null and b/usage/jsgui/src/main/webapp/assets/images/roundedSummary-background.png differ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js b/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js index b9fd28e..e5dd18e 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js @@ -4,8 +4,8 @@ */ define([ "underscore", "jquery", "backbone", "model/app-tree", "./entity-details", "model/entity-summary", - "model/application", "text!tpl/apps/tree-item.html" -], function (_, $, Backbone, AppTree, EntityDetailsView, EntitySummary, Application, TreeItemHtml) { + "model/application", "text!tpl/apps/tree-item.html", "text!tpl/apps/details.html" +], function (_, $, Backbone, AppTree, EntityDetailsView, EntitySummary, Application, TreeItemHtml, EntityDetailsEmptyHtml) { var ApplicationTreeView = Backbone.View.extend({ tagName:"ol", @@ -28,6 +28,9 @@ define([ this.collection.each(function (app) { that.$el.append(that.buildTree(app)) }) + if (this.collection.size()==0) { + that.$el.append("<li><i>No applications</i></li>") + } this.highlightEntity(); if (this.detailsView) { this.detailsView.render() @@ -39,6 +42,11 @@ define([ if (!that.selectedEntityId) that.displayEntityId(app0, app0) }); + } else { + _.defer(function() { + $("div#details").html( _.template(EntityDetailsEmptyHtml, {}) ) + $("div#details").find("a[href=\"#"+"summary"+"\"]").tab('show') + }) } } return this @@ -115,6 +123,8 @@ define([ model:entitySummary, application:app }) + console.log("loading") + console.log(that.detailsView.render().el) $("div#details").html(that.detailsView.render().el) // preserve the tab selected before $("div#details").find("a[href=\"#"+whichTab+"\"]").tab('show') http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/js/view/catalog.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/catalog.js b/usage/jsgui/src/main/webapp/assets/js/view/catalog.js index e9f9ef0..a31044f 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/catalog.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/catalog.js @@ -39,6 +39,13 @@ define([ this.activeItem = null this.genericTabs = ['applications','entities','policies'] _.bindAll(this, "renderLocationsAccordion"); + + var that = this; + _.defer(function() { + console.log($("#applications div.accordion-head")) + that.toggleAccordionDiv($("#applications div.accordion-head"), false) + $("#details-empty").show() + }) }, render:function (eventName) { this.$el.html(_.template(CatalogPageHtml, {})) @@ -78,13 +85,24 @@ define([ accordion.find("div[id='"+this.activeItem+"']").addClass('active') }, toggleAccordion: function(event) { - var hidden = $(event.currentTarget).next()[0].style.display!='block' - $(event.currentTarget).parent().parent().find('.accordion-head').removeClass('active') - $(event.currentTarget).parent().parent().find('.accordion-body').hide('fast') + this.toggleAccordionDiv($(event.currentTarget), true) + }, + toggleAccordionDiv: function(elt, animation) { + var hidden = elt.next()[0].style.display!='block' + elt.parent().parent().find('.accordion-head').removeClass('active') + if (animation) + elt.parent().parent().find('.accordion-body').hide('fast') + else + elt.parent().parent().find('.accordion-body').hide() + if (hidden) { - $(event.currentTarget).addClass('active') - $(event.currentTarget).next().show('fast') - this.activeAccordion = $(event.currentTarget).parent().attr('id') + elt.addClass('active') + if (animation) + elt.next().show('fast') + else + elt.next().show() + + this.activeAccordion = elt.parent().attr('id') } else { this.activeAccordion = null } http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/js/view/home.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/home.js b/usage/jsgui/src/main/webapp/assets/js/view/home.js index 67b246a..e73e58d 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/home.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/home.js @@ -10,9 +10,9 @@ define([ var HomeView = Backbone.View.extend({ tagName:"div", - className:"container container-fluid", events:{ 'click #add-new-application':'createApplication', + 'click .addApplication':'createApplication', 'click .delete':'deleteApplication' }, @@ -57,7 +57,7 @@ define([ } this.callPeriodically(function() { - that.refresh(that); + //that.refresh(that); }, 5000) this.refresh(this) }, @@ -96,9 +96,9 @@ define([ renderCollection:function () { var $tableBody = this.$('#applications-table-body').empty() if (this.collection==null) - $tableBody.append("<td colspan='3'><i>No data available</i></td>"); + $tableBody.append("<tr><td colspan='3'><i>No data available</i></td></tr>"); else if (this.collection.isEmpty()) - $tableBody.append("<td colspan='3'><i>No applications deployed</i></td>"); + $tableBody.append("<tr><td colspan='3'><i>No applications deployed</i></td></tr>"); else this.collection.each(function (app) { var appView = new HomeView.AppEntryView({model:app}) if (this._appViews[app.cid]) { http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/tpl/apps/details.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/details.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/details.html index 88a471e..e6b7f06 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/details.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/details.html @@ -1,9 +1,3 @@ -<!-- -<div id="details-header"> - <h3>Details</h3> - <dl class="dl-horizontal"/> -</div> - --> <div class="tabbable"> <ul class="nav nav-tabs entity-tabs"> <li><a href="#summary" data-toggle="tab">Summary</a></li> @@ -14,11 +8,11 @@ <li><a href="#activities" data-toggle="tab">Activity</a></li> </ul> <div class="tab-content"> - <div class="tab-pane" id="summary">Please select an application/entity from the left.</div> - <div class="tab-pane" id="config">Please select an application/entity from the left.</div> - <div class="tab-pane" id="sensors">Please select an application/entity from the left.</div> - <div class="tab-pane" id="effectors">Please select an application/entity from the left.</div> - <div class="tab-pane" id="policies">Please select an application/entity from the left.</div> - <div class="tab-pane" id="activities">Please select an application/entity from the left.</div> + <div class="tab-pane" id="summary"><i>Nothing selected</i></div> + <div class="tab-pane" id="config"><i>Nothing selected</i></div> + <div class="tab-pane" id="sensors"><i>Nothing selected</i></div> + <div class="tab-pane" id="effectors"><i>Nothing selected</i></div> + <div class="tab-pane" id="policies"><i>Nothing selected</i></div> + <div class="tab-pane" id="activities"><i>Nothing selected</i></div> </div> </div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/tpl/apps/summary.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/summary.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/summary.html index f35171c..baf8863 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/summary.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/summary.html @@ -1 +1 @@ -<textarea readonly="readonly" rows="25" style="width:90%;"><%= entity %></textarea> +<textarea readonly="readonly" rows="25"><%= entity %></textarea> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/tpl/catalog/page.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/catalog/page.html b/usage/jsgui/src/main/webapp/assets/tpl/catalog/page.html index ec893d3..18497b7 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/catalog/page.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/catalog/page.html @@ -18,6 +18,8 @@ Select the category of the item type you wish to add. </div> +<div class="catalog-accordion-wrapper"> + <div id="applications" class="accordion-item"> <div class="accordion-head"> Applications @@ -42,11 +44,15 @@ </div> <div class="accordion-body hide"></div> </div> - + +</div> </div> </div> <div class="span8" id="details"> + <div id="details-empty" class="catalog-details hide"> + <i>Nothing selected</i> + </div> <div id="details-applications" class="catalog-details hide"/> <div id="details-entities" class="catalog-details hide"/> <div id="details-policies" class="catalog-details hide"/> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/tpl/home/applications.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/home/applications.html b/usage/jsgui/src/main/webapp/assets/tpl/home/applications.html index 467b00d..cad411c 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/home/applications.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/home/applications.html @@ -1,10 +1,14 @@ <!-- Applications page template --> -<div class="row" id="application-resource"> +<div class="home-first-row container container-fluid"> -<div class="home-summaries-row"></div> -<br/> + <div class="row home-summaries-row"><!-- inserted by JS (templated by summaries.html) --></div> -<div class="home-widgets-row"> +</div> + +<div class="home-second-row"><div class="container container-fluid"> + + <div class="row home-widgets-row"> + <div class="map-container"> <div id="circles-map" class="circles-map"> <div id="circles-map-message" class="circles-map-message">(map loading)</div> @@ -28,7 +32,8 @@ Add Application</button> </div> </div> -</div> + + </div> +</div></div> -</div> <div id="modal-container"></div> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/assets/tpl/home/summaries.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/home/summaries.html b/usage/jsgui/src/main/webapp/assets/tpl/home/summaries.html index 37f0cc3..2e9dc68 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/home/summaries.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/home/summaries.html @@ -10,7 +10,9 @@ templates available </div></div> --> - <span><div class="roundedSummary"><div class="roundedSummaryText"> + <div class="roundedSummary"><div class="roundedSummaryText"> <span class="big"><%- locations.size() %></span> location<%- locations.size()==1 ? "" : "s" %> configured<br/> <!-- with <span class="big">14</span> active machines --> - </div></div></span> + </div></div> + + <button class="roundedSummary addApplication" type="button">add application</button> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/main/webapp/index.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/index.html b/usage/jsgui/src/main/webapp/index.html index c12acb0..74fb404 100644 --- a/usage/jsgui/src/main/webapp/index.html +++ b/usage/jsgui/src/main/webapp/index.html @@ -41,9 +41,7 @@ </a> <a class="brand" href="#"></a> - <div class="logo"> - <img src="/assets/img/brooklyn.png" height="60"/> - </div> + <div class="logo"><!-- added via CSS --></div> <div class="nav-collapse menubar-top"> <ul class="nav"> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/7e6c5243/usage/jsgui/src/test/javascript/specs/home-spec.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/test/javascript/specs/home-spec.js b/usage/jsgui/src/test/javascript/specs/home-spec.js index 3e2da1f..d720675 100644 --- a/usage/jsgui/src/test/javascript/specs/home-spec.js +++ b/usage/jsgui/src/test/javascript/specs/home-spec.js @@ -41,8 +41,9 @@ define([ view.close() }) - it('should be a div#application-resource', function () { - expect(view.$('div#application-resource').length).toEqual(1) + it('should have a div#home-first-row and div#home-second-row', function () { + expect(view.$('div.home-first-row').length).toEqual(1) + expect(view.$('div.home-second-row').length).toEqual(1) }) it('should contain an apps table and a new button', function () {
