Adds sass-resource-loader to use imports of variables.scss in separate components without loading multimple times the file. Initial implementation of primary side menu bar with contraction.

This commit is contained in:
mateuswetah 2018-02-22 16:10:10 -03:00
parent b3a6a9222a
commit 33476da3f0
7 changed files with 132 additions and 30 deletions

25
package-lock.json generated
View File

@ -7386,6 +7386,31 @@
}
}
},
"sass-resources-loader": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/sass-resources-loader/-/sass-resources-loader-1.3.2.tgz",
"integrity": "sha512-7U55FKFMD7I//l/Ijm3GrqjOBw66D6NbGrwiD/uZ/S85fOB/4a3kibsaRWYkbO9t1aQPZz1V/69C5k2B1nS1bw==",
"dev": true,
"requires": {
"async": "2.6.0",
"chalk": "1.1.3",
"glob": "7.1.2",
"loader-utils": "1.1.0"
},
"dependencies": {
"loader-utils": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.1.0.tgz",
"integrity": "sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=",
"dev": true,
"requires": {
"big.js": "3.2.0",
"emojis-list": "2.1.0",
"json5": "0.5.1"
}
}
}
},
"sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",

View File

@ -29,6 +29,7 @@
"element-theme-chalk": "^2.1.0",
"file-loader": "^0.9.0",
"postcss-loader": "^2.1.0",
"sass-resources-loader": "^1.3.2",
"style-loader": "^0.19.1",
"vue-custom-element": "^1.0.13",
"vue-loader": "^13.7.1",

View File

@ -1,26 +1,14 @@
<template>
<div id="tainacan-admin-app" class="columns is-fullheight">
<nav id="primary-menu" role="navigation" aria-label="main navigation" class="column is-2 is-sidebar-menu">
<aside class="menu">
<h1 class="menu-level-title">{{ $i18n.get('repository') }}</h1>
<ul class="menu-list">
<li><router-link tag="a" to="/collections">{{ $i18n.get('collections')}}</router-link></li>
<li><router-link tag="a" to="/items">{{ $i18n.get('items')}}</router-link></li>
<li><router-link tag="a" to="/fields">{{ $i18n.get('fields')}}</router-link></li>
<li><router-link tag="a" to="/filters">{{ $i18n.get('filters')}}</router-link></li>
<li><router-link tag="a" to="/categories">{{ $i18n.get('categories')}}</router-link></li>
<li><router-link tag="a" to="/events">{{ $i18n.get('events')}}</router-link></li>
<li><a class="navbar-item" :href="wordpressAdmin">Wordpress</a></li>
</ul>
</aside>
</nav>
<div class="container column is-main-content">
<primary-menu></primary-menu>
<div class="column is-main-content">
<router-view></router-view>
</div>
</div>
</template>
<script>
import PrimaryMenu from './components/primary-menu.vue';
export default {
name: "AdminPage",
data(){
@ -28,6 +16,9 @@
logoHeader: '../wp-content/plugins/tainacan/admin/images/tainacan_logo_header.png',
wordpressAdmin: window.location.origin + window.location.pathname.replace('admin.php', ''),
}
},
components: {
PrimaryMenu
}
}
</script>
@ -42,18 +33,12 @@
margin-top: 0px;
}
#primary-menu {
background-color: $primary;
li{
a {color: white !important;}
a:hover {color: $primary !important;}
}
}
.is-main-content {
padding-bottom: 0px;
padding-top: 0px;
margin: 0 auto;
position: relative;
}
#secondary-menu {
@ -65,7 +50,5 @@
}
}
</style>

View File

@ -31,7 +31,7 @@
@page-change="onPageChange">
<template slot-scope="props">
<b-table-column field="featured_image" width="55" sortable="{{ false }}">
<b-table-column field="featured_image" width="55">
<template v-if="props.row.featured_image" slot-scope="scope">
<img class="table-thumb" :src="`${props.row.featured_image}`"/>
</template>

View File

@ -0,0 +1,85 @@
<template>
<nav id="primary-menu" :class="isCompressed ? 'is-compressed' : ''" role="navigation" aria-label="main navigation" class="column is-sidebar-menu">
<aside class="menu">
<ul class="menu-list">
<li><router-link tag="a" to="/collections" :class="activeRoute == '/collections' ? 'is-active':''">
<b-icon size="is-small" icon="folder-multiple"></b-icon> <span class="menu-text">{{ $i18n.get('collections')}}</span>
</router-link></li>
<li><router-link tag="a" to="/items" :class="activeRoute == '/items' ? 'is-active':''">
<b-icon size="is-small" icon="note-multiple"></b-icon> <span class="menu-text">{{ $i18n.get('items')}}</span>
</router-link></li>
<li><router-link tag="a" to="/fields" :class="activeRoute == '/fields' ? 'is-active':''">
<b-icon size="is-small" icon="format-list-checks"></b-icon> <span class="menu-text">{{ $i18n.get('fields')}}</span>
</router-link></li>
<li><router-link tag="a" to="/filters" :class="activeRoute == '/filters' ? 'is-active':''">
<b-icon size="is-small" icon="filter"></b-icon> <span class="menu-text">{{ $i18n.get('filters')}}</span>
</router-link></li>
<li><router-link tag="a" to="/categories" :class="activeRoute == '/categories' ? 'is-active':''">
<b-icon size="is-small" icon="shape"></b-icon> <span class="menu-text">{{ $i18n.get('categories')}}</span>
</router-link></li>
<li><router-link tag="a" to="/events" :class="activeRoute == '/events' ? 'is-active':''">
<b-icon size="is-small" icon="calendar"></b-icon> <span class="menu-text">{{ $i18n.get('events')}}</span>
</router-link></li>
<li><a class="navbar-item" :href="wordpressAdmin">
<b-icon size="is-small" icon="wordpress"></b-icon> <span class="menu-text">Wordpress</span>
</a></li>
</ul>
</aside>
</nav>
</template>
<script>
export default {
name: 'PrimaryMenu',
data(){
return {
isCompressed: false,
activeRoute: '/collections'
}
},
watch: {
'$route' (to, from) {
this.isCompressed = (to.params.id != undefined);
this.activeRoute = to.path;
}
},
created () {
this.isCompressed = (this.$route.params.id != undefined);
this.activeRoute = this.$route.path;
}
}
</script>
<style lang="scss" scoped>
@import "../scss/_variables.scss";
#primary-menu {
background-color: $primary;
-webkit-transition: width 0.8s; /* Safari */
transition: all 0.1s;
width: 180px !important;
max-width: 180px !important;
li{
a {color: white}
a:hover {color: $primary}
a.is-active {
background-color: white;
color: $secondary;
color: $primary;
}
}
&.is-compressed {
width: 64px !important;
max-width: 64px !important;
.menu-text {
display: none;
}
box-shadow: -1px 0px 5px #111 inset;
}
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<div class="columns is-fullheight">
<div class="container columns is-fullheight">
<nav id="secondary-menu" role="navigation" aria-label="secondary navigation" class="column is-2 is-sidebar-menu">
<aside class="menu">
<ul class="menu-list">

View File

@ -33,7 +33,15 @@ module.exports = {
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
},
{
test: /\.scss$/,
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, './src/admin/scss/_variables.scss')
}
}
]
},
resolve: {