From 2298ac7e1ded7991d76b02ea8630a5be2b73a4cb Mon Sep 17 00:00:00 2001 From: David Peterman Date: Tue, 22 Aug 2023 16:19:21 -0400 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=92=84=20UI=20improvements=20to=20log?= =?UTF-8?q?in=20page=20and=20workflow=20builder=20context=20menu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../code/src/js/Controllers/ControllerContextMenu.js | 2 +- rodan-client/code/styles/default.css | 9 ++++++++- .../Views/Master/Main/Login/template-main_login.html | 2 +- .../code/templates/Views/Master/template-master.html | 2 +- 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/rodan-client/code/src/js/Controllers/ControllerContextMenu.js b/rodan-client/code/src/js/Controllers/ControllerContextMenu.js index 989364838..e590a68c5 100644 --- a/rodan-client/code/src/js/Controllers/ControllerContextMenu.js +++ b/rodan-client/code/src/js/Controllers/ControllerContextMenu.js @@ -54,7 +54,7 @@ export default class ControllerContextMenu extends BaseController var anchor = $('' + label + ''); anchor.data('radio', {request: radiorequest, options: callOptions}); anchor.click(functionCall); - $('#menu-context').append($('
  • ').append(anchor)); + $('#menu-context').append($('
    ').append(anchor)); } $('#menu-context').css('top', options.top); $('#menu-context').css('left', options.left); diff --git a/rodan-client/code/styles/default.css b/rodan-client/code/styles/default.css index bf89eb831..b89808c4e 100644 --- a/rodan-client/code/styles/default.css +++ b/rodan-client/code/styles/default.css @@ -121,6 +121,9 @@ textarea { border-radius: 3px; outline: none; } +ul { + padding: 0px; +} /* Table styles */ table { user-select: none; @@ -291,6 +294,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%; @@ -405,7 +412,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); diff --git a/rodan-client/code/templates/Views/Master/Main/Login/template-main_login.html b/rodan-client/code/templates/Views/Master/Main/Login/template-main_login.html index 32b219078..a23fe9a21 100644 --- a/rodan-client/code/templates/Views/Master/Main/Login/template-main_login.html +++ b/rodan-client/code/templates/Views/Master/Main/Login/template-main_login.html @@ -2,7 +2,7 @@
    -
    +
    diff --git a/rodan-client/code/templates/Views/Master/template-master.html b/rodan-client/code/templates/Views/Master/template-master.html index d2bd51284..ff80700ac 100644 --- a/rodan-client/code/templates/Views/Master/template-master.html +++ b/rodan-client/code/templates/Views/Master/template-master.html @@ -7,4 +7,4 @@ - \ No newline at end of file + \ No newline at end of file From e1a2e807a165c320f5ac1d14a50a2d992412599e Mon Sep 17 00:00:00 2001 From: David Peterman Date: Wed, 23 Aug 2023 10:42:49 -0400 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=92=84=20Update=20main=20region=20UI?= =?UTF-8?q?=20and=20workflow=20builder=20dropdowns,=20refactor=20some=20CS?= =?UTF-8?q?S=20and=20HTML?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/Controllers/ControllerContextMenu.js | 4 +-- rodan-client/code/styles/default.css | 27 +++++++++++++-- .../template-main_project_collection.html | 34 ++++++++++--------- .../template-main_project_individual.html | 2 +- .../template-main_resourceassignment.html | 4 +-- .../Master/Tables/template-table_control.html | 2 +- 6 files changed, 48 insertions(+), 25 deletions(-) diff --git a/rodan-client/code/src/js/Controllers/ControllerContextMenu.js b/rodan-client/code/src/js/Controllers/ControllerContextMenu.js index e590a68c5..672cca735 100644 --- a/rodan-client/code/src/js/Controllers/ControllerContextMenu.js +++ b/rodan-client/code/src/js/Controllers/ControllerContextMenu.js @@ -51,10 +51,10 @@ export default class ControllerContextMenu extends BaseController Radio.channel(channel).request(data.request, data.options); }; - var anchor = $('' + label + ''); + var anchor = $('' + label + ''); anchor.data('radio', {request: radiorequest, options: callOptions}); anchor.click(functionCall); - $('#menu-context').append($('
    ').append(anchor)); + $('#menu-context').append(anchor); } $('#menu-context').css('top', options.top); $('#menu-context').css('left', options.left); diff --git a/rodan-client/code/styles/default.css b/rodan-client/code/styles/default.css index b89808c4e..ebed01f33 100644 --- a/rodan-client/code/styles/default.css +++ b/rodan-client/code/styles/default.css @@ -176,6 +176,7 @@ tbody > tr:hover { .content-wrapper.row-content { flex-direction: row; } +/* flex horizontal alignment */ .column-left { align-items: flex-start; } @@ -194,6 +195,26 @@ 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-10 { gap: 10px; } @@ -203,6 +224,7 @@ tbody > tr:hover { .flex-gap-30 { gap: 30px; } +/* padding */ .padding-5 { padding: 5px; box-sizing: border-box; @@ -476,7 +498,7 @@ tbody > tr:hover { gap: 15px; } .region-main-section { - width: 98%; + width: 100%; } /* Main region header */ .region-main-section.region-main-header { @@ -618,14 +640,13 @@ tbody > tr:hover { border-radius: 5px; background-color: #f0f0f047; height: fit-content; - width: 98%; + width: 100%; overflow-x: auto; max-height: 85%; } .project-collections { gap: 25px; padding-top: 20px; - padding-bottom: 10px; box-sizing: border-box; width: 85%; border-right: 2px solid #dfdfdf; diff --git a/rodan-client/code/templates/Views/Master/Main/Project/Collection/template-main_project_collection.html b/rodan-client/code/templates/Views/Master/Main/Project/Collection/template-main_project_collection.html index d311b915e..12a32e405 100644 --- a/rodan-client/code/templates/Views/Master/Main/Project/Collection/template-main_project_collection.html +++ b/rodan-client/code/templates/Views/Master/Main/Project/Collection/template-main_project_collection.html @@ -5,20 +5,22 @@
    -
    - - - - - - - - - - - - - - -
    NameCreatorCreatedUpdatedResourcesResource ListsWorkflows
    +
    +
    + + + + + + + + + + + + + + +
    NameCreatorCreatedUpdatedResourcesResource ListsWorkflows
    +
    \ No newline at end of file diff --git a/rodan-client/code/templates/Views/Master/Main/Project/Individual/template-main_project_individual.html b/rodan-client/code/templates/Views/Master/Main/Project/Individual/template-main_project_individual.html index ba408d39f..cc6ef5e97 100644 --- a/rodan-client/code/templates/Views/Master/Main/Project/Individual/template-main_project_individual.html +++ b/rodan-client/code/templates/Views/Master/Main/Project/Individual/template-main_project_individual.html @@ -7,7 +7,7 @@
    -
    +
    diff --git a/rodan-client/code/templates/Views/Master/Main/ResourceAssignment/template-main_resourceassignment.html b/rodan-client/code/templates/Views/Master/Main/ResourceAssignment/template-main_resourceassignment.html index 384370323..640bce0a1 100644 --- a/rodan-client/code/templates/Views/Master/Main/ResourceAssignment/template-main_resourceassignment.html +++ b/rodan-client/code/templates/Views/Master/Main/ResourceAssignment/template-main_resourceassignment.html @@ -1,9 +1,9 @@ -
    +

    Available Resources

    -
    +
    diff --git a/rodan-client/code/templates/Views/Master/Tables/template-table_control.html b/rodan-client/code/templates/Views/Master/Tables/template-table_control.html index 9642dc4c0..03e254303 100644 --- a/rodan-client/code/templates/Views/Master/Tables/template-table_control.html +++ b/rodan-client/code/templates/Views/Master/Tables/template-table_control.html @@ -23,4 +23,4 @@ -
    +
    \ No newline at end of file From f0e020c2be117c65d74dcec30795dd79fa95c262 Mon Sep 17 00:00:00 2001 From: David Peterman Date: Fri, 15 Sep 2023 13:14:11 -0400 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=92=84=20UI=20updates/fixes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../WorkflowJob/ViewControlWorkflowJob.js | 1 + .../Master/Main/WorkflowJob/ViewSettings.js | 12 ++- rodan-client/code/styles/default.css | 84 ++++++++++++++++--- .../template-main_resourceassignment.html | 32 ++++--- .../template-main_workflowjob.html | 21 +++-- .../template-main_workflowjob_settings.html | 4 +- .../Views/Master/Misc/template-misc_help.html | 6 +- .../Views/Master/Modal/template-modal.html | 4 +- .../Master/Modal/template-modal_simple.html | 4 +- 9 files changed, 125 insertions(+), 43 deletions(-) diff --git a/rodan-client/code/src/js/Views/Master/Main/WorkflowJob/ViewControlWorkflowJob.js b/rodan-client/code/src/js/Views/Master/Main/WorkflowJob/ViewControlWorkflowJob.js index b877a77d2..db99e7060 100644 --- a/rodan-client/code/src/js/Views/Master/Main/WorkflowJob/ViewControlWorkflowJob.js +++ b/rodan-client/code/src/js/Views/Master/Main/WorkflowJob/ViewControlWorkflowJob.js @@ -20,6 +20,7 @@ export default class ViewControlWorkflowJob extends Marionette.View initialize(options) { this._workflow = options.workflow; + this.setElement('
    '); } /////////////////////////////////////////////////////////////////////////////////////// diff --git a/rodan-client/code/src/js/Views/Master/Main/WorkflowJob/ViewSettings.js b/rodan-client/code/src/js/Views/Master/Main/WorkflowJob/ViewSettings.js index 7916b07e1..82d3e84dc 100644 --- a/rodan-client/code/src/js/Views/Master/Main/WorkflowJob/ViewSettings.js +++ b/rodan-client/code/src/js/Views/Master/Main/WorkflowJob/ViewSettings.js @@ -21,6 +21,7 @@ export default class ViewSettings extends Marionette.View initialize(options) { this._workflow = options.workflow; + this.setElement('
    '); } /** @@ -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); } @@ -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()); diff --git a/rodan-client/code/styles/default.css b/rodan-client/code/styles/default.css index ebed01f33..857bc9c12 100644 --- a/rodan-client/code/styles/default.css +++ b/rodan-client/code/styles/default.css @@ -121,9 +121,7 @@ textarea { border-radius: 3px; outline: none; } -ul { - padding: 0px; -} + /* Table styles */ table { user-select: none; @@ -215,6 +213,9 @@ tbody > tr:hover { align-items: flex-end; } /* flex gap */ +.flex-gap-5 { + gap: 5px; +} .flex-gap-10 { gap: 10px; } @@ -227,15 +228,32 @@ tbody > tr:hover { /* 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; } /* buttons */ .btn { @@ -642,7 +660,7 @@ tbody > tr:hover { height: fit-content; width: 100%; overflow-x: auto; - max-height: 85%; + max-height: 1000px; } .project-collections { gap: 25px; @@ -894,8 +912,8 @@ 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; @@ -903,13 +921,21 @@ div#main_workflowbuilder 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; @@ -919,6 +945,7 @@ div#main_workflowbuilder background-color: #488bcb; color: white; font-size: 15px; + height: 40px; } .modal-close { cursor: pointer; @@ -929,10 +956,14 @@ 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; @@ -940,6 +971,8 @@ div#main_workflowbuilder .modal-footer { padding: 10px; + max-height: 40px; + height: fit-content; } .modal-footer-error, .modal-input-error { @@ -964,6 +997,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 */ diff --git a/rodan-client/code/templates/Views/Master/Main/ResourceAssignment/template-main_resourceassignment.html b/rodan-client/code/templates/Views/Master/Main/ResourceAssignment/template-main_resourceassignment.html index 640bce0a1..bdb2a3390 100644 --- a/rodan-client/code/templates/Views/Master/Main/ResourceAssignment/template-main_resourceassignment.html +++ b/rodan-client/code/templates/Views/Master/Main/ResourceAssignment/template-main_resourceassignment.html @@ -1,20 +1,26 @@ -
    -
    -

    Available Resources

    -
    +
    +
    +
    +

    Available Resources

    +
    +
    -
    +
    - - + +
    - - + +
    -
    -

    Assigned Resources

    -

    Resource(s) Assigned

    -
    +
    +
    +

    Assigned Resources -

    +
    +

    Resource(s) Assigned

    +
    +
    +
    diff --git a/rodan-client/code/templates/Views/Master/Main/WorkflowJob/template-main_workflowjob.html b/rodan-client/code/templates/Views/Master/Main/WorkflowJob/template-main_workflowjob.html index a569b04f5..484c6e622 100644 --- a/rodan-client/code/templates/Views/Master/Main/WorkflowJob/template-main_workflowjob.html +++ b/rodan-client/code/templates/Views/Master/Main/WorkflowJob/template-main_workflowjob.html @@ -1,7 +1,16 @@ - - -
    -<%= job_name %> +
    + + +
    + +
    + + <%= job_name %> +
    +
    - - \ No newline at end of file + +
    + + +
    \ No newline at end of file diff --git a/rodan-client/code/templates/Views/Master/Main/WorkflowJob/template-main_workflowjob_settings.html b/rodan-client/code/templates/Views/Master/Main/WorkflowJob/template-main_workflowjob_settings.html index f542023f4..fa4af1c87 100644 --- a/rodan-client/code/templates/Views/Master/Main/WorkflowJob/template-main_workflowjob_settings.html +++ b/rodan-client/code/templates/Views/Master/Main/WorkflowJob/template-main_workflowjob_settings.html @@ -1,2 +1,2 @@ -
    - \ No newline at end of file +
    + \ No newline at end of file diff --git a/rodan-client/code/templates/Views/Master/Misc/template-misc_help.html b/rodan-client/code/templates/Views/Master/Misc/template-misc_help.html index 0b824fab2..8aad76ffa 100644 --- a/rodan-client/code/templates/Views/Master/Misc/template-misc_help.html +++ b/rodan-client/code/templates/Views/Master/Misc/template-misc_help.html @@ -1,2 +1,4 @@ -Please visit <%= url %>
    -Client admin: <%= name %> \ No newline at end of file +
    + Please visit <%= url %> + Client admin: <%= name %> +
    \ No newline at end of file diff --git a/rodan-client/code/templates/Views/Master/Modal/template-modal.html b/rodan-client/code/templates/Views/Master/Modal/template-modal.html index faf9fb713..0f204862e 100644 --- a/rodan-client/code/templates/Views/Master/Modal/template-modal.html +++ b/rodan-client/code/templates/Views/Master/Modal/template-modal.html @@ -1,5 +1,5 @@ -
    -
    +
    +
    diff --git a/rodan-client/code/templates/Views/Master/Modal/template-modal_simple.html b/rodan-client/code/templates/Views/Master/Modal/template-modal_simple.html index faf9fb713..0f204862e 100644 --- a/rodan-client/code/templates/Views/Master/Modal/template-modal_simple.html +++ b/rodan-client/code/templates/Views/Master/Modal/template-modal_simple.html @@ -1,5 +1,5 @@ -
    -
    +
    +