Skip to content

Commit 5e94b0d

Browse files
bfederlebfederle
committed
Implement tag UI widget
Create UI for handling new tag API. This currently supports the detail view and multi-edit To enable tags UI, add a 'tags' object to each detailView/multiEdit configuration: tabs: { ... details: { ... tags: { actions: { add: function(args) { setTimeout(function() { args.response.success({ notification: { desc: 'Add tags for instance', poll: testData.notifications.testPoll } }); }, 500); }, remove: function(args) { args.response.success({ notification: { desc: 'Remove tags for instance', poll: testData.notifications.testPoll } }); } }, dataProvider: function(args) { args.response.success({ data: [ { id: '1', key: 'user', value: 'brian' }, { id: '2', key: 'region', value: 'usa' } ] }); } } ... Conflicts: ui/css/cloudstack3.css ui/scripts/ui/widgets/tagger.js
1 parent 88f7872 commit 5e94b0d

4 files changed

Lines changed: 446 additions & 9 deletions

File tree

‎ui/css/cloudstack3.css‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8952,6 +8952,204 @@ div.panel.ui-dialog div.list-view div.fixed-header {
89528952
background: #DFE1E3;
89538953
}
89548954

8955+
/*Tagger*/
8956+
.tagger {
8957+
width: 94%;
8958+
margin: auto;
8959+
padding-bottom: 12px;
8960+
background: #F2F0F0;
8961+
border: 1px solid #CFC9C9;
8962+
/*+placement:shift -4px 0px;*/
8963+
position: relative;
8964+
left: -4px;
8965+
top: 0px;
8966+
}
8967+
8968+
.tagger .field {
8969+
width: 179px;
8970+
float: left;
8971+
position: relative;
8972+
}
8973+
8974+
.tagger .tag-info {
8975+
font-size: 11px;
8976+
color: #757575;
8977+
margin-top: 12px;
8978+
margin-left: 8px;
8979+
}
8980+
8981+
.tagger .tag-info.title {
8982+
font-size: 11px;
8983+
color: #6F9BF0;
8984+
margin-bottom: 5px;
8985+
}
8986+
8987+
.tagger form {
8988+
margin: 12px 9px 0px;
8989+
}
8990+
8991+
.tagger.readonly form {
8992+
display: none;
8993+
}
8994+
8995+
.tagger form label {
8996+
display: block;
8997+
float: left;
8998+
width: 28px;
8999+
text-align: right;
9000+
font-size: 10px;
9001+
color: #394552;
9002+
margin-right: 9px;
9003+
/*+placement:shift 5px 8px;*/
9004+
position: relative;
9005+
left: 5px;
9006+
top: 8px;
9007+
}
9008+
9009+
.tagger form label.error {
9010+
position: absolute;
9011+
color: #FF0000;
9012+
left: 42px;
9013+
top: 29px;
9014+
/*[empty]background-color:;*/
9015+
}
9016+
9017+
.tagger form input {
9018+
padding: 4px;
9019+
background: #FFFFFF;
9020+
border: 1px solid #808080;
9021+
/*+border-radius:4px;*/
9022+
-moz-border-radius: 4px;
9023+
-webkit-border-radius: 4px;
9024+
-khtml-border-radius: 4px;
9025+
border-radius: 4px;
9026+
}
9027+
9028+
.tagger form input[type=submit] {
9029+
background: url(../images/bg-gradients.png) repeat-x 0px -220px;
9030+
cursor: pointer;
9031+
color: #FFFFFF;
9032+
/*+text-shadow:0px -1px 2px #000000;*/
9033+
-moz-text-shadow: 0px -1px 2px #000000;
9034+
-webkit-text-shadow: 0px -1px 2px #000000;
9035+
-o-text-shadow: 0px -1px 2px #000000;
9036+
text-shadow: 0px -1px 2px #000000;
9037+
border: none;
9038+
/*+border-radius:4px;*/
9039+
-moz-border-radius: 4px;
9040+
-webkit-border-radius: 4px;
9041+
-khtml-border-radius: 4px;
9042+
border-radius: 4px;
9043+
padding: 7px 25px 7px 26px;
9044+
margin-left: 16px;
9045+
}
9046+
9047+
.tagger form input[type=submit]:hover {
9048+
background-position: 0px -946px;
9049+
}
9050+
9051+
.tagger ul {
9052+
display: block;
9053+
width: 96%;
9054+
margin: 16px auto auto;
9055+
/*+border-radius:2px;*/
9056+
-moz-border-radius: 2px;
9057+
-webkit-border-radius: 2px;
9058+
-khtml-border-radius: 2px;
9059+
border-radius: 2px;
9060+
overflow: auto;
9061+
padding-bottom: 10px;
9062+
border: 1px solid #D2D2D2;
9063+
background: #FFFFFF;
9064+
/*+box-shadow:inset 0px 0px 10px #DCDCDC;*/
9065+
-moz-box-shadow: inset 0px 0px 10px #DCDCDC;
9066+
-webkit-box-shadow: inset 0px 0px 10px #DCDCDC;
9067+
-o-box-shadow: inset 0px 0px 10px #DCDCDC;
9068+
box-shadow: inset 0px 0px 10px #DCDCDC;
9069+
}
9070+
9071+
.tagger.readonly ul {
9072+
}
9073+
9074+
.tagger ul li {
9075+
background: #DFDFDF 0px 4px;
9076+
height: 15px;
9077+
padding: 0px 18px 0 7px;
9078+
display: inline-block;
9079+
float: left;
9080+
margin-left: 7px;
9081+
margin-right: 2px;
9082+
margin-top: 5px;
9083+
/*+border-radius:4px;*/
9084+
-moz-border-radius: 4px;
9085+
-webkit-border-radius: 4px;
9086+
-khtml-border-radius: 4px;
9087+
border-radius: 4px;
9088+
/*+placement:shift 0px 2px;*/
9089+
position: relative;
9090+
left: 0px;
9091+
top: 2px;
9092+
}
9093+
9094+
.tagger ul li span {
9095+
color: #000000;
9096+
}
9097+
9098+
.tagger ul li span.label {
9099+
font-size: 10px;
9100+
position: relative;
9101+
left: 15px;
9102+
top: -2px;
9103+
}
9104+
9105+
.tagger.readonly ul li span.label {
9106+
left: 6px;
9107+
}
9108+
9109+
.tagger ul li span.remove {
9110+
width: 15px !important;
9111+
overflow: hidden !important;
9112+
height: 11px !important;
9113+
background: #DFDFDF url(../images/sprites.png) no-repeat -596px -1183px;
9114+
display: block;
9115+
top: 0px !important;
9116+
left: -3px !important;
9117+
text-indent: 4px;
9118+
padding: 4px 0px 0px 8px;
9119+
font-size: 8px;
9120+
font-weight: bold;
9121+
cursor: pointer;
9122+
position: absolute !important;
9123+
color: #5B5B5B;
9124+
}
9125+
9126+
.tagger.readonly ul li span.remove {
9127+
display: none;
9128+
}
9129+
9130+
.tagger ul li span.remove:hover {
9131+
color: #000000;
9132+
}
9133+
9134+
/** Dialog tagger*/
9135+
.ui-dialog .tagger {
9136+
}
9137+
9138+
.ui-dialog .tagger .field {
9139+
width: 119px !important;
9140+
}
9141+
9142+
.ui-dialog .tagger input.key,
9143+
.ui-dialog .tagger input.value {
9144+
width: 66px !important;
9145+
height: 15px;
9146+
font-size: 11px !important;
9147+
}
9148+
9149+
.ui-dialog .tagger input[type=submit] {
9150+
padding: 6px 15px;
9151+
}
9152+
89559153
/*VPC / vApps*/
89569154
.vpc-chart {
89579155
width: 100%;

‎ui/scripts/ui/widgets/detailView.js‎

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -287,10 +287,14 @@
287287
* @param callback
288288
*/
289289
edit: function($detailView, args) {
290+
$detailView.addClass('edit-mode');
291+
290292
if ($detailView.find('.button.done').size()) return false;
291293

292294
// Convert value TDs
293-
var $inputs = $detailView.find('input, select');
295+
var $inputs = $detailView.find('input, select').filter(function() {
296+
return !$(this).closest('.tagger').size() && !$(this).attr('type') == 'submit';
297+
});
294298
var action = args.actions[args.actionName];
295299
var id = $detailView.data('view-args').id;
296300
var $editButton = $('<div>').addClass('button done').html(_l('label.apply')).hide();
@@ -302,9 +306,14 @@
302306
$detailView.find('.ui-tabs-panel .detail-group.actions')
303307
).fadeIn();
304308

309+
$detailView.find('.tagger').removeClass('readonly');
310+
$detailView.find('.tagger').find('input[type=text]').val('');
311+
305312
var convertInputs = function($inputs) {
306313
// Save and turn back into labels
307314
$inputs.each(function() {
315+
if ($(this).closest('.tagger').size()) return true;
316+
308317
var $input = $(this);
309318
var $value = $input.closest('td.value span');
310319

@@ -328,20 +337,28 @@
328337
};
329338

330339
var removeEditForm = function() {
340+
$detailView.removeClass('edit-mode');
341+
331342
// Remove Edit form
332-
var $form = $detailView.find('form');
343+
var $form = $detailView.find('form').filter(function() {
344+
return !$(this).closest('.tagger').size();
345+
});
333346
if ($form.size()) {
334347
var $mainGroups = $form.find('div.main-groups').detach();
335348
$form.parent('div').append($mainGroups);
336349
$form.remove();
337350
}
338351
//Remove required labels
339352
$detailView.find('span.field-required').remove();
340-
}
353+
$detailView.find('.tagger').addClass('readonly');
354+
355+
};
341356

342357
// Put in original values
343358
var cancelEdits = function($inputs, $editButton) {
344359
$inputs.each(function() {
360+
if ($(this).closest('.tagger').size()) return true;
361+
345362
var $input = $(this);
346363
var $value = $input.closest('td.value span');
347364
var originalValue = $input.data('original-value');
@@ -424,8 +441,12 @@
424441
};
425442

426443
$editButton.click(function() {
427-
var $inputs = $detailView.find('input, select'),
428-
$form = $detailView.find('form');
444+
var $inputs = $detailView.find('input, select').filter(function() {
445+
return !$(this).closest('.tagger').size();
446+
});
447+
var $form = $detailView.find('form').filter(function() {
448+
return !$(this).closest('.tagger').size();
449+
});
429450

430451
if ($(this).hasClass('done')) {
431452
if (!$form.valid()) {
@@ -438,6 +459,8 @@
438459
} else { // Cancel
439460
cancelEdits($inputs, $editButton);
440461
}
462+
463+
return true;
441464
});
442465

443466
$detailView.find('td.value span').each(function() {
@@ -511,8 +534,11 @@
511534
}
512535

513536
// Setup form validation
514-
$detailView.find('form').validate();
515-
$detailView.find('form').find('input, select').each(function() {
537+
var $form = $detailView.find('form').filter(function() {
538+
return !$(this).closest('.tagger').size();
539+
});
540+
$form.validate();
541+
$form.find('input, select').each(function() {
516542
var data = $(this).parent('span').data('validation-rules');
517543
if (data) {
518544
$(this).rules('add', data);
@@ -934,6 +960,14 @@
934960
actionFilter: actionFilter
935961
}).appendTo($tabContent);
936962

963+
if (tabs.tags) {
964+
$('<div>').tagger(
965+
$.extend(true, {}, tabs.tags, {
966+
context: $detailView.data('view-args').context
967+
})
968+
).appendTo($tabContent).addClass('readonly');
969+
}
970+
937971
return true;
938972
},
939973
error: function() {

‎ui/scripts/ui/widgets/multiEdit.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -332,10 +332,16 @@
332332
after: function(args) {
333333
var $loading = $('<div>').addClass('loading-overlay').prependTo($dataItem);
334334
performAction({ data: args.data, complete: function() {
335-
$multi.multiEdit('refresh');
335+
$multi.trigger('refresh');
336336
} });
337337
}
338338
});
339+
340+
if (options.tags) {
341+
$(':ui-dialog').append(
342+
$('<div>').addClass('multi-edit-tags').tagger(options.tags)
343+
);
344+
}
339345
}
340346
})
341347
);
@@ -652,6 +658,7 @@
652658
$.fn.multiEdit = function(args) {
653659
var dataProvider = args.dataProvider;
654660
var multipleAdd = args.multipleAdd;
661+
var tags = args.tags;
655662
var $multi = $('<div>').addClass('multi-edit').appendTo(this);
656663
var $multiForm = $('<form>').appendTo($multi);
657664
var $inputTable = $('<table>').addClass('multi-edit').appendTo($multiForm);
@@ -918,7 +925,8 @@
918925
context: $.extend(true, {}, context, this._context),
919926
ignoreEmptyFields: ignoreEmptyFields,
920927
preFilter: actionPreFilter,
921-
listView: listView
928+
listView: listView,
929+
tags: tags
922930
}
923931
).appendTo($dataBody);
924932
});

0 commit comments

Comments
 (0)