made GUI design look way nicer

onionshare_gui/static/onionshare.js

@@ -43,21 +43,40 @@ $(function(){
     });
   }
 
-  // start onionshare
+  // initialize
   $.ajax({
-    url: '/start_onionshare',
+    url: '/init_info',
     success: function(data, textStatus, jqXHR){
       onionshare = JSON.parse(data);
 
       $('#basename').html(onionshare.basename);
-      //update(onionshare.strings['sha1_checksum']+": "+onionshare.filehash);
+      $('#filesize .label').html(onionshare.strings['filesize']+':');
-      update(onionshare.strings['give_this_url']);
+      $('#filehash .label').html(onionshare.strings['sha1_checksum']+':');
-      update($('<strong>').html(onionshare.url));
+      $('#loading .calculating').html(onionshare.strings['calculating_sha1']);
+      
+      // after getting the initial info, start the onionshare server
+      $.ajax({
+        url: '/start_onionshare',
+        success: function(data, textStatus, jqXHR){
+          var data_obj = JSON.parse(data);
+          onionshare.filehash = data_obj.filehash;
+          onionshare.filesize = data_obj.filesize;
+          onionshare.url = data_obj.url;
+
+          $('#loading').remove();
+
+          $('#filesize .value').html(onionshare.filesize+' bytes');
+          $('#filehash .value').html(onionshare.filehash);
+          $('#filesize').show(500);
+          $('#filehash').show(500);
+
+          update('<span>'+onionshare.strings['give_this_url']+'</span><br/><strong>'+onionshare.url+'</strong>');
           copy_to_clipboard();
           $('#copy-button').show();
 
           setTimeout(check_for_requests, 1000);
         }
       });
-
+    }
+  });
 });

onionshare_gui/static/style.css

@@ -1,5 +1,4 @@
 body {
-  background-color: #ffffff;
   color: #000000;
   font-family: arial;
   width: 520px;
@@ -16,33 +15,53 @@ body {
 #metadata {
   float: left;
   width: 200px;
-  height: 400px;
+  height: 380px;
   padding: 10px;
+  background-color: #ffffff;
+  text-align: center;
 }
 #metadata #basename {
   font-family: sans-serif;
   font-size: 18px;
   font-weight: bold;
   margin: 10px 0;
+  padding: 5px;
   color: #000000;
-  text-align: center;
+  word-break: break-all;
-  word-wrap: break-word;
+  background-color: #f9f9f9;
+  border: 1px solid #f0f0f0;
+}
+#metadata #filesize,
+#metadata #filehash {
+  margin-bottom: 10px;
+  word-break: break-all;
+  text-align: left;
+  color: #666666;
+  display: none;
+}
+#metadata .label {
+  font-size: 12px;
+}
+#metadata .value {
+  font-weight: bold;
+  font-size: 12px;
 }
 
 ul#log {
   float: left;
-  width: 300px;
+  width: 299px;
   height: 400px;
   margin: 0;
   padding: 0;
   list-style: none;
-  background-color: #e0e0e0;
+  background-color: #f0f0f0;
   overflow: auto;
   word-wrap: break-word;
   font-family: monospace;
+  border-left: 1px solid #000000;
 }
 ul#log li {
-  margin: 0;
+  margin: 10px;
   padding: 10px;
   border-bottom: 1px solid #aaaaaa;
 }
@@ -52,18 +71,29 @@ ul#log .weblog {
 }
 
 ul#log .weblog-error {
-  color: #990000;
+  color: #ff0000;
   font-weight: bold;
 }
 
