mirror of
https://github.com/caprover/caprover
synced 2026-09-24 23:55:36 +00:00
minor UI improvements:
- Boxed the building state on apps detail page - Made the loading spinner faster for building state - Split the deployment method into 3 in the UI so it's easier for the users
This commit is contained in:
Kasra Bigdeli
+7
-7
@@ -10,14 +10,14 @@
|
||||
white-space: pre-line;
|
||||
}
|
||||
.inline-loader {
|
||||
border: 3px solid #f3f3f3;
|
||||
border: 1px solid #f3f3f3;
|
||||
border-radius: 50%;
|
||||
border-top: 3px solid blue;
|
||||
border-bottom: 3px solid blue;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-animation: spin-loader 2s linear infinite;
|
||||
animation: spin-loader 2s linear infinite;
|
||||
border-top: 1px solid blue;
|
||||
border-bottom: 1px solid blue;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
-webkit-animation: spin-loader 0.8s linear infinite;
|
||||
animation: spin-loader 0.8s linear infinite;
|
||||
}
|
||||
@-webkit-keyframes spin-loader {
|
||||
0% {
|
||||
|
||||
Vendored
+119
-119
@@ -652,124 +652,6 @@ angular.module('RDash')
|
||||
}
|
||||
|
||||
});
|
||||
/**
|
||||
* File Upload Read Directive
|
||||
*/
|
||||
|
||||
angular
|
||||
.module('RDash')
|
||||
.directive("fileread", [function () {
|
||||
return {
|
||||
scope: {
|
||||
fileread: "="
|
||||
},
|
||||
link: function (scope, element, attributes) {
|
||||
element.bind("change", function (changeEvent) {
|
||||
scope.$apply(function () {
|
||||
scope.fileread = changeEvent.target.files[0];
|
||||
// or all selected files:
|
||||
// scope.fileread = changeEvent.target.files;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}]);
|
||||
/**
|
||||
* Loading Directive
|
||||
* @see http://tobiasahlin.com/spinkit/
|
||||
*/
|
||||
|
||||
angular
|
||||
.module('RDash')
|
||||
.directive('rdLoading', rdLoading);
|
||||
|
||||
function rdLoading() {
|
||||
var directive = {
|
||||
restrict: 'AE',
|
||||
template: '<div class="loading"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>'
|
||||
};
|
||||
return directive;
|
||||
};
|
||||
/**
|
||||
* Widget Body Directive
|
||||
*/
|
||||
|
||||
angular
|
||||
.module('RDash')
|
||||
.directive('rdWidgetBody', rdWidgetBody);
|
||||
|
||||
function rdWidgetBody() {
|
||||
var directive = {
|
||||
requires: '^rdWidget',
|
||||
scope: {
|
||||
loading: '=?',
|
||||
classes: '@?'
|
||||
},
|
||||
transclude: true,
|
||||
template: '<div class="widget-body" ng-class="classes"><rd-loading ng-show="loading"></rd-loading><div ng-hide="loading" class="widget-content" ng-transclude></div></div>',
|
||||
restrict: 'E'
|
||||
};
|
||||
return directive;
|
||||
};
|
||||
|
||||
/**
|
||||
* Widget Footer Directive
|
||||
*/
|
||||
|
||||
angular
|
||||
.module('RDash')
|
||||
.directive('rdWidgetFooter', rdWidgetFooter);
|
||||
|
||||
function rdWidgetFooter() {
|
||||
var directive = {
|
||||
requires: '^rdWidget',
|
||||
transclude: true,
|
||||
template: '<div class="widget-footer" ng-transclude></div>',
|
||||
restrict: 'E'
|
||||
};
|
||||
return directive;
|
||||
};
|
||||
/**
|
||||
* Widget Header Directive
|
||||
*/
|
||||
|
||||
angular
|
||||
.module('RDash')
|
||||
.directive('rdWidgetHeader', rdWidgetTitle);
|
||||
|
||||
function rdWidgetTitle() {
|
||||
var directive = {
|
||||
requires: '^rdWidget',
|
||||
scope: {
|
||||
title: '@',
|
||||
icon: '@'
|
||||
},
|
||||
transclude: true,
|
||||
template: '<div class="widget-header"><div class="row"><div class="pull-left"><i class="fa" ng-class="icon"></i> {{title}} </div><div class="pull-right col-xs-6 col-sm-4" ng-transclude></div></div></div>',
|
||||
restrict: 'E'
|
||||
};
|
||||
return directive;
|
||||
};
|
||||
/**
|
||||
* Widget Directive
|
||||
*/
|
||||
|
||||
angular
|
||||
.module('RDash')
|
||||
.directive('rdWidget', rdWidget);
|
||||
|
||||
function rdWidget() {
|
||||
var directive = {
|
||||
transclude: true,
|
||||
template: '<div class="widget" ng-transclude></div>',
|
||||
restrict: 'EA'
|
||||
};
|
||||
return directive;
|
||||
|
||||
function link(scope, element, attrs) {
|
||||
/* */
|
||||
}
|
||||
};
|
||||
/**
|
||||
* Alerts Controller
|
||||
*/
|
||||
@@ -1649,4 +1531,122 @@ function SettingsCtrl($scope, $cookieStore, $rootScope, pageDefinitions,
|
||||
|
||||
}());
|
||||
|
||||
}
|
||||
}
|
||||
/**
|
||||
* File Upload Read Directive
|
||||
*/
|
||||
|
||||
angular
|
||||
.module('RDash')
|
||||
.directive("fileread", [function () {
|
||||
return {
|
||||
scope: {
|
||||
fileread: "="
|
||||
},
|
||||
link: function (scope, element, attributes) {
|
||||
element.bind("change", function (changeEvent) {
|
||||
scope.$apply(function () {
|
||||
scope.fileread = changeEvent.target.files[0];
|
||||
// or all selected files:
|
||||
// scope.fileread = changeEvent.target.files;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}]);
|
||||
/**
|
||||
* Loading Directive
|
||||
* @see http://tobiasahlin.com/spinkit/
|
||||
*/
|
||||
|
||||
angular
|
||||
.module('RDash')
|
||||
.directive('rdLoading', rdLoading);
|
||||
|
||||
function rdLoading() {
|
||||
var directive = {
|
||||
restrict: 'AE',
|
||||
template: '<div class="loading"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>'
|
||||
};
|
||||
return directive;
|
||||
};
|
||||
/**
|
||||
* Widget Body Directive
|
||||
*/
|
||||
|
||||
angular
|
||||
.module('RDash')
|
||||
.directive('rdWidgetBody', rdWidgetBody);
|
||||
|
||||
function rdWidgetBody() {
|
||||
var directive = {
|
||||
requires: '^rdWidget',
|
||||
scope: {
|
||||
loading: '=?',
|
||||
classes: '@?'
|
||||
},
|
||||
transclude: true,
|
||||
template: '<div class="widget-body" ng-class="classes"><rd-loading ng-show="loading"></rd-loading><div ng-hide="loading" class="widget-content" ng-transclude></div></div>',
|
||||
restrict: 'E'
|
||||
};
|
||||
return directive;
|
||||
};
|
||||
|
||||
/**
|
||||
* Widget Footer Directive
|
||||
*/
|
||||
|
||||
angular
|
||||
.module('RDash')
|
||||
.directive('rdWidgetFooter', rdWidgetFooter);
|
||||
|
||||
function rdWidgetFooter() {
|
||||
var directive = {
|
||||
requires: '^rdWidget',
|
||||
transclude: true,
|
||||
template: '<div class="widget-footer" ng-transclude></div>',
|
||||
restrict: 'E'
|
||||
};
|
||||
return directive;
|
||||
};
|
||||
/**
|
||||
* Widget Header Directive
|
||||
*/
|
||||
|
||||
angular
|
||||
.module('RDash')
|
||||
.directive('rdWidgetHeader', rdWidgetTitle);
|
||||
|
||||
function rdWidgetTitle() {
|
||||
var directive = {
|
||||
requires: '^rdWidget',
|
||||
scope: {
|
||||
title: '@',
|
||||
icon: '@'
|
||||
},
|
||||
transclude: true,
|
||||
template: '<div class="widget-header"><div class="row"><div class="pull-left"><i class="fa" ng-class="icon"></i> {{title}} </div><div class="pull-right col-xs-6 col-sm-4" ng-transclude></div></div></div>',
|
||||
restrict: 'E'
|
||||
};
|
||||
return directive;
|
||||
};
|
||||
/**
|
||||
* Widget Directive
|
||||
*/
|
||||
|
||||
angular
|
||||
.module('RDash')
|
||||
.directive('rdWidget', rdWidget);
|
||||
|
||||
function rdWidget() {
|
||||
var directive = {
|
||||
transclude: true,
|
||||
template: '<div class="widget" ng-transclude></div>',
|
||||
restrict: 'EA'
|
||||
};
|
||||
return directive;
|
||||
|
||||
function link(scope, element, attrs) {
|
||||
/* */
|
||||
}
|
||||
};
|
||||
Vendored
+34
-13
@@ -215,8 +215,22 @@
|
||||
<b>Deployed at</b> {{app.deployedTimeStamp}}
|
||||
<br>
|
||||
</p>
|
||||
<p>You can deploy your app using the Captain command line tool (recommended) or via this web interface. No matter
|
||||
what approach you choose, you need to provide 'captain-definition' file. See docs for more details.</p>
|
||||
<p>Make sure that you have a 'captain-definition' file in your project. See
|
||||
<a href="https://github.com/githubsaturn/captainduckduck/wiki/Captain-Definition-File" target="_blank">docs</a> for more details.</p>
|
||||
<h5>
|
||||
<b> Method 1 (RECOMMENDED)</b>
|
||||
</h5>
|
||||
<p>Use CLI deploy command. This is the best method as it's the only method that reports potential build failures
|
||||
to you.
|
||||
<a href="https://github.com/githubsaturn/captainduckduck/wiki/Getting-Started#step-4-deploy-the-test-app" target="_blank">Read here</a>
|
||||
</p>
|
||||
<h5>
|
||||
<b> Method 2: Tarball</b>
|
||||
</h5>
|
||||
<p>
|
||||
You can simiply create a tarball (
|
||||
<code>.tar</code>) of your project and upload it here via upload button.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
|
||||
@@ -237,11 +251,13 @@
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<h4>
|
||||
Deploy from Github/Bitbucket
|
||||
</h4>
|
||||
<h5>
|
||||
<b>
|
||||
Method 3: Deploy from Github/Bitbucket</b>
|
||||
</h5>
|
||||
<p>
|
||||
POST Webhook:
|
||||
Enter your repository information in the form and save. Then copy the URL in the box as a webhook on Github, Bitbuck and
|
||||
etc. Once you push a commit, CaptainDuckDuck starts a new build.
|
||||
<br>
|
||||
<pre>{{app.appPushWebhook.pushWebhookToken?(rootDomainWithProtocol+'/api/v1/user/webhooks/triggerbuild?namespace=captain&token='+app.appPushWebhook.pushWebhookToken):
|
||||
'** Add repo info and save for this webhook to appear **'}}</pre>
|
||||
@@ -277,13 +293,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-show="app.isAppBuilding">
|
||||
<div class="pull-left">
|
||||
<div class="inline-loader"></div>
|
||||
</div>
|
||||
<div style="margin-left: 15px" class="pull-left">
|
||||
Building the image. This might take a few minutes...
|
||||
</div>
|
||||
<div class="row alerts-container" ng-show="app.isAppBuilding">
|
||||
<hr>
|
||||
<uib-alert type="info">
|
||||
<div style="padding-left: 20px; padding-top: 10px" class="row">
|
||||
<div class="pull-left">
|
||||
<div class="inline-loader"></div>
|
||||
</div>
|
||||
<div style="margin-left: 15px" class="pull-left">
|
||||
Building the image. This might take a few minutes...
|
||||
</div>
|
||||
</div>
|
||||
</uib-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,14 +13,14 @@
|
||||
}
|
||||
|
||||
.inline-loader {
|
||||
border: 3px solid #f3f3f3;
|
||||
border: 1px solid #f3f3f3;
|
||||
border-radius: 50%;
|
||||
border-top: 3px solid blue;
|
||||
border-bottom: 3px solid blue;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
-webkit-animation: spin-loader 2s linear infinite;
|
||||
animation: spin-loader 2s linear infinite;
|
||||
border-top: 1px solid blue;
|
||||
border-bottom: 1px solid blue;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
-webkit-animation: spin-loader 0.8s linear infinite;
|
||||
animation: spin-loader 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin-loader {
|
||||
|
||||
@@ -216,8 +216,22 @@
|
||||
<b>Deployed at</b> {{app.deployedTimeStamp}}
|
||||
<br/>
|
||||
</p>
|
||||
<p>You can deploy your app using the Captain command line tool (recommended) or via this web interface. No matter
|
||||
what approach you choose, you need to provide 'captain-definition' file. See docs for more details.</p>
|
||||
<p>Make sure that you have a 'captain-definition' file in your project. See
|
||||
<a href="https://github.com/githubsaturn/captainduckduck/wiki/Captain-Definition-File" target="_blank">docs</a> for more details.</p>
|
||||
<h5>
|
||||
<b> Method 1 (RECOMMENDED)</b>
|
||||
</h5>
|
||||
<p>Use CLI deploy command. This is the best method as it's the only method that reports potential build failures
|
||||
to you.
|
||||
<a href="https://github.com/githubsaturn/captainduckduck/wiki/Getting-Started#step-4-deploy-the-test-app" target="_blank">Read here</a>
|
||||
</p>
|
||||
<h5>
|
||||
<b> Method 2: Tarball</b>
|
||||
</h5>
|
||||
<p>
|
||||
You can simiply create a tarball (
|
||||
<code>.tar</code>) of your project and upload it here via upload button.
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
|
||||
@@ -238,11 +252,13 @@
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<h4>
|
||||
Deploy from Github/Bitbucket
|
||||
</h4>
|
||||
<h5>
|
||||
<b>
|
||||
Method 3: Deploy from Github/Bitbucket</b>
|
||||
</h5>
|
||||
<p>
|
||||
POST Webhook:
|
||||
Enter your repository information in the form and save. Then copy the URL in the box as a webhook on Github, Bitbuck and
|
||||
etc. Once you push a commit, CaptainDuckDuck starts a new build.
|
||||
<br>
|
||||
<pre>{{app.appPushWebhook.pushWebhookToken?(rootDomainWithProtocol+'/api/v1/user/webhooks/triggerbuild?namespace=captain&token='+app.appPushWebhook.pushWebhookToken):
|
||||
'** Add repo info and save for this webhook to appear **'}}</pre>
|
||||
@@ -278,13 +294,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" ng-show="app.isAppBuilding">
|
||||
<div class="pull-left">
|
||||
<div class="inline-loader"></div>
|
||||
</div>
|
||||
<div style="margin-left: 15px;" class="pull-left">
|
||||
Building the image. This might take a few minutes...
|
||||
</div>
|
||||
<div class="row alerts-container" ng-show="app.isAppBuilding">
|
||||
<hr/>
|
||||
<uib-alert type="info">
|
||||
<div style="padding-left: 20px; padding-top: 10px;" class="row">
|
||||
<div class="pull-left">
|
||||
<div class="inline-loader"></div>
|
||||
</div>
|
||||
<div style="margin-left: 15px;" class="pull-left">
|
||||
Building the image. This might take a few minutes...
|
||||
</div>
|
||||
</div>
|
||||
</uib-alert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user