-rw-r--r-- | frontend/gamma/css/web.css | 56 | ||||
-rw-r--r-- | frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageHeader.js | 4 | ||||
-rw-r--r-- | frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js | 32 |
3 files changed, 85 insertions, 7 deletions
diff --git a/frontend/gamma/css/web.css b/frontend/gamma/css/web.css index 011831a..7d1745b 100644 --- a/frontend/gamma/css/web.css +++ b/frontend/gamma/css/web.css @@ -890,7 +890,7 @@ div.modalDialogMask.userInfoBoxMask { div.userInfoBox { position: absolute; width: 160px; - height: 120px; + height: 200px; top: 100px; left: 15px; color: white; @@ -958,9 +958,59 @@ div.userInfoBox div.body ul li span.number { font-weight: bold; padding-right: 3px; } +div.userInfoBox div.body div.accountInfo { + margin-top: 6px; + border-top: 1px solid white; + border-color: #f4aa84; +} +div.userInfoBox div.body div.accountInfo h5 { + margin: 0px; + padding-top: 8px; + padding-bottom: 8px; + font-size: 8pt; + font-weight: normal; +} +div.userInfoBox div.body div.accountInfo span.label { + font-size: 9pt; + font-weight: normal; + padding-right: 4px; + display: inline-block; + width: 45px; +} +div.userInfoBox div.body div.accountInfo span.label:after { + content: ":"; +} +div.userInfoBox div.body div.accountInfo span.status { + font-size: 10pt; +} +div.userInfoBox div.body div.accountInfo span.expriation { + font-size: 9pt; +} +div.userInfoBox div.body div.accountInfo div.payButton { + float: right; + padding-top: 6px; + text-align: right; +} +div.userInfoBox div.body div.accountInfo div.payButton a { + border: 0px; + margin-top: 0px; + padding: 0px; + color: white; + display: inline-block; + padding: 2px 5px 2px 5px; + border-radius: 4px; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + font-size: 9pt; + font-weight: normal; + background-color: #d15a22; +} +div.userInfoBox div.body div.accountInfo div.payButton a:hover { + background-color: #8c3b15; +} div.userInfoBox div.body a { display: block; - margin-top: 8px; + margin-top: 4px; border-top: 1px solid white; padding-top: 6px; font-size: 10pt; @@ -974,7 +1024,7 @@ div.userInfoBox div.body a:hover { } div.sidePanels { float: left; - margin-top: 106px; + margin-top: 186px; margin-left: 20px; width: 160px; } diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageHeader.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageHeader.js index 5e49fb5..3c57f67 100644 --- a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageHeader.js +++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/PageHeader.js @@ -49,7 +49,7 @@ Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.PageHeader, Clipperz.PM.UI.Co 'iframeURL': function () { // return './rss_view.html'; - return 'http://www.clipperz.com/files/clipperz.com/appTips/index.html'; + return 'https://www.clipperz.com/tips/index.html'; }, //------------------------------------------------------------------------- @@ -60,7 +60,7 @@ Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.PageHeader, Clipperz.PM.UI.Co {tag:'ul', children:[ {tag:'li', children:[{tag:'a', id:'donateHeaderLink', stringID:'pageHeader.donation', href:'http://www.clipperz.com/donations', target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.donation')}]}, {tag:'li', children:[{tag:'a', id:'forumHeaderLink', stringID:'pageHeader.forum', href:'http://www.clipperz.com/forum', target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.forum')}]}, - {tag:'li', children:[{tag:'a', id:'creditsHeaderLink', stringID:'pageHeader.credits', href:'http://www.clipperz.com/credits', target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.credits')}]}, +// {tag:'li', children:[{tag:'a', id:'creditsHeaderLink', stringID:'pageHeader.credits', href:'http://www.clipperz.com/credits', target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.credits')}]}, {tag:'li', children:[{tag:'a', id:'feedbackHeaderLink', stringID:'pageHeader.feedback', href:'http://www.clipperz.com/contact', target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.feedback')}]}, {tag:'li', children:[{tag:'a', id:'helpHeaderLink', stringID:'pageHeader.help', href:'http://www.clipperz.com/support/user_guide', target:'_blank', html:Clipperz.PM.Strings.getValue('pageHeader.help')}]} ]} diff --git a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js index fbf58e0..91085cf 100644 --- a/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js +++ b/frontend/gamma/js/Clipperz/PM/UI/Web/Components/UserInfoBox.js @@ -166,13 +166,34 @@ Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.UserInfoBox, Clipperz.PM.UI.C {tag:'span', id:this.getId('directLoginsLabel'), html:"direct logins"} ]} ]}, + {tag:'div', cls:'accountInfo', children:[ + {tag:'div', cls:'payButton', children:[ + {tag:'a', href:'#', id:this.getId('payButton'), cls:'info', html:"info"} + ]}, + {tag:'h5', html:"Account info"}, + {tag:'div', cls:'accountStatus', children:[ + {tag:'span', cls:'label', html:"status"}, + {tag:'span', cls:'status', html:"early adopter"} + ]}, + {tag:'div', cls:'accountLevel', children:[ + {tag:'span', cls:'label', html:"level"}, +// {tag:'span', cls:'level', html:"★☆☆☆"} + {tag:'span', cls:'level', html:"☆☆☆☆"} + ]}, + {tag:'div', cls:'accountExpiration', children:[ + {tag:'span', cls:'label', html:"expires"}, +// {tag:'span', cls:'expriation', html:"on 26 April 2014"} + {tag:'span', cls:'expriation', html:"never"} + ]} + ]}, {tag:'a', href:'#', id:this.getId('logout'), html:"logout >"} ]}, {tag:'div', cls:'footer'} ]); - MochiKit.Signal.connect(this.getElement('logout'), 'onclick', this, 'handleLogout'); - MochiKit.Signal.connect(this.getElement('lock'), 'onclick', this, 'toggleLock'); + MochiKit.Signal.connect(this.getElement('logout'), 'onclick', this, 'handleLogout'); + MochiKit.Signal.connect(this.getElement('lock'), 'onclick', this, 'toggleLock'); + MochiKit.Signal.connect(this.getElement('payButton'), 'onclick', this, 'handlePayButton'); this._lockTooltip = new Clipperz.PM.UI.Common.Components.Tooltip({ element: this.getElement('lock'), @@ -191,6 +212,13 @@ Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.UserInfoBox, Clipperz.PM.UI.C }, //------------------------------------------------------------------------- + + 'handlePayButton': function (anEvent) { + anEvent.preventDefault(); + window.open('https://www.clipperz.com/pricing/', '_blank'); + }, + + //------------------------------------------------------------------------- /* 'drawUserInfoBackground': function (canvas) { var kMyDrawingFunctionWidth = 188.0; |