summaryrefslogtreecommitdiffstatsabout
diff options
context:
space:
mode:
authorElijah El-Haddad2013-11-15 13:18:03 (EST)
committer Malgorzata Janczarska2013-11-15 13:24:34 (EST)
commit50eba8d61b6eeb19c932b7223ff147474029674b (patch)
treef3cc04716f7e27f6a22d077fffac5b7e2b59bd34
parent0f39d7e407d2039730629ea2b9081eedefbdb01d (diff)
downloadorg.eclipse.orion.client-50eba8d61b6eeb19c932b7223ff147474029674b.zip
org.eclipse.orion.client-50eba8d61b6eeb19c932b7223ff147474029674b.tar.gz
org.eclipse.orion.client-50eba8d61b6eeb19c932b7223ff147474029674b.tar.bz2
Bug 421639 - [client][Projects] Improve "Project Information" table
interaction with 'Tab' key Signed-off-by: Elijah El-Haddad <elijahe@ca.ibm.com>
-rw-r--r--bundles/org.eclipse.orion.client.ui/web/css/ide.css15
-rw-r--r--bundles/org.eclipse.orion.client.ui/web/orion/projects/projectEditor.js150
2 files changed, 100 insertions, 65 deletions
diff --git a/bundles/org.eclipse.orion.client.ui/web/css/ide.css b/bundles/org.eclipse.orion.client.ui/web/css/ide.css
index f06dcb6..e8933db 100644
--- a/bundles/org.eclipse.orion.client.ui/web/css/ide.css
+++ b/bundles/org.eclipse.orion.client.ui/web/css/ide.css
@@ -978,6 +978,21 @@ td .orionMarkdown {
border: 1px solid lightgrey;
}
+.orionProject .discreetInput, .orionProject .discreetInput {
+ border: none;
+ color: grey;
+ font: 8pt Lucida Sans Unicode,Lucida Grande,Verdana,Arial,Helvetica,Myriad,Tahoma,clean,sans-serif;
+ width: 70%;
+ margin-left: 0;
+ position: absolute;
+ min-height: 15px;
+}
+
+.orionProject .discreetInput:hover, .orionProject .discreetInput:focus {
+ border: 1px solid lightgrey;
+ color: black;
+}
+
.folderNav th, .orionMarkdown th, .orionProject th, .sectionWrapper{
border-color:#D6EBF0;
border-bottom: 1px solid #D6EBF0;
diff --git a/bundles/org.eclipse.orion.client.ui/web/orion/projects/projectEditor.js b/bundles/org.eclipse.orion.client.ui/web/orion/projects/projectEditor.js
index 74def9d..ecfaa60 100644
--- a/bundles/org.eclipse.orion.client.ui/web/orion/projects/projectEditor.js
+++ b/bundles/org.eclipse.orion.client.ui/web/orion/projects/projectEditor.js
@@ -57,59 +57,53 @@ define(['orion/URITemplate', 'orion/webui/littlelib', 'orion/projectCommands', '
this.display.bind(this)(node, projectData);
}.bind(this));
},
- _renderEditableFields: function(td, span, input, property){
-
- function showInput(event){
- input.value = span.innerText || span.textContent;
- span.style.visibility = "hidden";
- input.style.visibility = "";
- input.focus();
- td.onclick = null;
- }
-
- span.appendChild(document.createTextNode(this.projectData[property] || " "));
- td.title = "Click to edit";
- span.style.position = "absolute";
- td.onclick = showInput.bind(this);
+ _renderEditableFields: function(input, property, tabIndex, urlElement /*optional*/){
+ var saveInput = function(event) {
+ var properties = {};
+ properties[property] = event.target.value;
+ this.progress.progress(this.projectClient.changeProjectProperties(this.projectData, properties), "Saving project " + this.projectData.Name).then(
+ function(newProjectData){
+ if(newProjectData){
+ this.projectData = newProjectData;
+ input.value = event.target.value;
+
+ //behave differently for inputs associated with urls
+ //hide the <input> element and show the <a> urlElement
+ if(urlElement){
+ lib.empty(urlElement);
+ urlElement.appendChild(document.createTextNode(event.target.value) || "");
+ urlElement.href = event.target.value;
+ urlElement.style.visibility = "";
+ if(urlElement.urlSelector){
+ urlElement.urlSelector.style.visibility = "";
+ }
+
+ input.style.visibility = "hidden";
+ }
+ }
+ }.bind(this)
+ );
+ }.bind(this);
input.value = this.projectData[property] || "";
- input.style.position = "absolute";
- input.style.visibility = "hidden";
- input.title = "Press Enter to save";
- input.style.width = "70%";
- input.style.marginLeft = "0";
+ input.title = "Click to edit";
+ input.className = "discreetInput";
+ input.tabIndex = String(tabIndex);
+
input.onkeyup = function(event){
- if(event.keyCode === 13){
- var properties = {};
- properties[property] = event.target.value;
- this.progress.progress(this.projectClient.changeProjectProperties(this.projectData, properties), "Saving project " + this.projectData.Name).then(
- function(newProjectData){
- if(newProjectData){
- this.projectData = newProjectData;
- lib.empty(span);
- span.appendChild(document.createTextNode(event.target.value));
- if(span.href){
- span.href = event.target.value;
- }
- span.style.visibility = "";
- event.target.style.visibility = "hidden";
- td.onclick = showInput.bind(this);
- }
- }.bind(this)
- );
- } else if(event.keyCode === 27) {
- span.style.visibility = "";
- event.target.style.visibility = "hidden";
- td.onclick = showInput.bind(this);
+ if(event.keyCode === lib.KEY.ENTER){
+ // Excluding <textarea> because it is a multi-line input
+ // which allows the user to press Enter for a new line
+ if (input.tagName.toUpperCase() !== 'TEXTAREA') {
+ input.blur();
+ }
+ }else if(event.keyCode === lib.KEY.ESCAPE){
+ input.value = this.projectData[property] || ""; //restore previous value
+ input.blur();
}
}.bind(this);
input.onblur = function(event){
- span.style.visibility = "";
- event.target.style.visibility = "hidden";
- setTimeout(function(){
- //don't add onclick too soon, to avoid catching the event that triggered blur
- td.onclick = showInput.bind(this);
- }.bind(this), 100);
+ saveInput(event);
};
},
renderProjectInfo: function(parent){
@@ -121,6 +115,7 @@ define(['orion/URITemplate', 'orion/webui/littlelib', 'orion/projectCommands', '
td.appendChild(document.createTextNode("Project Information"));
tr.appendChild(td);
+ // NAME
tr = document.createElement("tr");
table.appendChild(tr);
td = document.createElement("td");
@@ -131,17 +126,14 @@ define(['orion/URITemplate', 'orion/webui/littlelib', 'orion/projectCommands', '
tr.appendChild(td);
td = document.createElement("td");
td.style.verticalAlign = "top";
- var nameSpan = document.createElement("span");
var nameInput = document.createElement("input");
-
- this._renderEditableFields(td, nameSpan, nameInput, "Name");
-
- td.appendChild(nameSpan);
+ this._renderEditableFields(nameInput, "Name", 1, null);
+
td.appendChild(nameInput);
-
tr.appendChild(td);
table.appendChild(tr);
+ // DESCRIPTION
tr = document.createElement("tr");
table.appendChild(tr);
td = document.createElement("td");
@@ -153,20 +145,15 @@ define(['orion/URITemplate', 'orion/webui/littlelib', 'orion/projectCommands', '
td = document.createElement("td");
td.style.verticalAlign = "top";
td.style.height = "40px";
- var descriptionSpan = document.createElement("span");
- descriptionSpan.style.height = "40px";
- descriptionSpan.style.verticalAlign = "middle";
- descriptionSpan.style.overflow = "auto";
- descriptionSpan.style.width = "70%";
var descriptionInput = document.createElement("textarea");
descriptionInput.style.height = "40px";
- this._renderEditableFields(td, descriptionSpan, descriptionInput, "Description");
-
- td.appendChild(descriptionSpan);
+ this._renderEditableFields(descriptionInput, "Description", 2, null);
+
td.appendChild(descriptionInput);
tr.appendChild(td);
table.appendChild(tr);
+ // SITE
tr = document.createElement("tr");
table.appendChild(tr);
td = document.createElement("td");
@@ -177,13 +164,46 @@ define(['orion/URITemplate', 'orion/webui/littlelib', 'orion/projectCommands', '
tr.appendChild(td);
td = document.createElement("td");
td.style.verticalAlign = "top";
- var a = document.createElement("a");
- a.href = this.projectData.Url;
+
var urlInput = document.createElement("input");
+ urlInput.style.visibility = "hidden";
+
+ var urlSelector = document.createElement("div");
+ urlSelector.title = "Click to edit";
+ urlSelector.className = "discreetInput";
+ urlSelector.tabIndex = 3; //this is the same as the urlInput's tab index but they will never be visible at the same time
+
+ var urlLink = document.createElement("a");
+ urlLink.href = this.projectData.Url || "";
+ urlLink.appendChild(document.createTextNode(this.projectData.Url || ""));
+ urlLink.tabIndex = 4;
+
+ urlSelector.appendChild(urlLink);
+ urlSelector.title = "Click to edit";
+
+ //show url input, hide selector
+ urlSelector.onclick = function (event){
+ urlSelector.style.visibility = "hidden";
+ urlLink.style.visibility = "hidden";
+ urlInput.style.visibility = "";
+ urlInput.focus();
+ }.bind(this);
+
+ //make the url editable when the selector gains focus
+ urlSelector.onfocus = urlSelector.onclick;
+
+ //Make pressing "Enter" on the selector do the same think as clicking it
+ urlSelector.onkeyup = function(event){
+ if(event.keyCode === lib.KEY.ENTER){
+ urlSelector.onclick(event);
+ }
+ }.bind(this);
+
+ urlLink.urlSelector = urlSelector; //refer to selector to be able to make it visible from within _renderEditableFields
- this._renderEditableFields(td, a, urlInput, "Url");
+ this._renderEditableFields(urlInput, "Url", 3, urlLink);
- td.appendChild(a);
+ td.appendChild(urlSelector);
td.appendChild(urlInput);
tr.appendChild(td);
table.appendChild(tr);