diff options
author | Alfredo Sumaran <alfredo@gitlab.com> | 2016-08-02 00:08:36 +0300 |
---|---|---|
committer | Alfredo Sumaran <alfredo@gitlab.com> | 2016-08-06 01:19:01 +0300 |
commit | 1ac953dab437b3f2eaeca0ae39b80e40f8a09848 (patch) | |
tree | 3b08bb0153afd0d27bd6e547eb053623cbe94b24 /app/assets | |
parent | d4f06e4907b5154fa864634eb67cb74427a31dd6 (diff) |
Update layout and JS for create protected branch.
Also updates protect branch list
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/allowed_to_merge_select.js.es6 | 0 | ||||
-rw-r--r-- | app/assets/javascripts/dispatcher.js | 3 | ||||
-rw-r--r-- | app/assets/javascripts/protect_branch.js.es6 | 84 | ||||
-rw-r--r-- | app/assets/javascripts/protected_branch_select.js | 72 | ||||
-rw-r--r-- | app/assets/javascripts/protected_branch_select.js.es6 | 88 | ||||
-rw-r--r-- | app/assets/javascripts/protected_branches_access_select.js.es6 | 63 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/dropdowns.scss | 8 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 16 |
8 files changed, 191 insertions, 143 deletions
diff --git a/app/assets/javascripts/allowed_to_merge_select.js.es6 b/app/assets/javascripts/allowed_to_merge_select.js.es6 new file mode 100644 index 00000000000..e69de29bb2d --- /dev/null +++ b/app/assets/javascripts/allowed_to_merge_select.js.es6 diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index 9e6901962c6..ca4593d87a7 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/app/assets/javascripts/dispatcher.js @@ -173,8 +173,7 @@ new Search(); break; case 'projects:protected_branches:index': - new ProtectedBranchesAccessSelect($(".new_protected_branch"), false, true); - new ProtectedBranchesAccessSelect($(".protected-branches-list"), true, false); + new CreateProtectedBranch(); break; } switch (path.first()) { diff --git a/app/assets/javascripts/protect_branch.js.es6 b/app/assets/javascripts/protect_branch.js.es6 new file mode 100644 index 00000000000..be987adc4a7 --- /dev/null +++ b/app/assets/javascripts/protect_branch.js.es6 @@ -0,0 +1,84 @@ +class ProtectedBranchesAccessDropdown { + constructor(options) { + const { $dropdown, data, onSelect } = options; + + $dropdown.glDropdown({ + data: data, + selectable: true, + fieldName: $dropdown.data('field-name'), + toggleLabel(item) { + return item.text; + }, + clicked(item, $el, e) { + e.preventDefault(); + onSelect(); + } + }); + } +} + +class AllowedToMergeDropdowns { + constructor (options) { + const { $dropdowns, onSelect } = options; + + $dropdowns.each((i, el) => { + new ProtectedBranchesAccessDropdown({ + $dropdown: $(el), + data: gon.merge_access_levels, + onSelect: onSelect + }); + }); + } +} + +class AllowedToPushSelects { + constructor (options) { + const { $dropdowns, onSelect } = options; + + $dropdowns.each((i, el) => { + new ProtectedBranchesAccessDropdown({ + $dropdown: $(el), + data: gon.push_access_levels, + onSelect: onSelect + }); + }); + } +} + +class CreateProtectedBranch { + constructor() { + this.$wrap = this.$form = $('#new_protected_branch'); + this.buildDropdowns(); + } + + buildDropdowns() { + // Allowed to Merge dropdowns + new AllowedToMergeDropdowns({ + $dropdowns: this.$wrap.find('.js-allowed-to-merge'), + onSelect: this.onSelect.bind(this) + }); + + // Allowed to Push dropdowns + new AllowedToPushSelects({ + $dropdowns: this.$wrap.find('.js-allowed-to-push'), + onSelect: this.onSelect.bind(this) + }); + + new ProtectedBranchSelects({ + $dropdowns: this.$wrap.find('.js-protected-branch-select'), + onSelect: this.onSelect.bind(this) + }); + } + + // This will run after clicked callback + onSelect() { + // Enable submit button + const $branchInput = this.$wrap.find('input[name="protected_branch[name]"]'); + const $allowedToMergeInput = this.$wrap.find('input[name="protected_branch[merge_access_level_attributes][access_level]"]'); + const $allowedToPushInput = this.$wrap.find('input[name="protected_branch[push_access_level_attributes][access_level]"]'); + + if ($branchInput.val() && $allowedToMergeInput.val() && $allowedToPushInput.val()){ + this.$form.find('[type="submit"]').removeAttr('disabled'); + } + } +} diff --git a/app/assets/javascripts/protected_branch_select.js b/app/assets/javascripts/protected_branch_select.js deleted file mode 100644 index 3a47fc972dc..00000000000 --- a/app/assets/javascripts/protected_branch_select.js +++ /dev/null @@ -1,72 +0,0 @@ -(function() { - var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }; - - this.ProtectedBranchSelect = (function() { - function ProtectedBranchSelect(currentProject) { - this.toggleCreateNewButton = bind(this.toggleCreateNewButton, this); - this.getProtectedBranches = bind(this.getProtectedBranches, this); - $('.dropdown-footer').hide(); - this.dropdown = $('.js-protected-branch-select').glDropdown({ - data: this.getProtectedBranches, - filterable: true, - remote: false, - search: { - fields: ['title'] - }, - selectable: true, - toggleLabel: function(selected) { - if (selected && 'id' in selected) { - return selected.title; - } else { - return 'Protected Branch'; - } - }, - fieldName: 'protected_branch[name]', - text: function(protected_branch) { - return _.escape(protected_branch.title); - }, - id: function(protected_branch) { - return _.escape(protected_branch.id); - }, - onFilter: this.toggleCreateNewButton, - clicked: function() { - return $('.protect-branch-btn').attr('disabled', false); - } - }); - $('.create-new-protected-branch').on('click', (function(_this) { - return function(event) { - _this.dropdown.data('glDropdown').remote.execute(); - return _this.dropdown.data('glDropdown').selectRowAtIndex(event, 0); - }; - })(this)); - } - - ProtectedBranchSelect.prototype.getProtectedBranches = function(term, callback) { - if (this.selectedBranch) { - return callback(gon.open_branches.concat(this.selectedBranch)); - } else { - return callback(gon.open_branches); - } - }; - - ProtectedBranchSelect.prototype.toggleCreateNewButton = function(branchName) { - this.selectedBranch = { - title: branchName, - id: branchName, - text: branchName - }; - if (branchName === '') { - $('.protected-branch-select-footer-list').addClass('hidden'); - return $('.dropdown-footer').hide(); - } else { - $('.create-new-protected-branch').text("Create Protected Branch: " + branchName); - $('.protected-branch-select-footer-list').removeClass('hidden'); - return $('.dropdown-footer').show(); - } - }; - - return ProtectedBranchSelect; - - })(); - -}).call(this); diff --git a/app/assets/javascripts/protected_branch_select.js.es6 b/app/assets/javascripts/protected_branch_select.js.es6 new file mode 100644 index 00000000000..9a259a473ae --- /dev/null +++ b/app/assets/javascripts/protected_branch_select.js.es6 @@ -0,0 +1,88 @@ +class ProtectedBranchSelect { + constructor(options) { + this.onSelect = options.onSelect; + this.$dropdown = options.$dropdown; + this.$dropdownContainer = this.$dropdown.parent(); + this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer'); + this.$protectedBranch = this.$dropdownContainer.find('.create-new-protected-branch'); + + this.buildDropdown(); + this.bindEvents(); + + // Hide footer + this.$dropdownFooter.addClass('hidden'); + } + + buildDropdown() { + this.$dropdown.glDropdown({ + data: this.getProtectedBranches.bind(this), + filterable: true, + remote: false, + search: { + fields: ['title'] + }, + selectable: true, + toggleLabel(selected) { + return (selected && 'id' in selected) ? selected.title : 'Protected Branch'; + }, + fieldName: 'protected_branch[name]', + text(protected_branch) { + return _.escape(protected_branch.title); + }, + id(protected_branch) { + return _.escape(protected_branch.id); + }, + onFilter: this.toggleCreateNewButton.bind(this), + clicked: (item, $el, e) => { + e.preventDefault(); + this.onSelect(); + } + }); + } + + bindEvents() { + this.$protectedBranch.on('click', this.onClickCreateWildcard.bind(this)); + } + + onClickCreateWildcard(e) { + this.$dropdown.data('glDropdown').remote.execute(); + this.$dropdown.data('glDropdown').selectRowAtIndex(e, 0); + } + + getProtectedBranches(term, callback) { + if (this.selectedBranch) { + callback(gon.open_branches.concat(this.selectedBranch)); + } else { + callback(gon.open_branches); + } + } + + toggleCreateNewButton(branchName) { + this.selectedBranch = { + title: branchName, + id: branchName, + text: branchName + }; + + if (branchName) { + this.$dropdownContainer + .find('.create-new-protected-branch') + .html(`Create wildcard <code>${branchName}</code>`); + } + + this.$dropdownFooter.toggleClass('hidden', !branchName); + } +} + +class ProtectedBranchSelects { + constructor(options) { + const { $dropdowns, onSelect } = options; + + $dropdowns.each((i, el) => { + new ProtectedBranchSelect({ + $dropdown: $(el), + onSelect: onSelect + }); + }); + } + } diff --git a/app/assets/javascripts/protected_branches_access_select.js.es6 b/app/assets/javascripts/protected_branches_access_select.js.es6 deleted file mode 100644 index e98312bbf37..00000000000 --- a/app/assets/javascripts/protected_branches_access_select.js.es6 +++ /dev/null @@ -1,63 +0,0 @@ -class ProtectedBranchesAccessSelect { - constructor(container, saveOnSelect, selectDefault) { - this.container = container; - this.saveOnSelect = saveOnSelect; - - this.container.find(".allowed-to-merge").each((i, element) => { - var fieldName = $(element).data('field-name'); - var dropdown = $(element).glDropdown({ - data: gon.merge_access_levels, - selectable: true, - fieldName: fieldName, - clicked: _.chain(this.onSelect).partial(element).bind(this).value() - }); - - if (selectDefault) { - dropdown.data('glDropdown').selectRowAtIndex(document.createEvent("Event"), 0); - } - }); - - - this.container.find(".allowed-to-push").each((i, element) => { - var fieldName = $(element).data('field-name'); - var dropdown = $(element).glDropdown({ - data: gon.push_access_levels, - selectable: true, - fieldName: fieldName, - clicked: _.chain(this.onSelect).partial(element).bind(this).value() - }); - - if (selectDefault) { - dropdown.data('glDropdown').selectRowAtIndex(document.createEvent("Event"), 0); - } - }); - } - - onSelect(dropdown, selected, element, e) { - $(dropdown).find('.dropdown-toggle-text').text(selected.text); - if (this.saveOnSelect) { - return $.ajax({ - type: "POST", - url: $(dropdown).data('url'), - dataType: "json", - data: { - _method: 'PATCH', - id: $(dropdown).data('id'), - protected_branch: { - ["" + ($(dropdown).data('type')) + "_attributes"]: { - "access_level": selected.id - } - } - }, - success: function() { - var row; - row = $(e.target); - return row.closest('tr').effect('highlight'); - }, - error: function() { - return new Flash("Failed to update branch!", "alert"); - } - }); - } - } -} diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index c54eb0d6479..e8eafa15899 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -72,6 +72,14 @@ &.large { width: 200px; } + + &.wide { + width: 100%; + + + .dropdown-select { + width: 100%; + } + } } .dropdown-menu, diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index d91c8e61165..63ac471b356 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -656,13 +656,9 @@ pre.light-well { } .new_protected_branch { - .dropdown { - display: inline; - margin-left: 15px; - } - label { - min-width: 120px; + margin-top: 6px; + font-weight: normal; } } @@ -678,6 +674,14 @@ pre.light-well { font-weight: 600; } } + + &.table-bordered { + border-radius: 1px; + + th:not(:last-child), td:not(:last-child) { + border-right: solid 1px transparent; + } + } } .custom-notifications-form { |