improved visual difference between gcode and svg files in the working area

This commit is contained in:
Teja 2015-02-14 20:33:42 +01:00
parent 42fc268449
commit a2b892c96b
2 changed files with 50 additions and 12 deletions

View file

@ -1620,6 +1620,23 @@ input.search-query,
}
*/
.file_list_entry .title {
margin-left: 3.3em;
}
.file_list_icon {
color: #999;
font-size: 3em;
display: block;
float: left;
margin-right: 12px;
min-width: 1.1em;
}
.file_list_entry_gcode {
color: #CCC;
}
#area_preview {
background-image: url(../img/crosshair.png);
background-repeat: no-repeat;

View file

@ -345,30 +345,51 @@
<script type="text/html" id="files_template_machinecode">
<div class="file_list_entry">
<div class="title" data-bind="css: $root.getSuccessClass($data), style: { 'font-weight': $root.listHelper.isSelected($data) ? 'bold' : 'normal' }, text: name"></div>
<div class="uploaded">{{ _('Uploaded') }}: <span data-bind="text: formatTimeAgo(date)"></span></div>
<i class="icon-cog file_list_icon file_list_entry_gcode"></i>
<div class="title muted dropdown" >
<a type="button" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span data-bind="css: $root.getSuccessClass($data), style: { 'font-weight': $root.listHelper.isSelected($data) ? 'bold' : 'normal' }, text: name"></span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a class="" data-bind="attr: {href: $root.downloadLink($data), css: {disabled: !$root.downloadLink($data)}}"><i class="icon-download-alt" title="{{ _('Download') }}"></i> {{ _('Download') }}</a></li>
<li><a class="" data-bind="click: function() { if ($root.enableRemove($data)) { $root.removeFile($data); } else { return; } }, css: {disabled: !$root.enableRemove($data)}"><i class="icon-trash" title="{{ _('Remove') }}"></i> {{ _('Remove') }}</a></li>
</ul>
</div>
<div class="uploaded">{{ _('Created') }}: <span data-bind="text: formatTimeAgo(date)"></span></div>
<div class="size">{{ _('Size') }}: <span data-bind="text: formatSize(size)"></span></div>
<div class="additionalInfo hide" data-bind="html: $root.getAdditionalData($data)"></div>
<div class="btn-group action-buttons">
<a class="btn btn-mini" data-bind="attr: {href: $root.downloadLink($data), css: {disabled: !$root.downloadLink($data)}}"><i class="icon-download-alt" title="{{ _('Download') }}"></i></a>
<div class="btn btn-mini" data-bind="click: function() { if ($root.enableRemove($data)) { $root.removeFile($data); } else { return; } }, css: {disabled: !$root.enableRemove($data)}"><i class="icon-trash" title="{{ _('Remove') }}"></i></div>
<!--<div class="btn btn-mini" data-bind="click: function() { $root.workingArea.removeSVG($data); }, css: {disabled: !$root.enableSVGConversion($data)}"><i class="icon-remove" title="{{ _('remove') }}"></i></div>-->
<!--<div class="btn btn-mini" data-bind="click: function() { if ($root.enableSelect($data)) { $root.startGcodeWithSafetyWarning($data); } else { return; } }, css: {disabled: !$root.enableSelect($data)}"><i class="icon-fire" title="{{ _('Load and Laser') }}"></i></div>-->
<div class="btn btn-mini" data-bind="click: function() { if(!$root.workingArea.isPlaced($data)){ $root.workingArea.placeGcode($data); } }, css: {disabled: $root.workingArea.isPlaced($data)}"><i class="icon-ok" title="{{ _('Use') }}"></i></div>
<!-- <a class="btn btn-mini" data-bind="attr: {href: $root.downloadLink($data), css: {disabled: !$root.downloadLink($data)}}"><i class="icon-download-alt" title="{{ _('Download') }}"></i></a>
<a class="btn btn-mini" data-bind="click: function() { if ($root.enableRemove($data)) { $root.removeFile($data); } else { return; } }, css: {disabled: !$root.enableRemove($data)}"><i class="icon-trash" title="{{ _('Remove') }}"></i></a>-->
<div class="btn" data-bind="click: function() { if(!$root.workingArea.isPlaced($data)){ $root.workingArea.placeGcode($data); } }, css: {disabled: $root.workingArea.isPlaced($data)}"><i class="icon-ok" title="{{ _('Use') }}">Add</i></div>
</div>
</div>
</script>
<script type="text/html" id="files_template_model_svg">
<div class="file_list_entry">
<div class="title muted" data-bind="text: name"></div>
<i class="icon-picture file_list_icon"></i>
<div class="title muted dropdown" >
<a type="button" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span data-bind="text: name"></span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a class="" data-bind="attr: {href: $root.downloadLink($data), css: {disabled: !$root.downloadLink($data)}}"><i class="icon-download-alt" title="{{ _('Download') }}"></i> {{ _('Download') }}</a>
</li>
<li>
<a class="" data-bind="click: function() { if ($root.enableRemove($data)) { $root.removeFile($data); } else { return; } }, css: {disabled: !$root.enableRemove($data)}"><i class="icon-trash" title="{{ _('Remove') }}"></i> {{ _('Remove') }}</a>
</li>
</ul>
</div>
<div class="uploaded">{{ _('Uploaded') }}: <span data-bind="text: formatTimeAgo(date)"></span></div>
<div class="size">{{ _('Size') }}: <span data-bind="text: formatSize(size)"></span></div>
<div class="btn-group action-buttons">
<a class="btn btn-mini" data-bind="attr: {href: $root.downloadLink($data), css: {disabled: !$root.downloadLink($data)}}"><i class="icon-download-alt" title="{{ _('Download') }}"></i></a>
<div class="btn btn-mini" data-bind="click: function() { if ($root.enableRemove($data)) { $root.removeFile($data); } else { return; } }, css: {disabled: !$root.enableRemove($data)}"><i class="icon-trash" title="{{ _('Remove') }}"></i></div>
<!--<div class="btn btn-mini" data-bind="click: function() { $root.workingArea.removeSVG($data); }, css: {disabled: !$root.enableSVGConversion($data)}"><i class="icon-remove" title="{{ _('remove') }}"></i></div>-->
<div class="btn btn-mini" data-bind="click: function() { if(!$root.workingArea.isPlaced($data)){ $root.workingArea.placeSVG($data); } }, css: {disabled: $root.workingArea.isPlaced($data)}"><i class="icon-ok" title="{{ _('Use') }}"></i></div>
<!-- <a class="btn btn-mini" data-bind="attr: {href: $root.downloadLink($data), css: {disabled: !$root.downloadLink($data)}}"><i class="icon-download-alt" title="{{ _('Download') }}"></i></a>
<div class="btn btn-mini" data-bind="click: function() { if ($root.enableRemove($data)) { $root.removeFile($data); } else { return; } }, css: {disabled: !$root.enableRemove($data)}"><i class="icon-trash" title="{{ _('Remove') }}"></i></div>-->
<div class="btn" data-bind="click: function() { if(!$root.workingArea.isPlaced($data)){ $root.workingArea.placeSVG($data); } }, css: {disabled: $root.workingArea.isPlaced($data)}"><i class="icon-ok" title="{{ _('Use') }}">Add</i></div>
</div>
</div>
</script>