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;
font-weight: bold;
}
.btn:hover, .btn:focus {
.btn:hover {
cursor: pointer;
outline: none;
}
.btn:hover {
background-color: #7fd0ed;
border-color: #acdbf5;
color: #fff;
}
.btn:active {
.btn:active, .btn:focus {
outline: 2px dashed #acdbf5;
outline-offset: 2px;
}

View file

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

View file

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

View file

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

View file

@ -15,7 +15,9 @@
<html>
<head>
<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>
<body data-name="curve25519" data-tools="pnacl" data-configs="Debug Release" data-path="pnacl/{config}">
<div id="listener"></div>
@ -24,10 +26,12 @@
<h1 style="font-size: 30pt;"><img src='icon.png' height='50px' width='50px'/> TextSecure</h1>
<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>
Phone number (including country code): +<input type="text" size="2" id="countrycode" /><input type="text" size="8" id="number" /><br>
<button id="init-go-single-client" >Send single-client code</button><br>
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>
<button id="init-go" >Sync</button>
<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" class="btn">Send single-client code</button>
<div id="init-setup-verification" style="display: none;">
<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 id="verify" style="display: none;">
<div id="verify1">Verifying number and setup code...<span id="verify1done"></span></div>