From 4a19fd64412dc111bac3c1b56cf3eb55728d2ba3 Mon Sep 17 00:00:00 2001
From: Unknwon <u@gogs.io>
Date: Mon, 15 Aug 2016 01:42:20 -0700
Subject: [PATCH] Web editor: temporarily disable upload and quick fix for edit
 and new

Try to merge into develop branch ASAP, then continue minor fixes afterwards.
---
 cmd/web.go                          |   4 +-
 public/config.codekit               |   2 +-
 public/css/gogs.css                 | 368 +++++++++++-----------------
 public/js/gogs.js                   |   2 +-
 public/less/_repository.less        | 107 ++++++++
 routers/repo/view.go                |   1 -
 templates/repo/branch_dropdown.tmpl |  43 ----
 templates/repo/editor/edit.tmpl     |  59 ++---
 templates/repo/home.tmpl            |  12 +-
 9 files changed, 292 insertions(+), 306 deletions(-)

diff --git a/cmd/web.go b/cmd/web.go
index d14d1efcd..3b43a71cc 100644
--- a/cmd/web.go
+++ b/cmd/web.go
@@ -508,8 +508,8 @@ func runWeb(ctx *cli.Context) error {
 				Post(bindIgnErr(auth.UploadRepoFileForm{}), repo.UploadFilePost)
 			m.Post("/_delete/*", bindIgnErr(auth.DeleteRepoFileForm{}), repo.DeleteFilePost)
 			m.Post("/branches", bindIgnErr(auth.NewBranchForm{}), repo.NewBranchPost)
-			m.Post("/upload-file", repo.UploadFileToServer)
-			m.Post("/upload-remove", bindIgnErr(auth.RemoveUploadFileForm{}), repo.RemoveUploadFileFromServer)
+			// m.Post("/upload-file", repo.UploadFileToServer)
+			// m.Post("/upload-remove", bindIgnErr(auth.RemoveUploadFileForm{}), repo.RemoveUploadFileFromServer)
 		}, reqRepoWriter, context.RepoRef(), func(ctx *context.Context) {
 			if ctx.Repo.IsViewCommit {
 				ctx.Handle(404, "", nil)
diff --git a/public/config.codekit b/public/config.codekit
index 5faa5569f..018919d3b 100644
--- a/public/config.codekit
+++ b/public/config.codekit
@@ -137,7 +137,7 @@
 		"outputPathIsOutsideProject": 0,
 		"outputPathIsSetByUser": 0,
 		"outputStyle": 1,
-		"syntaxCheckerStyle": 0
+		"syntaxCheckerStyle": 1
 		},
 	"\/js\/jquery-1.11.3.min.js": {
 		"fileType": 64,
diff --git a/public/css/gogs.css b/public/css/gogs.css
index 4001f11f9..7df337732 100644
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -255,9 +255,6 @@ code.wrap {
 .ui.status.buttons .octicon {
   margin-right: 4px;
 }
-.ui.menu .item .octicon {
-  margin-right: 4px;
-}
 .ui.inline.delete-button {
   padding: 8px 15px;
   font-weight: normal;
@@ -1227,6 +1224,14 @@ footer .ui.language .menu {
 .repository.file.list .choose.reference .header .icon {
   font-size: 1.4em;
 }
+.repository.file.list #file-buttons {
+  font-weight: normal;
+  margin-top: -3px;
+  padding-right: 20px;
+}
+.repository.file.list #file-buttons .ui.button {
+  padding: 8px 10px;
+}
 .repository.file.list #repo-files-table thead th {
   padding-top: 8px;
   padding-bottom: 5px;
@@ -1263,63 +1268,93 @@ footer .ui.language .menu {
   font-size: 1em;
   margin-top: -2px;
 }
+.repository.file.list #file-content .header .file-actions {
+  padding-left: 20px;
+}
+.repository.file.list #file-content .header .file-actions .btn-octicon {
+  display: inline-block;
+  padding: 5px;
+  margin-left: 5px;
+  line-height: 1;
+  color: #767676;
+  vertical-align: middle;
+  background: transparent;
+  border: 0;
+  outline: none;
+}
+.repository.file.list #file-content .header .file-actions .btn-octicon:hover {
+  color: #4078c0;
+}
+.repository.file.list #file-content .header .file-actions .btn-octicon-danger:hover {
+  color: #bd2c00;
+}
+.repository.file.list #file-content .header .file-actions .btn-octicon.disabled {
+  color: #bbb;
+  cursor: default;
+}
+.repository.file.list #file-content .header .file-actions #delete-file-form {
+  display: inline-block;
+}
+.repository.file.list #file-content .view-raw {
+  padding: 5px;
+}
 .repository.file.list #file-content .view-raw * {
   max-width: 100%;
 }
 .repository.file.list #file-content .view-raw img {
   padding: 5px 5px 0 5px;
 }
