Merge pull request #105 from mulesoft/bugs/fix-spinner

Fix spinner when making a API request

Author: jcenturion

dist/examples/leagues.raml

@@ -34,7 +34,7 @@ securitySchemes:
       settings:
         authorizationUri: https://github.com/login/oauth/authorize
         accessTokenUri: https://github.com/login/oauth/access_token
-        authorizationGrants: [ code, token ]
+        authorizationGrants: [ code ]
         scopes:
           - "user"
           - "user:email"

dist/scripts/api-console.js

@@ -1143,7 +1143,6 @@
             var segmentContexts = resolveSegementContexts($scope.resource.pathSegments, $scope.context.uriParameters.data());
 
             $scope.showSpinner = true;
-            // $scope.toggleSidebar($event, true);
             $scope.toggleRequestMetadata($event, true);
 
             try {
@@ -5282,11 +5281,9 @@ angular.module('ramlConsoleApp').run(['$templateCache', function($templateCache)
     "              <div class=\"raml-console-sidebar-action-group\">\n" +
     "                <button ng-hide=\"showSpinner\" type=\"submit\" class=\"raml-console-sidebar-action raml-console-sidebar-action-{{methodInfo.method}}\" ng-click=\"tryIt($event)\" ng-class=\"{'raml-console-sidebar-action-force':context.forceRequest}\"><span ng-if=\"context.forceRequest\">Force</span> {{methodInfo.method.toUpperCase()}}\n" +
     "                </button>\n" +
-    "                <button ng-if=\"showSpinner\" type=\"submit\" class=\"raml-console-sidebar-action raml-console-sidebar-action-{{methodInfo.method}} raml-console-sidebar-action-cancel-request\" ng-click=\"cancelRequest()\">Cancel</button>\n" +
+    "                <button ng-if=\"showSpinner\" type=\"submit\" class=\"raml-console-sidebar-action raml-console-sidebar-action-{{methodInfo.method}} raml-console-sidebar-action-cancel-request\" ng-click=\"cancelRequest()\">Cancel <div class=\"raml-console-spinner-request\" ng-if=\"showSpinner\">Loading ...</div></button>\n" +
     "                <button class=\"raml-console-sidebar-action raml-console-sidebar-action-clear\" ng-click=\"clearFields()\">Clear</button>\n" +
     "                <button class=\"raml-console-sidebar-action raml-console-sidebar-action-reset\" ng-click=\"resetFields()\">Reset</button>\n" +
-    "\n" +
-    "                <div class=\"raml-console-spinner-request\" ng-if=\"showSpinner\">Loading ...</div>\n" +
     "              </div>\n" +
     "            </div>\n" +
     "          </section>\n" +

dist/styles/api-console-dark-theme.css

@@ -3848,7 +3848,7 @@ span.raml-console-side-bar-required-field {
 
 /*spinner request*/
 
-@-webkit-keyframes raml-console-spinner_request {
+@-webkit-keyframes raml-console-spinner-request {
   0% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
@@ -3866,7 +3866,7 @@ span.raml-console-side-bar-required-field {
   }
 }
 
-@-moz-keyframes raml-console-spinner_request {
+@-moz-keyframes raml-console-spinner-request {
   0% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
@@ -3884,7 +3884,7 @@ span.raml-console-side-bar-required-field {
   }
 }
 
-@-o-keyframes raml-console-spinner_request {
+@-o-keyframes raml-console-spinner-request {
   0% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
@@ -3942,9 +3942,9 @@ span.raml-console-side-bar-required-field {
   height: 1em;
   overflow: hidden;
   text-indent: 100%;
-  position: relative;
-  left: 153px;
-  top: -27px;
+  position: absolute;
+  left: 125px;
+  margin-top: 7px;
 }
 
 .raml-console-initializer-container {

dist/styles/api-console-light-theme.css

@@ -3848,7 +3848,7 @@ span.raml-console-side-bar-required-field {
 
 /*spinner request*/
 
-@-webkit-keyframes raml-console-spinner_request {
+@-webkit-keyframes raml-console-spinner-request {
   0% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
@@ -3866,7 +3866,7 @@ span.raml-console-side-bar-required-field {
   }
 }
 
-@-moz-keyframes raml-console-spinner_request {
+@-moz-keyframes raml-console-spinner-request {
   0% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
@@ -3884,7 +3884,7 @@ span.raml-console-side-bar-required-field {
   }
 }
 
-@-o-keyframes raml-console-spinner_request {
+@-o-keyframes raml-console-spinner-request {
   0% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
@@ -3942,9 +3942,9 @@ span.raml-console-side-bar-required-field {
   height: 1em;
   overflow: hidden;
   text-indent: 100%;
-  position: relative;
-  left: 153px;
-  top: -27px;
+  position: absolute;
+  left: 125px;
+  margin-top: 7px;
 }
 
 .raml-console-initializer-container {

src/app/directives/sidebar.js

@@ -275,7 +275,6 @@
             var segmentContexts = resolveSegementContexts($scope.resource.pathSegments, $scope.context.uriParameters.data());
 
             $scope.showSpinner = true;
-            // $scope.toggleSidebar($event, true);
             $scope.toggleRequestMetadata($event, true);
 
             try {

src/app/directives/sidebar.tpl.html

@@ -94,11 +94,9 @@ <h4 class="raml-console-sidebar-subhead">Body</h4>
               <div class="raml-console-sidebar-action-group">
                 <button ng-hide="showSpinner" type="submit" class="raml-console-sidebar-action raml-console-sidebar-action-{{methodInfo.method}}" ng-click="tryIt($event)" ng-class="{'raml-console-sidebar-action-force':context.forceRequest}"><span ng-if="context.forceRequest">Force</span> {{methodInfo.method.toUpperCase()}}
                 </button>
-                <button ng-if="showSpinner" type="submit" class="raml-console-sidebar-action raml-console-sidebar-action-{{methodInfo.method}} raml-console-sidebar-action-cancel-request" ng-click="cancelRequest()">Cancel</button>
+                <button ng-if="showSpinner" type="submit" class="raml-console-sidebar-action raml-console-sidebar-action-{{methodInfo.method}} raml-console-sidebar-action-cancel-request" ng-click="cancelRequest()">Cancel <div class="raml-console-spinner-request" ng-if="showSpinner">Loading ...</div></button>
                 <button class="raml-console-sidebar-action raml-console-sidebar-action-clear" ng-click="clearFields()">Clear</button>
                 <button class="raml-console-sidebar-action raml-console-sidebar-action-reset" ng-click="resetFields()">Reset</button>
-
-                <div class="raml-console-spinner-request" ng-if="showSpinner">Loading ...</div>
               </div>
             </div>
           </section>

src/scss/_spinner.scss

@@ -58,7 +58,7 @@
 
 
 /*spinner request*/
-@-webkit-keyframes spinner_request {
+@-webkit-keyframes spinner-request {
   0% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
@@ -76,7 +76,7 @@
   }
 }
 
-@-moz-keyframes spinner_request {
+@-moz-keyframes spinner-request {
   0% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
@@ -94,7 +94,7 @@
   }
 }
 
-@-o-keyframes spinner_request {
+@-o-keyframes spinner-request {
   0% {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
@@ -151,8 +151,8 @@
   height: 1em;
   overflow: hidden;
   text-indent: 100%;
-  position: relative;
-  left: 153px;
-  top: -27px;
+  position: absolute;
+  left: 125px;
+  margin-top: 7px;
 }