Skip to content
Browse files

totally redesigned login view for rangr

  • Loading branch information...
1 parent ad3be38 commit 2236a14b40a83b46341448fd801ec527b440413d @nitindhar7 committed Apr 3, 2012
View
1 README.md
@@ -79,6 +79,7 @@ A simple data access object which saves the authentication token to local storag
- Popup Icon
- UI improvement
+- OOCSS for views
* * *
View
BIN icon.png
Deleted file not rendered
View
2 manifest.json
@@ -3,7 +3,7 @@
"version": "0.1.0",
"description": "Rangr is a Google Chrome extension that pulls a users notification data from Forrst.com and presents it in the browser in a soft, non-intrusive manner",
"browser_action": {
- "default_icon": "icon.png",
+ "default_icon": "src/images/rangr-no-bg-25x25.png",
"default_title": "Rangr - Notifications for Forrst",
"default_popup": "src/login_view.html"
},
View
178 src/css/login_view.css
@@ -5,45 +5,181 @@
font-family: Helvetica, Tahoma;
font-size: 10px;
color: #333;
+ outline: none;
}
#login {
+ margin: 5px;
padding: 10px;
- padding-bottom: 0;
- width: 300px;
- height: 150px;
+ width: 470px;
+ height: 270px;
+ background: #F5F5F5;
+ -webkit-border-radius: 3px;
}
-#login .title {
+#nav {
+ width: 470px;
+ height: 70px;
+ clear: both;
+}
+
+#nav-logo {
+ width: 150px;
+ height: 70px;
+ background: url(../images/rangr-popup-view-logo.png);
+ float: left;
+}
+
+#nav-spinner {
+ margin-top: 27px;
+ width: 16px;
+ height: 16px;
+ float: right;
+ background: url(../images/ajax-loader.gif);
+ display: none;
+}
+
+#nav-buttons {
+ height: 70px;
+ float: right;
+}
+
+#nav-button-signup {
+ padding: 0 10px;
+ height: 70px;
+ line-height: 70px;
+ color: #6C6;
+ font-size: 14px;
+ text-shadow: white 1px 1px 0px;
+ cursor: pointer;
+ text-align: center;
+}
+
+#nav-button-signup:hover {
+ color: #1C1;
+ text-decoration: underline;
+}
+
+#content {
+ width: 470px;
+ height: 200px;
+}
+
+#byline {
+ margin-bottom: 10px;
+ margin-left: 20px;
+ width: 470px;
+ height: 15px;
+ line-height: 15px;
+ color: #666;
+ font-size: 14px;
+ font-weight: bold;
+ text-shadow: white 1px 1px 0px;
+}
+
+#login-form {
+ width: 470px;
+ height: 175px;
+}
+
+#login-form .title {
margin-bottom: 10px;
- width: 280px;
+ margin-left: 30px;
+ margin-right: 10px;
+ width: 100px;
height: 30px;
line-height: 30px;
- font-weight: bold;
+ color: #666;
+ font-size: 12px;
+ text-align: right;
+ float: left;
+ clear: left;
+ text-shadow: white 1px 1px 0px;
}
-#login .box {
+#login-form .box {
margin-bottom: 10px;
- width: 280px;
- height: 30px;
- line-height: 30px;
+ margin-right: 80px;
+ padding: 5px;
+ width: 238px;
+ height: 28px;
+ line-height: 18px;
+ float: left;
+ font-size: 12px;
+ border: 1px solid #666;
+ -webkit-border-radius: 3px;
+ clear: right;
+}
+
+#login-form .check {
+ margin-left: 140px;
+ width: 25px;
+ height: 25px;
+ float: left;
+ clear: left;
+}
+
+#login-form .check-label {
+ margin-left: 5px;
+ width: 300px;
+ height: 25px;
+ line-height: 25px;
+ font-size: 12px;
+ color: #999;
+ float: left;
+ clear: right;
+ text-shadow: white 1px 1px 0px;
+}
+
+#login-form .note-label {
+ margin-left: 170px;
+ width: 40px;
+ height: 25px;
font-weight: bold;
+ color: #666;
+ float: left;
+ clear: left;
+ text-shadow: white 1px 1px 0px;
}
-#logout {
- width: 300px;
- height: 30px;
- display: none;
- cursor: pointer;
- text-decoration: underline;
+#login-form .note-content {
+ width: 260px;
+ height: 42px;
+ font-style: italic;
+ color: #999;
+ float: left;
+ clear: right;
+ text-shadow: white 1px 1px 0px;
}
-#logout:hover {
- color: #000;
+#login-form .submit {
+ margin-left: 140px;
+ width: 58px;
+ height: 28px;
+ border: 1px solid #3C3;
+ background: -webkit-gradient(linear, left top, left bottom, from(#6C6), to(#3C3));
+ color: #FFF;
+ font-size: 12px;
+ font-weight: bold;
+ -webkit-box-shadow: 0 0 2px #333;
+ -webkit-border-radius: 3px;
+ float: left;
+ clear: left;
+ cursor: pointer;
+}
+
+#login-form .submit:hover {
+ -webkit-box-shadow: 0 0 30px #CFC;
}
#message {
- width: 300px;
- height: 30px;
- display: none;
+ margin-left: 15px;
+ width: 240px;
+ height: 28px;
+ line-height: 28px;
+ font-size: 12px;
+ color: #C00;
+ float: left;
+ clear: right;
+ text-shadow: white 1px 1px 0px;
}
View
BIN src/images/rangr-no-bg-25x25.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN src/images/rangr-popup-view-logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
2 src/js/controller/base_controller.js
@@ -2,8 +2,6 @@ chrome.extension.onRequest.addListener(requestHandler);
var notifications = [];
-setInterval(alert("interval"), 5000);
-
function requestHandler(request, sender, sendResponse) {
if(request.type == "auth") {
View
5 src/js/controller/login_controller.js
@@ -32,7 +32,7 @@ function actionLogout() {
// FIXME: change UI if user already logged in
function actionLogin() {
- $("#message").hide();
+ $("#nav-spinner").show();
var data = {
type: "login",
@@ -41,11 +41,10 @@ function actionLogin() {
}
chrome.extension.sendRequest(data, function(response) {
+ $("#nav-spinner").hide();
if(response.error != null)
showMessage(response.error);
else {
- $("#logout").show();
- $("#logout").bind("click", actionLogout);
chrome.extension.sendRequest({type: "auth"}, function(response) {
});
View
29 src/login_view.html
@@ -6,13 +6,28 @@
</head>
<body>
<div id="login">
- <div class="title">Email or Username</div>
- <input type="text" class="box"/>
- <div class="title">Password</div>
- <input type="password" class="box"/>
- <input type="submit" value="Login" class="submit"/>
+ <div id="nav">
+ <div id="nav-logo"></div>
+ <div id="nav-spinner"></div>
+ <div id="nav-buttons">
+ <div id="nav-button-signup">Create an account</div>
+ </div>
+ </div>
+ <div id="content">
+ <div id="byline">Sign in to Rangr</div>
+ <div id="login-form">
+ <div class="title">Username</div>
+ <input type="text" class="box"/>
+ <div class="title">Password</div>
+ <input type="password" class="box"/>
+ <input type="checkbox" class="check"/>
+ <div class="check-label">Remember me</div>
+ <div class="note-label">NOTE:</div>
+ <div class="note-content">Storing your passwords may allow others to access your Rangr account when using the browser</div>
+ <input type="submit" value="Sign in" class="submit"/>
+ <div id="message"></div>
+ </div>
+ </div>
</div>
- <div id="logout">Logout</div>
- <div id="message"></div>
</body>
</html>

0 comments on commit 2236a14

Please sign in to comment.
Something went wrong with that request. Please try again.