feat: config wizard UI improvements

This commit is contained in:
NGPixel committed 2017-11-05 01:36:07 -04:00
1 parent 98d311145b
commit 1658fcbf2e
10 files changed
+180 -194

No files matched your search

+1 -2
View File
@@ -13,8 +13,7 @@ import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import store from './store'
import icons from '../svg/nc-icons.svg'
import icons from '../svg/icons.svg'
// ====================================
// Load Modules
// ====================================
-153
View File
@@ -1,153 +0,0 @@
'use strict'
/* global $, siteConfig */
/* eslint-disable no-new */
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueClipboards from 'vue-clipboards'
import VueLodash from 'vue-lodash'
import store from './store'
import i18next from 'i18next'
import i18nextXHR from 'i18next-xhr-backend'
import VueI18Next from '@panter/vue-i18next'
import 'jquery-contextmenu'
import 'jquery-simple-upload'
import 'jquery-smooth-scroll'
import 'jquery-sticky'
// ====================================
// Load Helpers
// ====================================
import helpers from './helpers'
import _ from './helpers/lodash'
// ====================================
// Load Vue Components
// ====================================
import alertComponent from './components/alert.vue'
import anchorComponent from './components/anchor.vue'
import colorPickerComponent from './components/color-picker.vue'
import editorCodeblockComponent from './components/editor-codeblock.vue'
import editorFileComponent from './components/editor-file.vue'
import editorVideoComponent from './components/editor-video.vue'
import historyComponent from './components/history.vue'
import loadingSpinnerComponent from './components/loading-spinner.vue'
import modalCreatePageComponent from './components/modal-create-page.vue'
import modalCreateUserComponent from './components/modal-create-user.vue'
import modalDeleteUserComponent from './components/modal-delete-user.vue'
import modalDiscardPageComponent from './components/modal-discard-page.vue'
import modalMovePageComponent from './components/modal-move-page.vue'
import modalProfile2faComponent from './components/modal-profile-2fa.vue'
import modalUpgradeSystemComponent from './components/modal-upgrade-system.vue'
import pageLoaderComponent from './components/page-loader.vue'
import searchComponent from './components/search.vue'
import toggleComponent from './components/toggle.vue'
import treeComponent from './components/tree.vue'
import adminEditUserComponent from './pages/admin-edit-user.component.js'
import adminProfileComponent from './pages/admin-profile.component.js'
import adminSettingsComponent from './pages/admin-settings.component.js'
import adminThemeComponent from './pages/admin-theme.component.js'
import contentViewComponent from './pages/content-view.component.js'
import editorComponent from './components/editor.component.js'
import sourceViewComponent from './pages/source-view.component.js'
// ====================================
// Initialize Vue Modules
// ====================================
Vue.use(VueResource)
Vue.use(VueClipboards)
Vue.use(VueI18Next)
Vue.use(VueLodash, _)
Vue.use(helpers)
// ====================================
// Register Vue Components
// ====================================
Vue.component('alert', alertComponent)
Vue.component('adminEditUser', adminEditUserComponent)
Vue.component('adminProfile', adminProfileComponent)
Vue.component('adminSettings', adminSettingsComponent)
Vue.component('adminTheme', adminThemeComponent)
Vue.component('anchor', anchorComponent)
Vue.component('colorPicker', colorPickerComponent)
Vue.component('contentView', contentViewComponent)
Vue.component('editor', editorComponent)
Vue.component('editorCodeblock', editorCodeblockComponent)
Vue.component('editorFile', editorFileComponent)
Vue.component('editorVideo', editorVideoComponent)
Vue.component('history', historyComponent)
Vue.component('loadingSpinner', loadingSpinnerComponent)
Vue.component('modalCreatePage', modalCreatePageComponent)
Vue.component('modalCreateUser', modalCreateUserComponent)
Vue.component('modalDeleteUser', modalDeleteUserComponent)
Vue.component('modalDiscardPage', modalDiscardPageComponent)
Vue.component('modalMovePage', modalMovePageComponent)
Vue.component('modalProfile2fa', modalProfile2faComponent)
Vue.component('modalUpgradeSystem', modalUpgradeSystemComponent)
Vue.component('pageLoader', pageLoaderComponent)
Vue.component('search', searchComponent)
Vue.component('sourceView', sourceViewComponent)
Vue.component('toggle', toggleComponent)
Vue.component('tree', treeComponent)
// ====================================
// Load Localization strings
// ====================================
i18next
.use(i18nextXHR)
.init({
backend: {
loadPath: siteConfig.path + '/js/i18n/{{lng}}.json'
},
lng: siteConfig.lang,
fallbackLng: siteConfig.lang
})
$(() => {
// ====================================
// Notifications
// ====================================
$(window).bind('beforeunload', () => {
store.dispatch('startLoading')
})
$(document).ajaxSend(() => {
store.dispatch('startLoading')
}).ajaxComplete(() => {
store.dispatch('stopLoading')
})
// ====================================
// Bootstrap Vue
// ====================================
const i18n = new VueI18Next(i18next)
if (document.querySelector('#root')) {
window.wikijs = new Vue({
mixins: [helpers],
components: {},
store,
i18n,
el: '#root',
methods: {
changeTheme(opts) {
this.$el.className = `has-stickynav is-primary-${opts.primary} is-alternate-${opts.alt}`
this.$refs.header.className = `nav is-${opts.primary}`
this.$refs.footer.className = `footer is-${opts.footer}`
}
},
mounted() {
$('a:not(.toc-anchor)').smoothScroll({ speed: 500, offset: -50 })
$('#header').sticky({ topSpacing: 0 })
$('.sidebar-pagecontents').sticky({ topSpacing: 15, bottomSpacing: 75 })
}
})
}
})
+5 -18
View File
@@ -13,24 +13,11 @@ .icons {
fill: none;
}
&.is-16 {
width: 16px;
height: 16px;
}
&.is-18 {
width: 18px;
height: 18px;
}
&.is-20 {
width: 20px;
height: 20px;
}
&.is-24 {
width: 24px;
height: 24px;
@each $size in 16,18,20,24,48,64,96,128 {
&.is-#{$size} {
width: #{$size}px;
height: #{$size}px;
}
}
&.has-right-pad {
@@ -1,5 +1,6 @@
.config-manager {
background-image: linear-gradient(to right, mc('indigo', '400'), mc('indigo', '600'));
background-repeat: no-repeat;
width: 100%;
min-height: 100%;
padding-top: 1rem;
@@ -22,6 +23,10 @@ .config-manager {
border-bottom: 1px solid mc('indigo', '50');
margin-bottom: 1rem;
img {
max-height: 100px;
}
h2 {
margin: 0;
color: mc('indigo', '700');
@@ -30,6 +35,27 @@ .config-manager {
}
.is-logo {
text-align: center;
padding: .5rem 0 1.5rem 0;
border-bottom: 1px solid mc('indigo', '50');
margin-bottom: 1rem;
display: flex;
justify-content: center;
align-items: center;
img {
max-height: 64px;
}
h4 {
font-size: 1.2rem;
font-weight: 600;
margin-left: 1.5rem;
color: mc('grey', '700');
}
}
i.icon-loader {
display: inline-block;
color: mc('indigo', '500')
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="nc-check-simple" viewBox="0 0 64 64"><title>check simple</title><g><g class="nc-icon-wrapper"><polygon fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" points="24,54 4,34 12,26 24,38 52,10 60,18 " stroke-linejoin="miter"/></g></g></symbol><symbol id="nc-world-2" viewBox="0 0 64 64"><title>world 2</title><g><g class="nc-icon-wrapper"><path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M9.6,12 c5.5,7.3,12.5,10,22.4,10c9.8,0,16.9-2.7,22.4-10" stroke-linejoin="miter" stroke-linecap="butt"/> <path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M9.6,52 c5.5-7.3,12.5-10,22.4-10c9.8,0,16.9,2.7,22.4,10" stroke-linejoin="miter" stroke-linecap="butt"/> <path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M32,62c10.6-5.1,16-16.6,16-30 S42.6,7.1,32,2" stroke-linejoin="miter" stroke-linecap="butt"/> <path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M32,62c-10.6-5.1-16-16.6-16-30 S21.4,7.1,32,2" stroke-linejoin="miter" stroke-linecap="butt"/> <polyline data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" points="32,62 32,59.3 32,4.7 32,2 " stroke-linejoin="miter" stroke-linecap="butt"/> <line data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" x1="2" y1="32" x2="62" y2="32" stroke-linejoin="miter" stroke-linecap="butt"/> <circle fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" cx="32" cy="32" r="30" stroke-linejoin="miter"/></g></g></symbol><symbol id="nc-webpage-2" viewBox="0 0 48 48"><title>webpage 2</title><g><g class="nc-icon-wrapper"><path fill="#E6E6E6" d="M45,2H3C1.89545,2,1,2.89539,1,4v3h46V4C47,2.89539,46.10455,2,45,2z"/> <rect x="1" y="7" fill="#43A6DD" width="46" height="12"/> <path fill="#E6E6E6" d="M16,19v27h29c1.10455,0,2-0.89545,2-2V19H16z"/> <path fill="#444444" d="M1,19v25c0,1.10455,0.89545,2,2,2h13V19H1z"/> <circle fill="#E6E6E6" cx="8" cy="13" r="3"/> <path fill="#E6E6E6" d="M42,14h-4c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h4c0.55225,0,1,0.44727,1,1S42.55225,14,42,14z"/> <path fill="#E6E6E6" d="M33,14h-9c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h9c0.55225,0,1,0.44727,1,1S33.55225,14,33,14z"/> <path fill="#B3B3B3" d="M28.90455,36h-7.80911C20.49045,36,20,35.50955,20,34.90456v-9.80911C20,24.49045,20.49045,24,21.09545,24 h7.80911C29.50955,24,30,24.49045,30,25.09545v9.80911C30,35.50955,29.50955,36,28.90455,36z"/> <path fill="#B3B3B3" d="M42,26h-8c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h8c0.55225,0,1,0.44727,1,1S42.55225,26,42,26z"/> <path fill="#B3B3B3" d="M42,31h-8c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h8c0.55225,0,1,0.44727,1,1S42.55225,31,42,31z"/> <path fill="#B3B3B3" d="M42,36h-8c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h8c0.55225,0,1,0.44727,1,1S42.55225,36,42,36z"/> <path fill="#B3B3B3" d="M42,41H21c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h21c0.55225,0,1,0.44727,1,1S42.55225,41,42,41z"/></g></g></symbol><symbol id="nc-square-remove-12" viewBox="0 0 48 48"><title>square remove 12</title><g><g class="nc-icon-wrapper"><path fill="#E86C60" d="M45,1H3C1.89543,1,1,1.89543,1,3v42c0,1.10457,0.89543,2,2,2h42c1.10457,0,2-0.89543,2-2V3 C47,1.89543,46.10457,1,45,1z"/> <path fill="#FFFFFF" d="M34.29289,30.29289L28,24l6.29289-6.29289c0.39053-0.39053,0.39053-1.02369,0-1.41422l-2.58578-2.58579 c-0.39053-0.39052-1.02369-0.39052-1.41422,0L24,20l-6.29289-6.29289c-0.39053-0.39052-1.02369-0.39052-1.41422,0l-2.58579,2.58579 c-0.39052,0.39053-0.39052,1.02369,0,1.41422L20,24l-6.29289,6.29289c-0.39052,0.39053-0.39052,1.02369,0,1.41422l2.58579,2.58578 c0.39053,0.39053,1.02369,0.39053,1.41422,0L24,28l6.29289,6.29289c0.39053,0.39053,1.02369,0.39053,1.41422,0l2.58578-2.58578 C34.68342,31.31658,34.68342,30.68342,34.29289,30.29289z"/></g></g></symbol><symbol id="nc-spaceship" viewBox="0 0 48 48"><title>spaceship</title><g><g class="nc-icon-wrapper"><path fill="#B3B3B3" d="M11.95508,23.2124c-0.26562,0-0.51953-0.10547-0.70703-0.29297l-6.85547-6.85547 c-0.32227-0.32227-0.38574-0.82227-0.1543-1.21484c0.75-1.27197,1.62891-2.41504,2.6123-3.39844 c4.95605-4.95605,12.31738-6.36621,18.75195-3.59424C25.90625,7.9873,26.125,8.25928,26.18848,8.5835 c0.06348,0.32373-0.03711,0.6582-0.26953,0.89355l-13.25195,13.4375c-0.18652,0.18994-0.44238,0.29688-0.70801,0.29785 C11.95703,23.2124,11.95605,23.2124,11.95508,23.2124z"/> <path fill="#B3B3B3" d="M32.64258,43.8999c-0.25879,0-0.51465-0.1001-0.70703-0.29297l-6.91602-6.91602 c-0.18848-0.18799-0.29395-0.44336-0.29297-0.70996c0.00098-0.26611,0.10742-0.521,0.29688-0.70801l13.44922-13.30322 c0.23438-0.23145,0.56738-0.33154,0.89062-0.27148c0.32324,0.06152,0.5957,0.27832,0.72754,0.57959 c2.84473,6.46729,1.4541,13.875-3.54199,18.87158c-0.98145,0.98193-2.125,1.86035-3.39844,2.61182 C32.99219,43.85449,32.81738,43.8999,32.64258,43.8999z"/> <path fill="#E6E6E6" d="M8.04395,27.34131c-0.14941,0.37207-0.0625,0.79688,0.2207,1.08008l11.3134Line truncated
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="nc-check-simple" viewBox="0 0 64 64"><title>check simple</title><g><g class="nc-icon-wrapper"><polygon fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" points="24,54 4,34 12,26 24,38 52,10 60,18 " stroke-linejoin="miter"/></g></g></symbol><symbol id="nc-world-2" viewBox="0 0 64 64"><title>world 2</title><g><g class="nc-icon-wrapper"><path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M9.6,12 c5.5,7.3,12.5,10,22.4,10c9.8,0,16.9-2.7,22.4-10" stroke-linejoin="miter" stroke-linecap="butt"/> <path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M9.6,52 c5.5-7.3,12.5-10,22.4-10c9.8,0,16.9,2.7,22.4,10" stroke-linejoin="miter" stroke-linecap="butt"/> <path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M32,62c10.6-5.1,16-16.6,16-30 S42.6,7.1,32,2" stroke-linejoin="miter" stroke-linecap="butt"/> <path data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" d="M32,62c-10.6-5.1-16-16.6-16-30 S21.4,7.1,32,2" stroke-linejoin="miter" stroke-linecap="butt"/> <polyline data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" points="32,62 32,59.3 32,4.7 32,2 " stroke-linejoin="miter" stroke-linecap="butt"/> <line data-cap="butt" data-color="color-2" fill="none" stroke-miterlimit="10" x1="2" y1="32" x2="62" y2="32" stroke-linejoin="miter" stroke-linecap="butt"/> <circle fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" cx="32" cy="32" r="30" stroke-linejoin="miter"/></g></g></symbol><symbol id="nc-webpage-2" viewBox="0 0 48 48"><title>webpage 2</title><g><g class="nc-icon-wrapper"><path fill="#E6E6E6" d="M45,2H3C1.89545,2,1,2.89539,1,4v3h46V4C47,2.89539,46.10455,2,45,2z"/> <rect x="1" y="7" fill="#43A6DD" width="46" height="12"/> <path fill="#E6E6E6" d="M16,19v27h29c1.10455,0,2-0.89545,2-2V19H16z"/> <path fill="#444444" d="M1,19v25c0,1.10455,0.89545,2,2,2h13V19H1z"/> <circle fill="#E6E6E6" cx="8" cy="13" r="3"/> <path fill="#E6E6E6" d="M42,14h-4c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h4c0.55225,0,1,0.44727,1,1S42.55225,14,42,14z"/> <path fill="#E6E6E6" d="M33,14h-9c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h9c0.55225,0,1,0.44727,1,1S33.55225,14,33,14z"/> <path fill="#B3B3B3" d="M28.90455,36h-7.80911C20.49045,36,20,35.50955,20,34.90456v-9.80911C20,24.49045,20.49045,24,21.09545,24 h7.80911C29.50955,24,30,24.49045,30,25.09545v9.80911C30,35.50955,29.50955,36,28.90455,36z"/> <path fill="#B3B3B3" d="M42,26h-8c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h8c0.55225,0,1,0.44727,1,1S42.55225,26,42,26z"/> <path fill="#B3B3B3" d="M42,31h-8c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h8c0.55225,0,1,0.44727,1,1S42.55225,31,42,31z"/> <path fill="#B3B3B3" d="M42,36h-8c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h8c0.55225,0,1,0.44727,1,1S42.55225,36,42,36z"/> <path fill="#B3B3B3" d="M42,41H21c-0.55225,0-1-0.44727-1-1s0.44775-1,1-1h21c0.55225,0,1,0.44727,1,1S42.55225,41,42,41z"/></g></g></symbol><symbol id="nc-square-remove-12" viewBox="0 0 48 48"><title>square remove 12</title><g><g class="nc-icon-wrapper"><path fill="#E86C60" d="M45,1H3C1.89543,1,1,1.89543,1,3v42c0,1.10457,0.89543,2,2,2h42c1.10457,0,2-0.89543,2-2V3 C47,1.89543,46.10457,1,45,1z"/> <path fill="#FFFFFF" d="M34.29289,30.29289L28,24l6.29289-6.29289c0.39053-0.39053,0.39053-1.02369,0-1.41422l-2.58578-2.58579 c-0.39053-0.39052-1.02369-0.39052-1.41422,0L24,20l-6.29289-6.29289c-0.39053-0.39052-1.02369-0.39052-1.41422,0l-2.58579,2.58579 c-0.39052,0.39053-0.39052,1.02369,0,1.41422L20,24l-6.29289,6.29289c-0.39052,0.39053-0.39052,1.02369,0,1.41422l2.58579,2.58578 c0.39053,0.39053,1.02369,0.39053,1.41422,0L24,28l6.29289,6.29289c0.39053,0.39053,1.02369,0.39053,1.41422,0l2.58578-2.58578 C34.68342,31.31658,34.68342,30.68342,34.29289,30.29289z"/></g></g></symbol><symbol id="nc-spaceship" viewBox="0 0 48 48"><title>spaceship</title><g><g class="nc-icon-wrapper"><path fill="#B3B3B3" d="M11.95508,23.2124c-0.26562,0-0.51953-0.10547-0.70703-0.29297l-6.85547-6.85547 c-0.32227-0.32227-0.38574-0.82227-0.1543-1.21484c0.75-1.27197,1.62891-2.41504,2.6123-3.39844 c4.95605-4.95605,12.31738-6.36621,18.75195-3.59424C25.90625,7.9873,26.125,8.25928,26.18848,8.5835 c0.06348,0.32373-0.03711,0.6582-0.26953,0.89355l-13.25195,13.4375c-0.18652,0.18994-0.44238,0.29688-0.70801,0.29785 C11.95703,23.2124,11.95605,23.2124,11.95508,23.2124z"/> <path fill="#B3B3B3" d="M32.64258,43.8999c-0.25879,0-0.51465-0.1001-0.70703-0.29297l-6.91602-6.91602 c-0.18848-0.18799-0.29395-0.44336-0.29297-0.70996c0.00098-0.26611,0.10742-0.521,0.29688-0.70801l13.44922-13.30322 c0.23438-0.23145,0.56738-0.33154,0.89062-0.27148c0.32324,0.06152,0.5957,0.27832,0.72754,0.57959 c2.84473,6.46729,1.4541,13.875-3.54199,18.87158c-0.98145,0.98193-2.125,1.86035-3.39844,2.61182 C32.99219,43.85449,32.81738,43.8999,32.64258,43.8999z"/> <path fill="#E6E6E6" d="M8.04395,27.34131c-0.14941,0.37207-0.0625,0.79688,0.2207,1.08008l11.3134Line truncated