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

Change to new style checkboxes on share inventory modal

Browse source
This commit is contained in:
Mojca Lorber 2020-01-24 15:43:13 +01:00
parent 498003555e
commit 3af2f4af19
9 changed files with 55 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 permissionChanges = form.find("input[name='permission_changes']");
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'));
form.find('.all-teams .trigger-checkbox')
form.find('.all-teams .sci-toggle-checkbox')
.toggleClass('hidden', !selectAllCheckbox.is(':checked'))
.attr('disabled', !selectAllCheckbox.is(':checked'));
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);
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);
});

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

@ -418,13 +418,8 @@
display: flex;
padding: 5px 0;
.simple-checkbox.hidden {
.sci-checkbox.hidden {
display: inline-block !important;
+ .checkbox-label {
display: inline-block;
opacity: 0;
}
}
}
}
@ -441,7 +436,7 @@
display: flex;
flex-grow: 1;
.checkbox-label {
.sci-checkbox-container {
margin-right: 5px;
}
}
@ -470,4 +465,3 @@
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-container {
display: inline-block;
height: var(--sci-checkbox-size);
position: relative;
width: var(--sci-checkbox-size);
}
input[type="checkbox"].sci-checkbox {
cursor: pointer;
flex-shrink: 0;
@ -36,7 +43,6 @@ input[type="checkbox"].sci-checkbox {
line-height: calc(var(--sci-checkbox-size) - 2px);
position: absolute;
text-align: center;
top: 1px;
transition: .2s;
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
.sci-toggle-checkbox-container {
display: inline-block;
height: 16px;
position: relative;
width: 24px;
}
input[type="checkbox"].sci-toggle-checkbox {
cursor: pointer;
flex-shrink: 0;
@ -17,8 +24,9 @@ input[type="checkbox"].sci-toggle-checkbox {
display: inline-block;
flex-shrink: 0;
height: 16px;
margin-left: -27px;
position: relative;
left: 0;
position: absolute;
top: 0;
transition: .2s;
width: 24px;

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

@ -17,29 +17,37 @@
<div class="data-list">
<div class="all-teams">
<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="checkbox-label"></span>
<span class="sci-checkbox-container">
<%= 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") %>
</span>
<span class="permission-selector">
<%= check_box_tag 'select_all_write_permission', 0, @repository.shared_write?, { class: 'hidden trigger-checkbox' }%>
<span class="checkbox-label"></span>
<span class="sci-toggle-checkbox-container">
<%= 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>
</div>
<div class="teams-list">
<% (current_user.teams - [@repository.team]).each do |t| %>
<div class="team-container">
<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="checkbox-label"></span>
<span class="sci-checkbox-container">
<%= 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 %>
</div>
<div class="permission-selector">
<%= check_box_tag 'write_permissions[]', t.id, @repository.private_shared_with_write?(t), {
id: "editable_#{t.id}",
class: (@repository.private_shared_with?(t) ? 'trigger-checkbox' : 'trigger-checkbox hidden')
}.compact %>
<span class="checkbox-label"></span>
<span class="sci-toggle-checkbox-container">
<%= check_box_tag 'write_permissions[]', t.id, @repository.private_shared_with_write?(t), {
id: "editable_#{t.id}",
class: (@repository.private_shared_with?(t) ? 'sci-toggle-checkbox' : 'sci-toggle-checkbox hidden')
}.compact %>
<span class="sci-toggle-checkbox-label"></span>
</span>
</div>
</div>
<% 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-9">
<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="checkbox-label"></span>
<span class="sci-checkbox-container">
<%= 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>
</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-9">
<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="checkbox-label"></span>
<span class="sci-checkbox-container">
<%= 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>
</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-9">
<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="checkbox-label"></span>
<span class="sci-checkbox-container">
<%= 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>
</div>
</div>