From e37a9d8a724a6243a493b92b4c824f260f7c9421 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=96=9F=E9=85=8C=20=E9=B5=AC=E5=85=84?= Date: Sun, 7 Feb 2016 09:12:34 +0800 Subject: [PATCH] Refine the notification panel --- botanjs/src/Astro/Blog/AstroEdit/_this.css | 4 ++ .../Astro/Blog/Components/Notification.css | 48 ++++++++++++------- .../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(-) create mode 100644 botanjs/src/externs/_AstConf_.Notification.js create mode 100644 botanjs/src/externs/_AstJson_.AJaxGetNotis.js 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;