-#file-content .code-view * {
+.repository.file.list #file-content .code-view * {
   font-size: 12px;
   font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
   line-height: 20px;
 }
-#file-content .code-view table {
+.repository.file.list #file-content .code-view table {
   width: 100%;
 }
-#file-content .code-view .lines-num {
+.repository.file.list #file-content .code-view .lines-num {
   vertical-align: top;
   text-align: right;
   color: #999;
   background: #f5f5f5;
   width: 1%;
 }
-#file-content .code-view .lines-num span {
+.repository.file.list #file-content .code-view .lines-num span {
   line-height: 20px;
   padding: 0 10px;
   cursor: pointer;
   display: block;
 }
-#file-content .code-view .lines-num,
-#file-content .code-view .lines-code {
+.repository.file.list #file-content .code-view .lines-num,
+.repository.file.list #file-content .code-view .lines-code {
   padding: 0;
 }
-#file-content .code-view .lines-num pre,
-#file-content .code-view .lines-code pre,
-#file-content .code-view .lines-num ol,
-#file-content .code-view .lines-code ol,
-#file-content .code-view .lines-num .hljs,
-#file-content .code-view .lines-code .hljs {
+.repository.file.list #file-content .code-view .lines-num pre,
+.repository.file.list #file-content .code-view .lines-code pre,
+.repository.file.list #file-content .code-view .lines-num ol,
+.repository.file.list #file-content .code-view .lines-code ol,
+.repository.file.list #file-content .code-view .lines-num .hljs,
+.repository.file.list #file-content .code-view .lines-code .hljs {
   background-color: white;
   margin: 0;
   padding: 0 !important;
 }
-#file-content .code-view .lines-num pre li,
-#file-content .code-view .lines-code pre li,
-#file-content .code-view .lines-num ol li,
-#file-content .code-view .lines-code ol li,
-#file-content .code-view .lines-num .hljs li,
-#file-content .code-view .lines-code .hljs li {
+.repository.file.list #file-content .code-view .lines-num pre li,
+.repository.file.list #file-content .code-view .lines-code pre li,
+.repository.file.list #file-content .code-view .lines-num ol li,
+.repository.file.list #file-content .code-view .lines-code ol li,
+.repository.file.list #file-content .code-view .lines-num .hljs li,
+.repository.file.list #file-content .code-view .lines-code .hljs li {
   padding-left: 5px;
   display: inline-block;
   width: 100%;
 }
