From 8b7f6012d67448d4f2bedeb224102f81d90e108b Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Mon, 28 May 2018 17:41:52 +0200
Subject: [PATCH] Implement new kind of taglist to show thumbnail of set value

---
 admin/templates/default/config.xet     |  2 +-
 api/js/etemplate/et2_widget_taglist.js | 20 ++++++++++++++++++++
 api/templates/default/etemplate2.css   |  3 +++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/admin/templates/default/config.xet b/admin/templates/default/config.xet
index ac83b65b1b..843786ec7f 100644
--- a/admin/templates/default/config.xet
+++ b/admin/templates/default/config.xet
@@ -82,7 +82,7 @@
 						<description value="If you wish to have randomly selected images you may upload multiple images."/>
 					</vbox>
 					<vbox>
-						<taglist id="newsettings[login_background_file]" width="100%" allowFreeEntries="true" empty_label="Upload your background image or enter the URL"/>
+						<taglist-thumbnail id="newsettings[login_background_file]" width="100%" allowFreeEntries="true" empty_label="Upload your background image or enter the URL"/>
 						<file width="100%" label="upload" onchange="app.admin.login_background_update"/>
 					</vbox>
 				</row>
diff --git a/api/js/etemplate/et2_widget_taglist.js b/api/js/etemplate/et2_widget_taglist.js
index 15ae39d4d7..f05b632abe 100644
--- a/api/js/etemplate/et2_widget_taglist.js
+++ b/api/js/etemplate/et2_widget_taglist.js
@@ -1310,6 +1310,26 @@ var et2_taglist_category = (function(){ "use strict"; return et2_taglist.extend(
 });}).call(this);
 et2_register_widget(et2_taglist_category, ["taglist-cat"]);
 
+/**
+ * Taglist customized specificlly for image url shown as thumbnail,
+ *
+ */
+var et2_taglist_thumbnail = (function(){ "use strict"; return et2_taglist.extend(
+{
+	init:function ()
+	{
+		this._super.apply(this, arguments);
+	},
+
+	selectionRenderer: function(item)
+	{
+		var tag = jQuery('<span>').attr('title',item.label);
+		jQuery('<img class="et2_taglist_thumbnail"/>').attr('src', item.label).prependTo(tag);
+		return tag;
+	}
+});}).call(this);
+et2_register_widget(et2_taglist_thumbnail, ["taglist-thumbnail"]);
+
 
 /**
  * et2_taglist_ro is the readonly implementation of the taglist.
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 4b7d92c2f3..0a538d2484 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -1087,6 +1087,9 @@ ul.et2_link_string {
 .et2_taglist, .et2_taglist > div.ms-ctn  {
 	min-height: 23px;
 }
+img.et2_taglist_thumbnail, table.egwGridView_grid .et2_taglist .et2_taglist_thumbnail {
+	height:100px;
+}
 /* Toggle single / multiple */
 .et2_taglist_toggle {
 	position: relative;