dashboard: fix width for certain btn icons

also add spinner if clicked on op (same as mass op)

circle/dashboard/static/dashboard/dashboard.less

@@ -1182,3 +1182,12 @@ textarea[name="new_members"] {
     flex: 1;
   }
 }
+
+.fa-fw-12 {
+  /* fa-fw is too wide */
+  width: 12px;
+}
+
+.btn-op-form-send {
+  padding: 6px 12px 6px 8px;
+}

circle/dashboard/static/dashboard/vm-common.js

@@ -26,6 +26,8 @@ $(function() {
   $("body").on("click", "#op-form-send", function() {
     var url = $(this).closest("form").prop("action");
 
+    $(this).find("i").prop("class", "fa fa-fw fa-spinner fa-spin");
+
     $.ajax({
       url: url,
       headers: {"X-CSRFToken": getCookie('csrftoken')},

circle/dashboard/templates/dashboard/_disk-list-element.html

@@ -9,7 +9,7 @@
     <a href="{{ op.remove_disk.get_url }}?disk={{d.pk}}"
       class="btn btn-xs btn-{{ op.remove_disk.effect}} pull-right operation disk-remove-btn
       {% if op.remove_disk.disabled %}disabled{% endif %}">
-      <i class="fa fa-{{ op.remove_disk.icon }}"></i> {% trans "Remove" %}
+      <i class="fa fa-{{ op.remove_disk.icon }} fa-fw-12"></i> {% trans "Remove" %}
     </a>
   </span>
 {% endif %}
@@ -18,7 +18,7 @@
     <a href="{{ op.resize_disk.get_url }}?disk={{d.pk}}"
       class="btn btn-xs btn-{{ op.resize_disk.effect }} pull-right operation disk-resize-btn
       {% if op.resize_disk.disabled %}disabled{% endif %}">
-      <i class="fa fa-{{ op.resize_disk.icon }}"></i> {% trans "Resize" %}
+      <i class="fa fa-{{ op.resize_disk.icon }} fa-fw-12"></i> {% trans "Resize" %}
     </a>
   </span>
 {% endif %}

circle/dashboard/templates/dashboard/operate.html

@@ -19,8 +19,8 @@ Do you want to perform the following operation on
   <div class="pull-right">
     <a class="btn btn-default" href="{{object.get_absolute_url}}"
         data-dismiss="modal">{% trans "Cancel" %}</a>
-    <button class="btn btn-{{ opview.effect }}" type="submit" id="op-form-send">
-        {% if opview.icon %}<i class="fa fa-{{opview.icon}}"></i> {% endif %}{{ op|capfirst }}
+    <button class="btn btn-{{ opview.effect }} btn-op-form-send" type="submit" id="op-form-send">
+      {% if opview.icon %}<i class="fa fa-fw fa-{{opview.icon}}"></i> {% endif %}{{ op|capfirst }}
     </button>
   </div>
 </form>

circle/dashboard/templates/dashboard/vm-detail/_disk-operations.html

@@ -4,7 +4,7 @@
 {% if op.is_disk_operation %}
     <a href="{{op.get_url}}" class="btn btn-success btn-xs
             operation operation-{{op.op}}">
-      <i class="fa fa-{{op.icon}}"></i>
+      <i class="fa fa-{{op.icon}} fa-fw-12"></i>
             {{op.name}} </a>
 {% endif %}
 {% endfor %}