diff --git a/.babelrc b/.babelrc index 75214e92..247af248 100644 --- a/.babelrc +++ b/.babelrc @@ -20,7 +20,9 @@ ], "presets": [ [ - "@babel/preset-env" + "@babel/preset-env", { + "useBuiltIns": "entry" + } ] ] } diff --git a/client/app.js b/client/client-app.js similarity index 97% rename from client/app.js rename to client/client-app.js index 2ff071e7..6867cc2b 100644 --- a/client/app.js +++ b/client/client-app.js @@ -1,5 +1,3 @@ -'use strict' - /* global siteConfig */ import Vue from 'vue' @@ -116,7 +114,6 @@ Vue.component('nav-footer', () => import(/* webpackMode: "eager" */ './component Vue.component('nav-header', () => import(/* webpackMode: "eager" */ './components/common/nav-header.vue')) Vue.component('nav-sidebar', () => import(/* webpackMode: "eager" */ './components/common/nav-sidebar.vue')) Vue.component('profile', () => import(/* webpackChunkName: "profile" */ './components/profile.vue')) -Vue.component('setup', () => import(/* webpackChunkName: "setup" */ './components/setup.vue')) Vue.component('v-card-chin', () => import(/* webpackPrefetch: true, webpackChunkName: "ui-extra" */ './components/common/v-card-chin.vue')) Vue.component('page', () => import(/* webpackChunkName: "theme-page" */ './themes/' + process.env.CURRENT_THEME + '/components/app.vue')) @@ -142,7 +139,7 @@ let bootstrap = () => { el: '#root', components: {}, mixins: [helpers], - provide: apolloProvider.provide(), + apolloProvider, store, i18n }) diff --git a/client/client-setup.js b/client/client-setup.js new file mode 100644 index 00000000..1ee9e765 --- /dev/null +++ b/client/client-setup.js @@ -0,0 +1,30 @@ +/* eslint-disable import/first */ +import Vue from 'vue' +import Vuetify from 'vuetify' +import VeeValidate from 'vee-validate' +import boot from './modules/boot' +/* eslint-enable import/first */ + +window.WIKI = null +window.boot = boot + +Vue.use(Vuetify) +Vue.use(VeeValidate, { events: '' }) + +Vue.component('setup', () => import(/* webpackMode: "eager" */ './components/setup.vue')) + +let bootstrap = () => { + window.WIKI = new Vue({ + el: '#root' + }) + + // ==================================== + // Load Icons + // ==================================== + + import(/* webpackChunkName: "icons" */ './svg/icons.svg').then(icons => { + document.body.insertAdjacentHTML('beforeend', icons.default) + }) +} + +window.boot.onDOMReady(bootstrap) diff --git a/client/components/admin/admin-navigation.vue b/client/components/admin/admin-navigation.vue index c3476a68..601a0976 100644 --- a/client/components/admin/admin-navigation.vue +++ b/client/components/admin/admin-navigation.vue @@ -3,63 +3,77 @@ v-layout(row wrap) v-flex(xs12) .admin-header-icon: v-icon(size='80', color='grey lighten-2') near_me - .headline.primary--text {{$t('admin:navigation.title')}} - .subheading.grey--text {{$t('admin:navigation.subtitle')}} + .headline.primary--text {{$t('navigation.title')}} + .subheading.grey--text {{$t('navigation.subtitle')}} v-container.pa-0.mt-3(fluid, grid-list-lg) v-layout(row) v-flex(style='flex: 0 0 350px;') v-card v-list.primary.py-2(dense, dark) - draggable + draggable(v-model='navTree') template(v-for='navItem in navTree') - v-list-tile(v-if='navItem.kind === "link"', :class='(navItem === current) ? "blue" : ""', @click='selectItem(navItem)') + v-list-tile( + v-if='navItem.kind === "link"' + :key='navItem.id' + :class='(navItem === current) ? "blue" : ""' + @click='selectItem(navItem)' + ) v-list-tile-avatar: v-icon {{navItem.icon}} v-list-tile-title {{navItem.label}} - .py-2.clickable(v-else-if='navItem.kind === "divider"', :class='(navItem === current) ? "blue" : ""', @click='selectItem(navItem)') + .py-2.clickable( + v-else-if='navItem.kind === "divider"' + :key='navItem.id' + :class='(navItem === current) ? "blue" : ""' + @click='selectItem(navItem)' + ) v-divider - v-subheader.pl-4.clickable(v-else-if='navItem.kind === "header"', :class='(navItem === current) ? "blue" : ""', @click='selectItem(navItem)') {{navItem.label}} + v-subheader.pl-4.clickable( + v-else-if='navItem.kind === "header"' + :key='navItem.id' + :class='(navItem === current) ? "blue" : ""' + @click='selectItem(navItem)' + ) {{navItem.label}} v-card-chin - v-spacer - v-menu(offset-y, bottom, min-width='200px') - v-btn(slot='activator', color='primary', depressed) + v-menu(offset-y, bottom, min-width='200px', style='flex: 1 1;') + v-btn(slot='activator', color='primary', depressed, block) v-icon(left) add - span Add + span {{$t('common:actions.add')}} v-list v-list-tile(@click='addItem("link")') v-list-tile-avatar: v-icon link - v-list-tile-title Link + v-list-tile-title {{$t('navigation.link')}} v-list-tile(@click='addItem("header")') v-list-tile-avatar: v-icon title - v-list-tile-title Header + v-list-tile-title {{$t('navigation.header')}} v-list-tile(@click='addItem("divider")') v-list-tile-avatar: v-icon power_input - v-list-tile-title Divider - v-btn.ml-2(color='success', depressed) + v-list-tile-title {{$t('navigation.divider')}} + v-btn.ml-2(color='success', depressed, block, @click='save') v-icon(left) check - span Save + span {{$t('common:actions.save')}} v-flex v-card(v-if='current.kind === "link"') v-toolbar(dense, color='blue', flat, dark) - .subheading Edit Link + .subheading {{$t('navigation.edit', { kind: $t('navigation.link') })}} v-card-text v-text-field( outline background-color='grey lighten-2' - label='Label' + :label='$t("navigation.label")' prepend-icon='title' v-model='current.label' ) v-text-field( outline background-color='grey lighten-2' - label='Icon' + :label='$t("navigation.icon")' prepend-icon='casino' v-model='current.icon' ) v-select( outline background-color='grey lighten-2' - label='Target Type' + :label='$t("navigation.targetType")' prepend-icon='near_me' :items='navTypes' v-model='current.targetType' @@ -68,41 +82,47 @@ v-if='current.targetType === "external"' outline background-color='grey lighten-2' - label='Target' + :label='$t("navigation.target")' prepend-icon='near_me' v-model='current.target' ) v-card-chin v-spacer - v-btn(color='red', outline) + v-btn(color='red', outline, @click='deleteItem(current)') v-icon(left) delete - span Delete Link + span {{$t('navigation.delete', { kind: $t('navigation.link') })}} v-card(v-else-if='current.kind === "header"') v-toolbar(dense, color='blue', flat, dark) - .subheading Edit Header + .subheading {{$t('navigation.edit', { kind: $t('navigation.header') })}} v-card-text v-text-field( outline background-color='grey lighten-2' - label='Label' + :label='$t("navigation.label")' prepend-icon='title' v-model='current.label' ) v-card-chin v-spacer - v-btn(color='red', outline) + v-btn(color='red', outline, @click='deleteItem(current)') v-icon(left) delete - span Delete Header + span {{$t('navigation.delete', { kind: $t('navigation.header') })}} div(v-else-if='current.kind === "divider"') - v-btn.mt-0(color='red', outline) + v-btn.mt-0(color='red', outline, @click='deleteItem(current)') v-icon(left) delete - span Delete Divider + span {{$t('navigation.delete', { kind: $t('navigation.divider') })}} v-card(v-else) - v-card-text.grey--text Select a navigation item on the left. + v-card-text.grey--text {{$t('navigation.noSelectionText')}}