shaba/one
1
0
Fork 0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-21 14:50:08 +03:00
Code Releases Wiki Activity

Bug #4641: Fix labels css for firefox, improve usability and style

Browse Source 
(cherry picked from commit 303249bdb21f2d31a42e40a2a7fa8b99f0c39e0b)
This commit is contained in:
Carlos Martín 2016-07-14 17:08:40 +02:00
parent 94ed6e0ab7
commit dde72c3d87
10 changed files with 108 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/sunstone/public/app/sunstone.js
View File

@ -426,7 +426,7 @@ define(function(require) {
if ($("#" + customId + "labels_buttons button", buttonsRow).length != 0) {
$('#' + customId + 'labels_buttons').append(
'<div id="' + customId + 'LabelsDropdown" class="only-sunstone-info only-sunstone-list labels-dropdown dropdown-pane menu vertical" data-dropdown data-close-on-click="true"></div>').foundation();
'<div id="' + customId + 'LabelsDropdown" class="only-sunstone-info only-sunstone-list labels-dropdown dropdown-pane large menu vertical" data-dropdown data-close-on-click="true"></div>').foundation();
}
//actionBlock.foundationButtons();

21
src/sunstone/public/app/tabs/provision-tab.js
View File

@ -616,17 +616,18 @@ define(function(require) {
'</div>');
} else {
datatable.fnAddData(item_list);
LabelsUtils.clearLabelsFilter(datatable, FLOW_TEMPLATE_LABELS_COLUMN);
var context = $('.labels-dropdown', datatable.closest('#provisionFlowInstantiateTemplatesRow'));
LabelsUtils.insertLabelsMenu({
'context': context,
'dataTable': datatable,
'labelsColumn': FLOW_TEMPLATE_LABELS_COLUMN,
'labelsPath': 'DOCUMENT.TEMPLATE.LABELS',
'placeholder': Locale.tr("No labels defined")
});
}
LabelsUtils.clearLabelsFilter(datatable, FLOW_TEMPLATE_LABELS_COLUMN);
var context = $('.labels-dropdown', datatable.closest('#provisionFlowInstantiateTemplatesRow'));
context.html("");
LabelsUtils.insertLabelsMenu({
'context': context,
'dataTable': datatable,
'labelsColumn': FLOW_TEMPLATE_LABELS_COLUMN,
'labelsPath': 'DOCUMENT.TEMPLATE.LABELS',
'placeholder': Locale.tr("No labels defined")
});
},
error: Notifier.onError
});

6
src/sunstone/public/app/tabs/provision-tab/flows/create.hbs
View File

@ -55,10 +55,10 @@
<input type="search" class="provision-search-input" placeholder="Search" id="provision_create_flow_template_search"/>
</div>
<div class="medium-4 columns end">
<button type="button" data-toggle="provisionServiceInstantiateLabelsDropdown" class="secondary button dropdown"> <i class="fa fa-tags"/>{{tr "Labels"}}
<button type="button" data-toggle="provisionServiceInstantiateLabelsDropdown" class="secondary button dropdown"> <i class="fa fa-tags"/> {{tr "Labels"}}
</button>
<ul id="provisionServiceInstantiateLabelsDropdown" class="dropdown-pane labels-dropdown" data-dropdown>
</ul>
<div id="provisionServiceInstantiateLabelsDropdown" class="dropdown-pane large labels-dropdown" data-dropdown>
</div>
</div>
</div>
<div class="medium-6 columns"></div>

23
src/sunstone/public/app/tabs/provision-tab/templates/list.js
View File

@ -100,18 +100,19 @@ define(function(require) {
'</div>');
} else {
datatable.fnAddData(item_list);
// Labels are inserted only in the new VM wizard
LabelsUtils.clearLabelsFilter(datatable, TEMPLATE_LABELS_COLUMN);
var context = $('.labels-dropdown', datatable.closest('#provisionVMInstantiateTemplatesRow'));
LabelsUtils.insertLabelsMenu({
'context': context,
'dataTable': datatable,
'labelsColumn': TEMPLATE_LABELS_COLUMN,
'labelsPath': 'VMTEMPLATE.TEMPLATE.LABELS',
'placeholder': Locale.tr("No labels defined")
});
}
// Labels are inserted only in the new VM wizard
LabelsUtils.clearLabelsFilter(datatable, TEMPLATE_LABELS_COLUMN);
var context = $('.labels-dropdown', datatable.closest('#provisionVMInstantiateTemplatesRow'));
context.html("");
LabelsUtils.insertLabelsMenu({
'context': context,
'dataTable': datatable,
'labelsColumn': TEMPLATE_LABELS_COLUMN,
'labelsPath': 'VMTEMPLATE.TEMPLATE.LABELS',
'placeholder': Locale.tr("No labels defined")
});
},
error: Notifier.onError
});

