From a2b892c96bad93ff73f588e9967dbd56c218a855 Mon Sep 17 00:00:00 2001
From: Teja <mail@tejaphilipp.de>
Date: Sat, 14 Feb 2015 20:33:42 +0100
Subject: [PATCH] improved visual difference between gcode and svg files in the
 working area

---
 .../plugins/svgtogcode/static/css/mrbeam.css  | 17 +++++++
 .../templates/override_index.jinja2           | 45 ++++++++++++++-----
 2 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/src/octoprint/plugins/svgtogcode/static/css/mrbeam.css b/src/octoprint/plugins/svgtogcode/static/css/mrbeam.css
index 023cc1be..3656bbd2 100644
--- a/src/octoprint/plugins/svgtogcode/static/css/mrbeam.css
+++ b/src/octoprint/plugins/svgtogcode/static/css/mrbeam.css
@@ -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;
diff --git a/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2 b/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2
index b667c86a..dca67152 100644
--- a/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2
+++ b/src/octoprint/plugins/svgtogcode/templates/override_index.jinja2
@@ -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>