vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add progress bar to other parts of the config app

Browse source 
Hardcode active classes to modal step bars
This commit is contained in:
Sam Chow 2018-07-03 13:06:54 -04:00
parent 100d7eae81
commit ab4bfee019
18 changed files with 131 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

3
config_app/js/components/cor-floating-bottom-bar/cor-floating-bottom-bar.html Normal file
View file

@ -0,0 +1,3 @@
<div class="co-floating-bottom-bar">
<span ng-transclude/>
</div>

44
config_app/js/components/cor-floating-bottom-bar/cor-floating-bottom-bar.js Normal file
View file

@ -0,0 +1,44 @@
const templateUrl = require('./cor-floating-bottom-bar.html');
angular.module('quay-config')
.directive('corFloatingBottomBar', function() {
var directiveDefinitionObject = {
priority: 3,
templateUrl,
replace: true,
transclude: true,
restrict: 'C',
scope: {},
controller: function($rootScope, $scope, $element, $timeout, $interval) {
var handler = function() {
$element.removeClass('floating');
$element.css('width', $element[0].parentNode.clientWidth + 'px');
var windowHeight = $(window).height();
var rect = $element[0].getBoundingClientRect();
if (rect.bottom > windowHeight) {
$element.addClass('floating');
}
};
$(window).on("scroll", handler);
$(window).on("resize", handler);
var previousHeight = $element[0].parentNode.clientHeight;
var stop = $interval(function() {
var currentHeight = $element[0].parentNode.clientWidth;
if (previousHeight != currentHeight) {
currentHeight = previousHeight;
handler();
}
}, 100);
$scope.$on('$destroy', function() {
$(window).off("resize", handler);
$(window).off("scroll", handler);
$interval.cancel(stop);
});
}
};
return directiveDefinitionObject;
});

2
config_app/js/components/cor-progress/cor-progress-components.js
View file

@ -13,7 +13,7 @@ angular.module('quay-config')
transclude: true,
restrict: 'C',
scope: {
'progress': '=progress'
'progress': '=?progress'
},
controller: function($rootScope, $scope, $element) {
$scope.$watch('progress', function(progress) {

8
config_app/js/components/download-tarball-modal/download-tarball-modal.component.html
View file

@ -5,6 +5,14 @@
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<span class="cor-step-bar">
<span class="cor-step active" title="Configure Database" text="1"></span>
<span class="cor-step active" title="Setup Database" icon="database"></span>
<span class="cor-step active" title="Create Superuser" text="2"></span>
<span class="cor-step active" title="Configure Registry" text="3"></span>
<span class="cor-step active" title="Validate Configuration" text="4"></span>
<span class="cor-step active" title="Setup Complete" icon="download"></span>
</span>
<h4 class="modal-title"><span>Download Configuration</span></h4>
</div>
<!-- Body -->

4
config_app/js/components/download-tarball-modal/download-tarball-modal.css
View file

@ -5,7 +5,3 @@
.modal__warning-box {
margin-top: 15px;
}
.modal__warning-box .co-alert.co-alert-warning::before {
font-family:Font Awesome\ 5 Free;
}

8
config_app/js/components/load-config/load-config.html → config_app/js/components/load-config/load-config.component.html
View file

@ -5,6 +5,14 @@
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<span class="cor-step-bar">
<span class="cor-step active" title="Configure Database" text="1"></span>
<span class="cor-step" title="Setup Database" icon="database"></span>
<span class="cor-step" title="Create Superuser" text="2"></span>
<span class="cor-step" title="Configure Registry" text="3"></span>
<span class="cor-step" title="Validate Configuration" text="4"></span>
<span class="cor-step" title="Setup Complete" icon="download"></span>
</span>
<h4 class="modal-title"><span>Load Config</span></h4>
</div>
<!-- Body -->

14
config_app/js/components/load-config/load-config.component.ts
View file

@ -1,22 +1,22 @@
import {Component, EventEmitter, Inject, Output} from 'ng-metadata/core';
const templateUrl = require('./load-config.html');
const styleUrl = require('./load-config.css');
import {
Component,
EventEmitter,
Inject,
Output,
} from 'ng-metadata/core';
const templateUrl = require('./load-config.component.html');
declare var bootbox: any;
@Component({
selector: 'load-config',
templateUrl,
styleUrls: [ styleUrl ],
})
export class LoadConfigComponent {
private readyToSubmit: boolean = false;
private uploadFunc: Function;
@Output() public configLoaded: EventEmitter<any> = new EventEmitter();
private constructor(@Inject('ApiService') private apiService: any) {
}
private handleTarballSelected(files: File[], callback: Function) {
this.readyToSubmit = true;
callback(true)

0
config_app/js/components/load-config/load-config.css
View file

1
config_app/js/components/registry-name/registry-name.html Normal file
View file

@ -0,0 +1 @@
<span class="registry-name-element">{{ name }}</span>

22
config_app/js/components/registry-name/registry-name.js Normal file
View file

@ -0,0 +1,22 @@
const templateUrl = require('./registry-name.html');
/**
* An element which displays the name of the registry (optionally the short name).
*/
angular.module('quay-config').directive('registryName', function () {
var directiveDefinitionObject = {
priority: 0,
templateUrl,
replace: false,
transclude: true,
restrict: 'C',
scope: {
'isShort': '=isShort'
},
controller: function($scope, $element, Config) {
$scope.name = $scope.isShort ? Config.REGISTRY_TITLE_SHORT : Config.REGISTRY_TITLE;
}
};
return directiveDefinitionObject;
});