Merge branch 'issue-142' into 'master'

Move actions buttons' content to the upper right corner of details views #142

Fixes #142

circle/dashboard/static/dashboard/group-details.js

@@ -25,3 +25,9 @@
     });
     return false;
   });
+
+  $(".group-details-help-button").click(function() {
+    $(".group-details-help").stop().slideToggle();
+  });
+
+

circle/dashboard/static/dashboard/node-details.js

@@ -25,6 +25,10 @@
     return false;
   });
 
+  $(".node-details-help-button").click(function() {
+    $(".node-details-help").stop().slideToggle();
+  });
+
   /* for Node removes buttons */
   $('.node-enable').click(function() {
     var node_pk = $(this).data('node-pk');

circle/dashboard/templates/dashboard/group-detail.html

@@ -4,6 +4,11 @@
 {% block content %}
 <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"><i class="icon-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="icon-trash"></i></a>
+      <a title="{% trans "Help" %}" href="#" class="btn btn-default btn-xs group-details-help-button"><i class="icon-question"></i></a>
+    </div>
    <h1>
       <div id="group-details-rename">
         <form action="" method="POST" id="group-details-rename-form">
@@ -16,20 +21,21 @@
         {{ group.name }} 
       </div>
     </h1>
-  </div>
-  <div class="row">
-    <div class="col-md-4" id="group-info-pane">
-      <div class="big">
- 	 <div class="btn-group">
-          <button type="button" class="btn btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">Action 		<i class="icon-caret-down"></i></button>
-          <ul class="nojs-dropdown-menu dropdown-menu" role="menu">
-            <li><a href="#" class="group-details-rename-button"><i class="icon-pencil"></i>{% trans "Rename" %}</a></li>
-            <li><a data-group-pk="{{ group.pk }}" class="group-delete" href="{% url "dashboard.views.delete-group" pk=group.pk %}"><i class="icon-remove"></i> Discard</a></li>
+    <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>
-    </div>
-    <div class="col-md-8" id="group-detail-pane">
+  <div class="row">
+    <div class="col-md-12" id="group-detail-pane">
       <div class="panel panel-default" id="group-detail-panel">
         <div class="tab-content panel-body">
 

circle/dashboard/templates/dashboard/node-detail.html

@@ -6,6 +6,14 @@
 {% block content %}
 <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 node-details-rename-button"><i class="icon-pencil"></i></a>
+      <a title="{% trans "Flush" %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-flush" href="{% url "dashboard.views.flush-node" pk=node.pk %}"><i class="icon-cloud-upload"></i></a>
+      <a title="{% trans "Enable" %}" style="display:{% if node.enabled %}none{% else %}inline-block{% endif %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="icon-check"></i></a>
+      <a title="{% trans "Disable" %}" style="display:{% if not node.enabled %}none{% else %}inline-block{% endif %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="icon-ban-circle"></i></a>
+      <a title="{% trans "Delete" %}" data-node-pk="{{ node.pk }}" class="btn btn-default btn-xs real-link node-delete" href="{% url "dashboard.views.delete-node" pk=node.pk %}"><i class="icon-trash"></i></a>
+      <a title="{% trans "Help" %}" href="#" class="btn btn-default btn-xs node-details-help-button"><i class="icon-question"></i></a>
+    </div>
    <h1>	  
       <div id="node-details-rename">
        <form action="" method="POST" id="node-details-rename-form">
@@ -18,35 +26,42 @@
       {{ node.name }} 
       </div>
     </h1>
-    <small>{{ node.get_connect_host }}</small>
+    <div class="node-details-help js-hidden">
+      <ul style="list-style: none;">
+        <li>
+          <strong>{% trans "Rename" %}:</strong>
+          {% trans "Change the name of the node." %}
+        </li>
+        <li>
+          <strong>{% trans "Flush" %}:</strong>
+          {% trans "Disable node and move all instances to other ones." %}
+        </li>
+        <li>
+          <strong>{% trans "Enable" %}:</strong>
+          {% trans "Enables node." %}
+        </li>
+        <li>
+          <strong>{% trans "Disable" %}:</strong>
+          {% trans "Disables node." %}
+        </li>
+        <li>
+          <strong>{% trans "Delete" %}:</strong>
+          {% trans "Remove node and its host." %}
+        </li>
+      </ul>
+    </div>
   </div>
   <div class="row">
-    <div class="col-md-4" id="node-info-pane">
+    <div class="col-md-2" id="node-info-pane">
       <div id="node-info-data" class="big">
       <span id="node-details-state" class="label {% if node.state == 'ONLINE' %}label-success
 			{% elif node.state == 'MISSING' %}label-danger
 			{% elif node.state == 'DISABLED' %}label-warning
 			{% elif node.state == 'OFFLINE' %}label-warning
 			{% endif %}">{{ node.get_status_display|upper }}</span>
-<div class="btn-group">
-  <button type="button" class="btn {{ btn_size }} btn-warning nojs-dropdown-toogle dropdown-toggle" data-toggle="dropdown">{% trans "Action" %} <i class="icon-caret-down"></i></button>
-  <ul class="dropdown-menu nojs-dropdown-toogle" role="menu">
-    <li>
-      <a href="#" class="node-details-rename-button"><i class="icon-pencil"></i> {% trans "Rename" %}</a>
-    </li>
-    <li>
-      <a data-node-pk="{{ node.pk }}" class="real-link node-flush" href="{% url "dashboard.views.flush-node" pk=node.pk %}"><i class="icon-cloud-upload"></i> {% trans "Flush" %}</a>
-    <li>
-    <a style="display:{% if node.enabled %}none{% else %}block{% endif %}" data-node-pk="{{ node.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="icon-check"></i> {% trans "Enable" %}</a>
-    <a style="display:{% if not node.enabled %}none{% else %}block{% endif %}" data-node-pk="{{ node.pk }}" class="real-link node-enable" href="{% url "dashboard.views.status-node" pk=node.pk %}?next={{ request.path }}"><i class="icon-remove"></i> {% trans "Disable" %}</a></li>
-    <li>
-      <a data-node-pk="{{ node.pk }}" class="real-link node-delete" href="{% url "dashboard.views.delete-node" pk=node.pk %}?next={{ request.path }}"><i class="icon-trash"></i> {% trans "Delete" %}</a>
-    </li>
-  </ul>
-</div>
       </div>
     </div>
-    <div class="col-md-8" id="node-detail-pane">
+    <div class="col-md-10" id="node-detail-pane">
       <div class="panel panel-default" id="node-detail-panel">
         <ul class="nav nav-pills panel-heading">
           <li class="active">