Allows tabs to work with multiple browsers and scrollbars
This commit is contained in:
parent
edd7f5eb27
commit
4070d7deee
8 changed files with 68 additions and 21 deletions
|
@ -42,7 +42,8 @@ export default RepoFile;
|
|||
<template>
|
||||
<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>
|
||||
<i class="fa" v-if="!file.loading" :class="file.icon" :style="{'margin-left': file.level * 10 + 'px'}"></i>
|
||||
<i class="fa fa-spinner fa-spin" v-if="file.loading" :style="{'margin-left': file.level * 10 + 'px'}"></i>
|
||||
<a :href="file.url" @click.prevent="linkClicked(file)" class="repo-file-name" :title="file.url">{{file.name}}</a>
|
||||
</td>
|
||||
|
||||
|
|
|
@ -94,14 +94,14 @@ const RepoHelper = {
|
|||
return oldList;
|
||||
},
|
||||
|
||||
getContent(treeOrFile) {
|
||||
getContent(treeOrFile, cb) {
|
||||
let file = treeOrFile;
|
||||
const loadingData = RepoHelper.setLoading(true);
|
||||
|
||||
// const loadingData = RepoHelper.setLoading(true);
|
||||
Service.getContent()
|
||||
.then((response) => {
|
||||
const data = response.data;
|
||||
RepoHelper.setLoading(false, loadingData);
|
||||
// RepoHelper.setLoading(false, loadingData);
|
||||
if(cb) cb();
|
||||
Store.isTree = RepoHelper.isTree(data);
|
||||
if (!Store.isTree) {
|
||||
if (!file) file = data;
|
||||
|
@ -153,6 +153,7 @@ const RepoHelper = {
|
|||
const simpleBlob = RepoHelper.serializeRepoEntity('blob', blob);
|
||||
simpleBlob.lastCommitMessage = blob.last_commit.message;
|
||||
simpleBlob.lastCommitUpdate = blob.last_commit.committed_date;
|
||||
simpleBlob.loading = false;
|
||||
|
||||
return simpleBlob;
|
||||
},
|
||||
|
@ -174,6 +175,7 @@ const RepoHelper = {
|
|||
url,
|
||||
icon: RepoHelper.toFA(icon),
|
||||
level: 0,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
@ -43,19 +43,27 @@ export default class RepoSidebar {
|
|||
linkClicked(clickedFile) {
|
||||
let url = '';
|
||||
let file = clickedFile;
|
||||
file.loading = true;
|
||||
if (typeof file === 'object') {
|
||||
if (file.type === 'tree' && file.opened) {
|
||||
file = Store.removeChildFilesOfTree(file);
|
||||
} else {
|
||||
url = file.url;
|
||||
Service.url = url;
|
||||
Helper.getContent(file);
|
||||
// I need to refactor this to do the `then` here.
|
||||
// Not a callback. For now this is good enough.
|
||||
// it works.
|
||||
Helper.getContent(file, () => {
|
||||
file.loading = false;
|
||||
});
|
||||
}
|
||||
} else if (typeof file === 'string') {
|
||||
// go back
|
||||
url = file;
|
||||
Service.url = url;
|
||||
Helper.getContent();
|
||||
Helper.getContent(null, () => {
|
||||
file.loading = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
@ -16,6 +16,10 @@ const RepoStore = {
|
|||
blobRaw: '',
|
||||
blobRendered: '',
|
||||
openedFiles: [],
|
||||
tabSize: 100,
|
||||
defaultTabSize: 100,
|
||||
minTabSize: 30,
|
||||
tabsOverflow: 41,
|
||||
activeFile: {
|
||||
active: true,
|
||||
binary: false,
|
||||
|
@ -29,6 +33,7 @@ const RepoStore = {
|
|||
raw: false,
|
||||
newContent: '',
|
||||
changed: false,
|
||||
loading: false
|
||||
},
|
||||
activeFileIndex: 0,
|
||||
activeLine: 0,
|
||||
|
@ -136,6 +141,7 @@ const RepoStore = {
|
|||
mime_type: 'loading',
|
||||
name: 'loading',
|
||||
url: randomURL,
|
||||
fake: true,
|
||||
};
|
||||
|
||||
RepoStore.openedFiles.push(newFakeFile);
|
||||
|
|
|
@ -38,7 +38,7 @@ export default RepoTab;
|
|||
<i class="fa" :class="changedClass"></i>
|
||||
</a>
|
||||
|
||||
<a href="#" v-if="!tab.loading" :title="tab.url" @click.prevent="tabClicked(tab)">{{tab.name}}</a>
|
||||
<a href="#" class="repo-tab" v-if="!tab.loading" :title="tab.url" @click.prevent="tabClicked(tab)">{{tab.name}}</a>
|
||||
|
||||
<i v-if="tab.loading" class="fa fa-spinner fa-spin"></i>
|
||||
</li>
|
||||
|
|
|
@ -17,6 +17,23 @@ export default class RepoTabs {
|
|||
'repo-tab': RepoTab,
|
||||
},
|
||||
data: () => Store,
|
||||
|
||||
methods: {
|
||||
isOverflow() {
|
||||
let tabs = document.getElementById('tabs');
|
||||
if(tabs) {
|
||||
return tabs.scrollWidth > tabs.offsetWidth;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
openedFiles() {
|
||||
Vue.nextTick(() => {
|
||||
this.tabsOverflow = this.isOverflow();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -55,7 +55,7 @@
|
|||
}
|
||||
|
||||
#tabs {
|
||||
height: 51px;
|
||||
height: 61px;
|
||||
border-bottom: 1px solid $white-normal;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
|
@ -65,12 +65,22 @@
|
|||
overflow-y: hidden;
|
||||
overflow-x: auto;
|
||||
|
||||
&.overflown {
|
||||
height: 61px;
|
||||
|
||||
li {
|
||||
animation: fadein 0.5s;
|
||||
padding: 20px 18px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
animation: swipeRightAppear ease-in 0.1s;
|
||||
animation-iteration-count: 1;
|
||||
transform-origin: 0% 50%;
|
||||
list-style-type: none;
|
||||
background: $gray-normal;
|
||||
display: inline-block;
|
||||
padding: 10px 18px;
|
||||
padding: 20px 18px;
|
||||
border-right: 1px solid $border-color;
|
||||
white-space: nowrap;
|
||||
|
||||
|
@ -85,6 +95,7 @@
|
|||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
|
||||
&.close {
|
||||
width: auto;
|
||||
|
@ -110,10 +121,10 @@
|
|||
background: $gray-light;
|
||||
border-bottom: 1px solid $white-normal;
|
||||
padding: 5px;
|
||||
margin-top: -15px;
|
||||
padding: 10px 5px;
|
||||
position: relative;
|
||||
border-top: 1px solid $white-normal;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
#binary-viewer {
|
||||
|
@ -319,12 +330,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
@keyframes swipeRightAppear {
|
||||
0% {
|
||||
transform: scaleX(0.00) ;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
45% {
|
||||
transform: scaleX(0.26) ;
|
||||
}
|
||||
100% {
|
||||
transform: scaleX(1.00) ;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -14,14 +14,14 @@
|
|||
%tr{ is: "repo-file-options", ":is-mini" => "isMini", "project-name" => @project.name }
|
||||
%tr{ is: "repo-previous-directory", ":prev-url" => "prevURL", "@linkclicked" => "linkClicked(prevURL)" }
|
||||
%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", ":active-file" => "activeFile" }
|
||||
%tr{ is: "repo-file", "v-for" => "file in files", ":key" => "file.id", ":file" => "file",":is-mini" => "isMini", "@linkclicked" => "linkClicked(file)", ":is-tree" => "isTree", ":has-files" => "!!files.length", ":active-file" => "activeFile" }
|
||||
.panel-right>
|
||||
%ul#tabs{ "v-if" => "isMini", "v-cloak" => "1" }
|
||||
%ul#tabs{ "v-if" => "isMini", "v-cloak" => "1", ":class" => "{'overflown': tabsOverflow}" }
|
||||
%li{ is: "repo-tab", "v-for" => "tab in openedFiles", ":key" => "tab.id", ":tab" => "tab", ":class" => "{'active' : tab.active}" }
|
||||
#repo-file-buttons
|
||||
#ide{ data: { url: repo_url(@project) } }
|
||||
#binary-viewer{ "v-if" => "binary" }
|
||||
%img{ "v-if" => "binaryTypes.png", ":src" => "pngBlobWithDataURI", ":alt" => "activeFile.name", alt: '' }
|
||||
%img{ "v-if" => "binaryTypes.png", ":src" => "pngBlobWithDataURI", ":alt" => "activeFile.name", alt: "" }
|
||||
%div{ "v-if" => "binaryTypes.markdown", "v-html" => "activeFile.html" }
|
||||
#commit-area{ "v-if" => "changedFiles.length" }
|
||||
%form.form-horizontal
|
||||
|
|
Loading…
Reference in a new issue