yellow team mailing list archive
-
yellow team
-
Mailing list archive
-
Message #01517
[Merge] lp:~frankban/juju-gui/bug-1075679-charm-config-panel into lp:juju-gui
Francesco Banconi has proposed merging lp:~frankban/juju-gui/bug-1075679-charm-config-panel into lp:juju-gui.
Requested reviews:
Juju GUI Hackers (juju-gui)
Related bugs:
Bug #1075679 in juju-ui: "charm panel configuration pane accordion controls are not to visual design"
https://bugs.launchpad.net/juju-gui/+bug/1075679
For more details, see:
https://code.launchpad.net/~frankban/juju-gui/bug-1075679-charm-config-panel/+merge/133657
Charm config panel visual design fixes.
The charm configuration panel now should match UX wireframe.
This branch also contains fixes to the configuration
section hiding when a config file is uploaded.
Also introduced LESS mixins for border radii and box shadows.
Added "docstrings" to relevant charm panel methods.
https://codereview.appspot.com/6827066/
--
https://code.launchpad.net/~frankban/juju-gui/bug-1075679-charm-config-panel/+merge/133657
Your team Juju GUI Hackers is requested to review the proposed merge of lp:~frankban/juju-gui/bug-1075679-charm-config-panel into lp:juju-gui.
=== modified file 'app/templates/charm-pre-configuration.handlebars'
--- app/templates/charm-pre-configuration.handlebars 2012-11-07 14:40:38 +0000
+++ app/templates/charm-pre-configuration.handlebars 2012-11-09 12:02:24 +0000
@@ -44,16 +44,16 @@
<!-- Service configuration form -->
<div class="charm-section">
<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 class="collapsible">
+ <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>
- <div class="charm-settings">
- <form>
- <div id="service-config" class="collapsible">
+ <form class="charm-settings">
+ <div id="service-config">
{{> service-config}}
</div>
</form>
=== modified file 'app/views/charm-panel.js'
--- app/views/charm-panel.js 2012-11-07 13:12:18 +0000
+++ app/views/charm-panel.js 2012-11-09 12:02:24 +0000
@@ -591,7 +591,14 @@
this.tooltip.hide();
delete this.tooltip.field;
},
- /** Pass clicks on the overlay on to the correct recipient. */
+ /**
+ * Pass clicks on the overlay on to the correct recipient.
+ * The recipient can be the upload widget or the file remove one.
+ *
+ * @method onOverlayClick
+ * @param {Object} evt An event object.
+ * @return {undefined} Dispatches only.
+ */
onOverlayClick: function(evt) {
var container = this.get('container');
if (this.configFileContent) {
@@ -600,6 +607,14 @@
container.one('.config-file-upload-widget').getDOMNode().click();
}
},
+ /**
+ * Handle the file upload click event.
+ * Call onFileLoaded or onFileError if an error occurs during upload.
+ *
+ * @method onFileChange
+ * @param {Object} evt An event object.
+ * @return {undefined} Mutates only.
+ */
onFileChange: function(evt) {
var container = this.get('container');
console.log('onFileChange:', evt);
@@ -613,6 +628,13 @@
container.one('.config-file-upload-overlay')
.setContent('Remove file');
},
+ /**
+ * Handle the file remove click event.
+ * Restore the file upload widget on click.
+ *
+ * @method onFileRemove
+ * @return {undefined} Mutates only.
+ */
onFileRemove: function() {
var container = this.get('container');
this.configFileContent = null;
@@ -624,9 +646,20 @@
this.fileInput.replace(Y.Node.create('<input type="file"/>')
.addClass('config-file-upload-widget'));
this.fileInput = container.one('.config-file-upload-widget');
- container.one('.config-file-upload-overlay')
- .setContent('Use configuration file');
+ var overlay = container.one('.config-file-upload-overlay');
+ overlay.setContent('Use configuration file');
+ // Ensure the charm section height is correctly restored.
+ overlay.ancestor('.collapsible')
+ .show('sizeIn', {duration: 0.25, width: null});
},
+ /**
+ * Callback called when a file is correctly uploaded.
+ * Hide the charm configuration section.
+ *
+ * @method onFileLoaded
+ * @param {Object} evt An event object.
+ * @return {undefined} Mutates only.
+ */
onFileLoaded: function(evt) {
this.configFileContent = evt.target.result;
@@ -645,6 +678,14 @@
}
this.get('container').one('.charm-settings').hide();
},
+ /**
+ * Callback called when an error occurs during file upload.
+ * Hide the charm configuration section.
+ *
+ * @method onFileError
+ * @param {Object} evt An event object (with a "target.error" attr).
+ * @return {undefined} Mutates only.
+ */
onFileError: function(evt) {
console.log('onFileError:', evt);
var msg;
=== modified file 'lib/views/stylesheet.less'
--- lib/views/stylesheet.less 2012-11-08 15:50:13 +0000
+++ lib/views/stylesheet.less 2012-11-09 12:02:24 +0000
@@ -29,6 +29,18 @@
font-family: @font-family;
}
+.create-border-radius(@radius) {
+ -moz-border-radius: @radius;
+ -webkit-border-radius: @radius;
+ border-radius: @radius;
+}
+
+.create-box-shadow(@arguments) {
+ -moz-box-shadow: @arguments;
+ -webkit-box-shadow: @arguments;
+ box-shadow: @arguments;
+}
+
.create-button(@gradient-start, @gradient-end, @shadow-color, @v-pos) {
@blur: 2px;
background-image: -ms-linear-gradient(top, @gradient-start, @gradient-end);
@@ -38,21 +50,15 @@
background-image: -moz-linear-gradient(top, @gradient-start, @gradient-end);
background-image: linear-gradient(top, @gradient-start, @gradient-end);
background-repeat: repeat-x;
- -moz-box-shadow: 0 (@v-pos + 3) @blur -@blur @shadow-color inset,
- 2px 0 3px -2px @shadow-color inset, -2px 0 3px -2px @shadow-color inset;
- -webkit-box-shadow: 0 (@v-pos + 3) @blur -@blur @shadow-color inset,
- 2px 0 3px -2px @shadow-color inset, -2px 0 3px -2px @shadow-color inset;
- box-shadow: 0 (@v-pos + 3) @blur -@blur @shadow-color inset,
- 2px 0 3px -2px @shadow-color inset, -2px 0 3px -2px @shadow-color inset;
- @border-radii: ~"6px / 7px";
- -moz-border-radius: @border-radii;
- -webkit-border-radius: @border-radii;
- border-radius: @border-radii;
+ // Using a variable here because LESS strips commas in mixin args.
+ @box-shadow: 0 (@v-pos + 3) @blur -@blur @shadow-color inset,
+ 2px 0 3px -2px @shadow-color inset,
+ -2px 0 3px -2px @shadow-color inset;
+ .create-box-shadow(@box-shadow);
+ .create-border-radius(~"6px / 7px");
border: none;
}
-
-
i.sprite {
display: inline-block;
vertical-align: middle;
@@ -219,15 +225,8 @@
display: none;
background-color: @background_color;
color: #fdf6e3;
-
- border-radius: @border_radius;
- -moz-border-radius: @border_radius;
- -webkit-border-radius: @border_radius;
-
- box-shadow: -2px 4px 4px 0 rgba(0, 0, 0, 0.5);
- -moz-box-shadow: -2px 4px 4px 0 rgba(0, 0, 0, 0.5);
- -webkit-box-shadow: -2px 4px 4px 0 rgba(0, 0, 0, 0.5);
-
+ .create-border-radius(@border_radius);
+ .create-box-shadow(-2px 4px 4px 0 rgba(0, 0, 0, 0.5));
top: 0;
left: 0;
position: absolute;
@@ -271,9 +270,7 @@
cursor: pointer;
line-height: 32px;
padding: 5px 5px 5px 5px;
- border-radius: @border_radius;
- -moz-border-radius: @border_radius;
- -webkit-border-radius: @border_radius;
+ .create-border-radius(@border_radius);
&.view-service {
background-image: url(/juju-ui/assets/images/icons/icon_noshadow_view.png);
@@ -379,9 +376,7 @@
.unit (@min_height: 20px, @border_radius:3px) {
padding: 5px;
- -webkit-border-radius: @border_radius;
- -moz-border-radius: @border_radius;
- border-radius: @border_radius;
+ .create-border-radius(@border_radius);
margin-bottom: 0px;
min-height: @min_height;
cursor: pointer;
@@ -731,12 +726,8 @@
background: white;
padding: 1.6em;
border: solid black 2px;
- -webkit-border-radius: 6px;
- -moz-border-radius: 6px;
- border-radius: 6px;
- -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
- -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
- box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+ .create-border-radius(6px);
+ .create-box-shadow(0 3px 7px rgba(0, 0, 0, 0.3));
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
@@ -926,11 +917,16 @@
&.config-variant {
font-size: 14px;
border-top: 1px solid @charm-paneel-border-top-color;
+ .charm-entry {
+ padding: 5px 12px;
+ &:nth-of-type(2) {
+ margin-bottom: 15px;
+ }
+ }
.control-group {
width: auto;
margin-bottom: 0;
margin-top: 1ex;
- padding: 0px 12px;
clear: both;
}
.control-description {
@@ -946,6 +942,22 @@
.controls {
margin-left: auto;
margin-right: 0;
+ input[type=text] {
+ color: @text-entry-color;
+ font-style: italic;
+ height: 15px;
+ width: 250px;
+ margin: 0;
+ .create-border-radius(6px);
+ // Using a variable here because LESS strips commas in
+ // mixin args.
+ @box-shadow: 0 1px 3px #959595 inset, 0 1px 0 white;
+ .create-box-shadow(@box-shadow);
+ }
+ input[type=checkbox] {
+ margin-left: 1ex;
+ margin-top: 0.7ex;
+ }
}
.config-field {
font-size: 16px;
@@ -955,6 +967,8 @@
position: relative;
width: 252px;
height: 25px;
+ margin-bottom: 20px;
+ margin-top: 20px;
}
.config-file-upload-widget {
position: absolute;
@@ -965,6 +979,8 @@
}
.config-file-upload-overlay {
background: url(/juju-ui/assets/images/getfile_button.png) no-repeat;
+ color: #4c4c4c;
+ font-family: @font-family-medium;
position: absolute;
top: 0;
left: 0;
@@ -985,12 +1001,6 @@
width: auto;
z-index: 2;
}
- .controls.boolean {
- input {
- margin-left: 1ex;
- margin-top: 0.7ex;
- }
- }
.btn {
margin-top: 5px;
}
@@ -1271,9 +1281,7 @@
background-color: white;
border: solid 1px black;
padding: 0.2em 0.5em 0.3em;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
+ .create-border-radius(3px);
min-width: 20px;
max-width: 400px;
}
@@ -1281,10 +1289,10 @@
.charm-panel-configure {
background-image: url(/juju-ui/assets/images/configure-cog.png);
background-repeat: no-repeat;
- background-position: 230px 42px;
+ background-position: 230px 38px;
border-top: 2px solid #dd4814;
background-color: #2F2A27;
- height: 93px;
+ height: 90px;
padding-left: 8px;
.title {
font-weight: lighter;
=== modified file 'undocumented'
--- undocumented 2012-11-08 20:11:46 +0000
+++ undocumented 2012-11-09 12:02:24 +0000
@@ -75,10 +75,6 @@
app/views/charm-panel.js mouseenter
app/views/charm-panel.js mouseleave
app/views/charm-panel.js onCharmDeployClicked
-app/views/charm-panel.js onFileChange
-app/views/charm-panel.js onFileError
-app/views/charm-panel.js onFileLoaded
-app/views/charm-panel.js onFileRemove
app/views/charm-panel.js render
app/views/charm-panel.js setDefaultSeries
app/views/charm-panel.js setPanel
Follow ups
