senaduka/old-lab_ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed loading select

Browse Source
This commit is contained in:
Rohit
2019-06-27 14:38:35 -04:00
parent db1c5d7ecc
commit 9f378f7e8d
3 changed files with 88 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/app/components/coordinator/coordinator.html
View File

@@ -396,11 +396,11 @@
<i class="fas fa-times-circle" onclick="hideTaggingOptions('play', false)"></i>
</div>
</div>
<div class="slider-options loading-options">
<div class="slider-options loading-options" id="loadBags">
<div class="col-md-10">
<div class="dropdown">
<div>
<select id="bagList" placeholder="Select bag to play">
<select id="loadBagList" placeholder="Select bag to play">
</select>
</div>
<!-- <i class="fas fa-sync-alt" onclick="updateRecordingsList()"></i> -->
@@ -408,7 +408,7 @@
</div>
<div class="col-md-2">
<i class="fas fa-check-circle" onclick="loadSelectedBagFile()"></i>
<i class="fas fa-times-circle" onclick=""></i>
<i class="fas fa-times-circle" onclick="hideLoadingOptions()"></i>
</div>
</div>
<div id="playTagError" class="col-md-10 error"></div>

43
client/app/components/coordinator/js/update_guis.js
View File

@@ -67,7 +67,7 @@ function displayTaggingOptions(mode) {
document.querySelector(modeTag).classList.add('open');
//Putting this in a timeout to wait for the animation to finish completing
setTimeout(function(){
document.querySelector(modeTag).setAttribute('overflow', 'visible');
document.querySelector(modeTag).style.overflow = "visible";
}, 600)
var $fileNameSelect = $(fileNameSelector).selectize({
@@ -144,7 +144,7 @@ function hideTaggingOptions(mode, updateValues=false) {
updateBagMetadata(mode, bag_name, filename, category, tags)
}
//TO DO: Wait for the response from the backend before setting the display to none
document.querySelector(modeTag).setAttribute('overflow', 'hidden');
document.querySelector(modeTag).style.overflow = "hidden";
document.querySelector(modeTag).classList.remove('open');
}
@@ -169,11 +169,15 @@ function updateBagMetadata(mode, bag_name, modified_bag_name, category, tags) {
function displayLoadingOptions() {
selector = "#bagList"
selector = "#loadBags";
document.querySelector(selector).classList.add('open');
//Putting this in a timeout to wait for the animation to finish completing
setTimeout(function(){
document.querySelector(selector).style.overflow = "visible";
}, 420)
var $select = $('#bagList').selectize({
var $select = $('#loadBagList').selectize({
valueField: 'filename',
labelField: 'filename',
searchField: ['filename', 'category', 'tags'],
@@ -182,17 +186,29 @@ function displayLoadingOptions() {
placeholder : "Select bag to play",
render : {
item: function(item, escape) {
return '<div>' +
(item.filename ? '<span class="name">' + escape(item.filename) + '</span>' : '') +
(item.category ? '<span class="email">' + escape(item.category) + '</span>' : '') +
return '<div class="bag-select-element">' +
'<div class="bag-select-element">' +
'<span class="filename">' + escape(item.filename) + '</span>' +
'<span class="category">' + ' (' + escape(item.category) + ') ' + '</span>' +
'</div>' +
'</div>';
},
option: function(item, escape) {
var label = item.filename || item.category;
var caption = item.filename ? item.category : null;
return '<div>' +
'<span class="label">' + escape(label) + '</span>' +
(caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
return '<div class="bag-select-element bag-option">' +
'<div class="primary">' +
'<div class="filename">' + escape(item.filename) + '</div>' +
'<div class="category">' + escape(item.category) + '</div>' +
'</div>' +
'<div class="secondary">' +
'<div class="tags">' +
item.tags.map(function(tag) {
return '<span class="tag label label-info">' + escape(tag) + '</span>'
}).join(' ') +
'</div>' +
'<div class="timestamp">' + escape('27 Jun 10:10am') + '</div>' +
'</div>' +
'</div>';
}
}
@@ -200,7 +216,8 @@ function displayLoadingOptions() {
getBagList(function(results){
var selectize = $select[0].selectize;
selectize.clearOptions()
selectize.clearOptions();
//results = [{filename : 'testfile', category: 'testcategory', tags : ['testtag1', 'testtag2', 'testtag3']}, {filename : 'testfile2', category: 'testcategory2', tags : ['testtag21', 'testtag22', 'testtag23']}]
selectize.addOption(results);
if(results[0]) {
selectize.setValue(results[0].filename);
@@ -209,9 +226,9 @@ function displayLoadingOptions() {
}
function hideLoadingOptions() {
var selector = '#bagList';
var selector = '#loadBags';
document.querySelector(selector).setAttribute('overflow', 'hidden');
document.querySelector(selector).style.overflow = "hidden";
document.querySelector(selector).classList.remove('open');
}

57
client/app/main.css
View File

@@ -409,11 +409,64 @@ html, body {
transition: height 600ms ease 0ms;
}
.loading-options {
transition: height 600ms ease 0ms;
transition: height 420ms ease 0ms;
}
.tagging-options.open {
height: 122px;
}
.loading-options.open {
height: 85px;
}
}
.bag-option > div {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
.bag-option .filename {
width: 60%;
font-size: 12pt;
font-weight: 600;
}
.bag-option .category {
width: 40%;
font-weight: 600;
}
.bag-option .tags {
width: 60%;
}
.bag-option .timestamp {
width: 40%;
}
.loading-options .selectize-input {
font-size: 13pt;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 600;
}
/*
.selectize-dropdown, .selectize-dropdown.form-control{
height: 90vh !important;
}
.selectize-dropdown-content{
max-height: 100% !important;
height: 100% !important;
}
*/