made a "Copy URL" button, and improved design

This commit is contained in:
Micah Lee 2014-05-30 22:29:07 -04:00
parent 6ad85f3e64
commit 23f9a577fe
5 changed files with 101 additions and 61 deletions

View File

@ -4,12 +4,9 @@
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
<h1><span class="skull">&#9760;</span> <span id="basename">...</span></h1>
<div id="url-wrapper">
<div id="give-this-url">Give this URL to the person you're sending the file to:</div>
<div id="url"></div>
</div>
<h1><span id="basename">...</span></h1>
<div id="output"></div>
<button class="button" id="copy-button">Copy URL</button>
<script src="jquery-1.11.1.min.js"></script>
<script src="onionshare.js"></script>

View File

@ -5,14 +5,19 @@ function send(msg) {
function init(basename, strings) {
$('#basename').html(basename);
$('#give-this-url').html(strings['give_this_url'])
}
function set_url(url) {
$('#url').html(url);
$('#url-wrapper').slideDown(200);
function url_is_set() {
$('#copy-button')
.click(function(){
send('copy_url');
})
.show();
}
function update(msg) {
$('#output').append($('<p></p>').html(msg))
// scroll to bottom
$('#output').scrollTop($('#output').height());
}

View File

@ -1,45 +1,77 @@
body {
background-color: #222222;
color: #aaffaa;
font-family: monospace;
width: 600px;
height: 500px;
margin: 0 auto;
padding: 0;
}
h1 {
background-color: #FFC4D5;
color: #000000;
text-align: center;
font-size: 30px;
margin: 0;
padding: 10px;
font-family: sans-serif;
}
h1 .skull {
font-size: 40px;
font-weight: bold;
color: #FF0048;
}
#url-wrapper {
padding: 10px;
background-color: #ffffff;
display: none;
}
#give-this-url {
font-size: 14px;
margin-bottom: 10px;
font-family: sans-serif;
color: #666666;
}
#url {
word-wrap: break-word;
font-size: 25px;
color: #000000;
}
#output {
padding: 10px;
word-wrap: break-word;
overflow: auto;
background-color: #ffffff;
color: #000000;
font-family: arial;
width: 650px;
height: 300px;
margin: 0 auto;
padding: 0;
}
h1 {
background-color: #222222;
color: #ffffff;
text-align: center;
font-size: 20px;
margin: 0;
padding: 10px;
height: 20px;
}
p {
padding: 0;
margin: 0 0 .3em 0;
}
#output {
padding: 10px;
word-wrap: break-word;
height: 260px;
overflow: auto;
}
.button {
-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
box-shadow:inset 0px 1px 0px 0px #f29c93;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
background-color:#fe1a00;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #d83526;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:13px;
font-weight:bold;
font-style:normal;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #b23e35;
}
.button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
background-color:#ce0100;
}
#copy-button {
display: none;
position: absolute;
right: 20px;
bottom: 10px;
}

View File

@ -3,6 +3,8 @@
import onionshare, webgui
import os, sys, time, json, gtk, gobject, thread
url = None
class Global(object):
quit = False
@classmethod
@ -49,6 +51,7 @@ def select_file(strings):
return filename, basename
def main():
global url
strings = onionshare.load_strings()
# try starting hidden service
@ -72,22 +75,26 @@ def main():
# clipboard
clipboard = gtk.clipboard_get(gtk.gdk.SELECTION_CLIPBOARD)
def set_clipboard(url):
def set_clipboard():
global url
clipboard.set_text(url)
web_send("update('{0}')".format('Copied secret URL to clipboard'))
web_send("update('{0}')".format('Copied secret URL to clipboard.'))
# startup
def startup():
global url
web_send("init('{0}', {1});".format(basename, json.dumps(strings)))
web_send("update('{0}')".format(strings['calculating_sha1']))
filehash, filesize = onionshare.file_crunching(filename)
onionshare.set_file_info(filename, filehash, filesize)
onionshare.tails_open_port(port)
url = 'http://{0}/{1}'.format(onion_host, onionshare.slug)
web_send("update('{0}')".format('Secret URL is {0}'.format(url)))
web_send("update('{0}')".format(strings['give_this_url'].replace('\'', '\\\'')))
web_send("update('<strong>{0}</strong>')".format(url))
web_send("url_is_set()")
# clipboard needs a bit of time before copying url
gobject.timeout_add(1500, set_clipboard, url)
gobject.timeout_add(500, set_clipboard)
# start the web server
web_thread = thread.start_new_thread(onionshare.app.run, (), {"port": port})
@ -105,11 +112,11 @@ def main():
again = False
msg = web_recv()
if msg:
msg = json.loads(msg)
again = True
# check msg for messages from the browser
# use web_send() to send javascript to the browser
if msg == 'copy_url':
set_clipboard()
if not again:
time.sleep(0.1)

View File

@ -44,10 +44,9 @@ def launch_window(title='OnionShare', quit_function=None, echo=True):
message_queue = Queue.Queue()
def title_changed(title):
if title != 'null': message_queue.put(title)
def callback_wrapper(widget, frame, title): callback(title)
def callback_wrapper(widget, frame, title):
if title != 'null':
message_queue.put(title)
browser.connect('title-changed', callback_wrapper)
browser.open('file://'+os.path.abspath(os.path.dirname(__file__))+'/html/index.html')