Product images delete button icon instead link with text in CP

assets/cp.styles.css

@@ -993,6 +993,8 @@ ul.pagination {
 	margin-right: 1rem;
 	margin-bottom: 1rem;
 	border-radius: .25rem;
+	position: relative;
+	vertical-align: top;
 }
 
 #list-images .attached-img a {
@@ -1004,6 +1006,26 @@ ul.pagination {
 	height: 84px;
 }
 
+#list-images .attached-img a.remove {
+	position: absolute;
+	width: 24px;
+	height: 24px;
+	top: -12px;
+	right: -12px;
+	border-radius: 12px;
+	background: #d9534f;
+	text-align: center;
+}
+
+#list-images .attached-img a.remove:hover {
+	background: #c9302c;
+}
+
+#list-images .attached-img a.remove svg {
+	color: #fff;
+	fill: currentColor;
+}
+
 #upload-msg {
 	position: absolute;
 	background: white;

modules/module_shop.go

@@ -239,7 +239,7 @@ func (this *Modules) shop_GetAllProductImages(wrap *wrapper.Wrapper, product_id
 		for rows.Next() {
 			err = rows.Scan(scan...)
 			if err == nil {
-				result += `<div class="attached-img"><a href="/products/images/` + html.EscapeString(string(values[0])) + `/` + html.EscapeString(string(values[1])) + `" title="` + html.EscapeString(string(values[1])) + `" target="_blank"><img src="/products/images/` + string(values[0]) + `/thumb-0-` + string(values[1]) + `" onerror="fave.ShopProductsRetryImage(this);" /></a><a href="javascript:fave.ShopProductsDeleteImage(this, ` + html.EscapeString(string(values[0])) + `, '` + html.EscapeString(string(values[1])) + `');">Delete</a></div>`
+				result += `<div class="attached-img"><a href="/products/images/` + html.EscapeString(string(values[0])) + `/` + html.EscapeString(string(values[1])) + `" title="` + html.EscapeString(string(values[1])) + `" target="_blank"><img src="/products/images/` + string(values[0]) + `/thumb-0-` + string(values[1]) + `" onerror="fave.ShopProductsRetryImage(this);" /></a><a class="remove" href="javascript:fave.ShopProductsDeleteImage(this, ` + html.EscapeString(string(values[0])) + `, '` + html.EscapeString(string(values[1])) + `');"><svg viewBox="1 1 11 14" width="10" height="12" class="sicon" version="1.1"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg></a></div>`
 			}
 		}
 	}

modules/module_shop_act_upload_image.go

@@ -74,7 +74,7 @@ func (this *Modules) RegisterAction_ShopUploadImage() *Action {
 									}
 									return nil
 								}); err == nil {
-									wrap.Write(`$('#list-images').append('<div class="attached-img"><a href="/products/images/` + pf_id + `/` + target_file_name + `" title="` + target_file_name + `" target="_blank"><img src="/products/images/` + pf_id + `/thumb-0-` + target_file_name + `" onerror="fave.ShopProductsRetryImage(this);" /></a><a href="javascript:fave.ShopProductsDeleteImage(this, ` + pf_id + `, \'` + target_file_name + `\');">Delete</a></div>');`)
+									wrap.Write(`$('#list-images').append('<div class="attached-img"><a href="/products/images/` + pf_id + `/` + target_file_name + `" title="` + target_file_name + `" target="_blank"><img src="/products/images/` + pf_id + `/thumb-0-` + target_file_name + `" onerror="fave.ShopProductsRetryImage(this);" /></a><a class="remove" href="javascript:fave.ShopProductsDeleteImage(this, ` + pf_id + `, \'` + target_file_name + `\');"><svg viewBox="1 1 11 14" width="10" height="12" class="sicon" version="1.1"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"></path></svg></a></div>');`)
 								}
 							}
 						}