mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-09-15 01:24:53 +08:00
Add quickstart layout and create task modal
This commit is contained in:
aignatov-bio
parent
1fd876bb40
commit
95fca105eb
15 changed files with 188 additions and 14 deletions
37
app/assets/javascripts/dashboard/quick_start.js
Normal file
37
app/assets/javascripts/dashboard/quick_start.js
Normal file
|
|
@ -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();
|
||||
});
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -186,6 +186,8 @@
|
|||
initSelectPicker();
|
||||
initRedirectToNewReportPage();
|
||||
});
|
||||
|
||||
if ($('#content-reports-index').data('new-report')) $('#new-report-btn').click();
|
||||
}
|
||||
|
||||
initDatatable();
|
||||
|
|
|
|||
28
app/assets/stylesheets/dashboard/create_task_modal.scss
Normal file
28
app/assets/stylesheets/dashboard/create_task_modal.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
.actions-container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -269,6 +269,7 @@
|
|||
|
||||
&[data-options-selected="0"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
37
app/views/dashboards/_create_task_modal.html.erb
Normal file
37
app/views/dashboards/_create_task_modal.html.erb
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<div class="modal" id="create-task-modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>
|
||||
<h2 class="modal-title">
|
||||
<%= t("dashboard.create_task_modal.title") %>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="description">
|
||||
<%= t("dashboard.create_task_modal.description") %>
|
||||
</div>
|
||||
<div class="select-block">
|
||||
<label><%= t("dashboard.create_task_modal.project") %></label>
|
||||
<select class="project-filter"
|
||||
data-ajax-url=""
|
||||
data-placeholder="<%= t("dashboard.create_task_modal.project_placeholder") %>"></select>
|
||||
</div>
|
||||
<div class="select-block">
|
||||
<label><%= t("dashboard.create_task_modal.experiment") %></label>
|
||||
<select class="experiment-filter"
|
||||
data-ajax-url=""
|
||||
data-disable-on-load="true"
|
||||
data-disable-placeholder="<%= t("dashboard.create_task_modal.experiment_disabled_placeholder") %>"
|
||||
data-placeholder="<%= t("dashboard.create_task_modal.experiment_placeholder") %>"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal" disabled>
|
||||
<%= t("dashboard.create_task_modal.create_task") %>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="current-tasks-widget basic-widget">
|
||||
<div class="widget-header">
|
||||
<h2 class="title"><%= t("dashboard.current_tasks.title") %></h2>
|
||||
<div class="widget-title"><%= t("dashboard.current_tasks.title") %></div>
|
||||
<div class="actions-container">
|
||||
<div class="filter-container dropdown">
|
||||
<div class="btn btn-light icon-btn filter-button" data-toggle="dropdown"><i class="fas fa-filter"></i></div>
|
||||
|
|
|
|||
|
|
@ -1,2 +1,20 @@
|
|||
<div class="quick-start-widget basic-widget">
|
||||
<div class="widget-header">
|
||||
<div class="widget-title">
|
||||
<%= t("dashboard.quick_start.title") %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="widget-body">
|
||||
<div class="quick-start-description">
|
||||
<%= t("dashboard.quick_start.description") %>
|
||||
</div>
|
||||
<div class="new-task btn btn-secondary btn-block"><i class="fas fa-plus"></i><%= t("dashboard.quick_start.new_task") %></div>
|
||||
<%= link_to protocols_path(new_protocol: true), {class: "new-protocol btn btn-secondary btn-block"} do %>
|
||||
<i class="fas fa-edit"></i><%= t("dashboard.quick_start.new_protocol") %>
|
||||
<% end %>
|
||||
<%= link_to reports_path(new_report: true), {class: "new-report btn btn-secondary btn-block"} do %>
|
||||
<i class="fas fa-clipboard-check"></i><%= t("dashboard.quick_start.new_report") %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<%= render "create_task_modal" %>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<% provide(:head_title, t("protocols.index.head_title")) %>
|
||||
|
||||
<% if current_team %>
|
||||
<div class="content-pane" id="protocols-index">
|
||||
<div class="content-pane" id="protocols-index" <%= "data-new-protocol=true" if params[:new_protocol] %>>
|
||||
<ul class="nav nav-tabs nav-settings">
|
||||
<li role="presentation" class="<%= "active" if @type == :public %>">
|
||||
<%= link_to t("protocols.index.navigation.public"), protocols_path(team: @current_team, type: :public) %>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<%= stylesheet_link_tag 'datatables' %>
|
||||
|
||||
<div class="content-pane">
|
||||
<div id="content-reports-index">
|
||||
<div id="content-reports-index" <%= "data-new-report=true" if params[:new_report] %>>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<% if can_manage_reports?(current_team) %>
|
||||
|
|
|
|||
|
|
@ -41,3 +41,18 @@ en:
|
|||
th: 'Th'
|
||||
fr: 'Fr'
|
||||
sa: 'Sa'
|
||||
quick_start:
|
||||
title: "Quick start"
|
||||
description: "Quickly start a new task, create a new project or a new report."
|
||||
new_task: "New task"
|
||||
new_protocol: "New protocol"
|
||||
new_report: "New report"
|
||||
create_task_modal:
|
||||
title: "Create a new Task"
|
||||
description: "Simply type in the fields bellow to find or create space for your new task to live in"
|
||||
project: "Project"
|
||||
experiment: "Experiment"
|
||||
project_placeholder: "Enter project name (New or Existing)"
|
||||
experiment_placeholder: "Enter experiment name (New or Existing)"
|
||||
experiment_disabled_placeholder: "Select Project to enable Experiments"
|
||||
create_task: "Create Task"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue