tobi/vue-black-dash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleanup, wraup up notifications page, rename some components

Browse Source 
Update packages
This commit is contained in:
cristij 2018-08-20 19:41:22 +03:00
parent 8ddb2d5f21
commit 791dabb50b
17 changed files with 2018 additions and 1625 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
package.json
View File

@ -13,18 +13,18 @@
"bootstrap": "^4.0.0", "bootstrap": "^4.0.0",
"chartist": "^0.11.0", "chartist": "^0.11.0",
"es6-promise": "^4.2.4", "es6-promise": "^4.2.4",
"vue": "^2.5.13", "vue": "^2.5.17",
"vue-clickaway": "^2.1.0", "vue-router": "^3.0.1",
"vue-notifyjs": "^0.3.0", "vue2-transitions": "^0.2.3"
"vue-router": "^3.0.1"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0-beta.9", "@vue/cli-plugin-babel": "^3.0.0",
"@vue/cli-plugin-eslint": "^3.0.0-beta.9", "@vue/cli-plugin-eslint": "^3.0.0",
"@vue/cli-service": "^3.0.0-beta.9", "@vue/cli-service": "^3.0.0",
"@vue/eslint-config-prettier": "^3.0.0-beta.9", "@vue/eslint-config-prettier": "^3.0.0",
"node-sass": "^4.8.3", "node-sass": "^4.8.3",
"sass-loader": "^6.0.7" "sass-loader": "^6.0.7",
"vue-template-compiler": "^2.5.17"
}, },
"description": "A sample admin dashboard based on paper dashboard UI template", "description": "A sample admin dashboard based on paper dashboard UI template",
"author": "cristian.jora <joracristi@gmail.com>", "author": "cristian.jora <joracristi@gmail.com>",

30
src/App.vue
View File

@ -9,32 +9,4 @@
export default {}; export default {};
</script> </script>
<style lang="scss"> <style lang="scss"></style>
.vue-notifyjs.notifications {
.alert {
z-index: 10000;
}
.list-move {
transition: transform 0.3s, opacity 0.4s;
}
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active {
transition: transform 0.2s ease-in, opacity 0.4s ease-in;
}
.list-leave-active {
transition: transform 1s ease-out, opacity 0.4s ease-out;
}
.list-enter {
opacity: 0;
transform: scale(1.1);
}
.list-leave-to {
opacity: 0;
transform: scale(1.2, 0.7);
}
}
</style>

52
src/components/BaseAlert.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<fade-transition>
<div v-if="visible" class="alert" :class="[`alert-${type}`, { 'alert-with-icon': withIcon }]" role="alert">
<slot v-if="!dismissible"></slot>
<div v-else class="container">
<slot></slot>
<slot name="dismiss-icon">
<button type="button" class="close" aria-label="Close" @click="dismissAlert">
<span aria-hidden="true">
<i class="tim-icons icon-simple-remove"></i>
</span>
</button>
</slot>
</div>
</div>
</fade-transition>
</template>
<script>
import { FadeTransition } from 'vue2-transitions';
export default {
name: 'alert',
components: {
FadeTransition
},
props: {
type: {
type: String,
default: 'default',
description: 'Alert type'
},
dismissible: {
type: Boolean,
default: false
},
withIcon: {
type: Boolean,
default: false
}
},
data() {
return {
visible: true
}
},
methods: {
dismissAlert() {
this.visible = false;
}
}
}
</script>

2
src/components/Button.vue → src/components/BaseButton.vue
View File

