sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #91 from coreui/dev-header-dropdown

Browse Source 
v2.0.0-beta.2
This commit is contained in:
xidedix
2018-06-04 18:15:54 +02:00
committed by GitHub
parent d1e66e1666 b09e2754f3
commit 7a8847b3dd
5 changed files with 71 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+5
View File
@@ -1,5 +1,10 @@
## [vue](./README.md) version `changelog` ## [vue](./README.md) version `changelog`
##### `v2.0.0-beta.2`
- refactor: `HeaderDropdown` with new slots `header` and `dropdown` *breaking change*
- chore: update `@coreui/vue` to `2.0.0-beta.1`
- chore: dependencies update
##### `v2.0.0-beta.1` ##### `v2.0.0-beta.1`
- chore: update `@coreui/vue` to `2.0.0-beta.0` - chore: update `@coreui/vue` to `2.0.0-beta.0`
package.json
+3 -3
View File
@@ -1,6 +1,6 @@
{ {
"name": "@coreui/coreui-free-vue-admin-template", "name": "@coreui/coreui-free-vue-admin-template",
"version": "2.0.0-beta.1", "version": "2.0.0-beta.2",
"description": "Open Source Bootstrap Admin Template", "description": "Open Source Bootstrap Admin Template",
"author": "Łukasz Holeczek", "author": "Łukasz Holeczek",
"homepage": "http://coreui.io", "homepage": "http://coreui.io",
@@ -20,7 +20,7 @@
"@coreui/coreui": "^2.0.1", "@coreui/coreui": "^2.0.1",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0", "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
"@coreui/icons": "^0.2.0", "@coreui/icons": "^0.2.0",
"@coreui/vue": "^2.0.0-beta.0", "@coreui/vue": "^2.0.0-beta.1",
"bootstrap": "^4.1.1", "bootstrap": "^4.1.1",
"bootstrap-vue": "^2.0.0-rc.11", "bootstrap-vue": "^2.0.0-rc.11",
"chart.js": "^2.7.2", "chart.js": "^2.7.2",
@@ -36,7 +36,7 @@
"vue-router": "^3.0.1" "vue-router": "^3.0.1"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^8.5.1", "autoprefixer": "^8.6.0",
"babel-core": "^6.26.3", "babel-core": "^6.26.3",
"babel-eslint": "^8.2.3", "babel-eslint": "^8.2.3",
"babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-helper-vue-jsx-merge-props": "^2.0.3",
src/containers/DafaultAside.vue
+4 -4
View File
@@ -117,7 +117,7 @@
<div class="py-3 pb-5 mr-3 float-left"> <div class="py-3 pb-5 mr-3 float-left">
<div class="avatar"> <div class="avatar">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com"> <img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="success" class="avatar-status"></b-badge> <b-badge variant="danger" class="avatar-status"></b-badge>
</div> </div>
</div> </div>
<div> <div>
@@ -132,7 +132,7 @@
<div class="py-3 pb-5 mr-3 float-left"> <div class="py-3 pb-5 mr-3 float-left">
<div class="avatar"> <div class="avatar">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com"> <img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="success" class="avatar-status"></b-badge> <b-badge variant="info" class="avatar-status"></b-badge>
</div> </div>
</div> </div>
<div> <div>
@@ -147,7 +147,7 @@
<div class="py-3 pb-5 mr-3 float-left"> <div class="py-3 pb-5 mr-3 float-left">
<div class="avatar"> <div class="avatar">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com"> <img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="success" class="avatar-status"></b-badge> <b-badge variant="warning" class="avatar-status"></b-badge>
</div> </div>
</div> </div>
<div> <div>
@@ -162,7 +162,7 @@
<div class="py-3 pb-5 mr-3 float-left"> <div class="py-3 pb-5 mr-3 float-left">
<div class="avatar"> <div class="avatar">
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com"> <img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
<b-badge variant="success" class="avatar-status"></b-badge> <b-badge variant="dark" class="avatar-status"></b-badge>
</div> </div>
</div> </div>
<div> <div>
src/containers/DefaultContainer.vue
+5 -45
View File
@@ -23,45 +23,7 @@
<b-nav-item class="d-md-down-none"> <b-nav-item class="d-md-down-none">
<i class="icon-location-pin"></i> <i class="icon-location-pin"></i>
</b-nav-item> </b-nav-item>
<AppHeaderDropdown right no-caret> <DefaultHeaderDropdownAccnt/>
<div>
<template slot="button-content">
<img
src="static/img/avatars/6.jpg"
class="img-avatar"
alt="admin@bootstrapmaster.com" />
</template>
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
<b-dropdown-item><i class="fa fa-bell-o" /> Updates
<b-badge variant="info">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-envelope-o" /> Messages
<b-badge variant="success">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-tasks" /> Tasks
<b-badge variant="danger">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-comments" /> Comments
<b-badge variant="warning">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-header
tag="div"
class="text-center">
<strong>Settings</strong>
</b-dropdown-header>
<b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
<b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
<b-dropdown-item><i class="fa fa-usd" /> Payments
<b-badge variant="secondary">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-file" /> Projects
<b-badge variant="primary">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-divider />
<b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
<b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
</div>
</AppHeaderDropdown>
</b-navbar-nav> </b-navbar-nav>
<AsideToggler class="d-none d-lg-block" /> <AsideToggler class="d-none d-lg-block" />
<!--<AsideToggler class="d-lg-none" mobile />--> <!--<AsideToggler class="d-lg-none" mobile />-->
@@ -93,22 +55,21 @@
<script> <script>
import nav from '../_nav' import nav from '../_nav'
import { Header as AppHeader, HeaderDropdown as AppHeaderDropdown, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue' import { Header as AppHeader, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as TheFooter, Breadcrumb } from '@coreui/vue'
// import { Header as AppHeader, HeaderDropdown as AppHeaderDropdown, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Breadcrumb } from '../components/'
// import { Footer as TheFooter } from '@coreui/vue'
import DafaultAside from './DafaultAside' import DafaultAside from './DafaultAside'
import DefaultHeaderDropdownAccnt from './DefaultHeaderDropdownAccnt'
export default { export default {
name: 'full', name: 'full',
components: { components: {
AsideToggler, AsideToggler,
AppHeader, AppHeader,
AppHeaderDropdown,
AppSidebar, AppSidebar,
AppAside, AppAside,
TheFooter, TheFooter,
Breadcrumb, Breadcrumb,
DafaultAside, DafaultAside,
DefaultHeaderDropdownAccnt,
SidebarForm, SidebarForm,
SidebarFooter, SidebarFooter,
SidebarToggler, SidebarToggler,
@@ -118,8 +79,7 @@ export default {
}, },
data () { data () {
return { return {
nav: nav.items, nav: nav.items
itemsCount: 42
} }
}, },
computed: { computed: {
src/containers/DefaultHeaderDropdownAccnt.vue
+54
View File
@@ -0,0 +1,54 @@
<template>
<AppHeaderDropdown right no-caret>
<template slot="header">
<img
src="static/img/avatars/6.jpg"
class="img-avatar"
alt="admin@bootstrapmaster.com" />
</template>\
<template slot="dropdown">
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
<b-dropdown-item><i class="fa fa-bell-o" /> Updates
<b-badge variant="info">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-envelope-o" /> Messages
<b-badge variant="success">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-tasks" /> Tasks
<b-badge variant="danger">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-comments" /> Comments
<b-badge variant="warning">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-header
tag="div"
class="text-center">
<strong>Settings</strong>
</b-dropdown-header>
<b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
<b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
<b-dropdown-item><i class="fa fa-usd" /> Payments
<b-badge variant="secondary">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-item><i class="fa fa-file" /> Projects
<b-badge variant="primary">{{ itemsCount }}</b-badge>
</b-dropdown-item>
<b-dropdown-divider />
<b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
<b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
</template>
</AppHeaderDropdown>
</template>
<script>
import { HeaderDropdown as AppHeaderDropdown } from '@coreui/vue'
export default {
name: 'DefaultHeaderDropdownAccnt',
components: {
AppHeaderDropdown
},
data: () => {
return { itemsCount: 42 }
}
}
</script>