From ff129222b93daf64d5e5221bb140d40486ab2d50 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Wed, 6 Dec 2017 21:38:04 +0100
Subject: [PATCH] upd: ... (added component 'notification-stack' to wrapper,
 can be shown with 'gstore.data.nstack=true' + its css)

---
 public_html/css/layout.css             | 25 +++++++++++
 public_html/css/notification-stack.css | 58 ++++++++++++++++++++++++++
 view/home.php                          |  1 +
 view/vue-config.js                     |  5 ++-
 view/vue/notification-stack.vue        | 24 +++++++++++
 view/vue/wrapper.vue                   | 14 ++++++-
 6 files changed, 124 insertions(+), 3 deletions(-)
 create mode 100644 public_html/css/notification-stack.css
 create mode 100644 view/vue/notification-stack.vue

diff --git a/public_html/css/layout.css b/public_html/css/layout.css
index 8e21df4..9435521 100644
--- a/public_html/css/layout.css
+++ b/public_html/css/layout.css
@@ -91,4 +91,29 @@ body{
 #WRAPPER.min #CONTAINER{
 	left: 3.5em;
 	width: calc( 100% - 3.5em );
+}
+
+
+/* Notification Stack */
+#WRAPPER #NOTIF-STACK{
+	display: none;
+	position: absolute;
+		top: 4em;
+		left: calc( 100% - 15em );
+		width: 14em;
+		min-height: 2em;
+		height: auto;
+
+	border: 1px solid #ddd;
+	border-radius: 3px;
+
+	background-color: #fff;
+
+	overflow: hidden;
+
+	z-index: 101;
+}
+
+#WRAPPER #NOTIF-STACK.active{
+	display: block;
 }
\ No newline at end of file
diff --git a/public_html/css/notification-stack.css b/public_html/css/notification-stack.css
new file mode 100644
index 0000000..a9be6d7
--- /dev/null
+++ b/public_html/css/notification-stack.css
@@ -0,0 +1,58 @@
+/* Header */
+#NOTIF-STACK > .head{
+	display: block;
+	position: relative;
+		width: 100%;
+
+	padding: .7em 0;
+
+	border-radius: 3px 3px 0 0;
+	border-bottom: 1px solid #ddd;
+
+	text-align: center;
+	color: #888;
+}
+
+/* Container */
+#NOTIF-STACK > .body{
+	display: block;
+	position: relative;
+		width: 100%;
+		min-height: 2em;
+		height: auto;
+		max-height: 12em;
+
+	border-radius: 0 0 3px 3px;
+
+	overflow: auto;
+
+}
+
+/* Items */
+#NOTIF-STACK > .body > span{
+	display: block;
+	position: relative;
+
+	padding: .8em 1em;
+
+	border-bottom: 1px solid #ddd;
+
+	background-color: #fff;
+
+	color: #555;
+
+	cursor: pointer;
+
+	transition: background-color .2s ease-in-out,
+				color            .2s ease-in-out;
+}
+
+#NOTIF-STACK > .body > span:hover{
+	background-color: #eee;
+	color: #333;
+}
+
+#NOTIF-STACK > .body > span:last-child{
+	border: 0;
+	border-radius: 0 0 3px 3px;
+}
\ No newline at end of file
diff --git a/view/home.php b/view/home.php
index 0565d56..a50101e 100755
--- a/view/home.php
+++ b/view/home.php
@@ -18,6 +18,7 @@
 		<link rel='stylesheet' type='text/css' href='/css/menu.css'>
 		<link rel='stylesheet' type='text/css' href='/css/header.css'>
 		<link rel='stylesheet' type='text/css' href='/css/container.css'>
+		<link rel='stylesheet' type='text/css' href='/css/notification-stack.css'>
 
 	<!-- JS dependencies -->
 	<script type='text/javascript' src='/js/_SERVER.js'></script>
diff --git a/view/vue-config.js b/view/vue-config.js
index 2ea0a30..c64aff0 100644
--- a/view/vue-config.js
+++ b/view/vue-config.js
@@ -89,4 +89,7 @@ gstore.add('func', {
 
 
 // new-message container
-gstore.add('new_msg', '');
\ No newline at end of file
+gstore.add('new_msg', '');
+
+// notification stack visibility
+gstore.add('nstack', false);
\ No newline at end of file
diff --git a/view/vue/notification-stack.vue b/view/vue/notification-stack.vue
new file mode 100644
index 0000000..ae0f4e1
--- /dev/null
+++ b/view/vue/notification-stack.vue
@@ -0,0 +1,24 @@
+<template>
+
+	<div id='NOTIF-STACK' :class='gstore.nstack ? "active" : ""'>
+
+		<!-- Header -->
+		<div class='head'>Notifications</div>
+
+		<!-- Body -->
+		<div class='body'>
+			<span v-for='n in gstore.notif[0].data'><b>{{ n }}</b> est connecté</span>
+		</div>
+
+	</div>
+
+</template>
+
+
+<script>
+export default {
+	name: 'NOTIFICATION_STACK',
+	data(){ return { gstore: gstore.data }; },
+	methods: {}
+}
+</script>
\ No newline at end of file
diff --git a/view/vue/wrapper.vue b/view/vue/wrapper.vue
index 9e01d8c..d0c649b 100755
--- a/view/vue/wrapper.vue
+++ b/view/vue/wrapper.vue
@@ -10,6 +10,13 @@
 		<!-- Container -->
 		<router-view></router-view>
 
+
+		<!-- Notification Stack -->
+		<notifstack-comp></notifstack-comp>
+
+		<!-- Login form -->
+		<!-- <loginform-comp></loginform-comp> -->
+
 	</div>
 </template>
 
@@ -18,13 +25,16 @@
 
 	import header_vue from './header.vue'
 	import menu_vue   from './menu.vue'
+	import notifstack_vue  from './notification-stack.vue'
+	// import loginform_vue   from './login-form.vue'
 
 	export default {
 		name: 'wrapper',
 		data(){ return { gstore: gstore.data }; },
 		components: {
-			'HeaderComp': header_vue,
-			'MenuComp':   menu_vue
+			'HeaderComp':     header_vue,
+			'MenuComp':       menu_vue,
+			'NotifstackComp': notifstack_vue
 		}
 	}