@ -22,7 +22,7 @@
</template> </template>
<script> <script>
export default { export default {
name: 'p-button', name: 'base-button',
props: { props: {
tag: { tag: {
type: String, type: String,

1
src/components/Dropdown.vue → src/components/BaseDropdown.vue
View File

@ -21,6 +21,7 @@
</template> </template>
<script> <script>
export default { export default {
name: 'base-dropdown',
props: { props: {
tag: { tag: {
type: String, type: String,

7
src/components/NotificationPlugin/Notification.vue
View File

@ -30,7 +30,9 @@ export default {
components: { components: {
contentRender: { contentRender: {
props: ['component'], props: ['component'],
render: h => h(this.component) render(h) {
return h(this.component)
}
} }
}, },
props: { props: {
@ -153,7 +155,8 @@ export default {
z-index: 10000; z-index: 10000;
&[data-notify='container'] { &[data-notify='container'] {
width: 400px; width: 480px;
cursor: pointer;
} }
&.center { &.center {

22
src/components/index.js
View File

@ -1,8 +1,9 @@
import FormGroupInput from "./Inputs/formGroupInput.vue"; import FormGroupInput from "./Inputs/formGroupInput.vue";
import DropDown from "./Dropdown.vue"; import BaseDropdown from "./BaseDropdown.vue";
import PaperTable from "./PaperTable.vue"; import PaperTable from "./PaperTable.vue";
import Button from "./Button"; import BaseButton from "./BaseButton";
import BaseAlert from "./BaseAlert";
import Card from "./Cards/Card.vue"; import Card from "./Cards/Card.vue";
import ChartCard from "./Cards/ChartCard.vue"; import ChartCard from "./Cards/ChartCard.vue";
@ -10,25 +11,14 @@ import StatsCard from "./Cards/StatsCard.vue";
import SidebarPlugin from "./SidebarPlugin/index"; import SidebarPlugin from "./SidebarPlugin/index";
let components = {
FormGroupInput,
Card,
ChartCard,
StatsCard,
PaperTable,
DropDown,
SidebarPlugin
};
export default components;
export { export {
FormGroupInput, FormGroupInput,
Card, Card,
ChartCard, ChartCard,
StatsCard, StatsCard,
PaperTable, PaperTable,
DropDown, BaseDropdown,
Button, BaseButton,
BaseAlert,
SidebarPlugin SidebarPlugin
}; };

15
src/directives/click-ouside.js Normal file
View File

@ -0,0 +1,15 @@
export default {
bind: function (el, binding, vnode) {
el.clickOutsideEvent = function (event) {
// here I check that click was outside the el and his childrens
if (!(el == event.target || el.contains(event.target))) {
// and if it did, call method provided in attribute value
vnode.context[binding.expression](event);
}
};
document.body.addEventListener('click', el.clickOutsideEvent)
},
unbind: function (el) {
document.body.removeEventListener('click', el.clickOutsideEvent)
},
}

17
src/layout/dashboard/ContentFooter.vue
View File

@ -8,17 +8,22 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<div class="copyright d-flex flex-wrap"> <div class="copyright float-right">
&copy; Coded with © {{year}} made with <i class="tim-icons icon-heart-2"></i> by
<i class="fa fa-heart heart"></i> by <a href="https://github.com/cristijora" target="_blank"> Cristi Jora</a>&nbsp;&
<a href="https://github.com/cristijora" target="_blank"> &nbsp; Cristi Jora.</a>&nbsp; <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a> for a better web.
Designed by <a href="https://www.creative-tim.com/?ref=pdf-vuejs" target="_blank">&nbsp; Creative Tim.</a>
</div> </div>
</div> </div>
</footer> </footer>
</template> </template>
<script> <script>
export default {}; export default {
data(){
return {
year: new Date().getFullYear()
}
}
};
</script> </script>
<style> <style>
</style> </style>

2
src/main.js
View File

@ -3,8 +3,6 @@ import App from "./App";
import router from "./router/index"; import router from "./router/index";
import BlackDashboard from "./plugins/blackDashboard"; import BlackDashboard from "./plugins/blackDashboard";
import "vue-notifyjs/themes/default.css";
Vue.use(BlackDashboard); Vue.use(BlackDashboard);
/* eslint-disable no-new */ /* eslint-disable no-new */

134
src/pages/Notifications.vue
View File

@ -1,94 +1,98 @@
<template> <template>
<card title="Notifications" sub-title="Custom Vue notifications plugin">
<div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<h5>Notifications Style</h5> <card>
<div class="alert alert-info"> <h4 slot="header">Notifications Style</h4>
<base-alert type="info">
<span>This is a plain notification</span> <span>This is a plain notification</span>
</div> </base-alert>
<div class="alert alert-info"> <base-alert type="info" dismissible>
<button type="button" aria-hidden="true" class="close">×</button> <span>This is a plain notification</span>
<span>This is a notification with close button.</span> </base-alert>
</div> <base-alert type="info" dismissible with-icon>
<div class="alert alert-info alert-with-icon" data-notify="container"> <span data-notify="icon" class="tim-icons icon-bell-55"></span>
<button type="button" aria-hidden="true" class="close">×</button>
<span data-notify="icon" class="ti-bell"></span>
<span data-notify="message">This is a notification with close button and icon.</span> <span data-notify="message">This is a notification with close button and icon.</span>
</div> </base-alert>
<div class="alert alert-info alert-with-icon" data-notify="container"> <base-alert type="info" dismissible with-icon>
<button type="button" aria-hidden="true" class="close">×</button> <span data-notify="icon" class="tim-icons icon-bell-55"></span>
<span data-notify="icon" class="ti-pie-chart"></span>
<span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span> <span data-notify="message">This is a notification with close button and icon and have many lines. You can see that the icon and the close button are always vertically aligned. This is a beautiful notification. So you don't have to worry about the style.</span>
</div> </base-alert>
</card>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<h5>Notification states</h5> <card>
<div class="alert alert-info"> <h4 slot="header">Notifications states</h4>
<button type="button" aria-hidden="true" class="close">×</button> <base-alert type="primary" dismissible>
<span> <span><b> Primary - </b> This is a regular notification made with ".alert-primary"</span>
<b> Info - </b> This is a regular notification made with ".alert-info"</span> </base-alert>
<base-alert type="info" dismissible>
<span><b> Info - </b> This is a regular notification made with ".alert-info"</span>
</base-alert>
<base-alert type="success" dismissible>
<span><b> Success - </b> This is a regular notification made with ".alert-success"</span>
</base-alert>
<base-alert type="warning" dismissible>
<span><b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
</base-alert>
<base-alert type="danger" dismissible>
<span><b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
</base-alert>
</card>
</div> </div>
<div class="alert alert-success"> <div class="col-md-12">
<button type="button" aria-hidden="true" class="close">×</button> <card>
<span>
<b> Success - </b> This is a regular notification made with ".alert-success"</span>
</div>
<div class="alert alert-warning">
<button type="button" aria-hidden="true" class="close">×</button>
<span>
<b> Warning - </b> This is a regular notification made with ".alert-warning"</span>
</div>
<div class="alert alert-danger">
<button type="button" aria-hidden="true" class="close">×</button>
<span>
<b> Danger - </b> This is a regular notification made with ".alert-danger"</span>
</div>
</div>
</div>
<br>
<br>
<div class="places-buttons"> <div class="places-buttons">
<div class="row d-flex justify-content-center"> <div class="row">
<div> <div class="col-md-6 ml-auto mr-auto text-center">
<h5>Notifications Places <h4 class="card-title">
Notifications Places
<p class="category">Click to view notifications</p> <p class="category">Click to view notifications</p>
</h5> </h4>
</div> </div>
</div> </div>
<div class="row d-flex justify-content-center"> <div class="row">
<div class="col-md-3"> <div class="col-lg-8 ml-auto mr-auto">
<p-button type="primary" block @click="notifyVue('top', 'left')">Top Left</p-button> <div class="row">
<div class="col-md-4">
<base-button type="primary" block @click="notifyVue('top', 'left')">Top Left</base-button>
</div> </div>
<div class="col-md-3"> <div class="col-md-4">
<p-button type="primary" block @click="notifyVue('top', 'center')">Top Center</p-button> <base-button type="primary" block @click="notifyVue('top', 'center')">Top Center</base-button>
</div> </div>
<div class="col-md-3"> <div class="col-md-4">
<p-button type="primary" block @click="notifyVue('top', 'right')">Top Right</p-button> <base-button type="primary" block @click="notifyVue('top', 'right')">Top Right</base-button>
</div> </div>
</div> </div>
<div class="row d-flex justify-content-center">
<div class="col-md-3">
<p-button type="primary" block @click="notifyVue('bottom', 'left')">Bottom Left</p-button>
</div> </div>
<div class="col-md-3">
<p-button type="primary" block @click="notifyVue('bottom', 'center')">Bottom Center</p-button>
</div> </div>
<div class="col-md-3"> <div class="row">
<p-button type="primary" block @click="notifyVue('bottom', 'right')">Bottom Right</p-button> <div class="col-lg-8 ml-auto mr-auto">
<div class="row">
<div class="col-md-4">
<base-button type="primary" block @click="notifyVue('bottom', 'left')">Bottom Left</base-button>
</div>
<div class="col-md-4">
<base-button type="primary" block @click="notifyVue('bottom', 'center')">Bottom Center</base-button>
</div>
<div class="col-md-4">
<base-button type="primary" block @click="notifyVue('bottom', 'right')">Bottom Right</base-button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</card> </card>
</div>
</div>
</template> </template>
<script> <script>
import NotificationTemplate from './Notifications/NotificationTemplate'; import NotificationTemplate from './Notifications/NotificationTemplate';
import { BaseAlert } from '@/components';
export default { export default {
components: {
BaseAlert
},
data() { data() {
return { return {
type: ["", "info", "success", "warning", "danger"], type: ["", "info", "success", "warning", "danger"],
@ -109,7 +113,7 @@ export default {
}); });
} }
} }
}; };
</script> </script>
<style> <style>
</style> </style>

4
src/pages/UserProfile/EditProfileForm.vue
View File

@ -92,11 +92,11 @@
</div> </div>
</div> </div>
<div class="text-center"> <div class="text-center">
<p-button type="info" <base-button type="info"
round round
@click.native.prevent="updateProfile"> @click.native.prevent="updateProfile">
Update Profile Update Profile
</p-button> </base-button>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
</form> </form>

4
src/pages/UserProfile/MembersCard.vue
View File

@ -18,9 +18,9 @@
</div> </div>
<div class="col-3"> <div class="col-3">
<p-button type="success" outline icon> <base-button type="success" outline icon>
<i class="fa fa-envelope"></i> <i class="fa fa-envelope"></i>
</p-button> </base-button>
</div> </div>
</div> </div>
</li> </li>

6
src/plugins/blackDashboard.js
View File

@ -1,7 +1,5 @@
import Notify from "vue-notifyjs";
import "@/assets/css/nucleo-icons.css";
import "@/assets/demo/demo.css";
import SideBar from "@/components/SidebarPlugin"; import SideBar from "@/components/SidebarPlugin";
import Notify from "@/components/NotificationPlugin";
import GlobalComponents from "./globalComponents"; import GlobalComponents from "./globalComponents";
import GlobalDirectives from "./globalDirectives"; import GlobalDirectives from "./globalDirectives";
import "es6-promise/auto"; import "es6-promise/auto";
@ -9,6 +7,8 @@ import "es6-promise/auto";
//css assets //css assets
import "bootstrap/dist/css/bootstrap.css"; import "bootstrap/dist/css/bootstrap.css";
import "@/assets/sass/black-dashboard.scss"; import "@/assets/sass/black-dashboard.scss";
import "@/assets/css/nucleo-icons.css";
import "@/assets/demo/demo.css";
export default { export default {
install(Vue) { install(Vue) {

8
src/plugins/globalComponents.js
View File

@ -1,4 +1,4 @@
import { FormGroupInput, Card, DropDown, Button } from "../components/index"; import { FormGroupInput, Card, BaseDropdown, BaseButton } from "../components/index";
/** /**
* You can register global components here and use them as a plugin in your main Vue instance * You can register global components here and use them as a plugin in your main Vue instance
*/ */
@ -6,9 +6,9 @@ import { FormGroupInput, Card, DropDown, Button } from "../components/index";
const GlobalComponents = { const GlobalComponents = {
install(Vue) { install(Vue) {
Vue.component("fg-input", FormGroupInput); Vue.component("fg-input", FormGroupInput);
Vue.component("drop-down", DropDown); Vue.component(Card.name, Card);
Vue.component("card", Card); Vue.component(BaseDropdown.name, BaseDropdown);
Vue.component("p-button", Button); Vue.component(BaseButton.name, BaseButton);
} }
}; };

11
src/plugins/globalDirectives.js Normal file → Executable file
View File

@ -1,13 +1,14 @@
import { directive as vClickOutside } from "vue-clickaway"; import clickOutside from '../directives/click-ouside.js';
/** /**
* You can register global directives here and use them as a plugin in your main Vue instance * You can register global directives here and use them as a plugin in your main Vue instance
*/ */
const GlobalDirectives = { const GlobalDirectives = {
install(Vue) { install (Vue) {
Vue.directive("click-outside", vClickOutside); Vue.directive('click-outside', clickOutside);
} }
}; }
export default GlobalDirectives; export default GlobalDirectives

3230
yarn.lock
View File

File diff suppressed because it is too large Load Diff