author | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2013-05-13 13:52:10 (UTC) |
---|---|---|
committer | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2013-05-13 13:52:10 (UTC) |
commit | ff35024f8506d7f6a2caddc3e20f062a638216c6 (patch) (unidiff) | |
tree | 5025a4d6aca2d826c7b7876e3e233b192e5edb01 /frontend/gamma | |
parent | 77c90371a3055d0ad61d48f22207585948c591bf (diff) | |
download | clipperz-ff35024f8506d7f6a2caddc3e20f062a638216c6.zip clipperz-ff35024f8506d7f6a2caddc3e20f062a638216c6.tar.gz clipperz-ff35024f8506d7f6a2caddc3e20f062a638216c6.tar.bz2 |
Upated links to web site;
added stub for Account Info data.
Updated the links to the main website to match the new content/structure.
The new Account Info is now completely static; will become dynamic as soon as the backend infrastructure will be in place.
-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 | |||
@@ -701,469 +701,519 @@ div#loginBox div.body form.loginForm div.translations h4 { | |||
701 | div#loginBox div.body form.loginForm div.translations ul { | 701 | div#loginBox div.body form.loginForm div.translations ul { |
702 | margin: 0px; | 702 | margin: 0px; |
703 | padding: 5px 10px 10px; | 703 | padding: 5px 10px 10px; |
704 | margin-bottom: 15px; | 704 | margin-bottom: 15px; |
705 | } | 705 | } |
706 | div#loginBox div.body form.loginForm div.translations ul li { | 706 | div#loginBox div.body form.loginForm div.translations ul li { |
707 | font-size: 8pt; | 707 | font-size: 8pt; |
708 | color: #ddaa99; | 708 | color: #ddaa99; |
709 | background-color: #994422; | 709 | background-color: #994422; |
710 | display: inline-block; | 710 | display: inline-block; |
711 | padding: 2px 4px; | 711 | padding: 2px 4px; |
712 | margin: 1px; | 712 | margin: 1px; |
713 | } | 713 | } |
714 | div#loginBox div.body form.loginForm div.translations ul li.selected { | 714 | div#loginBox div.body form.loginForm div.translations ul li.selected { |
715 | color: #ffffff; | 715 | color: #ffffff; |
716 | background-color: #772211; | 716 | background-color: #772211; |
717 | } | 717 | } |
718 | div#loginBox div.body form.loginForm div.translations ul li.selected:hover { | 718 | div#loginBox div.body form.loginForm div.translations ul li.selected:hover { |
719 | cursor: default; | 719 | cursor: default; |
720 | } | 720 | } |
721 | div#loginBox div.body form.loginForm div.translations ul li:hover { | 721 | div#loginBox div.body form.loginForm div.translations ul li:hover { |
722 | cursor: pointer; | 722 | cursor: pointer; |
723 | color: #ffffff; | 723 | color: #ffffff; |
724 | } | 724 | } |
725 | div#loginBox div.footer { | 725 | div#loginBox div.footer { |
726 | height: 37px; | 726 | height: 37px; |
727 | width: 273px; | 727 | width: 273px; |
728 | background-color: #ff6622; | 728 | background-color: #ff6622; |
729 | -webkit-border-bottom-left-radius: 20px; | 729 | -webkit-border-bottom-left-radius: 20px; |
730 | -moz-border-radius-bottomleft: 20px; | 730 | -moz-border-radius-bottomleft: 20px; |
731 | border-bottom-left-radius: 20px; | 731 | border-bottom-left-radius: 20px; |
732 | -webkit-border-bottom-right-radius: 20px; | 732 | -webkit-border-bottom-right-radius: 20px; |
733 | -moz-border-radius-bottomright: 20px; | 733 | -moz-border-radius-bottomright: 20px; |
734 | border-bottom-right-radius: 20px; | 734 | border-bottom-right-radius: 20px; |
735 | } | 735 | } |
736 | body.ext-gecko div#loginBox form.loginForm div.translations ul li { | 736 | body.ext-gecko div#loginBox form.loginForm div.translations ul li { |
737 | display: -moz-inline-box; | 737 | display: -moz-inline-box; |
738 | } | 738 | } |
739 | div#featurePoints { | 739 | div#featurePoints { |
740 | min-width: 400px; | 740 | min-width: 400px; |
741 | padding-top: 15px; | 741 | padding-top: 15px; |
742 | padding-bottom: 20px; | 742 | padding-bottom: 20px; |
743 | padding-left: 20px; | 743 | padding-left: 20px; |
744 | padding-right: 330px; | 744 | padding-right: 330px; |
745 | } | 745 | } |
746 | div#featurePoints table tbody tr td { | 746 | div#featurePoints table tbody tr td { |
747 | width: 50%; | 747 | width: 50%; |
748 | vertical-align: top; | 748 | vertical-align: top; |
749 | } | 749 | } |
750 | div#featurePoints div.block { | 750 | div#featurePoints div.block { |
751 | padding: 10px; | 751 | padding: 10px; |
752 | color: #86858e; | 752 | color: #86858e; |
753 | } | 753 | } |
754 | div#featurePoints div.block h3 { | 754 | div#featurePoints div.block h3 { |
755 | font-weight: normal; | 755 | font-weight: normal; |
756 | font-size: 12pt; | 756 | font-size: 12pt; |
757 | margin: 0px; | 757 | margin: 0px; |
758 | padding: 5px 0px; | 758 | padding: 5px 0px; |
759 | } | 759 | } |
760 | div#featurePoints div.block ul { | 760 | div#featurePoints div.block ul { |
761 | margin: 0px; | 761 | margin: 0px; |
762 | margin-left: 20px; | 762 | margin-left: 20px; |
763 | padding: 0px; | 763 | padding: 0px; |
764 | list-style-position: outside; | 764 | list-style-position: outside; |
765 | } | 765 | } |
766 | div#featurePoints div.block ul li { | 766 | div#featurePoints div.block ul li { |
767 | font-size: 10pt; | 767 | font-size: 10pt; |
768 | padding: 3px 0px; | 768 | padding: 3px 0px; |
769 | } | 769 | } |
770 | div.activeFeatures { | 770 | div.activeFeatures { |
771 | float: left; | 771 | float: left; |
772 | margin-left: 20px; | 772 | margin-left: 20px; |
773 | height: 100px; | 773 | height: 100px; |
774 | } | 774 | } |
775 | div.activeFeatures a { | 775 | div.activeFeatures a { |
776 | display: inline-block; | 776 | display: inline-block; |
777 | padding-left: 46px; | 777 | padding-left: 46px; |
778 | color: #ff5906; | 778 | color: #ff5906; |
779 | text-decoration: none; | 779 | text-decoration: none; |
780 | font-size: 10pt; | 780 | font-size: 10pt; |
781 | } | 781 | } |
782 | div.activeFeatures a span.payoff { | 782 | div.activeFeatures a span.payoff { |
783 | display: block; | 783 | display: block; |
784 | font-size: 13pt; | 784 | font-size: 13pt; |
785 | font-weight: lighter; | 785 | font-weight: lighter; |
786 | color: #9b9689; | 786 | color: #9b9689; |
787 | margin: 0px; | 787 | margin: 0px; |
788 | padding: 0px; | 788 | padding: 0px; |
789 | } | 789 | } |
790 | div.activeFeatures a:hover span.payoff { | 790 | div.activeFeatures a:hover span.payoff { |
791 | color: #666666; | 791 | color: #666666; |
792 | } | 792 | } |
793 | div.activeFeatures div.keepTogether a { | 793 | div.activeFeatures div.keepTogether a { |
794 | padding-left: 0px; | 794 | padding-left: 0px; |
795 | } | 795 | } |
796 | div.activeFeatures div.keepTogether div { | 796 | div.activeFeatures div.keepTogether div { |
797 | display: inline-block; | 797 | display: inline-block; |
798 | padding-right: 15px; | 798 | padding-right: 15px; |
799 | } | 799 | } |
800 | div.activeFeatures div.keepTogether canvas { | 800 | div.activeFeatures div.keepTogether canvas { |
801 | width: 46px; | 801 | width: 46px; |
802 | height: 46px; | 802 | height: 46px; |
803 | vertical-align: bottom; | 803 | vertical-align: bottom; |
804 | } | 804 | } |
805 | div.activeFeatures div.createAccountLink { | 805 | div.activeFeatures div.createAccountLink { |
806 | display: inline-block; | 806 | display: inline-block; |
807 | width: 282; | 807 | width: 282; |
808 | height: 65px; | 808 | height: 65px; |
809 | background-image: url(./images/old/home/register.png); | 809 | background-image: url(./images/old/home/register.png); |
810 | margin-right: 20px; | 810 | margin-right: 20px; |
811 | } | 811 | } |
812 | div.activeFeatures div.createAccountLink a.createAccountLink { | 812 | div.activeFeatures div.createAccountLink a.createAccountLink { |
813 | position: relative; | 813 | position: relative; |
814 | top: -92px; | 814 | top: -92px; |
815 | left: 5px; | 815 | left: 5px; |
816 | } | 816 | } |
817 | div.activeFeatures div.createAccountLink a.createAccountLink span.payoff { | 817 | div.activeFeatures div.createAccountLink a.createAccountLink span.payoff { |
818 | margin-top: 23px; | 818 | margin-top: 23px; |
819 | margin-left: 40px; | 819 | margin-left: 40px; |
820 | font-size: 17pt; | 820 | font-size: 17pt; |
821 | color: #64626c; | 821 | color: #64626c; |
822 | } | 822 | } |
823 | div.activeFeatures div.createAccountLink a.createAccountLink span.link { | 823 | div.activeFeatures div.createAccountLink a.createAccountLink span.link { |
824 | padding-left: 40px; | 824 | padding-left: 40px; |
825 | padding-right: 50px; | 825 | padding-right: 50px; |
826 | padding-bottom: 10px; | 826 | padding-bottom: 10px; |
827 | font-size: 12pt; | 827 | font-size: 12pt; |
828 | } | 828 | } |
829 | div.activeFeatures div.createAccountLink:hover { | 829 | div.activeFeatures div.createAccountLink:hover { |
830 | background-image: url(./images/old/home/register_selected.png); | 830 | background-image: url(./images/old/home/register_selected.png); |
831 | } | 831 | } |
832 | div.activeFeatures div.createAccountLink:hover a.createAccountLink span.payoff { | 832 | div.activeFeatures div.createAccountLink:hover a.createAccountLink span.payoff { |
833 | color: #54535a; | 833 | color: #54535a; |
834 | } | 834 | } |
835 | div.activeFeatures div.createAccountLink:hover a.createAccountLink span.link { | 835 | div.activeFeatures div.createAccountLink:hover a.createAccountLink span.link { |
836 | color: white; | 836 | color: white; |
837 | } | 837 | } |
838 | div.activeFeatures div.createAccountLink canvas { | 838 | div.activeFeatures div.createAccountLink canvas { |
839 | width: 282px; | 839 | width: 282px; |
840 | height: 93px; | 840 | height: 93px; |
841 | } | 841 | } |
842 | /* | 842 | /* |
843 | 843 | ||
844 | Color list: | 844 | Color list: |
845 | - login box: | 845 | - login box: |
846 | light#ff9955 | 846 | light#ff9955 |
847 | dark#ff6622 | 847 | dark#ff6622 |
848 | - login button: | 848 | - login button: |
849 | regular#dd5500 | 849 | regular#dd5500 |
850 | hover#773311 | 850 | hover#773311 |
851 | - login translations: | 851 | - login translations: |
852 | box: #cc6622; | 852 | box: #cc6622; |
853 | not-selected: | 853 | not-selected: |
854 | color: #ddaa99 | 854 | color: #ddaa99 |
855 | background:#994422 | 855 | background:#994422 |
856 | selected: #772211; | 856 | selected: #772211; |
857 | */ | 857 | */ |
858 | html { | 858 | html { |
859 | height: 100%; | 859 | height: 100%; |
860 | } | 860 | } |
861 | body { | 861 | body { |
862 | font-family: Helvetica-Neue, Helvetica, Arial, Geneva, sans-serif; | 862 | font-family: Helvetica-Neue, Helvetica, Arial, Geneva, sans-serif; |
863 | margin: 0px; | 863 | margin: 0px; |
864 | } | 864 | } |
865 | div.modalDialogMask.userInfoBoxMask { | 865 | div.modalDialogMask.userInfoBoxMask { |
866 | -moz-opacity: 0.0; | 866 | -moz-opacity: 0.0; |
867 | opacity: .0; | 867 | opacity: .0; |
868 | filter: alpha(opacity=0); | 868 | filter: alpha(opacity=0); |
869 | z-index: 19000; | 869 | z-index: 19000; |
870 | } | 870 | } |
871 | .reset-margin { | 871 | .reset-margin { |
872 | margin: 0px; | 872 | margin: 0px; |
873 | padding: 0px; | 873 | padding: 0px; |
874 | border: 0px; | 874 | border: 0px; |
875 | } | 875 | } |
876 | .clear { | 876 | .clear { |
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; |
910 | } | 910 | } |
911 | div.userInfoBox.locked div.header a.lockButton { | 911 | div.userInfoBox.locked div.header a.lockButton { |
912 | background: url(./images/old/lock/locked.png) no-repeat -5px -2px; | 912 | background: url(./images/old/lock/locked.png) no-repeat -5px -2px; |
913 | } | 913 | } |
914 | div.userInfoBox.locked div.header a.lockButton:hover { | 914 | div.userInfoBox.locked div.header a.lockButton:hover { |
915 | background: url(./images/old/lock/locked_hover.png) no-repeat -5px -2px; | 915 | background: url(./images/old/lock/locked_hover.png) no-repeat -5px -2px; |
916 | } | 916 | } |
917 | div.userInfoBox.locked div.body a { | 917 | div.userInfoBox.locked div.body a { |
918 | display: none; | 918 | display: none; |
919 | } | 919 | } |
920 | div.userInfoBox div.header { | 920 | div.userInfoBox div.header { |
921 | height: 30px; | 921 | height: 30px; |
922 | } | 922 | } |
923 | div.userInfoBox div.header h1 { | 923 | div.userInfoBox div.header h1 { |
924 | font-size: 8pt; | 924 | font-size: 8pt; |
925 | font-weight: normal; | 925 | font-weight: normal; |
926 | margin: 0px; | 926 | margin: 0px; |
927 | padding-top: 12px; | 927 | padding-top: 12px; |
928 | padding-left: 12px; | 928 | padding-left: 12px; |
929 | } | 929 | } |
930 | div.userInfoBox div.header a.lockButton { | 930 | div.userInfoBox div.header a.lockButton { |
931 | position: absolute; | 931 | position: absolute; |
932 | top: 8px; | 932 | top: 8px; |
933 | right: 12px; | 933 | right: 12px; |
934 | display: block; | 934 | display: block; |
935 | width: 15px; | 935 | width: 15px; |
936 | height: 20px; | 936 | height: 20px; |
937 | text-decoration: none; | 937 | text-decoration: none; |
938 | background: url(./images/old/lock/unlocked.png) no-repeat -5px -2px; | 938 | background: url(./images/old/lock/unlocked.png) no-repeat -5px -2px; |
939 | } | 939 | } |
940 | div.userInfoBox div.header a.lockButton:hover { | 940 | div.userInfoBox div.header a.lockButton:hover { |
941 | background: url(./images/old/lock/unlocked_hover.png) no-repeat -5px -2px; | 941 | background: url(./images/old/lock/unlocked_hover.png) no-repeat -5px -2px; |
942 | } | 942 | } |
943 | div.userInfoBox div.body { | 943 | div.userInfoBox div.body { |
944 | padding: 0px 12px; | 944 | padding: 0px 12px; |
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 { |
994 | display: block; | 1044 | display: block; |
995 | line-height: 30px; | 1045 | line-height: 30px; |
996 | height: 43px; | 1046 | height: 43px; |
997 | padding-left: 40px; | 1047 | padding-left: 40px; |
998 | color: #ff6621; | 1048 | color: #ff6621; |
999 | margin: 0px; | 1049 | margin: 0px; |
1000 | font-weight: normal; | 1050 | font-weight: normal; |
1001 | font-size: 13pt; | 1051 | font-size: 13pt; |
1002 | text-decoration: none; | 1052 | text-decoration: none; |
1003 | } | 1053 | } |
1004 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter { | 1054 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter { |
1005 | display: none; | 1055 | display: none; |
1006 | } | 1056 | } |
1007 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add { | 1057 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add { |
1008 | font-size: 14pt; | 1058 | font-size: 14pt; |
1009 | font-weight: bold; | 1059 | font-weight: bold; |
1010 | position: relative; | 1060 | position: relative; |
1011 | top: -34px; | 1061 | top: -34px; |
1012 | right: 16px; | 1062 | right: 16px; |
1013 | background: none; | 1063 | background: none; |
1014 | color: #c0531b; | 1064 | color: #c0531b; |
1015 | padding-left: 15px; | 1065 | padding-left: 15px; |
1016 | } | 1066 | } |
1017 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add:hover { | 1067 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add:hover { |
1018 | color: white; | 1068 | color: white; |
1019 | } | 1069 | } |
1020 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add span { | 1070 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add span { |
1021 | font-size: 8pt; | 1071 | font-size: 8pt; |
1022 | vertical-align: middle; | 1072 | vertical-align: middle; |
1023 | } | 1073 | } |
1024 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add h3 { | 1074 | div.sidePanels div.tabSidePanel ul.mainTabs li div.selectionHighlighter a.add h3 { |
1025 | display: inline; | 1075 | display: inline; |
1026 | padding-left: 5px; | 1076 | padding-left: 5px; |
1027 | } | 1077 | } |
1028 | div.sidePanels div.tabSidePanel ul.mainTabs li.selected div.selectionHighlighter { | 1078 | div.sidePanels div.tabSidePanel ul.mainTabs li.selected div.selectionHighlighter { |
1029 | display: block; | 1079 | display: block; |
1030 | position: absolute; | 1080 | position: absolute; |
1031 | left: 154px; | 1081 | left: 154px; |
1032 | margin-top: -43px; | 1082 | margin-top: -43px; |
1033 | } | 1083 | } |
1034 | div.sidePanels div.tabSidePanel ul.mainTabs li.cards a { | 1084 | div.sidePanels div.tabSidePanel ul.mainTabs li.cards a { |
1035 | background: url(./images/old/main/tabs/cardsBackground.png) -19px -63px; | 1085 | background: url(./images/old/main/tabs/cardsBackground.png) -19px -63px; |
1036 | } | 1086 | } |
1037 | div.sidePanels div.tabSidePanel ul.mainTabs li.cards a:hover { | 1087 | div.sidePanels div.tabSidePanel ul.mainTabs li.cards a:hover { |
1038 | background: url(./images/old/main/tabs/cardsBackground.png) -19px -110px; | 1088 | background: url(./images/old/main/tabs/cardsBackground.png) -19px -110px; |
1039 | } | 1089 | } |
1040 | div.sidePanels div.tabSidePanel ul.mainTabs li.cards.selected a { | 1090 | div.sidePanels div.tabSidePanel ul.mainTabs li.cards.selected a { |
1041 | margin-left: -10px; | 1091 | margin-left: -10px; |
1042 | padding-left: 50px; | 1092 | padding-left: 50px; |
1043 | color: white; | 1093 | color: white; |
1044 | background: url(./images/old/main/tabs/cardsBackground.png) -9px -14px; | 1094 | background: url(./images/old/main/tabs/cardsBackground.png) -9px -14px; |
1045 | } | 1095 | } |
1046 | div.sidePanels div.tabSidePanel ul.mainTabs li.directLogins.selected a { | 1096 | div.sidePanels div.tabSidePanel ul.mainTabs li.directLogins.selected a { |
1047 | margin-left: -10px; | 1097 | margin-left: -10px; |
1048 | padding-left: 50px; | 1098 | padding-left: 50px; |
1049 | color: white; | 1099 | color: white; |
1050 | } | 1100 | } |
1051 | div.sidePanels div.tabSidePanel ul.mainTabs li.directLogins.selected a:hover { | 1101 | div.sidePanels div.tabSidePanel ul.mainTabs li.directLogins.selected a:hover { |
1052 | color: white; | 1102 | color: white; |
1053 | } | 1103 | } |
1054 | div.sidePanels div.tabSidePanel ul.otherTabs { | 1104 | div.sidePanels div.tabSidePanel ul.otherTabs { |
1055 | margin: 10px 0px; | 1105 | margin: 10px 0px; |
1056 | } | 1106 | } |
1057 | div.sidePanels div.tabSidePanel ul.otherTabs li { | 1107 | div.sidePanels div.tabSidePanel ul.otherTabs li { |
1058 | margin-top: -4px; | 1108 | margin-top: -4px; |
1059 | } | 1109 | } |
1060 | div.sidePanels div.tabSidePanel ul.otherTabs li div.selectionHighlighter { | 1110 | div.sidePanels div.tabSidePanel ul.otherTabs li div.selectionHighlighter { |
1061 | display: none; | 1111 | display: none; |
1062 | } | 1112 | } |
1063 | div.sidePanels div.tabSidePanel ul.otherTabs li a { | 1113 | div.sidePanels div.tabSidePanel ul.otherTabs li a { |
1064 | display: block; | 1114 | display: block; |
1065 | line-height: 36px; | 1115 | line-height: 36px; |
1066 | height: 43px; | 1116 | height: 43px; |
1067 | padding-left: 40px; | 1117 | padding-left: 40px; |
1068 | color: #ff6621; | 1118 | color: #ff6621; |
1069 | text-decoration: none; | 1119 | text-decoration: none; |
1070 | } | 1120 | } |
1071 | div.sidePanels div.tabSidePanel ul.otherTabs li a:hover { | 1121 | div.sidePanels div.tabSidePanel ul.otherTabs li a:hover { |
1072 | background: url(./images/old/main/tabs/itemsBackground.png) -10px -49px; | 1122 | background: url(./images/old/main/tabs/itemsBackground.png) -10px -49px; |
1073 | } | 1123 | } |
1074 | div.sidePanels div.tabSidePanel ul.otherTabs li.selected a { | 1124 | div.sidePanels div.tabSidePanel ul.otherTabs li.selected a { |
1075 | margin-left: -10px; | 1125 | margin-left: -10px; |
1076 | padding-left: 50px; | 1126 | padding-left: 50px; |
1077 | background: url(./images/old/main/tabs/itemsBackground.png) 1px -96px; | 1127 | background: url(./images/old/main/tabs/itemsBackground.png) 1px -96px; |
1078 | color: white; | 1128 | color: white; |
1079 | } | 1129 | } |
1080 | div.sidePanels div.tabSidePanel ul.otherTabs li.selected div.selectionHighlighter { | 1130 | div.sidePanels div.tabSidePanel ul.otherTabs li.selected div.selectionHighlighter { |
1081 | display: block; | 1131 | display: block; |
1082 | position: absolute; | 1132 | position: absolute; |
1083 | left: 154px; | 1133 | left: 154px; |
1084 | margin-top: -42px; | 1134 | margin-top: -42px; |
1085 | } | 1135 | } |
1086 | div.tagSidePanel { | 1136 | div.tagSidePanel { |
1087 | /* | 1137 | /* |
1088 | margin-right: -8px; | 1138 | margin-right: -8px; |
1089 | 1139 | ||
1090 | div.tagSidePanel div.header { | 1140 | div.tagSidePanel div.header { |
1091 | height: 50px; | 1141 | height: 50px; |
1092 | background-image: url(./images/old/main/tabs/tagsBackground.png); | 1142 | background-image: url(./images/old/main/tabs/tagsBackground.png); |
1093 | } | 1143 | } |
1094 | div.tagSidePanel div.header h1 { | 1144 | div.tagSidePanel div.header h1 { |
1095 | padding-left: 52px; | 1145 | padding-left: 52px; |
1096 | padding-top: 14px; | 1146 | padding-top: 14px; |
1097 | font-size: 14pt; | 1147 | font-size: 14pt; |
1098 | font-weight: normal; | 1148 | font-weight: normal; |
1099 | color: #888888; | 1149 | color: #888888; |
1100 | } | 1150 | } |
1101 | div.tagSidePanel div.body { | 1151 | div.tagSidePanel div.body { |
1102 | background: url(./images/old/main/tabs/tagsBackground.png) -255px; | 1152 | background: url(./images/old/main/tabs/tagsBackground.png) -255px; |
1103 | } | 1153 | } |
1104 | div.tagSidePanel div.footer { | 1154 | div.tagSidePanel div.footer { |
1105 | height: 10px; | 1155 | height: 10px; |
1106 | background: url(./images/old/main/tabs/tagsBackground.png) -510px -40px; | 1156 | background: url(./images/old/main/tabs/tagsBackground.png) -510px -40px; |
1107 | } | 1157 | } |
1108 | div.tagSidePanel ul.tags { | 1158 | div.tagSidePanel ul.tags { |
1109 | margin: 0px; | 1159 | margin: 0px; |
1110 | list-style-type: none; | 1160 | list-style-type: none; |
1111 | padding: 0px; | 1161 | padding: 0px; |
1112 | } | 1162 | } |
1113 | div.tagSidePanel ul.tags li a { | 1163 | div.tagSidePanel ul.tags li a { |
1114 | display: block; | 1164 | display: block; |
1115 | font-size: 9pt; | 1165 | font-size: 9pt; |
1116 | text-decoration: none; | 1166 | text-decoration: none; |
1117 | color: #ff6621; | 1167 | color: #ff6621; |
1118 | padding: 0px 4px 0px 15px; | 1168 | padding: 0px 4px 0px 15px; |
1119 | line-height: 20px; | 1169 | line-height: 20px; |
1120 | } | 1170 | } |
1121 | div.tagSidePanel ul.tags li a:hover { | 1171 | div.tagSidePanel ul.tags li a:hover { |
1122 | background-color: #dddddd; | 1172 | background-color: #dddddd; |
1123 | } | 1173 | } |
1124 | div.tagSidePanel ul.tags li span.tagCardinality { | 1174 | div.tagSidePanel ul.tags li span.tagCardinality { |
1125 | float: right; | 1175 | float: right; |
1126 | font-size: 8pt; | 1176 | font-size: 8pt; |
1127 | color: #999999; | 1177 | color: #999999; |
1128 | margin-right: 15px; | 1178 | margin-right: 15px; |
1129 | margin-top: -17px; | 1179 | margin-top: -17px; |
1130 | } | 1180 | } |
1131 | div.tagSidePanel ul.tags li.selected a { | 1181 | div.tagSidePanel ul.tags li.selected a { |
1132 | background-color: #d4d5cf; | 1182 | background-color: #d4d5cf; |
1133 | } | 1183 | } |
1134 | div.tagSidePanel ul.tags li.selected a:hover { | 1184 | div.tagSidePanel ul.tags li.selected a:hover { |
1135 | background-color: #d4d5cf; | 1185 | background-color: #d4d5cf; |
1136 | } | 1186 | } |
1137 | div.tagSidePanel ul.tags li.selected a { | 1187 | div.tagSidePanel ul.tags li.selected a { |
1138 | font-weight: bold; | 1188 | font-weight: bold; |
1139 | } | 1189 | } |
1140 | */ | 1190 | */ |
1141 | } | 1191 | } |
1142 | div.groupSidePanel { | 1192 | div.groupSidePanel { |
1143 | /* | 1193 | /* |
1144 | margin-right: -10px; | 1194 | margin-right: -10px; |
1145 | 1195 | ||
1146 | div.groupSidePanel div.header { | 1196 | div.groupSidePanel div.header { |
1147 | height: 50px; | 1197 | height: 50px; |
1148 | background-image: url(./images/old/main/tabs/groupsBackground.png); | 1198 | background-image: url(./images/old/main/tabs/groupsBackground.png); |
1149 | } | 1199 | } |
1150 | div.groupSidePanel div.header h1 { | 1200 | div.groupSidePanel div.header h1 { |
1151 | padding-left: 52px; | 1201 | padding-left: 52px; |
1152 | padding-top: 14px; | 1202 | padding-top: 14px; |
1153 | font-size: 14pt; | 1203 | font-size: 14pt; |
1154 | font-weight: normal; | 1204 | font-weight: normal; |
1155 | color: white; | 1205 | color: white; |
1156 | } | 1206 | } |
1157 | div.groupSidePanel div.header a { | 1207 | div.groupSidePanel div.header a { |
1158 | float: right; | 1208 | float: right; |
1159 | margin-top: -30px; | 1209 | margin-top: -30px; |
1160 | margin-right: 20px; | 1210 | margin-right: 20px; |
1161 | text-decoration: none; | 1211 | text-decoration: none; |
1162 | color: #666666; | 1212 | color: #666666; |
1163 | font-size: 9pt; | 1213 | font-size: 9pt; |
1164 | line-height: 18px; | 1214 | line-height: 18px; |
1165 | } | 1215 | } |
1166 | div.groupSidePanel div.header a:hover { | 1216 | div.groupSidePanel div.header a:hover { |
1167 | color: #444444; | 1217 | color: #444444; |
1168 | } | 1218 | } |
1169 | div.groupSidePanel div.body { | 1219 | div.groupSidePanel div.body { |
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 | |||
@@ -1,189 +1,189 @@ | |||
1 | /* | 1 | /* |
2 | 2 | ||
3 | Copyright 2008-2013 Clipperz Srl | 3 | Copyright 2008-2013 Clipperz Srl |
4 | 4 | ||
5 | This file is part of Clipperz, the online password manager. | 5 | This file is part of Clipperz, the online password manager. |
6 | For further information about its features and functionalities please | 6 | For further information about its features and functionalities please |
7 | refer to http://www.clipperz.com. | 7 | refer to http://www.clipperz.com. |
8 | 8 | ||
9 | * Clipperz is free software: you can redistribute it and/or modify it | 9 | * Clipperz is free software: you can redistribute it and/or modify it |
10 | under the terms of the GNU Affero General Public License as published | 10 | under the terms of the GNU Affero General Public License as published |
11 | by the Free Software Foundation, either version 3 of the License, or | 11 | by the Free Software Foundation, either version 3 of the License, or |
12 | (at your option) any later version. | 12 | (at your option) any later version. |
13 | 13 | ||
14 | * Clipperz is distributed in the hope that it will be useful, but | 14 | * Clipperz is distributed in the hope that it will be useful, but |
15 | WITHOUT ANY WARRANTY; without even the implied warranty of | 15 | WITHOUT ANY WARRANTY; without even the implied warranty of |
16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | 16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. |
17 | See the GNU Affero General Public License for more details. | 17 | See the GNU Affero General Public License for more details. |
18 | 18 | ||
19 | * You should have received a copy of the GNU Affero General Public | 19 | * You should have received a copy of the GNU Affero General Public |
20 | License along with Clipperz. If not, see http://www.gnu.org/licenses/. | 20 | License along with Clipperz. If not, see http://www.gnu.org/licenses/. |
21 | 21 | ||
22 | */ | 22 | */ |
23 | 23 | ||
24 | Clipperz.Base.module('Clipperz.PM.UI.Web.Components'); | 24 | Clipperz.Base.module('Clipperz.PM.UI.Web.Components'); |
25 | 25 | ||
26 | Clipperz.PM.UI.Web.Components.PageHeader = function(args) { | 26 | Clipperz.PM.UI.Web.Components.PageHeader = function(args) { |
27 | args = args || {}; | 27 | args = args || {}; |
28 | 28 | ||
29 | Clipperz.PM.UI.Web.Components.PageHeader.superclass.constructor.apply(this, arguments); | 29 | Clipperz.PM.UI.Web.Components.PageHeader.superclass.constructor.apply(this, arguments); |
30 | this._newsIsOpen = args.newsIsOpen || false; | 30 | this._newsIsOpen = args.newsIsOpen || false; |
31 | this._animationDuration = args.animationDuration || 0.5; | 31 | this._animationDuration = args.animationDuration || 0.5; |
32 | 32 | ||
33 | this._offset = 82; | 33 | this._offset = 82; |
34 | 34 | ||
35 | return this; | 35 | return this; |
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:[ |
80 | {tag:'iframe', id:this.getId('iframe'), src:this.iframeURL()} | 80 | {tag:'iframe', id:this.getId('iframe'), src:this.iframeURL()} |
81 | ]}, | 81 | ]}, |
82 | {tag:'div', id:this.getId('newsGrip'), cls:'grip', children:[ | 82 | {tag:'div', id:this.getId('newsGrip'), cls:'grip', children:[ |
83 | {tag:'div', cls:'gripHandler', children:[]} | 83 | {tag:'div', cls:'gripHandler', children:[]} |
84 | ]} | 84 | ]} |
85 | ]}, | 85 | ]}, |
86 | {tag:'div', id:'featureTabs', children:[ | 86 | {tag:'div', id:'featureTabs', children:[ |
87 | {tag:'table', children:[{tag:'tr', children:[ | 87 | {tag:'table', children:[{tag:'tr', children:[ |
88 | {tag:'td', children:[{tag:'div', id:'feature_store', children:[{tag:'canvas', cls:'featureIcon', id:this.getId('storeIcon')}, {tag:'span', html:"Store and manage your password and online credentials"}]}]}, | 88 | {tag:'td', children:[{tag:'div', id:'feature_store', children:[{tag:'canvas', cls:'featureIcon', id:this.getId('storeIcon')}, {tag:'span', html:"Store and manage your password and online credentials"}]}]}, |
89 | {tag:'td', children:[{tag:'div', id:'feature_protect', children:[{tag:'canvas', cls:'featureIcon', id:this.getId('protectIcon')}, {tag:'span', html:"Protect all your sensitive data"}]}]}, | 89 | {tag:'td', children:[{tag:'div', id:'feature_protect', children:[{tag:'canvas', cls:'featureIcon', id:this.getId('protectIcon')}, {tag:'span', html:"Protect all your sensitive data"}]}]}, |
90 | {tag:'td', children:[{tag:'div', id:'feature_directLogin', children:[{tag:'canvas', cls:'featureIcon', id:this.getId('directLoginIcon')},{tag:'span', html:"Login to your web services without entering any username or password"}]}]}, | 90 | {tag:'td', children:[{tag:'div', id:'feature_directLogin', children:[{tag:'canvas', cls:'featureIcon', id:this.getId('directLoginIcon')},{tag:'span', html:"Login to your web services without entering any username or password"}]}]}, |
91 | {tag:'td', children:[{tag:'div', id:'feature_share', children:[{tag:'canvas', cls:'featureIcon', id:this.getId('shareIcon')}, {tag:'span', html:"Share secret with family members and associates"}]}]} | 91 | {tag:'td', children:[{tag:'div', id:'feature_share', children:[{tag:'canvas', cls:'featureIcon', id:this.getId('shareIcon')}, {tag:'span', html:"Share secret with family members and associates"}]}]} |
92 | ]}]} | 92 | ]}]} |
93 | ]} | 93 | ]} |
94 | ]); | 94 | ]); |
95 | 95 | ||
96 | Clipperz.PM.UI.Canvas.features.store(this.getElement('storeIcon'), "#ffffff"); | 96 | Clipperz.PM.UI.Canvas.features.store(this.getElement('storeIcon'), "#ffffff"); |
97 | Clipperz.PM.UI.Canvas.features.protect(this.getElement('protectIcon'), "#ffffff"); | 97 | Clipperz.PM.UI.Canvas.features.protect(this.getElement('protectIcon'), "#ffffff"); |
98 | Clipperz.PM.UI.Canvas.features.directLogin(this.getElement('directLoginIcon'), "#ffffff"); | 98 | Clipperz.PM.UI.Canvas.features.directLogin(this.getElement('directLoginIcon'), "#ffffff"); |
99 | Clipperz.PM.UI.Canvas.features.share(this.getElement('shareIcon'), "#ffffff", "#ffffff", "#ff0000"); | 99 | Clipperz.PM.UI.Canvas.features.share(this.getElement('shareIcon'), "#ffffff", "#ffffff", "#ff0000"); |
100 | 100 | ||
101 | MochiKit.Signal.connect(this.getElement('newsGrip'), 'onclick', this, 'toggleTips'); | 101 | MochiKit.Signal.connect(this.getElement('newsGrip'), 'onclick', this, 'toggleTips'); |
102 | MochiKit.Signal.connect(this.getElement('iframe'), 'onload', this, 'handleIframeDidLoad'); | 102 | MochiKit.Signal.connect(this.getElement('iframe'), 'onload', this, 'handleIframeDidLoad'); |
103 | this.setLogoDefaultColors(); | 103 | this.setLogoDefaultColors(); |
104 | }, | 104 | }, |
105 | 105 | ||
106 | //------------------------------------------------------------------------- | 106 | //------------------------------------------------------------------------- |
107 | 107 | ||
108 | 'switchToLoggedMode': function() { | 108 | 'switchToLoggedMode': function() { |
109 | // MochiKit.Style.addElementClass(this.element(), 'logged'); | 109 | // MochiKit.Style.addElementClass(this.element(), 'logged'); |
110 | MochiKit.Style.hideElement('featureTabs'); | 110 | MochiKit.Style.hideElement('featureTabs'); |
111 | }, | 111 | }, |
112 | 112 | ||
113 | //------------------------------------------------------------------------- | 113 | //------------------------------------------------------------------------- |
114 | 114 | ||
115 | 'animationDuration': function () { | 115 | 'animationDuration': function () { |
116 | return this._animationDuration; | 116 | return this._animationDuration; |
117 | }, | 117 | }, |
118 | 118 | ||
119 | 'offset': function () { | 119 | 'offset': function () { |
120 | return this._offset; | 120 | return this._offset; |
121 | }, | 121 | }, |
122 | 122 | ||
123 | //------------------------------------------------------------------------- | 123 | //------------------------------------------------------------------------- |
124 | 124 | ||
125 | 'isNewsOpen': function () { | 125 | 'isNewsOpen': function () { |
126 | return this._newsIsOpen; | 126 | return this._newsIsOpen; |
127 | }, | 127 | }, |
128 | 128 | ||
129 | 'toggleNewsIsOpen': function () { | 129 | 'toggleNewsIsOpen': function () { |
130 | this._newsIsOpen = !this._newsIsOpen; | 130 | this._newsIsOpen = !this._newsIsOpen; |
131 | }, | 131 | }, |
132 | 132 | ||
133 | 'toggleTips': function(anEvent) { | 133 | 'toggleTips': function(anEvent) { |
134 | anEvent.preventDefault(); | 134 | anEvent.preventDefault(); |
135 | 135 | ||
136 | if (this.isNewsOpen() == true) { | 136 | if (this.isNewsOpen() == true) { |
137 | MochiKit.Visual.Move(Clipperz.DOM.get('news'), { | 137 | MochiKit.Visual.Move(Clipperz.DOM.get('news'), { |
138 | x: 0, | 138 | x: 0, |
139 | y: -this.offset(), | 139 | y: -this.offset(), |
140 | mode: 'relative', | 140 | mode: 'relative', |
141 | duration: this.animationDuration(), | 141 | duration: this.animationDuration(), |
142 | beforeStart: function () { | 142 | beforeStart: function () { |
143 | MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'hiding'); | 143 | MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'hiding'); |
144 | }, | 144 | }, |
145 | afterFinish: function () { | 145 | afterFinish: function () { |
146 | Clipperz.DOM.get('newsframe').innerHTML = ""; | 146 | Clipperz.DOM.get('newsframe').innerHTML = ""; |
147 | MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'hidden'); | 147 | MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'hidden'); |
148 | } | 148 | } |
149 | }) | 149 | }) |
150 | this.toggleNewsIsOpen(); | 150 | this.toggleNewsIsOpen(); |
151 | } else { | 151 | } else { |
152 | MochiKit.DOM.addElementClass('newsframe', 'loading'); | 152 | MochiKit.DOM.addElementClass('newsframe', 'loading'); |
153 | MochiKit.Visual.Move(Clipperz.DOM.get('news'), { | 153 | MochiKit.Visual.Move(Clipperz.DOM.get('news'), { |
154 | x: 0, | 154 | x: 0, |
155 | y: this.offset(), | 155 | y: this.offset(), |
156 | mode: 'relative', | 156 | mode: 'relative', |
157 | duration: this.animationDuration(), | 157 | duration: this.animationDuration(), |
158 | beforeStart: MochiKit.Base.bind(function () { | 158 | beforeStart: MochiKit.Base.bind(function () { |
159 | this.append(Clipperz.DOM.get('newsframe'), {tag:'iframe', id:this.getId('iframe'), src:this.iframeURL()}); | 159 | this.append(Clipperz.DOM.get('newsframe'), {tag:'iframe', id:this.getId('iframe'), src:this.iframeURL()}); |
160 | 160 | ||
161 | MochiKit.Signal.connect(this.getElement('iframe'), 'onload', this, 'handleIframeDidLoad'); | 161 | MochiKit.Signal.connect(this.getElement('iframe'), 'onload', this, 'handleIframeDidLoad'); |
162 | MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'opening'); | 162 | MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'opening'); |
163 | }, this), | 163 | }, this), |
164 | afterFinish: function () { | 164 | afterFinish: function () { |
165 | MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'open'); | 165 | MochiKit.DOM.setElementClass(Clipperz.DOM.get('news'), 'open'); |
166 | } | 166 | } |
167 | }) | 167 | }) |
168 | this.toggleNewsIsOpen(); | 168 | this.toggleNewsIsOpen(); |
169 | } | 169 | } |
170 | }, | 170 | }, |
171 | 171 | ||
172 | 'setLogoDefaultColors': function () { | 172 | 'setLogoDefaultColors': function () { |
173 | Clipperz.PM.UI.Canvas.logo.normal(this.getElement('logo'), "clipperz", "28.0pt", "#ffffff"); | 173 | Clipperz.PM.UI.Canvas.logo.normal(this.getElement('logo'), "clipperz", "28.0pt", "#ffffff"); |
174 | }, | 174 | }, |
175 | 175 | ||
176 | //------------------------------------------------------------------------- | 176 | //------------------------------------------------------------------------- |
177 | 177 | ||
178 | 'handleIframeDidLoad': function (anEvent) { | 178 | 'handleIframeDidLoad': function (anEvent) { |
179 | if (this.isNewsOpen() == false) { | 179 | if (this.isNewsOpen() == false) { |
180 | this.toggleTips(anEvent); | 180 | this.toggleTips(anEvent); |
181 | } | 181 | } |
182 | 182 | ||
183 | MochiKit.DOM.removeElementClass('newsframe', 'loading'); | 183 | MochiKit.DOM.removeElementClass('newsframe', 'loading'); |
184 | MochiKit.Signal.disconnectAllTo(this.getElement('iframe')); | 184 | MochiKit.Signal.disconnectAllTo(this.getElement('iframe')); |
185 | }, | 185 | }, |
186 | 186 | ||
187 | //------------------------------------------------------------------------- | 187 | //------------------------------------------------------------------------- |
188 | __syntaxFix__: "syntax fix" | 188 | __syntaxFix__: "syntax fix" |
189 | }); | 189 | }); |
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 | |||
@@ -1,337 +1,365 @@ | |||
1 | /* | 1 | /* |
2 | 2 | ||
3 | Copyright 2008-2013 Clipperz Srl | 3 | Copyright 2008-2013 Clipperz Srl |
4 | 4 | ||
5 | This file is part of Clipperz, the online password manager. | 5 | This file is part of Clipperz, the online password manager. |
6 | For further information about its features and functionalities please | 6 | For further information about its features and functionalities please |
7 | refer to http://www.clipperz.com. | 7 | refer to http://www.clipperz.com. |
8 | 8 | ||
9 | * Clipperz is free software: you can redistribute it and/or modify it | 9 | * Clipperz is free software: you can redistribute it and/or modify it |
10 | under the terms of the GNU Affero General Public License as published | 10 | under the terms of the GNU Affero General Public License as published |
11 | by the Free Software Foundation, either version 3 of the License, or | 11 | by the Free Software Foundation, either version 3 of the License, or |
12 | (at your option) any later version. | 12 | (at your option) any later version. |
13 | 13 | ||
14 | * Clipperz is distributed in the hope that it will be useful, but | 14 | * Clipperz is distributed in the hope that it will be useful, but |
15 | WITHOUT ANY WARRANTY; without even the implied warranty of | 15 | WITHOUT ANY WARRANTY; without even the implied warranty of |
16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | 16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. |
17 | See the GNU Affero General Public License for more details. | 17 | See the GNU Affero General Public License for more details. |
18 | 18 | ||
19 | * You should have received a copy of the GNU Affero General Public | 19 | * You should have received a copy of the GNU Affero General Public |
20 | License along with Clipperz. If not, see http://www.gnu.org/licenses/. | 20 | License along with Clipperz. If not, see http://www.gnu.org/licenses/. |
21 | 21 | ||
22 | */ | 22 | */ |
23 | 23 | ||
24 | Clipperz.Base.module('Clipperz.PM.UI.Web.Components'); | 24 | Clipperz.Base.module('Clipperz.PM.UI.Web.Components'); |
25 | 25 | ||
26 | Clipperz.PM.UI.Web.Components.UserInfoBox = function(args) { | 26 | Clipperz.PM.UI.Web.Components.UserInfoBox = function(args) { |
27 | args = args || {}; | 27 | args = args || {}; |
28 | 28 | ||
29 | Clipperz.PM.UI.Web.Components.UserInfoBox.superclass.constructor.apply(this, arguments); | 29 | Clipperz.PM.UI.Web.Components.UserInfoBox.superclass.constructor.apply(this, arguments); |
30 | 30 | ||
31 | this._slots = {}; | 31 | this._slots = {}; |
32 | this._isLocked = false; | 32 | this._isLocked = false; |
33 | this._lockTooltip = null; | 33 | this._lockTooltip = null; |
34 | 34 | ||
35 | return this; | 35 | return this; |
36 | } | 36 | } |
37 | 37 | ||
38 | //============================================================================= | 38 | //============================================================================= |
39 | 39 | ||
40 | Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.UserInfoBox, Clipperz.PM.UI.Common.Components.BaseComponent, { | 40 | Clipperz.Base.extend(Clipperz.PM.UI.Web.Components.UserInfoBox, 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.UserInfoBox component"; | 45 | return "Clipperz.PM.UI.Web.Components.UserInfoBox component"; |
46 | }, | 46 | }, |
47 | 47 | ||
48 | //------------------------------------------------------------------------- | 48 | //------------------------------------------------------------------------- |
49 | 49 | ||
50 | 'handleLogout': function(anEvent) { | 50 | 'handleLogout': function(anEvent) { |
51 | //Clipperz.log(">>> UserInfoBox.handleLogout"); | 51 | //Clipperz.log(">>> UserInfoBox.handleLogout"); |
52 | anEvent.preventDefault(); | 52 | anEvent.preventDefault(); |
53 | MochiKit.Signal.signal(this, 'logout'); | 53 | MochiKit.Signal.signal(this, 'logout'); |
54 | //Clipperz.log("<<< UserInfoBox.handleLogout"); | 54 | //Clipperz.log("<<< UserInfoBox.handleLogout"); |
55 | }, | 55 | }, |
56 | 56 | ||
57 | //------------------------------------------------------------------------- | 57 | //------------------------------------------------------------------------- |
58 | 58 | ||
59 | 'lockTooltip': function () { | 59 | 'lockTooltip': function () { |
60 | return this._lockTooltip; | 60 | return this._lockTooltip; |
61 | }, | 61 | }, |
62 | 62 | ||
63 | //------------------------------------------------------------------------- | 63 | //------------------------------------------------------------------------- |
64 | 64 | ||
65 | 'isLocked': function () { | 65 | 'isLocked': function () { |
66 | return this._isLocked; | 66 | return this._isLocked; |
67 | }, | 67 | }, |
68 | 68 | ||
69 | 'setIsLocked': function (aValue) { | 69 | 'setIsLocked': function (aValue) { |
70 | this._isLocked = aValue; | 70 | this._isLocked = aValue; |
71 | }, | 71 | }, |
72 | 72 | ||
73 | 'toggleLock': function(anEvent) { | 73 | 'toggleLock': function(anEvent) { |
74 | var deferredResult; | 74 | var deferredResult; |
75 | var shouldLock; | 75 | var shouldLock; |
76 | 76 | ||
77 | anEvent.preventDefault(); | 77 | anEvent.preventDefault(); |
78 | this.lockTooltip().hide(); | 78 | this.lockTooltip().hide(); |
79 | 79 | ||
80 | shouldLock = (this.isLocked() == false); | 80 | shouldLock = (this.isLocked() == false); |
81 | 81 | ||
82 | if (shouldLock) { | 82 | if (shouldLock) { |
83 | var maskElement; | 83 | var maskElement; |
84 | 84 | ||
85 | this.setIsLocked(true); | 85 | this.setIsLocked(true); |
86 | maskElement = this.getId('modalDialogMask'); | 86 | maskElement = this.getId('modalDialogMask'); |
87 | deferredResult = Clipperz.Async.callbacks("UserInfoBox.toggleLock [lock]", [ | 87 | deferredResult = Clipperz.Async.callbacks("UserInfoBox.toggleLock [lock]", [ |
88 | MochiKit.Base.partial(MochiKit.DOM.addElementClass, this.element(), 'locked'), | 88 | MochiKit.Base.partial(MochiKit.DOM.addElementClass, this.element(), 'locked'), |
89 | MochiKit.Base.partial(Clipperz.Visual.deferredAnimation, MochiKit.Visual.appear, maskElement, {from:0.0, to:0.75, duration:0.5}), | 89 | MochiKit.Base.partial(Clipperz.Visual.deferredAnimation, MochiKit.Visual.appear, maskElement, {from:0.0, to:0.75, duration:0.5}), |
90 | MochiKit.Base.method(Clipperz.PM.RunTime.mainController, 'setPassphraseDelegate', MochiKit.Base.method(this, 'askForPassphrase')), | 90 | MochiKit.Base.method(Clipperz.PM.RunTime.mainController, 'setPassphraseDelegate', MochiKit.Base.method(this, 'askForPassphrase')), |
91 | MochiKit.Base.partial(MochiKit.Signal.signal, this, 'lock') | 91 | MochiKit.Base.partial(MochiKit.Signal.signal, this, 'lock') |
92 | ], {trace:false}); | 92 | ], {trace:false}); |
93 | } else { | 93 | } else { |
94 | deferredResult = Clipperz.Async.callbacks("UserInfoBox.toggleLock [unlock]", [ | 94 | deferredResult = Clipperz.Async.callbacks("UserInfoBox.toggleLock [unlock]", [ |
95 | MochiKit.Base.partial(MochiKit.Signal.signal, this, 'unlock') | 95 | MochiKit.Base.partial(MochiKit.Signal.signal, this, 'unlock') |
96 | ], {trace:false}); | 96 | ], {trace:false}); |
97 | } | 97 | } |
98 | 98 | ||
99 | return deferredResult; | 99 | return deferredResult; |
100 | }, | 100 | }, |
101 | 101 | ||
102 | //------------------------------------------------------------------------- | 102 | //------------------------------------------------------------------------- |
103 | 103 | ||
104 | 'unlock': function () { | 104 | 'unlock': function () { |
105 | var deferredResult; | 105 | var deferredResult; |
106 | var maskElement; | 106 | var maskElement; |
107 | 107 | ||
108 | this.setIsLocked(false); | 108 | this.setIsLocked(false); |
109 | maskElement = this.getId('modalDialogMask'); | 109 | maskElement = this.getId('modalDialogMask'); |
110 | 110 | ||
111 | deferredResult = Clipperz.Async.callbacks("UserInfoBox.unlock", [ | 111 | deferredResult = Clipperz.Async.callbacks("UserInfoBox.unlock", [ |
112 | MochiKit.Base.partial(Clipperz.Visual.deferredAnimation, MochiKit.Visual.fade, maskElement, {from:0.75, to:0.0, duration:0.5}), | 112 | MochiKit.Base.partial(Clipperz.Visual.deferredAnimation, MochiKit.Visual.fade, maskElement, {from:0.75, to:0.0, duration:0.5}), |
113 | // Clipperz.Visual.deferredAnimation(MochiKit.Visual.fade, maskElement, {from:0.75, to:0.0, duration:0.5}), | 113 | // Clipperz.Visual.deferredAnimation(MochiKit.Visual.fade, maskElement, {from:0.75, to:0.0, duration:0.5}), |
114 | MochiKit.Base.partial(MochiKit.DOM.removeElementClass, this.element(), 'locked') | 114 | MochiKit.Base.partial(MochiKit.DOM.removeElementClass, this.element(), 'locked') |
115 | ], {trace:false}); | 115 | ], {trace:false}); |
116 | }, | 116 | }, |
117 | 117 | ||
118 | //------------------------------------------------------------------------- | 118 | //------------------------------------------------------------------------- |
119 | 119 | ||
120 | 'askForPassphrase': function () { | 120 | 'askForPassphrase': function () { |
121 | varunlockPasswordComponent; | 121 | varunlockPasswordComponent; |
122 | /* | 122 | /* |
123 | vardeferredResult; | 123 | vardeferredResult; |
124 | 124 | ||
125 | deferredResult = new Clipperz.Async.Deferred("UserInfoBox.askForPassphrase", {trace:false}); | 125 | deferredResult = new Clipperz.Async.Deferred("UserInfoBox.askForPassphrase", {trace:false}); |
126 | deferredResult.addCallback(MochiKit.Async.succeed, 'test'); | 126 | deferredResult.addCallback(MochiKit.Async.succeed, 'test'); |
127 | 127 | ||
128 | deferredResult.callback(); | 128 | deferredResult.callback(); |
129 | 129 | ||
130 | return deferredResult; | 130 | return deferredResult; |
131 | */ | 131 | */ |
132 | unlockPasswordComponent = new Clipperz.PM.UI.Web.Components.UnlockPasswordComponent({ | 132 | unlockPasswordComponent = new Clipperz.PM.UI.Web.Components.UnlockPasswordComponent({ |
133 | 'title':"Unlock account", | 133 | 'title':"Unlock account", |
134 | 'text': "Insert the passprase to unlock the account", | 134 | 'text': "Insert the passprase to unlock the account", |
135 | 'type': 'INFO', | 135 | 'type': 'INFO', |
136 | 'buttons': [ | 136 | 'buttons': [ |
137 | {text:"Cancel",result:'CANCEL'}, | 137 | {text:"Cancel",result:'CANCEL'}, |
138 | {text:"Unlock", result:'OK',isDefault:true} | 138 | {text:"Unlock", result:'OK',isDefault:true} |
139 | ], | 139 | ], |
140 | 'openFromElement': this.getElement('lock'), | 140 | 'openFromElement': this.getElement('lock'), |
141 | 'onOkCloseToElement': null, | 141 | 'onOkCloseToElement': null, |
142 | 'onCancelCloseToElement':this.getId('lock') | 142 | 'onCancelCloseToElement':this.getId('lock') |
143 | }); | 143 | }); |
144 | 144 | ||
145 | return unlockPasswordComponent.getPassphrase(); | 145 | return unlockPasswordComponent.getPassphrase(); |
146 | }, | 146 | }, |
147 | 147 | ||
148 | //========================================================================= | 148 | //========================================================================= |
149 | 149 | ||
150 | 'renderSelf': function(/*aContainer, aPosition*/) { | 150 | 'renderSelf': function(/*aContainer, aPosition*/) { |
151 | this.append(this.element(), [ | 151 | this.append(this.element(), [ |
152 | // {tag:'canvas', id:this.getId('canvas'), cls:'canvas', width:'188', height:'154'}, | 152 | // {tag:'canvas', id:this.getId('canvas'), cls:'canvas', width:'188', height:'154'}, |
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; |
210 | var gradient; | 238 | var gradient; |
211 | if (window.devicePixelRatio) | 239 | if (window.devicePixelRatio) |
212 | resolution = window.devicePixelRatio; | 240 | resolution = window.devicePixelRatio; |
213 | else | 241 | else |
214 | resolution = 1.0; | 242 | resolution = 1.0; |
215 | resolution *= 0.5 * (canvas.width / kMyDrawingFunctionWidth + canvas.height / kMyDrawingFunctionHeight); | 243 | resolution *= 0.5 * (canvas.width / kMyDrawingFunctionWidth + canvas.height / kMyDrawingFunctionHeight); |
216 | 244 | ||
217 | context.save(); | 245 | context.save(); |
218 | context.scale(canvas.width / kMyDrawingFunctionWidth, canvas.height / kMyDrawingFunctionHeight); | 246 | context.scale(canvas.width / kMyDrawingFunctionWidth, canvas.height / kMyDrawingFunctionHeight); |
219 | context.clearRect(0.0, 0.0, kMyDrawingFunctionWidth, kMyDrawingFunctionHeight); | 247 | context.clearRect(0.0, 0.0, kMyDrawingFunctionWidth, kMyDrawingFunctionHeight); |
220 | 248 | ||
221 | // Setup for Shadow Effect | 249 | // Setup for Shadow Effect |
222 | color = "rgba(0.0%, 0.0%, 0.0%, 0.667)"; | 250 | color = "rgba(0.0%, 0.0%, 0.0%, 0.667)"; |
223 | context.save(); | 251 | context.save(); |
224 | context.shadowColor = color; | 252 | context.shadowColor = color; |
225 | context.shadowBlur = 3.0; | 253 | context.shadowBlur = 3.0; |
226 | context.shadowOffsetX = 5.729 * Math.cos(7.592) * resolution; | 254 | context.shadowOffsetX = 5.729 * Math.cos(7.592) * resolution; |
227 | context.shadowOffsetY = 5.729 * Math.sin(7.592) * resolution; | 255 | context.shadowOffsetY = 5.729 * Math.sin(7.592) * resolution; |
228 | 256 | ||
229 | // Layer 1 | 257 | // Layer 1 |
230 | 258 | ||
231 | alignStroke = 0.0; | 259 | alignStroke = 0.0; |
232 | context.beginPath(); | 260 | context.beginPath(); |
233 | pointX = 169.5; | 261 | pointX = 169.5; |
234 | pointY = 141.5; | 262 | pointY = 141.5; |
235 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | 263 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; |
236 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | 264 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; |
237 | context.moveTo(pointX, pointY); | 265 | context.moveTo(pointX, pointY); |
238 | pointX = 177.5; | 266 | pointX = 177.5; |
239 | pointY = 133.5; | 267 | pointY = 133.5; |
240 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | 268 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; |
241 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | 269 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; |
242 | controlPoint1X = 173.889; | 270 | controlPoint1X = 173.889; |
243 | controlPoint1Y = 141.5; | 271 | controlPoint1Y = 141.5; |
244 | controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; | 272 | controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; |
245 | controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; | 273 | controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; |
246 | controlPoint2X = 177.5; | 274 | controlPoint2X = 177.5; |
247 | controlPoint2Y = 137.889; | 275 | controlPoint2Y = 137.889; |
248 | controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; | 276 | controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; |
249 | controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; | 277 | controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; |
250 | context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); | 278 | context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); |
251 | pointX = 177.5; | 279 | pointX = 177.5; |
252 | pointY = 19.5; | 280 | pointY = 19.5; |
253 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | 281 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; |
254 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | 282 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; |
255 | context.lineTo(pointX, pointY); | 283 | context.lineTo(pointX, pointY); |
256 | pointX = 169.5; | 284 | pointX = 169.5; |
257 | pointY = 11.5; | 285 | pointY = 11.5; |
258 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | 286 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; |
259 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | 287 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; |
260 | controlPoint1X = 177.5; | 288 | controlPoint1X = 177.5; |
261 | controlPoint1Y = 15.111; | 289 | controlPoint1Y = 15.111; |
262 | controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; | 290 | controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; |
263 | controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; | 291 | controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; |
264 | controlPoint2X = 173.889; | 292 | controlPoint2X = 173.889; |
265 | controlPoint2Y = 11.5; | 293 | controlPoint2Y = 11.5; |
266 | controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; | 294 | controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; |
267 | controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; | 295 | controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; |
268 | context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); | 296 | context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); |
269 | pointX = 18.5; | 297 | pointX = 18.5; |
270 | pointY = 11.5; | 298 | pointY = 11.5; |
271 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | 299 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; |
272 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | 300 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; |
273 | context.lineTo(pointX, pointY); | 301 | context.lineTo(pointX, pointY); |
274 | pointX = 10.5; | 302 | pointX = 10.5; |
275 | pointY = 19.5; | 303 | pointY = 19.5; |
276 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | 304 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; |
277 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | 305 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; |
278 | controlPoint1X = 14.111; | 306 | controlPoint1X = 14.111; |
279 | controlPoint1Y = 11.5; | 307 | controlPoint1Y = 11.5; |
280 | controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; | 308 | controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; |
281 | controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; | 309 | controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; |
282 | controlPoint2X = 10.5; | 310 | controlPoint2X = 10.5; |
283 | controlPoint2Y = 15.111; | 311 | controlPoint2Y = 15.111; |
284 | controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; | 312 | controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; |
285 | controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; | 313 | controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; |
286 | context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); | 314 | context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); |
287 | pointX = 10.5; | 315 | pointX = 10.5; |
288 | pointY = 133.5; | 316 | pointY = 133.5; |
289 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | 317 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; |
290 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | 318 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; |
291 | context.lineTo(pointX, pointY); | 319 | context.lineTo(pointX, pointY); |
292 | pointX = 18.5; | 320 | pointX = 18.5; |
293 | pointY = 141.5; | 321 | pointY = 141.5; |
294 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | 322 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; |
295 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | 323 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; |
296 | controlPoint1X = 10.5; | 324 | controlPoint1X = 10.5; |
297 | controlPoint1Y = 137.889; | 325 | controlPoint1Y = 137.889; |
298 | controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; | 326 | controlPoint1X = (Math.round(resolution * controlPoint1X + alignStroke) - alignStroke) / resolution; |
299 | controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; | 327 | controlPoint1Y = (Math.round(resolution * controlPoint1Y + alignStroke) - alignStroke) / resolution; |
300 | controlPoint2X = 14.111; | 328 | controlPoint2X = 14.111; |
301 | controlPoint2Y = 141.5; | 329 | controlPoint2Y = 141.5; |
302 | controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; | 330 | controlPoint2X = (Math.round(resolution * controlPoint2X + alignStroke) - alignStroke) / resolution; |
303 | controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; | 331 | controlPoint2Y = (Math.round(resolution * controlPoint2Y + alignStroke) - alignStroke) / resolution; |
304 | context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); | 332 | context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, pointX, pointY); |
305 | pointX = 169.5; | 333 | pointX = 169.5; |
306 | pointY = 141.5; | 334 | pointY = 141.5; |
307 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; | 335 | pointX = (Math.round(resolution * pointX + alignStroke) - alignStroke) / resolution; |
308 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; | 336 | pointY = (Math.round(resolution * pointY + alignStroke) - alignStroke) / resolution; |
309 | context.lineTo(pointX, pointY); | 337 | context.lineTo(pointX, pointY); |
310 | context.closePath(); | 338 | context.closePath(); |
311 | gradient = context.createLinearGradient(94.0, 11.5, 94.0, 141.5); | 339 | gradient = context.createLinearGradient(94.0, 11.5, 94.0, 141.5); |
312 | color = "#EE9B69"; | 340 | color = "#EE9B69"; |
313 | gradient.addColorStop(0.0, color); | 341 | gradient.addColorStop(0.0, color); |
314 | color = "#E38D62"; | 342 | color = "#E38D62"; |
315 | gradient.addColorStop(1.0, color); | 343 | gradient.addColorStop(1.0, color); |
316 | context.fillStyle = gradient; | 344 | context.fillStyle = gradient; |
317 | context.fill(); | 345 | context.fill(); |
318 | 346 | ||
319 | // Shadow Effect | 347 | // Shadow Effect |
320 | context.restore(); | 348 | context.restore(); |
321 | 349 | ||
322 | context.restore(); | 350 | context.restore(); |
323 | }, | 351 | }, |
324 | */ | 352 | */ |
325 | //------------------------------------------------------------------------- | 353 | //------------------------------------------------------------------------- |
326 | 354 | ||
327 | 'updateUserDetails': function (someUserInfo) { | 355 | 'updateUserDetails': function (someUserInfo) { |
328 | varelementName; | 356 | varelementName; |
329 | 357 | ||
330 | for (elementName in someUserInfo) { | 358 | for (elementName in someUserInfo) { |
331 | this.getElement(elementName).innerHTML = someUserInfo[elementName]; | 359 | this.getElement(elementName).innerHTML = someUserInfo[elementName]; |
332 | } | 360 | } |
333 | }, | 361 | }, |
334 | 362 | ||
335 | //------------------------------------------------------------------------- | 363 | //------------------------------------------------------------------------- |
336 | __syntaxFix__: "syntax fix" | 364 | __syntaxFix__: "syntax fix" |
337 | }); | 365 | }); |