Skip to content

Commit

Permalink
1349 update xyloader UI (#1394)
Browse files Browse the repository at this point in the history 
* Update style/language of default info panel in Data Files and Location step

* Update style/positioning of elements in the dropzone upload panel of the Data Files and Location step

* initial UI update to Select Renderers step

* more Select File Renders step UI updates

* more UI work

* get left panel table to render properly

* more table positioning

* Add file counter, selector buttons; need to be wired up to work

* sample based UI fixes

---------

Co-authored-by: Cyrus Hiatt <[email protected]>
  • Loading branch information
@dwuthrich @chiatt
dwuthrich and chiatt authored Oct 30, 2023
1 parent 12e16ba commit bce0aa2
Show file tree
Hide file tree
Showing 6 changed files with 220 additions and 119 deletions.
93 changes: 90 additions & 3 deletions arches_for_science/media/css/project.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1191,6 +1191,9 @@
cursor: pointer;
color: #213e5f;
font-size: 14px;
font-weight: 400;
margin-top: 5px;
margin-bottom: 5px;
}
.file-configuration input[type=radio]{
margin:0;
Expand Down Expand Up @@ -1223,12 +1226,62 @@
padding: 0;
}

.importer-configuration h4{
.importer-configuration {
position: relative;
cursor: pointer;
color: #213e5f;
font-size: 14px;
margin-bottom: 0px;
}

.importer-config-panel {
padding: 2px 15px 15px 15px;
border-bottom: 1px solid #ddd;
}

.importer-list-container {
width: 470px;
}

.importer-list-container div:hover {
background: #EBF6FC;
}

.file-config-header {
font-size: 14px;
color: #213e5f;
margin: 5px 0px 0px 0px;
}

.file-config-instuctions {
margin: 0px 0px 5px 0px;
font-weight: 400;
color: #666;
font-size: 13px;
}

.importer-config-panel input {
margin-top: 3px;
margin-bottom: 10px;
height: 28px;
font-size: 13px;
}

.importer-config-panel input::placeholder {
font-size: 12px;
padding-left: 5px;
padding-bottom: 5px;
}

.importer-config-panel textarea {
margin-top: 3px;
}

.importer-config-panel textarea::placeholder {
font-size: 12px;
margin-left: 5px;
}

.importer-configuration input[type=radio]{
margin:0;
}
Expand All @@ -1240,18 +1293,29 @@
display: flex;
flex-direction: row;
margin-top: 10px;
margin-bottom: 10px;
z-index: 1;
position: relative;
width: 100%;
}
.file-configuration .file-buttons{
flex: 1;
justify-content: center;
align-items: center;
display: flex;
padding: 10px 20px;
background-color: #fdfdfd;
background-color: #f9f9f9;
border: 1px solid #ddd;
}

.file-configuration .file-buttons:hover {
background: #fff;
}

.file-configuration .file-buttons.active {
font-weight: bold;
font-size: 13px;
background: #fff;
}
.file-configuration .dataTables_wrapper .row:first-child{
background-color: #ddd;
Expand Down Expand Up @@ -1284,6 +1348,23 @@
z-index: 1;
}

.table-tools-container {
display: flex;
margin-top: 5px;
padding-left: 5px;
padding-bottom: 10px;
}

.import-tool {
color: #579ddb;
margin-right: 10px;
}

.import-tool:hover {
color: #156AB7;
cursor: pointer;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tip:hover .tooltiptext {
visibility: visible;
Expand All @@ -1292,8 +1373,14 @@
text-align: center;
margin: 16px 0px 16px 30px;
height:fit-content;
background-color: #fde9ad;
background-color: #FFFF00;
border: 1px solid #9951C0;
border-radius: 2px;
color: #440468;
font-weight: 400;
overflow-y: auto;
padding: 40px;
width: 600px;
}

.afs-error-message {
Expand Down
116 changes: 61 additions & 55 deletions arches_for_science/templates/views/components/plugins/file-configuration.htm
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,74 @@
{% load i18n %}
<div class="file-configuration" style="width: 100%;height: calc(100% - 105px);display:flex;">
<div class="uploaded-files" style="width: 32.6793%;padding: 10px;padding-top: 0;">
<div class="file-configuration" style="width: 100vw; margin: -20px; display: flex; height: calc(100% + 40px);">
<div class="uploaded-files" style="width: 500px; padding: 10px;">
<h4><span>{% trans "Uploaded Files" %}</span></h4>
<span>{% trans "Specify how to process the data files for viewing. Any additional files (such as images) will be automatically displayed if possible." %}</span>
<span class="file-config-instuctions">{% trans "Specify how to process the data files for viewing. Any additional files (such as images) will be automatically displayed if possible." %}</span>
<div class="file-button-container">
<div class="file-buttons" data-bind="click:() => {fileMode('data')}, css: {active: fileMode() == 'data'}" role="button">{% trans "Data Files" %}</div>
<div style="margin: 0 5px"></div>
<div class="file-buttons" data-bind="click:() => {fileMode('other'); selectedFiles([])}, css: {active: fileMode() != 'data'}" role="button">{% trans "Additional Files" %}</div>
</div>

<div class="pad-btm" data-bind="visible: currentFiles().length > 0" style="overflow-y: scroll;padding: 7px; max-height: calc(100% - 100px);">
<table class="table table-striped" cellspacing="0" width="100%">
<thead>
<tr class="afs-table-header">
<th class="min-tabletl">{% trans "Name" %}</th>
<th class="min-tabletl">{% trans "Configuration" %}</th>
<th style="width:40px;" class="afs-table-control all"></th>
</tr>
</thead>
<tbody data-bind="dataTablesForEach: { data: currentFiles, as: 'file', dataTableOptions: fileTableConfig }">
<tr>
<td>
<div style="display: flex; align-items:center;">
<div style="display: flex; align-items: center;">
<div style="width: 25px;min-height:25px; margin: 0 5px;cursor:pointer" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); }"><i data-bind="visible: $parent.visibleFile() == file.fileid && $parent.selectedFiles().length <= 1" role="button" aria-label="{% trans "Selected File" %}" class="fa fa-eye"></i></div>
<input style="margin: 0 5px" type="checkbox" data-bind="visible: $parent.fileMode() == 'data', value: file.fileid, checked: $parent.selectedFiles">
<div>
<div class="" style="border: 1px solid #ddd; width: 100%; padding: 0px 7px; z-index: 1; position: relative; height: 640px; overflow-y: scroll; overflow-x: hidden;" data-bind="visible: currentFiles().length > 0" style="overflow-y: scroll; height: 600px;">
<table class="table table-striped" cellspacing="0" width="100%">
<thead>
<tr class="afs-table-header">
<th class="min-tabletl">{% trans "Name" %}</th>
<th class="min-tabletl">{% trans "Configuration" %}</th>

