diff options
Diffstat (limited to 'app/assets/javascripts/repo/components')
11 files changed, 292 insertions, 119 deletions
diff --git a/app/assets/javascripts/repo/components/commit_sidebar/list.vue b/app/assets/javascripts/repo/components/commit_sidebar/list.vue new file mode 100644 index 00000000000..fb862e7bf01 --- /dev/null +++ b/app/assets/javascripts/repo/components/commit_sidebar/list.vue @@ -0,0 +1,89 @@ +<script> + import icon from '../../../vue_shared/components/icon.vue'; + import listItem from './list_item.vue'; + import listCollapsed from './list_collapsed.vue'; + + export default { + components: { + icon, + listItem, + listCollapsed, + }, + props: { + title: { + type: String, + required: true, + }, + fileList: { + type: Array, + required: true, + }, + collapsed: { + type: Boolean, + required: true, + }, + }, + methods: { + toggleCollapsed() { + this.$emit('toggleCollapsed'); + }, + }, + }; +</script> + +<template> + <div class="multi-file-commit-panel-section"> + <header + class="multi-file-commit-panel-header" + :class="{ + 'is-collapsed': collapsed, + }" + > + <icon + name="list-bulleted" + :size="18" + css-classes="append-right-default" + /> + <template v-if="!collapsed"> + {{ title }} + <button + type="button" + class="btn btn-transparent multi-file-commit-panel-collapse-btn" + @click="toggleCollapsed" + > + <i + aria-hidden="true" + class="fa fa-angle-double-right" + > + </i> + </button> + </template> + </header> + <div class="multi-file-commit-list"> + <list-collapsed + v-if="collapsed" + /> + <template v-else> + <ul + v-if="fileList.length" + class="list-unstyled append-bottom-0" + > + <li + v-for="file in fileList" + :key="file.key" + > + <list-item + :file="file" + /> + </li> + </ul> + <div + v-else + class="help-block prepend-top-0" + > + No changes + </div> + </template> + </div> + </div> +</template> diff --git a/app/assets/javascripts/repo/components/commit_sidebar/list_collapsed.vue b/app/assets/javascripts/repo/components/commit_sidebar/list_collapsed.vue new file mode 100644 index 00000000000..6a0262f271b --- /dev/null +++ b/app/assets/javascripts/repo/components/commit_sidebar/list_collapsed.vue @@ -0,0 +1,35 @@ +<script> + import { mapGetters } from 'vuex'; + import icon from '../../../vue_shared/components/icon.vue'; + + export default { + components: { + icon, + }, + computed: { + ...mapGetters([ + 'addedFiles', + 'modifiedFiles', + ]), + }, + }; +</script> + +<template> + <div + class="multi-file-commit-list-collapsed text-center" + > + <icon + name="file-addition" + :size="18" + css-classes="multi-file-addition append-bottom-10" + /> + {{ addedFiles.length }} + <icon + name="file-modified" + :size="18" + css-classes="multi-file-modified prepend-top-10 append-bottom-10" + /> + {{ modifiedFiles.length }} + </div> +</template> diff --git a/app/assets/javascripts/repo/components/commit_sidebar/list_item.vue b/app/assets/javascripts/repo/components/commit_sidebar/list_item.vue new file mode 100644 index 00000000000..742f746e02f --- /dev/null +++ b/app/assets/javascripts/repo/components/commit_sidebar/list_item.vue @@ -0,0 +1,36 @@ +<script> + import icon from '../../../vue_shared/components/icon.vue'; + + export default { + components: { + icon, + }, + props: { + file: { + type: Object, + required: true, + }, + }, + computed: { + iconName() { + return this.file.tempFile ? 'file-addition' : 'file-modified'; + }, + iconClass() { + return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`; + }, + }, + }; +</script> + +<template> + <div class="multi-file-commit-list-item"> + <icon + :name="iconName" + :size="16" + :css-classes="iconClass" + /> + <span class="multi-file-commit-list-path"> + {{ file.path }} + </span> + </div> +</template> diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue index 98117802016..a00e1e9d809 100644 --- a/app/assets/javascripts/repo/components/repo.vue +++ b/app/assets/javascripts/repo/components/repo.vue @@ -40,20 +40,24 @@ export default { </script> <template> - <div class="repository-view"> - <div class="tree-content-holder" :class="{'tree-content-holder-mini' : isCollapsed}"> - <repo-sidebar/> - <div - v-if="isCollapsed" - class="panel-right" - > - <repo-tabs/> - <component - :is="currentBlobView" - /> - <repo-file-buttons/> - </div> + <div + class="multi-file" + :class="{ + 'is-collapsed': isCollapsed + }" + > + <repo-sidebar/> + <div + v-if="isCollapsed" + class="multi-file-edit-pane" + > + <repo-tabs /> + <component + class="multi-file-edit-pane-content" + :is="currentBlobView" + /> + <repo-file-buttons /> </div> - <repo-commit-section v-if="changedFiles.length" /> + <repo-commit-section /> </div> </template> diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue index 377e3d65348..d3344d0c8dc 100644 --- a/app/assets/javascripts/repo/components/repo_commit_section.vue +++ b/app/assets/javascripts/repo/components/repo_commit_section.vue @@ -1,11 +1,18 @@ <script> import { mapGetters, mapState, mapActions } from 'vuex'; +import tooltip from '../../vue_shared/directives/tooltip'; +import icon from '../../vue_shared/components/icon.vue'; import PopupDialog from '../../vue_shared/components/popup_dialog.vue'; -import { n__ } from '../../locale'; +import commitFilesList from './commit_sidebar/list.vue'; export default { components: { PopupDialog, + icon, + commitFilesList, + }, + directives: { + tooltip, }, data() { return { @@ -13,6 +20,7 @@ export default { submitCommitsLoading: false, startNewMR: false, commitMessage: '', + collapsed: true, }; }, computed: { @@ -23,10 +31,10 @@ export default { 'changedFiles', ]), commitButtonDisabled() { - return !this.commitMessage || this.submitCommitsLoading; + return this.commitMessage === '' || this.submitCommitsLoading || !this.changedFiles.length; }, - commitButtonText() { - return n__('Commit %d file', 'Commit %d files', this.changedFiles.length); + commitMessageCount() { + return this.commitMessage.length; }, }, methods: { @@ -77,12 +85,20 @@ export default { this.submitCommitsLoading = false; }); }, + toggleCollapsed() { + this.collapsed = !this.collapsed; + }, }, }; </script> <template> -<div id="commit-area"> +<div + class="multi-file-commit-panel" + :class="{ + 'is-collapsed': collapsed, + }" +> <popup-dialog v-if="showNewBranchDialog" :primary-button-label="__('Create new branch')" @@ -92,78 +108,71 @@ export default { @toggle="showNewBranchDialog = false" @submit="makeCommit(true)" /> + <button + v-if="collapsed" + type="button" + class="btn btn-transparent multi-file-commit-panel-collapse-btn is-collapsed prepend-top-10 append-bottom-10" + @click="toggleCollapsed" + > + <i + aria-hidden="true" + class="fa fa-angle-double-left" + > + </i> + </button> + <commit-files-list + title="Staged" + :file-list="changedFiles" + :collapsed="collapsed" + @toggleCollapsed="toggleCollapsed" + /> <form - class="form-horizontal" - @submit.prevent="tryCommit()"> - <fieldset> - <div class="form-group"> - <label class="col-md-4 control-label staged-files"> - Staged files ({{changedFiles.length}}) - </label> - <div class="col-md-6"> - <ul class="list-unstyled changed-files"> - <li - v-for="(file, index) in changedFiles" - :key="index"> - <span class="help-block"> - {{ file.path }} - </span> - </li> - </ul> - </div> - </div> - <div class="form-group"> - <label - class="col-md-4 control-label" - for="commit-message"> - Commit message - </label> - <div class="col-md-6"> - <textarea - id="commit-message" - class="form-control" - name="commit-message" - v-model="commitMessage"> - </textarea> - </div> - </div> - <div class="form-group target-branch"> - <label - class="col-md-4 control-label" - for="target-branch"> - Target branch - </label> - <div class="col-md-6"> - <span class="help-block"> - {{currentBranch}} - </span> - </div> - </div> - <div class="col-md-offset-4 col-md-6"> - <button - type="submit" - :disabled="commitButtonDisabled" - class="btn btn-success"> - <i - v-if="submitCommitsLoading" - class="js-commit-loading-icon fa fa-spinner fa-spin" - aria-hidden="true" - aria-label="loading"> - </i> - <span class="commit-summary"> - {{ commitButtonText }} - </span> - </button> - </div> - <div class="col-md-offset-4 col-md-6"> - <div class="checkbox"> - <label> - <input type="checkbox" v-model="startNewMR"> - <span>Start a <strong>new merge request</strong> with these changes</span> - </label> - </div> + class="form-horizontal multi-file-commit-form" + @submit.prevent="tryCommit" + v-if="!collapsed" + > + <div class="multi-file-commit-fieldset"> + <textarea + class="form-control multi-file-commit-message" + name="commit-message" + v-model="commitMessage" + placeholder="Commit message" + > + </textarea> + </div> + <div class="multi-file-commit-fieldset"> + <label + v-tooltip + title="Create a new merge request with these changes" + data-container="body" + data-placement="top" + > + <input + type="checkbox" + v-model="startNewMR" + /> + Merge Request + </label> + <button + type="submit" + :disabled="commitButtonDisabled" + class="btn btn-default btn-sm append-right-10 prepend-left-10" + > + <i + v-if="submitCommitsLoading" + class="js-commit-loading-icon fa fa-spinner fa-spin" + aria-hidden="true" + aria-label="loading" + > + </i> + Commit + </button> + <div + class="multi-file-commit-message-count" + > + {{ commitMessageCount }} </div> - </fieldset> + </div> </form> </div> </template> diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue index 5be47d568e7..75787ad6103 100644 --- a/app/assets/javascripts/repo/components/repo_file.vue +++ b/app/assets/javascripts/repo/components/repo_file.vue @@ -55,7 +55,7 @@ class="file" @click.prevent="clickedTreeRow(file)"> <td - class="multi-file-table-col-name" + class="multi-file-table-name" :colspan="submoduleColSpan" > <i @@ -85,12 +85,11 @@ </td> <template v-if="!isCollapsed && !isSubmodule"> - <td class="hidden-sm hidden-xs"> + <td class="multi-file-table-col-commit-message hidden-sm hidden-xs"> <a v-if="file.lastCommit.message" @click.stop :href="file.lastCommit.url" - class="commit-message" > {{ file.lastCommit.message }} </a> diff --git a/app/assets/javascripts/repo/components/repo_file_buttons.vue b/app/assets/javascripts/repo/components/repo_file_buttons.vue index dd948ee84fb..34f0d51819a 100644 --- a/app/assets/javascripts/repo/components/repo_file_buttons.vue +++ b/app/assets/javascripts/repo/components/repo_file_buttons.vue @@ -22,12 +22,12 @@ export default { <template> <div v-if="showButtons" - class="repo-file-buttons" + class="multi-file-editor-btn-group" > <a :href="activeFile.rawPath" target="_blank" - class="btn btn-default raw" + class="btn btn-default btn-sm raw" rel="noopener noreferrer"> {{ rawDownloadButtonLabel }} </a> @@ -38,17 +38,17 @@ export default { aria-label="File actions"> <a :href="activeFile.blamePath" - class="btn btn-default blame"> + class="btn btn-default btn-sm blame"> Blame </a> <a :href="activeFile.commitsPath" - class="btn btn-default history"> + class="btn btn-default btn-sm history"> History </a> <a :href="activeFile.permalink" - class="btn btn-default permalink"> + class="btn btn-default btn-sm permalink"> Permalink </a> </div> diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue index d1883299bd9..6ce9267f598 100644 --- a/app/assets/javascripts/repo/components/repo_preview.vue +++ b/app/assets/javascripts/repo/components/repo_preview.vue @@ -32,10 +32,12 @@ export default { </script> <template> -<div class="blob-viewer-container"> +<div> <div v-if="!activeFile.renderError" - v-html="activeFile.html"> + v-html="activeFile.html" + class="multi-file-preview-holder" + > </div> <div v-else-if="activeFile.tempFile" diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue index 9365b09326f..4ea21913129 100644 --- a/app/assets/javascripts/repo/components/repo_sidebar.vue +++ b/app/assets/javascripts/repo/components/repo_sidebar.vue @@ -44,20 +44,16 @@ export default { </script> <template> -<div id="sidebar" :class="{'sidebar-mini' : isCollapsed}"> +<div class="ide-file-list"> <table class="table"> <thead> <tr> <th v-if="isCollapsed" - class="repo-file-options title" > - <strong class="clgray"> - {{ projectName }} - </strong> </th> <template v-else> - <th class="name multi-file-table-col-name"> + <th class="name multi-file-table-name"> Name </th> <th class="hidden-sm hidden-xs last-commit"> @@ -79,7 +75,7 @@ export default { :key="n" /> <repo-file - v-for="(file, index) in treeList" + v-for="file in treeList" :key="file.key" :file="file" /> diff --git a/app/assets/javascripts/repo/components/repo_tab.vue b/app/assets/javascripts/repo/components/repo_tab.vue index da0714c368c..fb29a60df66 100644 --- a/app/assets/javascripts/repo/components/repo_tab.vue +++ b/app/assets/javascripts/repo/components/repo_tab.vue @@ -36,27 +36,32 @@ export default { <template> <li - :class="{ active : tab.active }" @click="setFileActive(tab)" > <button type="button" - class="close-btn" + class="multi-file-tab-close" @click.stop.prevent="closeFile({ file: tab })" - :aria-label="closeLabel"> + :aria-label="closeLabel" + :class="{ + 'modified': tab.changed, + }" + :disabled="tab.changed" + > <i class="fa" :class="changedClass" - aria-hidden="true"> + aria-hidden="true" + > </i> </button> - <a - href="#" - class="repo-tab" + <div + class="multi-file-tab" + :class="{active : tab.active }" :title="tab.url" - @click.prevent.stop="setFileActive(tab)"> - {{tab.name}} - </a> + > + {{ tab.name }} + </div> </li> </template> diff --git a/app/assets/javascripts/repo/components/repo_tabs.vue b/app/assets/javascripts/repo/components/repo_tabs.vue index 59beae53e8d..ab0bef4f0ac 100644 --- a/app/assets/javascripts/repo/components/repo_tabs.vue +++ b/app/assets/javascripts/repo/components/repo_tabs.vue @@ -16,14 +16,12 @@ <template> <ul - id="tabs" - class="list-unstyled" + class="multi-file-tabs list-unstyled append-bottom-0" > <repo-tab v-for="tab in openFiles" :key="tab.id" :tab="tab" /> - <li class="tabs-divider" /> </ul> </template> |