Add cor progress bar

config_app/js/components/cor-progress/cor-progress-bar.html

@@ -0,0 +1,4 @@
+<div class="cor-progress-bar-element progress">
+    <div class="progress-bar" ng-style="{'width': (progress * 100) + '%'}"
+         aria-valuenow="{{ (progress * 100) }}" aria-valuemin="0" aria-valuemax="100"></div>
+</div>

config_app/js/components/cor-progress/cor-progress-components.js

@@ -0,0 +1,74 @@
+
+
+const corStepBarUrl = require('./cor-step-bar.html');
+const corStepUrl = require('./cor-step.html');
+const corProgressBarUrl = require('./cor-progress-bar.html');
+
+angular.module('quay-config')
+    .directive('corStepBar', () => {
+        const directiveDefinitionObject = {
+            priority: 4,
+            templateUrl: corStepBarUrl,
+            replace: true,
+            transclude: true,
+            restrict: 'C',
+            scope: {
+                'progress': '=progress'
+            },
+            controller: function($rootScope, $scope, $element) {
+                $scope.$watch('progress', function(progress) {
+                    if (!progress) { return; }
+
+                    var index = 0;
+                    for (var i = 0; i < progress.length; ++i) {
+                        if (progress[i]) {
+                            index = i;
+                        }
+                    }
+
+                    $element.find('.transclude').children('.co-step-element').each(function(i, elem) {
+                        $(elem).removeClass('active');
+                        if (i <= index) {
+                            $(elem).addClass('active');
+                        }
+                    });
+                });
+            }
+        };
+        return directiveDefinitionObject;
+    })
+
+    .directive('corStep', function() {
+        var directiveDefinitionObject = {
+            priority: 4,
+            templateUrl: corStepUrl,
+            replace: true,
+            transclude: false,
+            requires: '^corStepBar',
+            restrict: 'C',
+            scope: {
+                'icon': '@icon',
+                'title': '@title',
+                'text': '@text'
+            },
+            controller: function($rootScope, $scope, $element) {
+            }
+        };
+        return directiveDefinitionObject;
+    })
+
+    .directive('corProgressBar', function() {
+        var directiveDefinitionObject = {
+            priority: 4,
+            templateUrl: corProgressBarUrl,
+            replace: true,
+            transclude: true,
+            restrict: 'C',
+            scope: {
+                'progress': '=progress'
+            },
+            controller: function($rootScope, $scope, $element) {
+            }
+        };
+        return directiveDefinitionObject;
+    });

config_app/js/components/cor-progress/cor-step-bar.html

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

config_app/js/components/cor-progress/cor-step.html

@@ -0,0 +1,6 @@
+<span ng-class="text ? 'co-step-element text' : 'co-step-element icon'">
+  <span data-title="{{ title }}" bs-tooltip>
+      <span class="text" ng-if="text">{{ text }}</span>
+      <i class="fa fa-lg" ng-if="icon" ng-class="'fa-' + icon"></i>
+  </span>
+</span>

config_app/js/components/file-upload-box.html

@@ -0,0 +1,46 @@
+<div class="file-upload-box-element">
+  <div class="file-input-container">
+    <div ng-show="state != 'uploading'">
+      <form id="file-drop-form-{{ boxId }}">
+        <input id="file-drop-{{ boxId }}" name="file-drop-{{ boxId }}" class="file-drop"
+               type="file" files-changed="handleFilesChanged(files)"
+               accept="{{ getAccepts(extensions) }}">
+        <label for="file-drop-{{ boxId }}" ng-class="state">
+          <span class="chosen-file">
+            <span ng-if="selectedFiles.length">
+              {{ selectedFiles[0].name }}
+              <span ng-if="selectedFiles.length > 1">
+                and {{ selectedFiles.length - 1 }} others...
+              </span>
+            </span>
+          </span><span class="choose-button">
+            <span>Select file</span>
+          </span>
+        </label>
+      </form>
+    </div>
+
+    <div class="cor-loader-line" ng-if="state == 'checking'"></div>
+
+    <div class="status-message" ng-if="state == 'uploading'">
+      <div class="progress progress-striped active">
+        <div class="progress-bar"  role="progressbar"
+             aria-valuenow="{{ uploadProgress }}" aria-valuemin="0" aria-valuemax="100"
+             style="{{ 'width: ' + uploadProgress + '%' }}">
+        </div>
+      </div>
+
+      Uploading file {{ currentlyUploadingFile.name }}...
+    </div>
+
+    <div class="select-message" ng-if="state == 'clear'">{{ selectMessage }}</div>
+    <div class="status-message error-message" ng-if="state == 'error'">
+      <i class="fa fa-times-circle"></i>
+      {{ message }}
+    </div>
+    <div class="status-message okay-message" ng-if="state == 'okay'">
+      <i class="fa fa-check-circle"></i>
+      {{ message }}
+    </div>
+  </div>
+</div>

config_app/js/components/file-upload-box.js

@@ -1,10 +1,11 @@
+const templateUrl = require('./file-upload-box.html');
 /**
  * An element which adds a stylize box for uploading a file.
  */
 angular.module('quay-config').directive('fileUploadBox', function () {
   var directiveDefinitionObject = {
     priority: 0,
-    templateUrl: '/static/directives/file-upload-box.html',
+    templateUrl,
     replace: false,
     transclude: true,
     restrict: 'C',

config_app/js/main.ts

@@ -1,8 +1,6 @@
 // imports shims, etc
 import 'core-js';
 
-import '../static/css/core-ui.css';
-
 import * as angular from 'angular';
 import { ConfigAppModule } from './config-app.module';
 import { bundle } from 'ng-metadata/core';
@@ -29,5 +27,9 @@ requireAll(require.context('./services', true, /\.js$/));
 // load all the components after services
 requireAll(require.context('./setup', true, /\.js$/));
 requireAll(require.context('./core-config-setup', true, /\.js$/));
+requireAll(require.context('./components', true, /\.js$/));
 
 
+// Load all the main quay css
+requireAll(require.context('../../static/css', true, /\.css$/));
+requireAll(require.context('../../static/lib', true, /\.css$/));

config_app/js/setup/setup.component.js

@@ -196,7 +196,6 @@ const templateUrl = require('./setup.html');
         };
 
         $scope.isStep = function(step) {
-            console.log('current step is', step);
             for (var i = 1; i < arguments.length; ++i) {
                 if (arguments[i] == step) {
                     return true;

config_app/webpack.config.js

@@ -14,6 +14,7 @@ let config = {
     modules: [
       // Allows us to use the top-level node modules
       path.resolve(__dirname, '../node_modules'),
+        path.resolve(__dirname, '../static/css/')
     ]
   },
   externals: {