webui: fix vm-renaming issue

fixes #120

one/static/script/cloud.js

@@ -81,12 +81,14 @@ $(function() {
         var content = $('#vm-' + id + '-name').html();
         var content = $('#vm-' + id + '-name').html();
         var self=this;
         var self=this;
         var url = $(this).data('url');
         var url = $(this).data('url');
+        $('#vm-'+id).addClass('editing');
         $(this).unbind('click').click(function(e){
         $(this).unbind('click').click(function(e){
             e.preventDefault();
             e.preventDefault();
             e.stopPropagation();
             e.stopPropagation();
             $(this).unbind('click').click(handler);
             $(this).unbind('click').click(handler);
             $('#vm-' + id + '-name-details').show();
             $('#vm-' + id + '-name-details').show();
             $('#vm-' + id + '-name').html(content);
             $('#vm-' + id + '-name').html(content);
+            $('#vm-'+id).removeClass('editing');
         })
         })
         $('#vm-' + id + '-name-details').hide();
         $('#vm-' + id + '-name-details').hide();
         $('#vm-' + id + '-name').html('<input type="text" value="' + oldName + '" />\
         $('#vm-' + id + '-name').html('<input type="text" value="' + oldName + '" />\
@@ -108,6 +110,8 @@ $(function() {
                     $('#vm-' + id + '-name-details').removeAttr('style');
                     $('#vm-' + id + '-name-details').removeAttr('style');
                     $('#vm-' + id + '-name').text(data.name);
                     $('#vm-' + id + '-name').text(data.name);
                     $(self).click(handler);
                     $(self).click(handler);
+                    $(self).data('name', newName);
+                    $('#vm-'+id).removeClass('editing');
                 }
                 }
             });
             });
         })
         })

one/static/style/box.less

@@ -67,7 +67,27 @@
     list-style-type: none;
     list-style-type: none;
 }
 }
 .entry {
 .entry {
+    &.editing {
+        .summary {
+            &:hover .name > span {
+                width: 100%;
+                max-width: 100%;
+            }
+            .name > span {
+                width: 100%;
+                max-width: 100%;
+            }
+        }
+    }
     &.opened {
     &.opened {
+        &.editing {
+            .summary {
+                .name > span {
+                    width: 100%;
+                    max-width: 100%;
+                }
+            }
+        }
         .actions {
         .actions {
             display: block !important;
             display: block !important;
         }
         }