Refresh button now rotates and provides some feedback to the user when pruning branches

Author: isc-svelury

git-webui/release/share/git-webui/webui/css/git-webui.css

@@ -16,6 +16,21 @@
 /*
  * Modifications Copyright (C) 2021 InterSystems Corporation
  */
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.refresh-start {
+  animation-name: rotate;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-play-state: running;
+}
 html,
 body {
   height: 100%;
@@ -83,7 +98,7 @@ body {
   border-radius: 0.2rem;
 }
 .btn-sidebar-icon {
-  padding: 0% 0% 2% 5%;
+  padding: 2% 5%;
 }
 .btn-ok {
   float: right;

git-webui/release/share/git-webui/webui/js/git-webui.js

@@ -370,15 +370,15 @@ webui.SideBarView = function(mainView) {
                                 '</section>' +
                                 '<section id="sidebar-local-branches">' +
                                     '<h4 class="mt-3">Local Branches' +
-                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-add" >' +
+                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-add shadow-none" >' +
                                         '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#eee" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">'+
                                             '<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>'+
                                         '</svg>'+
                                     '</button>' + '</h4>' +
                                 '</section>' +
                                 '<section id="sidebar-remote-branches">' +
                                     '<h4 class="mt-3">Remote Branches' +
-                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-prune-remote-branches" >'+
+                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-prune-remote-branches shadow-none" >'+
                                         '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#eee" class="bi bi-arrow-repeat" viewBox="0 0 16 16">'+
                                         '<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>'+
                                         '<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>'+
@@ -1846,8 +1846,10 @@ $(function()
         updateSideBar();
     });
 
-    $(document).on('click', '.btn-sidebar-icon', function(e){
+    $(document).on('click', '.btn-prune-remote-branches', function(e){
         e.preventDefault();
+        $(".btn-prune-remote-branches").addClass("refresh-start");
+
         webui.git("fetch --prune", function() {
             updateSideBar();
         });

git-webui/src/share/git-webui/webui/css/git-webui.less

@@ -55,6 +55,23 @@
     user-select: none;
 }
 
+@keyframes rotate {
+
+    from {transform: rotate(0deg)}
+    to {transform: rotate(360deg)}
+    
+}    
+    
+.refresh-start {
+    
+    animation-name: rotate;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-play-state: running;
+    
+}
+
 .display-flex() {
     display: flex;
     display: -webkit-flex;
@@ -148,7 +165,7 @@ body {
 }
 
 .btn-sidebar-icon {
-    padding: 0% 0% 2% 5%;
+    padding: 2% 5%;
 }
 
 .btn-ok {

git-webui/src/share/git-webui/webui/js/git-webui.js

@@ -370,15 +370,15 @@ webui.SideBarView = function(mainView) {
                                 '</section>' +
                                 '<section id="sidebar-local-branches">' +
                                     '<h4 class="mt-3">Local Branches' +
-                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-add" >' +
+                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-add shadow-none" >' +
                                         '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#eee" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">'+
                                             '<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>'+
                                         '</svg>'+
                                     '</button>' + '</h4>' +
                                 '</section>' +
                                 '<section id="sidebar-remote-branches">' +
                                     '<h4 class="mt-3">Remote Branches' +
-                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-prune-remote-branches" >'+
+                                    '<button type="button" class="btn btn-default btn-sidebar-icon btn-prune-remote-branches shadow-none" >'+
                                         '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="#eee" class="bi bi-arrow-repeat" viewBox="0 0 16 16">'+
                                         '<path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>'+
                                         '<path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>'+
@@ -1846,8 +1846,10 @@ $(function()
         updateSideBar();
     });
 
-    $(document).on('click', '.btn-sidebar-icon', function(e){
+    $(document).on('click', '.btn-prune-remote-branches', function(e){
         e.preventDefault();
+        $(".btn-prune-remote-branches").addClass("refresh-start");
+
         webui.git("fetch --prune", function() {
             updateSideBar();
         });