Add visibility level to project repositoryissue_19734_2

2 files changed, 62 insertions, 59 deletions

diff --git a/app/assets/javascripts/project_new.js b/app/assets/javascripts/project_new.js
index 3cf41505814..478e82aa14d 100644
--- a/app/assets/javascripts/project_new.js
+++ b/app/assets/javascripts/project_new.js
@@ -4,9 +4,8 @@
   this.ProjectNew = (function() {
     function ProjectNew() {
       this.toggleSettings = bind(this.toggleSettings, this);
-      this.$selects = $('.features select').filter(function () {
-        return $(this).data('field');
-      });
+      this.$selects = $('.features select');
+      this.$repoSelects = this.$selects.filter('.js-repo-select');
 
       $('.project-edit-container').on('ajax:before', (function(_this) {
         return function() {
@@ -16,6 +15,7 @@
       })(this));
       this.toggleSettings();
       this.toggleSettingsOnclick();
+      this.toggleRepoVisibility();
     }
 
     ProjectNew.prototype.toggleSettings = function() {
@@ -43,6 +43,38 @@
       }
     };
 
+    ProjectNew.prototype.toggleRepoVisibility = function () {
+      var $repoAccessLevel = $('.js-repo-access-level select');
+
+      this.$repoSelects.find("option[value='" + $repoAccessLevel.val() + "']")
+        .nextAll()
+        .hide();
+
+      $repoAccessLevel.off('change')
+        .on('change', function () {
+          var selectedVal = parseInt($repoAccessLevel.val());
+
+          this.$repoSelects.each(function () {
+            var $this = $(this),
+                repoSelectVal = parseInt($this.val());
+
+            $this.find('option').show();
+
+            if (selectedVal < repoSelectVal) {
+              $this.val(selectedVal);
+            }
+
+            $this.find("option[value='" + selectedVal + "']").nextAll().hide();
+          });
+
+          if (selectedVal) {
+            this.$repoSelects.removeClass('disabled');
+          } else {
+            this.$repoSelects.addClass('disabled');
+          }
+        }.bind(this));
+    };
+
     return ProjectNew;
 
   })();
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index d30f02340b9..1062d7effb0 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -761,62 +761,6 @@ pre.light-well {
   .dropdown-menu {
     width: 300px;
   }
-
-  &.from .compare-dropdown-toggle {
-    width: 237px;
-  }
-
-  &.to .compare-dropdown-toggle {
-    width: 254px;
-  }
-
-  .dropdown-toggle-text {
-    display: block;
-    height: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 100%;
-  }
-}
-
-.compare-ellipsis {
-  display: inline;
-}
-
-@media (max-width: $screen-xs-max) {
-  .compare-form-group {
-    .input-group {
-      width: 100%;
-
-      & > .compare-dropdown-toggle {
-        width: 100%;
-      }
-    }
-
-    .dropdown-menu {
-      width: 100%;
-    }
-  }
-
-  .compare-switch-container {
-    text-align: center;
-    padding: 0 0 $gl-padding;
-
-    .commits-compare-switch {
-      float: none;
-    }
-  }
-
-  .compare-ellipsis {
-    display: block;
-    text-align: center;
-    padding: 0 0 $gl-padding;
-  }
-
-  .commits-compare-btn {
-    width: 100%;
-  }
 }
 
 .clearable-input {
@@ -855,3 +799,30 @@ pre.light-well {
     border-bottom-right-radius: 0;
   }
 }
+
+.project-home-empty {
+  border-top: 0;
+
+  .container-fluid {
+    background: none;
+  }
+
+  p {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 650px;
+  }
+}
+
+.project-feature-nested {
+  @media (min-width: $screen-sm-min) {
+    padding-left: 45px;
+  }
+}
+
+.project-repo-select {
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}