overhaul rename interface

Author: mkaminsky11

css/style.css

@@ -242,7 +242,7 @@ body, html{
 	border: none;
 	outline: none;
 	width: 100%;
-	height: calc(100% - 102px);
+	height: calc(100% - 56px);
 	position: absolute;
 	background-color: white;
 	overflow: auto;
@@ -334,22 +334,22 @@ body, html{
 
 .tab-tab h4{
 	margin: 0px;
-    font-size: 12px;
-    width: 83px;
-    overflow: hidden;
-    word-break: break-all;
-    text-overflow: ellipsis;
-    float: left;
-    word-wrap: break-word;
-    overflow: hidden;
-    height: 17px;
-    font-family: 'Roboto';
-    color: white;
-    padding-top: 7px;
-    padding-left: 5px;
-    font-weight: 300;
-    position: relative;
-    margin-left: 14px;
+  font-size: 12px;
+  width: 83px;
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  float: left;
+  word-wrap: break-word;
+  overflow: hidden;
+  height: 17px;
+  font-family: 'Roboto';
+  color: white;
+  padding-top: 7px;
+  padding-left: 5px;
+  font-weight: 300;
+  position: relative;
+  margin-left: 14px;
 }
 .tab-tab h6{
 	margin: 0;
@@ -453,18 +453,21 @@ body, html{
 	margin: 0;
 }
 .tab-right{
-	  position: relative;
-	  color: #F4E5E5;
-	  padding: 8px;
-	  background-color: transparent;
-	  text-align: center;
-	  font-family: 'Roboto-Thin';
-	  z-index: 11;
-	  font-size: 17px;
-	  padding-right: 12px;
-	  padding-left: 12px;
-	  float: right;
-	  overflow: visible;
+  position: relative;
+  color: #F4E5E5;
+  padding: 0px;
+  background-color: transparent;
+  text-align: center;
+  font-family: 'Roboto-Thin';
+  z-index: 11;
+  font-size: 17px;
+  float: right;
+  overflow: visible;
+}
+.tab-right > i{
+  padding: 8px;
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 #navigate{
@@ -495,7 +498,7 @@ body, html{
 	background-color: white;
 	margin-top: 0px;
 	border: none;
-	height: calc(100% - 84px);
+	height: calc(100% - 42px);
 }
 
 .terminal > * {
@@ -653,7 +656,7 @@ FILE BROWSING TREE
 
 .tree-tree{
 	overflow: auto;
-	height: calc(100% - 86px);
+	height: calc(100% - 34px);
 }
 .tree ul{
 	list-style-type: none;

index.html

@@ -40,13 +40,6 @@
 
 		<div id="side" style="display:none">
 			<div id="side-inner">
-				<div class="side-head flex-center" style="height:42px">
-						<div class="InputAddOn" id="rename-div">
-							<input id="title" value="code your cloud" placeholder="Title" class="InputAddOn-field" readonly="" onchange="ok_rename()"/>
-							<button class="InputAddOn-item" id="rename-toggle" onclick="toggle_rename_show()" style="display:none"><i class="zmdi zmdi-edit"></i></button>
-						</div>
-				</div>
-				
 				<div class="side-head" id="navigate" style="border-bottom: solid thin #424242">
 					<div class="active" id="nav_tree" onclick="nav_tree()"><i class="zmdi zmdi-folder-outline"></i></div>
 					<div id="nav_preview" onclick="nav_preview()"><i class="zmdi zmdi-eye"></i></div>
@@ -183,7 +176,8 @@ <h6>
 		  <div class="tab-right">
 				<i class="zmdi zmdi-more-vert" onclick="$('#more-popup').toggle()"></i>
 
-					<div style="display:none" id="more-popup" class="popup">
+				<div style="display:none" id="more-popup" class="popup">
+				  <span onclick="manager.currentRename()"><i class="zmdi zmdi-edit"></i> Rename</span>
       		<span onclick="manager.trash(current_file)"><i class="zmdi zmdi-delete"></i> Delete</span>
       		<span onclick="picker.share(current_file)" class="share-button"><i class="zmdi zmdi-account-add"></i> Share</span>
       		<span onclick="picker.saveAs()"><i class="zmdi zmdi-floppy"></i>Save As</span>
@@ -362,20 +356,23 @@ <h4>Would you be ok with ads on this site?</h4>
 		TODO: copy + paste + cut
 		-->
 		<div id="context" class="popup context-menu">
+		  <span onclick="" class="context-menu__item">
+			  <a class="context-menu__link" onclick="context.rename()"><i class="zmdi zmdi-edit"></i> Rename</a>
+		  </span>
 			<span onclick="" class="context-menu__item">
-			  <a class="context-menu__link" onclick="context.trash()"><i class="zmdi zmdi-delete"></i>Delete</a>
+			  <a class="context-menu__link" onclick="context.trash()"><i class="zmdi zmdi-delete"></i> Delete</a>
 		  </span>
 			<span onclick="" class="context-menu__item">
-			  <a class="context-menu__link" onclick="context.save()"><i class="zmdi zmdi-floppy"></i>Save</a>
+			  <a class="context-menu__link" onclick="context.save()"><i class="zmdi zmdi-floppy"></i> Save</a>
 			</span>
 			<span onclick="" class="context-menu__item share-button">
-			  <a class="context-menu__link" onclick="context.share()"><i class="zmdi zmdi-account-add"></i>Share</a>
+			  <a class="context-menu__link" onclick="context.share()"><i class="zmdi zmdi-account-add"></i> Share</a>
 			</span>
 			<span onclick="" class="context-menu__item">
-			  <a class="context-menu__link" onclick="context.download()"><i class="zmdi zmdi-download"></i>Download</a>
+			  <a class="context-menu__link" onclick="context.download()"><i class="zmdi zmdi-download"></i> Download</a>
 			</span>
 			<span onclick="" class="context-menu__item">
-			  <a class="context-menu__link" onclick="context.close()"><i class="zmdi zmdi-close"></i>Close</a>
+			  <a class="context-menu__link" onclick="context.close()"><i class="zmdi zmdi-close"></i> Close</a>
 			</span>
 		</div>
 
@@ -389,10 +386,7 @@ <h4>Would you be ok with ads on this site?</h4>
 		<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css" >
 		<link rel="stylesheet" href="lib/codemirror/addon/tern/tern.css" >
 		<script src="lib/codemirror/addon/comment/comment.js" ></script>
-		
-		<script src="lib/codemirror/addon/comment/comment.js"></script>
 		<script src="lib/codemirror/addon/dialog/dialog.js"></script>
-		<link rel="stylesheet" href="lib/codemirror/addon/dialog/dialog.css">
 
 		<script src="lib/codemirror/addon/edit/closebrackets.js"></script>
 		<script src="lib/codemirror/addon/edit/closetag.js"></script>
@@ -430,6 +424,7 @@ <h4>Would you be ok with ads on this site?</h4>
 		<link rel="stylesheet" href="lib/codemirror/addon/tern/tern.css">
 
 		<script src="lib/codemirror/addon/search/match-highlighter.js"></script>
+		<script src="lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
 		<script src="lib/codemirror/addon/search/matchesonscrollbar.js"></script>
 		<script src="lib/codemirror/addon/search/search.js"></script>
 		<script src="lib/codemirror/addon/search/searchcursor.js"></script>

js/context.js

@@ -24,6 +24,12 @@ context.close = function(){
   manager.removeTab($(context.taskItemInContext).attr("data-fileid"));
 }
 
+context.rename = function(){
+  var current_title = $(context.taskItemInContext).parent().parent().find("h4").text();
+  var current_title = $(context.taskItemInContext).parent().parent().find("h4").text();
+  manager.rename(current_title, $(context.taskItemInContext).attr("data-fileid"));
+}
+
 /*BACKBONE*/
 
 context.clickInsideElement = function(e, className) {

js/editor.js

@@ -16,6 +16,48 @@ manager.trash = function(id){
 		}
 	}
 }
+manager.renameId = null;
+manager.rename = function(current_title, id){
+  manager.renameId = id;
+  editor().openDialog('Rename: <input type="text" style="width: 10em" class="CodeMirror-search-field" value="'+current_title+'"/>', function(new_title){
+    manager.setFileTitle(manager.renameId, new_title);
+    if(cloud_use === "drive"){
+      sendData({
+        type: "title",
+        title: new_title
+      }, manager.renameId);
+    }
+    else if(cloud_use === "sky"){
+      sky.renameFile(manager.renameId, new_title);
+    }
+  }, {});
+}
+manager.currentRename = function(){
+  manager.rename(title(), current_file);
+}
+manager.setFileTitle = function(id, title){
+	editors[getIndex(id)].title = title;
+	$(".tab-tab[data-fileid='"+id+"']").find("h4").html(title);
+	manager.checkMode(id, title);
+	var index = getIndex(id);
+	var ext = manager.extension(title.toLowerCase());
+	if(images.isImage(ext)){
+		editors[index].image = true;
+		
+		//TODO: work on this
+		
+		if(current_file === id){
+			images.init(id); //display it as an image
+		}
+	}
+	
+	//change the title in the tree view
+	var inner_html = $("[data-tree-li='"+id+"'] span").html().split(">");
+	inner_html[2] = title;
+	$("[data-tree-li='"+id+"'] span").html(inner_html.join(">"));
+	$(".tab-tab[data-fileid='"+id+"'] > i").replaceWith(tree.getIconByTitle(title));
+	$(".tab-tab[data-fileid='"+id+"']").attr("data-icon", tree.getClassFromIcon(tree.getIconByTitle(title)));
+}
 
 manager.save = function(id){
 	if(id !== "welcome"){
@@ -100,27 +142,9 @@ manager.openTab = function(id){
 	catch(e){
 		//otherwise, a file isn't open
 		//set everything to the default
-		$("#title").val("Code Your Cloud");
-		$("#rename-toggle").css("display","none");
-		$("#rename_input").val("");
 	}
 
 	var index = getIndex(id);
-	if(editors[index].welcome){
-		//default
-		$("#title").val("Code Your Cloud");
-		$("#rename-toggle").css("display","none");
-		$("#title").css("border-top-right-radius","6px").css("border-bottom-right-radius","6px");
-		//switch #title to readonly
-		hide_top_rename();
-	}
-	else{
-		//a file
-		$("#title").val(editors[index].title);
-		$("#rename-toggle").css("display","inline-block");
-		$("#title").css("border-top-right-radius","0px").css("border-bottom-right-radius","0px");
-	}
-	
 	if(editors[index].image){
 		//TODO: fix this
 		images.init(id);	

js/picker.js

@@ -132,11 +132,11 @@ picker.saveDest = "";
 
 picker.saveAs = function(){
 	if(cloud_use === "drive"){
-		$("#file-name").val($("#title").val());
+		$("#file-name").val(title());
 		$('#saveas-overlay').velocity('transition.slideDownIn');
 	}
 	else if(cloud_use === "sky"){
-		$("#file-name").val($("#title").val());
+		$("#file-name").val(title());
 		$('#saveas-overlay').velocity('transition.slideDownIn');
 	}
 };

js/realtime.js

@@ -13,12 +13,9 @@ var _init = false;
 function loadDrive(){
 	drive.load();
 }
-
-
 function loadSky(){
 	sky.load();
 }
-
 function init(){
 	if(_init === false){
 		_init = true;
@@ -109,20 +106,3 @@ function new_file(){
 		sky.insertNewFile(sky.upload_location, (new Date()).getTime()+".txt", "");
 	}
 }
-
-/**
-* RENAMING
-* renames the file
-**/
-function ok_rename(){
-	setFileTitle(current_file, $("#title").val());
-	if(cloud_use === "drive"){
-		sendData({
-			type: "title",
-			title: $("#title").val()
-		}, current_file);
-	}
-	else if(cloud_use === "sky"){
-		sky.renameFile(current_file, $("#title").val());
-	}
-}

js/tabs.js

@@ -11,6 +11,9 @@ function editor(){
   		}
 	}
 }
+function title(){
+  return editors[getIndex(current_file)].title; 
+}
 function add_editor(e, id, welcome){
 	var to_push = {
     	editor: e, //the editor instance itself
@@ -57,32 +60,6 @@ function setIgnore(id, ignore){
 		}
 	}
 }
-function setFileTitle(id, title){
-	editors[getIndex(id)].title = title;
-	$(".tab-tab[data-fileid='"+id+"']").find("h4").html(title);
-	manager.checkMode(id, title);
-	var index = getIndex(id);
-	if(current_file === id){ //if this is the file being show, you should change the title input
-		$("#title").val(editors[index].title);
-	}
-	var ext = manager.extension(title.toLowerCase());
-	if(images.isImage(ext)){
-		editors[index].image = true;
-		
-		//TODO: work on this
-		
-		if(current_file === id){
-			images.init(id); //display it as an image
-		}
-	}
-	
-	//change the title in the tree view
-	var inner_html = $("[data-tree-li='"+id+"'] span").html().split(">");
-	inner_html[2] = title;
-	$("[data-tree-li='"+id+"'] span").html(inner_html.join(">"));
-	$(".tab-tab[data-fileid='"+id+"'] > i").replaceWith(tree.getIconByTitle(title));
-	$(".tab-tab[data-fileid='"+id+"']").attr("data-icon", tree.getClassFromIcon(tree.getIconByTitle(title)));
-}
 
 /**
 * COMMUNICATIONS
@@ -92,7 +69,6 @@ function setFileTitle(id, title){
 window.addEventListener("message", receiveMessage, false);
 function receiveMessage(event){
   if(event.data !== "!_{h:''}"){
-	  
   	var json = JSON.parse(event.data);
   	if(typeof json.s === 'undefined'){ //this makes sure that only the intended messages are getting in. There are some "background" ones
 	  	var id = json.currentfile;
@@ -102,7 +78,7 @@ function receiveMessage(event){
 		  	hide_loading_spinner();
 	  	}
 	  	else if(json.type === "title"){ //sets the title
-		  	setFileTitle(id, json.title);
+		  	manager.setFileTitle(id, json.title);
 		}
 	  	else if(json.type === "insert_text"){ //text has been inserted
 	  		setIgnore(id, true); //ignore the second one (realtime problems)