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

flow steps and complete content

parent c095fc9e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/frontend_client/app/components/icons/loading.html
+ 5
− 28
View file @ 2dc1523f
<svg id="loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" ng-attr-width="{{width}}" ng-attr-height="{height}}" fill="currentcolor">
<circle cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(45 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.125s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(90 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.25s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(135 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.375s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(225 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.625s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(270 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.75s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(315 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.875s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<circle transform="rotate(180 16 16)" cx="16" cy="3" r="0">
<animate attributeName="r" values="0;3;0;0" dur="1s" repeatCount="indefinite" begin="0.5s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
</circle>
<svg id="loading" viewBox="0 0 32 32" ng-attr-width="{{width}}" ng-attr-height="{height}}" fill="currentcolor">
<path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/>
<path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z">
<animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" />
</path>
</svg>
resources/frontend_client/app/css/core/flex.css
+ 4
− 1
View file @ 2dc1523f
......@@ -12,6 +12,10 @@
align-items: center;
}
.justify-center {
justify-content: center;
}
.align-start {
align-items: flex-start;
}
......@@ -19,4 +23,3 @@
.align-self-end {
align-self: flex-end;
}
resources/frontend_client/app/css/setup.css
+ 37
− 228
View file @ 2dc1523f
/*
.Setup {
background: #FBFCFD;
height: 100%:
}
.SetupNav {
font-size: 0.85em;
background: #fff;
color: #686868;
}
.SetupWrapper {
max-width: 80%;
margin: 0 auto;
}
.SetupIntro-heading {
color: var(--brand-color);
margin: 0;
}
.SetupIntro-subHeading {
margin: 0.45em 0 1em;
color: #989898;
font-size: 0.85em;
}
.SetupOffset {
margin-top: -2em;
}
.SetupStage {
border-top: 1px solid #E8E8E9;
}
.SetupFooter {
color: #DBDBDB;
font-size: 0.85em;
width: 100%;
position: absolute;
bottom: 0;
}
.SetupNav-item {
font-size: 1em;
display: inline-block;
text-decoration: none;
margin: 0 4em;
}
.SetupNav-item.complete {
color: #A8C28E;
}
.SetupNav-item a {
text-decoration: none;
}
.SetupSubNav {
background: #fff;
padding: 1em 0 2em;
border-bottom: 1px solid #ddd;
}
@media screen and (--breakpoint-min-xl) {
.SetupWrapper {
max-width: 100em;
}
}
.Connections {
margin-top: 2em;
}
.Connection-type {
border: 1px solid #ddd;
padding: 4em;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
background: #fff;
display: flex;
flex-direction: column;
text-decoration: none;
}
.Connection-icon {
text-align: center;
}
.Connection-type .Connection-engine {
text-align: center;
.WelcomeMessage {
margin-top: 4em;
margin-bottom: 4em;
}
.Connection-typeNew {
border-style: dashed;
.WelcomeMessage-title {
font-weight: 100;
font-size: 2.286em;
line-height: 2.786em;
}
.Connection-name {
.WelcomeMessage-subTitle {
font-size: 1.2em;
text-align: center;
color: var(--brand-color);
line-height: 1.4em;
}
.Connection-typeNew .Connection-name {
padding: 0;
.SetupSteps {
}
.Connection-type:hover {
background-color: var(--brand-color);
cursor: pointer;
color: #fff;
border-color: var(--brand-color);
box-shadow: 0 1px 3px rgba(0, 0, 0, .32);
transition: background .2s linear, border .2s linear, color .2s linear;
.SetupStep {
margin-top: 3em;
margin-bottom: 3em;
background-color: var(--alt-bg-color);
}
.Connection-type:hover .Connection-name {
color: #fff;
.SetupStep.SetupStep--active {
background-color: #fff;
}
.Connection-typeDisabled {
opacity: 0.4;
.SetupStep.SetupStep--completed {
color: var(--success-color);
}
.Connection-success {
color: #A8C28E;
border: 1px solid #A8C28E;
border-radius: 99px;
.SetupStep-indicator {
left: -1em;
width: 2em;
height: 2em;
float: right;
}
.Connection-input {
font-family: "Lato";
font-size: 0.85em;
display: block;
border: none;
padding: 0.5em 0;
border-bottom: 1px solid #ddd;
margin-bottom: 0.25em;
color: #222;
}
.Connection-input:focus {
outline: none;
border-bottom-color: var(--brand-color);
transition: border .3s linear;
}
@media screen and (--breakpoint-min-lg) {
.Connection-input {
font-size: 1.185em;
}
}
.Connection-label {
font-size: 0.75em;
color: #777;
opacity: 0;
}
*/
/* only show connection input labels that have focus */
/*
.Connection-input:focus + .Connection-label {
opacity: 1;
}
.Connection-label.Connection--error {
color: red;
opacity: 1;
}
.Connection-enginePicker {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid var(--border-color);
}
.Connection-enginePicker .Connection-engine {
display: inline-block;
padding: 1em 1em 1em 0;
margin-right: 1em;
border-radius: 99px;
font-size: 1em;
line-height: 1;
background-color: #fff;
}
.Connection-enginePicker .Connection-engine:hover {
cursor: pointer;
}
.SetupStep-title {
.Connection-engineSelected {
color: var(--brand-color);
}
.AdminContent {
border: 1px solid #D7D7D7;
background: #fff;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
max-width: 50em;
margin: 0 auto 4em;
}
.SetupStep-number {
.SetupBar {
background: #fff;
position: fixed;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid #ddd;
padding: 1em 0;
text-align: center;
}
.SetupBreadcrumbs {
font-size: 1.2em;
display: flex;
align-items: flex-start;
.SetupStep-check {
color: #fff;
display: none;
}
.SetupBreadcrumbs:last-child {
.SetupStep.SetupStep--active .SetupStep-indicator {
color: var(--brand-color);
}
.Breadcrumb-separator {
width: 1.4em;
height: 1.4em;
background: #fff;
border: 1px solid #ddd;
box-shadow: 0 1px 3px rgba(0, 0,0, .12);
border-radius: 99px;
display: flex;
}
.Breadcrumb {
text-decoration: none;
}
.SetupIntro {
max-width: 30rem;
font-size: 1rem;
.SetupStep.SetupStep--completed .SetupStep-indicator {
border-color: #9CC177;
background-color: currentColor;
}
*/
.WelcomeMessage {
margin-top: 4em;
margin-bottom: 4em;
}
.WelcomeMessage-title {
font-weight: 100;
font-size: 2.286em;
line-height: 2.786em;
.SetupStep.SetupStep--completed .SetupStep-check {
display: block;
}
.WelcomeMessage-subTitle {
font-size: 1.2em;
line-height: 1.4em;
.SetupStep.SetupStep--completed .SetupStep-number {
display: none;
}
resources/frontend_client/app/setup/partials/setup_info.html
+ 26
− 24
View file @ 2dc1523f
<style type="text/css">
.Setup--section {
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
padding: 10px;
border: 4px solid lightgray;
min-height: 50px;
}
.Setup--active {
border: 4px solid blue;
}
.Setup--completed {
border: 4px solid #9CC177;
}
</style>
<div class="wrapper">
<section class="Setup--section" ng-class="{ 'Setup--active' : activeStep == 'user', 'Setup--completed' : completedSteps.user }">
<h3>1. User</h3>
<div class="SetupSteps wrapper">
<section class="SetupStep bordered rounded shadowed relative" ng-class="{ 'SetupStep--active' : activeStep == 'user', 'SetupStep--completed' : completedSteps.user }">
<div>
<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>
</div>
<form class="Form-new" name="form" ng-submit="createOrgAndUser()" novalidate ng-if="activeStep == 'user'" novalidate>
<div class="Form-field" mb-form-field="first_name">
<mb-form-label display-name="First name" field-name="first_name"></mb-form-label>
......@@ -66,8 +55,14 @@
</div>
</section>
<section class="Setup--section" ng-class="{ 'Setup--active' : activeStep == 'database', 'Setup--completed' : completedSteps.database }">
<h3>2. Database</h3>
<section class="SetupStep bordered rounded shadowed relative" ng-class="{ 'SetupStep--active' : activeStep == 'database', 'SetupStep--completed' : completedSteps.database }">
<div>
<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>
</div>
<div ng-controller="DatabaseEdit" ng-if="activeStep == 'database'">
<form class="Form-new bordered rounded shadowed" name="form" novalidate>
<!-- Form -->
......@@ -84,7 +79,14 @@
</div>
</section>
<section class="Setup--section" ng-class="{ 'Setup--active' : activeStep == 'finish' }" >
<h3>3. Finish</h3>
<section class="SetupStep SetupStep--active bordered rounded shadowed flex layout-centered flex-column relative" 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>
<button class="Button Button--primary">Take me to my data</button>
</section>
</div>
resources/frontend_client/index.html
+ 3
− 15
View file @ 2dc1523f
......@@ -151,21 +151,9 @@
</nav>
<!-- SETUP NAV -->
<nav class="SetupNav" ng-show="nav === 'setup'">
<div class="SetupWrapper py4">
<span class="SetupOrg">
{{currentOrg.name}}
</span>
<span class="SetupUser float-right Dropdown" dropdown on-toggle="toggled(open)">
<div dropdown-toggle>
{{user.email}}
<cv-chevron-down-icon class="ml1" width="10px" height="10px"></cv-chevron-down-icon>
</div>
<ul class="Dropdown-content right">
<li class="" ><a class="link" href="/auth/logout">Logout</a></li>
</ul>
</span>
</div>
<nav class="SetupNav text-brand border-bottom py4 flex layout-centered" ng-show="nav === 'setup'">
<cv-logo-icon class="mr2" width="41" height="51"></cv-logo-icon>
metabase
</nav>
</div>
......
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