From ef3814cceca4510fea72d4ba63d12766ba1c7300 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Wed, 4 Dec 2019 11:27:22 +0100 Subject: [PATCH] Add new buttons to protocols, tasks, experiments, projects --- app/assets/javascripts/projects/canvas.js.erb | 4 + app/assets/javascripts/sitewide/comments.js | 1 + .../javascripts/users/settings/teams/show.js | 2 +- app/assets/stylesheets/application.scss | 6 +- app/assets/stylesheets/constants.scss | 4 +- app/assets/stylesheets/marvinjs.scss | 1 + .../my_modules/protocols/index.scss | 1 + .../stylesheets/my_modules/results/index.scss | 14 +- app/assets/stylesheets/projects.scss | 34 +++-- .../shared_styles/elements/buttons.scss | 40 +++++- .../shared_styles/elements/toggles.scss | 1 + .../shared_styles/global_elements.scss | 108 ++++++++++++++- app/assets/stylesheets/steps.scss | 23 +--- app/assets/stylesheets/themes/scinote.scss | 23 ++-- app/helpers/search_helper.rb | 4 +- .../_create_marvin_sketch_button.html.erb | 2 +- app/views/canvas/_edit.html.erb | 10 +- app/views/experiments/canvas.html.erb | 19 +-- .../_state_button_complete.html.erb | 4 +- .../_state_button_uncomplete.html.erb | 4 +- .../modals/_manage_users_modal.html.erb | 2 +- .../protocols/_protocol_buttons.html.erb | 28 ++-- app/views/my_modules/results.html.erb | 62 ++++----- app/views/projects/index.html.erb | 124 ++---------------- app/views/protocols/_steps.html.erb | 8 +- app/views/protocols/index.html.erb | 45 ++++--- .../index/_create_new_modal.html.erb | 4 +- .../index/_protocol_preview_modal.html.erb | 4 +- .../_protocol_preview_modal_body.html.erb | 2 +- .../_protocol_preview_modal_footer.html.erb | 2 +- app/views/result_assets/_edit.html.erb | 4 +- app/views/result_assets/_new.html.erb | 4 +- app/views/result_tables/_edit.html.erb | 4 +- app/views/result_tables/_new.html.erb | 4 +- app/views/result_texts/_edit.html.erb | 4 +- app/views/result_texts/_new.html.erb | 4 +- app/views/shared/_invite_users_modal.html.erb | 6 +- app/views/steps/_edit.html.erb | 4 +- app/views/steps/_new.html.erb | 4 +- app/views/steps/_step.html.erb | 4 +- app/views/users/settings/teams/index.html.erb | 2 +- 41 files changed, 341 insertions(+), 289 deletions(-) diff --git a/app/assets/javascripts/projects/canvas.js.erb b/app/assets/javascripts/projects/canvas.js.erb index 1a82bcceb..0786be505 100644 --- a/app/assets/javascripts/projects/canvas.js.erb +++ b/app/assets/javascripts/projects/canvas.js.erb @@ -496,6 +496,10 @@ function animateReposition(el, left, top) { function bindModeChange() { var buttons = $('#diagram-buttons').find("a[type='button']"); + $('.change-canvas-view').off().on('click', '.sci-toggle-item', function() { + $(this).next().click(); + }) + buttons.on('click', function() { var action = $(this).data("action"); diff --git a/app/assets/javascripts/sitewide/comments.js b/app/assets/javascripts/sitewide/comments.js index 45e4a3ef9..26159335f 100644 --- a/app/assets/javascripts/sitewide/comments.js +++ b/app/assets/javascripts/sitewide/comments.js @@ -65,6 +65,7 @@ var Comments = (function() { $el.find('textarea'), $el.find('.new-comment-button') ); + $el.find('textarea').focus().blur(); $el.find('.new-comment-button').off('click').click(() => { var errorField = $el.find('.new-message-error'); var newButton = this; diff --git a/app/assets/javascripts/users/settings/teams/show.js b/app/assets/javascripts/users/settings/teams/show.js index 96eed79ba..6174038b7 100644 --- a/app/assets/javascripts/users/settings/teams/show.js +++ b/app/assets/javascripts/users/settings/teams/show.js @@ -13,7 +13,7 @@ function AddUserButtonTemplate() { return ` - diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index a1f54560d..f96efa918 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -19,14 +19,14 @@ @import "handsontable.full.min"; @import "ajax-bootstrap-select.min"; @import "extend/bootstrap"; -@import "themes/*"; @import "extend/*"; +@import "hooks/*"; +@import "partials/*"; @import "my_modules/protocols/*"; @import "my_modules/results/*"; @import "protocols/*"; -@import "hooks/*"; -@import "partials/*"; @import "settings/*"; @import "shared/*"; +@import "themes/*"; @import "*" diff --git a/app/assets/stylesheets/constants.scss b/app/assets/stylesheets/constants.scss index 312a48e04..d6274494f 100644 --- a/app/assets/stylesheets/constants.scss +++ b/app/assets/stylesheets/constants.scss @@ -134,8 +134,8 @@ $btn-success-color: $color-white; $btn-success-bg: $brand-primary; $btn-success-border: darken($btn-success-bg, 5%); $btn-info-color: $color-white; -$btn-info-bg: $brand-info; -$btn-info-border: darken($btn-info-bg, 5%); +$btn-info-bg: $brand-primary; +$btn-info-border: $brand-primary; $btn-warning-color: $color-white; $btn-warning-bg: $brand-warning; $btn-warning-border: darken($btn-warning-bg, 5%); diff --git a/app/assets/stylesheets/marvinjs.scss b/app/assets/stylesheets/marvinjs.scss index 92d1a2da7..918b8016a 100644 --- a/app/assets/stylesheets/marvinjs.scss +++ b/app/assets/stylesheets/marvinjs.scss @@ -140,6 +140,7 @@ } .new-marvinjs-upload-button { + padding: 2px 16px; .new-marvinjs-upload-icon { display: inline-block; diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss index 8e9736d33..d5a76bf33 100644 --- a/app/assets/stylesheets/my_modules/protocols/index.scss +++ b/app/assets/stylesheets/my_modules/protocols/index.scss @@ -259,6 +259,7 @@ .my-module-recent-protocols { flex-grow: 1; + height: 36px; margin-bottom: 5px; position: relative; diff --git a/app/assets/stylesheets/my_modules/results/index.scss b/app/assets/stylesheets/my_modules/results/index.scss index 9fe221dc4..c52bb0323 100644 --- a/app/assets/stylesheets/my_modules/results/index.scss +++ b/app/assets/stylesheets/my_modules/results/index.scss @@ -8,10 +8,14 @@ #results-toolbar { .help_tooltips { - .btn-default { - border: 0; - color: inherit; - margin-left: 10px; + align-items: center; + display: flex; + + .add-result-text { + display: inline-block; + line-height: 36px; + margin-bottom: 5px; + margin-right: 5px; } } -} +} \ No newline at end of file diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss index 4c43691c9..c7ea813aa 100644 --- a/app/assets/stylesheets/projects.scss +++ b/app/assets/stylesheets/projects.scss @@ -48,26 +48,38 @@ $color-module-hover: $brand-primary; /* Canvas index page */ #canvas-container:not(.canvas-container-edit-mode) { - margin-top: 20px; + margin-top: 5px; } /********************************** * jsPlumb CANVAS RELATED STYLING * *********************************/ #diagram-buttons { - margin-bottom: 10px; + align-items: center; + display: flex; + + #edit-canvas-button { + margin-right: 5px; + } + + .actions-button { + margin-right: 15px; + } + + .toolbarButtons { + align-items: center; + display: flex; + + .zoom-text { + margin-right: 5px; + } + } } #update-canvas { - #canvas-new-module { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - .btn-group > .btn:first-child { - border-bottom-left-radius: 0; - } - .btn-group > .btn:last-child { - border-bottom-right-radius: 0; + + .canvas-header{ + margin-bottom: 5px; } } diff --git a/app/assets/stylesheets/shared_styles/elements/buttons.scss b/app/assets/stylesheets/shared_styles/elements/buttons.scss index 4fd73b654..f051c2981 100644 --- a/app/assets/stylesheets/shared_styles/elements/buttons.scss +++ b/app/assets/stylesheets/shared_styles/elements/buttons.scss @@ -13,6 +13,7 @@ padding: 7px 16px; position: relative; transition: .3s; + text-decoration: none; user-select: none; .fas { @@ -22,10 +23,21 @@ &:hover { background: $brand-primary-hover; + color: $color-white; + text-decoration: none; } &:active { background: $brand-primary-press; + color: $color-white; + text-decoration: none; + } + + &:focus { + border: $border-focus; + color: $color-white; + outline: 0; + text-decoration: none; } &.secondary { @@ -36,11 +48,18 @@ &:hover { background: $color-concrete; border: $border-secondary; + color: $color-black; } &:active { background: $color-alto; border: $border-secondary; + color: $color-black; + } + + &:focus { + border: $border-focus; + color: $color-black; } } @@ -52,11 +71,18 @@ &:hover { background: $color-concrete; border: $border-transparent; + color: $color-black; } &:active { background: $color-alto; border: $border-transparent; + color: $color-black; + } + + &:focus { + border: $border-focus; + color: $color-black; } } @@ -71,6 +97,11 @@ &:active { background: $brand-danger-press; } + + &:focus { + border: $border-focus; + color: $color-white; + } } &.icon-btn { @@ -82,15 +113,11 @@ } } - &:focus { - border: $border-focus; - } - &:disabled { background: $color-alto; border: $border-tertiary; color: $color-silver-chalice; - opacity: .25; + opacity: .5; &.secondary, &.tertiary { @@ -99,6 +126,7 @@ &:hover { background: $color-white; border: $border-tertiary; + color: $color-silver-chalice; } } @@ -118,7 +146,7 @@ float: left; margin: 0 4px 4px 0; - &:last-of-type { + &:nth-last-child(1) { margin-right: 0; } } diff --git a/app/assets/stylesheets/shared_styles/elements/toggles.scss b/app/assets/stylesheets/shared_styles/elements/toggles.scss index 34bcebabb..5a1fdd9c1 100644 --- a/app/assets/stylesheets/shared_styles/elements/toggles.scss +++ b/app/assets/stylesheets/shared_styles/elements/toggles.scss @@ -73,6 +73,7 @@ input[type="checkbox"].sci-toggle-checkbox { background: $color-white; border: $border-default; border-left-color: transparent; + color: $color-black; display: inline-block; height: 36px; line-height: 34px; diff --git a/app/assets/stylesheets/shared_styles/global_elements.scss b/app/assets/stylesheets/shared_styles/global_elements.scss index 44e52502b..230c6eb10 100644 --- a/app/assets/stylesheets/shared_styles/global_elements.scss +++ b/app/assets/stylesheets/shared_styles/global_elements.scss @@ -1,2 +1,108 @@ @import "constants/*"; -@import "elements/*"; \ No newline at end of file +@import "elements/*"; + +// Examples + +/* + +
+
+ + + + +
+
+
+ + + + +
+
+
+ + + + +
+
+
+ + + + +
+
+
+ + + + + + + + +
+
+
+ + + + + + + + +
+
+
+ + + + + +
+
+
+ + + + + + +
+
+
+ +
+
+
+ + +
+
+
+ + + +
+
+
+ + + +
+
+
+ + +
+
+
+ + +
+
+ +*/ \ No newline at end of file diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss index c1562b4eb..3a129293b 100644 --- a/app/assets/stylesheets/steps.scss +++ b/app/assets/stylesheets/steps.scss @@ -42,28 +42,17 @@ .complete-step-btn { display: inline-block; - line-height: 39px; - - button { - display: block; - font-size: 12px; - margin: auto 0; - padding: 3px 10px; - - span { - font-size: 15px; - } - } } .panel-heading { - height: 39px; + border: 0; + height: 46px; padding-bottom: 0; padding-top: 0; .panel-options { bottom: 0; - line-height: 39px; + line-height: 46px; } span.step-number { @@ -76,19 +65,19 @@ .left-floats { align-items: center; display: flex; - height: 39px; + height: 100%; padding-right: 15px; .step-name-link { display: flex; flex-shrink: 1; - line-height: 39px; + line-height: 100%; overflow: hidden; .name-block { display: flex; flex-shrink: 1; - height: 39px; + height: 100%; overflow: hidden; @media (max-width: 1188px) { diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss index 7be1f04a1..20365fc25 100644 --- a/app/assets/stylesheets/themes/scinote.scss +++ b/app/assets/stylesheets/themes/scinote.scss @@ -286,8 +286,8 @@ a[data-toggle="tooltip"] { .navbar-secondary { background: $color-concrete !important; margin-left: -280px; - padding-left: 294px; - padding-right: 97px; + padding-left: 280px; + padding-right: 82px; margin-bottom: 0; border-color: transparent; border-bottom: 0; @@ -310,7 +310,7 @@ a[data-toggle="tooltip"] { #secondary-menu { background: $color-white; border-bottom: 1px solid $color-gainsboro; - margin-top: 15px; + padding-top: 15px; .open > a, .open > a:hover, @@ -398,7 +398,7 @@ a[data-toggle="tooltip"] { } .navbar-without-sidebar{ - padding-left: 15px; + padding-left: 0; margin-left: 0px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; @@ -498,7 +498,7 @@ a[data-toggle="tooltip"] { margin-bottom: 15px; } - & > .btn-group { + & > .sci-btn-group { margin-right: 30px; } } @@ -918,13 +918,15 @@ ul.content-activities { margin-bottom: 5px; .protocol-button { - margin-bottom: 5px; + + .sci-btn-group { + float: left + } } .protocol-status-bar { display: flex; - height: 33px; - margin-bottom: 5px; + height: 40px; margin-right: 15px; } @@ -932,7 +934,8 @@ ul.content-activities { border-color: $color-silver; box-shadow: none; display: inline-block; - height: 33px; + height: 36px; + margin-bottom: 5px; & > .panel-body { padding: 0 0 0 15px; @@ -944,7 +947,7 @@ ul.content-activities { .link-button, .link-toggle { - height: 33px; + height: 36px; position: relative; right: -1px; top: -1px; diff --git a/app/helpers/search_helper.rb b/app/helpers/search_helper.rb index 794efd8cf..48b49c2d9 100644 --- a/app/helpers/search_helper.rb +++ b/app/helpers/search_helper.rb @@ -25,11 +25,11 @@ module SearchHelper if search_team != current_team link_to text, path, - class: 'btn btn-success', + class: 'sci-btn', data: { confirm: t('users.settings.changed_team_in_search', team: search_team.name) } else - link_to text, path, class: 'btn btn-success' + link_to text, path, class: 'sci-btn' end end end diff --git a/app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb b/app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb index d4d3c472f..5fa53dafa 100644 --- a/app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb +++ b/app/views/assets/marvinjs/_create_marvin_sketch_button.html.erb @@ -1,5 +1,5 @@ " data-unsaved-work-text="<%=t "experiments.canvas.edit.unsaved_work" %>" > - <%= bootstrap_form_tag url: canvas_experiment_url, method: "post" do |f| %> + <%= bootstrap_form_tag url: canvas_experiment_url, method: "post", html: {class: "canvas-header"} do |f| %> <% if can_manage_experiment?(@experiment) %> - <%=link_to "", type: "button", class: "btn btn-primary help_tooltips", id: "canvas-new-module", + <%=link_to "", type: "button", class: "sci-btn help_tooltips", id: "canvas-new-module", data: { tooltiplink: I18n.t('tooltips.link.task.new'), tooltipcontent: I18n.t('tooltips.text.task.new') } do %> @@ -24,12 +24,12 @@ <% end %> <% end %> -
- <%= link_to canvas_experiment_path(@experiment), type: "button", class: "btn btn-default cancel-edit-canvas" do %> +
+ <%= link_to canvas_experiment_path(@experiment), type: "button", class: "sci-btn secondary cancel-edit-canvas" do %>   <% end %> - <%= f.submit class: "btn btn-success", id: "canvas-save" do %> + <%= f.submit class: "sci-btn", id: "canvas-save" do %> <%= t("experiments.canvas.edit.save_short") %> <% end %> diff --git a/app/views/experiments/canvas.html.erb b/app/views/experiments/canvas.html.erb index 2769de66f..a8732f63b 100644 --- a/app/views/experiments/canvas.html.erb +++ b/app/views/experiments/canvas.html.erb @@ -12,13 +12,13 @@ type: 'button', id: 'edit-canvas-button', data: { action: 'edit' }, - class: 'ajax btn btn-primary' do %> + class: 'ajax sci-btn' do %> <% end %> - - diff --git a/app/views/my_modules/_state_button_uncomplete.html.erb b/app/views/my_modules/_state_button_uncomplete.html.erb index a923e5d26..6f1ca9acd 100644 --- a/app/views/my_modules/_state_button_uncomplete.html.erb +++ b/app/views/my_modules/_state_button_uncomplete.html.erb @@ -1,4 +1,4 @@ - \ No newline at end of file diff --git a/app/views/my_modules/modals/_manage_users_modal.html.erb b/app/views/my_modules/modals/_manage_users_modal.html.erb index baf988374..3b6c518f3 100644 --- a/app/views/my_modules/modals/_manage_users_modal.html.erb +++ b/app/views/my_modules/modals/_manage_users_modal.html.erb @@ -15,7 +15,7 @@ <%=t "experiments.canvas.full_zoom.modal_manage_users.contact_admins", team: @experiment.project.team.name %> <% end %> - +
diff --git a/app/views/my_modules/protocols/_protocol_buttons.html.erb b/app/views/my_modules/protocols/_protocol_buttons.html.erb index 421dbbd3d..874aab933 100644 --- a/app/views/my_modules/protocols/_protocol_buttons.html.erb +++ b/app/views/my_modules/protocols/_protocol_buttons.html.erb @@ -1,6 +1,6 @@
-
-
@@ -25,17 +25,17 @@
  •  <%= t("my_modules.protocols.buttons.load_protocol_from_file") %>
  • <% end %> + <% if can_read_experiment?(@my_module.experiment) %> + <%= link_to raw(" " + t('my_modules.protocols.buttons.export') + ""), export_protocols_path(protocol_ids: @protocol.id, my_module_id: @my_module.id), class: "sci-btn secondary", data: { turbolinks: false } %> + <% else %> +  <%= t("my_modules.protocols.buttons.export") %> + <% end %> + <% if can_read_protocol_in_module?(@protocol) && can_create_protocols_in_repository?(@protocol.team) %> + +  <%= t("my_modules.protocols.buttons.copy_to_repository") %> + + <% else %> +  <%= t("my_modules.protocols.buttons.copy_to_repository") %> + <% end %>
    - <% if can_read_experiment?(@my_module.experiment) %> - <%= link_to raw(" " + t('my_modules.protocols.buttons.export') + ""), export_protocols_path(protocol_ids: @protocol.id, my_module_id: @my_module.id), class: "btn btn-default", data: { turbolinks: false } %> - <% else %> -  <%= t("my_modules.protocols.buttons.export") %> - <% end %> - <% if can_read_protocol_in_module?(@protocol) && can_create_protocols_in_repository?(@protocol.team) %> - -  <%= t("my_modules.protocols.buttons.copy_to_repository") %> - - <% else %> -  <%= t("my_modules.protocols.buttons.copy_to_repository") %> - <% end %>
    diff --git a/app/views/my_modules/results.html.erb b/app/views/my_modules/results.html.erb index 3f0e9bb80..105ac947d 100644 --- a/app/views/my_modules/results.html.erb +++ b/app/views/my_modules/results.html.erb @@ -6,45 +6,47 @@
    -
    - -
    <% if can_manage_module?(@my_module) %> -
    - - - - - - - - - - - - - - <%= render partial: '/assets/marvinjs/create_marvin_sketch_button.html.erb', - locals: { element_id: @my_module.id, element_type: 'Result', sketch_container: "#results[data-module-id=#{@my_module.id}]" } %> - <%= render partial: "assets/wopi/create_wopi_file_button", - locals: { element_id: @my_module.id, element_type: 'Result' } %> + +
    + + + + + + + + + + + + + <%= render partial: '/assets/marvinjs/create_marvin_sketch_button.html.erb', + locals: { element_id: @my_module.id, element_type: 'Result', sketch_container: "#results[data-module-id=#{@my_module.id}]" } %> + <%= render partial: "assets/wopi/create_wopi_file_button", + locals: { element_id: @my_module.id, element_type: 'Result' } %> +
    <% end %>
    diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb index 868cc6b8e..3e44d52b3 100644 --- a/app/views/projects/index.html.erb +++ b/app/views/projects/index.html.erb @@ -19,8 +19,8 @@ <%= render partial: "new.html.erb", locals: { form: f, teams: @teams } %>
    @@ -75,11 +75,11 @@ -
    -
    - - - - -
    -
    -
    - - - - -
    -
    -
    - - - - -
    -
    -
    - - - - - - - - -
    -
    -
    - - - - - - - - -
    -
    -
    - - - - - -
    -
    -
    - - - - - - -
    -
    -
    - -
    -
    -
    - - -
    -
    -
    - - - -
    -
    -
    - - - -
    -
    -
    - - -
    -
    -
    - - -
    - diff --git a/app/views/protocols/_steps.html.erb b/app/views/protocols/_steps.html.erb index 304921870..4a39256a3 100644 --- a/app/views/protocols/_steps.html.erb +++ b/app/views/protocols/_steps.html.erb @@ -2,7 +2,7 @@
    @@ -28,7 +28,7 @@
    diff --git a/app/views/protocols/index.html.erb b/app/views/protocols/index.html.erb index e4bd1ded1..143b40e47 100644 --- a/app/views/protocols/index.html.erb +++ b/app/views/protocols/index.html.erb @@ -28,39 +28,38 @@
    <%= t(@type == :public ? "protocols.index.public_description" : "protocols.index.private_description") %>
    -
    - data-url="<%= create_new_modal_protocols_path(team: @current_team, type: @type) %>"> + -
    - + <% if can_create_protocols_in_repository?(@current_team) %> <% end %> - +
    -
    - + <% elsif @type == :archive %>
    <%= t("protocols.index.archive.description") %>
    -
    - + <% end %> diff --git a/app/views/protocols/index/_create_new_modal.html.erb b/app/views/protocols/index/_create_new_modal.html.erb index 22047f3d0..32efcfa50 100644 --- a/app/views/protocols/index/_create_new_modal.html.erb +++ b/app/views/protocols/index/_create_new_modal.html.erb @@ -9,8 +9,8 @@
    diff --git a/app/views/protocols/index/_protocol_preview_modal.html.erb b/app/views/protocols/index/_protocol_preview_modal.html.erb index 68f35c55b..5ea63c0cb 100644 --- a/app/views/protocols/index/_protocol_preview_modal.html.erb +++ b/app/views/protocols/index/_protocol_preview_modal.html.erb @@ -3,8 +3,8 @@