yellow team mailing list archive
-
yellow team
-
Mailing list archive
-
Message #01210
[Merge] lp:~bac/juju-gui/charm-assets into lp:juju-gui
Brad Crittenden has proposed merging lp:~bac/juju-gui/charm-assets into lp:juju-gui.
Requested reviews:
Kapil Thangavelu (hazmat)
For more details, see:
https://code.launchpad.net/~bac/juju-gui/charm-assets/+merge/130636
Charm config panel visual design
First pass at getting the visual design. This branch begins using
some of the specified assets.
The placement of the buttons and cogs feels crude. I'm happy to get
suggestions on better ways to do the CSS for those elements.
Note replacing the pop-up was not in the scope of this branch. The
elements below the buttons are being left for another branch in order
to get earlier feedback on the approach.
https://codereview.appspot.com/6709062/
--
https://code.launchpad.net/~bac/juju-gui/charm-assets/+merge/130636
Your team Juju GUI Hackers is subscribed to branch lp:juju-gui.
=== added file 'app/assets/images/cancel-button-pressed.png'
Binary files app/assets/images/cancel-button-pressed.png 1970-01-01 00:00:00 +0000 and app/assets/images/cancel-button-pressed.png 2012-10-20 16:53:23 +0000 differ
=== added file 'app/assets/images/cancel-button.png'
Binary files app/assets/images/cancel-button.png 1970-01-01 00:00:00 +0000 and app/assets/images/cancel-button.png 2012-10-20 16:53:23 +0000 differ
=== added file 'app/assets/images/configure-cog.png'
Binary files app/assets/images/configure-cog.png 1970-01-01 00:00:00 +0000 and app/assets/images/configure-cog.png 2012-10-20 16:53:23 +0000 differ
=== added file 'app/assets/images/configure_title_div.png'
Binary files app/assets/images/configure_title_div.png 1970-01-01 00:00:00 +0000 and app/assets/images/configure_title_div.png 2012-10-20 16:53:23 +0000 differ
=== added file 'app/assets/images/configure_toolbar_div.png'
Binary files app/assets/images/configure_toolbar_div.png 1970-01-01 00:00:00 +0000 and app/assets/images/configure_toolbar_div.png 2012-10-20 16:53:23 +0000 differ
=== added file 'app/assets/images/deploy-button-pressed.png'
Binary files app/assets/images/deploy-button-pressed.png 1970-01-01 00:00:00 +0000 and app/assets/images/deploy-button-pressed.png 2012-10-20 16:53:23 +0000 differ
=== added file 'app/assets/images/deploy-button.png'
Binary files app/assets/images/deploy-button.png 1970-01-01 00:00:00 +0000 and app/assets/images/deploy-button.png 2012-10-20 16:53:23 +0000 differ
=== modified file 'app/templates/charm-pre-configuration.handlebars'
--- app/templates/charm-pre-configuration.handlebars 2012-10-15 13:55:23 +0000
+++ app/templates/charm-pre-configuration.handlebars 2012-10-20 16:53:23 +0000
@@ -1,5 +1,16 @@
<div>
- <div class="charm-nav-back"><i class="icon-arrow-left icon-white"></i> Back</div>
+ <div class="charm-panel-configure">
+ {{#with charm}}
+ <div class="title">{{package_name}}</div>
+ <div class="name">{{id}}</div>
+ <div class="cog"></div>
+ {{/with}}
+ </div>
+ <div class="charm-panel-configure-buttons">
+ <button class="btn cancel">Cancel</button>
+ <input id="charm-deploy" value="Deploy" type="submit"
+ class="btn btn-primary deploy">
+ </div>
<div class="charm-panel config-variant">
@@ -46,7 +57,5 @@
</div>
{{/if}}
- <input id="charm-deploy" value="Deploy" type="submit"
- class="btn btn-primary"></input>
</div>
</div>
=== modified file 'app/views/charm-search.js'
--- app/views/charm-search.js 2012-10-19 01:53:03 +0000
+++ app/views/charm-search.js 2012-10-20 16:53:23 +0000
@@ -186,8 +186,8 @@
return this;
},
events: {
- '.charm-nav-back': {click: 'goBack'},
- '.btn#charm-deploy': {click: 'onCharmDeployClicked'},
+ '.btn.cancel': {click: 'goBack'},
+ '.btn.deploy': {click: 'onCharmDeployClicked'},
'.remove-config-file': {click: 'onFileRemove'},
'.charm-section h4': {click: toggleSectionVisibility},
'.config-file-upload': {change: 'onFileChange'},
@@ -227,7 +227,7 @@
this.tooltip.setStdModContent('body', text);
this.tooltip.field = evt.target;
this.tooltip.panel = this.tooltip.field.ancestor(
- '#juju-search-charm-panel');
+ '.charm-panel');
// Stash for speed.
this.tooltip.panelRegion = Y.DOM.region(
this.tooltip.panel.getDOMNode());
=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less 2012-10-18 17:50:22 +0000
+++ lib/views/stylesheet.less 2012-10-20 16:53:23 +0000
@@ -1,7 +1,13 @@
/* Processed with LESS from lib/views/stylesheet.less */
-
@font-family: 'Ubuntu', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+/* Define common colors. */
+@label-color: #292929;
+@text-entry-color: #6d6e70;
+@charm-panel-configure-title-color: #eee7d5;
+@charm-panel-configure-name-color: #8f8f88;
+
+
body {
margin-top: 87px;
background-color: #302b28;
@@ -236,7 +242,7 @@
&.pending-relation {
stroke: #faaf40;
-
+
&.dragging {
stroke: #fa6a40
}
@@ -702,13 +708,50 @@
float: right;
}
+ .btn.deploy {
+ margin-top: 5px;
+ margin-left: 5px;
+ float: none;
+ background-repeat: no-repeat;
+ background-color: transparent;
+ border: none;
+ vertical-align: middle;
+ background-position: 0 0; /* Needed to defeat bootstrap btn:hover 0 -15px*/
+ background-image: url(/juju-ui/assets/images/deploy-button.png);
+ &:active {
+ background-image: url(/juju-ui/assets/images/deploy-button-pressed.png);
+ }
+ }
+ .btn.cancel {
+ margin-top: 5px;
+ margin-left: 5px;
+ float: none;
+ background-repeat: no-repeat;
+ background-color: transparent;
+ border: none;
+ vertical-align: middle;
+ background-position: 0 0; /* Needed to defeat bootstrap btn:hover 0 -15px*/
+ background-image: url(/juju-ui/assets/images/cancel-button.png);
+ &:active {
+ background-image: url(/juju-ui/assets/images/cancel-button-pressed.png);
+ }
+ }
+ .charm-panel-configure-buttons {
+ background: url(/juju-ui/assets/images/configure_toolbar_div.png) repeat-x;
+ height: 52px;
+ vertical-align: middle;
+ .btn {
+ margin-top: 12px;
+ }
+ }
.search-charm-inner {
width: 100%;
height: 500px;
}
+ @popover-height: 607px;
.popover-content {
padding: 0px;
- height: 462px;
+ height: @popover-height;
}
.charm-nav-back {
background-color: black;
@@ -792,7 +835,7 @@
}
}
.search-result-div {
- height: 462px;
+ height: @popover-height;
overflow-y:auto;
overflow-x:hidden;
.series-charms {
@@ -884,14 +927,14 @@
.on {
font: Ubuntu regular 12px #ffffff;
- position: absolute;
- left: 27px;
+ position: absolute;
+ left: 27px;
top: 2px;
}
.off {
font: Ubuntu regular 12px #292929;
- position: absolute;
+ position: absolute;
left: 8px;
top: 2px;
}
@@ -967,11 +1010,11 @@
position: absolute;
top: 1px;
left: 10px;
-
+
a {
color: #2D2D2D!important;
}
-
+
a:link, a:visited, a:active, a:hover {
text-decoration: none
}
@@ -988,7 +1031,7 @@
.juju-service-info-container-bottom-menu-wrapper-service {
margin-top: 10px;
margin-left: 80px;
-
+
div {
width: 200px
}
@@ -1020,3 +1063,31 @@
min-width: 20px;
max-width: 400px;
}
+
+/* XXX: The positioning here feels like a big hack. Suggestions welcome. */
+.charm-panel-configure {
+ background: url(/juju-ui/assets/images/configure_title_div.png) repeat-x;
+ height: 93px;
+ position: relative;
+ .title {
+ font-weight: lighter;
+ font-size: 22px;
+ color: @charm-panel-configure-title-color;
+ position: absolute;
+ bottom: 22px;
+ }
+ .name {
+ font-size: 12px;
+ color: @charm-panel-configure-name-color;
+ position: absolute;
+ bottom: 0;
+ }
+ .cog {
+ position: absolute;
+ background: url(/juju-ui/assets/images/configure-cog.png);
+ bottom: 0;
+ right: 0;
+ height: 40px;
+ width: 40px;
+ }
+}
Follow ups