-#file-content .code-view .lines-num pre li.active,
-#file-content .code-view .lines-code pre li.active,
-#file-content .code-view .lines-num ol li.active,
-#file-content .code-view .lines-code ol li.active,
-#file-content .code-view .lines-num .hljs li.active,
-#file-content .code-view .lines-code .hljs li.active {
+.repository.file.list #file-content .code-view .lines-num pre li.active,
+.repository.file.list #file-content .code-view .lines-code pre li.active,
+.repository.file.list #file-content .code-view .lines-num ol li.active,
+.repository.file.list #file-content .code-view .lines-code ol li.active,
+.repository.file.list #file-content .code-view .lines-num .hljs li.active,
+.repository.file.list #file-content .code-view .lines-code .hljs li.active {
   background: #ffffdd;
 }
 .repository.file.list .sidebar {
@@ -1328,6 +1363,85 @@ footer .ui.language .menu {
 .repository.file.list .sidebar .octicon {
   width: 16px;
 }
+.repository.file.editor .treepath {
+  width: 100%;
+}
+.repository.file.editor .treepath input {
+  vertical-align: middle;
+  box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 2px inset;
+  width: inherit;
+  padding: 7px 8px;
+  margin-right: 5px;
+}
+.repository.file.editor .tabular.menu .octicon {
+  margin-right: 5px;
+}
+.repository.file.editor .CodeMirror.cm-s-default {
+  border-radius: 3px;
+  padding: 0 !important;
+}
+.repository.file.editor .commit-form-wrapper {
+  padding-left: 64px;
+}
+.repository.file.editor .commit-form-wrapper .commit-avatar {
+  float: left;
+  margin-left: -64px;
+  width: 3em;
+  height: auto;
+}
+.repository.file.editor .commit-form-wrapper .commit-form {
+  position: relative;
+  padding: 15px;
+  margin-bottom: 10px;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+}
+.repository.file.editor .commit-form-wrapper .commit-form:before,
+.repository.file.editor .commit-form-wrapper .commit-form:after {
+  right: 100%;
+  top: 20px;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.repository.file.editor .commit-form-wrapper .commit-form:before {
+  border-right-color: #D4D4D5;
+  border-width: 9px;
+  margin-top: -9px;
+}
+.repository.file.editor .commit-form-wrapper .commit-form:after {
+  border-right-color: #f7f7f7;
+  border-width: 8px;
+  margin-top: -8px;
+}
+.repository.file.editor .commit-form-wrapper .commit-form:after {
+  border-right-color: #fff;
+}
+.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .branch-name {
+  display: inline-block;
+  padding: 3px 6px;
+  font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  color: rgba(0, 0, 0, 0.65);
+  background-color: rgba(209, 227, 237, 0.45);
+  border-radius: 3px;
+}
+.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input {
+  position: relative;
+  margin-left: 25px;
+}
+.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input {
+  width: 240px !important;
+  padding-left: 26px !important;
+}
+.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch {
+  position: absolute;
+  top: 9px;
+  left: 10px;
+  color: #b0c4ce;
+}
 .repository.options #interval {
   width: 100px!important;
   min-width: 100px;
@@ -1898,7 +2012,7 @@ footer .ui.language .menu {
   max-width: 100%;
   padding: 5px 5px 0 5px;
 }
-#file-content .code-view {
+.repository .code-view {
   overflow: auto;
   overflow-x: auto;
   overflow-y: hidden;
@@ -2160,13 +2274,13 @@ footer .ui.language .menu {
 .page.buttons {
   padding-top: 15px;
 }
-.ui.comments .dropzone, .ui.upload .dropzone {
+.ui.comments .dropzone {
   width: 100%;
   margin-bottom: 10px;
   border: 2px dashed #0087F7;
   box-shadow: none!important;
 }
-.ui.comments .dropzone .dz-error-message, .ui.upload .dropzone .dz-error-message {
+.ui.comments .dropzone .dz-error-message {
   top: 140px;
 }
 .settings .content {
@@ -2800,197 +2914,3 @@ footer .ui.language .menu {
 .ui.user.list .item .description a:hover {
   text-decoration: underline;
 }
-.btn-octicon {
-  display: inline-block;
-  padding: 5px;
-  margin-left: 5px;
-  line-height: 1;
-  color: #767676;
-  vertical-align: middle;
-  background: transparent;
-  border: 0;
-  outline: none;
-}
-.btn-octicon:hover {
-  color: #4078c0;
-}
-.btn-octicon-danger:hover {
-  color: #bd2c00;
-}
-.btn-octicon.disabled {
-    color: #bbb;
-    cursor: default;
-}
-.inline-form {
-  display: inline-block;
-}
-.ui.form .breadcrumb input {
-  min-height: 34px;
-  padding: 7px 8px;
-  color: #333;
-  vertical-align: middle;
-  background-color: #fff;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  outline: none;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
-  width: inherit;
-}
-#file-actions {
-  padding-left: 20px;
-}
-.CodeMirror.cm-s-default {
-  margin-top: 20px;
-  margin-bottom: 15px;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  height: 600px;
-  padding: 0 !important;
-}
-.commit-form-wrapper {
-  padding-left: 64px;
-}
-.commit-form {
-  position: relative;
-  padding: 15px;
-  margin-bottom: 10px;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-}
-.commit-form-wrapper .commit-form-avatar {
-  float: left;
-  margin-left: -64px;
-  border-radius: 4px;
-}
-.commit-form::before {
-  border-width: 8px;
-  border-color: transparent;
-  border-right-color: #ddd;
-  position: absolute;
-  top: 11px;
-  right: 100%;
-  left: -16px;
-  display: block;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-  content: " ";
-  border-style: solid solid outset;
-}
-.form-checkbox input[type=checkbox], .form-checkbox input[type=radio] {
-  float: left;
-  margin: 2px 0 0 -20px;
-  vertical-align: middle;
-  box-sizing: border-box;
-  padding: 0;
-}
-.branch-name {
-  display: inline-block;
-  padding: 2px 6px;
-  font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  color: rgba(0,0,0,0.5);
-  background-color: rgba(209,227,237,0.5);
-  border-radius: 3px;
-}
-.form-control, .form-select {
-  min-height: 34px;
-  padding: 7px 8px;
-  font-size: 13px;
-  color: #333;
-  vertical-align: middle;
-  background-color: #fff;
-  background-repeat: no-repeat;
-  background-position: right 8px center;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  outline: none;
-  box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
-}
-.form-control.input-contrast {
-  background-color: #fafafa;
-}
-.form-control.mr-2 {
-  margin-right: 6px !important;
-}
-.quick-pull-choice .new-branch-name-input input {
-  width: 240px !important;
-  padding-left: 26px !important;
-  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
-}
-.quick-pull-choice .new-branch-name-input .quick-pull-new-branch-icon {
-  position: absolute;
-  top: 9px;
-  left: 10px;
-  color: #b0c4ce;
-}
-.text-muted, .text-gray {
-  color: #767676 !important;
-}
-.quick-pull-choice .new-branch-name-input {
-  position: relative;
-  margin-top: 5px;
-}
-.quick-pull-choice .quick-pull-branch-name {
-  display: none;
-  padding-left: 48px;
-  margin-top: 5px;
-}
-.quick-pull-choice.will-create-branch .quick-pull-branch-name {
-  display: inline-block;
-}
-.nowrap {
-  white-space: nowrap;
-}
-#file-buttons {
-  padding-right: 15px;
-}
-.repository .ui.container .ui.breadcrumb {
-  font-size: 1.5em;
-  color: #767676;
-  max-width: 600px;
-}
-.repository .ui.container .item:first-child .ui.breadcrumb {
-  max-width: none;
-}
-.repository .ui.container .ui.breadcrumb.field {
-  margin-bottom: 10px !important;
-}
-.repo-edit-file-cancel {
-  padding-left: 10px;
-}
-#new-branch-item {
-  display:none;
-  margin: 0;
-  text-align: left;
-  padding: .71428571em 1.14285714em!important;
-  background: 0 0!important;
-  color: rgba(0,0,0,.87)!important;
-  text-transform: none!important;
-  box-shadow: none!important;
-  -webkit-transition: none!important;
-  transition: none!important;
-  border-top: none;
-  padding-right: calc(1.14285714rem + 17px)!important;
-  font-size: 14px;
-  font-weight: bold;
-  line-height: 1.1;
-}
-#new-branch-item:hover {
-  background: rgba(0,0,0,.05)!important;
-  color: rgba(0,0,0,.95)!important;
-}
-#new-branch-item .icon {
-  float: left;
-  margin-left: -15px;
-}
-#new-branch-item .description {
-  margin-top: 3px;
-  font-size: 12px;
-}
-.repository .ui.container .ui.breadcrumb {
-  font-size: 1.5em;
-  color: #767676;
-  max-width: 600px;
-}
diff --git a/public/js/gogs.js b/public/js/gogs.js
index 03bd304f0..0e18eea4d 100644
--- a/public/js/gogs.js
+++ b/public/js/gogs.js
@@ -735,7 +735,7 @@ function initEditor() {
         $('#tree-name').val(parts.join('/'));
     }).trigger('keyup');
 
-    editArea = $('.repository.edit textarea#edit_area');
+    editArea = $('.repository.editor textarea#edit_area');
 
     if (!editArea.length)
         return;
diff --git a/public/less/_repository.less b/public/less/_repository.less
index 6a378ee39..dceaa67ca 100644
--- a/public/less/_repository.less
+++ b/public/less/_repository.less
@@ -158,6 +158,14 @@
 				font-size: 1.4em;
 			}
 		}
