Skip to content

Commit

Permalink
Merge pull request #1083 from DDMAL/ui-fixes
Browse files Browse the repository at this point in the history 
UI fixes
  • Loading branch information
@softcat477
softcat477 authored Oct 3, 2023
2 parents 0b7cefd + f0e020c commit 7db8153
Show file tree
Hide file tree
Showing 15 changed files with 178 additions and 66 deletions.
4 changes: 2 additions & 2 deletions rodan-client/code/src/js/Controllers/ControllerContextMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,10 @@ export default class ControllerContextMenu extends BaseController
Radio.channel(channel).request(data.request, data.options);
};

var anchor = $('<a>' + label + '</a>');
var anchor = $('<a class="dropdown-btn">' + label + '</a>');
anchor.data('radio', {request: radiorequest, options: callOptions});
anchor.click(functionCall);
$('#menu-context').append($('<li></li>').append(anchor));
$('#menu-context').append(anchor);
}
$('#menu-context').css('top', options.top);
$('#menu-context').css('left', options.left);
Expand Down
1 change: 1 addition & 0 deletions rodan-client/code/src/js/Views/Master/Main/WorkflowJob/ViewControlWorkflowJob.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default class ViewControlWorkflowJob extends Marionette.View
initialize(options)
{
this._workflow = options.workflow;
this.setElement('<div class="content-wrapper column-content"></div>');
}

///////////////////////////////////////////////////////////////////////////////////////
Expand Down
12 changes: 8 additions & 4 deletions rodan-client/code/src/js/Views/Master/Main/WorkflowJob/ViewSettings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export default class ViewSettings extends Marionette.View
initialize(options)
{
this._workflow = options.workflow;
this.setElement('<div class="content-wrapper column-content"></div>');
}