6
src/sunstone/public/app/tabs/provision-tab/vms/create.hbs
View File

@ -75,10 +75,10 @@
</select>
</div>
<div class="medium-4 columns">
<button type="button" data-toggle="provisionVMInstantiateLabelsDropdown" class="secondary button dropdown"> <i class="fa fa-tags"/>{{tr "Labels"}}
<button type="button" data-toggle="provisionVMInstantiateLabelsDropdown" class="secondary button dropdown"> <i class="fa fa-tags"/> {{tr "Labels"}}
</button>
<ul id="provisionVMInstantiateLabelsDropdown" class="dropdown-pane labels-dropdown" data-dropdown>
</ul>
<div id="provisionVMInstantiateLabelsDropdown" class="dropdown-pane large labels-dropdown" data-dropdown>
</div>
</div>
</div>
<div class="medium-6 columns"></div>

2
src/sunstone/public/app/tabs/vms-tab/dialogs/spice/html.hbs
View File

@ -25,7 +25,7 @@
</h3>
</div>
</div>
<div class="reveal-body" style="width:100%; overflow-x:overlay">
<div class="reveal-body" style="width:100%; overflow-x:auto">
<div id="spice-area">
<div id="spice-screen" class="spice-screen"></div>
</div>

2
src/sunstone/public/app/tabs/vms-tab/dialogs/vnc/html.hbs
View File

@ -32,7 +32,7 @@
</h5>
</div>
</div>
<div class="reveal-body text-center" style="width:100%; overflow-x:overlay">
<div class="reveal-body text-center" style="width:100%; overflow-x:auto">
<canvas id="VNC_canvas" width="640px">{{tr "Canvas not supported."}}</canvas>
<div id="VNC_status_bar" class="VNC_status_bar"></div>
</div>

34
src/sunstone/public/app/utils/labels/tree.js
View File

