admin-ui: Icons to some action buttons

Fix apyrgio/synnefo#109

snf-admin-app/synnefo_admin/admin/static/js/details.js

@@ -42,10 +42,10 @@ $(document).ready(function(){
 	   // hide/show expand/collapse 
   
 
-  var txt_all = ['+ Expand all','- Collapse all'];
+  var txt_all = ['Expand all','Collapse all'];
   
 
-  $('.show-hide-all span').text(txt_all[0]);
+  $('.show-hide-all span.txt').text(txt_all[0]);
   
   
   $('.show-hide-all').click(function(e){
@@ -54,7 +54,7 @@ $(document).ready(function(){
     var tabs = $(this).parent('.info-block').find('.object-details-content');
 
     if ($(this).hasClass('open')){
-      $(this).find('span').text( txt_all[1]);
+      $(this).find('span.txt').text( txt_all[1]);
       tabs.each(function() {
         $(this).stop().slideDown('slow');
         $(this).siblings('h4').addClass('expanded');
@@ -63,7 +63,7 @@ $(document).ready(function(){
 
 
     } else {
-      $(this).find('span').text( txt_all[0]);
+      $(this).find('span.txt').text( txt_all[0]);
       tabs.each(function() {
         $(this).stop().slideUp('slow');
         $(this).siblings('h4').removeClass('expanded');

snf-admin-app/synnefo_admin/admin/static/js/tables.js

@@ -163,9 +163,9 @@ $(document).ready(function() {
 	});
 	var btn1 = '<a href="" id="select-page" class="select line-btn" data-karma="neutral" data-caution="none"><span>Select Page</span></a>';
 	var btn2 = '<a href="" class="select select-all line-btn" data-karma="neutral" data-caution="warning" data-toggle="modal" data-target="#massive-actions-warning"><span>Select All</span></a>';
-	var btn3 = '<a href="" id="clear-all" class="disabled deselect line-btn" data-karma="neutral" data-caution="warning" data-toggle="modal" data-target="#clear-all-warning"><span>Clear All</span></a>';
+	var btn3 = '<a href="" id="clear-all" class="disabled deselect line-btn" data-karma="neutral" data-caution="warning" data-toggle="modal" data-target="#clear-all-warning"><span class="snf-font-remove"></span><span>Clear All</span></a>';
 	var btn4 = '<a href="" class="disabled toggle-selected extra-btn line-btn" data-karma="neutral"><span class="text">Show selected </span><span class="badge num selected-num">0</span></a>';
-	var btn5 = '<a href="" id="reload-table" class="select line-btn" data-karma="neutral" data-caution="none"><span>Reload Table</span></a>';
+	var btn5 = '<a href="" id="reload-table" class="select line-btn" data-karma="neutral" data-caution="none"><span class="snf-font-reload"></span><span>Reload Table</span></a>';
 
 	if($actionbar.length > 0) {
 		$("div.custom-buttons").html(btn5+btn1+btn2+btn3+btn4);

snf-admin-app/synnefo_admin/admin/static/sass/_bars-btns.scss

@@ -8,7 +8,7 @@
 	text-align: center;
 	opacity: 0.7;
 	span {
-		display: block;
+		display: inline-block;
 		height: 100%;
 		line-height: 100%;
 		padding: $default-btn-padding;
@@ -17,6 +17,9 @@
 		text-decoration: none;
 		opacity: 1;
 	}
+    span[class^="snf-font"] {
+        display: inline;
+    }
 }
 
 
@@ -28,6 +31,7 @@
 	span {
 		border: 1px solid transparent;
 		padding: $padding;
+        width: 100%;
 	}
 	&:hover {
 		span {
@@ -335,6 +339,12 @@ body .custom-buttons {
 	.disabled {
 		display: none;
 	}
+    .snf-font-reload {
+        @extend .snf-refresh-outline;
+    }
+    .snf-font-remove {
+        @extend .snf-remove;
+    }
 }
 
 

snf-admin-app/synnefo_admin/admin/static/sass/_details.scss

@@ -4,6 +4,9 @@
 	h4 .title{
 		font-size: 24px;
 	}
+    .rt {
+        padding-top:5px;
+    }
 }
 
 .object-details {
@@ -14,7 +17,6 @@
             float: left;
         }
         .rt {
-            padding-top:5px;
             overflow: hidden;
         }
         .arrow {
@@ -158,3 +160,24 @@
 .snf-details-user {
     @extend .snf-user-full;
 }
+
+.show-hide-all {
+    span.snf-font-arrow-up {
+        @extend .snf-arrow-up;
+        display: none;
+        padding: 0;
+    }
+    span.snf-font-arrow-down {
+        @extend .snf-arrow-down;
+        display: inline;
+        padding: 0;
+    }
+    &.open {
+        .snf-font-arrow-up {
+            display: inline;
+        } 
+        .snf-font-arrow-down {
+            display: none;
+        }
+    }
+}

snf-admin-app/synnefo_admin/admin/static/sass/_tables.scss

@@ -10,7 +10,6 @@ table th {
     vertical-align: top;
 }
 
-
 .table-items {
     .snf-search {
         opacity: 0.7;

snf-admin-app/synnefo_admin/admin/templates/admin/_base_list_head.html

@@ -3,7 +3,9 @@
 <div class="object-details info-block well {{ rowcls }}">
 {% if item_list|length > 0 and type != 'ip_log' %}
 <a href="#" class="show-hide-all line-btn">
-    <span>Collapse All </span>
+    <span class="snf-font-arrow-up"></span>
+    <span class="snf-font-arrow-down"></span>
+    <span class="txt">Collapse All </span>
     <em>({{item_list|length }})</em>
 
 </a>