improved some css for options.html

This commit is contained in:
Marco 2014-06-01 22:22:34 +02:00
parent cf35b7056f
commit 5cddcb59aa
5 changed files with 28 additions and 17 deletions

View file

@ -7,16 +7,14 @@
color: #7fd0ed; color: #7fd0ed;
font-weight: bold; font-weight: bold;
} }
.btn:hover, .btn:focus { .btn:hover {
cursor: pointer; cursor: pointer;
outline: none; outline: none;
}
.btn:hover {
background-color: #7fd0ed; background-color: #7fd0ed;
border-color: #acdbf5; border-color: #acdbf5;
color: #fff; color: #fff;
} }
.btn:active { .btn:active, .btn:focus {
outline: 2px dashed #acdbf5; outline: 2px dashed #acdbf5;
outline-offset: 2px; outline-offset: 2px;
} }

View file

@ -8,6 +8,10 @@ input[type=text], textarea {
color: #333333; color: #333333;
} }
input.invalid {
background-color: #ff6666;
border-color: #ff3333;
}
input[type=submit]:focus, input[type=submit]:focus,
input[type=text]:focus { input[type=text]:focus {

View file

@ -32,3 +32,7 @@ h2 {
font-size: 12pt; font-size: 12pt;
font-weight: normal; font-weight: normal;
} }
#init-go-single-client {
display:block;
}

View file

@ -17,18 +17,18 @@
function updateNumberColors() { function updateNumberColors() {
try { try {
textsecure.utils.verifyNumber($('#number').val(), $('#countrycode').val()); textsecure.utils.verifyNumber($('#number').val(), $('#countrycode').val());
$('#number').attr('style', ''); $('#number').removeClass('invalid');
$('#countrycode').attr('style', ''); $('#number').removeClass('invalid');
} catch (e) { } catch (e) {
if (e.countryCodeValid) if (e.countryCodeValid)
$('#countrycode').attr('style', ''); $('#countrycode').removeClass('invalid');
else else
$('#countrycode').attr('style', 'background-color:#ff6666;'); $('#countrycode').addClass('invalid');
if (e.numberValid) if (e.numberValid)
$('#number').attr('style', ''); $('#number').removeClass('invalid');
else else
$('#number').attr('style', 'background-color:#ff6666;'); $('#number').addClass('invalid');
} }
} }
@ -42,9 +42,9 @@ function isCodeValid() {
$('#code').on('change', function() { $('#code').on('change', function() {
if (!isCodeValid()) if (!isCodeValid())
$('#code').attr('style', 'background-color:#ff6666;'); $('#code').addClass('invalid');
else else
$('#code').attr('style', ''); $('#code').removeClass('invalid');
}); });
var single_device = false; var single_device = false;
@ -56,6 +56,7 @@ $('#init-go-single-client').click(function() {
$('#countrycode').prop('disabled', 'disabled'); $('#countrycode').prop('disabled', 'disabled');
$('#number').prop('disabled', 'disabled'); $('#number').prop('disabled', 'disabled');
$('#init-go-single-client').prop('disabled', 'disabled'); $('#init-go-single-client').prop('disabled', 'disabled');
$('#init-setup-verification').show();
single_device = true; single_device = true;

View file

@ -15,7 +15,9 @@
<html> <html>
<head> <head>
<title>TextSecure Options</title> <title>TextSecure Options</title>
<link rel="stylesheet" href="options.css"> <link rel="stylesheet" href="css/options.css">
<link rel="stylesheet" href="css/forms.css">
<link rel="stylesheet" href="css/buttons.css">
</head> </head>
<body data-name="curve25519" data-tools="pnacl" data-configs="Debug Release" data-path="pnacl/{config}"> <body data-name="curve25519" data-tools="pnacl" data-configs="Debug Release" data-path="pnacl/{config}">
<div id="listener"></div> <div id="listener"></div>
@ -24,10 +26,12 @@
<h1 style="font-size: 30pt;"><img src='icon.png' height='50px' width='50px'/> TextSecure</h1> <h1 style="font-size: 30pt;"><img src='icon.png' height='50px' width='50px'/> TextSecure</h1>
<div id="init-setup" style="display: none;"> <div id="init-setup" style="display: none;">
<h2>Welcome to TextSecure. To get started please get a 6-digit setup code from your phone and enter it below.</h2> <h2>Welcome to TextSecure. To get started please get a 6-digit setup code from your phone and enter it below.</h2>
Phone number (including country code): +<input type="text" size="2" id="countrycode" /><input type="text" size="8" id="number" /><br> <p>Phone number (including country code): +<input type="text" maxlength=3 size="3" id="countrycode" /> <input type="text" maxlength=14 size="14" id="number" /></p>
<button id="init-go-single-client" >Send single-client code</button><br> <button id="init-go-single-client" class="btn">Send single-client code</button>
Code: <input type="text" pattern="[0-9]{3}-?[0-9]{3}" title="Enter the 6-didgit verificaion code displayed on your phone." size="8" id="code" /><br> <div id="init-setup-verification" style="display: none;">
<button id="init-go" >Sync</button> <p>Code: <input type="text" pattern="[0-9]{3}-?[0-9]{3}" title="Enter the 6-didgit verificaion code displayed on your phone." size="8" id="code" /></p>
<button id="init-go" class="btn">Sync</button>
</div>
</div> </div>
<div id="verify" style="display: none;"> <div id="verify" style="display: none;">
<div id="verify1">Verifying number and setup code...<span id="verify1done"></span></div> <div id="verify1">Verifying number and setup code...<span id="verify1done"></span></div>