awesomeify the header

pull/1/head
d11e9 9 years ago
parent 7c2a3395ab
commit b4c0f0561b
  1. 56
      assets/css/browser-solidity.css
  2. 117
      index.html

@ -103,19 +103,53 @@ body {
#header {
font-size: 14px;
padding: 1em;
font-size: 12px;
}
#header h1 {
margin-top: 0;
}
#header #solIcon {
float: left;
height: 5em;
}
#header #menu {
overflow: auto;
background-color: #efefef;
}
#header #options {
list-style: none;
margin: 0;
padding: 0;
}
#header #options li {
color: #333;
float: left;
padding: 1.2em;
font-size: 1.5em;
cursor: pointer;
}
#header #options li.active {
background-color: yellow;
color: black;
}
#header #optionViews {
clear: both;
overflow: auto;
padding: 1em;
}
#header #optionViews > div {
margin-top: 1em;
display: none;
}
#header #optionViews.txView #txView { display: block; }
#header #optionViews.settingsView #settingsView { display: block; }
#header #optionViews.publishView #publishView { display: block; }
#header #optionViews.envView #envView { display: block; }
#header .info {
font-family: monospace;
min-height: 6em;
@ -138,8 +172,6 @@ body {
#header .origin,
#header #executionContext {
padding: 0.4em 1em;
background-color: #efefef;
display: block;
margin-top: 0.5em;
word-wrap: break-word;
@ -154,6 +186,16 @@ body {
background-color: transparent;
}
.col1 {
width: 30%;
float: left;

@ -63,25 +63,47 @@ THE SOFTWARE.
<div id="righthand-panel">
<div id="header">
<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/sol.gif">
<div class="info">
<div class="version">Solidity version: <span id="version">(loading)</span> <br/>Change to: <select id="versionSelector"></select></div>
<div id="menu">
<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/sol.gif">
<ul id="options">
<li class="txView active"><i class="fa fa-send"></i></li>
<li class="envView"><i class="fa fa-tachometer"></i></li>
<li class="publishView"><i class="fa fa-cloud-upload"></i></li>
<li class="settingsView"><i class="fa fa-gear"></i></li>
</ul>
</div>
<div id="optimizeBox">
<button id="gist" title="Publish all files as public gist on github.com"><i class="fa fa-github"></i> Publish gist</button>
<label for="editorWrap"><input id="editorWrap" type="checkbox">Text Wrap</label>
<label for="optimize"><input id="optimize" type="checkbox">Enable Optimization</label>
<code class="origin">tx.origin: <span id="txorigin"/></code>
<span id="executionContext">
<label for="vm" title="Execution environment does not connect to any node, everything is local and in memory only.">
<input id="vm" type="radio" value="vm" checked name="executionContext">
JavaScript VM
</label>
<label for="web3" title="Execution environment connects to node at localhost, transactions will be sent to the network and can cause loss of money or worse!">
<input id="web3" type="radio" value="web3" name="executionContext">
Web3 Provider
</label>
</span>
<div id="optionViews" class="txView">
<div id="txView">
<code class="origin">tx.origin: <span id="txorigin"/></code>
<select name="" id="">
<option value="">Acc</option>
</select>
<input type="text" class="gas">
<input type="text" class="value">
</div>
<div id="settingsView">
<div class="version">Solidity version: <span id="version">(loading)</span> <br/>Change to: <select id="versionSelector"></select></div>
<label for="editorWrap"><input id="editorWrap" type="checkbox">Text Wrap</label>
<label for="optimize"><input id="optimize" type="checkbox">Enable Optimization</label>
</div>
<div id="publishView">
<p><button id="gist" title="Publish all files as public gist on github.com"><i class="fa fa-github"></i> Publish gist</button> Publish all open files to an anonymous github gist.</p>
<p>Publish to ipfs ...</p>
</div>
<div id="envView">
<span id="executionContext">
<label for="vm" title="Execution environment does not connect to any node, everything is local and in memory only.">
<input id="vm" type="radio" value="vm" checked name="executionContext">
JavaScript VM
</label>
<label for="web3" title="Execution environment connects to node at localhost, transactions will be sent to the network and can cause loss of money or worse!">
<input id="web3" type="radio" value="web3" name="executionContext">
Web3 Provider
</label>
</span>
</div>
</div>
</div>
<div id="output"></div>
@ -95,28 +117,28 @@ THE SOFTWARE.
// ------------------ gist load ----------------
function getGistId(str) {
var idr = /[0-9A-Fa-f]{8,}/
var match = idr.exec(str)[0]
return match;
}
function getGistId(str) {
var idr = /[0-9A-Fa-f]{8,}/
var match = idr.exec(str)[0]
return match;
}
var location_hash_params = window.location.hash.substr(1).split("=");
var loadingFromGist = false;
if (location_hash_params.indexOf('gist') !== -1 && location_hash_params.length >= 2) {
var index = location_hash_params.indexOf('gist');
var gistId;
var key = location_hash_params[index+1];
if (key === '') {
var str = prompt("Enter the URL or ID of the Gist you'd like to load.")
if (str !== '') {
gistId = getGistId( str );
loadingFromGist = true;
}
} else {
gistId = getGistId( key );
loadingFromGist = true;
}
var index = location_hash_params.indexOf('gist');
var gistId;
var key = location_hash_params[index+1];
if (key === '') {
var str = prompt("Enter the URL or ID of the Gist you'd like to load.")
if (str !== '') {
gistId = getGistId( str );
loadingFromGist = true;
}
} else {
gistId = getGistId( key );
loadingFromGist = true;
}
$.ajax({
url: 'https://api.github.com/gists/'+gistId,
jsonp: 'callback',
@ -164,6 +186,19 @@ THE SOFTWARE.
session.setTabSize(4);
session.setUseSoftTabs(true);
// ----------------- tabbed menu -------------------
$('#options li').click(function(){
var $el = $(this);
var cls = /[a-z]+View/.exec( $el.get(0).className )[0];
$el.parent().find('li').removeClass('active');
$el.addClass('active');
$('#optionViews').attr('class', '').addClass(cls);
console.log(cls)
});
// ----------------- execution context -------------
var $vmToggle = $('#vm');
@ -218,7 +253,7 @@ THE SOFTWARE.
// ----------------- file selector-------------
var $filesEl = $('#files');
var $filesEl = $('#files');
$filesEl.on('click','.newFile', function() {
while (window.localStorage[SOL_CACHE_UNTITLED + untitledCount])
untitledCount = (untitledCount - 0) + 1;
@ -289,10 +324,10 @@ THE SOFTWARE.
function updateFiles() {
var $filesEl = $('#files');
var $filesEl = $('#files');
var files = getFiles();
$filesEl.find('.file').remove();
$filesEl.find('.file').remove();
for (var f in files) {
$filesEl.append(fileTabTemplate(files[f]));
@ -303,7 +338,7 @@ THE SOFTWARE.
active.addClass('active');
editor.setValue( window.localStorage[SOL_CACHE_FILE] || '', -1);
editor.focus();
}
}
$('#input').toggle( !!SOL_CACHE_FILE );
}
@ -622,7 +657,7 @@ THE SOFTWARE.
renderError(err.message);
if (accounts && accounts[0])
$('#txorigin').text(accounts[0]);
else
else
$('#txorigin').text('unknown');
});

Loading…
Cancel
Save