BigW Consortium Gitlab

Commit 690f978a by Jacob Schatz

Renders spinners on loading tabs

parent d9c86a49
......@@ -2,6 +2,7 @@ import Tabs from './repo_tabs'
import Sidebar from './repo_sidebar'
import Editor from './repo_editor'
import BinaryViewer from './repo_binary_viewer'
import ViewToggler from './repo_view_toggler'
import Service from './repo_service'
import Store from './repo_store'
import Helper from './repo_helper'
......@@ -14,6 +15,7 @@ export default class RepoBundle {
Store.tabs = new Tabs();
Store.sidebar = new Sidebar(url);
Store.editor = new Editor();
Store.toggler = new ViewToggler();
Store.binaryViewer = new BinaryViewer();
Helper.getContent();
}
......
......@@ -42,7 +42,7 @@ export default class RepoEditor {
watch: {
isTree() {
if(this.isTree && !this.openedFiles.length) {
if(this.isTree || !this.openedFiles.length) {
self.el.style.display = 'none';
} else {
self.el.style.display = 'inline-block';
......@@ -50,10 +50,9 @@ export default class RepoEditor {
},
openedFiles() {
if((this.isTree && !this.openedFiles.length) || this.binary) {
if((this.isTree || !this.openedFiles.length) || this.binary) {
self.el.style.display = 'none';
} else {
console.log('inline-block');
self.el.style.display = 'inline-block';
}
},
......@@ -62,7 +61,6 @@ export default class RepoEditor {
if(this.binary) {
self.el.style.display = 'none';
} else {
console.log('inline-block2');
self.el.style.display = 'inline-block';
}
if(!this.isTree) {
......
let RepoFile = {
template: `
<tr>
<tr v-if='!loading.tree || hasFiles'>
<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>
......@@ -17,7 +17,9 @@ let RepoFile = {
name: 'repo-file',
file: Object,
isTree: Boolean,
isMini: Boolean
isMini: Boolean,
loading: Object,
hasFiles: Boolean
},
methods: {
......
......@@ -75,11 +75,14 @@ let RepoHelper = {
} else {
Store.blobRaw = file.plain;
}
if(!file.loading){
this.toURL(file.url);
}
Store.binary = file.binary;
},
removeFromOpenedFiles(file) {
console.log('file remove', file)
if(file.type === 'tree') return;
Store.openedFiles = Store.openedFiles.filter((openedFile) => {
return openedFile.url !== file.url;
......@@ -115,11 +118,44 @@ let RepoHelper = {
});
},
toggleFakeTab(loading, file) {
if(loading) {
const randomURL = this.Time.now();
const newFakeFile = {
active: false,
binary: true,
type: 'blob',
loading: true,
mime_type:'loading',
name: 'loading',
url: randomURL
};
Store.openedFiles.push(newFakeFile);
return newFakeFile;
} else {
this.removeFromOpenedFiles(file);
return null;
}
},
setLoading(loading, file) {
if(Service.url.indexOf('tree') > -1) {
Store.loading.tree = loading;
} else if(Service.url.indexOf('blob') > -1) {
Store.loading.blob = loading;
return this.toggleFakeTab(loading, file);
}
},
// 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);
if(!Store.isTree) {
// it's a blob
......@@ -149,10 +185,12 @@ 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)=> {
console.log('error response', response);
this.setLoading(false, loadingData);
new Flash('Unable to load the file at this time.')
});
},
......
let RepoLoadingFile = {
template: `
<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>
</td>
<td v-if="!isMini">
<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>
</td>
<td v-if="!isMini">
<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>
</td>
</tr>
`,
props: {
loading: Object,
hasFiles: Boolean,
isMini: Boolean
}
};
export default RepoLoadingFile;
\ No newline at end of file
......@@ -4,6 +4,7 @@ import Vue from 'vue'
import Store from './repo_store'
import RepoPreviousDirectory from './repo_prev_directory'
import RepoFile from './repo_file'
import RepoLoadingFile from './repo_loading_file'
import RepoMiniMixin from './repo_mini_mixin'
export default class RepoSidebar {
......@@ -20,6 +21,7 @@ export default class RepoSidebar {
components: {
'repo-previous-directory': RepoPreviousDirectory,
'repo-file': RepoFile,
'repo-loading-file': RepoLoadingFile,
},
created() {
......
......@@ -18,6 +18,10 @@ let RepoStore = {
scrollWidth: 0,
binaryTypes: {
png: false
},
loading: {
tree: false,
blob: false
}
};
export default RepoStore;
......@@ -3,10 +3,11 @@ import RepoHelper from './repo_helper'
let RepoTab = {
template: `
<li>
<a href='#' @click.prevent='xClicked(tab)'>
<i class="fa fa-times" :class="{'fa-times':saved, 'dot-circle-o': !saved}"></i>
<a href='#' @click.prevent='xClicked(tab)' v-if='!tab.loading'>
<i class='fa fa-times' :class="{'fa-times':saved, 'dot-circle-o': !saved}"></i>
</a>
<a href='#' :title='tab.url' @click.prevent='tabClicked(tab)'>{{tab.name}}</a>
<a href='#' 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>
`,
props: {
......
......@@ -23,6 +23,5 @@ export default class RepoTabs {
styleTabsForWindows() {
const scrollWidth = Number(document.body.dataset.scrollWidth);
Store.scrollWidth = scrollWidth;
console.log(Store.scrollWidth)
}
}
\ No newline at end of file
import Service from './repo_service'
import Vue from 'vue'
import Store from './repo_store'
export default class RepoViewToggler {
constructor() {
this.initVue();
}
initVue() {
this.vue = new Vue({
el: '#view-toggler',
data: () => Store,
});
}
}
\ No newline at end of file
......@@ -42,6 +42,7 @@ header {
overflow-x: scroll;
li {
-webkit-animation: fadein 0.5s;
list-style-type: none;
background: $gray-normal;
display: inline-block;
......@@ -69,6 +70,15 @@ header {
}
}
#view-toggler {
height: 41px;
position: relative;
display: block;
border-bottom: 1px solid $white-normal;
background: white;
margin-top: -5px;
}
#binary-viewer {
img {
max-width: 100%;
......@@ -76,6 +86,7 @@ header {
}
#sidebar {
&.sidebar-mini {
display: inline-block;
vertical-align: top;
......@@ -85,6 +96,10 @@ header {
overflow: auto;
}
tr {
-webkit-animation: fadein 0.5s;
}
a {
color: $almost-black;
}
......@@ -108,3 +123,84 @@ header {
}
}
.animation-container {
background: #f6f7f9;
height: 40px;
overflow: hidden;
position: relative;
&.animation-container-small {
height: 12px;
}
&::before {
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blockTextShine;
-webkit-animation-timing-function: linear;
background-image: linear-gradient(to right, #f6f7f9 0%, #e9ebee 20%, #f6f7f9 40%, #f6f7f9 100%);
background-repeat: no-repeat;
background-size: 800px 45px;
content: ' ';
display: block;
height: 100%;
position: relative;
}
div {
background: #fff;
height: 6px;
left: 0;
position: absolute;
right: 0
}
.line-of-code-1 {
left: 0;
top: 8px;
}
.line-of-code-2 {
left: 150px;
top: 0px;
height: 10px;
}
.line-of-code-3 {
left: 0;
top: 23px;
}
.line-of-code-4 {
left: 0;
top: 38px;
}
.line-of-code-5 {
left: 200px;
top: 28px;
height: 10px;
}
.line-of-code-6 {
top: 14px;
left: 230px;
height: 10px;
}
}
@-webkit-keyframes blockTextShine {
0% {
transform: translateX(-468px)
}
100% {
transform: translateX(468px)
}
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
\ No newline at end of file
......@@ -18,6 +18,7 @@ module RendersBlob
binary: true,
mime_type: blob.mime_type,
name: blob.name,
extension: blob.extension,
size: blob.size
}
else
......@@ -25,6 +26,7 @@ module RendersBlob
html: view_to_html_string("projects/blob/_viewer", viewer: viewer, load_async: false),
plain: blob.data,
name: blob.name,
extension: blob.extension,
size: blob.size,
mime_type: blob.mime_type
}
......
......@@ -3,6 +3,5 @@
- project = local_assigns.fetch(:project) { @project }
#tree-holder.tree-holder.clearfix
.nav-block
= render 'projects/tree/tree_header', tree: @tree
= render 'projects/tree/tree_header'
= render 'projects/tree/tree_content'
.tree-content-holder
#sidebar{ ":class" => "{'sidebar-mini' : isMini}" }<
#sidebar{ ":class" => "{'sidebar-mini' : isMini}", "v-cloak" => "1" }<
%table.table
%thead{"v-if" => "!isMini"}
%th{"v-if" => "!isMini"}
......@@ -10,11 +10,14 @@
Last Commit
%th{"v-if" => "!isMini"}
Last Update
%tbody
%tr{ is: "repo-previous-directory", ":prevurl" => "prevURL", "@linkclicked" => "linkClicked" }
%tr{ is: "repo-file", "v-for" => "file in files", ":key" => "file.id", ":file" => "file",":is-mini" => "isMini", "@linkclicked" => "linkClicked(file)", ":is-tree" => "isTree" }
%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" }
.panel-right>
%ul#tabs{"v-if" => "isMini", ":style" => "{height: 41 + scrollWidth + 'px'}"}
%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}" }
#view-toggler
#ide{ data: { url: repo_url } }
#binary-viewer{ "v-if" => "binary" }
%img{"v-if" => "binaryTypes.png", ":src" => "pngBlobWithDataURI"}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment