Skip to content

Commit 2cacce1

Browse files
dazKinddazKind
committed
fix file image preview; fix separators; add visual candy to percentages
1 parent cd25050 commit 2cacce1

File tree

4 files changed

+115
-80
lines changed

4 files changed

+115
-80
lines changed

‎bin/index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,14 @@ <h1>About</h1>
157157
</div>
158158
</div>
159159

160+
<span class="imagePreview">
161+
<div class="message"></div>
162+
<div class="previewContent">
163+
<div class="label"></div>
164+
<img class="imagePreviewIMG"/>
165+
</div>
166+
</span>
167+
160168
<div id="paletteContent" style="display:none">
161169
<div class="palette">
162170
<div class="preview">

‎bin/style.css‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -449,20 +449,31 @@ div#menu ul.sheets li.active {
449449
.castle span.error, .dialog-floating span.error {
450450
color : #A00;
451451
}
452-
.castle .preview .previewContent, .dialog-floating .preview .previewContent {
453-
display : none;
454-
position : absolute;
452+
.imagePreview {
453+
pointer-events : none;
454+
border : 1px solid #aaa;
455+
background-color : #000000;
456+
background-color : rgba(0, 0, 0, 0.7);
457+
position : fixed;
458+
right : 30px;
459+
bottom : 60px;
460+
}
461+
.imagePreview .previewContent {
455462
background-color : #EEE;
456463
border : 1px solid black;
457464
padding : 5px;
458465
}
459-
.castle .preview .previewContent .label, .dialog-floating .preview .previewContent .label {
466+
.imagePreview .previewContent .label {
460467
text-align : center;
461468
margin-bottom : 5px;
462469
background-color : white;
463470
font-family : monospace;
464471
}
465-
.castle .preview:hover .previewContent, .dialog-floating .preview:hover .previewContent {
472+
.imagePreview .previewContent > img {
473+
max-height : 33vh;
474+
max-width : 33vh;
475+
}
476+
.imagePreview:hover .previewContent {
466477
display : block;
467478
}
468479
#content .level {

‎bin/style.hss‎

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -533,30 +533,41 @@ div#menu {
533533
span.error {
534534
color : #A00;
535535
}
536+
}
536537

537-
.preview {
538-
.previewContent {
539-
.label {
540-
text-align : center;
541-
margin-bottom : 5px;
542-
background-color : white;
543-
font-family : monospace;
544-
}
545-
display : none;
546-
position : absolute;
547-
background-color : #EEE;
548-
border : 1px solid black;
549-
padding : 5px;
538+
.imagePreview {
539+
pointer-events: none;
540+
border : 1px solid #aaa;
541+
background-color : rgba(0,0,0,0.7);
542+
position : fixed;
543+
right : 30px;
544+
bottom : 60px;
545+
546+
.previewContent {
547+
.label {
548+
text-align : center;
549+
margin-bottom : 5px;
550+
background-color : white;
551+
font-family : monospace;
550552
}
551-
}
552-
.preview:hover {
553-
.previewContent {
554-
display : block;
553+
//display : none;
554+
//position : absolute;
555+
background-color : #EEE;
556+
border : 1px solid black;
557+
padding : 5px;
558+
559+
> img {
560+
max-height: 33vh;
561+
max-width: 33vh;
555562
}
556563
}
557-
558564
}
559565

566+
.imagePreview:hover {
567+
.previewContent {
568+
display : block;
569+
}
570+
}
560571

561572
#content .level {
562573

‎src/Main.hx‎

Lines changed: 62 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -558,12 +558,15 @@ class Main extends Model {
558558
return switch( c.type ) {
559559
case TInt:
560560
switch (c.display) {
561-
case Percent: '$v%';
561+
case Percent:
562+
'<span>$v%</span> <div style="display: inline-block; position: relative; width: 40px; height: 8px; background-color: rgba(80, 158, 227, 0.2); border-radius: 3px;"><div style="position: absolute; top: 0px; bottom: 0px; background-color: rgb(80, 158, 227); width: $v%; left: 0px; border-radius: 3px;"></div></div>';
562563
default: '$v';
563564
}
564565
case TFloat:
565566
switch( c.display ) {
566-
case Percent: '${(Math.round(v * 10000)/100)}%';
567+
case Percent:
568+
var percent = (Math.round(v * 10000)/100);
569+
'<span>${percent}%</span> <div style="display: inline-block; position: relative; width: 40px; height: 8px; background-color: rgba(80, 158, 227, 0.2); border-radius: 3px;"><div style="position: absolute; top: 0px; bottom: 0px; background-color: rgb(80, 158, 227); width: $percent%; left: 0px; border-radius: 3px;"></div></div>';
567570
default: '$v';
568571
}
569572
case TId:
@@ -606,7 +609,7 @@ class Main extends Model {
606609
default:
607610
vals.push(valueHtml(c, Reflect.field(v, c.name), ps, v));
608611
}
609-
var v = vals.length == 1 ? vals[0] : vals.join(",");
612+
var v = vals.length == 1 ? vals[0] : vals.join(", ");
610613
if( size > 200 ) {
611614
out.push("...");
612615
break;
@@ -662,11 +665,9 @@ class Main extends Model {
662665
var url = "file://" + path;
663666
var ext = v.split(".").pop().toLowerCase();
664667
var val = StringTools.htmlEscape(v);
665-
var html = v == "" ? '<span class="error">#MISSING</span>' : '<span title="$val">$val</span>';
668+
var html = v == "" ? '<span class="error">#MISSING</span>' : '<span title="$val" onmouseover="_.onFileOver(\'$url\')" onmouseleave="_.onFileLeave(\'$url\')" >$val</span>';
666669
if( v != "" && !quickExists(path) )
667670
html = '<span class="error">' + html + '</span>';
668-
// else if( ext == "png" || ext == "jpg" || ext == "jpeg" || ext == "gif" )
669-
// html = '<span class="preview">$html<div class="previewContent"><div class="label"></div><img src="$url" onload="$(this).parent().find(\'.label\').text(this.width+\'x\'+this.height)"/></div></span>';
670671
if( v != "" )
671672
html += ' <i class="fa fa-external-link openfile" aria-hidden="true" onclick="_.openFile(\'$path\')"></i>';
672673
html;
@@ -686,6 +687,16 @@ class Main extends Model {
686687
}
687688
}
688689

690+
function onFileOver(_url:String) {
691+
J('.previewContent > img').replaceWith('<img src="$_url" onload="$(this).parent().find(\'.label\').text(this.naturalWidth+\'x\'+this.naturalHeight)"/>');
692+
J('.imagePreview').show();
693+
}
694+
695+
function onFileLeave(_url:String) {
696+
J('.imagePreview').hide();
697+
J('.previewContent > img').replaceWith('<img />');
698+
}
699+
689700
function popupLine( sheet : Sheet, index : Int ) {
690701
var n = new Menu();
691702
var nup = new MenuItem( { label : "Move Up" } );
@@ -696,8 +707,16 @@ class Main extends Model {
696707
var nref = new MenuItem( { label : "Show References" } );
697708
for( m in [nup, ndown, nins, ndel, nsep, nref] )
698709
n.append(m);
699-
// var sepIndex = Lambda.indexOf(sheet.separators, index);
700-
// nsep.checked = sepIndex >= 0;
710+
711+
var sepIndex = -1;
712+
for (i in 0...sheet.separators.length) {
713+
var s = sheet.separators[i];
714+
if (s.index == index) {
715+
sepIndex = i;
716+
break;
717+
}
718+
}
719+
nsep.checked = sepIndex >= 0;
701720
nins.click = function() {
702721
newLine(sheet, index);
703722
};
@@ -712,24 +731,14 @@ class Main extends Model {
712731
refresh();
713732
save();
714733
};
715-
// nsep.click = function() {
716-
// if( sepIndex >= 0 ) {
717-
// sheet.separators.splice(sepIndex, 1);
718-
// if( sheet.props.separatorTitles != null ) sheet.props.separatorTitles.splice(sepIndex, 1);
719-
// } else {
720-
// sepIndex = sheet.separators.length;
721-
// for( i in 0...sheet.separators.length )
722-
// if( sheet.separators[i] > index ) {
723-
// sepIndex = i;
724-
// break;
725-
// }
726-
// sheet.separators.insert(sepIndex, index);
727-
// if( sheet.props.separatorTitles != null && sheet.props.separatorTitles.length > sepIndex )
728-
// sheet.props.separatorTitles.insert(sepIndex, null);
729-
// }
730-
// refresh();
731-
// save();
732-
// };
734+
nsep.click = function() {
735+
if (sepIndex >= 0) { // remove
736+
sheet.separators.splice(sepIndex, 1);
737+
} else
738+
sheet.separators.push({index: index, id:Std.string(sepIndex), title:"unnamed separator"});
739+
refresh();
740+
save();
741+
};
733742
nref.click = function() {
734743
showReferences(sheet, index);
735744
};
@@ -1915,38 +1924,34 @@ class Main extends Model {
19151924
content.append(cols);
19161925

19171926
var snext = 0;
1927+
var sepMap = new Map<Int, Separator>();
1928+
for (s in sheet.separators)
1929+
sepMap.set(s.index, s);
1930+
19181931
for( i in 0...lines.length ) {
1919-
// while( sheet.separators[snext] == i ) {
1920-
// var sep = J("<tr>").addClass("separator").append('<td colspan="${colCount+1}">').appendTo(content);
1921-
// var content = sep.find("td");
1922-
// var title = if( sheet.props.separatorTitles != null ) sheet.props.separatorTitles[snext] else null;
1923-
// if( title != null ) content.text(title);
1924-
// var pos = snext;
1925-
// sep.dblclick(function(e) {
1926-
// content.empty();
1927-
// J("<input>").appendTo(content).focus().val(title == null ? "" : title).blur(function(_) {
1928-
// title = JTHIS.val();
1929-
// JTHIS.remove();
1930-
// content.text(title);
1931-
// var titles = sheet.props.separatorTitles;
1932-
// if( titles == null ) titles = [];
1933-
// while( titles.length < pos )
1934-
// titles.push(null);
1935-
// titles[pos] = title == "" ? null : title;
1936-
// while( titles[titles.length - 1] == null && titles.length > 0 )
1937-
// titles.pop();
1938-
// if( titles.length == 0 ) titles = null;
1939-
// sheet.props.separatorTitles = titles;
1940-
// save();
1941-
// }).keypress(function(e) {
1942-
// e.stopPropagation();
1943-
// }).keydown(function(e) {
1944-
// if( e.keyCode == 13 ) { JTHIS.blur(); e.preventDefault(); } else if( e.keyCode == 27 ) content.text(title);
1945-
// e.stopPropagation();
1946-
// });
1947-
// });
1948-
// snext++;
1949-
// }
1932+
var curSep = sepMap.get(i);
1933+
if (curSep != null) {
1934+
var sep = J("<tr>").addClass("separator").append('<td colspan="${colCount+1}">').appendTo(content);
1935+
var content = sep.find("td");
1936+
var title = curSep.title;
1937+
if( title != null ) content.text(title);
1938+
var pos = snext;
1939+
sep.dblclick(function(e) {
1940+
content.empty();
1941+
J("<input>").appendTo(content).focus().val(title == null ? "" : title).blur(function(_) {
1942+
title = JTHIS.val();
1943+
JTHIS.remove();
1944+
content.text(title);
1945+
curSep.title = title;
1946+
save();
1947+
}).keypress(function(e) {
1948+
e.stopPropagation();
1949+
}).keydown(function(e) {
1950+
if( e.keyCode == 13 ) { JTHIS.blur(); e.preventDefault(); } else if( e.keyCode == 27 ) content.text(title);
1951+
e.stopPropagation();
1952+
});
1953+
});
1954+
}
19501955
content.append(lines[i]);
19511956
}
19521957

0 commit comments

Comments
 (0)