diff options
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/gl_dropdown.js | 2 | ||||
-rw-r--r-- | app/assets/javascripts/project.js | 9 | ||||
-rw-r--r-- | app/assets/javascripts/repo/index.js | 18 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_commit_section.vue | 11 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_edit_button.js | 20 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_editor.js | 1 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_file_buttons.vue | 4 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_helper.js | 1 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_mini_mixin.js | 11 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_mixin.js | 17 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_sidebar.vue | 4 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_store.js | 6 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_tabs.vue | 4 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/components/popup_dialog.vue | 67 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/repo.scss | 28 |
15 files changed, 159 insertions, 44 deletions
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js index 3babe273100..593fad86972 100644 --- a/app/assets/javascripts/gl_dropdown.js +++ b/app/assets/javascripts/gl_dropdown.js @@ -206,7 +206,7 @@ GitLabDropdown = (function() { CURSOR_SELECT_SCROLL_PADDING = 5; - FILTER_INPUT = '.dropdown-input .dropdown-input-field'; + FILTER_INPUT = '.dropdown-input .dropdown-input-field:not(.dropdown-no-filter)'; function GitLabDropdown(el1, options) { var searchFields, selector, self; diff --git a/app/assets/javascripts/project.js b/app/assets/javascripts/project.js index 8543b44a057..401df308316 100644 --- a/app/assets/javascripts/project.js +++ b/app/assets/javascripts/project.js @@ -77,7 +77,6 @@ import Cookies from 'js-cookie'; }, dataType: "json" }).done(function(refs) { - console.log(refs); return callback(refs); }); }, @@ -118,9 +117,15 @@ import Cookies from 'js-cookie'; e.preventDefault(); if ($('input[name="ref"]').length) { var $form = $dropdown.closest('form'); + + var $visit = $dropdown.data('visit'); + var shouldVisit = typeof $visit === 'undefined' ? true : $visit; var action = $form.attr('action'); var divider = action.indexOf('?') === -1 ? '?' : '&'; - gl.utils.visitUrl(action + '' + divider + '' + $form.serialize()); + if(shouldVisit){ + gl.utils.visitUrl(action + '' + divider + '' + $form.serialize()); + } + } } }); diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js index e1f2f578f0b..f0684706c72 100644 --- a/app/assets/javascripts/repo/index.js +++ b/app/assets/javascripts/repo/index.js @@ -10,7 +10,8 @@ import RepoTabs from './repo_tabs.vue'; import RepoFileButtons from './repo_file_buttons.vue'; import RepoBinaryViewer from './repo_binary_viewer.vue'; import { repoEditorLoader } from './repo_editor'; -import RepoMiniMixin from './repo_mini_mixin'; +import RepoMixin from './repo_mixin'; +import PopupDialog from '../vue_shared/components/popup_dialog.vue' function initRepo() { const repo = document.getElementById('repo'); @@ -37,9 +38,10 @@ function initRepo() { <repo-binary-viewer/> </div> <repo-commit-section/> + <popup-dialog :open="dialog.open" kind="warning" title="Are you sure?" body="Are you sure you want to discard your changes?" @toggle="dialogToggled" @submit="dialogSubmitted"></popup-dialog> </div> `, - mixins: [RepoMiniMixin], + mixins: [RepoMixin], components: { 'repo-sidebar': RepoSidebar, 'repo-tabs': RepoTabs, @@ -47,7 +49,19 @@ function initRepo() { 'repo-binary-viewer': RepoBinaryViewer, 'repo-editor': repoEditorLoader, 'repo-commit-section': RepoCommitSection, + 'popup-dialog': PopupDialog, }, + + methods: { + dialogToggled(toggle) { + this.dialog.open = toggle; + }, + + dialogSubmitted(status) { + this.dialog.open = false; + this.dialog.status = status; + } + } }); const editButton = document.getElementById('editable-mode'); diff --git a/app/assets/javascripts/repo/repo_commit_section.vue b/app/assets/javascripts/repo/repo_commit_section.vue index d58b2bae7b2..c03ed7eefb4 100644 --- a/app/assets/javascripts/repo/repo_commit_section.vue +++ b/app/assets/javascripts/repo/repo_commit_section.vue @@ -2,10 +2,13 @@ /* global Flash */ import Store from './repo_store'; import Api from '../api'; +import RepoMixin from './repo_mixin' const RepoCommitSection = { data: () => Store, + mixins: [RepoMixin], + methods: { makeCommit() { // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions @@ -38,14 +41,6 @@ const RepoCommitSection = { }, Store.tempPrivateToken); }, }, - - computed: { - changedFiles() { - const changedFileList = this.openedFiles - .filter(file => file.changed); - return changedFileList; - }, - }, }; export default RepoCommitSection; diff --git a/app/assets/javascripts/repo/repo_edit_button.js b/app/assets/javascripts/repo/repo_edit_button.js index e01dcc58802..07ae93d7f00 100644 --- a/app/assets/javascripts/repo/repo_edit_button.js +++ b/app/assets/javascripts/repo/repo_edit_button.js @@ -1,5 +1,6 @@ import Vue from 'vue'; import Store from './repo_store'; +import RepoMixin from './repo_mixin' export default class RepoEditButton { constructor(el) { @@ -9,10 +10,11 @@ export default class RepoEditButton { initVue(el) { this.vue = new Vue({ el, + mixins: [RepoMixin], data: () => Store, computed: { buttonLabel() { - return this.editMode ? 'Read-only mode' : 'Edit mode'; + return this.editMode ? 'Cancel edit' : 'Edit'; }, buttonIcon() { @@ -21,9 +23,25 @@ export default class RepoEditButton { }, methods: { editClicked() { + console.log('thiscf', this.changedFiles) + if(this.changedFiles.length) { + this.dialog.open = true; + return; + } this.editMode = !this.editMode; }, }, + + watch: { + dialog: { + handler(obj) { + if(obj.status) { + obj.status = false; + } + }, + deep: true, + } + } }); } } diff --git a/app/assets/javascripts/repo/repo_editor.js b/app/assets/javascripts/repo/repo_editor.js index 6f45483cb9f..0dee33b141f 100644 --- a/app/assets/javascripts/repo/repo_editor.js +++ b/app/assets/javascripts/repo/repo_editor.js @@ -65,7 +65,6 @@ const RepoEditor = { }, editMode() { - console.log('edit mode changed') const readOnly = !this.editMode; Store.readOnly = readOnly; diff --git a/app/assets/javascripts/repo/repo_file_buttons.vue b/app/assets/javascripts/repo/repo_file_buttons.vue index 0bac7fb6410..2ef07675c28 100644 --- a/app/assets/javascripts/repo/repo_file_buttons.vue +++ b/app/assets/javascripts/repo/repo_file_buttons.vue @@ -1,12 +1,12 @@ <script> import Store from './repo_store'; import Helper from './repo_helper'; -import RepoMiniMixin from './repo_mini_mixin'; +import RepoMixin from './repo_mixin'; const RepoFileButtons = { data: () => Store, - mixins: [RepoMiniMixin], + mixins: [RepoMixin], computed: { editableBorder() { diff --git a/app/assets/javascripts/repo/repo_helper.js b/app/assets/javascripts/repo/repo_helper.js index a4b15725a49..3d04dbb658f 100644 --- a/app/assets/javascripts/repo/repo_helper.js +++ b/app/assets/javascripts/repo/repo_helper.js @@ -135,7 +135,6 @@ const RepoHelper = { getContent(treeOrFile, cb) { let file = treeOrFile; - console.log('file',file) // const loadingData = RepoHelper.setLoading(true); return Service.getContent() .then((response) => { diff --git a/app/assets/javascripts/repo/repo_mini_mixin.js b/app/assets/javascripts/repo/repo_mini_mixin.js deleted file mode 100644 index e33956b6d15..00000000000 --- a/app/assets/javascripts/repo/repo_mini_mixin.js +++ /dev/null @@ -1,11 +0,0 @@ -import Store from './repo_store'; - -const RepoMiniMixin = { - computed: { - isMini() { - return !!Store.openedFiles.length; - }, - }, -}; - -export default RepoMiniMixin; diff --git a/app/assets/javascripts/repo/repo_mixin.js b/app/assets/javascripts/repo/repo_mixin.js new file mode 100644 index 00000000000..be5df90b56b --- /dev/null +++ b/app/assets/javascripts/repo/repo_mixin.js @@ -0,0 +1,17 @@ +import Store from './repo_store'; + +const RepoMixin = { + computed: { + isMini() { + return !!Store.openedFiles.length; + }, + + changedFiles() { + const changedFileList = this.openedFiles + .filter(file => file.changed); + return changedFileList; + }, + }, +}; + +export default RepoMixin; diff --git a/app/assets/javascripts/repo/repo_sidebar.vue b/app/assets/javascripts/repo/repo_sidebar.vue index 04a59043a9e..11a2cde1169 100644 --- a/app/assets/javascripts/repo/repo_sidebar.vue +++ b/app/assets/javascripts/repo/repo_sidebar.vue @@ -6,10 +6,10 @@ import RepoPreviousDirectory from './repo_prev_directory.vue'; import RepoFileOptions from './repo_file_options.vue'; import RepoFile from './repo_file.vue'; import RepoLoadingFile from './repo_loading_file.vue'; -import RepoMiniMixin from './repo_mini_mixin'; +import RepoMixin from './repo_mixin'; const RepoSidebar = { - mixins: [RepoMiniMixin], + mixins: [RepoMixin], components: { 'repo-file-options': RepoFileOptions, 'repo-previous-directory': RepoPreviousDirectory, diff --git a/app/assets/javascripts/repo/repo_store.js b/app/assets/javascripts/repo/repo_store.js index 3654732dab9..861a99a8b80 100644 --- a/app/assets/javascripts/repo/repo_store.js +++ b/app/assets/javascripts/repo/repo_store.js @@ -29,6 +29,11 @@ const RepoStore = { tempPrivateToken: '', submitCommitsLoading: false, binaryLoaded:false, + dialog: { + open: false, + title: '', + status: false, + }, activeFile: RepoHelper.getDefaultActiveFile(), activeFileIndex: 0, activeLine: 0, @@ -143,7 +148,6 @@ const RepoStore = { // now activate the right tab based on what you closed. if(RepoStore.openedFiles.length === 0) { - console.log('open 0') RepoStore.activeFile = {}; return; } diff --git a/app/assets/javascripts/repo/repo_tabs.vue b/app/assets/javascripts/repo/repo_tabs.vue index 81abe40da03..959aecd26b2 100644 --- a/app/assets/javascripts/repo/repo_tabs.vue +++ b/app/assets/javascripts/repo/repo_tabs.vue @@ -2,10 +2,10 @@ import Vue from 'vue'; import Store from './repo_store'; import RepoTab from './repo_tab.vue'; -import RepoMiniMixin from './repo_mini_mixin'; +import RepoMixin from './repo_mixin'; const RepoTabs = { - mixins: [RepoMiniMixin], + mixins: [RepoMixin], components: { 'repo-tab': RepoTab, diff --git a/app/assets/javascripts/vue_shared/components/popup_dialog.vue b/app/assets/javascripts/vue_shared/components/popup_dialog.vue new file mode 100644 index 00000000000..f63125e4d81 --- /dev/null +++ b/app/assets/javascripts/vue_shared/components/popup_dialog.vue @@ -0,0 +1,67 @@ +<script> +const PopupDialog = { + name: 'popup-dialog', + + props: { + open: Boolean, + title: String, + body: String, + kind: { + type: String, + default: 'primary', + }, + closeButtonLabel: { + type: String, + default: 'Cancel', + }, + primaryButtonLabel: { + type: String, + default: 'Save changes', + }, + }, + + computed: { + typeOfClass() { + const className = `btn-${this.kind}`; + let returnObj = {}; + returnObj[className] = true; + return returnObj; + } + }, + + methods: { + close() { + this.$emit('toggle', false); + }, + + yesClick() { + this.$emit('submit', true); + }, + + noClick() { + this.$emit('submit', false); + } + } +}; + +export default PopupDialog; +</script> +<template> +<div class="modal popup-dialog" tabindex="-1" v-show="open" role="dialog"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" @click="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> + <h4 class="modal-title">{{this.title}}</h4> + </div> + <div class="modal-body"> + <p>{{this.body}}</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-default" data-dismiss="modal" @click="noClick">{{closeButtonLabel}}</button> + <button type="button" class="btn" :class="typeOfClass" @click="yesClick">{{primaryButtonLabel}}</button> + </div> + </div> + </div> +</div> +</template>
\ No newline at end of file diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index dd48ef297da..a569438ed24 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -7,6 +7,22 @@ transition: opacity .5s; } +.modal.popup-dialog { + display: block; + + + @media (min-width: 992px) { + .modal-dialog { + width: 600px; + margin: 30px auto; + } + } +} + +.project-refs-form, .project-refs-target-form { + display: inline-block; +} + .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ { opacity: 0; @@ -55,7 +71,6 @@ } #tabs { - height: 61px; border-bottom: 1px solid $white-normal; padding-left: 0; margin-bottom: 0; @@ -65,14 +80,6 @@ overflow-y: hidden; overflow-x: auto; - &.overflown { - height: 61px; - - li { - padding: 20px 18px; - } - } - li { animation: swipeRightAppear ease-in 0.1s; animation-iteration-count: 1; @@ -80,9 +87,10 @@ list-style-type: none; background: $gray-normal; display: inline-block; - padding: 20px 18px; + padding: 10px 18px; border-right: 1px solid $border-color; white-space: nowrap; + border-radius: 3px 3px 0 0; &.active { background: $white-light; |