Skip to content

B
baas-ide
Commit cf7ac731 authored by d11e9's avatar d11e9
Browse files
Options

fix file tab navigation to allow many files

parent 9ed734c3
Show whitespace changes
Inline Side-by-side
Showing with 204 additions and 70 deletions
assets/css/browser-solidity.css
View file @ cf7ac731
......@@ -5,52 +5,99 @@ body {
font-weight: normal;
}
#editor {
position: absolute;
top: 0;
left: 0px;
left: 0;
width: auto;
bottom: 0px;
bottom: 0;
right: 37em;
}
.scroller {
position: absolute;
z-index: 999;
text-align: center;
cursor: pointer;
display: none;
padding: 0 0.9em;
vertical-align: middle;
background-color: rgba(255,255,255,0.8);
height: 100%;
}
.scroller i {
line-height: 3em;
}
.scroller-right {
right: 0;
}
.scroller-left {
left: 0;
}
.files-wrapper {
position: absolute;
overflow: hidden;
top: 0;
left: 3em;
right: 3em;
}
#files {
list-style: none;
margin: 0;
font-size: 15px;
height: 2.5em;
box-sizing: border-box;
line-height: 2em;
padding: 0.5em 0 0;
position: relative;
left: 0;
top:0;
min-width:3000px;
border-bottom: 0 none;
}
#files .file,
#files .newFile {
#files .file {
display: inline-block;
padding: 0 0.6em;
box-sizing: border-box;
background-color: #f0f0f0;
background-color: #F4F6FF;
cursor: pointer;
margin-right: 0.5em;
border-right: 0.5em solid white;
position: relative;
display:table-cell;
text-align: center;
vertical-align: middle;
color: #999;
}
#files .newFile,
#files .toggleRHP {
background-color: #B1EAC5;
.newFile,
.toggleRHP {
display: block;
float: left;
margin-top: 0.5em;
padding: 0.6em;
font-weight: bold;
cursor: pointer;
color: black;
}
#files .toggleRHP {
.toggleRHP {
float: right;
width: 2em;
box-sizing: border-box;
position: absolute;
right: 0;
}
#files .file.active {
color: black;
font-weight: bold;
border-bottom: 0 none;
padding-right: 2.5em;
padding-right: 2em;
}
#files .file .remove {
position: absolute;
......@@ -76,6 +123,8 @@ body {
#files .file.active .remove { display: inline-block; }
#input {
border-top: 3px solid #F4F6FF;
padding-top: 0.5em;
font-size: 15px;
position: absolute;
top: 2.5em;
......@@ -93,42 +142,30 @@ body {
right: 0;
bottom: 0px;
overflow: auto;
border-left: 3px solid #efefef;
box-sizing: border-box;
}
#output {
border-top: 3px solid #efefef;
display: block;
}
#header {
font-size: 14px;
font-size: 12px;
}
#header #helpButton {
float: left;
padding: 1.2em;
padding-left: 2.2em;
font-size: 1.5em;
cursor: pointer;
margin: auto;
color: #000;
outline: none;
}
#header #solIcon {
float: right;
height: 5.1em;
height: 100%;
background-color: white;
}
#header #menu {
border-bottom: 3px solid #F4F6FF;
overflow: hidden;
background-color: #efefef;
height: 5.1em;
height: 2em;
font-size: 1.25em;
padding-top: 0.5em;
box-sizing: content-box;
}
......@@ -139,20 +176,26 @@ body {
}
#header #options li {
color: #aaa;
float: left;
padding: 1.2em;
font-size: 1.5em;
padding: 0.5em 0.6em;
font-size: 1em;
cursor: pointer;
background-color: transparent;
margin-right: 0.5em;
}
#header #options li.active {
color: black;
background-color: #F4F6FF;
}
#header #options li a {
color: inherit;
}
#header #optionViews {
clear: both;
overflow: auto;
background-color: #F4F6FF;
}
#header #optionViews > div {
display: none;
......@@ -259,11 +302,11 @@ body {
#output .udapp {
border: 0 none;
box-shadow: none;
border-bottom: 3px solid #efefef;
border-bottom: 3px solid #F4F6FF;
}
.row {
.crow {
overflow: auto;
display: block;
clear: both;
......@@ -297,7 +340,9 @@ body {
word-wrap: break-word;
cursor: pointer;
position: relative;
margin: 0.25em;
margin: 0.5em;
border-radius: 0.6em;
padding: 1em 1.5em;
}
.sol.error pre,
......@@ -306,25 +351,26 @@ body {
margin: 0;
font-size: 10px;
border: 0 none;
padding: 0;
border-radius: 0;
}
.sol.error .close,
.sol.warning .close {
font-weight: bold;
position: absolute;
color: rgba(0,0,0,0.5);
top: 0;
right: 0;
padding: 0.5em;
}
.sol.error {
background-color: rgba(255, 0, 0, 0.5);
border: 1px solid #D00909;
background-color: rgba(255, 0, 0, 0.4);
}
.sol.warning {
background-color: rgba(210, 202, 36, 0.5);
border: 1px solid #BBB427;
background-color: rgba(210, 202, 36, 0.4);
}
#ghostbar {
......@@ -338,17 +384,23 @@ body {
bottom: 0;
}
#dragbar{
#dragbar {
background-color: transparent;
position: absolute;
width: 10px;
right: -10px;
top: 0;
width: 1em;
right: -3px;
top: 3em;
bottom: 0;
cursor: col-resize;
z-index: 999;
border-right: 3px solid #F4F6FF;
}
#editor .ace-tm .ace_gutter,
#editor .ace-tm .ace_gutter-active-line,
#editor .ace-tm .ace_marker-layer .ace_active-line {
background-color: rgba(225, 229, 251, 0.5);
}
input[readonly] {
padding: .4em;
......
assets/js/app.js
View file @ cf7ac731
......@@ -104,6 +104,7 @@
var editor = ace.edit("input");
var sessions = {};
var Range = ace.require('ace/range').Range;
var errMarkerId = null;
......@@ -120,6 +121,7 @@
SOL_CACHE_FILE = getFiles()[0];
var files = getFiles();
for (var x in files)
sessions[files[x]] = newEditorSession(files[x])
......@@ -127,13 +129,11 @@
editor.setSession( sessions[SOL_CACHE_FILE] );
editor.resize(true);
function newEditorSession(filename) {
var s = new ace.EditSession(window.localStorage[filename])
s.setMode("ace/mode/javascript");
function newEditorSession(filekey) {
var s = new ace.EditSession(window.localStorage[filekey], "ace/mode/javascript")
s.setTabSize(4);
s.setUseSoftTabs(true);
aces[filekey] = s;
return s;
}
......@@ -143,7 +143,9 @@
$('#options li').click(function(ev){
var $el = $(this);
var cls = /[a-z]+View/.exec( $el.get(0).className )[0];
var match = /[a-z]+View/.exec( $el.get(0).className );
if (!match) return;
var cls = match[0];
if (!$el.hasClass('active')) {
$el.parent().find('li').removeClass('active');
$('#optionViews').attr('class', '').addClass(cls);
......@@ -225,6 +227,7 @@
// ----------------- file selector-------------
var $filesEl = $('#files');
$filesEl.on('click','.newFile', function() {
while (window.localStorage[SOL_CACHE_UNTITLED + untitledCount])
......@@ -313,11 +316,12 @@
}
$('#input').toggle( !!SOL_CACHE_FILE );
$('#output').toggle( !!SOL_CACHE_FILE );
reAdjust();
}
function fileTabTemplate(key) {
var name = fileNameFromKey(key);
return $('<span class="file"><span class="name">'+name+'</span><span class="remove"><i class="fa fa-close"></i></span></span>');
return $('<li class="file"><span class="name">'+name+'</span><span class="remove"><i class="fa fa-close"></i></span></li>');
}
function fileKey( name ) {
......@@ -341,6 +345,68 @@
updateFiles();
var hidWidth;
function widthOfList (){
var itemsWidth = 0;
$('.file').each(function(){
var itemWidth = $(this).outerWidth();
itemsWidth += itemWidth;
});
return itemsWidth;
};
function widthOfHidden(){
return (($('.files-wrapper').outerWidth()) - widthOfList() - getLeftPosi());
};
function widthOfVisible(){
return $('.files-wrapper').outerWidth();
};
function getLeftPosi(){
return $('#files').position().left;
};
function reAdjust (){
console.log("left start: ", getLeftPosi())
console.log("outer width: ", widthOfVisible(), "content width: ", widthOfList(), " left+vis: ", getLeftPosi() + widthOfVisible())
if (widthOfList() + getLeftPosi() > + widthOfVisible()) {
console.log( "show right scroll")
$('.scroller-right').fadeIn('fast');
} else {
console.log( "hide right scroll")
$('.scroller-right').fadeOut('fast');
}
if (getLeftPosi()<0) {
console.log( "show left scroll")
$('.scroller-left').fadeIn('fast');
} else {
console.log( "hide left scroll")
$('.scroller-left').fadeOut('fast');
$('#files').animate({left: getLeftPosi() + "px"},'slow');
}
}
$('.scroller-right').click(function() {
var delta = (getLeftPosi() - 200)
console.log(delta)
$('#files').animate({left: delta + "px"},'slow',function(){
reAdjust();
});
});
$('.scroller-left').click(function() {
var delta = Math.min( (getLeftPosi() + 200), 0 )
console.log(delta)
$('#files').animate({left: delta + "px"},'slow',function(){
reAdjust();
});
});
// ----------------- version selector-------------
// var soljsonSources is provided by bin/list.js
......@@ -395,6 +461,7 @@
dragging = false;
setEditorSize(delta);
window.localStorage.setItem(EDITOR_SIZE_CACHE_KEY, delta);
reAdjust();
}
});
......@@ -410,7 +477,8 @@
$('.toggleRHP').click(function(){
hidingRHP = !hidingRHP;
setEditorSize( hidingRHP ? 0 : window.localStorage[EDITOR_SIZE_CACHE_KEY] );
$('.toggleRHP').toggleClass('hiding', hidingRHP);
$('.toggleRHP i').toggleClass('fa-angle-double-right', !hidingRHP);
$('.toggleRHP i').toggleClass('fa-angle-double-left', hidingRHP);
if (!hidingRHP) compile();
});
......@@ -429,6 +497,7 @@
session.setWrapLimit(parseInt(contentWidth / characterWidth, 10));
}
}
reAdjust();
}
window.onresize = onResize;
onResize();
......@@ -770,7 +839,7 @@
$('.col2 input,textarea').click(function() { this.select(); });
};
var tableRowItems = function(first, second, cls) {
return $('<div class="row"/>')
return $('<div class="crow"/>')
.addClass(cls)
.append($('<div class="col1">').append(first))
.append($('<div class="col2">').append(second));
......
index.html
View file @ cf7ac731
......@@ -38,6 +38,16 @@
<script src="https://ethereum.github.io/solc-bin/bin/list.js"></script>
<script src="assets/js/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="bin/list.js"></script>
<script src="assets/js/ace.js"></script>
<script src="assets/js/mode-solidity.js"></script>
<script src="assets/js/ethereumjs-vm.js"></script>
......@@ -50,10 +60,13 @@
<div id="editor">
<div id="files">
<span class="newFile" title="New File"><i class="fa fa-file-text-o"></i></span>
<span class="toggleRHP" title="Toggle right hand panel"><i class="fa fa-columns"></i></span>
<span class="newFile" title="New File"><i class="fa fa-file-code-o"></i></span>
<div class="files-wrapper">
<div class="scroller scroller-left"><i class="glyphicon glyphicon-chevron-left"></i></div>
<div class="scroller scroller-right"><i class="glyphicon glyphicon-chevron-right"></i></div>
<ul id="files" class="nav nav-tabs"></ul>
</div>
<span class="toggleRHP" title="Toggle right hand panel"><i class="fa fa-angle-double-right"></i></span>
<div id="input"></div>
<div id="dragbar"></div>
</div>
......@@ -62,33 +75,33 @@
<div id="header">
<div id="menu">
<ul id="options">
<li class="settingsView active"><i class="fa fa-gear"></i></li>
<li class="txView"><i class="fa fa-send"></i></li>
<li class="envView"><i class="fa fa-cube"></i></li>
<li class="publishView"><i class="fa fa-cloud-upload"></i></li>
<li class="settingsView active" title="Settings"><i class="fa fa-gear"></i></li>
<li class="txView" title="Transaction"><i class="fa fa-send"></i></li>
<li class="envView" title="Environment"><i class="fa fa-cube"></i></li>
<li class="publishView" title="Publish" ><i class="fa fa-cloud-upload"></i></li>
<li id="helpButton"><a href="https://solidity.readthedocs.org" target="_blank" title="Open Documentation" class="fa fa-question"></a></li>
</ul>
<a href="https://solidity.readthedocs.org" target="_blank" id="helpButton" class="fa fa-question" title="Documentation" class="fa fa-question"></a>
<img id="solIcon" title="Solidity realtime compiler and runtime" src="assets/img/sol.svg" alt="Solidity realtime compiler and runtime">
</div>
<div id="optionViews" class="settingsView">
<div id="txView">
<div class="row">
<div class="crow">
<label for="txorigin"><select name="txorigin" id="txorigin"></select> Transaction origin</label>
</div>
<div class="row hide">
<div class="crow hide">
<label for="gas"><input type="number" id="gas" value="0"> Gas</label>
</div>
<div class="row hide">
<div class="crow hide">
<label for="gasPrice"><input type="number" id="gasPrice" value="0"> Gas Price</label>
</div>
<div class="row">
<div class="crow">
<label for="value"><input type="text" id="value" value="0"> Value (e.g. .7 ether or 5 wei, defaults to ether)</label>
</div>
</div>
<div id="settingsView">
<div class="version row"><strong>Solidity version:</strong> <span id="version">(loading)</span></div>
<div class="row">Change to: <select id="versionSelector"></select></div>
<div class="row">
<div class="version crow"><strong>Solidity version:</strong> <span id="version">(loading)</span></div>
<div class="crow">Change to: <select id="versionSelector"></select></div>
<div class="crow">
<label for="editorWrap"><input id="editorWrap" type="checkbox">Text Wrap</label>
<label for="optimize"><input id="optimize" type="checkbox">Enable Optimization</label>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment