Feature - Edit features: Scrollbars and TogetherJS Collaboration (go-…

…gitea#113) * Adds TogetherJS to editor Adds Scrollbars and fixed height to editor * Added some TogetherJS config * Fixes per code review * Generated index.css * Moved editor css to the correct .less files * Generated index.css
ethantkoenig · Dec 10, 2016 · 049230f · 049230f
1 parent 91de627
commit 049230f
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 29 deletions.
diff --git a/public/css/index.css b/public/css/index.css
@@ -2503,6 +2503,9 @@ footer .ui.language .menu {
   tab-size: 16 !important;
   -moz-tab-size: 16 !important;
 }
+.repository .header-wrapper .ui.tabular .fa {
+  margin-right: 5px;
+}
 .CodeMirror {
   font: 14px Consolas, "Liberation Mono", Menlo, Courier, monospace;
 }
@@ -2513,6 +2516,48 @@ footer .ui.language .menu {
 .CodeMirror .cm-comment {
   background: inherit !important;
 }
+markdown-body table {
+  display: block;
+  width: 100%;
+  overflow: auto;
+  word-break: keep-all;
+}
+.markdown-body > *:first-child {
+  margin-top: 0 !important;
+}
+table[data-table-type="yaml-metadata"] {
+  font-size: 12px;
+  line-height: 1;
+}
+.markdown-body table tr {
+  background-color: #fff;
+  border-top: 1px solid #ccc;
+}
+.markdown-body table th,
+.markdown-body table td {
+  padding: 6px 13px;
+  border: 1px solid #ddd;
+}
+.markdown-body table th {
+  font-weight: bold;
+}
+.togetherjs-button-container {
+  width: 100%;
+  text-align: right;
+}
+.togetherjs-button img {
+  width: 135px;
+  height: 34px;
+}
+.CodeMirror,
+.CodeMirror-scroll {
+  min-height: 200px;
+}
+.CodeMirror {
+  height: 400px;
+  resize: vertical;
+  overflow: vertical;
+}
 .organization {
   padding-top: 15px;
   padding-bottom: 80px;
@@ -2932,31 +2977,3 @@ footer .ui.language .menu {
 .ui.user.list .item .description a:hover {
   text-decoration: underline;
 }
-.markdown-body table {
-  display: block;
-  width: 100%;
-  overflow: auto;
-  word-break: keep-all;
-}
-.markdown-body>*:first-child {
-  margin-top: 0 !important;
-}
-table[data-table-type="yaml-metadata"] {
-  font-size: 12px;
-  line-height: 1;
-}
-.markdown-body table tr {
-  background-color: #fff;
-  border-top: 1px solid #ccc;
-}
-.markdown-body table th, .markdown-body table td {
-  padding: 6px 13px;
-  border: 1px solid #ddd;
-}
-.markdown-body table th {
-  font-weight: bold;
-}
-
-.repository .header-wrapper .ui.tabular .fa {
-  margin-right: 5px;
-}
diff --git a/public/less/_editor.less b/public/less/_editor.less
@@ -7,4 +7,45 @@
 	.cm-comment {
 		background: inherit !important;
 	}
-}
+}
+
+markdown-body table {
+	display: block;
+	width: 100%;
+	overflow: auto;
+	word-break: keep-all;
+}
+.markdown-body>*:first-child {
+	margin-top: 0 !important;
+}
+table[data-table-type="yaml-metadata"] {
+	font-size: 12px;
+	line-height: 1;
+}
+.markdown-body table tr {
+	background-color: #fff;
+	border-top: 1px solid #ccc;
+}
+.markdown-body table th, .markdown-body table td {
+	padding: 6px 13px;
+	border: 1px solid #ddd;
+}
+.markdown-body table th {
+	font-weight: bold;
+}
+.togetherjs-button-container {
+	width: 100%;
+	text-align: right;
+}
+.togetherjs-button img {
+	width: 135px;
+	height: 34px;
+}
+.CodeMirror, .CodeMirror-scroll {
+	min-height: 200px;
+}
+.CodeMirror {
+	height: 400px;
+	resize: vertical;
+	overflow: vertical;
+}
diff --git a/public/less/_repository.less b/public/less/_repository.less
@@ -1470,3 +1470,7 @@
 	}
 	.generate-tab-size(@n, (@i + 1));
 }
+
+.repository .header-wrapper .ui.tabular .fa {
+	margin-right: 5px;
+}
diff --git a/templates/repo/editor/edit.tmpl b/templates/repo/editor/edit.tmpl
@@ -33,6 +33,9 @@
 					<a class="item" data-tab="preview" data-url="{{AppSubUrl}}/api/v1/markdown" data-context="{{.RepoLink}}/src/{{.BranchName}}" 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}}/{{.TreePath}}" data-context="{{.BranchLink}}"><i class="octicon octicon-diff"></i> {{.i18n.Tr "repo.editor.preview_changes"}}</a>
 					{{end}}
+					<div class="togetherjs-button-container"><a href="#" class="togetherjs-button pull-right" onclick="TogetherJS(this); return false;">
+						<img src="https://togetherjs.com/images/start-togetherjs-gray.png"></a>
+					</div>
 				</div>
 				<div class="ui bottom attached active tab segment" data-tab="write">
 					<textarea id="edit_area" name="content" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
@@ -53,4 +56,13 @@
 		</form>
 	</div>
 </div>
+
+<script>
+  TogetherJSConfig_findRoom = "door43";
+  //TogetherJSConfig_inviteFromRoom = true;
+  //TogetherJSConfig_autoStart = false;
+  //TogetherJSConfig_suppressJoinConfirmation = true;
+  TogetherJSConfig_storagePrefix = "door43";
+</script>
+<script src="https://togetherjs.com/togetherjs-min.js"></script>
 {{template "base/footer" .}}