navigation between steps
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<button class="ui-button" :class="buttonClass">
|
||||
<button class="ui-button" :class="buttonClass" @click="click">
|
||||
<span v-html="label"></span>
|
||||
<i v-if="caret" :class="caretClass"></i>
|
||||
</button>
|
||||
@@ -28,11 +28,15 @@
|
||||
type: String,
|
||||
default: 'right'
|
||||
},
|
||||
disabled: Boolean
|
||||
disabled: Boolean,
|
||||
click: {
|
||||
type: Function,
|
||||
default: () => { }
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
buttonClass() { return 'type-' + this.type + ' caret-' + this.caretPosition; },
|
||||
buttonClass() { return 'type-' + this.type.split(' ').join(' type-') + ' caret-' + this.caretPosition; },
|
||||
caretClass() { return 'fth-chevron-' + this.caret; }
|
||||
},
|
||||
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
:root
|
||||
{
|
||||
// accent colors
|
||||
--color-primary: #222;
|
||||
--color-primary: #00aea2;
|
||||
--color-secondary: #2f3a43;
|
||||
--color-negative: #d82853;
|
||||
|
||||
// foreground/text color
|
||||
|
||||
@@ -21,7 +21,7 @@ button
|
||||
height: 40px;
|
||||
border-radius: 3px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-webkit-appearance: none;
|
||||
@@ -61,6 +61,12 @@ button
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
&.type-big
|
||||
{
|
||||
height: 50px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
& + .ui-button
|
||||
{
|
||||
margin-left: 10px;
|
||||
|
||||
@@ -19,7 +19,7 @@ html
|
||||
body
|
||||
{
|
||||
min-height: 100%;
|
||||
background: var(--color-fg);
|
||||
background: var(--color-secondary);
|
||||
color: var(--color-text);
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
@@ -45,14 +45,14 @@ body
|
||||
min-height: 600px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 2rem;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
body:before
|
||||
{
|
||||
content: 'setup';
|
||||
@extend %font-headline;
|
||||
color: #252525;
|
||||
color: rgba(black, 0.05);
|
||||
position: fixed;
|
||||
left: -10vw;
|
||||
bottom: -30vh;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<p>With zero you can manage multiple applications with one installation. Start by adding your first application.</p>
|
||||
|
||||
<ui-property label="Application name" :vertical="true">
|
||||
<input v-model="value" type="text" class="ui-input" maxlength="40" placeholder="Enter name" />
|
||||
<input v-model="value.AppName" type="text" class="ui-input" maxlength="40" placeholder="Enter name" />
|
||||
</ui-property>
|
||||
</div>
|
||||
</template>
|
||||
@@ -18,7 +18,7 @@
|
||||
name: 'setupStepApplication',
|
||||
|
||||
props: {
|
||||
value: String
|
||||
value: Object
|
||||
},
|
||||
|
||||
components: { UiProperty, UiButton },
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
<p>Zero uses <b>RavenDB</b> as it’s database. If you want a more sophisticated setup (i.e. cluster) you can override the IDocumentStore service which is registered as a singleton.</p>
|
||||
|
||||
<ui-property label="Instance URL" :vertical="true">
|
||||
<input v-model="value.Url" type="text" class="ui-input" placeholder="Enter URL to the database" />
|
||||
<input v-model="value.Database.Url" type="text" class="ui-input" placeholder="Enter URL to the database" />
|
||||
</ui-property>
|
||||
|
||||
<ui-property label="Database name" :vertical="true">
|
||||
<input v-model="value.Name" type="text" class="ui-input" placeholder="Name of the database" />
|
||||
<input v-model="value.Database.Name" type="text" class="ui-input" placeholder="Name of the database" />
|
||||
</ui-property>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="setup-step setup-step-finish">
|
||||
<div class="setup-step-finish-inner">
|
||||
<img src="/Icons/bird.svg" class="bird" alt="bird" width="100" />
|
||||
<h2>You are done!</h2>
|
||||
</div>
|
||||
<ui-button label="Continue to zero" type="big" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import UiButton from 'zerocomponents/buttons/button.vue'
|
||||
|
||||
export default {
|
||||
name: 'setupStepFinish',
|
||||
|
||||
components: { UiButton },
|
||||
|
||||
mounted ()
|
||||
{
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.setup-step-finish
|
||||
{
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
.bird
|
||||
{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="setup-step setup-step-install">
|
||||
<div class="setup-step-finish-inner">
|
||||
<img src="/Icons/bird.svg" class="bird" alt="bird" width="100" />
|
||||
<h2>Installing</h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import UiButton from 'zerocomponents/buttons/button.vue'
|
||||
|
||||
export default {
|
||||
name: 'setupStepInstall',
|
||||
|
||||
components: { UiButton },
|
||||
|
||||
mounted ()
|
||||
{
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.setup-step-install
|
||||
{
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
.bird
|
||||
{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -4,15 +4,15 @@
|
||||
<p>First we need some basic credentials from you to create a login. This login is the solely <b>superadmin</b> which is required to change critical application data.</p>
|
||||
|
||||
<ui-property label="Name" :vertical="true">
|
||||
<input type="text" class="ui-input" maxlength="40" placeholder="What's your name?" />
|
||||
<input v-model="value.User.Name" type="text" class="ui-input" maxlength="40" placeholder="What's your name?" />
|
||||
</ui-property>
|
||||
|
||||
<ui-property label="Email" :vertical="true">
|
||||
<input type="text" class="ui-input" placeholder="Your email will be used as your login" />
|
||||
<input v-model="value.User.Email" type="text" class="ui-input" placeholder="Your email will be used as your login" />
|
||||
</ui-property>
|
||||
|
||||
<ui-property label="Password" :vertical="true">
|
||||
<input type="password" class="ui-input" autocomplete="off" maxlength="1024" placeholder="As long as you want but at last 8 characters" />
|
||||
<input v-model="value.User.Password" type="password" class="ui-input" autocomplete="off" maxlength="1024" placeholder="As long as you want but at last 8 characters" />
|
||||
</ui-property>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+31
-13
@@ -1,28 +1,31 @@
|
||||
<template>
|
||||
<div class="app setup">
|
||||
<step-database v-model="model.Database" />
|
||||
<div class="setup-buttons">
|
||||
<ui-button type="outline" label="Go back" caret="left" caret-position="left" />
|
||||
<ui-button label="Next" />
|
||||
<component v-bind:is="steps[step]" v-model="model" />
|
||||
<div class="setup-buttons" v-if="step < 3">
|
||||
<ui-button v-if="step > 0" type="outline" label="Go back" :click="prev" caret="left" caret-position="left" />
|
||||
<ui-button label="Next" :click="next" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import Sass from '../Sass/setup.scss'
|
||||
import UiButton from 'zerocomponents/buttons/button.vue'
|
||||
import StepUser from './Steps/step-user.vue'
|
||||
import StepApplication from './Steps/step-application.vue'
|
||||
import StepDatabase from './Steps/step-database.vue'
|
||||
import StepInstall from './Steps/step-install.vue'
|
||||
import StepFinish from './Steps/step-finish.vue'
|
||||
|
||||
export default {
|
||||
name: 'setup',
|
||||
|
||||
components: { UiButton, StepUser, StepApplication, StepDatabase },
|
||||
components: { UiButton, StepUser, StepApplication, StepDatabase, StepInstall, StepFinish },
|
||||
|
||||
data: () => ({
|
||||
step: 3,
|
||||
steps: [ 'step-user', 'step-application', 'step-database', 'step-install', 'step-finish' ],
|
||||
model: {
|
||||
AppName: null,
|
||||
Part: null,
|
||||
@@ -38,13 +41,28 @@
|
||||
}
|
||||
}),
|
||||
|
||||
mounted ()
|
||||
mounted()
|
||||
{
|
||||
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
next()
|
||||
{
|
||||
if (this.step + 1 >= this.steps.length)
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
this.step += 1;
|
||||
},
|
||||
|
||||
prev()
|
||||
{
|
||||
this.step -= 1;
|
||||
},
|
||||
|
||||
save()
|
||||
{
|
||||
|
||||
@@ -59,19 +77,19 @@
|
||||
<style lang="scss">
|
||||
.setup
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.setup-step
|
||||
{
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.setup-step h2
|
||||
{
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
|
||||
<path d="M60.594,16.81c0,0.984-0.798,1.783-1.783,1.783s-1.783-0.798-1.783-1.783s0.798-1.783,1.783-1.783 S60.594,15.825,60.594,16.81z M78.7,77.146L78.7,77.146c5.511-0.809,9.159-5.267,9.31-5.456l0.791-0.982l-1.065-0.675 c-0.213-0.135-5.262-3.286-10.453-2.525c-5.976,0.878-9.216,5.318-9.351,5.507l-0.689,0.963l0.997,0.639 c0.188,0.121,4.187,2.65,8.771,2.65C77.566,77.267,78.131,77.23,78.7,77.146z M77.61,69.735c2.989-0.435,6.044,0.745,7.692,1.541 c-1.289,1.221-3.789,3.182-6.93,3.643l0,0c-3.046,0.447-6.134-0.767-7.755-1.564C71.799,72.163,74.181,70.239,77.61,69.735z M69.27,67.768c-2.88,2.338-8.369,6.848-14.189,11.64c2.51-1.088,5.553-1.922,9.056-1.935c0.02,0,0.041,0,0.06,0 c8.746,0,16.358,6.672,16.679,6.956l0.907,0.806l-0.871,0.844c-0.298,0.289-7.401,7.068-16.72,7.101c-0.021,0-0.042,0-0.062,0 c-8.843,0.001-16.368-6.676-16.685-6.961l-0.302-0.271c-4.473,3.689-8.506,7.019-10.964,9.05h-3.534 c2.385-1.97,15.107-12.481,25.041-20.651V63.375l-33.54,27.572H11.889l19.27-20.778h3.073L17.055,88.697h6.292L61.246,57.54 C74.1,46.994,78.478,28.962,71.894,13.699l-0.146-0.326c-1.981-4.57-6.934-7.024-11.762-5.819c-4.018,0.991-7.001,4.277-7.609,8.363 l-0.09,0.563l-4.885,2.668l4.896,1.159c0,0,0.022,6.258-0.079,7.812L14.241,69.134l19.855-4.716 c5.954-1.407,10.963-5.076,14.104-10.333c2.184-3.647,3.264-7.733,3.174-11.875h2.251c0.09,4.547-1.103,9.027-3.501,13.034 c-3.444,5.785-8.96,9.815-15.511,11.357L7.567,73.028l42.455-45.856c0.063-1.224,0.047-5.076,0.047-5.076l-8.903-2.116l9.072-4.953 c0.923-4.727,4.48-8.487,9.207-9.657c5.898-1.463,11.942,1.52,14.374,7.102l0.135,0.326c6.99,16.186,2.352,35.298-11.278,46.475 l-2.738,2.251v10.973c3.286-2.7,6.112-5.015,7.914-6.478c7.94-6.444,16.542-11.6,24.582-14.83v2.431 C84.849,56.782,76.769,61.683,69.27,67.768z M49.901,85.319c2.21,1.704,7.99,5.593,14.283,5.611 c6.528-0.023,12.032-3.882,14.188-5.628c-2.263-1.72-8.023-5.577-14.175-5.577c-0.018,0-0.035,0-0.052,0 C57.033,79.751,51.867,83.59,49.901,85.319z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Reference in New Issue
Block a user