diff --git a/app/assets/javascripts/repositories/edit.js b/app/assets/javascripts/repositories/edit.js index 4145e3d0e..27dd8542f 100644 --- a/app/assets/javascripts/repositories/edit.js +++ b/app/assets/javascripts/repositories/edit.js @@ -3,6 +3,6 @@ $('.delete-repo-option').initializeModal('#delete-repo-modal'); $('.rename-repo-option').initializeModal('#rename-repo-modal'); - $('.share-repo-option').initializeModal('#share-repo-modal'); + $('.share-repo-option').initializeModal('.share-repo-modal'); $('.copy-repo-option').initializeModal('#copy-repo-modal'); })(); diff --git a/app/assets/javascripts/repositories/index.js b/app/assets/javascripts/repositories/index.js index c9c16c8d0..d6a78a244 100644 --- a/app/assets/javascripts/repositories/index.js +++ b/app/assets/javascripts/repositories/index.js @@ -1,7 +1,7 @@ //= require repositories/import/records_importer.js /* - global animateSpinner repositoryRecordsImporter getParam RepositoryDatatable + global animateSpinner repositoryRecordsImporter getParam RepositoryDatatable PerfectScrollbar */ (function(global) { @@ -10,7 +10,7 @@ global.pageReload = function() { animateSpinner(); location.reload(); - } + }; function handleErrorSubmit(XHR) { var formGroup = $('#form-records-file').find('.form-group'); @@ -102,24 +102,27 @@ } function initShareModal() { - var form = $('#share-repo-modal').find('form'); + var form = $('.share-repo-modal').find('form'); var sharedCBs = form.find("input[name='share_team_ids[]']"); 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'); + + selectAllCheckbox.change(function() { + form.find('.teams-list input.simple-checkbox').toggleClass('hidden', this.checked); + form.find('.teams-list .permission-selector').toggleClass('hidden', this.checked); + form.find('.all-teams .trigger-checkbox').toggleClass('hidden', !this.checked) + .attr('disabled', !this.checked); + }); sharedCBs.change(function() { - var permissionCB = $('#editable_' + this.value); - - if (this.checked) { - permissionCB.removeClass('hidden'); - permissionCB.attr('disabled', false); - } else { - permissionCB.addClass('hidden'); - permissionCB.attr('disabled', true); - } + $('#editable_' + this.value).toggleClass('hidden', !this.checked) + .attr('disabled', !this.checked); }); + new PerfectScrollbar(form.find('.teams-list')[0]); + permissionCBs.change(function() { var changes = JSON.parse(permissionChanges.val()); changes[this.value] = 'true'; @@ -136,11 +139,11 @@ if (data.warnings) { alert(data.warnings); } - $('#share-repo-modal').modal('hide'); + $('.share-repo-modal').modal('hide'); }, error: function(data) { alert(data.responseJSON.errors); - $('#share-repo-modal').modal('hide'); + $('.share-repo-modal').modal('hide'); } }); }); diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss index a4dc08ac0..58afbad50 100644 --- a/app/assets/stylesheets/repositories.scss +++ b/app/assets/stylesheets/repositories.scss @@ -1,3 +1,6 @@ +// scss-lint:disable SelectorDepth SelectorFormat QualifyingElement +// scss-lint:disable NestingDepth ImportantRule + @import "constants"; .repositories-dropdown-menu { @@ -107,3 +110,75 @@ margin-right: 5px; } } + +.share-repo-modal { + + .modal-dialog { + width: 350px; + } + + .share-repo-container { + padding: 15px 30px; + + // Main structure css + .header, + .data-list { + display: flex; + width: 100%; + } + + .data-list { + flex-direction: column; + } + + .all-teams, + .teams-list { + display: flex; + width: 100%; + } + + .teams-list { + flex-direction: column; + max-height: 400px; + position: relative; + + .team-container { + align-items: center; + display: flex; + padding: 5px 0; + } + } + + .permission-selector { + display: flex; + flex-basis: 100px; + flex-shrink: 0; + justify-content: center; + } + + .team-selector { + align-items: center; + display: flex; + flex-grow: 1; + + .checkbox-label { + margin-right: 5px; + } + } + + // header + .header { + align-items: center; + font-size: 14px; + font-weight: bold; + padding: 5px 0; + } + + .all-teams { + align-items: center; + border-bottom: 1px solid $color-gainsboro; + padding: 5px 0; + user-select: none; + } + } +} diff --git a/app/assets/stylesheets/shared/checkbox.scss b/app/assets/stylesheets/shared/checkbox.scss new file mode 100644 index 000000000..a974f3134 --- /dev/null +++ b/app/assets/stylesheets/shared/checkbox.scss @@ -0,0 +1,96 @@ +// scss-lint:disable SelectorDepth SelectorFormat QualifyingElement +// scss-lint:disable NestingDepth ImportantRule + +@import "constants"; +@import "mixins"; + +input[type="checkbox"].simple-checkbox { + cursor: pointer; + flex-shrink: 0; + height: 14px; + margin: 0; + opacity: 0; + position: relative; + width: 14px; + z-index: 2; + + + .checkbox-label { + + display: inline-block; + flex-shrink: 0; + height: 14px; + margin-left: -15px; + position: relative; + width: 14px; + + &::before { + content: "\f0c8"; + font-family: "Font Awesome 5 Free"; + font-size: 14px; + font-weight: 400; + left: 0; + line-height: 14px; + position: absolute; + text-align: center; + top: 1px; + width: 14px; + } + } + + &.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; + } + } +} diff --git a/app/views/repositories/_share_repository_modal.html.erb b/app/views/repositories/_share_repository_modal.html.erb index 5bcef0c54..3c332a562 100644 --- a/app/views/repositories/_share_repository_modal.html.erb +++ b/app/views/repositories/_share_repository_modal.html.erb @@ -1,4 +1,4 @@ -