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

Create intial config setup modal

Browse source 
remove the registry title
This commit is contained in:
Sam Chow 2018-06-12 11:28:58 -04:00
parent e250f4ebe6
commit 690b7674e7
9 changed files with 121 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
config_app/js/components/config-setup-app/config-setup-app.component.html Normal file
View file

@ -0,0 +1,26 @@
<div ng-if="$ctrl.state === 'choice'">
<div class="co-dialog modal fade initial-setup-modal in" id="setupModal" style="display: block;">
<div class="modal-backdrop fade in" style="height: 1000px;"></div>
<div class="modal-dialog fade in">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h4 class="modal-title"><span>Choose an option</span></h4>
</div>
<!-- Body -->
<div class="config-setup-wrapper">
<a class="config-setup_option" ng-click="$ctrl.chooseSetup()">
<i class="fas fa-edit fa-2x"></i>
<div>Start New Registry Setup</div>
</a>
<a class="config-setup_option" ng-click="$ctrl.chooseLoad()">
<i class="fas fa-upload fa-2x"></i>
<div>Modify an existing configuration</div>
</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div>
<div ng-if="$ctrl.state === 'setup'" class="setup"></div>
<load-config ng-if="$ctrl.state === 'load'"></load-config>

25
config_app/js/components/config-setup-app/config-setup-app.component.ts Normal file
View file

@ -0,0 +1,25 @@
import { Input, Component, Inject } from 'ng-metadata/core';
const templateUrl = require('./config-setup-app.component.html');
/**
* Initial Screen and Choice in the Config App
*/
@Component({
selector: 'config-setup-app',
templateUrl: templateUrl,
})
export class ConfigSetupAppComponent {
private state: 'choice' | 'setup' | 'load';
constructor() {
this.state = 'choice';
}
private chooseSetup(): void {
this.state = 'setup';
}
private chooseLoad(): void {
this.state = 'load';
}
}

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

@ -0,0 +1,11 @@
import { Input, Component, Inject } from 'ng-metadata/core';
const templateUrl = require('./load-config.html');
@Component({
selector: 'load-config',
templateUrl,
})
export class LoadConfigComponent {
constructor() {
}
}

18
config_app/js/components/load-config/load-config.html Normal file
View file

@ -0,0 +1,18 @@
<div>
<div class="co-dialog modal fade initial-setup-modal in" id="setupModal" style="display: block;">
<div class="modal-backdrop fade in" style="height: 1000px;"></div>
<div class="modal-dialog fade in">
<div class="modal-content">
<!-- Header -->
<div class="modal-header">
<h4 class="modal-title"><span>Load Config</span></h4>
</div>
<!-- Body -->
<div>
Please upload a tarball
<input type="file" accept=".tar"></div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div>

8
config_app/js/config-app.module.ts
View file

@ -1,6 +1,9 @@
import { NgModule } from 'ng-metadata/core';
import * as restangular from 'restangular';
import { ConfigSetupAppComponent } from './components/config-setup-app/config-setup-app.component';
import { LoadConfigComponent } from './components/load-config/load-config.component';
const quayDependencies: string[] = [
'restangular',
'ngCookies',
@ -37,7 +40,10 @@ function provideConfig($provide: ng.auto.IProvideService,
@NgModule({
imports: [ DependencyConfig ],
declarations: [],
declarations: [
ConfigSetupAppComponent,
LoadConfigComponent,
],
providers: []
})
export class ConfigAppModule {}

4
config_app/js/main.ts
View file

@ -20,7 +20,6 @@ function requireAll(r) {
}
// load all services
// require('./services/api-service');
requireAll(require.context('./services', true, /\.js$/));
@ -29,6 +28,9 @@ requireAll(require.context('./setup', true, /\.js$/));
requireAll(require.context('./core-config-setup', true, /\.js$/));
requireAll(require.context('./components', true, /\.js$/));
// load config-app specific css
requireAll(require.context('../static/css', true, /\.css$/));
// Load all the main quay css
requireAll(require.context('../../static/css', true, /\.css$/));

10
config_app/js/setup/setup.html
View file

@ -1,7 +1,7 @@
<div>
<div>
<div class="cor-loader" ng-show="currentStep == States.LOADING"></div>
<div class="page-content" quay-show="Features.SUPER_USERS && currentStep == States.CONFIG">
<div class="page-content" ng-show="currentStep == States.CONFIG">
<div class="cor-title">
<span class="cor-title-link"></span>
<span class="cor-title-content">Quay Enterprise Setup</span>
@ -24,10 +24,8 @@
<div>Configure your Redis database and other settings below</div>
</div>
<!--<config-setup-tool is-active="isStep(currentStep, States.CONFIG)"-->
<!--configuration-saved="configurationSaved(config)"></config-setup-tool>-->
<div class="config-setup-tool" is-active="true"
configuration-saved="configurationSaved(config)"></div>
<config-setup-tool is-active="isStep(currentStep, States.CONFIG)"
configuration-saved="configurationSaved(config)"></config-setup-tool>
</div>
</div>
</div>
@ -48,7 +46,7 @@
<span class="cor-step" title="Container Restart" icon="refresh"></span>
<span class="cor-step" title="Setup Complete" icon="check"></span>
</span>
<h4 class="modal-title"><span><span class="registry-name" is-short="true"></span> Setup</h4>
<h4 class="modal-title">Setup</h4>
</div>
<form id="superuserForm" name="superuserForm" ng-submit="createSuperUser()">

24
config_app/static/css/config-setup-app-component.css Normal file
View file

@ -0,0 +1,24 @@
.config-setup-wrapper {
display: flex;
}
.config-setup_option {
font-size: x-large;
height: 250px;
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px;
margin: 15px;
}
.config-setup_option i {
padding-bottom: 10px;
}
.config-setup_option:hover {
background-color: #dddddd;
text-decoration: none;
}

13
config_app/templates/index.html
View file

@ -7,7 +7,7 @@
<!--REMOTE CSS-->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" integrity="sha384-DmABxgPhJN5jlTwituIyzIUk6oqyzf3+XuP7q3VfcWA2unxgim7OSSZKKf0KSsnh" crossorigin="anonymous">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" type="text/css">
<link rel="stylesheet" href="//s3.amazonaws.com/cdn.core-os.net/icons/core-icons.css" type="text/css">
@ -28,14 +28,7 @@
{% endfor %}
<title>Config app</title>
</head>
<body>
<div>
<p>What is my purpose</p>
<p>You make tarballs</p>
<div class="setup">
</div>
</div>
</div>
<body class="co-img-bg-network">
<config-setup-app></config-setup-app>
</body>
</html>