-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 @@ -887,13 +887,13 @@ div.modalDialogMask.userInfoBoxMask { #mainDiv { margin: 0 auto; } div.userInfoBox { position: absolute; width: 160px; - height: 120px; + height: 200px; top: 100px; left: 15px; color: white; background-color: #ff9955; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9a56), to(#ff6723)); background: -moz-linear-gradient(0% 100% 90deg, #ff6723, #ff9a56); @@ -955,15 +955,65 @@ div.userInfoBox div.body ul { list-style-position: inside; } 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; font-weight: bold; color: #d15a22; border-color: #fe9a5f; @@ -971,13 +1021,13 @@ div.userInfoBox div.body a { } div.userInfoBox div.body a:hover { color: #8c3b15; } div.sidePanels { float: left; - margin-top: 106px; + margin-top: 186px; margin-left: 20px; width: 160px; } div.sidePanels div.tabSidePanel { margin-right: -10px; } 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 @@ -46,24 +46,24 @@ 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'; }, //------------------------------------------------------------------------- 'renderSelf': function(/*aContainer, aPosition*/) { this.append(this.element(), [ {tag:'div', id:'miscLinks', children:[ {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')}]} ]} ]}, {tag:'div', id:'logoFrame', children:[ {tag:'a', href:'http://www.clipperz.com', target:'_blank', children:[ 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 @@ -163,19 +163,40 @@ Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.UserInfoBox, Clipperz.PM.UI.C ]}, {tag:'li', id:this.getId('directLogins'), children:[ {tag:'span', id:this.getId('directLoginsNumber'), cls:'number', html:"-"}, {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'), text: "Click here to lock/unlock your account.", position: 'RIGHT' }); @@ -188,12 +209,19 @@ Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.UserInfoBox, Clipperz.PM.UI.C MochiKit.Style.hideElement(this.getId('modalDialogMask')); // this.drawUserInfoBackground(this.getElement('canvas')); }, //------------------------------------------------------------------------- + + 'handlePayButton': function (anEvent) { + anEvent.preventDefault(); + window.open('https://www.clipperz.com/pricing/', '_blank'); + }, + + //------------------------------------------------------------------------- /* 'drawUserInfoBackground': function (canvas) { var kMyDrawingFunctionWidth = 188.0; var kMyDrawingFunctionHeight = 154.0; var context = canvas.getContext("2d"); |