diff --git a/app/assets/javascripts/dashboard/quick_start.js b/app/assets/javascripts/dashboard/quick_start.js new file mode 100644 index 000000000..fa17b10b9 --- /dev/null +++ b/app/assets/javascripts/dashboard/quick_start.js @@ -0,0 +1,37 @@ +/* global dropdownSelector */ +/* eslint-disable no-param-reassign */ + +var DasboardQuickStartWidget = (function() { + var projectFilter = '#create-task-modal .project-filter'; + var experimentFilter = '#create-task-modal .experiment-filter'; + + function initNewTaskModal() { + $('.quick-start-widget .new-task').click(() => { + $('#create-task-modal').modal('show'); + }); + + dropdownSelector.init(projectFilter, { + singleSelect: true, + closeOnSelect: true, + selectAppearance: 'simple' + }); + + dropdownSelector.init(experimentFilter, { + singleSelect: true, + closeOnSelect: true, + selectAppearance: 'simple' + }); + } + + return { + init: () => { + if ($('.quick-start-widget').length) { + initNewTaskModal(); + } + } + }; +}()); + +$(document).on('turbolinks:load', function() { + DasboardQuickStartWidget.init(); +}); diff --git a/app/assets/javascripts/protocols/index.js b/app/assets/javascripts/protocols/index.js index 4a40e6bae..944bfd691 100644 --- a/app/assets/javascripts/protocols/index.js +++ b/app/assets/javascripts/protocols/index.js @@ -329,6 +329,8 @@ function initCreateNewModal() { }); }); + if ($('#protocols-index').data('new-protocol')) link.click(); + submitBtn.on("click", function() { // Submit the form inside modal $(this).closest(".modal").find(".modal-body form").submit(); diff --git a/app/assets/javascripts/reports/reports_datatable.js.erb b/app/assets/javascripts/reports/reports_datatable.js.erb index a0c125d97..467685de5 100644 --- a/app/assets/javascripts/reports/reports_datatable.js.erb +++ b/app/assets/javascripts/reports/reports_datatable.js.erb @@ -186,6 +186,8 @@ initSelectPicker(); initRedirectToNewReportPage(); }); + + if ($('#content-reports-index').data('new-report')) $('#new-report-btn').click(); } initDatatable(); diff --git a/app/assets/stylesheets/dashboard/create_task_modal.scss b/app/assets/stylesheets/dashboard/create_task_modal.scss new file mode 100644 index 000000000..cd6cfff52 --- /dev/null +++ b/app/assets/stylesheets/dashboard/create_task_modal.scss @@ -0,0 +1,28 @@ +#create-task-modal { + .modal-dialog { + width: 360px; + + .description { + margin-bottom: 20px; + } + + .select-block { + display: inline-block; + padding-bottom: 16px; + position: relative; + width: 100%; + + label { + @include font-small; + display: inline-block; + font-weight: bold; + margin-bottom: 5px; + user-select: none; + } + } + + .modal-footer { + text-align: center; + } + } +} diff --git a/app/assets/stylesheets/dashboard/current_tasks.scss b/app/assets/stylesheets/dashboard/current_tasks.scss index c1c7fd1e1..c309649fc 100644 --- a/app/assets/stylesheets/dashboard/current_tasks.scss +++ b/app/assets/stylesheets/dashboard/current_tasks.scss @@ -12,6 +12,7 @@ .actions-container { display: flex; flex-grow: 1; + padding-left: 10px; } .filter-container { diff --git a/app/assets/stylesheets/dashboard/quick_start.scss b/app/assets/stylesheets/dashboard/quick_start.scss index f65e95d00..38b4f8dd5 100644 --- a/app/assets/stylesheets/dashboard/quick_start.scss +++ b/app/assets/stylesheets/dashboard/quick_start.scss @@ -1,6 +1,32 @@ .dashboard-container .quick-start-widget { - grid-column: 1 / span 3; + grid-column: 1 / span 2; grid-row: 7 / span 6; + + .widget-body { + padding: 16px; + + .quick-start-description { + margin-bottom: 24px; + } + + .btn-secondary { + margin-bottom: 8px; + text-align: left; + } + } +} + +@media (max-width: 1700px) { + .dashboard-container .quick-start-widget { + grid-column: 1 / span 3; + } +} + + +@media (max-width: 1250px) { + .dashboard-container .quick-start-widget { + grid-column: 1 / span 4; + } } @media (max-width: 1000px) { diff --git a/app/assets/stylesheets/dashboard/recent_work.scss b/app/assets/stylesheets/dashboard/recent_work.scss index 4344b3ee5..e855cd00b 100644 --- a/app/assets/stylesheets/dashboard/recent_work.scss +++ b/app/assets/stylesheets/dashboard/recent_work.scss @@ -1,11 +1,18 @@ .dashboard-container .recent-work-widget { - grid-column: 4 / span 6; + grid-column: 3 / span 7; grid-row: 7 / span 6; } -@media (max-width: 1300px) { +@media (max-width: 1700px) { .dashboard-container .recent-work-widget { - grid-column: 4 / span 9; + grid-column: 4 / span 6; + } +} + + +@media (max-width: 1250px) { + .dashboard-container .recent-work-widget { + grid-column: 5 / span 8; } } diff --git a/app/assets/stylesheets/dashboard/show.scss b/app/assets/stylesheets/dashboard/show.scss index 6ceade9bd..8dad1ce12 100644 --- a/app/assets/stylesheets/dashboard/show.scss +++ b/app/assets/stylesheets/dashboard/show.scss @@ -1,5 +1,5 @@ - .dashboard-container { + --widget-header-size: 44px; --dashboard-widgets-gap: 30px; display: grid; grid-column-gap: var(--dashboard-widgets-gap); @@ -19,17 +19,17 @@ align-items: center; border-bottom: $border-tertiary; display: flex; - height: 44px; - h2 { - line-height: 18px; - margin: 10px 16px; - padding: 4px 0; + height: var(--widget-header-size); + padding-left: 16px; + + .widget-title { + @include font-h2; } } .widget-body { - height: calc(100% - 44px); + height: calc(100% - var(--widget-header-size)); position: absolute; width: 100%; } diff --git a/app/assets/stylesheets/shared/dropdown_selector.scss b/app/assets/stylesheets/shared/dropdown_selector.scss index 74ea8e5eb..4516e39f1 100644 --- a/app/assets/stylesheets/shared/dropdown_selector.scss +++ b/app/assets/stylesheets/shared/dropdown_selector.scss @@ -269,6 +269,7 @@ &[data-options-selected="0"] { display: block; + width: 100%; } } diff --git a/app/views/dashboards/_create_task_modal.html.erb b/app/views/dashboards/_create_task_modal.html.erb new file mode 100644 index 000000000..f0cd4414f --- /dev/null +++ b/app/views/dashboards/_create_task_modal.html.erb @@ -0,0 +1,37 @@ + diff --git a/app/views/dashboards/_current_tasks.html.erb b/app/views/dashboards/_current_tasks.html.erb index 41245a9df..08796cdc1 100644 --- a/app/views/dashboards/_current_tasks.html.erb +++ b/app/views/dashboards/_current_tasks.html.erb @@ -1,6 +1,6 @@
-

<%= t("dashboard.current_tasks.title") %>

+
<%= t("dashboard.current_tasks.title") %>
diff --git a/app/views/dashboards/_quick_start.html.erb b/app/views/dashboards/_quick_start.html.erb index 82792b540..b4c86222c 100644 --- a/app/views/dashboards/_quick_start.html.erb +++ b/app/views/dashboards/_quick_start.html.erb @@ -1,2 +1,20 @@
+
+
+ <%= t("dashboard.quick_start.title") %> +
+
+
+
+ <%= t("dashboard.quick_start.description") %> +
+
<%= t("dashboard.quick_start.new_task") %>
+ <%= link_to protocols_path(new_protocol: true), {class: "new-protocol btn btn-secondary btn-block"} do %> + <%= t("dashboard.quick_start.new_protocol") %> + <% end %> + <%= link_to reports_path(new_report: true), {class: "new-report btn btn-secondary btn-block"} do %> + <%= t("dashboard.quick_start.new_report") %> + <% end %> +
+<%= render "create_task_modal" %> \ No newline at end of file diff --git a/app/views/protocols/index.html.erb b/app/views/protocols/index.html.erb index f405e3d09..571bf24b3 100644 --- a/app/views/protocols/index.html.erb +++ b/app/views/protocols/index.html.erb @@ -5,7 +5,7 @@ <% provide(:head_title, t("protocols.index.head_title")) %> <% if current_team %> -
+
>