Skip to content
This repository has been archived by the owner on May 12, 2021. It is now read-only.

Added ability to change the deployer bar height mode #400

Merged
merged 1 commit into from Jun 24, 2014
Merged

Added ability to change the deployer bar height mode #400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
56 changes: 46 additions & 10 deletions app/templates/deployer-bar.handlebars
View file
Open in desktop
Expand Up @@ -32,7 +32,29 @@
</div>
<aside class="panel changes">
<header>
<ul class="action-list">
<ul class="action-list right">
<li>
<span class="link change-mode min" data-mode="min">
<i class="sprite DB-expand-01"></i>
</span>
</li>
<li>
<span class="link change-mode mid" data-mode="mid">
<i class="sprite DB-expand-02"></i>
</span>
</li>
<li>
<span class="link change-mode max" data-mode="max">
<i class="sprite DB-expand-03"></i>
</span>
</li>
<li>
<span class="link close">
<i class="sprite DB-close"></i>
</span>
</li>
</ul>
<ul class="action-list left">
<li class="hide">
<a href="" class="link">
{{ changeCount }} changes
Expand All @@ -47,15 +69,29 @@
</aside>
<aside class="panel summary">
<header>
<h2 class="title">The following changes will be deployed</h2>
<div class="right">
<ul class="action-list">
<li><a href="" class="min"><i class="sprite DB-expand-01"></i></a></li>
<li><a href="" class="mid"><i class="sprite DB-expand-02"></i></a></li>
<li><a href="" class="max"><i class="sprite DB-expand-03 active"></i></a></li>
<li><a href="" class="close"><i class="sprite DB-close"></i></a></li>
</ul>
</div>
The following changes will be deployed
<ul class="action-list right">
<li>
<span class="link change-mode min" data-mode="min">
<i class="sprite DB-expand-01"></i>
</span>
</li>
<li>
<span class="link change-mode mid" data-mode="mid">
<i class="sprite DB-expand-02"></i>
</span>
</li>
<li>
<span class="link change-mode max" data-mode="max">
<i class="sprite DB-expand-03"></i>
</span>
</li>
<li>
<span class="link close">
<i class="sprite DB-close"></i>
</span>
</li>
</ul>
</header>
<section>
<div class="content">
Expand Down
25 changes: 25 additions & 0 deletions app/widgets/deployer-bar.js
View file
Open in desktop
Expand Up @@ -49,6 +49,9 @@ YUI.add('deployer-bar', function(Y) {
'.summary .close': {
click: 'hideSummary'
},
'.changes .close': {
click: 'clickHideChanges'
},
'.cancel-button': {
click: 'hideSummary'
},
Expand All @@ -72,6 +75,9 @@ YUI.add('deployer-bar', function(Y) {
},
'.import-file': {
change: '_deployFile'
},
'.action-list .change-mode': {
click: '_setMode'
}
},

Expand Down Expand Up @@ -144,6 +150,25 @@ YUI.add('deployer-bar', function(Y) {
this._showChanges();
},

/**
Set the display mode.

@method _setMode
@param {Object} e The event object.
*/
_setMode: function(e) {
var container = this.get('container');
var existing = container.get('className').split(' ');
var mode = e.currentTarget.getData('mode');
// Remove old mode classes.
existing.forEach(function(className) {
if (className.indexOf('mode-') === 0) {
container.removeClass(className);
}
});
container.addClass('mode-' + mode);
},

/**
Display a list of the recent changes.

Expand Down
86 changes: 46 additions & 40 deletions lib/views/deployer-bar.less
View file
Open in desktop
Expand Up @@ -2,6 +2,22 @@
@panel-header: 50px;
@paper-dark: #ebecee url(/juju-ui/assets/images/non-sprites/paper-bg-dark.jpg) repeat 0 0;

&.mode-min,
&.mode-mid {
.panel {
top: auto;
}
}
&.mode-min .panel {
height: 50px + @panel-header;
}
&.mode-mid .panel {
height: 290px + @panel-header;
}
.panel,
&.mode-max .panel {
top: @navbar-height + @environment-header-height + 10px;
}
time {
color: #bfbab5;
}
Expand Down Expand Up @@ -138,16 +154,39 @@
header {
.border-box;
height: @panel-header;
padding: 0 20px;
background: @paper-dark;
border-bottom: 1px solid #D9D9D9;
line-height: 50px;

.action-list {
li {
border: 0;
line-height: 50px;
height: auto;
padding: 0 5px;

.close {
display: block;
margin-left: 10px;
}
}
}
}
section {
position: absolute;
top: @panel-header;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
}
}
.panel.changes {
.customize-scrollbar;

header {
.action-list .hide {
float: none;
padding-left: none;

.less {
Expand All @@ -160,47 +199,13 @@
}
}
.panel.summary {
top: @navbar-height + @environment-header-height + 10px;

header {
padding: 0 20px;
line-height: 50px;
}
section {
position: absolute;
top: @panel-header;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;

.content {
padding: 5px 0 20px 0;
width: 600px;
margin: 0 auto;
}
}
.title {
display: inline;
font-size: 14px;
}
ul.action-list {
li {
border: 0;
line-height: 50px;
height: auto;
padding: 0 5px;

a.close {
display: block;
margin-left: 10px;
}
}
}
.right {
height: auto;
margin-right: 0;
}
.summary-panel {
@box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
.create-box-shadow(@box-shadow);
Expand Down Expand Up @@ -261,6 +266,12 @@
.list {
display: none;
border-top: 1px solid #D9D9D9;

.change-list {
li:last-child {
border-bottom: none;
}
}
}
}
}
Expand Down Expand Up @@ -306,19 +317,14 @@
display: none;
}
}

.change-list {
overflow: auto;
max-height: 400px;
margin: 0;
list-style: none;

li {
border-bottom: 1px solid #D9D9D9;

&:last-child {
border-bottom: none;
}
&,
span {
height: 40px;
Expand Down
18 changes: 18 additions & 0 deletions test/test_deployer_bar.js
View file
Open in desktop
Expand Up @@ -350,4 +350,22 @@ describe('deployer bar view', function() {
assert.equal(importStub.calledOnce(), true,
'deployBundleFiles should have been called');
});

it('can set the height mode to small', function() {
assert.equal(container.hasClass('mode-min'), false);
container.one('.action-list .min').simulate('click');
assert.equal(container.hasClass('mode-min'), true);
});

it('can set the height mode to medium', function() {
assert.equal(container.hasClass('mode-mid'), false);
container.one('.action-list .mid').simulate('click');
assert.equal(container.hasClass('mode-mid'), true);
});

it('can set the height mode to large', function() {
assert.equal(container.hasClass('mode-max'), false);
container.one('.action-list .max').simulate('click');
assert.equal(container.hasClass('mode-max'), true);
});
});