Skip to content

Commit b9a459c

Browse files
bfederlebfederle
committed
Regions UI: Move to separate source file, add real data, update style
-Move region UI code to ui-custom/regions.js, to separate from core UI rendering -Pull real data and endpoint URL on region select list, from data provider in scripts/regions.js -Make region selector have same appearance as notifications box
1 parent 84b73b9 commit b9a459c

5 files changed

Lines changed: 134 additions & 106 deletions

File tree

‎ui/css/cloudstack3.css‎

Lines changed: 25 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -11102,29 +11102,28 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
1110211102
-webkit-border-radius: 4px;
1110311103
-khtml-border-radius: 4px;
1110411104
border-radius: 4px;
11105-
width: 281px;
11106-
background: #E4E4E4;
11107-
height: 327px;
11108-
/*+placement:shift 72px 49px;*/
11105+
width: 318px;
11106+
background: url(../images/bg-notifications.png) center;
11107+
height: 372px;
11108+
/*+placement:shift 321px 49px;*/
1110911109
position: relative;
11110-
left: 72px;
11110+
left: 321px;
1111111111
top: 49px;
1111211112
position: absolute;
1111311113
z-index: 1000;
11114-
/*+box-shadow:0px 3px 11px #171717;*/
11115-
-moz-box-shadow: 0px 3px 11px #171717;
11116-
-webkit-box-shadow: 0px 3px 11px #171717;
11117-
-o-box-shadow: 0px 3px 11px #171717;
11118-
box-shadow: 0px 3px 11px #171717;
1111911114
}
1112011115

1112111116
.region-selector h2 {
11122-
color: #283139;
11123-
text-shadow: 0px 1px 3px #FFFFFF;
11124-
margin: 5px 0 12px;
11117+
color: #FFFFFF;
1112511118
text-align: center;
11119+
font-size: 21px;
1112611120
letter-spacing: 1px;
11127-
font-size: 18px;
11121+
/*+text-shadow:0px 1px 2px #000000;*/
11122+
-moz-text-shadow: 0px 1px 2px #000000;
11123+
-webkit-text-shadow: 0px 1px 2px #000000;
11124+
-o-text-shadow: 0px 1px 2px #000000;
11125+
text-shadow: 0px 1px 2px #000000;
11126+
margin: 31px 0 14px;
1112811127
}
1112911128

1113011129
.region-selector .buttons {
@@ -11134,16 +11133,16 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
1113411133
}
1113511134

1113611135
.region-selector .buttons .button.close {
11136+
background: url(../images/gradients.png) 0px -317px;
1113711137
float: right;
11138-
cursor: pointer;
11139-
background: url(../images/bg-gradients.png) 0px -270px;
11138+
margin-right: 10px;
11139+
border-bottom: 1px solid #232323;
1114011140
/*+border-radius:4px;*/
1114111141
-moz-border-radius: 4px;
1114211142
-webkit-border-radius: 4px;
1114311143
-khtml-border-radius: 4px;
1114411144
border-radius: 4px;
11145-
border: 1px solid #B1B1B1;
11146-
padding: 8px 17px 8px 18px;
11145+
padding: 8px;
1114711146
}
1114811147

1114911148
.region-selector .buttons .button.close:hover {
@@ -11155,16 +11154,17 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
1115511154
}
1115611155

1115711156
.region-selector .buttons .button.close span {
11158-
color: #636363;
11159-
/*+text-shadow:none;*/
11160-
-moz-text-shadow: none;
11161-
-webkit-text-shadow: none;
11162-
-o-text-shadow: none;
11163-
text-shadow: none;
11157+
color: #FFFFFF;
11158+
font-weight: bold;
11159+
letter-spacing: 1px;
11160+
/*+text-shadow:0px 1px 2px #000000;*/
11161+
-moz-text-shadow: 0px 1px 2px #000000;
11162+
-webkit-text-shadow: 0px 1px 2px #000000;
11163+
-o-text-shadow: 0px 1px 2px #000000;
11164+
text-shadow: 0px 1px 2px #000000;
1116411165
}
1116511166

1116611167
.region-selector .buttons .button.close:hover span {
11167-
color: #000000;
1116811168
}
1116911169

1117011170
.region-selector ul {
@@ -11212,16 +11212,6 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
1121211212
text-shadow: 0px 1px #FFFFFF;
1121311213
}
1121411214

