scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-02 01:45:38 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2358 from mlorb/ml-sci-4275

Browse source 
Change to new style checkboxes on share inventory modal [SCI-4275]
This commit is contained in:
mlorb 2020-01-27 13:38:30 +01:00 • committed by GitHub
commit f605c0def3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 56 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/assets/javascripts/repositories/index.js
View file

@ -108,18 +108,18 @@
var permissionCBs = form.find("input[name='write_permissions[]']"); var permissionCBs = form.find("input[name='write_permissions[]']");
var permissionChanges = form.find("input[name='permission_changes']"); var permissionChanges = form.find("input[name='permission_changes']");
var submitBtn = form.find('input[type="submit"]'); var submitBtn = form.find('input[type="submit"]');
var selectAllCheckbox = form.find('.all-teams .simple-checkbox'); var selectAllCheckbox = form.find('.all-teams .sci-checkbox');
form.find('.teams-list').find('input.simple-checkbox, .permission-selector') form.find('.teams-list').find('input.sci-checkbox, .permission-selector')
.toggleClass('hidden', selectAllCheckbox.is(':checked')); .toggleClass('hidden', selectAllCheckbox.is(':checked'));
form.find('.all-teams .trigger-checkbox') form.find('.all-teams .sci-toggle-checkbox')
.toggleClass('hidden', !selectAllCheckbox.is(':checked')) .toggleClass('hidden', !selectAllCheckbox.is(':checked'))
.attr('disabled', !selectAllCheckbox.is(':checked')); .attr('disabled', !selectAllCheckbox.is(':checked'));
selectAllCheckbox.change(function() { selectAllCheckbox.change(function() {
form.find('.teams-list').find('input.simple-checkbox, .permission-selector') form.find('.teams-list').find('input.sci-checkbox, .permission-selector')
.toggleClass('hidden', this.checked); .toggleClass('hidden', this.checked);
form.find('.all-teams .trigger-checkbox').toggleClass('hidden', !this.checked) form.find('.all-teams .sci-toggle-checkbox').toggleClass('hidden', !this.checked)
.attr('disabled', !this.checked); .attr('disabled', !this.checked);
}); });

11
app/assets/stylesheets/repositories.scss
View file

@ -116,6 +116,7 @@
padding-top: 123px; padding-top: 123px;
.dataTables_scrollHead { .dataTables_scrollHead {
position: -webkit-sticky !important;
position: sticky !important; position: sticky !important;
top: 194px; top: 194px;
z-index: 90; z-index: 90;
@ -418,13 +419,8 @@
display: flex; display: flex;
padding: 5px 0; padding: 5px 0;
.simple-checkbox.hidden { .sci-checkbox.hidden {
display: inline-block !important; display: inline-block !important;
+ .checkbox-label {
display: inline-block;
opacity: 0;
}
} }
} }
} }
@ -441,7 +437,7 @@
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
.checkbox-label { .sci-checkbox-container {
margin-right: 5px; margin-right: 5px;
} }
} }
@ -470,4 +466,3 @@
color: $color-silver-chalice; color: $color-silver-chalice;
} }
} }

108
app/assets/stylesheets/shared/checkbox.scss
View file

@ -1,108 +0,0 @@
// scss-lint:disable SelectorDepth SelectorFormat QualifyingElement
// scss-lint:disable NestingDepth ImportantRule
@import "constants";
@import "mixins";
:root {
--checkbox-size: 16px;
}
input[type="checkbox"].simple-checkbox {
cursor: pointer;
flex-shrink: 0;
height: var(--checkbox-size);
margin: 0;
opacity: 0;
position: relative;
width: var(--checkbox-size);
z-index: 2;
+ .checkbox-label {
display: inline-block;
flex-shrink: 0;
height: var(--checkbox-size);
margin-left: calc((var(--checkbox-size) * -1) - 1px);
position: relative;
width: var(--checkbox-size);
&::before {
content: "\f0c8";
font-family: "Font Awesome 5 Free";
font-size: var(--checkbox-size);
font-weight: 400;
left: 0;
line-height: var(--checkbox-size);
position: absolute;
text-align: center;
top: 1px;
width: var(--checkbox-size);
}
}
&.disabled {
pointer-events: none;
+ .checkbox-label {
color: $color-silver-chalice;
cursor: not-allowed;
}
}
&.hidden + .checkbox-label {
display: none;
}
&:checked + .checkbox-label {
&::before {
content: "\f14a";
}
}
}
input[type="checkbox"].trigger-checkbox {
cursor: pointer;
flex-shrink: 0;
height: 16px;
margin: 0;
opacity: 0;
position: relative;
width: 24px;
z-index: 2;
+ .checkbox-label {
background: $color-silver-chalice;
border-radius: 8px;
display: inline-block;
flex-shrink: 0;
height: 16px;
margin-left: -24px;
position: relative;
transition: .2s;
width: 24px;
&::before {
background: $color-white;
border-radius: 7px;
content: "";
height: 12px;
left: 0;
margin: 2px;
position: absolute;
transition: .2s;
width: 12px;
}
}
&.hidden + .checkbox-label {
display: none;
}
&:checked + .checkbox-label {
background: $brand-success;
&::before {
left: 8px;
}
}
}

