From 8c82e73297ab7922a78d37ef9f4d94d87a5336a5 Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Tue, 5 Feb 2019 13:23:06 +0300 Subject: [PATCH] Initiated messages component --- public/index.html | 1 + src/AppMenu.vue | 3 +- src/assets/styles/primevue.css | 1 + src/components/message/Message.css | 27 ++++++++++++++ src/components/message/Message.vue | 55 +++++++++++++++++++++++++++++ src/main.js | 4 ++- src/router.js | 5 +++ src/views/flexgrid/FlexGridDemo.vue | 18 +++++----- src/views/message/MessageDemo.vue | 19 ++++++++++ 9 files changed, 122 insertions(+), 11 deletions(-) create mode 100644 src/components/message/Message.css create mode 100644 src/components/message/Message.vue create mode 100644 src/views/message/MessageDemo.vue diff --git a/public/index.html b/public/index.html index 6353d8fb3..a261edf20 100644 --- a/public/index.html +++ b/public/index.html @@ -7,6 +7,7 @@ PrimeVUE +
diff --git a/src/AppMenu.vue b/src/AppMenu.vue index 61fa16d0f..161101f99 100644 --- a/src/AppMenu.vue +++ b/src/AppMenu.vue @@ -129,7 +129,8 @@
- ● Link + ● Message + ● Toast
diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css index 8a176552c..30b8347ff 100644 --- a/src/assets/styles/primevue.css +++ b/src/assets/styles/primevue.css @@ -11,6 +11,7 @@ @import '../../components/inputtext/InputText.css'; @import '../../components/inputswitch/InputSwitch.css'; @import '../../components/listbox/Listbox.css'; +@import '../../components/message/Message.css'; @import '../../components/multiselect/MultiSelect.css'; @import '../../components/overlaypanel/OverlayPanel.css'; @import '../../components/panel/Panel.css'; diff --git a/src/components/message/Message.css b/src/components/message/Message.css new file mode 100644 index 000000000..d021ac8d6 --- /dev/null +++ b/src/components/message/Message.css @@ -0,0 +1,27 @@ +.p-messages-wrapper { + padding: 1em; + position: relative; +} + +.p-messages-icon-container, +.p-messages-close-container { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; +} + +.p-messages-text { + display: inline-block; + vertical-align: middle; +} + +.p-messages-icon { + padding: 0; + margin-right: .25em; + vertical-align: middle; +} + +.p-messages .p-messages-summary { + font-weight: bold; + margin-right: .25em; +} \ No newline at end of file diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue new file mode 100644 index 000000000..47154023b --- /dev/null +++ b/src/components/message/Message.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/src/main.js b/src/main.js index d511948e2..d9325c52c 100644 --- a/src/main.js +++ b/src/main.js @@ -16,8 +16,9 @@ import FullCalendar from './components/fullcalendar/FullCalendar'; import InputSwitch from './components/inputswitch/InputSwitch'; import InputText from './components/inputtext/InputText'; import Fieldset from './components/fieldset/Fieldset'; -import MultiSelect from './components/multiselect/MultiSelect'; import Listbox from './components/listbox/Listbox'; +import Message from './components/message/Message'; +import MultiSelect from './components/multiselect/MultiSelect'; import OverlayPanel from './components/overlaypanel/OverlayPanel'; import Panel from './components/panel/Panel'; import Password from './components/password/Password'; @@ -57,6 +58,7 @@ Vue.component('InputSwitch', InputSwitch); Vue.component('InputText', InputText); Vue.component('Listbox', Listbox); Vue.component('Fieldset', Fieldset); +Vue.component('Message', Message); Vue.component('MultiSelect', MultiSelect); Vue.component('OverlayPanel', OverlayPanel); Vue.component('Panel', Panel); diff --git a/src/router.js b/src/router.js index c0257b330..6eb586a0f 100644 --- a/src/router.js +++ b/src/router.js @@ -131,6 +131,11 @@ export default new Router({ name: 'listbox', component: () => import('./views/listbox/ListboxDemo.vue') }, + { + path: '/message', + name: 'message', + component: () => import('./views/message/MessageDemo.vue') + }, { path: '/multiselect', name: 'multiselect', diff --git a/src/views/flexgrid/FlexGridDemo.vue b/src/views/flexgrid/FlexGridDemo.vue index bc300e98e..869075867 100644 --- a/src/views/flexgrid/FlexGridDemo.vue +++ b/src/views/flexgrid/FlexGridDemo.vue @@ -23,8 +23,8 @@

Dynamic

- - +