From 5b262a510bf5212e8c1a981aaca44d1c3e82da9d Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 10 Dec 2018 13:02:09 +0300
Subject: [PATCH] Implemented Toolbar component

---
 src/AppMenu.vue                    |  1 +
 src/assets/styles/primevue.css     |  3 ++-
 src/components/toolbar/Toolbar.css | 17 +++++++++++++++++
 src/components/toolbar/Toolbar.vue | 10 ++++++++++
 src/main.js                        |  2 ++
 src/router.js                      |  5 +++++
 src/views/toolbar/ToolbarDemo.vue  | 27 +++++++++++++++++++++++++++
 7 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/components/toolbar/Toolbar.css
 create mode 100644 src/components/toolbar/Toolbar.vue
 create mode 100644 src/views/toolbar/ToolbarDemo.vue

diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index 70939c6e8..f83a78558 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -44,6 +44,7 @@
                 <div>
                     <router-link to="/panel">&#9679; Panel</router-link>
                     <router-link to="/fieldset">&#9679; Fieldset</router-link>
+                    <router-link to="/toolbar">&#9679; Toolbar</router-link>
                 </div>
             </div>
 
diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index 3ef646eec..4e24c10bf 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -3,4 +3,5 @@
 @import '../../components/listbox/ListBox.css';
 @import '../../components/button/Button.css';
 @import '../../components/panel/Panel.css';
-@import '../../components/fieldset/Fieldset.css';
\ No newline at end of file
+@import '../../components/fieldset/Fieldset.css';
+@import '../../components/toolbar/Toolbar.css';
\ No newline at end of file
diff --git a/src/components/toolbar/Toolbar.css b/src/components/toolbar/Toolbar.css
new file mode 100644
index 000000000..1d7583621
--- /dev/null
+++ b/src/components/toolbar/Toolbar.css
@@ -0,0 +1,17 @@
+.p-toolbar {
+    padding: .25em .5em;
+}
+
+.p-toolbar:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.p-toolbar-group-left {
+    float:left
+}
+
+.p-toolbar-group-right {
+    float:right
+}
\ No newline at end of file
diff --git a/src/components/toolbar/Toolbar.vue b/src/components/toolbar/Toolbar.vue
new file mode 100644
index 000000000..6760b4567
--- /dev/null
+++ b/src/components/toolbar/Toolbar.vue
@@ -0,0 +1,10 @@
+<template>
+    <div class="p-toolbar p-component">
+        <div class="p-toolbar-group-left">
+             <slot name="left"></slot>
+        </div>
+        <div class="p-toolbar-group-right">
+             <slot name="right"></slot>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 1f6190fd7..4118c359e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,7 @@ import ListBox from './components/listbox/ListBox';
 import Button from './components/button/Button';
 import Panel from './components/panel/Panel';
 import Fieldset from './components/fieldset/Fieldset';
+import Toolbar from './components/toolbar/Toolbar';
 
 import './assets/styles/primevue.css';
 import 'primeflex/primeflex.css';
@@ -18,6 +19,7 @@ Vue.component('p-button', Button);
 Vue.component('p-listBox', ListBox);
 Vue.component('p-panel', Panel);
 Vue.component('p-fieldset', Fieldset);
+Vue.component('p-toolbar', Toolbar);
 
 new Vue({
   router,
diff --git a/src/router.js b/src/router.js
index 9ee4ea7b8..78c7d4de8 100644
--- a/src/router.js
+++ b/src/router.js
@@ -35,6 +35,11 @@ export default new Router({
         path: '/fieldset',
         name: 'fieldset',
         component: () => import('./views/fieldset/FieldsetDemo.vue')
+    },
+    {
+        path: '/toolbar',
+        name: 'toolbar',
+        component: () => import('./views/toolbar/ToolbarDemo.vue')
     }
   ]
 });
diff --git a/src/views/toolbar/ToolbarDemo.vue b/src/views/toolbar/ToolbarDemo.vue
new file mode 100644
index 000000000..df8aa6f77
--- /dev/null
+++ b/src/views/toolbar/ToolbarDemo.vue
@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Toolbar</h1>
+                <p>Toolbar is a grouping component for buttons and other content.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <p-toolbar>
+                <template slot="left">
+                    <p-button label="New" icon="pi pi-plus" style="margin-right: .25em" />
+                    <p-button label="Upload" icon="pi pi-upload" class="p-button-success" />
+                    <i class="pi pi-bars p-toolbar-separator" style="margin-right: .25em" />
+                    <p-button label="Save" icon="pi pi-check" class="p-button-warning" />
+                </template>
+                
+                <template slot="right">
+                    <p-button icon="pi pi-search" style="margin-right: .25em" />
+                    <p-button icon="pi pi-calendar" class="p-button-success" style="margin-right: .25em" />
+                    <p-button icon="pi pi-times" class="p-button-danger" />
+                </template>
+            </p-toolbar>
+        </div>
+    </div>
+</template>