11215-
.region-selector .top-arrow {
11216-
width: 76px;
11217-
height: 12px;
11218-
background: url(../images/sprites.png) -107px -1312px;
11219-
/*+placement:shift 78px -12px;*/
11220-
position: relative;
11221-
left: 78px;
11222-
top: -12px;
11223-
}
11224-
1122511215
.region-switcher .icon {
1122611216
display: block;
1122711217
width: 100%;

‎ui/index.jsp‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1657,6 +1657,7 @@ under the License.
16571657
<script type="text/javascript" src="scripts/instances.js?t=<%=now%>"></script>
16581658
<script type="text/javascript" src="scripts/events.js?t=<%=now%>"></script>
16591659
<script type="text/javascript" src="scripts/regions.js?t=<%=now%>"></script>
1660+
<script type="text/javascript" src="scripts/ui-custom/regions.js?t=<%=now%>"></script>
16601661
<script type="text/javascript" src="scripts/ui-custom/ipRules.js?t=<%=now%>"></script>
16611662
<script type="text/javascript" src="scripts/ui-custom/enableStaticNAT.js?t=<%=now%>"></script>
16621663
<script type="text/javascript" src="scripts/ui-custom/securityRules.js?t=<%=now%>"></script>

‎ui/scripts/regions.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,20 @@
1818
cloudStack.sections.regions = {
1919
title: 'label.menu.regions',
2020
id: 'regions',
21+
regionSelector: {
22+
dataProvider: function(args) {
23+
$.ajax({
24+
url: createURL('listRegions&listAll=true'),
25+
success: function(json) {
26+
var regions = json.listregionsresponse.region
27+
28+
args.response.success({
29+
data: regions ? regions : []
30+
});
31+
}
32+
});
33+
}
34+
},
2135
listView: {
2236
section: 'regions',
2337
fields: {

‎ui/scripts/ui-custom/regions.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
(function($, cloudStack) {
2+
$(window).bind('cloudStack.ready', function() {
3+
// Region switcher
4+
var $regionList = $('<ul>');
5+
6+
// Get region listing
7+
var refreshRegions = function() {
8+
$regionList.find('li').remove();
9+
cloudStack.sections.regions.regionSelector.dataProvider({
10+
response: {
11+
success: function(args) {
12+
var data = args.data;
13+
14+
$(data).each(function() {
15+
var region = this;
16+
var $li = $('<li>').append($('<span>').html(_s(region.name)));
17+
18+
$li.data('region-data', region);
19+
$regionList.append($li);
20+
});
21+
}
22+
}
23+
});
24+
};
25+
26+
$(window).bind('cloudStack.refreshRegions', refreshRegions);
27+
28+
var $regionSelector = $('<div>').addClass('region-selector')
29+
.append($('<div>').addClass('top-arrow'))
30+
.append($('<h2>').html(_l('label.menu.regions')))
31+
.append($regionList)
32+
.append(
33+
$('<div>').addClass('buttons')
34+
.append(
35+
$('<div>').addClass('button close').append($('<span>').html(_l('label.close')))
36+
)
37+
)
38+
.hide();
39+
var $regionSwitcherButton = $('<div>').addClass('region-switcher')
40+
.attr('title', 'Select region')
41+
.append(
42+
$('<span>').addClass('icon').html('&nbsp;')
43+
);
44+
45+
var closeRegionSelector = function(args) {
46+
$regionSwitcherButton.removeClass('active');
47+
$regionSelector.fadeOut(args ? args.complete : null);
48+
$('body > .overlay').fadeOut(function() { $('body > .overlay').remove() });
49+
};
50+
51+
var switchRegion = function(url) {
52+
53+
closeRegionSelector({
54+
complete: function() {
55+
$('#container').prepend($('<div>').addClass('loading-overlay'));
56+
57+
document.location.href = url;
58+
}
59+
});
60+
};
61+
62+
$regionList.click(function(event) {
63+
var $target = $(event.target);
64+
var $li = $target.closest('li');
65+
66+
if ($li.size()) {
67+
var url = $li.data('region-data').endpoint;
68+
69+
switchRegion(url);
70+
}
71+
});
72+
73+
$regionSwitcherButton.click(function() {
74+
if ($regionSwitcherButton.hasClass('active')) {
75+
closeRegionSelector();
76+
} else {
77+
$regionSwitcherButton.addClass('active');
78+
$regionSelector.fadeIn('fast').overlay({ closeAction: closeRegionSelector });
79+
}
80+
});
81+
82+
$regionSelector.find('.button.close').click(function() {
83+
closeRegionSelector();
84+
});
85+
86+
$('#header .controls .view-switcher.button:last').after($regionSwitcherButton, $regionSelector);
87+
refreshRegions();
88+
});
89+
}(jQuery, cloudStack));
90+

‎ui/scripts/ui/core.js‎

Lines changed: 4 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -127,75 +127,6 @@
127127
.append($('<span>').html(_l('label.notifications')))
128128
.notifications();
129129

130-
// Region switcher
131-
var $regionList = $('<ul>');
132-
133-
// Append dummy content for now
134-
$regionList.append($('<li>').append($('<span>').html('USA')));
135-
$regionList.append($('<li>').append($('<span>').html('Canada')));
136-
$regionList.append($('<li>').append($('<span>').html('Europe')));
137-
$regionList.append($('<li>').append($('<span>').html('Asia')));
138-
$regionList.append($('<li>').append($('<span>').html('USA')));
139-
$regionList.append($('<li>').append($('<span>').html('Canada')));
140-
$regionList.append($('<li>').append($('<span>').html('Europe')));
141-
142-
var $regionSelector = $('<div>').addClass('region-selector')
143-
.append($('<div>').addClass('top-arrow'))
144-
.append($('<h2>').html(_l('label.menu.regions')))
145-
.append($regionList)
146-
.append(
147-
$('<div>').addClass('buttons')
148-
.append(
149-
$('<div>').addClass('button close').append($('<span>').html(_l('label.close')))
150-
)
151-
)
152-
.hide();
153-
var $regionSwitcherButton = $('<div>').addClass('region-switcher')
154-
.attr('title', 'Select region')
155-
.append(
156-
$('<span>').addClass('icon').html('&nbsp;')
157-
);
158-
159-
var closeRegionSelector = function(args) {
160-
$regionSwitcherButton.removeClass('active');
161-
$regionSelector.fadeOut(args ? args.complete : null);
162-
$('body > .overlay').fadeOut(function() { $('body > .overlay').remove() });
163-
};
164-
165-
var switchRegion = function(url) {
166-
closeRegionSelector({
167-
complete: function() {
168-
$('#container').prepend($('<div>').addClass('loading-overlay'));
169-
170-
document.location.href = url;
171-
}
172-
});
173-
};
174-
175-
$regionList.click(function(event) {
176-
var $target = $(event.target);
177-
var $li = $target.closest('li');
178-
179-
if ($li.size()) {
180-
var url = 'http://10.223.77.3:8080/client';
181-
182-
switchRegion(url);
183-
}
184-
});
185-
186-
$regionSwitcherButton.click(function() {
187-
if ($regionSwitcherButton.hasClass('active')) {
188-
closeRegionSelector();
189-
} else {
190-
$regionSwitcherButton.addClass('active');
191-
$regionSelector.fadeIn('fast').overlay({ closeAction: closeRegionSelector });
192-
}
193-
});
194-
195-
$regionSelector.find('.button.close').click(function() {
196-
closeRegionSelector();
197-
});
198-
199130
// Project switcher
200131
var $viewSwitcher = $('<div>').addClass('button view-switcher')
201132
.append(
@@ -204,6 +135,8 @@
204135
.html(_l('label.default.view'))
205136
.prepend(
206137
$('<span>').addClass('icon').html('&nbsp;')
138+
139+
207140
)
208141
)
209142
.append(
@@ -288,8 +221,6 @@
288221
$('<div>').addClass('logo'),
289222
$('<div>').addClass('controls')
290223
.append($notificationArea)
291-
.append($regionSwitcherButton)
292-
.append($regionSelector)
293224
.append($viewSwitcher)
294225
.append($projectSelect)
295226
.append($userInfo)
@@ -426,6 +357,8 @@
426357

427358
// Hide logo conditionally
428359
if (!args.hasLogo) $('#header, #header .controls').addClass('nologo');
360+
361+
$(window).trigger('cloudStack.ready');
429362

430363
return this;
431364
};

0 commit comments

Comments
 (0)