8
app/assets/stylesheets/shared_styles/elements/checkboxes.scss
View file

@ -4,6 +4,13 @@
--sci-checkbox-size: 16px; --sci-checkbox-size: 16px;
} }
.sci-checkbox-container {
display: inline-block;
height: var(--sci-checkbox-size);
position: relative;
width: var(--sci-checkbox-size);
}
input[type="checkbox"].sci-checkbox { input[type="checkbox"].sci-checkbox {
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
@ -36,7 +43,6 @@ input[type="checkbox"].sci-checkbox {
line-height: calc(var(--sci-checkbox-size) - 2px); line-height: calc(var(--sci-checkbox-size) - 2px);
position: absolute; position: absolute;
text-align: center; text-align: center;
top: 1px;
transition: .2s; transition: .2s;
width: var(--sci-checkbox-size); width: var(--sci-checkbox-size);
} }

12
app/assets/stylesheets/shared_styles/elements/toggles.scss
View file

@ -1,5 +1,12 @@
// scss-lint:disable SelectorDepth QualifyingElement NestingDepth // scss-lint:disable SelectorDepth QualifyingElement NestingDepth
.sci-toggle-checkbox-container {
display: inline-block;
height: 16px;
position: relative;
width: 24px;
}
input[type="checkbox"].sci-toggle-checkbox { input[type="checkbox"].sci-toggle-checkbox {
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
@ -17,8 +24,9 @@ input[type="checkbox"].sci-toggle-checkbox {
display: inline-block; display: inline-block;
flex-shrink: 0; flex-shrink: 0;
height: 16px; height: 16px;
margin-left: -27px; left: 0;
position: relative; position: absolute;
top: 0;
transition: .2s; transition: .2s;
width: 24px; width: 24px;

30
app/views/repositories/_share_repository_modal.html.erb
View file

@ -17,29 +17,37 @@
<div class="data-list"> <div class="data-list">
<div class="all-teams"> <div class="all-teams">
<span class="team-selector" title="<%= t("repositories.index.modal_share.all_teams_tooltip") %>"> <span class="team-selector" title="<%= t("repositories.index.modal_share.all_teams_tooltip") %>">
<%= check_box_tag 'select_all_teams', 0, @repository.shared_read? || @repository.shared_write?, { class: 'simple-checkbox' } %> <span class="sci-checkbox-container">
<span class="checkbox-label"></span> <%= check_box_tag 'select_all_teams', 0, @repository.shared_read? || @repository.shared_write?, { class: 'sci-checkbox' } %>
<span class="sci-checkbox-label"></span>
</span>
<%= t("repositories.index.modal_share.all_teams") %> <%= t("repositories.index.modal_share.all_teams") %>
</span> </span>
<span class="permission-selector"> <span class="permission-selector">
<%= check_box_tag 'select_all_write_permission', 0, @repository.shared_write?, { class: 'hidden trigger-checkbox' }%> <span class="sci-toggle-checkbox-container">
<span class="checkbox-label"></span> <%= check_box_tag 'select_all_write_permission', 0, @repository.shared_write?, { class: 'hidden sci-toggle-checkbox' }%>
<span class="sci-toggle-checkbox-label"></span>
</span>
</span> </span>
</div> </div>
<div class="teams-list"> <div class="teams-list">
<% (current_user.teams - [@repository.team]).each do |t| %> <% (current_user.teams - [@repository.team]).each do |t| %>
<div class="team-container"> <div class="team-container">
<div class="team-selector"> <div class="team-selector">
<%= check_box_tag 'share_team_ids[]', t.id, @repository.private_shared_with?(t), {id: "shared_#{t.id}", class: "simple-checkbox"} %> <span class="sci-checkbox-container">
<span class="checkbox-label"></span> <%= check_box_tag 'share_team_ids[]', t.id, @repository.private_shared_with?(t), {id: "shared_#{t.id}", class: "sci-checkbox"} %>
<span class="sci-checkbox-label"></span>
</span>
<%= t.name %> <%= t.name %>
</div> </div>
<div class="permission-selector"> <div class="permission-selector">
<%= check_box_tag 'write_permissions[]', t.id, @repository.private_shared_with_write?(t), { <span class="sci-toggle-checkbox-container">
id: "editable_#{t.id}", <%= check_box_tag 'write_permissions[]', t.id, @repository.private_shared_with_write?(t), {
class: (@repository.private_shared_with?(t) ? 'trigger-checkbox' : 'trigger-checkbox hidden') id: "editable_#{t.id}",
}.compact %> class: (@repository.private_shared_with?(t) ? 'sci-toggle-checkbox' : 'sci-toggle-checkbox hidden')
<span class="checkbox-label"></span> }.compact %>
<span class="sci-toggle-checkbox-label"></span>
</span>
</div> </div>
</div> </div>
<% end %> <% end %>

6
app/views/repository_columns/manage_column_partials/_date.html.erb
View file

@ -2,8 +2,10 @@
<div class="col-sm-3"></div> <div class="col-sm-3"></div>
<div class="col-sm-9"> <div class="col-sm-9">
<div class="permission-selector"> <div class="permission-selector">
<%= check_box_tag 'range', '', column&.repository_date_range_value?, { id: 'date-range', class: column.new_record? ? 'simple-checkbox' : 'simple-checkbox disabled' } %> <span class="sci-checkbox-container">
<span class="checkbox-label"></span> <%= check_box_tag 'range', '', column&.repository_date_range_value?, { id: 'date-range', class: column.new_record? ? 'sci-checkbox' : 'sci-checkbox disabled' } %>
<span class="sci-checkbox-label"></span>
</span>
<span class="range-label"><%= t('libraries.manange_modal_column.datetime_type.range_label') %></span> <span class="range-label"><%= t('libraries.manange_modal_column.datetime_type.range_label') %></span>
</div> </div>
</div> </div>

6
app/views/repository_columns/manage_column_partials/_datetime.html.erb
View file

@ -2,8 +2,10 @@
<div class="col-sm-3"></div> <div class="col-sm-3"></div>
<div class="col-sm-9"> <div class="col-sm-9">
<div class="permission-selector"> <div class="permission-selector">
<%= check_box_tag 'range', '', column&.repository_date_time_range_value?, { id: 'datetime-range', class: column.new_record? ? 'simple-checkbox' : 'simple-checkbox disabled' } %> <span class="sci-checkbox-container">
<span class="checkbox-label"></span> <%= check_box_tag 'range', '', column&.repository_date_time_range_value?, { id: 'datetime-range', class: column.new_record? ? 'sci-checkbox' : 'sci-checkbox disabled' } %>
<span class="sci-checkbox-label"></span>
</span>
<span class="range-label"><%= t('libraries.manange_modal_column.datetime_type.range_label') %></span> <span class="range-label"><%= t('libraries.manange_modal_column.datetime_type.range_label') %></span>
</div> </div>
</div> </div>

6
app/views/repository_columns/manage_column_partials/_time.html.erb
View file

@ -2,8 +2,10 @@
<div class="col-sm-3"></div> <div class="col-sm-3"></div>
<div class="col-sm-9"> <div class="col-sm-9">
<div class="permission-selector"> <div class="permission-selector">
<%= check_box_tag 'range', '', column&.repository_time_range_value?, { id: 'time-range', class: column.new_record? ? 'simple-checkbox' : 'simple-checkbox disabled' } %> <span class="sci-checkbox-container">
<span class="checkbox-label"></span> <%= check_box_tag 'range', '', column&.repository_time_range_value?, { id: 'time-range', class: column.new_record? ? 'sci-checkbox' : 'sci-checkbox disabled' } %>
<span class="sci-checkbox-label"></span>
</span>
<span class="range-label"><%= t('libraries.manange_modal_column.datetime_type.range_label') %></span> <span class="range-label"><%= t('libraries.manange_modal_column.datetime_type.range_label') %></span>
</div> </div>
</div> </div>