scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-26 09:42:46 +08:00
Code Issues Projects Releases Packages Wiki Activity

Change the way buttons are toggled

Browse source
This commit is contained in:
Mojca Lorber 2020-10-30 18:47:01 +01:00
parent a52315fc79
commit 04e3b67968
5 changed files with 37 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/assets/javascripts/protocols/steps.js.erb
View file

@ -39,28 +39,11 @@
dataType: "json",
data: {completed: completed},
success: function (data) {
var icon_button;
var main_button;
if (completed) {
step.addClass("completed").removeClass("not-completed");
icon_button = step.find(".toggle-step-complete[data-action='complete-step']");
main_button = step.find(".button-step-complete[data-action='complete-step']");
icon_button.attr("data-action", "uncomplete-step");
main_button.attr("data-action", "uncomplete-step");
icon_button.html('<span class="fas fa-check-circle"></span>');
main_button.html('<span class="fas fa-undo"></span>&nbsp;' + data.new_title);
}
else {
step.addClass("not-completed").removeClass("completed");
icon_button = step.find(".toggle-step-complete[data-action='uncomplete-step']");
main_button = step.find(".button-step-complete[data-action='uncomplete-step']");
icon_button.attr("data-action", "complete-step");
main_button.attr("data-action", "complete-step");
icon_button.html('<span class="far fa-check-circle"></span>');
main_button.html('<span class="far fa-check-circle"></span>&nbsp;' + data.new_title);
}
step.toggleClass("completed");
step.find(".toggle-step-complete[data-action='complete-step']").toggleClass('hidden');
step.find(".toggle-step-complete[data-action='uncomplete-step']").toggleClass('hidden');
step.find(".button-step-complete[data-action='complete-step']").toggleClass('hidden');
step.find(".button-step-complete[data-action='uncomplete-step']").toggleClass('hidden');
},
error: function(response) {
if (response.status === 403) {

2
app/assets/stylesheets/steps.scss
View file

@ -90,7 +90,7 @@
max-width: 100%;
min-height: inherit;
overflow: hidden;
padding-left: 1px;
padding-left: .1em;
padding-right: 15px;
.toggle-step-complete {

13
app/assets/stylesheets/themes/scinote.scss
View file

@ -937,19 +937,6 @@ ul.content-activities {
}
}
.step {
.panel-heading a[data-toggle] {
color: inherit;
}
&.not-completed {
.badge-num > span.badge {
background-color: $color-silver;
}
}
}
.well {
background-color: $color-white;
}

11
app/controllers/steps_controller.rb
View file

@ -324,16 +324,7 @@ class StepsController < ApplicationController
num_all: all_steps.to_s)
end
end
# Create localized title for complete/uncomplete button
localized_title = if !completed
t('protocols.steps.options.complete_title')
else
t('protocols.steps.options.uncomplete_title')
end
format.json do
render json: { new_title: localized_title }, status: :ok
end
format.json { render json: {}, status: :ok }
else
format.json { render json: {}, status: :unprocessable_entity }
end

63
app/views/steps/_step.html.erb
View file

@ -1,24 +1,23 @@
<% preview = (defined?(preview) ? preview : false) %>
<% import = (defined?(import) ? import : false) %>
<div class ="step <%= step.completed? ? "completed" : "not-completed" %>" data-id="<%= step.id %>">
<div class ="step <%= "completed" if step.completed? %>" data-id="<%= step.id %>">
<div class="panel panel-default">
<div class="panel-heading step-heading">
<div class="left-floats">
<% if step.completed? %>
<button data-action="uncomplete-step"
data-link-url="<%= toggle_step_state_step_path(step)%>"
class="btn icon-btn btn-light toggle-step-complete"
<%= 'disabled' if !can_complete_or_checkbox_step?(@protocol) || preview %>>
<span class="fas fa-check-circle"></span>
</button>
<% else %>
<button data-action="complete-step"
data-link-url="<%= toggle_step_state_step_path(step)%>"
class="btn icon-btn btn-light toggle-step-complete"
<%= 'disabled' if !can_complete_or_checkbox_step?(@protocol) || preview %>>
<span class="far fa-check-circle"></span>
</button>
<% end %>
<button data-action="uncomplete-step"
data-link-url="<%= toggle_step_state_step_path(step)%>"
class="btn icon-btn btn-light toggle-step-complete
<%= 'hidden' unless step.completed? %>"
<%= 'disabled' if !can_complete_or_checkbox_step?(@protocol) || preview %>>
<span class="fas fa-check-circle"></span>
</button>
<button data-action="complete-step"
data-link-url="<%= toggle_step_state_step_path(step)%>"
class="btn icon-btn btn-light toggle-step-complete
<%= 'hidden' if step.completed? %>"
<%= 'disabled' if !can_complete_or_checkbox_step?(@protocol) || preview %>>
<span class="far fa-check-circle"></span>
</button>
<a class="step-panel-collapse-link"
href="#step-panel-<%= step.id || step.position %>"
@ -42,25 +41,23 @@
<% end %>
</a>
</div>
<div class="panel-options pull-right">
<% if !preview && @protocol.my_module %>
<% if step.completed? %>
<button data-action="uncomplete-step"
data-link-url="<%= toggle_step_state_step_path(step)%>"
class="btn btn-secondary button-step-complete
<%= 'hidden' if !can_complete_or_checkbox_step?(@protocol) || preview %>">
<span class="fas fa-undo"></span>
<%= t("protocols.steps.options.uncomplete_title") %>
</button>
<% else %>
<button data-action="complete-step"
data-link-url="<%= toggle_step_state_step_path(step)%>"
class="btn btn-secondary button-step-complete
<%= 'hidden' if !can_complete_or_checkbox_step?(@protocol) || preview %>">
<span class="far fa-check-circle"></span>
<%= t("protocols.steps.options.complete_title") %>
</button>
<% end %>
<button data-action="uncomplete-step"
data-link-url="<%= toggle_step_state_step_path(step)%>"
class="btn btn-secondary button-step-complete
<%= 'hidden' if !step.completed? || !can_complete_or_checkbox_step?(@protocol) || preview %>">
<span class="fas fa-undo"></span>
<%= t("protocols.steps.options.uncomplete_title") %>
</button>
<button data-action="complete-step"
data-link-url="<%= toggle_step_state_step_path(step)%>"
class="btn btn-secondary button-step-complete
<%= 'hidden' if step.completed? || !can_complete_or_checkbox_step?(@protocol) || preview %>">
<span class="far fa-check-circle"></span>
<%= t("protocols.steps.options.complete_title") %>
</button>
<% end %>
<% if (can_manage_protocol_in_module?(@protocol) || can_manage_protocol_in_repository?(@protocol)) && !(preview) %>
<%= link_to(move_up_step_path(step),