Skip to content

Commit

Permalink
ui changed
Browse files Browse the repository at this point in the history
  • Loading branch information
@edithli
edithli committed May 27, 2016
1 parent cc3a73d commit df8170d
Show file tree
Hide file tree
Showing 9 changed files with 313 additions and 208 deletions.
63 changes: 54 additions & 9 deletions content_script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ function detectLoginForm(){
var input = inputs[i];
// add buttons to account id and password input elements
if ( (input.type == 'password' || input.name == 'password') && input.id != '__popup_new_password_id' ){
input.style.border = "3px solid red";
// input.style.border = "3px solid red";
// addButton(input);
hasPassword = true;
hasUsername = false;
Expand All @@ -187,7 +187,7 @@ function detectLoginForm(){
console.log('find password id: ' + passwordId);
addPopupOpener(input);
} else if ( (input.type == 'text' || input.type == 'email') && input.id != '__popup_new_username_id' && hasPassword && !hasUsername) {
input.style.border = "3px solid yellow";
// input.style.border = "3px solid yellow";
hasPassword = false;
hasUsername = true;
usernameId = input.id;
Expand Down Expand Up @@ -290,14 +290,14 @@ function normalPage(){
var input = inputs[i];
// add buttons to account id and password input elements
if ( (input.type == 'password' || input.name == 'password') && input.id != '__popup_new_password_id' ){
input.style.border = "3px solid red";
// input.style.border = "3px solid red";
// addButton(input);
hasPassword = true;
passwordId = input.id;
console.log('find password id: ' + passwordId);
addPopupOpener(input);
} else if ( (input.type == 'text' || input.type == 'email') && input.id != '__popup_new_username_id' && hasPassword) {
input.style.border = "3px solid yellow";
// input.style.border = "3px solid yellow";
hasPassword = false;
usernameId = input.id;
console.log('find username id: ' + usernameId);
Expand Down Expand Up @@ -364,15 +364,59 @@ function normalPage(){
}

function addPopupOpener(input) {
if (!input.style.display || input.style.display == "inline-block")
input.style.display = "block";

// $("#"+passwordId).wrap("<img src=\"" + chrome.extension.getURL("icons/icon.png") + "\" name=\"popupOpenerImg\" onMouseOver=\"\"></img>");
var inputStyle = input.currentStyle || window.getComputedStyle(input);
console.log("input border: " + inputStyle.borderBottomWidth);
// console.log("padding: " + inputStyle.paddingBottom);
var bottomMargin = inputStyle.marginBottom.toString();
var bottomBorder = inputStyle.borderBottomWidth.toString();
// var inputHeight = inputStyle.height.toString();
var inputHeight = input.scrollHeight;
var rightMargin = inputStyle.marginRight.toString();
console.log("bottomMargin: " + bottomMargin + "\t" + "input height: " + inputHeight + "\t" + "border: " + bottomBorder + "\t" + "right margin: " + rightMargin);

var marginMeasure = bottomMargin.substr(-2);
var heightMeasure = bottomBorder.substr(-2);
var imgMargin = 8;
if (marginMeasure != heightMeasure){
console.error("measure of margin and height distinct: margin: " + bottomMargin + " height: " + inputHeight);
imgMargin = "0px";
} else {
if (bottomMargin.match("\.")){
imgMargin += parseFloat(bottomMargin);
} else imgMargin += parseInt(bottomMargin);
if (bottomBorder.match("\."))
imgMargin += parseFloat(bottomBorder);
else imgMargin += parseInt(bottomBorder);
if (inputHeight.toString().match("\."))
imgMargin += (parseFloat(inputHeight) / 2);
else imgMargin += (parseInt(inputHeight) / 2);
imgMargin = "-" + imgMargin + marginMeasure;
}
console.log("img margin: " + imgMargin);

var inputRect = input.getBoundingClientRect();
var openerDiv = document.createElement("div");
openerDiv.setAttribute("name", "popupOpenerDiv");
openerDiv.style.width = "16px";
openerDiv.style.height = "16px";
openerDiv.style.position = "absolute";
// openerDiv.style.verticalAlign = "top";
openerDiv.style.bottom = inputRect.bottom;
openerDiv.style.right = inputRect.right;
openerDiv.style.display = "block";
openerDiv.style.float = "right";
openerDiv.style.marginTop = imgMargin;
openerDiv.style.marginRight = rightMargin;
openerDiv.style.zIndex = "999";
// var topMargin = "-" + (input.scrollHeight / 2 + 8) + "px";
// console.log("top margin: " + topMargin);
// // openerDiv.style.marginTop = topMargin;
// console.log("input height: " + input.scrollHeight);
// console.log("or: " + inputRect.height);
// openerDiv.style.position = "absolute";
// // openerDiv.style.verticalAlign = "top";
// openerDiv.style.bottom = inputRect.bottom;
// openerDiv.style.right = inputRect.right;
var openerImg = document.createElement("img");
openerImg.setAttribute("src", chrome.extension.getURL("icons/icon.png"));
openerImg.setAttribute("name", "popupOpenerImg");
Expand All @@ -383,7 +427,8 @@ function addPopupOpener(input) {
openerDiv.appendChild(openerImg);
// document.body.appendChild(openerDiv);
var parent = input.parentNode;
parent.appendChild(openerDiv);
// parent.appendChild(openerDiv);
parent.insertBefore(openerDiv, input.nextSibling);
}

function addPopup(){
Expand Down
Binary file added extension/server/web/picture/bkg-0.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added extension/server/web/picture/bkg-1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added extension/server/web/picture/bkg-2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
99 changes: 80 additions & 19 deletions extension/server/web/register.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,90 @@
<html lang="en">
<head>
<title>register</title>
<meta charset="UTF-8" />
<style type="text/css">
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#register-div {
width: 30%;
height: 30%;
position: relative;
background-color: wheat;
padding: 20px;
border: 2px solid lightgray;
-webkit-border-radius: 5px;
-moz-border-radius:5px;
border-radius: 5px;
}
.entry-div {
display: block;
clear: left;
padding: 5px;
}
input {
width: 200px;
height: 20px;
border: 1px solid lightgray;
border-radius: 5px;
}
.entry-div label {
width: 100%;
padding-bottom: 5px;
alignment: right;
}
.entry-div input {
width: 100%;
alignment: left;
}
#welcome-register {
width: 100%;
margin: 10px;
text-align: center;
}
#register-submit {
background-color: white;
border: 2px solid lightgray;
border-radius: 5px;
font-size: 1em;
width: 100%;
height: 30px;
margin: 5px;
}
</style>
</head>
<body>
<form method="post" action="RegisterServlet" id="register-form" onsubmit="return checkForm()">
<div>
<label id="user-name-label">Username:</label>
<input id="username-input" type="text" name="username"/>
<div id="register-div">
<div id="welcome-register">欢迎注册！</div>
<form method="post" action="RegisterServlet" id="register-form" onsubmit="return checkForm()">
<div class="entry-div">
<label for="username-input">用户名：</label><input id="username-input" type="text" name="username"/>
</div>
<div class="entry-div">
<label for="password-hint">密码提示：</label><input id="password-hint" type="text" name="password-hint"/>
</div>
<div style="display: none">
<input id="cipher-checksum" name="cipher-checksum" type="text" style="display: none;" />
</div>
</form>
<div class="entry-div">
<label for="password-input">主密码：</label><input id="password-input" type="password"/>
</div>
<div>
<label id="password-hint-label">Password Hint: </label>
<input id="password-hint" type="text" name="password-hint"/>
<div class="entry-div">
<label for="checksum-input">校验码：</label><input id="checksum-input" type="text" />
</div>
<div>
<input id="cipher-checksum" name="cipher-checksum" type="text" style="display: none;" />
</div>
</form>
<div>
<label id="password-label">Master Password: </label>
<input id="password-input" type="password"/>
</div>
<div>
<label id="checksum-label">Checksum: </label>
<input id="checksum-input" type="text" />
<button id="register-submit">确定</button>
</div>
<button id="register-submit">Submit</button>
</body>
</html>
4 changes: 4 additions & 0 deletions jquery-2.2.4.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*", "ftp://*/*"],
"js": ["content_script.js"]
"js": ["content_script.js", "jquery-2.2.4.min.js"]
}
],

Expand Down
Loading

0 comments on commit df8170d

Please sign in to comment.