</tr>
</thead>
<tbody data-bind="dataTablesForEach: { data: currentFiles, as: 'file', dataTableOptions: fileTableConfig }">
<tr>
<td>
<div style="display: flex; align-items:center;">
<div style="display: flex; align-items: center;">
<div style="margin: 0 5px;cursor:pointer" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); }"><i data-bind="visible: $parent.visibleFile() == file.fileid && $parent.selectedFiles().length <= 1" role="button" aria-label="{% trans "Selected File" %}" class="fa fa-eye"></i></div>
<input style="margin: 0px 5px 0px 0px;" type="checkbox" data-bind="visible: $parent.fileMode() == 'data', value: file.fileid, checked: $parent.selectedFiles">
</div>
<div style="padding:1px 5px;min-height: 39px;align-items:center;display:flex;cursor:pointer; flex: 1" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); },text: file.details.name"></div>
</div>
<div style="padding:8px;min-height: 39px;align-items:center;display:flex;cursor:pointer; flex: 1" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); },text: file.details.name"></div>
</div>
</td>
<td style="padding:8px;cursor:pointer" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); }">
<div data-bind="visible: (typeof file.details?.rendererConfig == 'function')">
<input style="display:inline-block; flex: 1"
data-bind="
value: file.details.rendererConfig,
select2Query: {
select2Config: {
clickBubble: false,
disabled: file.details.disabledConfig,
width: 'element',
ajax:{
url: $parent.rendererUrl,
results: $parent.processConfigs
},
initSelection: $parent.initSelection,
value: file.details.rendererConfig,
closeOnSelect: true,
allowClear: false,
multiple: false
}
}">
</div>
</td>
<td style="padding:8px;cursor:pointer" data-bind="click: function() { $parent.displayFile(file) }">
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding:8px;cursor:pointer" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); }">
<div data-bind="visible: (typeof file.details?.rendererConfig == 'function')">
<input style="display:inline-block; flex: 1"
data-bind="
value: file.details.rendererConfig,
select2Query: {
select2Config: {
clickBubble: false,
disabled: file.details.disabledConfig,
width: 'element',
ajax:{
url: $parent.rendererUrl,
results: $parent.processConfigs
},
initSelection: $parent.initSelection,
value: file.details.rendererConfig,
closeOnSelect: true,
allowClear: false,
multiple: false
}
}">
</div>
</td>

</tr>
</tbody>
</table>
</div>

</div>
<div class="table-tools-container">
<div class="import-tool">x files</div>
<div class="import-tool">Select All</div>
<div class="import-tool">Remove Importer</div>
</div>
</div>
<div style="cursor:col-resize; width:18px;" class="resizer"></div>
<div class="active-files" style="width: 31.9659%; display: flex; flex-direction: column">
<div data-bind="visible: !(selectedFiles().length > 1) && fileMode() == 'data'">
<div style="cursor:col-resize; min-width:12px; background: #fcfcfc; border-right: 1px solid #eee; border-left: 1px solid #ddd;" class="resizer"></div>
<div class="active-files" style="width: 31.9659%; min-width: 550px; display: flex; flex-direction: column; padding: 10px 10px 20px 20px; z-index: 10;">
<div style="margin-bottom: 10px;" data-bind="visible: !(selectedFiles().length > 1) && fileMode() == 'data'">
<h4 data-bind="text: selectedFile()?.details?.name"></h4>
<div class="cm" style="border: 1px solid #ddd" >
<div data-bind="codemirror: {
Expand Down Expand Up @@ -116,8 +123,7 @@ <h4>{% trans "File Preview" %}</h4>
</div>
</div>
</div>
<div style="cursor:col-resize;width:18px;" class="resizer"></div>
<div style="width: 32.3226%;padding: 10px; padding-top: 0;" data-bind="visible: fileMode() == 'data'">
<div style="width: 550px; min-width: 550px; position: relative; padding: 10px 50px 20px 20px;" data-bind="visible: fileMode() == 'data'">
{% block importerConfiguration %}
<!-- ko component: {
name: 'importer-configuration',
Expand Down
Loading

0 comments on commit bce0aa2

Please sign in to comment.