IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

component BaseNav, DashboardNavbar.vue removed,

Browse Source
This commit is contained in:
ogerly 2021-06-13 06:55:58 +02:00
parent 3e3048cf39
commit c5525dfe95
5 changed files with 1 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
frontend/src/components/Navbar/BaseNav.vue
View File

@ -1,120 +0,0 @@
<template>
<b-navbar toggleable :class="classes">
<div :class="containerClasses">
<slot name="brand"></slot>
<slot name="toggle-button">
<button
class="navbar-toggler collapsed"
v-if="hasMenu"
type="button"
@click="toggleMenu"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
</button>
</slot>
<b-navbar-toggle target="nav-text-collapse" @click.stop="toggleMenu"></b-navbar-toggle>
<b-collapse
is-nav
id="nav-text-collapse"
class="navbar-custom-collapse collapse"
:class="menuClasses"
:visible="show"
v-click-outside="closeMenu"
>
<slot :close-menu="closeMenu"></slot>
</b-collapse>
</div>
</b-navbar>
</template>
<script>
export default {
name: 'base-nav',
props: {
show: {
type: Boolean,
default: false,
description:
'Whether navbar menu is shown (valid for viewports < specified by `expand` prop)',
},
transparent: {
type: Boolean,
default: false,
description: 'Whether navbar is transparent',
},
expand: {
type: String,
default: 'lg',
description: 'Breakpoint where nav should expand',
},
menuClasses: {
type: [String, Object, Array],
default: '',
description: 'Navbar menu (items) classes. Can be used to align menu items to the right/left',
},
containerClasses: {
type: [String, Object, Array],
default: 'container',
description:
'Container classes. Can be used to control container classes (contains both navbar brand and menu items)',
},
type: {
type: String,
default: '',
validator(value) {
return [
'',
'dark',
'success',
'danger',
'warning',
'white',
'primary',
'light',
'info',
'vue',
].includes(value)
},
description: 'Navbar color type',
},
},
model: {
prop: 'show',
event: 'change',
},
computed: {
classes() {
const color = `bg-${this.type}`
const classes = [
{ 'navbar-transparent': this.transparent },
{ [`navbar-expand-${this.expand}`]: this.expand },
]
if (this.position) {
classes.push(`navbar-${this.position}`)
}
if (!this.transparent) {
classes.push(color)
}
return classes
},
hasMenu() {
return this.$slots.default
},
},
methods: {
toggleMenu() {
this.$emit('change', !this.show)
},
closeMenu() {
this.$emit('change', false)
},
},
}
</script>
<style></style>

3
frontend/src/components/index.js
View File

@ -1,4 +1,3 @@
import BaseNav from './Navbar/BaseNav'
import NavbarToggleButton from './Navbar/NavbarToggleButton'
import Collapse from './Collapse/Collapse.vue'
@ -6,4 +5,4 @@ import CollapseItem from './Collapse/CollapseItem.vue'
import SidebarPlugin from './SidebarPlugin'
export { SidebarPlugin, BaseNav, NavbarToggleButton, Collapse, CollapseItem }
export { SidebarPlugin, NavbarToggleButton, Collapse, CollapseItem }

2
frontend/src/plugins/globalComponents.js
View File

@ -1,9 +1,7 @@
import BaseNav from '@/components/Navbar/BaseNav'
import { ValidationProvider, ValidationObserver } from 'vee-validate'
const GlobalComponents = {
install(Vue) {
Vue.component(BaseNav.name, BaseNav)
Vue.component('validation-provider', ValidationProvider)
Vue.component('validation-observer', ValidationObserver)
},

3
frontend/src/views/Layout/DashboardLayout_gdd.vue
View File

@ -23,7 +23,6 @@
</template>
</side-bar>
<div class="main-content">
<dashboard-navbar :type="$route.meta.navbarType"></dashboard-navbar>
<div @click="$sidebar.displaySidebar(false)">
<fade-transition :duration="200" origin="center top" mode="out-in">
<!-- your content here -->
@ -48,7 +47,6 @@ import PerfectScrollbar from 'perfect-scrollbar'
import 'perfect-scrollbar/css/perfect-scrollbar.css'
import loginAPI from '../../apis/loginAPI'
import DashboardNavbar from './DashboardNavbar.vue'
import ContentFooter from './ContentFooter.vue'
// import DashboardContent from './Content.vue';
import { FadeTransition } from 'vue2-transitions'
@ -72,7 +70,6 @@ function initScrollbar(className) {
export default {
components: {
DashboardNavbar,
ContentFooter,
// DashboardContent,
FadeTransition,

48
frontend/src/views/Layout/DashboardNavbar.vue
View File

@ -1,48 +0,0 @@
<template>
<base-nav
container-classes="container-fluid"
class="navbar-expand"
:class="{ 'navbar-dark': type === 'default' }"
>
<!-- Navbar links -->
<b-navbar-nav class="align-items-center ml-md-auto">
<!-- This item dont have <b-nav-item> because item have data-action/data-target on tag <a>, wich we cant add -->
<li class="nav-item d-sm-none"></li>
</b-navbar-nav>
<b-navbar-nav class="align-items-center ml-auto ml-md-0">
<div class="pr-1" slot="title-container ">
<b-media no-body class="align-items-center">
<span class="pb-2 text-lg font-weight-bold">
{{ $store.state.email }}
</span>
<b-media-body class="ml-2">
<span class="avatar">
<vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
</span>
</b-media-body>
</b-media>
</div>
</b-navbar-nav>
</base-nav>
</template>
<script>
import { BaseNav } from '@/components'
import VueQrcode from 'vue-qrcode'
export default {
components: {
BaseNav,
VueQrcode,
},
props: {
type: {
type: String,
},
},
}
</script>
<style>
.pointer {
cursor: pointer;
}
</style>