commit e37a9d8a724a6243a493b92b4c824f260f7c9421
| author | 斟酌 鵬兄 <tgckpg@gmail.com> |
|---|
| date | 2016-02-07T01:12:34Z |
|---|
| subject | Refine the notification panel |
|---|
commit e37a9d8a724a6243a493b92b4c824f260f7c9421
Author: 斟酌 鵬兄 <tgckpg@gmail.com>
Date: 2016-02-07T01:12:34Z
Refine the notification panel
---
botanjs/src/Astro/Blog/AstroEdit/_this.css | 4 ++
botanjs/src/Astro/Blog/Components/Notification.css | 48 ++++++++++++++--------
botanjs/src/Astro/Blog/Components/Notification.js | 29 +++++++------
botanjs/src/externs/_AstConf_.Notification.js | 4 ++
botanjs/src/externs/_AstJson_.AJaxGetNotis.js | 8 ++++
5 files changed, 64 insertions(+), 29 deletions(-)
diff --git a/botanjs/src/Astro/Blog/AstroEdit/_this.css b/botanjs/src/Astro/Blog/AstroEdit/_this.css
index 3a46c2a..057425e 100644
--- a/botanjs/src/Astro/Blog/AstroEdit/_this.css
+++ b/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;
diff --git a/botanjs/src/Astro/Blog/Components/Notification.css b/botanjs/src/Astro/Blog/Components/Notification.css
index 3133732..7f60969 100644
--- a/botanjs/src/Astro/Blog/Components/Notification.css
+++ b/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;
}
diff --git a/botanjs/src/Astro/Blog/Components/Notification.js b/botanjs/src/Astro/Blog/Components/Notification.js
index e829485..e9fe2c8 100644
--- a/botanjs/src/Astro/Blog/Components/Notification.js
+++ b/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 );
diff --git a/botanjs/src/externs/_AstConf_.Notification.js b/botanjs/src/externs/_AstConf_.Notification.js
new file mode 100644
index 0000000..407bd60
--- /dev/null
+++ b/botanjs/src/externs/_AstConf_.Notification.js
@@ -0,0 +1,4 @@
+/** @type {Object} */
+_AstConf_.Notification = {};
+/** @type {String} */
+_AstConf_.Notification.processor;
diff --git a/botanjs/src/externs/_AstJson_.AJaxGetNotis.js b/botanjs/src/externs/_AstJson_.AJaxGetNotis.js
new file mode 100644
index 0000000..6bf649f
--- /dev/null
+++ b/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;