diff --git a/circle/dashboard/static/dashboard/dashboard.less b/circle/dashboard/static/dashboard/dashboard.less index 0aec3d2..11f2d15 100644 --- a/circle/dashboard/static/dashboard/dashboard.less +++ b/circle/dashboard/static/dashboard/dashboard.less @@ -188,11 +188,15 @@ html { display: none; } -.vm-details-home-name { +#group-details-rename-form { + display: inline-block; +} + +.vm-details-home-name, #group-details-rename-form .input-group { max-width: 401px; } -#node-details-rename-name, #group-details-rename-name { +#node-details-rename-name { max-width: 160px; } diff --git a/circle/dashboard/static/dashboard/group-details.js b/circle/dashboard/static/dashboard/group-details.js index 6646b26..14273ad 100644 --- a/circle/dashboard/static/dashboard/group-details.js +++ b/circle/dashboard/static/dashboard/group-details.js @@ -1,30 +1,31 @@ +$(function() { /* rename */ $("#group-details-h1-name, .group-details-rename-button").click(function() { - $("#group-details-h1-name").hide(); - $("#group-details-rename").css('display', 'inline'); - $("#group-details-rename-name").focus(); + $("#group-details-h1-name span").hide(); + $("#group-details-rename-form").show().css('display', 'inline-block'); + $("#group-details-rename-name").select(); }); /* rename ajax */ $('#group-details-rename-submit').click(function() { + if(!$("#group-details-rename-name")[0].checkValidity()) { + return true; + } var name = $('#group-details-rename-name').val(); + $.ajax({ method: 'POST', url: location.href, data: {'new_name': name}, headers: {"X-CSRFToken": getCookie('csrftoken')}, success: function(data, textStatus, xhr) { - $("#group-details-h1-name").text(data['new_name']).show(); - $('#group-details-rename').hide(); - // addMessage(data['message'], "success"); + $("#group-details-h1-name span").text(data.new_name).show(); + $('#group-details-rename-form').hide(); }, error: function(xhr, textStatus, error) { - addMessage("Error during renaming!", "danger"); + addMessage("Error during renaming.", "danger"); } }); return false; }); - - $(".group-details-help-button").click(function() { - $(".group-details-help").stop().slideToggle(); - }); +}); diff --git a/circle/dashboard/templates/dashboard/group-detail.html b/circle/dashboard/templates/dashboard/group-detail.html index 0e0cdfd..fab1b8e 100644 --- a/circle/dashboard/templates/dashboard/group-detail.html +++ b/circle/dashboard/templates/dashboard/group-detail.html @@ -9,43 +9,33 @@ <div class="body-content"> <div class="page-header"> <div class="pull-right" style="padding-top: 15px;"> - <a title="{% trans "Rename" %}" href="#" class="btn btn-default btn-xs group-details-rename-button"> + <a title="{% trans "Rename" %}" class="btn btn-default btn-xs group-details-rename-button"> <i class="fa fa-pencil"></i> </a> <a title="{% trans "Delete" %}" data-group-pk="{{ group.pk }}" class="btn btn-default btn-xs real-link group-delete" href="{% url "dashboard.views.delete-group" pk=group.pk %}"> <i class="fa fa-trash-o"></i> </a> - <a title="{% trans "Help" %}" href="#" class="btn btn-default btn-xs group-details-help-button"> - <i class="fa fa-question"></i> - </a> </div> - <h1> - <div id="group-details-rename"> - <form action="" method="POST" id="group-details-rename-form"> - {% csrf_token %} - <input id="group-details-rename-name" class="form-control" name="new_name" type="text" value="{{ group.name }}"/> - <button type="submit" id="group-details-rename-submit" class="btn">{% trans "Rename" %}</button> - </form> - </div> + <h1> + <form action="" method="POST" id="group-details-rename-form" class="js-hidden"> + {% csrf_token %} + <div class="input-group"> + <input id="group-details-rename-name" class="form-control" name="new_name" + type="text" value="{{ group.name }}" required /> + <span class="input-group-btn"> + <button type="submit" id="group-details-rename-submit" class="btn"> + {% trans "Rename" %} + </button> + </span> + </div> + </form> <div id="group-details-h1-name"> - {{ group.name }} + <span class="no-js-hidden">{{ group.name }}</span> {% if group.groupprofile.org_id %} <small>{{group.groupprofile.org_id}}</small> {% endif %} </div> </h1> - <div class="group-details-help js-hidden"> - <ul style="list-style: none;"> - <li> - <strong>{% trans "Rename" %}:</strong> - {% trans "Change the name of the group." %} - </li> - <li> - <strong>{% trans "Delete" %}:</strong> - {% trans "Delete group." %} - </li> - </ul> - </div> </div><!-- .page-header --> <div class="row"> <div class="col-md-12" id="group-detail-pane">