+		#file-buttons {
+			font-weight: normal;
+			margin-top: -3px;
+			padding-right: 20px;
+			.ui.button {
+				padding: 8px 10px;
+			}
+		}
 
 		#repo-files-table {
 			thead {
@@ -204,8 +212,36 @@
 					font-size: 1em;
 					margin-top: -2px;
 				}
+				.file-actions {
+					padding-left: 20px;
+					.btn-octicon {
+					  display: inline-block;
+					  padding: 5px;
+					  margin-left: 5px;
+					  line-height: 1;
+					  color: #767676;
+					  vertical-align: middle;
+					  background: transparent;
+					  border: 0;
+					  outline: none;
+					 }
+					.btn-octicon:hover {
+					  color: #4078c0;
+					}
+					.btn-octicon-danger:hover {
+					  color: #bd2c00;
+					}
+					.btn-octicon.disabled {
+					  color: #bbb;
+					  cursor: default;
+					}
+					#delete-file-form {
+						display: inline-block;
+					}
+				}
 			}
 			.view-raw {
+				padding: 5px;
 				* {
 					max-width: 100%;
 				}
@@ -271,6 +307,77 @@
 		}
 	}
 
+	&.file.editor {
+		.treepath {
+			width: 100%;
+
+			input {
+				vertical-align: middle;
+				box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 2px inset;
+				width: inherit;
+				padding: 7px 8px;
+				margin-right: 5px;
+			}
+		}
+
+		.tabular.menu {
+			.octicon {
+				margin-right: 5px;
+			}
+		}
+
+		.CodeMirror.cm-s-default {
+		  border-radius: 3px;
+		  padding: 0 !important;
+		}
+
+		.commit-form-wrapper {
+			padding-left: 64px;
+			.commit-avatar {
+				float: left;
+				margin-left: -64px;
+				width: 3em;
+		    height: auto;
+			}
+			.commit-form {
+			  position: relative;
+			  padding: 15px;
+			  margin-bottom: 10px;
+			  border: 1px solid #ddd;
+			  border-radius: 3px;
+			  #avatar-arrow;
+				&:after {
+					border-right-color: #fff;
+				}
+
+				.quick-pull-choice {
+					.branch-name {
+						display: inline-block;
+				    padding: 3px 6px;
+				    font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+				    color: rgba(0,0,0,0.65);
+				    background-color: rgba(209,227,237,0.45);
+				    border-radius: 3px;
+					}
+					.new-branch-name-input {
+				    position: relative;
+				    margin-left: 25px;
+				    input {
+				    	width: 240px !important;
+		    	    padding-left: 26px !important;
+				    }
+					}
+					.octicon-git-branch {
+						position: absolute;
+				    top: 9px;
+				    left: 10px;
+				    color: #b0c4ce;
+					}
+				}
+			}
+		}
+	}
+
 	&.options {
 		#interval {
 			width: 100px!important;
diff --git a/routers/repo/view.go b/routers/repo/view.go
index 7fe7984c5..c7e0003a3 100644
--- a/routers/repo/view.go
+++ b/routers/repo/view.go
@@ -41,7 +41,6 @@ func Home(ctx *context.Context) {
 	ctx.Data["Title"] = title
 	ctx.Data["PageIsViewCode"] = true
 	ctx.Data["RequireHighlightJS"] = true
-	ctx.Data["IsWriter"] = ctx.Repo.IsWriter()
 
 	branchName := ctx.Repo.BranchName
 	userName := ctx.Repo.Owner.Name
diff --git a/templates/repo/branch_dropdown.tmpl b/templates/repo/branch_dropdown.tmpl
index 91db79ba0..4d37481a2 100644
--- a/templates/repo/branch_dropdown.tmpl
+++ b/templates/repo/branch_dropdown.tmpl
@@ -33,19 +33,6 @@
 				{{range .Branches}}
 					<div class="item {{if eq $.BranchName .}}selected{{end}}" data-url="{{$.RepoLink}}/{{if $.PageIsCommits}}commits{{else}}src{{end}}/{{EscapePound .}}{{if $.TreeName}}/{{EscapePound $.TreeName}}{{end}}">{{.}}</div>
 				{{end}}
-				{{if .IsWriter}}
-				<a href="javascript:void(0)" id="new-branch-item">
-					<i class="octicon octicon-git-branch"></i>
-					{{.i18n.Tr "repo.create_branch"}}: <span id="branch-name-text"></span>
-					<br/>
-					<span class="description">{{.i18n.Tr "repo.from"}} ‘{{.BranchName}}’</span>
-					<form accept-charset="UTF-8" action="{{.RepoLink}}/branches" method="post">
-						{{.CsrfTokenHtml}}
-						<input type="hidden" name="old_branch_name" value="{{.BranchName}}">
-						<input type="hidden" name="branch_name" id="branch-name" value="">
-					</form>
-				</a>
-				{{end}}
 			</div>
 			<div id="tag-list" class="scrolling menu" {{if not .IsViewTag}}style="display: none"{{end}}>
 				{{range .Tags}}
@@ -55,33 +42,3 @@
 		</div>
 	</div>
 </div>
-
-{{if .IsWriter}}
-<script type="text/javascript">
-	$(document).ready(function(){
-		$('#branch-dropdown #new-branch-item').on('click', function(){
-			$(this).find('form').submit();
-			return true;
-		});
-		$('#branch-dropdown input[name=search]').on('keyup', function(){
-			var query = $(this).val().toLowerCase();
-			if(query.length){
-				var unique = true;
-				$('#branch-dropdown #branch-list .item').each(function(i, item){
-					if($(item).text().toLowerCase() == query){
-						unique = false;
-					}
-				});
-				if(unique){
-					$('#new-branch-item #branch-name-text').text(query);
-					$('#new-branch-item #branch-name').val(query);
-					$('#new-branch-item').css('display', 'block');
-					return;
-				}
-			}
-			$('#new-branch-item').hide();
-		});
-	});
-</script>
-{{end}}
-
diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
index f6e16ae7f..3f67437f1 100644
--- a/templates/repo/editor/edit.tmpl
+++ b/templates/repo/editor/edit.tmpl
@@ -1,5 +1,5 @@
 {{template "base/head" .}}
-<div class="repository file edit">
+<div class="repository file editor">
 	{{template "repo/header" .}}
 	<div class="ui container">
 		{{template "base/alert" .}}
@@ -7,30 +7,33 @@
 			{{.CsrfTokenHtml}}
 			<input type="hidden" name="last_commit" value="{{.last_commit}}">
 			<div class="ui secondary menu">
-				<div class="item fitted" style="width:100%;">
-					<div class="ui breadcrumb field{{if .Err_Filename}} error{{end}}">
+				<div class="fitted item treepath">
+					<div class="ui breadcrumb field {{if .Err_Filename}}error{{end}}">
 						<a class="section" href="{{EscapePound $.BranchLink}}">{{.Repository.Name}}</a>
 						{{ $n := len .TreeNames}}
 						{{ $l := Subtract $n 1}}
 						{{range $i, $v := .TreeNames}}
 							<div class="divider"> / </div>
 							{{if eq $i $l}}
-								<input type="text" id="file-name" value="{{$v}}" placeholder="{{$.i18n.Tr "repo.name_your_file"}}" required> <span class="octicon octicon-info poping up" data-content="{{$.i18n.Tr "repo.filename_help"}}" data-position="bottom center" data-variation="tiny"></span>
+								<input id="file-name" value="{{$v}}" placeholder="{{$.i18n.Tr "repo.name_your_file"}}" required autofocus> 
+								<span class="octicon octicon-info poping up" data-content="{{$.i18n.Tr "repo.filename_help"}}" data-position="bottom center" data-variation="tiny"></span>
 							{{else}}
 								<span class="section"><a href="{{EscapePound $.BranchLink}}/{{EscapePound $v}}">{{$v}}</a></span>
 							{{end}}
 						{{end}}
-						<button class="clipboard-tree-name octicon octicon-clippy poping up" type="button" data-content="{{.i18n.Tr "repo.copy_file_path_to_clipboard"}}" data-position="bottom center" data-variation="tiny inverted"></button>
-						<span class="repo-edit-file-cancel">{{.i18n.Tr "repo.or"}} <a href="{{EscapePound $.BranchLink}}/{{EscapePound $.TreeName}}">{{.i18n.Tr "repo.cancel_lower"}}</a></span>
+						<!-- <button class="clipboard-tree-name octicon octicon-clippy poping up" type="button" data-content="{{.i18n.Tr "repo.copy_file_path_to_clipboard"}}" data-position="bottom center" data-variation="tiny inverted"></button> -->
+						<span class="repo-edit-file-cancel">{{.i18n.Tr "repo.or"}} <a href="{{EscapePound $.BranchLink}}{{if not .IsNewFile}}/{{EscapePound $.TreeName}}{{end}}">{{.i18n.Tr "repo.cancel_lower"}}</a></span>
 						<input type="hidden" id="tree-name" name="tree_name" value="{{.TreeName}}" required>
 					</div>
 				</div>
 			</div>
 			<div class="field">
 				<div class="ui top attached tabular menu" data-write="write" data-preview="preview" data-diff="diff">
-					<a class="active item" data-tab="write"><i class="octicon octicon-code"></i> {{.i18n.Tr "repo.edit_file"}}</a>
+					<a class="active item" data-tab="write"><i class="octicon octicon-code"></i> {{if .IsNewFile}}{{.i18n.Tr "repo.new_file"}}{{else}}{{.i18n.Tr "repo.edit_file"}}{{end}}</a>
+					{{if not .IsNewFile}}
 					<a class="item" data-tab="preview" data-url="{{AppSubUrl}}/api/v1/markdown" data-context="{{.RepoLink}}" data-preview-file-modes="{{.PreviewableFileModes}}"><i class="octicon octicon-eye"></i> {{.i18n.Tr "repo.release.preview"}}</a>
 					<a class="item" data-tab="diff" data-url="{{.RepoLink}}/_preview/{{.BranchName}}/{{.TreeName}}" data-context="{{.BranchLink}}"><i class="octicon octicon-diff"></i> {{.i18n.Tr "repo.preview_changes"}}</a>
+					{{end}}
 				</div>
 				<div class="ui bottom attached active tab segment" data-tab="write">
 					<textarea id="edit_area" name="content" data-id="repo-{{.Repository.Name}}-{{.TreeName}}"
@@ -48,37 +51,37 @@
 				</div>
 			</div>
 			<div class="commit-form-wrapper">
-				<img width="48" height="48" class="ui rounded image commit-form-avatar" src="{{.SignedUser.AvatarLink}}">
+				<img width="48" height="48" class="ui image commit-avatar" src="{{.SignedUser.AvatarLink}}">
 				<div class="commit-form">
 					<h3>{{.i18n.Tr "repo.commit_changes"}}</h3>
 					<div class="field">
 						<input name="commit_summary" placeholder="{{if .IsNewFile}}{{.i18n.Tr "repo.add"}} '{{.TreeName}}/<filename>'{{else}}{{.i18n.Tr "repo.update"}} '{{.TreeName}}'{{end}}" value="{{.commit_summary}}">
 					</div>
 					<div class="field">
-						<textarea name="commit_message" placeholder="{{.i18n.Tr "repo.default_commit_message"}}">{{.commit_message}}</textarea>
+						<textarea name="commit_message" placeholder="{{.i18n.Tr "repo.default_commit_message"}}" rows="5">{{.commit_message}}</textarea>
 					</div>
 					<div class="quick-pull-choice js-quick-pull-choice">
-						<dl class="form-group">
-							<dd>
-						 		<div class="form-checkbox">
-									<label>
-										<input type="radio" class="js-quick-pull-choice-option" name="commit_choice" value="direct"{{if eq .commit_choice "direct"}} checked="checked"{{end}}>
-										<i class="octicon octicon-git-commit" height="16" width="14"></i>
-										{{.i18n.Tr "repo.editor.commit_directly_to_this_branch" .BranchName | Safe}}
-									</label>
-								</div>
-								<div class="form-checkbox">
-									<label>
-										<input type="radio" class="js-quick-pull-choice-option" name="commit_choice" value="commit-to-new-branch"{{if eq .commit_choice "commit-to-new-branch"}} checked="checked"{{end}}>
-										<i class="octicon octicon-git-pull-request" height="16" width="12"></i>
-										{{.i18n.Tr "repo.editor.create_new_branch" | Safe}}
-									</label>
-								</div>
-							</dd>
-						</dl>
+						<div class="field">
+					 		<div class="ui radio checkbox">
+								<input type="radio" class="js-quick-pull-choice-option" name="commit_choice" value="direct" {{if eq .commit_choice "direct"}}checked{{end}}>
+								<label>
+									<i class="octicon octicon-git-commit" height="16" width="14"></i>
+									{{.i18n.Tr "repo.editor.commit_directly_to_this_branch" .BranchName | Safe}}
+								</label>
+							</div>
+						</div>
+						<div class="field">
+							<div class="ui radio checkbox">
+								<input type="radio" class="js-quick-pull-choice-option" name="commit_choice" value="commit-to-new-branch" {{if eq .commit_choice "commit-to-new-branch"}}checked{{end}}>
+								<label>
+									<i class="octicon octicon-git-pull-request" height="16" width="12"></i>
+									{{.i18n.Tr "repo.editor.create_new_branch" | Safe}}
+								</label>
+							</div>
+						</div>
 						<div class="quick-pull-branch-name">
 							<div class="new-branch-name-input{{if .Err_Branchname}} error{{end}}">
-								<i class="octicon octicon-git-branch quick-pull-new-branch-icon" height="16" width="10"></i>
+								<i class="octicon octicon-git-branch" height="16" width="10"></i>
 								<input type="text" name="new_branch_name" value="{{.new_branch_name}}" class="form-control input-contrast mr-2 js-quick-pull-new-branch-name" placeholder="New branch name…">
 								<span class="text-muted js-quick-pull-normalization-info"></span>
 							</div>
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index be8a52d2d..3f2e54c03 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -15,7 +15,7 @@
 				</div>
 			{{end}}
 			{{template "repo/branch_dropdown" .}}
-			<div class="item fitted">
+			<div class="fitted item">
 				<div class="ui breadcrumb">
 					<a class="section" href="{{.RepoLink}}/src/{{EscapePound .BranchName}}">{{.Repository.Name}}</a>
 					{{ $n := len .Treenames}}
@@ -32,16 +32,16 @@
 				</div>
 			</div>
 			<div class="right fitted item">
-				<div id="file-buttons" class="ui buttons nowrap">
+				<div id="file-buttons" class="ui tiny buttons">
 					{{if .NewFileLink}}
-						<a href="{{EscapePound .NewFileLink}}" class="ui button nowrap">
-							<i class="plus square outline icon"></i> {{.i18n.Tr "repo.new_file"}}
+						<a href="{{EscapePound .NewFileLink}}" class="ui button">
+							{{.i18n.Tr "repo.new_file"}}
 						</a>
 					{{end}}
 					{{if .UploadFileLink}}
-						<a href="{{EscapePound .UploadFileLink}}" class="ui button nowrap">
+						<!-- <a href="{{EscapePound .UploadFileLink}}" class="ui button nowrap">
 							<i class="upload icon"></i> {{.i18n.Tr "repo.upload_file"}}
-						</a>
+						</a> -->
 					{{end}}
 				</div>
 				{{if eq $n 0}}