Refine the notification panel

botanjs/src/Astro/Blog/AstroEdit/_this.css

@@ -10,6 +10,10 @@
 	text-align: right;
 }
 
+.ae_prop_name {
+	opacity: 0.8;
+}
+
 .ae_prop_value {
 	font-size: 1.2em;
 	text-align: right;

botanjs/src/Astro/Blog/Components/Notification.css

@@ -1,6 +1,7 @@
 .notifications {
-	position: relative;
+	float: right;
 	cursor: default;
+	position: relative;
 }
 
 .nt_body {
@@ -10,25 +11,25 @@
 	left: -300px;
 
 	max-width: 300px;
-	max-height: 600px;
 
 	text-align: left;
 
 	display: none;
+	z-index: 1;
 }
 
-.nt_body > div {
-	float: right;
-}
+.nt_body > div { float: right; }
 
 .nt_button {
+	float: left;
+
 	text-align: left;
 	display: block;
 
-	margin: 0.2em 0;
+	padding: 0 0.5em 0 0;
 
 	color: white;
-	background: #444;
+	background-color: #444;
 }
 
 .nt_button:before {
@@ -36,12 +37,13 @@
 	display: inline-block;
 
 	padding: 0 0.5em;
-	line-height: 1.5em;
+	margin-right: 0.5em;
+	line-height: 2em;
 
 	background-color: royalblue;
 }
 
-.nt_button:before, .nt_switch:before {
+.nt_button:before, .nt_switch:before, .nt_icon_settings {
 	-webkit-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 	-moz-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 	-ms-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
@@ -61,6 +63,7 @@
 }
 
 .nt_arrow {
+	margin-top: 0.2em;
 	border-top: 0.8em solid transparent;
 	border-left: 1em solid #444;
 	border-bottom: 0.8em solid transparent;
@@ -73,7 +76,9 @@
 	background: #444;
 
 	margin-right: 0.5em;
-	margin-top: -1.6em;
+	margin-top: -2em;
+
+	overflow: hidden;
 }
 
 .nt_date {
@@ -81,15 +86,18 @@
 }
 
 .nt_container > ul {
-	white-space: nowrap;
+	max-height: 400px;
+	width: 120%;
 
-	overflow: hidden;
+	white-space: nowrap;
 	text-overflow: ellipsis;
+	overflow-y: scroll;
 
 	color: white;
 }
 
 .nt_container > ul > li {
+	width: 80%;
 	padding: 0.25em 0.5em;
 	color: white;
 	text-decoration: none;
@@ -100,9 +108,17 @@
 }
 
 .nt_icon_settings {
-	background-image: url(/assets/layout-images/settings.png);
-	padding-left: 25px !important;
-	background-repeat: no-repeat;
+	float: right;
+
+	padding: 0em 0.2em;
+	width: 2em; height: 2em;
+
+	background: #333 url(/assets/layout-images/settings.png) no-repeat center center;
+	background-size: 1.5em 1.5em;
+}
+
+.nt_icon_settings:hover {
+	background-color: #555;
 }
 
 ul.nt_smenu {
@@ -128,7 +144,7 @@ ul.nt_smenu > li > span {
 
 .nt_switch {
 	width: 2.5em;
-	height: 1em;
+	height: 1.2em;
 	text-align: center;
 	overflow: hidden;
 }

botanjs/src/Astro/Blog/Components/Notification.js

@@ -34,10 +34,10 @@
 		var stage = Dand.id( "notifications" );
 		var bodyStyle = Dand.id( "nt_body" ).style;
 
+		/** @type {_AstConf_.Notification} */
 		var conf = Config.get( "Notification" );
-		var base_path = Config.get( "BasePath" );
 
-		var processor = base_path + conf.paths.get_mesg;
+		var processor = conf.processor;
 		var contextMenu;
 
 		var itemsMenu;
@@ -49,7 +49,7 @@
 
 		var followLink = function(e)
 		{
-			window.location = base_path + this.link;
+			window.location = this.link;
 		};
 
 		var toggleFollow = function(e)
@@ -155,20 +155,22 @@
 
 			for( var n in e.data )
 			{
+				/** @type {_AstJson_.AJaxGetNotis} */
+				var data = e.data[n];
 				// Create items
-				items[items.length] = new IKey(
-					e.data[n].message 
+				items[ items.length ] = new IKey(
+					data.message 
 					, new EventKey(
-						"m_" + e.data[n].id
-						, readNotification.bind( e.data[n] )
+						"m_" + data.id
+						, readNotification.bind( data )
 					)
 				);
 			}
 
-			items[ items.length ] = new EventKey( "Settings", popupSettings );
+			Dand.glass( "nt_icon_settings", true )[0].addEventListener( "Click", popupSettings );
 
 			contextMenu = new ContextMenu(
-				stage
+				Dand.id( "nt_open_menu" )
 				, items
 				, "LMB"
 				, nt_body
@@ -215,16 +217,17 @@
 
 			for( n in e.data )
 			{
-				var li = contextMenu.getItemByKey( "m_" + e.data[n].id ).stage;
+				/** @type {_AstJson_.AJaxGetNotis} */
+				var data = e.data[n];
+
+				var li = contextMenu.getItemByKey( "m_" + data.id ).stage;
 				li.appendChild(
 					Dand.wrapc(
 						"nt_date"
-						, smstamp( new Date( Number( e.data[n].date ) * 1000 ) )
+						, smstamp( new Date( data.date ) )
 					)
 				);
 			}
-
-			contextMenu.getItemByKey("Settings").stage.className = "nt_icon_settings";
 		};
 
 		postData( processor, { "action": "get" }, createContextMenu );

botanjs/src/externs/_AstConf_.Notification.js

@@ -0,0 +1,4 @@
+/** @type {Object} */
+_AstConf_.Notification = {};
+/** @type {String} */
+_AstConf_.Notification.processor;

botanjs/src/externs/_AstJson_.AJaxGetNotis.js

@@ -0,0 +1,8 @@
+/** @type {Object} */
+_AstJson_.AJaxGetNotis = {};
+/** @type {String} */
+_AstJson_.AJaxGetNotis.message;
+/** @type {String} */
+_AstJson_.AJaxGetNotis.id;
+/** @type {String} */
+_AstJson_.AJaxGetNotis.date;