diff options
author | Jacob Schatz <jschatz1@gmail.com> | 2017-07-10 08:10:43 -0400 |
---|---|---|
committer | Jacob Schatz <jschatz1@gmail.com> | 2017-07-10 08:10:43 -0400 |
commit | 714dac67fdf3b1443ed7a7a07b7072f0b00bcf47 (patch) | |
tree | f0a4a429bf691821d87861312505e4fa7c210e31 /app | |
parent | b2afa71d98399f43d184ae4f0fb58eb7fbf0eb1d (diff) | |
download | gitlab-ce-714dac67fdf3b1443ed7a7a07b7072f0b00bcf47.tar.gz |
Fixes bugs in implementation and adds new/folder buttons
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/repo/repo_binary_viewer.js | 18 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_editor.js | 7 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_file.js | 13 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_file_options.js | 28 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_helper.js | 11 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_loading_file.js | 32 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_sidebar.js | 2 | ||||
-rw-r--r-- | app/assets/javascripts/repo/repo_store.js | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/layout.scss | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/mixins.scss | 7 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/repo.scss | 63 | ||||
-rw-r--r-- | app/controllers/concerns/renders_blob.rb | 3 | ||||
-rw-r--r-- | app/views/projects/blob/_viewer.html.haml | 8 | ||||
-rw-r--r-- | app/views/projects/tree/_tree_content.html.haml | 7 |
14 files changed, 164 insertions, 46 deletions
diff --git a/app/assets/javascripts/repo/repo_binary_viewer.js b/app/assets/javascripts/repo/repo_binary_viewer.js index 3b4024d8574..b2953e1b8ba 100644 --- a/app/assets/javascripts/repo/repo_binary_viewer.js +++ b/app/assets/javascripts/repo/repo_binary_viewer.js @@ -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; diff --git a/app/assets/javascripts/repo/repo_editor.js b/app/assets/javascripts/repo/repo_editor.js index 05c0926effa..5a1ecd0ffaa 100644 --- a/app/assets/javascripts/repo/repo_editor.js +++ b/app/assets/javascripts/repo/repo_editor.js @@ -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'; diff --git a/app/assets/javascripts/repo/repo_file.js b/app/assets/javascripts/repo/repo_file.js index b1f8e3bb0e5..3db7e47c9e9 100644 --- a/app/assets/javascripts/repo/repo_file.js +++ b/app/assets/javascripts/repo/repo_file.js @@ -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: { diff --git a/app/assets/javascripts/repo/repo_file_options.js b/app/assets/javascripts/repo/repo_file_options.js new file mode 100644 index 00000000000..5a252303dcf --- /dev/null +++ b/app/assets/javascripts/repo/repo_file_options.js @@ -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;
\ No newline at end of file diff --git a/app/assets/javascripts/repo/repo_helper.js b/app/assets/javascripts/repo/repo_helper.js index 4f823f9cdc2..f87c2986cd1 100644 --- a/app/assets/javascripts/repo/repo_helper.js +++ b/app/assets/javascripts/repo/repo_helper.js @@ -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)=> { diff --git a/app/assets/javascripts/repo/repo_loading_file.js b/app/assets/javascripts/repo/repo_loading_file.js index 39d0cc39fe4..0df0b423efd 100644 --- a/app/assets/javascripts/repo/repo_loading_file.js +++ b/app/assets/javascripts/repo/repo_loading_file.js @@ -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, diff --git a/app/assets/javascripts/repo/repo_sidebar.js b/app/assets/javascripts/repo/repo_sidebar.js index 979b687acba..45f594b3c5b 100644 --- a/app/assets/javascripts/repo/repo_sidebar.js +++ b/app/assets/javascripts/repo/repo_sidebar.js @@ -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, diff --git a/app/assets/javascripts/repo/repo_store.js b/app/assets/javascripts/repo/repo_store.js index 50f96e1a395..3c0c15076ab 100644 --- a/app/assets/javascripts/repo/repo_store.js +++ b/app/assets/javascripts/repo/repo_store.js @@ -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, diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index 49bff23452d..b1e4bfcb06d 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -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; +}
\ No newline at end of file diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 3a98332e46c..1b8eed59a56 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -118,3 +118,10 @@ @content; } } + +@mixin truncate($width: 250px) { + width: $width; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss index 0bae46afd0f..9930eeafd8c 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/pages/repo.scss @@ -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; diff --git a/app/controllers/concerns/renders_blob.rb b/app/controllers/concerns/renders_blob.rb index fc2544a8070..1440fff1527 100644 --- a/app/controllers/concerns/renders_blob.rb +++ b/app/controllers/concerns/renders_blob.rb @@ -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, diff --git a/app/views/projects/blob/_viewer.html.haml b/app/views/projects/blob/_viewer.html.haml index 7660a5fed75..cc85e5de40f 100644 --- a/app/views/projects/blob/_viewer.html.haml +++ b/app/views/projects/blob/_viewer.html.haml @@ -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 + diff --git a/app/views/projects/tree/_tree_content.html.haml b/app/views/projects/tree/_tree_content.html.haml index 07135b95eb5..2aed61b0a8f 100644 --- a/app/views/projects/tree/_tree_content.html.haml +++ b/app/views/projects/tree/_tree_content.html.haml @@ -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}" } |