Update CSS for share modal (#1978)

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');
 })();

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);
+      $('#editable_' + this.value).toggleClass('hidden', !this.checked)
-
+        .attr('disabled', !this.checked);
-      if (this.checked) {
-        permissionCB.removeClass('hidden');
-        permissionCB.attr('disabled', false);
-      } else {
-        permissionCB.addClass('hidden');
-        permissionCB.attr('disabled', true);
-      }
     });
 
+    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');
         }
       });
     });

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;
+    }
+  }
+}

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;
+    }
+  }
+}

app/views/repositories/_share_repository_modal.html.erb

@@ -1,4 +1,4 @@
-<div class="modal" id="share-repo-modal" tabindex="-1" role="dialog" >
+<div class="modal share-repo-modal" tabindex="-1" role="dialog" >
   <%= form_for :shares, url: multiple_update_team_repository_team_repositories_path(current_team, @repository), remote: :true do |f| %>
     <div class="modal-dialog" role="document">
       <div class="modal-content">
@@ -8,22 +8,41 @@
             <%= t("repositories.index.modal_share.title") %>
           </h4>
         </div>
-        <div class="modal-body">
+        <div class="modal-body share-repo-container">
-          <div>
+          <div class="header">
-            <table style="width: 80%; margin: 0 auto">
+            <span class="team-selector">Share with Team</span>
-              <tr>
+            <span class="permission-selector">Can Edit</span>
-                <th>Share with Team</th><th>Can Edit</th>
+          </div>
-              </tr>
+          <div class="data-list">
+            <div class="all-teams">
+              <span class="team-selector">
+                <%= check_box_tag 'select_all_teams', 0, false, {class: "simple-checkbox"} %>
+                <span class="checkbox-label"></span>
+                All teams in the organization
+              </span>
+              <span class="permission-selector">
+                <%= check_box_tag 'select_all_write_permission', 0, false, {class: 'hidden trigger-checkbox'}%>
+                <span class="checkbox-label"></span>
+              </span>
+            </div>
+            <div class="teams-list">
               <% (current_user.teams - [@repository.team]).each do |t| %>
-                <tr>
+              <div class="team-container">
-                  <td>
+                <div class="team-selector">
-                    <%= check_box_tag 'share_team_ids[]', t.id, @repository.shared_with?(t), {id: "shared_#{t.id}"} %>
+                  <%= check_box_tag 'share_team_ids[]', t.id, @repository.shared_with?(t), {id: "shared_#{t.id}", class: "simple-checkbox"} %>
-                    <%= t.name %>
+                  <span class="checkbox-label"></span>
-                  </td>
+                  <%= t.name %>
-                  <td><%= check_box_tag 'write_permissions[]', t.id, @repository.shared_with_write?(t), {id: "editable_#{t.id}", class: ('hidden' unless @repository.shared_with?(t))}.compact %></td>
+                </div>
-                </tr>
+                <div class="permission-selector">
+                  <%= check_box_tag 'write_permissions[]', t.id, @repository.shared_with_write?(t), {
+                    id: "editable_#{t.id}", 
+                    class: (@repository.shared_with?(t) ? 'trigger-checkbox' : 'trigger-checkbox hidden')
+                  }.compact %>
+                  <span class="checkbox-label"></span>
+                </div>
+              </div>
               <% end %>
-            </table>
+            </div>
           </div>
         </div>
         <%= hidden_field_tag 'permission_changes', {}%>