From d2211bc4826c0233e292b413517d009c323f45e6 Mon Sep 17 00:00:00 2001 From: life Date: Thu, 5 Mar 2015 00:22:32 +0800 Subject: [PATCH] =?UTF-8?q?login=E7=95=8C=E9=9D=A2=E7=BE=8E=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- login.html | 56 ++++++++++++++--------- public/css/index.css | 84 +++++++++++++++++++++++++++-------- public/css/index.less | 101 +++++++++++++++++++++++++++++++++++------- public/js/app/page.js | 4 +- public/js/common.js | 16 +++++++ 5 files changed, 202 insertions(+), 59 deletions(-) diff --git a/login.html b/login.html index ab9b8efd..53cb2b76 100644 --- a/login.html +++ b/login.html @@ -12,32 +12,36 @@ - -
+
+ +
+ +
+

- + + +

- -
- -
-
- + +
+
+ +
+
+ +
- Forget password? - Sign up + Forget password? + Sign up
@@ -65,21 +69,21 @@ $(function() { function hideMsg() { $("#loginMsg").hide(); } - $("#loginBtn").click(function(e){ - e.preventDefault(); + $("#loginBtn").click(function(e) { + e.preventDefault(); var email = $("#email").val(); var pwd = $("#pwd").val(); var captcha = $("#captcha").val() if(!email) { - showMsg("请输入用户名", "email"); + showMsg("Email is required", "email"); return; } if(!pwd) { - showMsg("请输入密码", "pwd"); + showMsg("Password is required", "pwd"); return; } else { if(pwd.length < 6) { - showMsg("密码有误", "pwd"); + showMsg("Email or Password Error", "pwd"); return; } } @@ -92,7 +96,7 @@ $(function() { $("#loginBtn").html("Success..."); location.href = 'index.html'; } else { - showMsg("Email or Password error"); + showMsg("Email or Password Error"); } }); }); @@ -100,8 +104,16 @@ $(function() { var gui = require('nw.gui'); var win = gui.Window.get(); -win.resizeTo(400, 300); +win.resizeTo(258, 326); win.setPosition('center'); + +$('body').on('keydown', function(e) { + commonCmd(e); +}); + + +
+ \ No newline at end of file diff --git a/public/css/index.css b/public/css/index.css index 83a4f5db..e9a9f25a 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -81,7 +81,6 @@ a:hover { margin-top: 60px; } section { - background-color: #fff; color: #e2f3e5; margin-top: 60px; } @@ -234,10 +233,17 @@ section { #loginContainer { position: relative; } +#formContainer { + border-radius: 2px !important; + border: 1px solid #d9d9d9; + overflow: hidden; +} +#formContainer .form-group-1 { + border-bottom: 1px solid #d9d9d9; +} input, .form-control { - border-radius: 2px !important; - border-color: #d9d9d9; + border: none; height: 40px; padding: 10px 16px; } @@ -281,25 +287,15 @@ input, #footer #beian a { font-size: 8px; } -#aboutLeanote h2 { - margin: 20px 0; - text-align: center; -} -#aboutLeanote { - padding: 30px; -} -#boxBody { - background-color: #fff; -} #box { margin: 0; color: #000; - padding-top: 30px; + padding-top: 40px; } #box h1 { margin: auto; - margin-bottom: 20px; - width: 500px; + margin-bottom: 30px; + width: 316px; color: #eee; } #logo { @@ -317,7 +313,7 @@ input, font-size: 16px; } #boxForm { - width: 500px; + width: 316px; margin: auto; border-radius: 2px; width: 200px; @@ -339,7 +335,7 @@ input, color: #eee; } #quickLinks { - width: 500px; + width: 316px; margin: auto; text-align: right; } @@ -470,7 +466,7 @@ input, margin-left: 10px; } #errorBox { - width: 500px; + width: 316px; margin: auto; padding: 20px 30px; padding-bottom: 30px; @@ -678,3 +674,53 @@ input, .alert { padding: 3px; } +html { + background: transparent; + border-radius: 5px; +} +body { + -webkit-app-region: drag; + position: relative; + background-color: transparent; +} +body #container { + position: relative; + margin: 5px; + width: 248px; + height: 316px; + background-color: rgba(247, 249, 250, 0.99); + border-radius: 5px; + border: 1px solid #eee; + -webkit-user-select: none; + box-shadow: 0px 0px 5px rgba(66, 66, 66, 0.5); +} +#box h1 { + width: 248px; +} +#box h1 img { + width: 100px; + border: 1px solid #4092C5; + border-radius: 50%; + padding: 20px; +} +.win-tool { + padding: 5px; + position: absolute; + left: 0; + top: 0; + z-index: 99999; +} +.win-tool a { + display: block; + float: left; + width: 14px; + height: 14px; + background-size: 14px 14px !important; + margin-right: 5px; +} +.win-tool .tool-close { + background: url(icon/traffic-close@2x.png); +} +.win-tool:hover .tool-close { + background: url(icon/traffic-close-hover@2x.png); +} diff --git a/public/css/index.less b/public/css/index.less index 521f4c8e..86e14f52 100644 --- a/public/css/index.less +++ b/public/css/index.less @@ -97,7 +97,7 @@ a:hover { margin-top: @headerHeight; } section { - background-color: #fff; + // background-color: #fff; color: #e2f3e5; margin-top: @headerHeight; } @@ -261,9 +261,17 @@ section { position: relative; } -input, .form-control { +#formContainer { border-radius: 2px !important; - border-color: #d9d9d9; + border: 1px solid #d9d9d9; + overflow: hidden; + .form-group-1 { + border-bottom: 1px solid #d9d9d9; + } +} + +input, .form-control { + border: none; height: 40px; padding: 10px 16px; } @@ -319,27 +327,19 @@ input, .form-control { } } } -#aboutLeanote h2 { - margin: 20px 0; - text-align: center; -} -#aboutLeanote { - padding: 30px; -} + //------------- -#boxBody { - background-color: #fff; -} -@boxWidth: 500px; + +@boxWidth: 316px; #box { margin: 0; color: #000; - padding-top: 30px; + padding-top: 40px; h1 { width: @boxWidth;; margin: auto; - margin-bottom: 20px; + margin-bottom: 30px; width: @boxWidth;; color: #eee; } @@ -766,4 +766,71 @@ input, .form-control { } .alert { padding: 3px; -} \ No newline at end of file +} + +html { + background: transparent; + border-radius: 5px; + // width: 258px; + // height: 326px; +} +body { + -webkit-app-region: drag; + position: relative; + background-color: transparent; + // width: 248px; + // height: 316px; + #container { + position: relative; + margin: 5px; + // margin-top: 0; + // left: 5px; + // right: 5px; + // bottom: 5px; + // padding: 5px; + // padding-top: 0; + width: 248px; + height: 316px; + background-color: rgba(247,249,250,0.99); + border-radius: 5px; + border: 1px solid #eee; + -webkit-user-select: none; // input, textarea还是可以选择的 + // box-shadow: 0 0 50px #eee; + // box-shadow: 0px 0px 5px #666; + box-shadow: 0px 0px 5px rgba(66, 66, 66, 0.5); + } +} +#box h1 { + width: 248px; + img { + width: 100px; + border: 1px solid #4092C5; + border-radius: 50%; + padding: 20px; + } +} +.win-tool { + // height: 14px; + padding: 5px; + position: absolute; + left: 0; + top: 0; + z-index: 99999; + a { + display: block; + float: left; + width: 14px; + height: 14px; + background-size: 14px 14px !important; + margin-right: 5px; + } + .tool-close { + background: url(icon/traffic-close@2x.png); + } + + &:hover { + .tool-close { + background: url(icon/traffic-close-hover@2x.png); + } + } +} diff --git a/public/js/app/page.js b/public/js/app/page.js index 9d3cb2c9..3699cefa 100644 --- a/public/js/app/page.js +++ b/public/js/app/page.js @@ -1551,7 +1551,9 @@ function userMenu() { this.switchAccount = new gui.MenuItem({ label: 'Switch account', click: function(e) { - location.href = 'login.html'; + window.open('login.html'); + win.close(); + // location.href = 'login.html'; } }); this.theme = new gui.MenuItem({ diff --git a/public/js/common.js b/public/js/common.js index 82f76b34..8070e353 100644 --- a/public/js/common.js +++ b/public/js/common.js @@ -1383,4 +1383,20 @@ var ContextTips = { } }; +function commonCmd(e) { + var num = e.which ? e.which : e.keyCode; + // copy, paste + if(e.ctrlKey || e.metaKey) { + if(num == 67) { // ctrl + c + document.execCommand('copy'); + } else if(num == 86) { // ctrl + v + document.execCommand('paste'); + } else if(num == 65) { // ctrl + a + document.execCommand('selectAll'); + } else if(num == 88) { // ctrl + x + document.execCommand('cut'); + } + } +}; + ContextTips.init(); \ No newline at end of file