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" /> <link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head> </head>
<body> <body>
<h1><span class="skull">&#9760;</span> <span id="basename">...</span></h1> <h1><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>
<div id="output"></div> <div id="output"></div>
<button class="button" id="copy-button">Copy URL</button>
<script src="jquery-1.11.1.min.js"></script> <script src="jquery-1.11.1.min.js"></script>
<script src="onionshare.js"></script> <script src="onionshare.js"></script>

View file

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

View file

@ -1,45 +1,77 @@
body { body {
background-color: #222222; background-color: #ffffff;
color: #aaffaa; color: #000000;
font-family: monospace; font-family: arial;
width: 600px; width: 650px;
height: 500px; height: 300px;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
} }
h1 { h1 {
background-color: #FFC4D5; background-color: #222222;
color: #000000; color: #ffffff;
text-align: center; text-align: center;
font-size: 30px; font-size: 20px;
margin: 0; margin: 0;
padding: 10px; padding: 10px;
font-family: sans-serif; height: 20px;
} }
h1 .skull {
font-size: 40px; p {
font-weight: bold; padding: 0;
color: #FF0048; margin: 0 0 .3em 0;
}
#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 { #output {
padding: 10px; padding: 10px;
word-wrap: break-word; word-wrap: break-word;
height: 260px;
overflow: auto; 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 onionshare, webgui
import os, sys, time, json, gtk, gobject, thread import os, sys, time, json, gtk, gobject, thread
url = None
class Global(object): class Global(object):
quit = False quit = False
@classmethod @classmethod
@ -49,6 +51,7 @@ def select_file(strings):
return filename, basename return filename, basename
def main(): def main():
global url
strings = onionshare.load_strings() strings = onionshare.load_strings()
# try starting hidden service # try starting hidden service
@ -72,22 +75,26 @@ def main():
# clipboard # clipboard
clipboard = gtk.clipboard_get(gtk.gdk.SELECTION_CLIPBOARD) clipboard = gtk.clipboard_get(gtk.gdk.SELECTION_CLIPBOARD)
def set_clipboard(url): def set_clipboard():
global url
clipboard.set_text(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 # startup
def startup(): def startup():
global url
web_send("init('{0}', {1});".format(basename, json.dumps(strings))) web_send("init('{0}', {1});".format(basename, json.dumps(strings)))
web_send("update('{0}')".format(strings['calculating_sha1'])) web_send("update('{0}')".format(strings['calculating_sha1']))
filehash, filesize = onionshare.file_crunching(filename) filehash, filesize = onionshare.file_crunching(filename)
onionshare.set_file_info(filename, filehash, filesize) onionshare.set_file_info(filename, filehash, filesize)
onionshare.tails_open_port(port) onionshare.tails_open_port(port)
url = 'http://{0}/{1}'.format(onion_host, onionshare.slug) 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 # 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 # start the web server
web_thread = thread.start_new_thread(onionshare.app.run, (), {"port": port}) web_thread = thread.start_new_thread(onionshare.app.run, (), {"port": port})
@ -105,11 +112,11 @@ def main():
again = False again = False
msg = web_recv() msg = web_recv()
if msg: if msg:
msg = json.loads(msg)
again = True again = True
# check msg for messages from the browser # 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: if not again:
time.sleep(0.1) time.sleep(0.1)

View file

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