/**
Expand Down Expand Up @@ -63,16 +64,19 @@ export default class ViewSettings extends Marionette.View
var jobUuid = this.model.getJobUuid();
var collection = Radio.channel('rodan').request(RODAN_EVENTS.REQUEST__GLOBAL_JOB_COLLECTION);
var job = collection.get(jobUuid);
console.log(job);
console.log(job.get('settings'));
var settingsSchema = {
schema: job.get('settings'),
theme: 'bootstrap3',
theme: 'barebones',
disable_collapse: true,
disable_edit_json: true,
disable_properties: true,
no_additional_properties: true,
show_errors: 'always',
startval: startValues,
form_name_root: ' '
form_name_root: ' ',
onClassName: () => { return 'content-wrapper row-content'; },
};
this._editor = new JSONEditor(element, settingsSchema);
}
Expand All @@ -90,8 +94,8 @@ ViewSettings.prototype.modelEvents = {
};
ViewSettings.prototype.ui = {
buttonSave: '#button-save_workflowjob_settings'
};
};
ViewSettings.prototype.events = {
'click @ui.buttonSave': '_handleButtonSave'
};
};
ViewSettings.prototype.template = _.template($('#template-main_workflowjob_settings').text());
114 changes: 101 additions & 13 deletions rodan-client/code/styles/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ textarea {
border-radius: 3px;
outline: none;
}

/* Table styles */
table {
user-select: none;
Expand Down Expand Up @@ -173,6 +174,7 @@ tbody > tr:hover {
.content-wrapper.row-content {
flex-direction: row;
}
/* flex horizontal alignment */
.column-left {
align-items: flex-start;
}
Expand All @@ -191,6 +193,29 @@ tbody > tr:hover {
.row-right {
justify-content: flex-end;
}
/* flex vertical alignment */
.column-top {
justify-content: flex-start;
}
.row-top {
align-items: flex-start;
}
.column-middle {
justify-content: center;
}
.row-middle {
align-items: center;
}
.column-bottom {
justify-content: flex-end;
}
.row-bottom {
align-items: flex-end;
}
/* flex gap */
.flex-gap-5 {
gap: 5px;
}
.flex-gap-10 {
gap: 10px;
}
Expand All @@ -200,17 +225,35 @@ tbody > tr:hover {
.flex-gap-30 {
gap: 30px;
}
/* padding */
.padding-5 {
padding: 5px;
box-sizing: border-box;
}
.padding-10 {
padding: 10px;
box-sizing: border-box;
}
.padding-20 {
padding: 20px;
box-sizing: border-box;
}
.padding-30 {
padding: 30px;
}
/* positioning */
.pos-absolute {
position: absolute;
}
.pos-relative {
position: relative;
}
.pos-fixed {
position: fixed;
}
.pos-static {
position: static;
}
/* text */
.text-nowrap {
text-wrap: nowrap;
}
.overflow-scroll {
overflow: scroll;
Expand Down Expand Up @@ -300,6 +343,10 @@ tbody > tr:hover {
box-shadow: 0px 5px 5px 1px #00000057;
border-radius: 0px 0px 3px 3px;
}
.dropdown-menu.context-menu {
box-shadow: 0px 0px 5px 1px #00000057;
border-radius: 3px;
}
.dropdown-btn {
display: flex;
width: 100%;
Expand Down Expand Up @@ -414,7 +461,7 @@ tbody > tr:hover {
.node-text {
font-size: 15px;
width: 100%;
padding: 3px 0px;
padding: 3px;
}
.node-text:hover {
background-color: var(--primary-app-color);
Expand Down Expand Up @@ -478,7 +525,7 @@ tbody > tr:hover {
gap: 15px;
}
.region-main-section {
width: 98%;
width: 100%;
}
/* Main region header */
.region-main-section.region-main-header {
Expand Down Expand Up @@ -620,14 +667,13 @@ tbody > tr:hover {
border-radius: 5px;
background-color: #f0f0f047;
height: fit-content;
width: 98%;
width: 100%;
overflow-x: auto;
max-height: 85%;
max-height: 1000px;
}
.project-collections {
gap: 25px;
padding-top: 20px;
padding-bottom: 10px;
box-sizing: border-box;
width: 85%;
border-right: 2px solid #dfdfdf;
Expand Down Expand Up @@ -877,22 +923,30 @@ div#main_workflowbuilder
/* general modal styles */
#modal-generic {
position: absolute;
width: fit-content;
height: fit-content;
width: initial;
height: initial;
max-width: 1200px;
min-width: 500px;
background-color: #ffffff90;
box-shadow: 0px 0px 5000px 5000px #0000005c;
z-index: 9999;
border-radius: 5px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
overflow: hidden;
display: none;
animation: fade-in 0.2s ease-in-out forwards;
}
.modal-content
{

.modal-dialog {
width: fit-content;
height: fit-content;
border-radius: 3px;
position: relative;
overflow: hidden;
background-color: white;
backdrop-filter: blur(20px);
min-width: 500px;
/* min-height: 300px; */
}
.modal-header {
align-items: center;
Expand All @@ -902,6 +956,7 @@ div#main_workflowbuilder
background-color: #488bcb;
color: white;
font-size: 15px;
height: 40px;
}
.modal-close {
cursor: pointer;
Expand All @@ -912,17 +967,23 @@ div#main_workflowbuilder
overflow-y: auto;
padding: 20px;
box-sizing: border-box;
font-size: 12px;
}
.modal-body-section {
align-items: flex-start;
}
.modal-subtitle-container {
height: 30px;
}
.modal-subtitle {
font-size: 13px;
font-weight: bold;
}
.modal-footer
{
padding: 10px;
max-height: 40px;
height: fit-content;
}
.modal-footer-error, .modal-input-error
{
Expand All @@ -947,6 +1008,33 @@ div#main_workflowbuilder
flex-grow: 0; /* overwrite general input element styles (which have flex-grow value of 1) */
}

/* resource assignment modal */
#resource-assignment-actions-container {
height: fit-content;
padding: 5px;
border: 1px solid #cecece;
border-radius: 3px;
background-color: #f9f9f9;
max-width: 150px;
}

/* job settings modal */
#workflowjob-settings:first-child {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}

#workflowjob-settings {

}

.this-is-my-class {
background-color: green;
}



/* ------------ */
/* Table styles */
Expand Down
2 changes: 1 addition & 1 deletion rodan-client/code/templates/Views/Master/Main/Login/template-main_login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="col-xs-12">
<div class="vertical-center">
<div class="horizontal-center">
<form class="content-wrapper row-content" role="form" action="javascript:void(0);">
<form class="content-wrapper row-content flex-gap-10" role="form" action="javascript:void(0);">
<div class="form-group">
<label for="text-login_email">Email address:</label>
<input type="text" class="form-control" id="text-login_email">
Expand Down
34 changes: 18 additions & 16 deletions ...code/templates/Views/Master/Main/Project/Collection/template-main_project_collection.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,22 @@
</div>
</div>

<div class="content-wrapper column-content region-main-section table-responsive">
<table class="table table-hover table-condensed" id="table-projects">
<thead>
<tr>
<th data-name="name">Name</th>
<th data-name="creator">Creator</th>
<th data-name="created">Created</th>
<th data-name="updated">Updated</th>
<th>Resources</th>
<th>Resource Lists</th>
<th>Workflows</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="content-wrapper column-content padding-10 flex-gap-10">
<div class="content-wrapper column-content region-main-section table-responsive">
<table class="table table-hover table-condensed" id="table-projects">
<thead>
<tr>
<th data-name="name">Name</th>
<th data-name="creator">Creator</th>
<th data-name="created">Created</th>
<th data-name="updated">Updated</th>
<th>Resources</th>
<th>Resource Lists</th>
<th>Workflows</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
2 changes: 1 addition & 1 deletion ...code/templates/Views/Master/Main/Project/Individual/template-main_project_individual.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

<div class="content-wrapper row-content region-main-content">
<!-- Project collections (workflow runs, resources, etc.) -->
<div class="content-wrapper column-content project-collections" role="group">
<div class="content-wrapper column-content project-collections padding-10">
<div class="content-wrapper row-content project-navigation-bar">
<button class="btn project-nav-bar-btn active" id="button-workflow_runs">Workflow Runs</button>
<button class="btn project-nav-bar-btn" id="button-runjobs">Run Jobs</button>
Expand Down
32 changes: 19 additions & 13 deletions ...code/templates/Views/Master/Main/ResourceAssignment/template-main_resourceassignment.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,26 @@
<div class="content-wrapper row-content flex-gap-10" style="display: flex; align-items: flex-start;">
<div class="content-wrapper column-content">
<h3>Available Resources</h3>
<div id="region-main_resourceassignment_availableresources"></div>
<div class="content-wrapper row-content row-left row-top row-middle flex-gap-10">
<div class="content-wrapper column-content flex-gap-10">
<div class="content-wrapper row-content row-left modal-subtitle-container">
<h3 class="text-nowrap">Available Resources</h3>
</div>
<div id="region-main_resourceassignment_availableresources" class="content-wrapper column-content"></div>
</div>
<div class="content-wrapper column-content flex-gap-10" style="padding-top: 200px">
<div id="resource-assignment-actions-container" class="content-wrapper column-content column-middle flex-gap-10">
<div class="content-wrapper column-content flex-gap-10" role="group" aria-label="...">
<button type="button" class="btn btn-success btn-xs" id="button-add_selected">Add selected</button>
<button type="button" class="btn btn-success btn-xs" id="button-add_all">Add all</button>
<button type="button" class="btn" id="button-add_selected">Add selected</button>
<button type="button" class="btn" id="button-add_all">Add all</button>
<hr>
<button type="button" class="btn btn-success btn-xs" id="button-remove_selected">Remove selected</button>
<button type="button" class="btn btn-success btn-xs" id="button-remove_all">Remove all</button>
<button type="button" class="btn btn-remove" id="button-remove_selected">Remove selected</button>
<button type="button" class="btn btn-remove" id="button-remove_all">Remove all</button>
</div>
</div>
<div class="content-wrapper column-content">
<h3>Assigned Resources</h3>
<p><span id="region-main_resourceassignment_assignedresources_num"></span> Resource(s) Assigned</p>
<div id="region-main_resourceassignment_assignedresources"></div>
<div class="content-wrapper column-content flex-gap-10">
<div class="content-wrapper row-content flex-gap-10 modal-subtitle-container">
<h3 class="text-nowrap">Assigned Resources -</h3>
<div class="content-wrapper row-content">
<p class="text-nowrap"><span id="region-main_resourceassignment_assignedresources_num"></span> Resource(s) Assigned</p>
</div>
</div>
<div id="region-main_resourceassignment_assignedresources" class="content-wrapper column-content"></div>
</div>
</div>
Loading

0 comments on commit 7db8153

Please sign in to comment.