+ul#log li#loading {
+  text-align: center;
+  padding: 60px 30px;
+  border-bottom: 0;
+}
+ul#log li#loading .calculating {
+  color: #666666;
+  font-style: italic;
+  font-size: 12px;
+}
+
 .button {
-  -moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
+  -moz-box-shadow:inset 0px 1px 0px 0px #d197fe;
-  -webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
+  -webkit-box-shadow:inset 0px 1px 0px 0px #d197fe;
-  box-shadow:inset 0px 1px 0px 0px #f29c93;
+  box-shadow:inset 0px 1px 0px 0px #d197fe;
-  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
+  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a53df6), color-stop(1, #7c16cb) );
-  background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
+  background:-moz-linear-gradient( center top, #a53df6 5%, #7c16cb 100% );
-  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
+  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a53df6', endColorstr='#7c16cb');
-  background-color:#fe1a00;
+  background-color:#a53df6;
   -webkit-border-top-left-radius:0px;
   -moz-border-radius-topleft:0px;
   border-top-left-radius:0px;
@@ -77,7 +107,7 @@ ul#log .weblog-error {
   -moz-border-radius-bottomleft:0px;
   border-bottom-left-radius:0px;
   text-indent:0;
-  border:1px solid #d83526;
+  border:1px solid #9c33ed;
   display:inline-block;
   color:#ffffff;
   font-family:Arial;
@@ -86,13 +116,13 @@ ul#log .weblog-error {
   font-style:normal;
   text-decoration:none;
   text-align:center;
-  text-shadow:1px 1px 0px #b23e35;
+  text-shadow:1px 1px 0px #7d15cd;
 }
 .button:hover {
-  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
+  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7c16cb), color-stop(1, #a53df6) );
-  background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
+  background:-moz-linear-gradient( center top, #7c16cb 5%, #a53df6 100% );
-  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
+  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7c16cb', endColorstr='#a53df6');
-  background-color:#ce0100;
+  background-color:#7c16cb;
 }
 
 #button-wrapper {
@@ -102,11 +132,3 @@ ul#log .weblog-error {
   display: none;
 }
 
-#loading {
-  width: 550px;
-  height: 300px;
-  background-color: #333333;
-  background-image: url('/static/loader_large.gif');
-  background-repeat: no-repeat;
-  background-position: center center;
-}

onionshare_gui/templates/index.html

@@ -6,17 +6,28 @@
   <body>
     <div id="wrapper">
       <div id="metadata">
-        <img src="static/logo.png" />
+        <img id="logo" src="static/logo.png" />
-        <p id="basename"></p>
+        <div id="basename"></div>
-        <p id="filesize"></p>
+        <div id="filesize">
-        <p id="filehash"></p>
+          <span class="label"></span>
+          <span class="value"></span>
+        </div>
+        <div id="filehash">
+          <span class="label"></span>
+          <span class="value"></span>
+        </div>
         <div id="button-wrapper">
           <button class="button" id="copy-button">Copy URL</button>
         </div>
       </div>
 
-      <ul id="log"></ul>
+      <ul id="log">
-    </div>
+        <li id="loading">
+          <img src="static/loader.gif" />
+          <p class="calculating"></p>
+        </li>
+      </ul>
+    </ul>
     <script src="static/jquery-1.11.1.min.js"></script>
     <script src="static/onionshare.js"></script>
   </body>

onionshare_gui/webapp.py

@@ -15,13 +15,22 @@ app = Flask(__name__, template_folder='./templates')
 def index():
     return render_template('index.html')
 
+@app.route("/init_info")
+def init_info():
+    global onionshare, filename
+    basename = os.path.basename(filename)
+
+    return json.dumps({
+        'strings': onionshare.strings,
+        'basename': basename
+    })
+
 @app.route("/start_onionshare")
 def start_onionshare():
     global onionshare, onionshare_port, filename, onion_host, url
 
     url = 'http://{0}/{1}'.format(onion_host, onionshare.slug)
 
-    basename = os.path.basename(filename)
     filehash, filesize = onionshare.file_crunching(filename)
     onionshare.set_file_info(filename, filehash, filesize)
 
@@ -31,8 +40,6 @@ def start_onionshare():
     t.start()
 
     return json.dumps({
-        'strings': onionshare.strings,
-        'basename': basename,
         'filehash': filehash,
         'filesize': filesize,
         'url': url