kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Fixes bugs in implementation and adds new/folder buttons

This commit is contained in:
Jacob Schatz 2017-07-10 08:10:43 -04:00
parent b2afa71d98
commit 714dac67fd
14 changed files with 164 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/javascripts/repo/repo_binary_viewer.js
View File

@ -18,9 +18,27 @@ export default class RepoBinaryViewer {
}
},
methods: {
supportedNonBinaryFileType(fileExt) {
switch(fileExt) {
case 'md':
this.binaryTypes.markdown = true;
return true;
break;
default:
return false;
}
}
},
watch: {
blobRaw() {
if(!this.binary) return;
let supported = supportedNonBinaryFileType();
if(supported) {
return;
}
switch(this.binaryMimeType) {
case 'image/png':
this.binaryTypes.png = true;

7
app/assets/javascripts/repo/repo_editor.js
View File

@ -15,7 +15,8 @@ export default class RepoEditor {
this.monacoEditor = monaco.editor
.create(
document.getElementById('ide'), {
model: null
model: null,
readOnly: true
}
)
Helper.monacoInstance = monaco;
@ -42,7 +43,7 @@ export default class RepoEditor {
watch: {
isTree() {
if(this.isTree || !this.openedFiles.length) {
if(!this.openedFiles.length) {
self.el.style.display = 'none';
} else {
self.el.style.display = 'inline-block';
@ -50,7 +51,7 @@ export default class RepoEditor {
},
openedFiles() {
if((this.isTree || !this.openedFiles.length) || this.binary) {
if((!this.openedFiles.length) || this.binary) {
self.el.style.display = 'none';
} else {
self.el.style.display = 'inline-block';

13
app/assets/javascripts/repo/repo_file.js
View File

@ -1,14 +1,14 @@
let RepoFile = {
template: `
<tr v-if='!loading.tree || hasFiles'>
<tr v-if='!loading.tree || hasFiles' :class='{"active": activeFile.url === file.url}'>
<td>
<i class='fa' :class='file.icon' :style='{"margin-left": file.level * 10 + "px"}'></i>
<a :href='file.url' @click.prevent='linkClicked(file)' :title='file.url'>{{file.name}}</a>
<a :href='file.url' @click.prevent='linkClicked(file)' class='repo-file-name' :title='file.url'>{{file.name}}</a>
</td>
<td v-if='!isMini'>
<div class='ellipsis'>{{file.lastCommitMessage}}</div>
<td v-if='!isMini' class='hidden-sm hidden-xs'>
<div class='commit-message'>{{file.lastCommitMessage}}</div>
</td>
<td v-if='!isMini'>
<td v-if='!isMini' class='hidden-xs'>
<span>{{file.lastCommitUpdate}}</span>
</td>
</tr>
@ -19,7 +19,8 @@ let RepoFile = {
isTree: Boolean,
isMini: Boolean,
loading: Object,
hasFiles: Boolean
hasFiles: Boolean,
activeFile: Object
},
methods: {

28
app/assets/javascripts/repo/repo_file_options.js Normal file
View File

@ -0,0 +1,28 @@
let RepoFileOptions = {
template: `
<tr v-if='isMini' class='repo-file-options'>
<td>
<span class='title'>{{projectName}}</span>
<ul>
<li>
<a href='#' title='New File'>
<i class='fa fa-file-o'></i>
</a>
</li>
<li>
<a href='#' title='New Folder'>
<i class='fa fa-folder-o'></i>
</a>
</li>
</ul>
</td>
</tr>
`,
props: {
name: 'repo-file-options',
isMini: Boolean,
projectName: String
}
}
export default RepoFileOptions;

11
app/assets/javascripts/repo/repo_helper.js
View File

@ -61,6 +61,13 @@ let RepoHelper = {
return newList;
},
resetBinaryTypes() {
let s = '';
for(s in Store.binaryTypes) {
Store.binaryTypes[s] = false;
}
},
setActiveFile(file) {
Store.openedFiles = Store.openedFiles.map((openedFile) => {
openedFile.active = file.url === openedFile.url;
@ -73,6 +80,7 @@ let RepoHelper = {
Store.blobRaw = file.base64;
console.log('binary', file)
} else {
console.log('f', file)
Store.blobRaw = file.plain;
}
if(!file.loading){
@ -150,10 +158,8 @@ let RepoHelper = {
// may be tree or file.
getContent(file) {
const loadingData = this.setLoading(true);
console.log('loading data', loadingData)
Service.getContent()
.then((response) => {
console.log('loadddd')
let data = response.data;
this.setLoading(false, loadingData);
Store.isTree = this.isTree(data);
@ -185,7 +191,6 @@ let RepoHelper = {
let newDirectory = this.dataToListOfFiles(data);
Store.files = this.insertNewFilesIntoParentDir(file, Store.files, newDirectory);
Store.prevURL = this.blobURLtoParent(Service.url);
console.log('Store.prevURL',Store.prevURL);
}
})
.catch((response)=> {

32
app/assets/javascripts/repo/repo_loading_file.js
View File

@ -3,36 +3,28 @@ let RepoLoadingFile = {
<tr v-if='loading.tree && !hasFiles'>
<td>
<div class="animation-container animation-container-small">
<div class="line-of-code-1"></div>
<div class="line-of-code-2"></div>
<div class="line-of-code-3"></div>
<div class="line-of-code-4"></div>
<div class="line-of-code-5"></div>
<div class="line-of-code-6"></div>
<div v-for="n in 6" :class="lineOfCode(n)"></div>
</div>
</td>
<td v-if="!isMini">
<td v-if="!isMini" class='hidden-sm hidden-xs'>
<div class="animation-container">
<div class="line-of-code-1"></div>
<div class="line-of-code-2"></div>
<div class="line-of-code-3"></div>
<div class="line-of-code-4"></div>
<div class="line-of-code-5"></div>
<div class="line-of-code-6"></div>
<div v-for="n in 6" :class="lineOfCode(n)"></div>
</div>
</td>
<td v-if="!isMini">
<td v-if="!isMini" class='hidden-xs'>
<div class="animation-container animation-container-small">
<div class="line-of-code-1"></div>
<div class="line-of-code-2"></div>
<div class="line-of-code-3"></div>
<div class="line-of-code-4"></div>
<div class="line-of-code-5"></div>
<div class="line-of-code-6"></div>
<div v-for="n in 6" :class="lineOfCode(n)"></div>
</div>
</td>
</tr>
`,
methods: {
lineOfCode(n) {
return `line-of-code-${n}`;
}
},
props: {
loading: Object,
hasFiles: Boolean,

2
app/assets/javascripts/repo/repo_sidebar.js
View File

@ -3,6 +3,7 @@ import Helper from './repo_helper'
import Vue from 'vue'
import Store from './repo_store'
import RepoPreviousDirectory from './repo_prev_directory'
import RepoFileOptions from './repo_file_options'
import RepoFile from './repo_file'
import RepoLoadingFile from './repo_loading_file'
import RepoMiniMixin from './repo_mini_mixin'
@ -19,6 +20,7 @@ export default class RepoSidebar {
el: '#sidebar',
mixins: [RepoMiniMixin],
components: {
'repo-file-options': RepoFileOptions,
'repo-previous-directory': RepoPreviousDirectory,
'repo-file': RepoFile,
'repo-loading-file': RepoLoadingFile,

5
app/assets/javascripts/repo/repo_store.js
View File

@ -10,14 +10,15 @@ let RepoStore = {
blobRaw: '',
blobRendered: '',
openedFiles: [],
activeFile: '',
activeFile: {},
files: [],
binary: false,
binaryMimeType: '',
//scroll bar space for windows
scrollWidth: 0,
binaryTypes: {
png: false
png: false,
markdown: false
},
loading: {
tree: false,

6
app/assets/stylesheets/framework/layout.scss
View File

@ -120,3 +120,9 @@ of the body element here, we negate cascading side effects but allow momentum sc
.page-with-sidebar {
-webkit-overflow-scrolling: auto;
}
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

7
app/assets/stylesheets/framework/mixins.scss
View File

@ -118,3 +118,10 @@
@content;
}
}
@mixin truncate($width: 250px) {
width: $width;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

63
app/assets/stylesheets/pages/repo.scss
View File

@ -2,20 +2,18 @@
display: none;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 300px;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
opacity: 0
}
.commit-message {
@include truncate(250px);
}
.tree-content-holder {
border: 1px solid $border-color;
border-radius: $border-radius-default;
@ -98,15 +96,66 @@ header {
tr {
-webkit-animation: fadein 0.5s;
&.repo-file-options td {
padding: 0;
border-top: none;
background: $gray-light;
width: 190px;
display: inline-block;
border-top: none;
&:hover {
.title {
width: 105px;
}
ul {
display: inline-block;
}
}
.title {
display: inline-block;
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
color: $gray-darkest;
width: 185px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
padding: 2px 16px;
}
ul {
display: none;
float: right;
margin: 0 10px 0 0;
padding: 1px 0;
li {
display: inline-block;
padding: 0px 2px;
border-bottom: none;
}
}
}
.fa {
margin-right: 5px;
}
}
a {
color: $almost-black;
display: inline-block;
vertical-align: middle;
}
ul {
list-style-type: none;
padding: 0;
li {
border-bottom: 1px solid $border-gray-normal;
padding: 10px 20px;

3
app/controllers/concerns/renders_blob.rb
View File

@ -11,8 +11,9 @@ module RendersBlob
else
blob.simple_viewer
end
return render_404 unless viewer
puts blob
if blob.binary?
render json: {
binary: true,

8
app/views/projects/blob/_viewer.html.haml
View File

@ -11,4 +11,10 @@
- else
- viewer.prepare!
= render 'projects/tree/tree_content'
-# In the rare case where the first kilobyte of the file looks like text,
-# but the file turns out to actually be binary after loading all data,
-# we fall back on the binary Download viewer.
- viewer = BlobViewer::Download.new(viewer.blob) if viewer.binary_detected_after_load?
= render viewer.partial_path, viewer: viewer

7
app/views/projects/tree/_tree_content.html.haml
View File

@ -6,14 +6,15 @@
Name
%th{"v-else" => "1"}
Project
%th{"v-if" => "!isMini"}
%th.hidden-sm.hidden-xs{"v-if" => "!isMini"}
Last Commit
%th{"v-if" => "!isMini"}
%th.hidden-xs{"v-if" => "!isMini"}
Last Update
%tbody
%tr{ is: "repo-file-options", ":is-mini" => "isMini", "project-name" => @project.name }
%tr{ is: "repo-previous-directory", ":prevurl" => "prevURL", "@linkclicked" => "linkClicked" }
%tr{ is: "repo-loading-file", "v-for" => "n in 5", ":loading" => "loading", ":has-files" => "!!files.length", ":is-mini" => "isMini"}
%tr{ is: "repo-file", "v-for" => "file in files", ":key" => "file.id", ":file" => "file",":is-mini" => "isMini", "@linkclicked" => "linkClicked(file)", ":is-tree" => "isTree", ":loading" => "loading", ":has-files" => "!!files.length" }
%tr{ is: "repo-file", "v-for" => "file in files", ":key" => "file.id", ":file" => "file",":is-mini" => "isMini", "@linkclicked" => "linkClicked(file)", ":is-tree" => "isTree", ":loading" => "loading", ":has-files" => "!!files.length", ":active-file" => "activeFile" }
.panel-right>
%ul#tabs{"v-if" => "isMini", ":style" => "{height: 41 + scrollWidth + 'px'}", "v-cloak" => "1"}
%li{ is: "repo-tab", "v-for" => "tab in openedFiles", ":key" => "tab.id", ":tab" => "tab", ":class" => "{'active' : tab.active}" }