-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 | |||
@@ -877,33 +877,33 @@ div.modalDialogMask.userInfoBoxMask { | |||
877 | clear: both; | 877 | clear: both; |
878 | } | 878 | } |
879 | .hidden_none { | 879 | .hidden_none { |
880 | display: none; | 880 | display: none; |
881 | visibility: hidden; | 881 | visibility: hidden; |
882 | } | 882 | } |
883 | .keepTogether { | 883 | .keepTogether { |
884 | display: inline-block; | 884 | display: inline-block; |
885 | white-space: nowrap; | 885 | white-space: nowrap; |
886 | } | 886 | } |
887 | #mainDiv { | 887 | #mainDiv { |
888 | margin: 0 auto; | 888 | margin: 0 auto; |
889 | } | 889 | } |
890 | div.userInfoBox { | 890 | div.userInfoBox { |
891 | position: absolute; | 891 | position: absolute; |
892 | width: 160px; | 892 | width: 160px; |
893 | height: 120px; | 893 | height: 200px; |
894 | top: 100px; | 894 | top: 100px; |
895 | left: 15px; | 895 | left: 15px; |
896 | color: white; | 896 | color: white; |
897 | background-color: #ff9955; | 897 | background-color: #ff9955; |
898 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9a56), to(#ff6723)); | 898 | background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff9a56), to(#ff6723)); |
899 | background: -moz-linear-gradient(0% 100% 90deg, #ff6723, #ff9a56); | 899 | background: -moz-linear-gradient(0% 100% 90deg, #ff6723, #ff9a56); |
900 | background: linear-gradient(0deg, #ff6723, #ff9a56); | 900 | background: linear-gradient(0deg, #ff6723, #ff9a56); |
901 | border-radius: 10px; | 901 | border-radius: 10px; |
902 | -moz-border-radius: 10px; | 902 | -moz-border-radius: 10px; |
903 | -webkit-border-radius: 10px; | 903 | -webkit-border-radius: 10px; |
904 | -webkit-box-shadow: 2px 2px 9px #333333; | 904 | -webkit-box-shadow: 2px 2px 9px #333333; |
905 | -moz-box-shadow: 2px 2px 9px #333333; | 905 | -moz-box-shadow: 2px 2px 9px #333333; |
906 | box-shadow: 2px 2px 9px #333333; | 906 | box-shadow: 2px 2px 9px #333333; |
907 | } | 907 | } |
908 | div.userInfoBox.locked { | 908 | div.userInfoBox.locked { |
909 | z-index: 19001; | 909 | z-index: 19001; |
@@ -945,49 +945,99 @@ div.userInfoBox div.body { | |||
945 | } | 945 | } |
946 | div.userInfoBox div.body h3 { | 946 | div.userInfoBox div.body h3 { |
947 | font-size: 11pt; | 947 | font-size: 11pt; |
948 | font-weight: bold; | 948 | font-weight: bold; |
949 | margin: 0px; | 949 | margin: 0px; |
950 | } | 950 | } |
951 | div.userInfoBox div.body ul { | 951 | div.userInfoBox div.body ul { |
952 | font-size: 8pt; | 952 | font-size: 8pt; |
953 | padding: 0px; | 953 | padding: 0px; |
954 | margin: 4px 0px; | 954 | margin: 4px 0px; |
955 | list-style-position: inside; | 955 | list-style-position: inside; |
956 | } | 956 | } |
957 | div.userInfoBox div.body ul li span.number { | 957 | div.userInfoBox div.body ul li span.number { |
958 | font-weight: bold; | 958 | font-weight: bold; |
959 | padding-right: 3px; | 959 | padding-right: 3px; |
960 | } | 960 | } |
961 | div.userInfoBox div.body div.accountInfo { | ||
962 | margin-top: 6px; | ||
963 | border-top: 1px solid white; | ||
964 | border-color: #f4aa84; | ||
965 | } | ||
966 | div.userInfoBox div.body div.accountInfo h5 { | ||
967 | margin: 0px; | ||
968 | padding-top: 8px; | ||
969 | padding-bottom: 8px; | ||
970 | font-size: 8pt; | ||
971 | font-weight: normal; | ||
972 | } | ||
973 | div.userInfoBox div.body div.accountInfo span.label { | ||
974 | font-size: 9pt; | ||
975 | font-weight: normal; | ||
976 | padding-right: 4px; | ||
977 | display: inline-block; | ||
978 | width: 45px; | ||
979 | } | ||
980 | div.userInfoBox div.body div.accountInfo span.label:after { | ||
981 | content: ":"; | ||
982 | } | ||
983 | div.userInfoBox div.body div.accountInfo span.status { | ||
984 | font-size: 10pt; | ||
985 | } | ||
986 | div.userInfoBox div.body div.accountInfo span.expriation { | ||
987 | font-size: 9pt; | ||
988 | } | ||
989 | div.userInfoBox div.body div.accountInfo div.payButton { | ||
990 | float: right; | ||
991 | padding-top: 6px; | ||
992 | text-align: right; | ||
993 | } | ||
994 | div.userInfoBox div.body div.accountInfo div.payButton a { | ||
995 | border: 0px; | ||
996 | margin-top: 0px; | ||
997 | padding: 0px; | ||
998 | color: white; | ||
999 | display: inline-block; | ||
1000 | padding: 2px 5px 2px 5px; | ||
1001 | border-radius: 4px; | ||
1002 | -moz-border-radius: 4px; | ||
1003 | -webkit-border-radius: 4px; | ||
1004 | font-size: 9pt; | ||
1005 | font-weight: normal; | ||
1006 | background-color: #d15a22; | ||
1007 | } | ||
1008 | div.userInfoBox div.body div.accountInfo div.payButton a:hover { | ||
1009 | background-color: #8c3b15; | ||
1010 | } | ||
961 | div.userInfoBox div.body a { | 1011 | div.userInfoBox div.body a { |
962 | display: block; | 1012 | display: block; |
963 | margin-top: 8px; | 1013 | margin-top: 4px; |
964 | border-top: 1px solid white; | 1014 | border-top: 1px solid white; |
965 | padding-top: 6px; | 1015 | padding-top: 6px; |
966 | font-size: 10pt; | 1016 | font-size: 10pt; |
967 | font-weight: bold; | 1017 | font-weight: bold; |
968 | color: #d15a22; | 1018 | color: #d15a22; |
969 | border-color: #fe9a5f; | 1019 | border-color: #fe9a5f; |
970 | text-decoration: none; | 1020 | text-decoration: none; |
971 | } | 1021 | } |
972 | div.userInfoBox div.body a:hover { | 1022 | div.userInfoBox div.body a:hover { |
973 | color: #8c3b15; | 1023 | color: #8c3b15; |
974 | } | 1024 | } |
975 | div.sidePanels { | 1025 | div.sidePanels { |
976 | float: left; | 1026 | float: left; |
977 | margin-top: 106px; | 1027 | margin-top: 186px; |
978 | margin-left: 20px; | 1028 | margin-left: 20px; |
979 | width: 160px; | 1029 | width: 160px; |
980 | } | 1030 | } |
981 | div.sidePanels div.tabSidePanel { | 1031 | div.sidePanels div.tabSidePanel { |
982 | margin-right: -10px; | 1032 | margin-right: -10px; |
983 | } | 1033 | } |
984 | div.sidePanels div.tabSidePanel ul { | 1034 | div.sidePanels div.tabSidePanel ul { |
985 | margin: 0px; | 1035 | margin: 0px; |
986 | padding-left: 0px; | 1036 | padding-left: 0px; |
987 | list-style-type: none; | 1037 | list-style-type: none; |
988 | color: #f78b46; | 1038 | color: #f78b46; |
989 | } | 1039 | } |
990 | div.sidePanels div.tabSidePanel ul.mainTabs { | 1040 | div.sidePanels div.tabSidePanel ul.mainTabs { |
991 | margin: 0px; | 1041 | margin: 0px; |
992 | } | 1042 | } |
993 | div.sidePanels div.tabSidePanel ul.mainTabs li a { | 1043 | div.sidePanels div.tabSidePanel ul.mainTabs li a { |
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 | |||
@@ -36,44 +36,44 @@ Clipperz.PM.UI.Web.Components.PageHeader = function(args) { | |||
36 | } | 36 | } |
37 | 37 | ||
38 | //============================================================================= | 38 | //============================================================================= |
39 | 39 | ||
40 | Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.PageHeader, Clipperz.PM.UI.Common.Components.BaseComponent, { | 40 | Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.PageHeader, Clipperz.PM.UI.Common.Components.BaseComponent, { |
41 | 41 | ||
42 | //------------------------------------------------------------------------- | 42 | //------------------------------------------------------------------------- |
43 | 43 | ||
44 | 'toString': function () { | 44 | 'toString': function () { |
45 | return "Clipperz.PM.UI.Web.Components.PageHeader component"; | 45 | return "Clipperz.PM.UI.Web.Components.PageHeader component"; |
46 | }, | 46 | }, |
47 | 47 | ||
48 | //------------------------------------------------------------------------- | 48 | //------------------------------------------------------------------------- |
49 | 49 | ||
50 | 'iframeURL': function () { | 50 | 'iframeURL': function () { |
51 | // return './rss_view.html'; | 51 | // return './rss_view.html'; |
52 | return 'http://www.clipperz.com/files/clipperz.com/appTips/index.html'; | 52 | return 'https://www.clipperz.com/tips/index.html'; |
53 | }, | 53 | }, |
54 | 54 | ||
55 | //------------------------------------------------------------------------- | 55 | //------------------------------------------------------------------------- |
56 | 56 | ||
57 | 'renderSelf': function(/*aContainer, aPosition*/) { | 57 | 'renderSelf': function(/*aContainer, aPosition*/) { |
58 | this.append(this.element(), [ | 58 | this.append(this.element(), [ |
59 | {tag:'div', id:'miscLinks', children:[ | 59 | {tag:'div', id:'miscLinks', children:[ |
60 | {tag:'ul', children:[ | 60 | {tag:'ul', children:[ |
61 | {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')}]}, | 61 | {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')}]}, |
62 | {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')}]}, | 62 | {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')}]}, |
63 | {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')}]}, | 63 | // {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')}]}, |
64 | {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')}]}, | 64 | {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')}]}, |
65 | {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')}]} | 65 | {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')}]} |
66 | ]} | 66 | ]} |
67 | ]}, | 67 | ]}, |
68 | {tag:'div', id:'logoFrame', children:[ | 68 | {tag:'div', id:'logoFrame', children:[ |
69 | {tag:'a', href:'http://www.clipperz.com', target:'_blank', children:[ | 69 | {tag:'a', href:'http://www.clipperz.com', target:'_blank', children:[ |
70 | // {tag:'h1', cls:'logo', html:"clipperz"}, | 70 | // {tag:'h1', cls:'logo', html:"clipperz"}, |
71 | {tag:'canvas', id:this.getId('logo'), cls:'logo'}, | 71 | {tag:'canvas', id:this.getId('logo'), cls:'logo'}, |
72 | {tag:'h5', cls:'clipperzPayoff', html:"keep it to yourself!"} | 72 | {tag:'h5', cls:'clipperzPayoff', html:"keep it to yourself!"} |
73 | ]} | 73 | ]} |
74 | ]}, | 74 | ]}, |
75 | {tag:'div', id:'news', cls:'hidden', children:[ | 75 | {tag:'div', id:'news', cls:'hidden', children:[ |
76 | // {tag:'div', cls:'close', children:[ | 76 | // {tag:'div', cls:'close', children:[ |
77 | // {tag:'a', href:'#', id:this.getId('closeTips'), html:'x'} | 77 | // {tag:'a', href:'#', id:this.getId('closeTips'), html:'x'} |
78 | // ]}, | 78 | // ]}, |
79 | {tag:'div', id:'newsframe', children:[ | 79 | {tag:'div', id:'newsframe', 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 | |||
@@ -153,57 +153,85 @@ Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.UserInfoBox, Clipperz.PM.UI.C | |||
153 | {tag:'div', cls:'header', children:[ | 153 | {tag:'div', cls:'header', children:[ |
154 | {tag:'h1', html:"Welcome"}, | 154 | {tag:'h1', html:"Welcome"}, |
155 | {tag:'a', cls:'lockButton', href:'#', id:this.getId('lock'), html:' '} | 155 | {tag:'a', cls:'lockButton', href:'#', id:this.getId('lock'), html:' '} |
156 | ]}, | 156 | ]}, |
157 | {tag:'div', cls:'body', children:[ | 157 | {tag:'div', cls:'body', children:[ |
158 | {tag:'h3', id:this.getId('username'), html:""}, | 158 | {tag:'h3', id:this.getId('username'), html:""}, |
159 | {tag:'ul', children:[ | 159 | {tag:'ul', children:[ |
160 | {tag:'li', id:this.getId('cards'), children:[ | 160 | {tag:'li', id:this.getId('cards'), children:[ |
161 | {tag:'span', id:this.getId('cardsNumber'), cls:'number', html:"-"}, | 161 | {tag:'span', id:this.getId('cardsNumber'), cls:'number', html:"-"}, |
162 | {tag:'span', id:this.getId('cardsLabel'), html:"cards"} | 162 | {tag:'span', id:this.getId('cardsLabel'), html:"cards"} |
163 | ]}, | 163 | ]}, |
164 | {tag:'li', id:this.getId('directLogins'), children:[ | 164 | {tag:'li', id:this.getId('directLogins'), children:[ |
165 | {tag:'span', id:this.getId('directLoginsNumber'), cls:'number', html:"-"}, | 165 | {tag:'span', id:this.getId('directLoginsNumber'), cls:'number', html:"-"}, |
166 | {tag:'span', id:this.getId('directLoginsLabel'), html:"direct logins"} | 166 | {tag:'span', id:this.getId('directLoginsLabel'), html:"direct logins"} |
167 | ]} | 167 | ]} |
168 | ]}, | 168 | ]}, |
169 | {tag:'div', cls:'accountInfo', children:[ | ||
170 | {tag:'div', cls:'payButton', children:[ | ||
171 | {tag:'a', href:'#', id:this.getId('payButton'), cls:'info', html:"info"} | ||
172 | ]}, | ||
173 | {tag:'h5', html:"Account info"}, | ||
174 | {tag:'div', cls:'accountStatus', children:[ | ||
175 | {tag:'span', cls:'label', html:"status"}, | ||
176 | {tag:'span', cls:'status', html:"early adopter"} | ||
177 | ]}, | ||
178 | {tag:'div', cls:'accountLevel', children:[ | ||
179 | {tag:'span', cls:'label', html:"level"}, | ||
180 | // {tag:'span', cls:'level', html:"★☆☆☆"} | ||
181 | {tag:'span', cls:'level', html:"☆☆☆☆"} | ||
182 | ]}, | ||
183 | {tag:'div', cls:'accountExpiration', children:[ | ||
184 | {tag:'span', cls:'label', html:"expires"}, | ||
185 | // {tag:'span', cls:'expriation', html:"on 26 April 2014"} | ||
186 | {tag:'span', cls:'expriation', html:"never"} | ||
187 | ]} | ||
188 | ]}, | ||
169 | {tag:'a', href:'#', id:this.getId('logout'), html:"logout >"} | 189 | {tag:'a', href:'#', id:this.getId('logout'), html:"logout >"} |
170 | ]}, | 190 | ]}, |
171 | {tag:'div', cls:'footer'} | 191 | {tag:'div', cls:'footer'} |
172 | ]); | 192 | ]); |
173 | 193 | ||
174 | MochiKit.Signal.connect(this.getElement('logout'), 'onclick', this, 'handleLogout'); | 194 | MochiKit.Signal.connect(this.getElement('logout'), 'onclick', this, 'handleLogout'); |
175 | MochiKit.Signal.connect(this.getElement('lock'), 'onclick', this, 'toggleLock'); | 195 | MochiKit.Signal.connect(this.getElement('lock'), 'onclick', this, 'toggleLock'); |
196 | MochiKit.Signal.connect(this.getElement('payButton'),'onclick', this, 'handlePayButton'); | ||
176 | 197 | ||
177 | this._lockTooltip = new Clipperz.PM.UI.Common.Components.Tooltip({ | 198 | this._lockTooltip = new Clipperz.PM.UI.Common.Components.Tooltip({ |
178 | element:this.getElement('lock'), | 199 | element:this.getElement('lock'), |
179 | text: "Click here to lock/unlock your account.", | 200 | text: "Click here to lock/unlock your account.", |
180 | position:'RIGHT' | 201 | position:'RIGHT' |
181 | }); | 202 | }); |
182 | 203 | ||
183 | Clipperz.DOM.Helper.append(MochiKit.DOM.currentDocument().body, | 204 | Clipperz.DOM.Helper.append(MochiKit.DOM.currentDocument().body, |
184 | {tag:'div', id:this.getId('modalDialogWrapper'), cls:'modalDialogWrapper', children:[ | 205 | {tag:'div', id:this.getId('modalDialogWrapper'), cls:'modalDialogWrapper', children:[ |
185 | {tag:'div', id:this.getId('modalDialogMask'), cls:'modalDialogMask userInfoBoxMask'} | 206 | {tag:'div', id:this.getId('modalDialogMask'), cls:'modalDialogMask userInfoBoxMask'} |
186 | ]} | 207 | ]} |
187 | ); | 208 | ); |
188 | MochiKit.Style.hideElement(this.getId('modalDialogMask')); | 209 | MochiKit.Style.hideElement(this.getId('modalDialogMask')); |
189 | 210 | ||
190 | // this.drawUserInfoBackground(this.getElement('canvas')); | 211 | // this.drawUserInfoBackground(this.getElement('canvas')); |
191 | }, | 212 | }, |
192 | 213 | ||
193 | //------------------------------------------------------------------------- | 214 | //------------------------------------------------------------------------- |
215 | |||
216 | 'handlePayButton': function (anEvent) { | ||
217 | anEvent.preventDefault(); | ||
218 | window.open('https://www.clipperz.com/pricing/', '_blank'); | ||
219 | }, | ||
220 | |||
221 | //------------------------------------------------------------------------- | ||
194 | /* | 222 | /* |
195 | 'drawUserInfoBackground': function (canvas) { | 223 | 'drawUserInfoBackground': function (canvas) { |
196 | var kMyDrawingFunctionWidth = 188.0; | 224 | var kMyDrawingFunctionWidth = 188.0; |
197 | var kMyDrawingFunctionHeight = 154.0; | 225 | var kMyDrawingFunctionHeight = 154.0; |
198 | 226 | ||
199 | var context = canvas.getContext("2d"); | 227 | var context = canvas.getContext("2d"); |
200 | var color; | 228 | var color; |
201 | var resolution; | 229 | var resolution; |
202 | var alignStroke; | 230 | var alignStroke; |
203 | var path; | 231 | var path; |
204 | var pointX; | 232 | var pointX; |
205 | var pointY; | 233 | var pointY; |
206 | var controlPoint1X; | 234 | var controlPoint1X; |
207 | var controlPoint1Y; | 235 | var controlPoint1Y; |
208 | var controlPoint2X; | 236 | var controlPoint2X; |
209 | var controlPoint2Y; | 237 | var controlPoint2Y; |