Merge branch 'feature/ref' into develop
This commit is contained in:
commit
847b3696cb
9
src/CloserButton.vue
Normal file
9
src/CloserButton.vue
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
<template>
|
||||||
|
<button class="side-menu-opener side-menu-closer"></button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'CloserButton',
|
||||||
|
}
|
||||||
|
</script>
|
26
src/Loader.vue
Normal file
26
src/Loader.vue
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
<template>
|
||||||
|
<div class="side-menu-loader">
|
||||||
|
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<g transform="translate(1 1)" stroke-width="2">
|
||||||
|
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
|
||||||
|
<path d="M36 18c0-9.94-8.06-18-18-18">
|
||||||
|
<animateTransform
|
||||||
|
attributeName="transform"
|
||||||
|
type="rotate"
|
||||||
|
from="0 18 18"
|
||||||
|
to="360 18 18"
|
||||||
|
dur="1s"
|
||||||
|
repeatCount="indefinite"/>
|
||||||
|
</path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Loader',
|
||||||
|
}
|
||||||
|
</script>
|
21
src/Logo.vue
Normal file
21
src/Logo.vue
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
<template>
|
||||||
|
<div v-bind:class="classes">
|
||||||
|
<img v-bind:src="image">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Logo',
|
||||||
|
props: {
|
||||||
|
image: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
classes: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
9
src/OpenerButton.vue
Normal file
9
src/OpenerButton.vue
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
<template>
|
||||||
|
<button class="side-menu-opener"></button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'OpenerButton',
|
||||||
|
}
|
||||||
|
</script>
|
31
src/SettingsButton.vue
Normal file
31
src/SettingsButton.vue
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
<template>
|
||||||
|
<div class="side-menu-settings">
|
||||||
|
<a v-bind:href="href">
|
||||||
|
{{ label }}
|
||||||
|
|
||||||
|
<span class="avatardiv avatardiv-shown">
|
||||||
|
<img v-bind:src="avatar" v-bind:alt="name" v-bind:title="name">
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'SettingsButton',
|
||||||
|
props: {
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
href: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
avatar: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -17,33 +17,27 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<template>
|
<template>
|
||||||
<div id="side-menu">
|
<div id="side-menu">
|
||||||
<div class="side-menu-header">
|
<div class="side-menu-header">
|
||||||
<div class="side-menu-settings" v-if="settings">
|
<SettingsButton
|
||||||
<a v-bind:href="settings.href">
|
v-if="settings"
|
||||||
{{ settings.name }}
|
v-bind:href="settings.href"
|
||||||
|
v-bind:label="settings.name"
|
||||||
|
v-bind:avatar="settings.avatar" />
|
||||||
|
|
||||||
<span class="avatardiv avatardiv-shown">
|
<OpenerButton />
|
||||||
<img v-bind:src="settings.avatar" v-bind:alt="settings.name" v-bind:title="settings.name">
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="side-menu-opener"></button>
|
<Logo v-if="!avatar && logo" v-bind:classes="{'side-menu-logo': true, 'avatardiv': false}" v-bind:image="logo" />
|
||||||
|
<Logo v-if="avatar" v-bind:classes="{'side-menu-logo': true, 'avatardiv': true}" v-bind:image="avatar" />
|
||||||
<div v-if="!avatar && logo" v-bind:class="{'side-menu-logo': true, 'avatardiv': false}">
|
|
||||||
<img v-bind:src="logo">
|
|
||||||
</div>
|
|
||||||
<div v-if="avatar" v-bind:class="{'side-menu-logo': true, 'avatardiv': true}">
|
|
||||||
<img v-bind:src="avatar">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="side-menu-apps-list">
|
<ul class="side-menu-apps-list">
|
||||||
<li v-for="app in apps" v-bind:class="{'side-menu-app': true, 'active': app.active}">
|
<SideMenuApp
|
||||||
<a v-bind:href="app.href" :target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined" v-bind:title="app.name">
|
v-for="app in apps"
|
||||||
<span class="side-menu-app-icon" v-html="app.icon"></span>
|
v-bind:classes="{'side-menu-app': true, 'active': app.active}"
|
||||||
<span class="side-menu-app-text" v-html="app.name"></span>
|
v-bind:icon="app.icon"
|
||||||
</a>
|
v-bind:label="app.name"
|
||||||
</li>
|
v-bind:href="app.href"
|
||||||
|
v-bind:target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
|
||||||
|
/>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -51,9 +45,19 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<script>
|
<script>
|
||||||
import trim from 'trim'
|
import trim from 'trim'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
import OpenerButton from './OpenerButton'
|
||||||
|
import SettingsButton from './SettingsButton'
|
||||||
|
import SideMenuApp from './SideMenuApp'
|
||||||
|
import Logo from './Logo'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SideMenu',
|
name: 'SideMenu',
|
||||||
|
components: {
|
||||||
|
SettingsButton,
|
||||||
|
OpenerButton,
|
||||||
|
SideMenuApp,
|
||||||
|
Logo,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
apps: [],
|
apps: [],
|
||||||
|
|
36
src/SideMenuApp.vue
Normal file
36
src/SideMenuApp.vue
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<li v-bind:class="classes">
|
||||||
|
<a v-bind:href="href" :target="target" v-bind:title="label">
|
||||||
|
<span class="side-menu-app-icon" v-html="icon"></span>
|
||||||
|
<span class="side-menu-app-text" v-html="label"></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'SideMenuApp',
|
||||||
|
props: {
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
href: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
classes: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
target: {
|
||||||
|
type: String,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -17,52 +17,34 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<template>
|
<template>
|
||||||
<div id="side-menu" class="side-menu-big">
|
<div id="side-menu" class="side-menu-big">
|
||||||
<div class="side-menu-header">
|
<div class="side-menu-header">
|
||||||
<button class="side-menu-opener side-menu-closer"></button>
|
<CloserButton />
|
||||||
|
|
||||||
<div class="side-menu-settings" v-if="settings">
|
<SettingsButton
|
||||||
<a v-bind:href="settings.href">
|
v-if="settings"
|
||||||
{{ settings.name }}
|
v-bind:href="settings.href"
|
||||||
|
v-bind:label="settings.name"
|
||||||
|
v-bind:avatar="settings.avatar"
|
||||||
|
/>
|
||||||
|
|
||||||
<span class="avatardiv avatardiv-shown">
|
<OpenerButton />
|
||||||
<img v-bind:src="settings.avatar" v-bind:alt="settings.name" v-bind:title="settings.name">
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="side-menu-opener"></button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="side-menu-categories-wrapper">
|
<div class="side-menu-categories-wrapper">
|
||||||
<div class="side-menu-categories">
|
<div class="side-menu-categories">
|
||||||
<div v-if="!items.length" class="side-menu-loader">
|
<Loader v-if="!items.length" />
|
||||||
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g fill="none" fill-rule="evenodd">
|
|
||||||
<g transform="translate(1 1)" stroke-width="2">
|
|
||||||
<circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
|
|
||||||
<path d="M36 18c0-9.94-8.06-18-18-18">
|
|
||||||
<animateTransform
|
|
||||||
attributeName="transform"
|
|
||||||
type="rotate"
|
|
||||||
from="0 18 18"
|
|
||||||
to="360 18 18"
|
|
||||||
dur="1s"
|
|
||||||
repeatCount="indefinite"/>
|
|
||||||
</path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="side-menu-category" v-for="category in items">
|
<div class="side-menu-category" v-for="category in items">
|
||||||
<h2 class="side-menu-category-title" v-if="category.name != ''" v-html="category.name"></h2>
|
<h2 class="side-menu-category-title" v-if="category.name != ''" v-html="category.name"></h2>
|
||||||
|
|
||||||
<ul class="side-menu-apps-list">
|
<ul class="side-menu-apps-list">
|
||||||
<li v-bind:class="{'side-menu-app': true, 'active': activeApp === appId}" v-for="(app, appId) in category.apps">
|
<SideMenuBigApp
|
||||||
<a v-bind:href="app.href" :target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined" v-bind:title="app.name">
|
v-for="(app, appId) in category.apps"
|
||||||
<img class="side-menu-app-icon" v-bind:src="app.icon"></span>
|
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
||||||
<span class="side-menu-app-text" v-html="app.name"></span>
|
v-bind:icon="app.icon"
|
||||||
</a>
|
v-bind:label="app.name"
|
||||||
</li>
|
v-bind:href="app.href"
|
||||||
|
v-bind:target="targetBlankApps.indexOf(app.id) !== -1 ? '_blank' : undefined"
|
||||||
|
/>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -73,9 +55,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
<script>
|
<script>
|
||||||
import trim from 'trim'
|
import trim from 'trim'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
|
import OpenerButton from './OpenerButton'
|
||||||
|
import CloserButton from './CloserButton'
|
||||||
|
import SettingsButton from './SettingsButton'
|
||||||
|
import Loader from './Loader'
|
||||||
|
import SideMenuBigApp from './SideMenuBigApp'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SideMenuBig',
|
name: 'SideMenuBig',
|
||||||
|
components: {
|
||||||
|
SettingsButton,
|
||||||
|
OpenerButton,
|
||||||
|
CloserButton,
|
||||||
|
Loader,
|
||||||
|
SideMenuBigApp,
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
items: [],
|
items: [],
|
||||||
|
|
36
src/SideMenuBigApp.vue
Normal file
36
src/SideMenuBigApp.vue
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<li v-bind:class="classes">
|
||||||
|
<a v-bind:href="href" :target="target" v-bind:title="label">
|
||||||
|
<img class="side-menu-app-icon" v-bind:src="icon"></span>
|
||||||
|
<span class="side-menu-app-text" v-html="label"></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'SideMenuBigApp',
|
||||||
|
props: {
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
href: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
classes: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
target: {
|
||||||
|
type: String,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
94
webpack.js
94
webpack.js
|
@ -3,51 +3,51 @@ const { VueLoaderPlugin } = require('vue-loader')
|
||||||
const StyleLintPlugin = require('stylelint-webpack-plugin')
|
const StyleLintPlugin = require('stylelint-webpack-plugin')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: {
|
entry: {
|
||||||
'admin': path.join(__dirname, 'src', 'admin.js'),
|
'admin': path.join(__dirname, 'src', 'admin.js'),
|
||||||
'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'),
|
'sideMenu': path.join(__dirname, 'src', 'SideMenu.js'),
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
path: path.resolve(__dirname, './js'),
|
path: path.resolve(__dirname, './js'),
|
||||||
publicPath: '/js',
|
publicPath: '/js',
|
||||||
filename: '[name].js?v=[hash]',
|
filename: '[name].js?v=[hash]',
|
||||||
chunkFilename: 'chunks/[name]-[hash].js',
|
chunkFilename: 'chunks/[name]-[hash].js',
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
test: /\.css$/,
|
test: /\.css$/,
|
||||||
use: ['vue-style-loader', 'css-loader'],
|
use: ['vue-style-loader', 'css-loader'],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.scss$/,
|
test: /\.scss$/,
|
||||||
use: ['vue-style-loader', 'css-loader', 'sass-loader'],
|
use: ['vue-style-loader', 'css-loader', 'sass-loader'],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.vue$/,
|
test: /\.vue$/,
|
||||||
loader: 'vue-loader',
|
loader: 'vue-loader',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.js$/,
|
test: /\.js$/,
|
||||||
loader: 'babel-loader',
|
loader: 'babel-loader',
|
||||||
exclude: /node_modules/,
|
exclude: /node_modules/,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.(png|jpg|gif|svg)$/,
|
test: /\.(png|jpg|gif|svg)$/,
|
||||||
loader: 'url-loader',
|
loader: 'url-loader',
|
||||||
options: {
|
options: {
|
||||||
name: '[name].[ext]?[hash]',
|
name: '[name].[ext]?[hash]',
|
||||||
limit: 8192,
|
limit: 8192,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new VueLoaderPlugin(),
|
new VueLoaderPlugin(),
|
||||||
new StyleLintPlugin(),
|
new StyleLintPlugin(),
|
||||||
],
|
],
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: ['*', '.js', '.vue'],
|
extensions: ['*', '.js', '.vue'],
|
||||||
symlinks: false,
|
symlinks: false,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue