jsdialog: implemented IconView

Change-Id: Ifb27b008396cba9c4695058096ae4f1757fa0a26 Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
CollaboraOnline · Jan 13, 2021 · bfc9186 · bfc9186
1 parent 8e6ea69
commit bfc9186
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 0 deletions.
diff --git a/loleaflet/css/jsdialogs.css b/loleaflet/css/jsdialogs.css
@@ -333,6 +333,27 @@ input[type='checkbox']:checked.autofilter, .jsdialog input[type='checkbox']:chec
 	float: left;
 }
 
+/* Icon View */
+
+.ui-iconview {
+	overflow: scroll;
+	display: inline-flex;
+	flex-wrap: wrap;
+}
+
+.ui-iconview-entry {
+	float: left;
+	position: relative;
+	flex-direction: column;
+	margin-left: 10px;
+	margin-top: 10px;
+	flex: 1;
+}
+
+.ui-iconview-entry.selected {
+	border: 5px solid silver;
+}
+
 /* Autofilter dropdown */
 
 .autofilter.row {
@@ -492,3 +513,10 @@ input[type='checkbox']:checked.autofilter, .jsdialog input[type='checkbox']:chec
 #hideitems {
 	border: none;
 }
+
+/* Fontwork dialog */
+
+#FontworkGalleryDialog #ctlFavoriteswin {
+	max-width: 400px;
+	max-height: 400px;
+}
diff --git a/loleaflet/src/control/Control.JSDialogBuilder.js b/loleaflet/src/control/Control.JSDialogBuilder.js
@@ -86,6 +86,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		this._controlHandlers['colorlistbox'] = this._colorControl;
 		this._controlHandlers['borderstyle'] = this._borderControl;
 		this._controlHandlers['treelistbox'] = this._treelistboxControl;
+		this._controlHandlers['iconview'] = this._iconViewControl;
 		this._controlHandlers['drawingarea'] = this._drawingAreaControl;
 		this._controlHandlers['rootcomment'] = this._rootCommentControl;
 		this._controlHandlers['comment'] = this._commentControl;
@@ -1786,6 +1787,47 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		return false;
 	},
 
+	_iconViewEntry: function (parentContainer, parentData, entry, builder) {
+		var disabled = parentData.enabled === 'false' || parentData.enabled === false;
+
+		if (entry.selected && (entry.selected === 'true' || entry.selected === true))
+			$(parentContainer).addClass('selected');
+
+		var icon = L.DomUtil.create('div', builder.options.cssClass + ' ui-iconview-icon', parentContainer);
+		var img = L.DomUtil.create('img', builder.options.cssClass, icon);
+		img.src = entry.image;
+
+		var text = L.DomUtil.create('div', builder.options.cssClass + ' ui-iconview-text', parentContainer);
+		text.innerText = entry.text;
+
+		if (!disabled) {
+			$(parentContainer).click(function() {
+				$('#' + parentData.id + ' .ui-treeview-entry').removeClass('selected');
+				builder.callback('iconview', 'select', parentData, entry.row, builder);
+			});
+			$(parentContainer).dblclick(function() {
+				$('#' + parentData.id + ' .ui-treeview-entry').removeClass('selected');
+				builder.callback('iconview', 'activate', parentData, entry.row, builder);
+			});
+		}
+	},
+
+	_iconViewControl: function (parentContainer, data, builder) {
+		var container = L.DomUtil.create('div', builder.options.cssClass + ' ui-iconview', parentContainer);
+		container.id = data.id;
+
+		var disabled = data.enabled === 'false' || data.enabled === false;
+		if (disabled)
+			L.DomUtil.addClass(container, 'disabled');
+
+		for (var i in data.entries) {
+			var entry = L.DomUtil.create('div', builder.options.cssClass + ' ui-iconview-entry', container);
+			builder._iconViewEntry(entry, data, data.entries[i], builder);
+		}
+
+		return false;
+	},
+
 	_valuesetControl: function (parentContainer, data, builder) {
 		var elem;
 		var image;