@ -41,9 +41,9 @@ define(function(require) {
var html;
if (tree.htmlStr && tree.htmlStr != ""){
html = '<ul class="labels-tree menu vertical is-active">'+_innerHtml(tree, collapsed)+'</ul>';
html = '<ul class="labels-tree is-active">'+_innerHtml(tree, collapsed)+'</ul>';
} else {
html = '<ul class="labels-tree menu vertical">';
html = '<ul class="labels-tree">';
$.each(tree.subTree, function(){
html += _innerHtml(this, collapsed);
});
@ -58,23 +58,29 @@ define(function(require) {
if (collapsed) {
if (tree.subTree.length > 0) {
html += '<i class="fa fa-fw fa-angle-right"></i> ';
html += '<i class="left tree-toggle fa fa-fw fa-angle-right"></i> ';
} else {
html += '<i class="fa fa-fw fa-tag"></i> ';
html += '<i class="left fa fa-fw fa-tag"></i> ';
}
html += '<div class="labeltree-line">';
html += tree.htmlStr;
html += '<ul class="menu vertical is-active" hidden>';
html += '</div>';
html += '<ul class="is-active" hidden>';
} else {
if (tree.subTree.length > 0) {
html += '<i class="fa fa-fw fa-angle-down"></i> ';
html += '<i class="left tree-toggle fa fa-fw fa-angle-down"></i> ';
} else {
html += '<i class="fa fa-fw fa-tag"></i> ';
html += '<i class="left fa fa-fw fa-tag"></i> ';
}
html += '<div class="labeltree-line">';
html += '<i class="fa fa-fw fa-square-o labelsCheckbox"></i> ';
html += tree.htmlStr;
html += '<i class="fa fa-fw fa-square-o labelsCheckbox right"></i> ';
html += '<ul class="menu vertical is-active">';
html += '</div>';
html += '<ul class="is-active">';
}
$.each(tree.subTree, function(){
@ -87,24 +93,24 @@ define(function(require) {
function _setup(context){
context.on('click', '.fa-angle-right', function() {
$('ul:first', $(this).parent('li')).show();
$('ul:first', $(this).closest('li')).show();
$(this).removeClass('fa-angle-right');
$(this).addClass('fa-angle-down');
});
context.on('click', '.fa-angle-down', function() {
$('ul:first', $(this).parent('li')).hide();
$('ul:first', $(this).closest('li')).hide();
$(this).removeClass('fa-angle-down');
$(this).addClass('fa-angle-right');
});
context.on('click', '.one-label', function() {
var active = $(this).hasClass('active');
context.on('click', '.labeltree-line', function() {
var active = $('.one-label',this).hasClass('active');
$('.one-label', context).removeClass('active');
if (!active){
$(this).addClass('active');
$('.one-label', this).addClass('active');
}
});
}

31
src/sunstone/public/app/utils/labels/utils.js
View File

@ -75,15 +75,17 @@ define(function(require) {
/*
Filter datatable when a label in the left menu is clicked
*/
context.off('click', '.one-label');
context.on('click', '.one-label', function() {
if($(this).hasClass("active")){
context.off('click', '.labeltree-line');
context.on('click', '.labeltree-line', function() {
var span = $(".one-label", this);
if($(span).hasClass("active")){
if (opts.tabName && !Sunstone.rightListVisible($('#' + opts.tabName))) {
Sunstone.showTab(opts.tabName);
}
var regExp = [];
var label = $(this).attr('one-label-full-name');
var label = $(span).attr('one-label-full-name');
regExp.push('^' + label + '$');
regExp.push(',' + label + '$');
regExp.push('^' + label + ',');
@ -103,16 +105,22 @@ define(function(require) {
var dataTable = tabTable.dataTable;
var labelsColumn = tabTable.labelsColumn;
var labelsDropdown = $('#' + tabName + 'LabelsDropdown');
var labels = _getLabels(dataTable, labelsColumn);
$('#' + tabName + 'LabelsDropdown').html(
labelsDropdown.html(
'<div>' +
'<h6>' + Locale.tr('Edit Labels') + '</h6>' +
Tree.html(_makeTree(labels), false) +
'<div class="labeltree-container">' +
Tree.html(_makeTree(labels), false) +
'</div>' +
'<div class="input-container">' +
'<input type="text" class="newLabelInput" placeholder="' + Locale.tr("Add Label") + '"/>' +
'</div>' +
'</div>');
Tree.setup(labelsDropdown);
/*
Update Dropdown with selected items
[v] If all the selected items has a label
@ -138,7 +146,6 @@ define(function(require) {
});
// Set checkboxes (check|minus) depending on the number of items
var labelsDropdown = $('#' + tabName + 'LabelsDropdown');
// Reset label checkboxes
$('.labelsCheckbox', labelsDropdown)
@ -175,8 +182,8 @@ define(function(require) {
/*
Check/Uncheck label & Update Templates
*/
$('#' + tabName + 'LabelsDropdown').off('click', 'li:has(.labelsCheckbox)');
$('#' + tabName + 'LabelsDropdown').on('click', 'li:has(.labelsCheckbox)', function() {
labelsDropdown.off('click', '.labeltree-line');
labelsDropdown.on('click', '.labeltree-line', function() {
var action;
var that = $(".labelsCheckbox", this);
@ -188,7 +195,7 @@ define(function(require) {
$(that).removeClass('fa-check-square-o fa-minus-square-o').addClass('fa-square-o');
}
var labelName = $('.one-label', $(that).parent('li')).attr('one-label-full-name');
var labelName = $('.one-label', $(that).closest('li')).attr('one-label-full-name');
var labelsArray, labelIndex;
var selectedItems = tabTable.elements();
$.each(selectedItems, function(index, resourceId) {
@ -213,8 +220,8 @@ define(function(require) {
/*
Add a new label when ENTER is presed in the input
*/
$('#' + tabName + 'LabelsDropdown').off('keypress', '.newLabelInput');
$('#' + tabName + 'LabelsDropdown').on('keypress', '.newLabelInput', function(e) {
labelsDropdown.off('keypress', '.newLabelInput');
labelsDropdown.on('keypress', '.newLabelInput', function(e) {
var ev = e || window.event;
var key = ev.keyCode;
var labelName = $(this).val();

53
src/sunstone/public/scss/_labels.scss
View File

@ -1,17 +1,21 @@
.labels-tree {
#menu .labels-tree {
max-height: rem-calc(150px);
margin-left: 1rem;
max-height: rem-calc(100px);
overflow-y: overlay;
}
.labeltree-container .labels-tree,
#provision-tab .labels-tree {
max-height: rem-calc(400px);
margin-left: 0rem;
}
.labels-tree {
overflow-y: auto;
ul {
margin-left: 1rem;
}
.one-label {
cursor: pointer;
padding-right: 2rem;
}
& > li:last-child {
padding-bottom: 1em;
}
@ -19,18 +23,35 @@
li {
color: $dark-gray;
font-weight: normal;
list-style-type: none;
.active {
color: $light-black;
font-weight: bold;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
.labeltree-line {
cursor: pointer;
&:hover {
color: $black;
}
.active {
color: $light-black;
font-weight: bold;
}
}
}
.fa-check-square-o,
.fa-square-o,
.fa-minus-square-o {
cursor: pointer;
.fa-fw {
margin-top: 0.3rem;
margin-right: 1rem;
}
.tree-toggle {
cursor: pointer;
&:hover {
color: $black;
}
}
}