liz/wikijs-fork
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Setup wizard - all UI steps

Browse Source
This commit is contained in:
NGPixel
2017-03-25 17:03:09 -04:00
parent 04be7ebab3
commit bb45618447
20 changed files with 744 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/js/components/editor.js
View File

@@ -93,6 +93,7 @@ if ($('#mk-editor').length === 1) {
mdeModalOpenState = true;
$('#modal-editor-link').slideToggle();
} */
window.alert('Coming soon!')
},
className: 'icon-link2',
title: 'Insert Link'
@@ -163,6 +164,7 @@ if ($('#mk-editor').length === 1) {
{
name: 'table',
action: (editor) => {
window.alert('Coming soon!')
// todo
},
className: 'icon-table',

204
client/js/configure.js
View File

@@ -1,24 +1,63 @@
'use strict'
/* global jQuery, _, Vue, axios */
/* global jQuery, _, Vue, VeeValidate, axios */
Vue.use(VeeValidate, {
enableAutoClasses: true,
classNames: {
touched: 'is-touched', // the control has been blurred
untouched: 'is-untouched', // the control hasn't been blurred
valid: 'is-valid', // model is valid
invalid: 'is-invalid', // model is invalid
pristine: 'is-pristine', // control has not been interacted with
dirty: 'is-dirty' // control has been interacted with
}
})
jQuery(document).ready(function ($) {
new Vue({ // eslint-disable-line no-new
el: 'main',
data: {
loading: false,
state: 'considerations',
state: 'welcome',
syscheck: {
ok: false,
error: '',
results: []
},
dbcheck: {
ok: false,
error: ''
},
gitcheck: {
ok: false,
error: ''
},
final: {
ok: false,
error: '',
results: []
},
conf: {
title: 'Wiki',
host: '',
host: 'http://',
port: 80,
lang: 'en',
db: 'mongodb://localhost:27017/wiki'
db: 'mongodb://localhost:27017/wiki',
pathData: './data',
pathRepo: './repo',
gitUrl: '',
gitBranch: 'master',
gitAuthType: 'ssh',
gitAuthSSHKey: '',
gitAuthUser: '',
gitAuthPass: '',
gitAuthSSL: true,
gitSignatureName: '',
gitSignatureEmail: '',
adminEmail: '',
adminPassword: '',
adminPasswordConfirm: ''
},
considerations: {
https: false,
@@ -26,6 +65,44 @@ jQuery(document).ready(function ($) {
localhost: false
}
},
computed: {
currentProgress: function () {
let perc = '0%'
switch (this.state) {
case 'welcome':
perc = '0%'
break
case 'syscheck':
perc = (this.syscheck.ok) ? '15%' : '5%'
break
case 'general':
perc = '20%'
break
case 'considerations':
perc = '30%'
break
case 'db':
perc = '35%'
break
case 'dbcheck':
perc = (this.dbcheck.ok) ? '50%' : '40%'
break
case 'paths':
perc = '55%'
break
case 'git':
perc = '60%'
break
case 'gitcheck':
perc = (this.gitcheck.ok) ? '75%' : '65%'
break
case 'admin':
perc = '80%'
break
}
return perc
}
},
methods: {
proceedToWelcome: function (ev) {
this.state = 'welcome'
@@ -58,8 +135,12 @@ jQuery(document).ready(function ($) {
}, 1000)
},
proceedToGeneral: function (ev) {
this.state = 'general'
this.loading = false
let self = this
self.state = 'general'
self.loading = false
self.$nextTick(() => {
self.$validator.validateAll('general')
})
},
proceedToConsiderations: function (ev) {
this.considerations = {
@@ -71,8 +152,115 @@ jQuery(document).ready(function ($) {
this.loading = false
},
proceedToDb: function (ev) {
this.state = 'db'
this.loading = false
let self = this
self.state = 'db'
self.loading = false
self.$nextTick(() => {
self.$validator.validateAll('db')
})
},
proceedToDbcheck: function (ev) {
let self = this
this.state = 'dbcheck'
this.loading = true
self.dbcheck = {
ok: false,
error: ''
}
_.delay(() => {
axios.post('/dbcheck', {
db: self.conf.db
}).then(resp => {
if (resp.data.ok === true) {
self.dbcheck.ok = true
} else {
self.dbcheck.ok = false
self.dbcheck.error = resp.data.error
}
self.loading = false
self.$nextTick()
}).catch(err => {
window.alert(err.message)
})
}, 1000)
},
proceedToPaths: function (ev) {
let self = this
self.state = 'paths'
self.loading = false
self.$nextTick(() => {
self.$validator.validateAll('paths')
})
},
proceedToGit: function (ev) {
let self = this
self.state = 'git'
self.loading = false
self.$nextTick(() => {
self.$validator.validateAll('git')
})
},
proceedToGitCheck: function (ev) {
let self = this
this.state = 'gitcheck'
this.loading = true
self.dbcheck = {
ok: false,
error: ''
}
_.delay(() => {
axios.post('/gitcheck', self.conf).then(resp => {
if (resp.data.ok === true) {
self.gitcheck.ok = true
} else {
self.gitcheck.ok = false
self.gitcheck.error = resp.data.error
}
self.loading = false
self.$nextTick()
}).catch(err => {
window.alert(err.message)
})
}, 1000)
},
proceedToAdmin: function (ev) {
let self = this
self.state = 'admin'
self.loading = false
self.$nextTick(() => {
self.$validator.validateAll('admin')
})
},
proceedToFinal: function (ev) {
let self = this
self.state = 'final'
self.loading = true
self.final = {
ok: false,
error: '',
results: []
}
_.delay(() => {
axios.post('/finalize', self.conf).then(resp => {
if (resp.data.ok === true) {
self.final.ok = true
self.final.results = resp.data.results
} else {
self.final.ok = false
self.final.error = resp.data.error
}
self.loading = false
self.$nextTick()
}).catch(err => {
window.alert(err.message)
})
}, 1000)
},
finish: function (ev) {
}
}
})

5
client/js/pages/edit.js
View File

@@ -2,6 +2,7 @@
if ($('#page-type-edit').length) {
let pageEntryPath = $('#page-type-edit').data('entrypath') // eslint-disable-line no-unused-vars
// let pageCleanExit = false
// -> Discard
@@ -9,6 +10,10 @@ if ($('#page-type-edit').length) {
$('#modal-edit-discard').toggleClass('is-active')
})
// window.onbeforeunload = function () {
// return (pageCleanExit) ? true : 'Unsaved modifications will be lost. Are you sure you want to navigate away from this page?'
// }
/* eslint-disable spaced-comment */
//=include ../components/editor.js
/* eslint-enable spaced-comment */

12
client/scss/components/_editor.scss
View File

@@ -1,13 +1,13 @@
.editor-toolbar {
z-index: 2;
background-color: rgba(0,0,0,0.75);
background-color: mc('indigo', '900');
border: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
opacity: 1;
position: fixed;
top: 51px;
top: 50px;
left: 0;
width: 100%;
@@ -90,7 +90,7 @@
}
}
@@ -98,7 +98,7 @@
display: flex;
flex-wrap: wrap;
align-items: flex-start;
overflow: auto;
overflow-x: hidden;
@@ -140,7 +140,7 @@
> span {
font-size: 12px;
> strong {
text-overflow: ellipsis;
white-space: nowrap;
@@ -358,4 +358,4 @@
left: 0;
bottom: 0;
right: 0;
}
}

21
client/scss/configure.scss
View File

@@ -53,3 +53,24 @@ i.icon-warning-outline {
max-height: 0;
padding-top: 0;
}
.progress-bar {
width: 150px;
height: 10px;
background-color: mc('indigo', '50');
border:1px solid mc('indigo', '100');
border-radius: 3px;
position: absolute;
left: 15px;
top: 21px;
padding: 1px;
> div {
width: 5px;
height: 6px;
background-color: mc('indigo', '200');
border-radius: 2px;
transition: all 1s ease;
}
}