yellow team mailing list archive
-
yellow team
-
Mailing list archive
-
Message #01284
[Merge] lp:~bac/juju-gui/charm-assets-deux into lp:juju-gui
Brad Crittenden has proposed merging lp:~bac/juju-gui/charm-assets-deux into lp:juju-gui.
Requested reviews:
Juju GUI Hackers (juju-gui)
For more details, see:
https://code.launchpad.net/~bac/juju-gui/charm-assets-deux/+merge/131581
Further refinements to charm config panel.
* Change config file input widget from native HTML5 widget to an image
overlay.
* Replace deploy and cancel buttons with CSS. They don't exactly
match the visual design but that will come in the next branch.
* Set charm panel background. There is a problem in that it doesn't
go to the bottom but Gary's branch will fix it.
https://codereview.appspot.com/6774051/
--
https://code.launchpad.net/~bac/juju-gui/charm-assets-deux/+merge/131581
Your team Juju GUI Hackers is requested to review the proposed merge of lp:~bac/juju-gui/charm-assets-deux into lp:juju-gui.
=== added file 'app/assets/images/getfile_button-pressed.png'
Binary files app/assets/images/getfile_button-pressed.png 1970-01-01 00:00:00 +0000 and app/assets/images/getfile_button-pressed.png 2012-10-26 10:49:29 +0000 differ
=== added file 'app/assets/images/getfile_button.png'
Binary files app/assets/images/getfile_button.png 1970-01-01 00:00:00 +0000 and app/assets/images/getfile_button.png 2012-10-26 10:49:29 +0000 differ
=== modified file 'app/templates/charm-pre-configuration.handlebars'
--- app/templates/charm-pre-configuration.handlebars 2012-10-24 14:35:56 +0000
+++ app/templates/charm-pre-configuration.handlebars 2012-10-26 10:49:29 +0000
@@ -43,9 +43,14 @@
{{#if settings}}
<!-- Service configuration form -->
<div class="charm-section">
- <h4><i class="icon-chevron-right"></i> Service Settings</h4>
- <input class="config-file-upload" type="file">
- <button class="remove-config-file hidden">Remove File</button>
+ <h4>Service Settings<i class="icon-chevron-down"></i></h4>
+ <div class="config-file-upload control-group">
+ <input class="config-file-upload-widget" type="file">
+ <div>
+ <span class="config-file-upload-overlay">Use configuration file</span>
+ <span class="config-file-name"></span>
+ </div>
+ </div>
<div class="charm-settings">
<form>
<div id="service-config" class="collapsible">
=== modified file 'app/views/charm-search.js'
--- app/views/charm-search.js 2012-10-25 07:38:57 +0000
+++ app/views/charm-search.js 2012-10-26 10:49:29 +0000
@@ -15,10 +15,10 @@
icon = ev.currentTarget.one('i');
if (el.getStyle('height') === '0px') {
el.show('sizeIn', {duration: 0.25, width: null});
- icon.replaceClass('icon-chevron-right', 'icon-chevron-down');
+ icon.replaceClass('icon-chevron-up', 'icon-chevron-down');
} else {
el.hide('sizeOut', {duration: 0.25, width: null});
- icon.replaceClass('icon-chevron-down', 'icon-chevron-right');
+ icon.replaceClass('icon-chevron-down', 'icon-chevron-up');
}
};
@@ -188,9 +188,9 @@
events: {
'.btn.cancel': {click: 'goBack'},
'.btn.deploy': {click: 'onCharmDeployClicked'},
- '.remove-config-file': {click: 'onFileRemove'},
'.charm-section h4': {click: toggleSectionVisibility},
- '.config-file-upload': {change: 'onFileChange'},
+ '.config-file-upload-widget': {change: 'onFileChange'},
+ '.config-file-upload-overlay': {click: 'onOverlayClick'},
'.config-field': {focus: 'showDescription',
blur: 'hideDescription'},
'input.config-field[type=checkbox]':
@@ -239,27 +239,40 @@
this.tooltip.hide();
delete this.tooltip.field;
},
+ onOverlayClick: function(evt) {
+ var container = this.get('container');
+ if (this.configFileContent) {
+ this.onFileRemove();
+ } else {
+ container.one('.config-file-upload-widget').getDOMNode().click();
+ }
+ },
onFileChange: function(evt) {
+ var container = this.get('container');
console.log('onFileChange:', evt);
this.fileInput = evt.target;
var file = this.fileInput.get('files').shift(),
reader = new FileReader();
+ container.one('.config-file-name').setContent(file.name);
reader.onerror = Y.bind(this.onFileError, this);
reader.onload = Y.bind(this.onFileLoaded, this);
reader.readAsText(file);
+ container.one('.config-file-upload-overlay')
+ .setContent('Remove file');
},
- onFileRemove: function(evt) {
+ onFileRemove: function() {
var container = this.get('container');
this.configFileContent = null;
- container.one('.remove-config-file').addClass('hidden');
+ container.one('.config-file-name').setContent('');
container.one('.charm-settings').show();
// Replace the file input node. There does not appear to be any way
// to reset the element, so the only option is this rather crude
// replacement. It actually works well in practice.
- var button = container.one('.remove-config-file');
this.fileInput.replace(Y.Node.create('<input type="file"/>')
- .addClass('config-file-upload'));
- this.fileInput = container.one('.remove-config-file');
+ .addClass('config-file-upload-widget'));
+ this.fileInput = container.one('.config-file-upload-widget');
+ container.one('.config-file-upload-overlay')
+ .setContent('Use configuration file');
},
onFileLoaded: function(evt) {
this.configFileContent = evt.target.result;
@@ -278,9 +291,6 @@
}));
}
this.get('container').one('.charm-settings').hide();
- this.get('container').one('.remove-config-file')
- .removeClass('hidden');
- console.log(this.configFileContent);
},
onFileError: function(evt) {
console.log('onFileError:', evt);
=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less 2012-10-26 06:33:29 +0000
+++ lib/views/stylesheet.less 2012-10-26 10:49:29 +0000
@@ -6,9 +6,10 @@
@text-entry-color: #6d6e70;
@charm-panel-configure-title-color: #eee7d5;
@charm-panel-configure-name-color: #8f8f88;
-@charm-panel-deploy-button-color: #e45718;
-@charm-panel-cancel-button-color: #979694;
+@charm-panel-deploy-button-color: #dd4814;
+@charm-panel-cancel-button-color: #b8b8b8;
@charm-panel-separator-color: #aeaeae;
+@charm-panel-background-color: #eeeeee;
body {
margin-top: 87px;
@@ -732,7 +733,7 @@
.button-colors(@color) {
@gradient-start: lighten(@color, 5%);
- @gradient-end: darken(@color, 5%);
+ @gradient-end: darken(@color, 5%);
background-image: -ms-linear-gradient(top, @gradient-start, @gradient-end);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@gradient-start), to(@gradient-end));
background-image: -webkit-linear-gradient(top, @gradient-start, @gradient-end);
@@ -747,10 +748,10 @@
margin-left: 5px;
vertical-align: middle;
background-position: 0 0; /* Needed to defeat bootstrap btn:hover 0 -15px*/
- .button-colors(@charm-panel-deploy-button-color);
+ .button-colors(@charm-panel-deploy-button-color);
&, &:hover, &:active, &.active, &.disabled, &[disabled] {
background-color: @charm-panel-deploy-button-color;
- }
+ }
}
.charm-description btn.deploy {
float: right;
@@ -762,10 +763,10 @@
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);
- .button-colors(@charm-panel-cancel-button-color);
+ .button-colors(@charm-panel-cancel-button-color);
&, &:hover, &:active, &.active, &.disabled, &[disabled] {
background-color: @charm-panel-cancel-button-color;
- }
+ }
}
.charm-panel-configure-buttons {
border-bottom: 1px solid @charm-panel-separator-color;
@@ -800,11 +801,13 @@
margin-bottom: 1ex;
}
h4 {
- text-transform: uppercase;
- border-bottom: 1px dotted black;
+ border-bottom: 1px solid @label-color;
cursor: pointer;
margin-top: 1ex;
margin-bottom: 1ex;
+ i {
+ float: right;
+ }
}
h5 {
margin-top: 1ex;
@@ -831,7 +834,8 @@
}
&.config-variant {
padding: 1ex 1em;
-
+ background-color: @charm-panel-background-color;
+ font-size: 14px;
.control-group {
width: auto;
margin-bottom: 0;
@@ -846,14 +850,50 @@
width: auto;
margin-bottom: 1ex;
float: left;
- }
- .control-label:after {
- content: ":";
+ color: @label-color;
+ font-size: 14px;
}
.controls {
margin-left: auto;
margin-right: 0;
}
+ .config-field {
+ font-size: 16px;
+ color: text-entry-color;
+ }
+ .config-file-upload {
+ position: relative;
+ width: 252px;
+ height: 25px;
+ }
+ .config-file-upload-widget {
+ position: absolute;
+ top: 0;
+ left: 0;
+ visibility: hidden;
+ z-index: 0;
+ }
+ .config-file-upload-overlay {
+ background: url(/juju-ui/assets/images/getfile_button.png) no-repeat;
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding-left: 5px;
+ padding-top: 2px;
+ height: 25px;
+ width: 149px;
+ z-index: 2;
+ &:active {
+ background: url(/juju-ui/assets/images/getfile_button-pressed.png) no-repeat;
+ }
+ }
+ .config-file-name {
+ position: absolute;
+ top: 27px;
+ left: 5px;
+ width: auto;
+ z-index: 2;
+ }
.controls.boolean {
input {
margin-left: 1ex;
=== modified file 'test/test_charm_configuration.js'
--- test/test_charm_configuration.js 2012-10-20 18:17:23 +0000
+++ test/test_charm_configuration.js 2012-10-26 10:49:29 +0000
@@ -200,7 +200,7 @@
'Number of units to deploy for this service.');
tooltip.get('visible').should.equal(true);
controls.item(1).blur();
- controls.item(2).focus();
+ controls.item(3).focus();
tooltip.get('srcNode').get('text').should.equal('Option Zero');
tooltip.get('visible').should.equal(true);
});
@@ -294,9 +294,8 @@
charm.loaded = true;
view.render();
var _ = expect(container.one('.config-file-upload')).to.exist;
- // The remove button is conditional and should exist but be hidden.
- var remove_button = container.one('.remove-config-file');
- remove_button.hasClass('hidden').should.equal(true);
+ // The config file name should be ''.
+ container.one('.config-file-name').getContent().should.equal('');
});
it('must hide configuration panel when a file is uploaded', function() {
@@ -314,13 +313,13 @@
var view = new views.CharmConfigurationView(
{ container: container,
model: charm,
- tooltipDelay: 0 });
+ tooltipDelay: 0 }),
+ fileContents = 'yaml yaml yaml';
charm.loaded = true;
view.render();
- view.onFileLoaded({target: {result: 'yaml yaml yaml'}});
- view.configFileContent.should.equal('yaml yaml yaml');
+ view.onFileLoaded({target: {result: fileContents}});
+ view.configFileContent.should.equal(fileContents);
container.one('.charm-settings').getStyle('display').should.equal('none');
- container.one('.remove-config-file').hasClass('hidden').should.equal(false);
});
it('must remove configuration data when the button is pressed', function() {
@@ -340,12 +339,14 @@
tooltipDelay: 0 });
charm.loaded = true;
view.render();
- view.fileInput = container.one('.config-file-upload');
+ view.fileInput = container.one('.config-file-upload-widget');
view.configFileContent = 'how now brown cow';
- container.one('.remove-config-file').simulate('click');
+ container.one('.config-file-name').setContent('a.yaml');
+ container.one('.config-file-upload-overlay').simulate('click');
var _ = expect(view.configFileContent).to.not.exist;
- container.one('.remove-config-file').hasClass('hidden').should.equal(true);
- container.one('.config-file-upload').get('files').size().should.equal(0);
+ container.one('.config-file-name').getContent().should.equal('');
+ container.one('.config-file-upload-widget').get('files').size()
+ .should.equal(0);
});
it('must be able to deploy with configuration from a file', function() {
Follow ups
