Edit window redesign, no longer a dojo construct

css/app.css

@@ -3,6 +3,7 @@ body {
     background:#e4e4e4;
     margin:0;
     text-rendering: optimizeLegibility;
+    color:#444;
 }
 :focus {
     outline-color: transparent;
@@ -131,3 +132,33 @@ text {
 polyline {
     cursor: pointer;
 }
+
+.edit-pane {
+    position:absolute;
+    display:none;
+    width:300px;
+    background:#fff;
+    box-shadow:1px 1px 3px #111;
+}
+
+.edit-pane h2 {
+    margin:0;
+    padding:5px;
+    background:#eee;
+}
+
+.tabs {
+    border-bottom:1px solid #ddd;
+    background:#eee;
+}
+
+.tabs a {
+    color:#888;
+    padding:5px;
+    text-decoration:none;
+}
+
+.tabs a.active {
+    color:#222;
+    background:#fff;
+}

index.html

@@ -148,6 +148,24 @@ require(["dojo/dom-geometry","dojo/dom-class","dojo/on","dojo/dom","dojo/Evented
     <div>Choose a road type</div>
 </div>
 
+<!-- Floating edit pane -->
+<div class='edit-pane'>
+    <h2>&nbsp;</h2>
+    <div class='tabs'>
+        <a class='active' href='#presets'>Presets</a>
+        <a href='#tags'>Tags</a>
+    </div>
+    <div class='panel presets'>
+        <ul>
+            <li>Primary
+            <li>Secondary
+            <li>Residential
+            <li>Service
+        </ul>
+    </div>
+</div>
+</div>
+
 <!-- Map div -->
 
 <div id="map"></div>

js/iD/controller/edit/EditBaseState.js

@@ -11,17 +11,22 @@ declare("iD.controller.edit.EditBaseState", [iD.controller.ControllerState], {
 
 	editortooltip: null,
 	
-	constructor:function() {
+	constructor: function() {
 		// summary:	Base state for the 'Edit object' states - where an
         // object is selected and the user is making changes to it.
 	},
 
-	openEditorTooltip:function(x,y,entity) {
+	openEditorTooltip: function(x, y, entity) {
 		// summary:		Open the initial 'Edit tags/Edit shape' tooltip.
 		// x: Number	Screen co-ordinate.
 		// y: Number	Screen co-ordinate.
         // entity: iD.Entity	The entity to be edited.
-        var h = iD.Util.friendlyName(entity);
+        $('.edit-pane h2').text(iD.Util.friendlyName(entity));
+        $('.edit-pane').offset({
+            left: x,
+            top: y
+        }).show();
+        /*
         this.editortooltip = new dijit.TooltipDialog({
             content: h + "<button data-dojo-type='dijit.form.Button' id='editTags'  parseOnLoad='false' type='submit'>Edit tags</button> " +
                 "<button data-dojo-type='dijit.form.Button' id='editShape' parseOnLoad='false' type='submit'>Edit shape</button> ",
@@ -29,9 +34,10 @@ declare("iD.controller.edit.EditBaseState", [iD.controller.ControllerState], {
         });
         on(registry.byId('editTags'), 'click', lang.hitch(this,this.editTags,entity));
 		dijit.popup.open({ popup: this.editortooltip, x: x, y: y });
+        */
 	},
 	
-	closeEditorTooltip:function() {
+	closeEditorTooltip: function() {
 		// summary:		Close the tooltip.
 		array.forEach(['editTags','editShape'], function(b){
 			if (!registry.byId(b)) return;

potlatch.css

@@ -145,7 +145,7 @@ node::junction :junction :selectedway, node::junction :junction :hoverway { z-in
 node !:drawn :poi { z-index: 2; icon-image: circle; icon-width: 6; color: #98D1FD; casing-color: #135485; casing-width: 2; }
 
 node :hoverway { z-index: 9; icon-image: square; icon-width: 7; color: blue; layer: 5; }
-node::highlight :selected { z-index: 1; icon-image: circle; icon-width: eval('_width+5'); color: #FFF68D; }
+node::highlight :selected { z-index: 1; icon-image: circle; icon-width: eval('_width+2'); color: #FFF68D; }
 
 /* Descendant selectors provide an easy way to style relations: this example means "any way
    which is part of a relation whose type=route". */