Adds editor buttons

app/assets/javascripts/repo/repo_bundle.js

 import Tabs from './repo_tabs'
 import Sidebar from './repo_sidebar'
 import Editor from './repo_editor'
+import FileButtons from './repo_file_buttons'
 import BinaryViewer from './repo_binary_viewer'
 import ViewToggler from './repo_view_toggler'
 import Service from './repo_service'
@@ -15,6 +16,7 @@ export default class RepoBundle {
     Store.tabs = new Tabs();
     Store.sidebar = new Sidebar(url);
     Store.editor = new Editor();
+    Store.buttons = new FileButtons();
     // Store.toggler = new ViewToggler();
     Store.binaryViewer = new BinaryViewer();
     Helper.getContent();

app/assets/javascripts/repo/repo_editor.js

@@ -16,7 +16,8 @@ export default class RepoEditor {
       .create(
         document.getElementById('ide'), {
           model: null,
-          readOnly: true
+          readOnly: true,
+          contextmenu: false,
         }
       )
       Helper.monacoInstance = monaco;

app/assets/javascripts/repo/repo_file_buttons.js

+import Vue from 'vue'
+import Store from './repo_store'
+import Helper from './repo_helper'
+
+export default class RepoSidebar {
+  constructor(url) {
+    this.url = url;
+    this.initVue();
+    this.el = document.getElementById('repo-file-buttons');
+  }
+  
+  initVue() {
+    this.vue = new Vue({
+      el: '#repo-file-buttons',
+      data: () => Store,
+      template: `
+      <div id='repo-file-buttons'>
+        <a :href='rawFileURL' target='_blank' class='btn btn-default'>Download file</a>
+        <div class="btn-group" role="group" aria-label="File actions">
+          <a :href='blameFileUrl' class='btn btn-default'>Blame</a>
+          <a :href='historyFileUrl' class='btn btn-default'>History</a>
+          <a href='#' class='btn btn-default'>Permalink</a>
+          <a href='#' class='btn btn-default'>Lock</a>
+        </div>
+        <a href='#' v-if='canPreview' class='btn btn-default'>{{previewLabel}}</a>
+        <a href='#' class='btn btn-danger'>Delete</a>
+      </div>
+      `,
+      computed: {
+        previewLabel() {
+          return this.activeFile.raw ? 'Preview' : 'Raw'
+        },
+
+        canPreview() {
+          return this.activeFile.extension === 'md';
+        },
+
+        rawFileURL() {
+          console.log(this.activeFile)
+          return Helper.getRawURLFromBlobURL(this.activeFile.url);
+        },
+
+        blameFileUrl() {
+          return Helper.getBlameURLFromBlobURL(this.activeFile.url);
+        },
+
+        historyFileUrl() {
+          return Helper.getHistoryURLFromBlobURL(this.activeFile.url);
+        }
+      },
+
+      methods: {
+        setRawPreviewMode() {
+
+        }
+      }
+    });
+  }
+}
\ No newline at end of file

app/assets/javascripts/repo/repo_helper.js

@@ -117,6 +117,14 @@ let RepoHelper = {
     return url.replace('blob', 'raw');
   },
 
+  getBlameURLFromBlobURL(url) {
+    return url.replace('blob', 'blame');
+  },
+
+  getHistoryURLFromBlobURL(url) {
+    return url.replace('blob', 'commits');
+  },
+
   setBinaryDataAsBase64(url, file) {
     Service.getBase64Content(url)
     .then((response) => {
@@ -156,6 +164,7 @@ let RepoHelper = {
 
     // may be tree or file.
   getContent(file) {
+    console.log('file')
     const loadingData = this.setLoading(true);
     Service.getContent()
     .then((response) => {
@@ -176,11 +185,19 @@ let RepoHelper = {
             data
           );
           data.binary = true;
+          console.log('file1', file)
+          if(!file.url) {
+            file.url = location.pathname;
+          }
           data.url = file.url;
           this.addToOpenedFiles(data);
           this.setActiveFile(data);
         } else {
           Store.blobRaw = data.plain;
+          console.log('file2', file)
+          if(!file.url) {
+            file.url = location.pathname;
+          }
           data.url = file.url;
           data.binary = false;
           this.addToOpenedFiles(data);

app/assets/javascripts/repo/repo_store.js

@@ -10,7 +10,17 @@ let RepoStore = {
   blobRaw: '',
   blobRendered: '',
   openedFiles: [],
-  activeFile: {},
+  activeFile: {
+    active: true,
+    binary: false,
+    extension: '',
+    html: '',
+    mime_type: '',
+    name: 'loading...',
+    plain: '',
+    size: 0,
+    url: ''
+  },
   files: [],
   binary: false,
   binaryMimeType: '',

app/assets/stylesheets/pages/repo.scss

@@ -27,12 +27,17 @@ header {
 .panel-right{
   display: inline-block;
   width: 85%;
+
+  .monaco-editor.vs .cursor {
+    background: rgba(255,255,255,0);
+    border-color: rgba(255,255,255,0);
+  }
+
   #tabs {
     height: 41px;
-    border-bottom: 1px solid #f0f0f0;
+    border-bottom: 1px solid $white-normal;
     padding-left: 0;
     margin-bottom: 0;
-    background: $gray-light;
     display: inline-block;
     white-space: nowrap;
     width: 100%;
@@ -65,13 +70,19 @@ header {
   }
   #ide {
     height: 70vh;
+  }
+
+  #repo-file-buttons {
+    background: $gray-light;
+    padding: 5px;
     margin-top: -5px;
-  }  
+    border-bottom: 1px solid $white-normal;
+  }
 
   #binary-viewer {
     height: 70vh;
     overflow: auto;
-    margin-top: -5px;
+    margin-top: 5px;
     margin-left: 10px;
 
     .blob-viewer {

app/assets/stylesheets/pages/tree.scss

@@ -132,7 +132,6 @@
 }
 
 .tree-ref-holder {
-  float: left;
   margin-right: 15px;
 }
 

app/views/projects/tree/_tree_content.html.haml

@@ -18,6 +18,7 @@
   .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}" }
+    #repo-file-buttons
     #ide{ data: { url: repo_url } }
     #binary-viewer{ "v-if" => "binary" }
       %img{"v-if" => "binaryTypes.png", ":src" => "pngBlobWithDataURI"}

app/views/projects/tree/_tree_header.html.haml

 .tree-controls
+  %a.btn.btn-default.editable-mode{href='#'}
+    Edit mode
   = render 'projects/find_file_link'
 
-  = link_to s_('Commits|History'), namespace_project_commits_path(@project.namespace, @project, @id), class: 'btn btn-grouped'
-
   = render 'projects/buttons/download', project: @project, ref: @ref
 
 .tree-ref-holder
   = render 'shared/ref_switcher', destination: 'tree', path: @path
-
-%ul.breadcrumb.repo-breadcrumb
-  %li
-    = link_to namespace_project_tree_path(@project.namespace, @project, @ref) do
-      = @project.path
-  - path_breadcrumbs do |title, path|
-    %li
-      = link_to truncate(title, length: 40), namespace_project_tree_path(@project.namespace, @project, tree_join(@ref, path))
-
-  - if current_user
-    %li
-      - if !on_top_of_branch?
-        %span.btn.add-to-tree.disabled.has-tooltip{ title: _("You can only add files when you are on a branch"), data: { container: 'body' } }
-          = icon('plus')
-      - else
-        %span.dropdown
-          %a.dropdown-toggle.btn.add-to-tree{ href: '#', "data-toggle" => "dropdown" }
-            = icon('plus')
-          %ul.dropdown-menu
-            - if can_edit_tree?
-              %li
-                = link_to namespace_project_new_blob_path(@project.namespace, @project, @id) do
-                  = icon('pencil fw')
-                  #{ _('New file') }
-              %li
-                = link_to '#modal-upload-blob', { 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal' } do
-                  = icon('file fw')
-                  #{ _('Upload file') }
-              %li
-                = link_to '#modal-create-new-dir', { 'data-target' => '#modal-create-new-dir', 'data-toggle' => 'modal' } do
-                  = icon('folder fw')
-                  #{ _('New directory') }
-            - elsif can?(current_user, :fork_project, @project)
-              %li
-                - continue_params = { to:         namespace_project_new_blob_path(@project.namespace, @project, @id),
-                                      notice:     edit_in_new_fork_notice,
-                                      notice_now: edit_in_new_fork_notice_now }
-                - fork_path = namespace_project_forks_path(@project.namespace, @project, namespace_key:  current_user.namespace.id,
-                                                                                        continue:       continue_params)
-                = link_to fork_path, method: :post do
-                  = icon('pencil fw')
-                  #{ _('New file') }
-              %li
-                - continue_params = { to:         request.fullpath,
-                                      notice:     edit_in_new_fork_notice + " Try to upload a file again.",
-                                      notice_now: edit_in_new_fork_notice_now }
-                - fork_path = namespace_project_forks_path(@project.namespace, @project, namespace_key:  current_user.namespace.id,
-                                                                                        continue:       continue_params)
-                = link_to fork_path, method: :post do
-                  = icon('file fw')
-                  #{ _('Upload file') }
-              %li
-                - continue_params = { to:         request.fullpath,
-                                      notice:     edit_in_new_fork_notice + " Try to create a new directory again.",
-                                      notice_now: edit_in_new_fork_notice_now }
-                - fork_path = namespace_project_forks_path(@project.namespace, @project, namespace_key:  current_user.namespace.id,
-                                                                                        continue:       continue_params)
-                = link_to fork_path, method: :post do
-                  = icon('folder fw')
-                  #{ _('New directory') }
-
-            %li.divider
-            %li
-              = link_to new_namespace_project_branch_path(@project.namespace, @project) do
-                = icon('code-fork fw')
-                #{ _('New branch') }
-            %li
-              = link_to new_namespace_project_tag_path(@project.namespace, @project) do
-                = icon('tags fw')
-                #{ _('New tag') }