Skip to content
Snippets Groups Projects
Commit 2e105541 authored by Kyle Doherty's avatar Kyle Doherty
Browse files

db engine and text changes

parent a80dccbc
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/frontend_client/app/admin/databases/partials/database_edit_forms.html
+ 9
− 5
View file @ 2e105541
......@@ -2,16 +2,20 @@
<!-- DB Engine (database.engine) -->
<div class="Form-field" mb-form-field="engine">
<mb-form-label display-name="Database type" field-name="engine"></mb-form-label>
<ul ng-show="!database.engine">
<li ng-repeat="(type, properties) in ENGINES">
<ul class="Form-offset full mt2" ng-show="!database.engine">
<li class="DatabaseEngine" ng-repeat="(type, properties) in ENGINES">
<cv-check-icon class="DatabaseEngine-check" width="16px" height="16px"></cv-check-icon>
<div ng-click="database.engine = type">
{{properties.name}}
</div>
</li>
</ul>
<div ng-show="database.engine">
<h3>{{database.engine}}</h3>
<button ng-click="database.engine = null">x</button>
<div class="Form-offset mr4" ng-show="database.engine">
<div class="DatabaseEngine DatabaseEngine--selected flex align-center">
<cv-check-icon class="DatabaseEngine-check" width="16px" height="16px"></cv-check-icon>
<span class="flex-full">{{database.engine}}</span>
<cv-close-icon width="16px" height="16px" ng-click="database.engine = null"></cv-close-icon>
</div>
</div>
</div>
......
resources/frontend_client/app/css/core/layout.css
+ 4
− 0
View file @ 2e105541
......@@ -7,6 +7,8 @@
.wrapper {
width: 100%;
margin: 0 auto;
padding-left: 1em;
padding-right: 1em;
}
@media screen and (--breakpoint-min-sm) {
......@@ -18,6 +20,8 @@
@media screen and (--breakpoint-min-md) {
.wrapper {
max-width: var(--md-width);
padding-left: 0;
padding-right: 0;
}
}
......
resources/frontend_client/app/css/setup.css
+ 53
− 1
View file @ 2e105541
......@@ -36,15 +36,19 @@
transition: background .3s linear;
transition: background .3s linear;
flex: 1;
border: 1px dashed #e8e8e8;
}
.SetupStep.SetupStep--active {
background-color: #fff;
border-style: solid;
color: var(--brand-color);
}
.SetupStep.SetupStep--completed {
color: var(--success-color);
background-color: #fff;
border-style: solid;
}
.SetupStep-indicator {
......@@ -62,13 +66,17 @@
display: none;
}
.SetupStep-title {
color: currentColor; /* use the color of the parent to power the header text */
}
.SetupStep.SetupStep--active .SetupStep-indicator {
color: var(--brand-color);
}
.SetupStep.SetupStep--completed .SetupStep-indicator {
border-color: #9CC177;
background-color: currentColor;
background-color: #C8E1B0;
}
.SetupStep.SetupStep--completed .SetupStep-check {
......@@ -78,3 +86,47 @@
.SetupStep.SetupStep--completed .SetupStep-number {
display: none;
}
.SetupCompleted {
text-align: center;
}
.DatabaseEngine {
position: relative;
font-size: 1.137em;
padding-top: 0.875em;
padding-bottom: 0.875em;
padding-left: 3em;
line-height: 2em;
}
.DatabaseEngine:hover {
color: var(--brand-color);
cursor: pointer;
}
.DatabaseEngine:before {
position: absolute;
left: 0;
content: '';
display: inline-block;
width: 2em;
height: 2em;
border-radius: 99px;
border: 1px solid currentColor;
}
.DatabaseEngine-check {
display: none;
position: absolute;
left: 0.6em;
top: 1em;
}
.DatabaseEngine:hover .DatabaseEngine-check {
display: block;
}
.DatabaseEngine.DatabaseEngine--selected .DatabaseEngine-check {
display: block;
}
resources/frontend_client/app/setup/partials/setup_info.html
+ 10
− 12
View file @ 2e105541
......@@ -5,16 +5,16 @@
</nav>
<div class="wrapper flex flex-column layout-centered wrapper wrapper-max-sm">
<div class="SetupSteps">
<section class="SetupStep bordered rounded full relative" ng-class="{ 'SetupStep--active shadowed' : activeStep == 'user', 'SetupStep--completed shadowed' : completedSteps.user }">
<div class="flex align-center py4" ng-click="activeStep = 'user'">
<div class="SetupSteps full">
<section class="SetupStep rounded full relative" ng-class="{ 'SetupStep--active shadowed' : activeStep == 'user', 'SetupStep--completed shadowed' : completedSteps.user }">
<div class="flex align-center py3" ng-click="activeStep = 'user'">
<span class="SetupStep-indicator flex layout-centered absolute bordered">
<span class="SetupStep-number">1</span>
<cv-check-icon class="SetupStep-check" width="16px" height="16px"></cv-check-icon>
</span>
<h3 class="SetupStep-title ml4 text-brand">What should we call you?</h3>
<h3 class="SetupStep-title ml4">{{userStepText}}</h3>
</div>
<form class="Form-new" name="form" ng-submit="createOrgAndUser()" novalidate ng-if="activeStep == 'user'" novalidate>
<form name="form" ng-submit="createOrgAndUser()" novalidate ng-if="activeStep == 'user'" novalidate>
<div class="Form-field Grid" mb-form-field="first_name">
<div>
<mb-form-label display-name="First name" field-name="first_name"></mb-form-label>
......@@ -63,16 +63,16 @@
</div>
</section>
<section class="SetupStep bordered border-dashed rounded full relative" ng-class="{ 'SetupStep--active shadowed' : activeStep == 'database', 'SetupStep--completed shadowed' : completedSteps.database }">
<div class="flex align-center py4">
<section class="SetupStep rounded full relative" ng-class="{ 'SetupStep--active shadowed' : activeStep == 'database', 'SetupStep--completed shadowed' : completedSteps.database }">
<div class="flex align-center py3">
<span class="SetupStep-indicator flex layout-centered absolute bordered">
<span class="SetupStep-number">2</span>
<cv-check-icon class="SetupStep-check" width="16px" height="16px"></cv-check-icon>
</span>
<h3 class="ml4 text-brand">Add your first database</h3>
<h3 class="SetupStep-title ml4">{{databaseStepText}}</h3>
</div>
<div ng-controller="DatabaseEdit" ng-if="activeStep == 'database'">
<form class="Form-new bordered rounded shadowed" name="form" novalidate>
<form name="form" novalidate>
<!-- Form -->
<div ng-include="'/app/admin/databases/partials/database_edit_forms.html'"></div>
......@@ -87,14 +87,12 @@
</div>
</section>
<section class="SetupStep SetupStep--active bordered rounded shadowed flex layout-centered flex-column relative" ng-if="activeStep == 'finish'">
<section class="SetupCompleted SetupStep SetupStep--active bordered rounded shadowed relative p4" ng-if="activeStep == 'finish'">
<h3 class="text-brand">You're all set!</h3>
<div class="bordered rounded p2 text-brand flex justify-center">
<cv-loading-icon class="inline-block mr2"></cv-loading-icon>
Importing data and doing a bit of science.
</div>
<p class="text-body">(This may take a little while depending on the size of your data, but you can start exploring any data we’ve finished importing right away.)</p>
<a class="Button Button--primary" href="/">Take me to my data</a>
</section>
</div>
......
resources/frontend_client/app/setup/setup.controllers.js
+ 15
− 3
View file @ 2e105541
......@@ -16,20 +16,32 @@ SetupControllers.controller('SetupInit', ['$scope', '$location', '$routeParams',
SetupControllers.controller('SetupInfo', ['$scope', '$routeParams', '$location', '$timeout', 'ipCookie', 'Organization', 'User', 'AppState', 'Setup', 'Metabase', 'CorvusCore',
function($scope, $routeParams, $location, $timeout, ipCookie, Organization, User, AppState, Setup, Metabase, CorvusCore) {
$scope.activeStep = "user";
$scope.activeStep = "database";
$scope.completedSteps = {
user: false,
database: false
};
$scope.userStepText = 'What should we call you?';
$scope.databaseStepText = 'Add your first database';
// if we have a user, make the welcome text more welcomeing
if($scope.completedSteps.user) {
$scope.userStepText = 'Welcome ' + AppState.model.currentUser.first_name + ', nice to meet you!';
}
if($scope.completedSteps.database) {
$scope.databaseStepText = 'Connected to your data.'
}
// redirect back to home if the user has already set up the product,
// indicated by the presence of a currentUser
if (AppState.model.currentUser) {
$location.path('/');
}
$scope.newUser = {};
$scope.$on("database:created", function(event, database) {
$timeout(function() {
$scope.activeStep = "finish";
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment