Parent way editor button styling

openstreetmap · Dec 18, 2016 · 06fed47 · 06fed47
1 parent 399a01b
commit 06fed47
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 9 deletions.
diff --git a/css/app.css b/css/app.css
@@ -1756,15 +1756,37 @@ img.wiki-image {
 }
 
 .raw-parent-way-editor .parent-way-vertex-index {
+    width: 15%;
+    padding: 0px;
+}
+
+.raw-parent-way-editor .button-parent-way-vertex-border {
     border-radius: 15px 15px 15px 15px;
     border: 3px solid #cfcfcf;
-    width: 15%;
+    padding: 4px;
+    width: 100%;
+    min-width: 34px;
 }
 
-.raw-parent-way-editor .rp-active {
+.raw-parent-way-editor .rp-active .button-parent-way-vertex-border {
     background: rgba(0,0,0,.5);
+    color:  white;
+}
+
+.raw-parent-way-editor .rp-active .button-parent-way-vertex:hover .button-parent-way-vertex-border {
+    background: rgba(0,0,0,.8);
+}
+
+.raw-parent-way-editor .button-parent-way-vertex .tooltip {
+    display: none;
 }
 
+.raw-parent-way-editor .rp-active .button-parent-way-vertex:hover .tooltip {
+    display: block;
+    transition: display 0s 2s;
+}
+
+
 .member-incomplete .member-delete {
     display: none;
 }

diff --git a/modules/ui/raw_parent_way_editor.js b/modules/ui/raw_parent_way_editor.js
@@ -145,8 +145,8 @@ export function uiRawParentWayEditor(context) {
             var enter = items.enter()
                 .append('li')
                 .attr('class', function(d) { 
-                    return  ( d.repeated ? 'parent-way-repeated ' : '') + 'parent-way-row form-field'; } );
-
+                    return  ( d.repeated ? 'parent-way-repeated ' : '') + 'parent-way-row form-field'
+                        + ' rp-'+d.way.id+'-'+d.index+( d.related ? ' rp-active' : ''); } );
             var label = enter
                 .append('label')
                 .attr('class', 'form-label')
@@ -213,12 +213,10 @@ export function uiRawParentWayEditor(context) {
                     })
                 );    
 
-            enter
+            var button = enter
                 .append('button')
                 .attr('tabindex', -1)
-                .attr('class', function(d) { return ('button-parent-way-vertex parent-way-vertex-index minor' 
-                      + ' rp-'+d.way.id+'-'+d.index+( d.related ? ' rp-active' : '')); } )
-                .text(function(d) { return (d.index+1);})              
+                .attr('class', function(d) { return ('button-parent-way-vertex parent-way-vertex-index minor'); } ) 
                 .on('click', jumpThisVertex)
                 .on('mouseover', mouseover) // hover style the potential next related way
                 .on('mouseout', mouseout)
@@ -228,7 +226,13 @@ export function uiRawParentWayEditor(context) {
                     .title(function() {
                         return uiTooltipHtml('Make this the way to stay on', 'End');
                     })
-                );    
+                );
+
+            button
+                .append('span')
+                .attr('class', 'button-parent-way-vertex-border' )
+                .text(function(d) { return (d.index+1);});
+
             enter
                 .append('button')
                 .attr('tabindex', -1)