Start of custom context menu for procedure creation
This commit is contained in:
@@ -109,4 +109,14 @@ div.gallery {
|
||||
.grid-item p {
|
||||
max-width: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.context-menu--active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<div class="plate" id="plate-container" style="grid-template-columns: repeat({{ plate_columns }}, {{ vw }}vw);grid-template-rows: repeat({{ plate_rows }}, {{ vw }}vw);">
|
||||
{% for sample in samples %}
|
||||
<div class="well" draggable="true" id="sample_{{ sample['submission_rank'] }}" style="background-color: {{ sample['background_color'] }};">
|
||||
<div class="well" draggable="true" id="{{ sample['well_id'] }}" style="background-color: {{ sample['background_color'] }};">
|
||||
<p style="font-size: 0.7em; text-align: center; word-wrap: break-word;">{{ sample['sample_id'] }}</p>
|
||||
<!-- <div class="tooltip" style="font-size: 0.5em; text-align: center; word-wrap: break-word;">{{ sample['sample_id'] }}-->
|
||||
<!-- <span class="tooltiptext">{{ sample['tooltip'] }}</span>-->
|
||||
|
||||
@@ -45,6 +45,25 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
<nav class="context-menu">
|
||||
<ul class="context-menu__items">
|
||||
<li class="context-menu__item">
|
||||
<a href="#" class="context-menu__link">
|
||||
<i class="fa fa-eye"></i> View Task
|
||||
</a>
|
||||
</li>
|
||||
<li class="context-menu__item">
|
||||
<a href="#" class="context-menu__link">
|
||||
<i class="fa fa-edit"></i> Edit Task
|
||||
</a>
|
||||
</li>
|
||||
<li class="context-menu__item">
|
||||
<a href="#" class="context-menu__link">
|
||||
<i class="fa fa-times"></i> Delete Task
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</body>
|
||||
<script>
|
||||
{% block script %}
|
||||
@@ -114,11 +133,25 @@
|
||||
output = [];
|
||||
fullGrid = [...gridContainer.children];
|
||||
fullGrid.forEach(function(item, index) {
|
||||
output.push({item: item, index: index})
|
||||
output.push({sample_id: item.id, index: index + 1})
|
||||
});
|
||||
backend.replow(output);
|
||||
backend.rearrange_plate(output);
|
||||
}
|
||||
});
|
||||
// Context Menu Functionality
|
||||
var wells = document.querySelectorAll(".well");
|
||||
for ( var i = 0, len = wells.length; i < len; i++ ) {
|
||||
var welloi = wells[i];
|
||||
|
||||
welloi.addEventListener( "contextmenu", function(e) {
|
||||
well = e.target
|
||||
backend.log_drag(well.id, "el");
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
</script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user