yellow team mailing list archive
-
yellow team
-
Mailing list archive
-
Message #01224
[Merge] lp:~tveronezi/juju-gui/service-header-newtrunk into lp:juju-gui
Thiago Veronezi has proposed merging lp:~tveronezi/juju-gui/service-header-newtrunk into lp:juju-gui.
Requested reviews:
Juju GUI Hackers (juju-gui)
For more details, see:
https://code.launchpad.net/~tveronezi/juju-gui/service-header-newtrunk/+merge/130786
Service view header gui design (pre-approved)
This code is already approved by https://codereview.appspot.com/6724059/
I needed to propose it again because the old trunk is dead and the previous
proposal was pointing to it.
https://codereview.appspot.com/6741058/
--
https://code.launchpad.net/~tveronezi/juju-gui/service-header-newtrunk/+merge/130786
Your team Juju GUI Hackers is requested to review the proposed merge of lp:~tveronezi/juju-gui/service-header-newtrunk into lp:juju-gui.
=== added file 'app/assets/images/tab_div.png'
Binary files app/assets/images/tab_div.png 1970-01-01 00:00:00 +0000 and app/assets/images/tab_div.png 2012-10-22 12:04:19 +0000 differ
=== added file 'app/assets/images/tab_marker.png'
Binary files app/assets/images/tab_marker.png 1970-01-01 00:00:00 +0000 and app/assets/images/tab_marker.png 2012-10-22 12:04:19 +0000 differ
=== removed file 'app/assets/images/white-triangle-16X8.png'
Binary files app/assets/images/white-triangle-16X8.png 2012-10-11 18:06:58 +0000 and app/assets/images/white-triangle-16X8.png 1970-01-01 00:00:00 +0000 differ
=== added file 'app/templates/service-footer-common-controls.partial'
--- app/templates/service-footer-common-controls.partial 1970-01-01 00:00:00 +0000
+++ app/templates/service-footer-common-controls.partial 2012-10-22 12:04:19 +0000
@@ -0,0 +1,28 @@
+<div class="inline service-common-controls">
+ {{#unless charm.is_subordinate}}
+ <div class="control-unit-count">
+ <div class="inline"><span>Unit count</span></div>
+ <div class="inline">
+ <input type="text" id="num-service-units" value="{{service.unit_count}}">
+ <img class="divider"
+ src="/juju-ui/assets/images/bottom_bar_small_div.png" />
+ </div>
+ </div>
+ {{/unless}}
+ <div class="control-expose">
+ <div class="inline"><span>Expose</span></div>
+ <div class="inline">
+ {{#if service.exposed}}
+ <img class="unexposeService"
+ alt="Exposed"
+ src="/juju-ui/assets/images/slider_on.png" />
+ <span class="on">On</span>
+ {{else}}
+ <img class="exposeService"
+ alt="Not exposed"
+ src="/juju-ui/assets/images/slider_off.png" />
+ <span class="off">Off</span>
+ {{/if}}
+ </div>
+ </div>
+</div>
\ No newline at end of file
=== added file 'app/templates/service-footer-destroy-service.partial'
--- app/templates/service-footer-destroy-service.partial 1970-01-01 00:00:00 +0000
+++ app/templates/service-footer-destroy-service.partial 2012-10-22 12:04:19 +0000
@@ -0,0 +1,8 @@
+<div class="destroy-control">
+ <a id="destroy-service" data-toggle="modal"
+ href="#destroy-service-modal">
+ <img src="/juju-ui/assets/images/destroy_icon.png" />Destroy
+ </a>
+ <img class="divider"
+ src="/juju-ui/assets/images/bottom_bar_big_div.png" />
+</div>
\ No newline at end of file
=== modified file 'app/templates/service-footer.partial'
--- app/templates/service-footer.partial 2012-10-15 18:38:50 +0000
+++ app/templates/service-footer.partial 2012-10-22 12:04:19 +0000
@@ -1,8 +1,6 @@
-<div class="juju-service-info-container-bottom-menu">
- <div class="destroy-control">
- <a id="destroy-service" data-toggle="modal" href="#destroy-service-modal">
- <img src="/juju-ui/assets/images/destroy_icon.png" />Destroy
- </a>
- <img class="divider" src="/juju-ui/assets/images/bottom_bar_big_div.png" />
+<div class="service-view">
+ <div class="juju-service-info-container-bottom-menu">
+ {{> service-footer-destroy-service}}
+ {{> service-footer-common-controls}}
</div>
-</div>
+</div>
\ No newline at end of file
=== modified file 'app/templates/service-header.partial'
--- app/templates/service-header.partial 2012-10-15 18:56:19 +0000
+++ app/templates/service-header.partial 2012-10-22 12:04:19 +0000
@@ -1,71 +1,27 @@
-<div class="service-header-partial">
-<div class="hero-unit juju-service-info-container">
- <div class="inline juju-service-info-container-big">
- <div class="juju-service-container-header-name">
- <div class="juju-sevice-container-name">
- <span><strong>{{service.id}}</strong></span>
- </div>
- <div>
- <span><strong>{{charm.id}}</strong></span>
- <span> </span>
- <a class="juju-service-charm-link"
- href="{{charm.app_url}}">Show Charm</a>
- </div>
- </div>
- </div>
- <div class="inline juju-service-info-container-separator"></div>
- <div class="inline juju-service-info-container-separator"></div>
- <div class="inline juju-service-info-container-small">
- <div class="juju-service-container-header-expose">
- <div class="inline"><span>Expose</span></div>
- <div class="inline">
- {{#if service.exposed}}
- <img class="unexposeService"
- alt="Exposed"
- src="/juju-ui/assets/images/slider_on.png" />
- <span class="on">On</span>
- {{else}}
- <img class="exposeService"
- alt="Not exposed"
- src="/juju-ui/assets/images/slider_off.png" />
- <span class="off">Off</span>
- {{/if}}
- </div>
- </div>
- </div>
- <div class="inline juju-service-info-container-separator"></div>
- <div class="inline juju-service-info-container-separator"></div>
- <div class="inline juju-service-info-container-small">
- <div class="juju-service-container-header-unit-count">
- {{#unless charm.is_subordinate}}
- <form class="unit-count-form">
- <label class="control-label" for="num-service-units">Unit count</label>
- <input type="text" id="num-service-units"
- value="{{service.unit_count}}">
- </form>
- {{/unless}}
- </div>
- </div>
-
-
-</div>
-<div class="juju-service-info-container-menu">
- <div class="juju-service-info-container-menu-wrapper">
- {{#tabs}}
- <div class="inline juju-menu-item">
- <div>
- <a href="{{href}}"><strong>{{title}}</strong></a>
- </div>
- <div>
- {{#if active}}
- <img src="/juju-ui/assets/images/white-triangle-16X8.png" />
- {{/if}}
- </div>
- </div>
- {{/tabs}}
- </div>
-</div>
-<div class="row">
- <div id="message-area" class="span10"></div>
-</div>
+<div class="service-view">
+ <div class="service-header-partial">
+ <div class="name crosshatch-background">
+ <div>
+ <span>{{service.id}}</span>
+ </div>
+ <div>
+ <span>{{charm_id}}</span>
+ </div>
+ </div>
+ <div class="menu-items">
+ {{#tabs}}
+ <div class="inline item">
+ <div>
+ <a {{#if active}}class="link-active"{{/if}} href="{{href}}">{{title}}
+ </a>
+ </div>
+ <div {{#if active}}class="active"{{/if}}>
+ </div>
+ </div>
+ {{/tabs}}
+ </div>
+ <div class="row">
+ <div id="message-area" class="span10"></div>
+ </div>
+ </div>
</div>
\ No newline at end of file
=== modified file 'app/templates/service.handlebars'
--- app/templates/service.handlebars 2012-10-15 18:38:50 +0000
+++ app/templates/service.handlebars 2012-10-22 12:04:19 +0000
@@ -7,21 +7,17 @@
</div>
<div id="destroy-modal-panel"></div>
</div>
-<div class="juju-service-info-container-bottom-menu">
- <div class="destroy-control">
- <a id="destroy-service" data-toggle="modal" href="#destroy-service-modal">
- <img src="/juju-ui/assets/images/destroy_icon.png" />Destroy
- </a>
- <img class="divider" src="/juju-ui/assets/images/bottom_bar_big_div.png" />
- </div>
- <div class="inline">
- <div class="juju-service-info-container-bottom-menu-wrapper-service">
- <span class="state-filter-label"><strong>Filter</strong> </span>
+<div class="service-view">
+ <div class="juju-service-info-container-bottom-menu">
+ {{> service-footer-destroy-service}}
+ <div class="filter-control">
+ <span>Filter</span>
{{#states}}
<a class="state-btn btn {{#if active}}btn-primary{{/if}}"
data-toggle="modal" href="{{link}}">
<span class="state-title">{{title}}</span> ({{count}})</a>
{{/states}}
</div>
- </div>
-</div>
+ {{> service-footer-common-controls}}
+ </div>
+</div>
=== modified file 'app/views/service.js'
--- app/views/service.js 2012-10-15 14:30:50 +0000
+++ app/views/service.js 2012-10-22 12:04:19 +0000
@@ -298,6 +298,12 @@
},
getServiceTabs: function(href) {
+ var app = this.get('app'),
+ service = this.get('model'),
+ charmId = service.get('charm'),
+ charm = app.db.charms.getById(charmId),
+ charmUrl = (charm ? app.getModelURL(charm) : '#');
+
var tabs = [{
href: '.',
title: 'Units',
@@ -311,6 +317,10 @@
title: 'Settings',
active: false
}, {
+ href: charmUrl,
+ title: 'Charm',
+ active: false
+ }, {
href: 'constraints',
title: 'Constraints',
active: false
@@ -570,7 +580,7 @@
});
return arr;
})(),
- charm: this.renderable_charm(service.get('charm'), app)}
+ charm_id: service.get('charm')}
));
return this;
@@ -641,7 +651,7 @@
tabs: this.getServiceTabs('config'),
service: service.getAttrs(),
settings: settings,
- charm: this.renderable_charm(service.get('charm'), app)}
+ charm_id: service.get('charm')}
));
return this;
@@ -811,7 +821,7 @@
viewName: 'units',
tabs: this.getServiceTabs('.'),
service: service.getAttrs(),
- charm: this.renderable_charm(service.get('charm'), app),
+ charm_id: service.get('charm'),
state: filter_state,
units: this.filterUnits(filter_state, units),
states: state_data
=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less 2012-10-20 18:16:19 +0000
+++ lib/views/stylesheet.less 2012-10-22 12:04:19 +0000
@@ -845,173 +845,143 @@
background: pink;
}
-.juju-service-info-container {
- padding: 0px;
- margin-bottom: 0px;
- background-color: #515151;
- color: white;
- height: 70px;
- -webkit-border-radius: 0px;
- -moz-border-radius: 0px;
- border-radius: 0px;
- -webkit-border-top-left-radius: 6px;
- -moz-border-top-left-radius: 6px;
- border-top-left-radius: 6px;
- -webkit-border-top-right-radius: 6px;
- -moz-border-top-right-radius: 6px;
- border-top-right-radius: 6px;
-
- .juju-service-info-container-big {
- width: 58%;
-
- .juju-service-container-header-name {
- padding-top: 15px;
- padding-left: 10px;
-
- .juju-sevice-container-name {
- padding-bottom: 5px;
-
- span {
- font-size: 3em;
- }
- }
- }
- }
-
- .juju-service-info-container-small {
- width: 20%;
-
- .juju-service-container-header-expose {
- padding: 20px;
-
- .inline:first-child {
- padding-right: 10px
- }
-
- div {
+#destroy-service {
+ margin-top: 10px;
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+.service-view {
+ .juju-service-info-container-bottom-menu {
+ background: url(/juju-ui/assets/images/bottom_bar.png) repeat-x;
+ height: 50px;
position: relative;
-
- .on {
- font: Ubuntu regular 12px #ffffff;
- position: absolute;
- left: 27px;
- top: 2px;
- }
-
- .off {
- font: Ubuntu regular 12px #292929;
- position: absolute;
- left: 8px;
- top: 2px;
- }
- }
- }
-
- .juju-service-container-header-unit-count {
- padding: 5px;
-
- input {
- width: 95%
- }
- }
- }
-}
-
-.juju-service-info-container-menu {
- border-top: 1px solid #737373;
- background-color: black;
- height: 40px;
- text-align: center;
-}
-
-.juju-service-info-container-menu-wrapper {
- display: inline-block;
-}
-
-.juju-menu-item {
- color: white;
- padding: 10px;
- padding-bottom: 0px;
- padding-top: 10px;
- text-align: center;
-
- a {
- color: white;
- text-decoration: none;
- }
-
- a:HOVER {
- color: white;
- text-decoration: none;
- }
-}
-
-.unit-count-form {
- margin-bottom: 0px;
-}
-
-.juju-service-charm-link,.juju-service-charm-link:HOVER {
- color: #919191;
- text-decoration: underline;
-}
-
-.juju-service-info-container-separator {
- width: 0px;
- height: 68px;
- border: 1px solid #737373;
- margin-left: 1px;
-}
-
-.juju-service-info-container-separator-footer {
- height: 48px;
-}
-
-.juju-service-info-container-bottom-menu {
- background: url(/juju-ui/assets/images/bottom_bar.png) repeat-x;
- height: 50px;
- position: relative;
- color: #2d2d2d!important;
-
- .destroy-control {
- position: absolute;
- top: 1px;
- left: 10px;
-
- a {
- color: #2D2D2D!important;
- }
-
- a:link, a:visited, a:active, a:hover {
- text-decoration: none
- }
- }
-
- .juju-service-info-container-bottom-menu-wrapper {
- margin-left: 10px;
-
- div {
- width: 200px
- }
- }
-
- .juju-service-info-container-bottom-menu-wrapper-service {
- margin-top: 10px;
- margin-left: 80px;
-
- div {
- width: 200px
- }
- }
-
- #destroy-service {
- margin-top: 10px;
- margin-left: 10px;
- margin-right: 10px;
- }
-}
-
-.state-filter-label {
- color: white
+ color: #2d2d2d!important;
+
+ .destroy-control {
+ position: absolute;
+ top: 1px;
+ left: 10px;
+
+ a {
+ color: #2D2D2D!important;
+ }
+
+ a:link, a:visited, a:active, a:hover {
+ text-decoration: none
+ }
+ }
+ }
+
+ .filter-control {
+ position: absolute;
+ left: 120px;
+ top: 10px;
+
+ span:first-child {
+ padding-right: 5px;
+ }
+ }
+
+ .service-header-partial {
+ .name {
+ padding-top: 38px;
+ padding-left: 46px;
+ height: 73px;
+
+ div:nth-child(1) {
+ font-style: normal;
+ height: 28px;
+ font-size: 24px;
+ color: #292929;
+ }
+
+ div:nth-child(2) {
+ font-style: italic;
+ font-size: 16px;
+ color: #6a737b;
+ }
+ }
+
+ .menu-items {
+ height: 26px;
+ padding-top: 2px;
+ padding-left: 38px;
+ background: url(/juju-ui/assets/images/tab_div.png) repeat;
+
+ .item {
+ a {
+ font-size: 12px;
+ padding-left: 10px;
+ padding-right: 10px;
+ color: #292929;
+ }
+ a:link, a:visited, a:active, a:hover {
+ text-decoration: none
+ }
+
+ .link-active {
+ color: #dd4814 !important;
+ }
+ .active {
+ margin-top: 3px;
+ height: 4px;
+ background: url(/juju-ui/assets/images/tab_marker.png)
+ repeat;
+ }
+ }
+ }
+ }
+
+ .service-common-controls {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+
+ .control-unit-count {
+ position: absolute;
+ right: 120px;
+ top: 0px;
+ width: 305px;
+
+ img {
+ padding-top: 0px;
+ }
+
+ div {
+ padding-left: 5px;
+ }
+
+ div:first-child {
+ padding-top: 4px;
+ }
+ }
+
+ .control-expose {
+ position: absolute;
+ right: 0px;
+ top: 4px;
+ width: 120px;
+
+ div {
+ padding-left: 5px;
+ }
+
+ .on {
+ font-size: 12px; fill: #ffffff;
+ position: absolute;
+ right: 20px;
+ top: 3px;
+ }
+
+ .off {
+ font-size: 12px; fill: #292929;
+ position: absolute;
+ right: 40px;
+ top: 3px;
+ }
+ }
+ }
}
div.inline {
Follow ups
