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",
"chartist": "^0.11.0",
"es6-promise": "^4.2.4",
"vue": "^2.5.13",
"vue-clickaway": "^2.1.0",
"vue-notifyjs": "^0.3.0",
"vue-router": "^3.0.1"
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vue2-transitions": "^0.2.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0-beta.9",
"@vue/cli-plugin-eslint": "^3.0.0-beta.9",
"@vue/cli-service": "^3.0.0-beta.9",
"@vue/eslint-config-prettier": "^3.0.0-beta.9",
"@vue/cli-plugin-babel": "^3.0.0",
"@vue/cli-plugin-eslint": "^3.0.0",
"@vue/cli-service": "^3.0.0",
"@vue/eslint-config-prettier": "^3.0.0",
"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",
"author": "cristian.jora <joracristi@gmail.com>",

30
src/App.vue
View File

@ -9,32 +9,4 @@
export default {};
</script>
<style lang="scss">
.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>
<style lang="scss"></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>
<script>
export default {
name: 'p-button',
name: 'base-button',
props: {
tag: {
type: String,

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

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

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

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

22
src/components/index.js
View File

@ -1,8 +1,9 @@
import FormGroupInput from "./Inputs/formGroupInput.vue";
import DropDown from "./Dropdown.vue";
import BaseDropdown from "./BaseDropdown.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 ChartCard from "./Cards/ChartCard.vue";
@ -10,25 +11,14 @@ import StatsCard from "./Cards/StatsCard.vue";
import SidebarPlugin from "./SidebarPlugin/index";
let components = {
FormGroupInput,
Card,
ChartCard,
StatsCard,
PaperTable,
DropDown,
SidebarPlugin
};
export default components;
export {
FormGroupInput,
Card,
ChartCard,
StatsCard,
PaperTable,
DropDown,
Button,
BaseDropdown,
BaseButton,
BaseAlert,
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>
</ul>
</nav>
<div class="copyright d-flex flex-wrap">
&copy; Coded with
<i class="fa fa-heart heart"></i> by
<a href="https://github.com/cristijora" target="_blank"> &nbsp; Cristi Jora.</a>&nbsp;
Designed by <a href="https://www.creative-tim.com/?ref=pdf-vuejs" target="_blank">&nbsp; Creative Tim.</a>
<div class="copyright float-right">
© {{year}} made with <i class="tim-icons icon-heart-2"></i> by
<a href="https://github.com/cristijora" target="_blank"> Cristi Jora</a>&nbsp;&
<a href="https://www.creative-tim.com" target="_blank">Creative Tim</a> for a better web.
</div>
</div>
</footer>
</template>
<script>
export default {};
export default {
data(){
return {
year: new Date().getFullYear()
}
}
};
</script>
<style>
</style>

2
src/main.js
View File

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

214
src/pages/Notifications.vue
View File

@ -1,115 +1,119 @@
<template>
<card title="Notifications" sub-title="Custom Vue notifications plugin">
<div>
<div class="row">
<div class="col-md-6">
<h5>Notifications Style</h5>
<div class="alert alert-info">
<span>This is a plain notification</span>
</div>
<div class="alert alert-info">
<button type="button" aria-hidden="true" class="close">×</button>
<span>This is a notification with close button.</span>
</div>
<div class="alert alert-info alert-with-icon" data-notify="container">
<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>
</div>
<div class="alert alert-info alert-with-icon" data-notify="container">
<button type="button" aria-hidden="true" class="close">×</button>
<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>
</div>
</div>
<div class="col-md-6">
<h5>Notification states</h5>
<div class="alert alert-info">
<button type="button" aria-hidden="true" class="close">×</button>
<span>
<b> Info - </b> This is a regular notification made with ".alert-info"</span>
</div>
<div class="alert alert-success">
<button type="button" aria-hidden="true" class="close">×</button>
<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="row d-flex justify-content-center">
<div>
<h5>Notifications Places
<p class="category">Click to view notifications</p>
</h5>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-3">
<p-button type="primary" block @click="notifyVue('top', 'left')">Top Left</p-button>
</div>
<div class="col-md-3">
<p-button type="primary" block @click="notifyVue('top', 'center')">Top Center</p-button>
</div>
<div class="col-md-3">
<p-button type="primary" block @click="notifyVue('top', 'right')">Top Right</p-button>
</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 class="col-md-3">
<p-button type="primary" block @click="notifyVue('bottom', 'center')">Bottom Center</p-button>
</div>
<div class="col-md-3">
<p-button type="primary" block @click="notifyVue('bottom', 'right')">Bottom Right</p-button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<card>
<h4 slot="header">Notifications Style</h4>
<base-alert type="info">
<span>This is a plain notification</span>
</base-alert>
<base-alert type="info" dismissible>
<span>This is a plain notification</span>
</base-alert>
<base-alert type="info" dismissible with-icon>
<span data-notify="icon" class="tim-icons icon-bell-55"></span>
<span data-notify="message">This is a notification with close button and icon.</span>
</base-alert>
<base-alert type="info" dismissible with-icon>
<span data-notify="icon" class="tim-icons icon-bell-55"></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>
</base-alert>
</card>
</div>
</card>
<div class="col-md-6">
<card>
<h4 slot="header">Notifications states</h4>
<base-alert type="primary" dismissible>
<span><b> Primary - </b> This is a regular notification made with ".alert-primary"</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 class="col-md-12">
<card>
<div class="places-buttons">
<div class="row">
<div class="col-md-6 ml-auto mr-auto text-center">
<h4 class="card-title">
Notifications Places
<p class="category">Click to view notifications</p>
</h4>
</div>
</div>
<div class="row">
<div class="col-lg-8 ml-auto mr-auto">
<div class="row">
<div class="col-md-4">
<base-button type="primary" block @click="notifyVue('top', 'left')">Top Left</base-button>
</div>
<div class="col-md-4">
<base-button type="primary" block @click="notifyVue('top', 'center')">Top Center</base-button>
</div>
<div class="col-md-4">
<base-button type="primary" block @click="notifyVue('top', 'right')">Top Right</base-button>
</div>
</div>
</div>
</div>
<div class="row">
<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>
</card>
</div>
</div>
</template>
<script>
import NotificationTemplate from './Notifications/NotificationTemplate';
import NotificationTemplate from './Notifications/NotificationTemplate';
import { BaseAlert } from '@/components';
export default {
data() {
return {
type: ["", "info", "success", "warning", "danger"],
notifications: {
topCenter: false
export default {
components: {
BaseAlert
},
data() {
return {
type: ["", "info", "success", "warning", "danger"],
notifications: {
topCenter: false
}
};
},
methods: {
notifyVue(verticalAlign, horizontalAlign) {
const color = Math.floor(Math.random() * 4 + 1);
this.$notify({
component: NotificationTemplate,
icon: "tim-icons icon-bell-55",
horizontalAlign: horizontalAlign,
verticalAlign: verticalAlign,
type: this.type[color]
});
}
};
},
methods: {
notifyVue(verticalAlign, horizontalAlign) {
const color = Math.floor(Math.random() * 4 + 1);
this.$notify({
component: NotificationTemplate,
icon: "tim-icons icon-bell-55",
horizontalAlign: horizontalAlign,
verticalAlign: verticalAlign,
type: this.type[color]
});
}
}
};
};
</script>
<style>
</style>

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

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

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

@ -18,9 +18,9 @@
</div>
<div class="col-3">
<p-button type="success" outline icon>
<base-button type="success" outline icon>
<i class="fa fa-envelope"></i>
</p-button>
</base-button>
</div>
</div>
</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 Notify from "@/components/NotificationPlugin";
import GlobalComponents from "./globalComponents";
import GlobalDirectives from "./globalDirectives";
import "es6-promise/auto";
@ -9,6 +7,8 @@ import "es6-promise/auto";
//css assets
import "bootstrap/dist/css/bootstrap.css";
import "@/assets/sass/black-dashboard.scss";
import "@/assets/css/nucleo-icons.css";
import "@/assets/demo/demo.css";
export default {
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
*/
@ -6,9 +6,9 @@ import { FormGroupInput, Card, DropDown, Button } from "../components/index";
const GlobalComponents = {
install(Vue) {
Vue.component("fg-input", FormGroupInput);
Vue.component("drop-down", DropDown);
Vue.component("card", Card);
Vue.component("p-button", Button);
Vue.component(Card.name, Card);
Vue.component(BaseDropdown.name, BaseDropdown);
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
*/
const GlobalDirectives = {
install(Vue) {
Vue.directive("click-outside", vClickOutside);
install (Vue) {
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