Phil Hughes
parent
882dac685c
commit
a76cd8833c
|
|
@ -0,0 +1,90 @@
|
|||
<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"
|
||||
:file-list="fileList"
|
||||
/>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import icon from '../../../vue_shared/components/icon.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
icon,
|
||||
},
|
||||
props: {
|
||||
fileList: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
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>
|
||||
|
|
@ -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-modifed';
|
||||
},
|
||||
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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
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>
|
||||
<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>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -44,17 +44,13 @@ 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">
|
||||
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -34,3 +34,7 @@ export const canEditFile = (state) => {
|
|||
openedFiles.length &&
|
||||
(currentActiveFile && !currentActiveFile.renderError && !currentActiveFile.binary);
|
||||
};
|
||||
|
||||
export const addedFiles = state => changedFiles(state).filter(f => f.tempFile);
|
||||
|
||||
export const modifiedFiles = state => changedFiles(state).filter(f => !f.tempFile);
|
||||
|
|
|
|||
|
|
@ -35,270 +35,240 @@
|
|||
}
|
||||
}
|
||||
|
||||
.repository-view {
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius-default;
|
||||
color: $almost-black;
|
||||
.multi-file {
|
||||
display: flex;
|
||||
height: calc(100vh - 145px);
|
||||
border-top: 1px solid $white-dark;
|
||||
border-bottom: 1px solid $white-dark;
|
||||
|
||||
.code.white pre .hll {
|
||||
background-color: $well-light-border !important;
|
||||
}
|
||||
|
||||
.tree-content-holder {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.tree-content-holder-mini {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.panel-right {
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
|
||||
.monaco-editor.vs {
|
||||
.current-line {
|
||||
border: 0;
|
||||
background: $well-light-border;
|
||||
}
|
||||
|
||||
.line-numbers {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blob-no-preview {
|
||||
.vertical-center {
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.blob-editor-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.blob-viewer-container {
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
|
||||
> div,
|
||||
.file-content:not(.wiki) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> div,
|
||||
.file-content,
|
||||
.blob-viewer,
|
||||
.line-number,
|
||||
.blob-content,
|
||||
.code {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.line-numbers {
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
.blob-content {
|
||||
flex: 1;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#tabs {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
white-space: nowrap;
|
||||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
background: $gray-normal;
|
||||
padding: #{$gl-padding / 2} $gl-padding;
|
||||
border-right: 1px solid $white-dark;
|
||||
border-bottom: 1px solid $white-dark;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background: $white-light;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
@include str-truncated(100px);
|
||||
color: $gl-text-color;
|
||||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
margin-right: 12px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
font-size: $gl-font-size;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.close-icon:hover {
|
||||
color: $hint-color;
|
||||
}
|
||||
|
||||
.close-icon,
|
||||
.unsaved-icon {
|
||||
color: $gray-darkest;
|
||||
}
|
||||
|
||||
.unsaved-icon {
|
||||
color: $brand-success;
|
||||
}
|
||||
|
||||
&.tabs-divider {
|
||||
width: 100%;
|
||||
background-color: $white-light;
|
||||
border-right: 0;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.repo-file-buttons {
|
||||
background-color: $white-light;
|
||||
padding: 5px 10px;
|
||||
border-top: 1px solid $white-normal;
|
||||
}
|
||||
|
||||
#binary-viewer {
|
||||
height: 80vh;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
|
||||
.blob-viewer {
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.binary-unknown {
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
background: $gray-light;
|
||||
height: 100%;
|
||||
font-size: 17px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#commit-area {
|
||||
background: $gray-light;
|
||||
padding: 20px;
|
||||
|
||||
.help-block {
|
||||
padding-top: 7px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#view-toggler {
|
||||
height: 41px;
|
||||
position: relative;
|
||||
display: block;
|
||||
border-bottom: 1px solid $white-normal;
|
||||
background: $white-light;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
#binary-viewer {
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
|
||||
&.sidebar-mini {
|
||||
width: 20%;
|
||||
border-right: 1px solid $white-normal;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
tr {
|
||||
.repo-file-options {
|
||||
padding: 2px 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.file {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
@include str-truncated(250px);
|
||||
color: $almost-black;
|
||||
&.is-collapsed {
|
||||
.ide-file-list {
|
||||
max-width: 250px;
|
||||
overflow: scroll;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.render-error {
|
||||
min-height: calc(100vh - 62px);
|
||||
.ide-file-list {
|
||||
flex: 1;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
.file {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $gl-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-file-table-col-name,
|
||||
.multi-file-table-col-commit-message {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 0;
|
||||
}
|
||||
|
||||
.multi-file-table-col-name {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.multi-file-table-col-commit-message {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
.multi-file-edit-pane {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
border-left: 1px solid $white-dark;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.multi-file-tabs {
|
||||
display: flex;
|
||||
overflow: scroll;
|
||||
background-color: $white-normal;
|
||||
box-shadow: inset 0 -1px $white-dark;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-file-tab {
|
||||
padding: ($gl-padding / 2) ($gl-padding + 12) ($gl-padding / 2) $gl-padding;
|
||||
background-color: $gray-normal;
|
||||
border-right: 1px solid $white-dark;
|
||||
border-bottom: 1px solid $white-dark;
|
||||
cursor: pointer;
|
||||
@include str-truncated(150px);
|
||||
|
||||
&.active {
|
||||
background-color: $white-light;
|
||||
border-bottom-color: $white-light;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-file-tab-close {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: 0;
|
||||
font-size: $gl-font-size;
|
||||
color: $gray-darkest;
|
||||
transform: translateY(-50%);
|
||||
|
||||
&:not(.modified):hover,
|
||||
&:not(.modified):focus {
|
||||
color: $hint-color;
|
||||
}
|
||||
|
||||
&.modified {
|
||||
color: $indigo-700;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-file-edit-pane-content {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.multi-file-editor-btn-group {
|
||||
padding: $grid-size;
|
||||
border-top: 1px solid $white-dark;
|
||||
}
|
||||
|
||||
// Not great, but this is to deal with our current output
|
||||
.multi-file-preview-holder {
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
|
||||
& {
|
||||
.blob-viewer {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.file-content.code {
|
||||
display: flex;
|
||||
|
||||
i {
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.line-numbers {
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.file-content,
|
||||
.line-numbers,
|
||||
.blob-content,
|
||||
.code {
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multi-file-commit-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 290px;
|
||||
padding: $gl-padding;
|
||||
background-color: $gray-light;
|
||||
border-left: 1px solid $white-dark;
|
||||
|
||||
&.is-collapsed {
|
||||
width: 60px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-file-commit-panel-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.multi-file-commit-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0 12px 0;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 1px solid $white-dark;
|
||||
|
||||
&.is-collapsed {
|
||||
border-bottom: 1px solid $white-dark;
|
||||
|
||||
svg {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multi-file-commit-panel-collapse-btn {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
margin-left: auto;
|
||||
font-size: 20px;
|
||||
|
||||
&.is-collapsed {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-file-commit-list {
|
||||
flex: 1;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.multi-file-commit-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.multi-file-addition {
|
||||
fill: $green-500;
|
||||
}
|
||||
|
||||
.multi-file-modified {
|
||||
fill: $orange-500;
|
||||
}
|
||||
|
||||
.multi-file-commit-list-collapsed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> svg {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-file-commit-list-path {
|
||||
@include str-truncated(100%);
|
||||
}
|
||||
|
||||
.multi-file-commit-form {
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid $white-dark;
|
||||
}
|
||||
|
||||
.multi-file-commit-fieldset {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 12px;
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-file-commit-message.form-control {
|
||||
height: 80px;
|
||||
resize: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,6 @@
|
|||
= webpack_bundle_tag 'common_vue'
|
||||
= webpack_bundle_tag 'repo'
|
||||
|
||||
%div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
|
||||
%div{ class: [(container_class unless show_new_repo?), ("limit-container-width" unless fluid_layout)] }
|
||||
= render 'projects/last_push'
|
||||
= render 'projects/files', commit: @last_commit, project: @project, ref: @ref, content_url: project_tree_path(@project, @id)
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
- @no_container = true;
|
||||
#repo{ data: { root: @path.empty?.to_s,
|
||||
root_url: project_tree_path(project),
|
||||
url: content_url,
|
||||
|
|
|
|||
Loading…
Reference in New Issue