You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openmeetings.apache.org by so...@apache.org on 2020/09/25 07:46:40 UTC

[openmeetings] branch master updated: [OPENMEETINGS-2363] initial attempt to re-style dialogs and buttons

This is an automated email from the ASF dual-hosted git repository.

solomax pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/openmeetings.git


The following commit(s) were added to refs/heads/master by this push:
     new 61a9f14  [OPENMEETINGS-2363] initial attempt to re-style dialogs and buttons
61a9f14 is described below

commit 61a9f1428c89a38aaca017f6a6d3c1c02af468a7
Author: Maxim Solodovnik <so...@gmail.com>
AuthorDate: Fri Sep 25 14:46:25 2020 +0700

    [OPENMEETINGS-2363] initial attempt to re-style dialogs and buttons
---
 .../web/common/OmAjaxClientInfoBehavior.java       |   4 +-
 .../org/apache/openmeetings/web/common/main.js     |  22 +---
 .../pages/install/InstallWizard$ParamsStep3.html   |  12 +--
 .../pages/install/InstallWizard$ParamsStep4.html   |   8 +-
 .../web/pages/install/InstallWizard.java           |  10 +-
 .../org/apache/openmeetings/web/room/raw-room.js   |  12 +++
 .../org/apache/openmeetings/web/room/raw-sharer.js |   4 +-
 .../apache/openmeetings/web/user/chat/Chat.java    |  15 ++-
 .../openmeetings/web/user/rooms/RoomListPanel.html |   2 +-
 .../openmeetings/web/user/rooms/RoomListPanel.java | 115 +++++++++++----------
 .../openmeetings/web/util/OmTooltipBehavior.java   |  34 ++++++
 11 files changed, 139 insertions(+), 99 deletions(-)

diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/OmAjaxClientInfoBehavior.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/OmAjaxClientInfoBehavior.java
index 0c81c78..7af38e5 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/OmAjaxClientInfoBehavior.java
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/OmAjaxClientInfoBehavior.java
@@ -44,9 +44,7 @@ public class OmAjaxClientInfoBehavior extends AjaxClientInfoBehavior {
 
 		@Override
 		public List<HeaderItem> getDependencies() {
-			List<HeaderItem> list = super.getDependencies();
-			list.add(JavaScriptHeaderItem.forReference(BrowserInfoForm.JS));
-			return list;
+			return List.of(JavaScriptHeaderItem.forReference(BrowserInfoForm.JS));
 		}
 	};
 
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/main.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/main.js
index aa453a7..b8778d5 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/main.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/main.js
@@ -29,25 +29,6 @@ var OmUtil = (function() {
 	function _init(_options) {
 		options = _options;
 	}
-	function _confirmDlg(_id, okHandler) {
-		const confirm = $('#' + _id);
-		confirm.dialog({
-			modal: true
-			, buttons: [{
-				text: confirm.data('btn-ok'),
-				click: function() {
-					okHandler();
-					$(this).dialog('close');
-				}
-			}, {
-				text: confirm.data('btn-cancel'),
-				click: function() {
-					$(this).dialog('close');
-				}
-			}]
-		});
-		return confirm;
-	}
 	function _tmpl(tmplId, newId) {
 		return $(tmplId).clone().attr('id', newId || '');
 	}
@@ -85,7 +66,6 @@ var OmUtil = (function() {
 	}
 
 	self.init = _init;
-	self.confirmDlg = _confirmDlg;
 	self.tmpl = _tmpl;
 	self.debugEnabled = _debugEnabled;
 	self.enableDebug = function() {
@@ -135,7 +115,7 @@ Wicket.BrowserInfo.collectExtraInfo = function(info) {
 //Fix to move the close icon on top of the .ui-dialog-titlebar cause otherwise 
 // touch-events are broken and you won't be able to close the dialog
 function fixJQueryUIDialogTouch (dialog) {
-    dialog.parent().find('.ui-dialog-titlebar-close').appendTo(dialog.parent());
+	dialog.parent().find('.ui-dialog-titlebar-close').appendTo(dialog.parent());
 }
 function showBusyIndicator() {
 	$('#busy-indicator').show();
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/install/InstallWizard$ParamsStep3.html b/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/install/InstallWizard$ParamsStep3.html
index a97695c..3e65ebf 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/install/InstallWizard$ParamsStep3.html
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/install/InstallWizard$ParamsStep3.html
@@ -25,40 +25,40 @@
 		<legend><wicket:message key="install.wizard.params.step3.converters"/></legend>
 		<div class="formelement">
 			<label wicket:for="docDpi" class="col-3 text-right"><wicket:message key="install.wizard.params.step3.docDpi"/>
-				<i class="fas fa-info-circle m-1 text-info" wicket:message="title:install.wizard.params.step3.docDpi.text,alt:install.wizard.params.step3.docDpi.text"></i>
+				<i class="fas fa-info-circle m-1 text-info om-tooltip" wicket:message="title:install.wizard.params.step3.docDpi.text,alt:install.wizard.params.step3.docDpi.text"></i>
 			</label>
 			<input wicket:id="docDpi" wicket:message="title:install.wizard.params.step3.docDpi.title" type="text" class="col-3"/>
 		</div>
 		<div class="formelement">
 			<label wicket:for="docQuality" class="col-3 text-right"><wicket:message key="install.wizard.params.step3.docQuality"/>
-				<i class="fas fa-info-circle m-1 text-info" wicket:message="title:install.wizard.params.step3.docQuality.text,alt:install.wizard.params.step3.docQuality.text"></i>
+				<i class="fas fa-info-circle m-1 text-info om-tooltip" wicket:message="title:install.wizard.params.step3.docQuality.text,alt:install.wizard.params.step3.docQuality.text"></i>
 			</label>
 			<input wicket:id="docQuality" wicket:message="title:install.wizard.params.step3.docQuality.title" type="text" class="col-3"/>
 		</div>
 		<div class="formelement">
 			<label wicket:for="imageMagicPath" class="col-3 text-right"><wicket:message key="install.wizard.params.step3.imageMagicPath"/>
-				<i class="fas fa-info-circle m-1 text-info" wicket:message="title:install.wizard.params.step3.imageMagicPath.text,alt:install.wizard.params.step3.imageMagicPath.text"></i>
+				<i class="fas fa-info-circle m-1 text-info om-tooltip" wicket:message="title:install.wizard.params.step3.imageMagicPath.text,alt:install.wizard.params.step3.imageMagicPath.text"></i>
 			</label>
 			<input wicket:id="imageMagicPath" wicket:message="title:install.wizard.params.step3.imageMagicPath.title" type="text" class="col-3"/>
 			<button class="formelement" wicket:id="validateImageMagic"></button>
 		</div>
 		<div class="formelement">
 			<label wicket:for="ffmpegPath" class="col-3 text-right"><wicket:message key="install.wizard.params.step3.ffmpegPath"/>
-				<i class="fas fa-info-circle m-1 text-info" wicket:message="title:install.wizard.params.step3.ffmpegPath.text,alt:install.wizard.params.step3.ffmpegPath.text"></i>
+				<i class="fas fa-info-circle m-1 text-info om-tooltip" wicket:message="title:install.wizard.params.step3.ffmpegPath.text,alt:install.wizard.params.step3.ffmpegPath.text"></i>
 			</label>
 			<input wicket:id="ffmpegPath" wicket:message="title:install.wizard.params.step3.ffmpegPath.title" type="text" class="col-3"/>
 			<button class="formelement" wicket:id="validateFfmpeg"></button>
 		</div>
 		<div class="formelement">
 			<label wicket:for="soxPath" class="col-3 text-right"><wicket:message key="install.wizard.params.step3.soxPath"/>
-				<i class="fas fa-info-circle m-1 text-info" wicket:message="title:install.wizard.params.step3.soxPath.text,alt:install.wizard.params.step3.soxPath.text"></i>
+				<i class="fas fa-info-circle m-1 text-info om-tooltip" wicket:message="title:install.wizard.params.step3.soxPath.text,alt:install.wizard.params.step3.soxPath.text"></i>
 			</label>
 			<input wicket:id="soxPath" wicket:message="title:install.wizard.params.step3.soxPath.title" type="text" class="col-3"/>
 			<button class="formelement" wicket:id="validateSox"></button>
 		</div>
 		<div class="formelement">
 			<label wicket:for="officePath" class="col-3 text-right"><wicket:message key="install.wizard.params.step3.officePath"/>
-				<i class="fas fa-info-circle m-1 text-info" wicket:message="title:install.wizard.params.step3.officePath.text,alt:install.wizard.params.step3.officePath.text"></i>
+				<i class="fas fa-info-circle m-1 text-info om-tooltip" wicket:message="title:install.wizard.params.step3.officePath.text,alt:install.wizard.params.step3.officePath.text"></i>
 			</label>
 			<input wicket:id="officePath" wicket:message="title:install.wizard.params.step3.officePath.title" type="text" class="col-3"/>
 			<button class="formelement" wicket:id="validateOffice"></button>
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/install/InstallWizard$ParamsStep4.html b/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/install/InstallWizard$ParamsStep4.html
index 056c454..ee8fc33 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/install/InstallWizard$ParamsStep4.html
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/install/InstallWizard$ParamsStep4.html
@@ -25,7 +25,7 @@
 		<legend><wicket:message key="install.wizard.params.step4.crypt"/></legend>
 		<div class="formelement">
 			<label wicket:for="cryptClassName" class="col-3 text-right"><wicket:message key="install.wizard.params.step4.cryptClassName"/>
-				<i class="fas fa-info-circle m-1 text-info" wicket:message="title:install.wizard.params.step4.cryptClassName.text,alt:install.wizard.params.step4.cryptClassName.text"></i>
+				<i class="fas fa-info-circle m-1 text-info om-tooltip" wicket:message="title:install.wizard.params.step4.cryptClassName.text,alt:install.wizard.params.step4.cryptClassName.text"></i>
 			</label>
 			<input wicket:id="cryptClassName" type="text" wicket:message="title:install.wizard.params.step4.cryptClassName.title" class="col-3"/>
 		</div>
@@ -34,7 +34,7 @@
 		<legend><wicket:message key="install.wizard.params.step4.sip"/></legend>
 		<div class="formelement">
 			<label wicket:for="sipEnable" class="col-3 text-right"><wicket:message key="install.wizard.params.step4.sipEnable"/>
-				<i class="fas fa-info-circle m-1 text-info" wicket:message="title:install.wizard.params.step4.sipEnable.text,alt:install.wizard.params.step4.sipEnable.text"></i>
+				<i class="fas fa-info-circle m-1 text-info om-tooltip" wicket:message="title:install.wizard.params.step4.sipEnable.text,alt:install.wizard.params.step4.sipEnable.text"></i>
 			</label>
 			<div class="onoffswitch">
 				<input type="checkbox" class="onoff-checkbox" wicket:id="sipEnable"/>
@@ -43,13 +43,13 @@
 		</div>
 		<div class="formelement">
 			<label wicket:for="sipRoomPrefix" class="col-3 text-right"><wicket:message key="install.wizard.params.step4.sipRoomPrefix"/>
-				<i class="fas fa-info-circle m-1 text-info" wicket:message="title:install.wizard.params.step4.sipRoomPrefix.text,alt:install.wizard.params.step4.sipRoomPrefix.text"></i>
+				<i class="fas fa-info-circle m-1 text-info om-tooltip" wicket:message="title:install.wizard.params.step4.sipRoomPrefix.text,alt:install.wizard.params.step4.sipRoomPrefix.text"></i>
 			</label>
 			<input wicket:id="sipRoomPrefix" type="text" class="col-3"/>
 		</div>
 		<div class="formelement">
 			<label wicket:for="sipExtenContext" class="col-3 text-right"><wicket:message key="install.wizard.params.step4.sipExtenContext"/>
-				<i class="fas fa-info-circle m-1 text-info" wicket:message="title:install.wizard.params.step4.sipExtenContext.text,alt:install.wizard.params.step4.sipExtenContext.text"></i>
+				<i class="fas fa-info-circle m-1 text-info om-tooltip" wicket:message="title:install.wizard.params.step4.sipExtenContext.text,alt:install.wizard.params.step4.sipExtenContext.text"></i>
 			</label>
 			<input wicket:id="sipExtenContext" type="text" class="col-3"/>
 		</div>
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/install/InstallWizard.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/install/InstallWizard.java
index 3b0e936..36d3fb0 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/install/InstallWizard.java
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/pages/install/InstallWizard.java
@@ -54,6 +54,7 @@ import org.apache.openmeetings.web.app.Application;
 import org.apache.openmeetings.web.app.WebSession;
 import org.apache.openmeetings.web.common.ErrorMessagePanel;
 import org.apache.openmeetings.web.common.OmLabel;
+import org.apache.openmeetings.web.util.OmTooltipBehavior;
 import org.apache.wicket.Component;
 import org.apache.wicket.ajax.AjaxRequestTarget;
 import org.apache.wicket.ajax.attributes.AjaxRequestAttributes;
@@ -91,9 +92,6 @@ import org.slf4j.LoggerFactory;
 import org.springframework.orm.jpa.LocalEntityManagerFactoryBean;
 import org.springframework.web.context.support.XmlWebApplicationContext;
 
-import com.googlecode.wicket.jquery.core.Options;
-import com.googlecode.wicket.jquery.ui.widget.tooltip.TooltipBehavior;
-
 import de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxButton;
 import de.agilecoders.wicket.core.markup.html.bootstrap.button.ButtonBehavior;
 import de.agilecoders.wicket.core.markup.html.bootstrap.button.Buttons;
@@ -613,7 +611,7 @@ public class InstallWizard extends BootstrapWizard {
 					target.add(feedback);
 				}
 			});
-			add(new TooltipBehavior(".text-info"));
+			add(new OmTooltipBehavior());
 		}
 
 		private void reportSuccess(TextField<String> path) {
@@ -713,9 +711,7 @@ public class InstallWizard extends BootstrapWizard {
 			add(new CheckBox("sipEnable"));
 			add(new TextField<String>("sipRoomPrefix"));
 			add(new TextField<String>("sipExtenContext"));
-			Options options = new Options();
-			options.set("content", "function () { return $(this).prop('title'); }");
-			add(new TooltipBehavior(".text-info", options));
+			add(new OmTooltipBehavior());
 		}
 
 		@Override
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-room.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-room.js
index b072891..3f21532 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-room.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-room.js
@@ -461,6 +461,18 @@ var Room = (function() {
 		VideoManager.update(c)
 	}
 
+	// Let's re-style jquery-ui dialogs and buttons
+	$.extend($.ui.dialog.prototype.options.classes, {
+		'ui-dialog': 'modal-content'
+		, 'ui-dialog-titlebar': 'modal-header'
+		, 'ui-dialog-title': 'modal-title'
+		, 'ui-dialog-titlebar-close': 'close'
+		, 'ui-dialog-content': 'modal-body'
+		, 'ui-dialog-buttonpane': 'modal-footer'
+	});
+	$.extend($.ui.button.prototype.options.classes, {
+		'ui-button': 'btn btn-outline-secondary'
+	});
 	self.init = _init;
 	self.getMenuHeight = function() { return menuHeight; };
 	self.getOptions = function() { return typeof(options) === 'object' ? JSON.parse(JSON.stringify(options)) : {}; };
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-sharer.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-sharer.js
index ff203e1..3561a7a 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-sharer.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-sharer.js
@@ -14,7 +14,7 @@ var Sharer = (function() {
 		shareState = SHARE_STOPPED;
 		recState = SHARE_STOPPED;
 	}
-	
+
 	function _init() {
 		reset();
 		sharer = $('#sharer').dialog({
@@ -27,7 +27,7 @@ var Sharer = (function() {
 			, resizable: false
 		});
 		fixJQueryUIDialogTouch(sharer);
-		
+
 		if (!VideoUtil.sharingSupported()) {
 			sharer.find('.container').remove();
 			sharer.find('.alert').show();
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/Chat.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/Chat.java
index de8c9ca..ef941e3 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/Chat.java
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/Chat.java
@@ -47,6 +47,7 @@ import org.apache.openmeetings.web.app.ClientManager;
 import org.apache.openmeetings.web.common.MainPanel;
 import org.apache.wicket.ajax.AbstractDefaultAjaxBehavior;
 import org.apache.wicket.ajax.AjaxRequestTarget;
+import org.apache.wicket.markup.head.HeaderItem;
 import org.apache.wicket.markup.head.IHeaderResponse;
 import org.apache.wicket.markup.head.JavaScriptHeaderItem;
 import org.apache.wicket.markup.head.OnDomReadyHeaderItem;
@@ -60,6 +61,8 @@ import org.slf4j.LoggerFactory;
 
 import com.github.openjson.JSONObject;
 
+import de.agilecoders.wicket.extensions.markup.html.bootstrap.jqueryui.JQueryUIJavaScriptReference;
+
 public class Chat extends Panel {
 	private static final long serialVersionUID = 1L;
 	private static final Logger log = LoggerFactory.getLogger(Chat.class);
@@ -169,7 +172,17 @@ public class Chat extends Panel {
 	@Override
 	public void renderHead(IHeaderResponse response) {
 		super.renderHead(response);
-		response.render(new PriorityHeaderItem(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(Chat.class, "chat.js"))));
+		response.render(new PriorityHeaderItem(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(Chat.class, "chat.js"))) {
+			private static final long serialVersionUID = 1L;
+
+			@Override
+			public List<HeaderItem> getDependencies() {
+				return List.of(JavaScriptHeaderItem.forScript("const bstooltip = jQuery.fn.tooltip;", "preserve-bs-tooltip")
+						, JQueryUIJavaScriptReference.asHeaderItem()
+						, JavaScriptHeaderItem.forScript("jQuery.fn.tooltip = bstooltip;", "restore-bs-tooltip")
+						);
+			}
+		});
 		response.render(new PriorityHeaderItem(getNamedFunction("chatActivity", chatActivity, explicit(PARAM_TYPE), explicit(PARAM_ROOM_ID), explicit(PARAM_MSG_ID))));
 
 		if (showDashboardChat) {
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/rooms/RoomListPanel.html b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/rooms/RoomListPanel.html
index 656639a..cce19c6 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/rooms/RoomListPanel.html
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/rooms/RoomListPanel.html
@@ -25,7 +25,7 @@
 		<tr wicket:id="list" class="room-row">
 			<td class="position-relative">
 				<div class="col-10 container" wicket:id="roomContainer">
-					<div><span wicket:id="roomName">[room name]</span>&nbsp;<i wicket:id="info" class="fas fa-info-circle text-info info-tooltip"></i></div>
+					<div><span wicket:id="roomName">[room name]</span>&nbsp;<i wicket:id="info" class="fas fa-info-circle text-info om-tooltip"></i></div>
 					<div>
 						<wicket:message key="398" />&nbsp;<span wicket:id="curUsers"></span>&nbsp;/&nbsp;<span
 							wicket:id="totalUsers"></span>&nbsp;&nbsp;<button wicket:id="refresh" class="refresh btn-sm m2"></button>
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/rooms/RoomListPanel.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/rooms/RoomListPanel.java
index f3c8216..cd4dfd4 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/rooms/RoomListPanel.java
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/rooms/RoomListPanel.java
@@ -27,6 +27,7 @@ import java.util.List;
 import org.apache.openmeetings.db.entity.room.Room;
 import org.apache.openmeetings.web.app.ClientManager;
 import org.apache.openmeetings.web.pages.MainPage;
+import org.apache.openmeetings.web.util.OmTooltipBehavior;
 import org.apache.wicket.AttributeModifier;
 import org.apache.wicket.Component;
 import org.apache.wicket.ajax.AjaxEventBehavior;
@@ -42,8 +43,6 @@ import org.apache.wicket.model.Model;
 import org.apache.wicket.model.ResourceModel;
 import org.apache.wicket.spring.injection.annot.SpringBean;
 
-import com.googlecode.wicket.jquery.ui.widget.tooltip.TooltipBehavior;
-
 import de.agilecoders.wicket.core.markup.html.bootstrap.behavior.CssClassNameAppender;
 import de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink;
 import de.agilecoders.wicket.core.markup.html.bootstrap.button.Buttons;
@@ -51,64 +50,72 @@ import de.agilecoders.wicket.extensions.markup.html.bootstrap.icon.FontAwesome5I
 
 public class RoomListPanel extends Panel {
 	private static final long serialVersionUID = 1L;
-	private final ListView<Room> list;
+	private final String label;
+	private final ListView<Room> list = new ListView<>("list") {
+		private static final long serialVersionUID = 1L;
+
+		@Override
+		protected void populateItem(ListItem<Room> item) {
+			final Room r = item.getModelObject();
+			WebMarkupContainer roomContainer;
+			item.add((roomContainer = new WebMarkupContainer("roomContainer")).add(new AjaxEventBehavior(EVT_CLICK){
+				private static final long serialVersionUID = 1L;
+
+				@Override
+				protected void onEvent(AjaxRequestTarget target) {
+					onContainerClick(target, r);
+				}
+			}));
+			roomContainer.add(new Label("roomName", r.getName()));
+			final WebMarkupContainer info = new WebMarkupContainer("info");
+			roomContainer.add(info.setOutputMarkupId(true)
+					.add(AttributeModifier.append(ATTR_TITLE, getString(String.format("room.type.%s.desc", r.getType().name())))));
+			final Label curUsers = new Label("curUsers", new Model<>(cm.listByRoom(r.getId()).size()));
+			roomContainer.add(curUsers.setOutputMarkupId(true));
+			roomContainer.add(new Label("totalUsers", r.getCapacity()));
+			item.add(new WebMarkupContainer("btn").add(new Label("label", label)).add(new RoomEnterBehavior(r.getId()) {
+				private static final long serialVersionUID = 1L;
+
+				@Override
+				protected void onEvent(AjaxRequestTarget target) {
+					onRoomEnter(target, roomId);
+				}
+			}));
+			roomContainer.add(new BootstrapAjaxLink<String>("refresh", null, Buttons.Type.Outline_Info, new ResourceModel("lbl.refresh")) {
+				private static final long serialVersionUID = 1L;
+
+				{
+					setIconType(FontAwesome5IconType.sync_alt_s);
+				}
+
+				@Override
+				protected <L extends Serializable> Component newLabel(String markupId, IModel<L> model) {
+					return super.newLabel(markupId, model).setRenderBodyOnly(false).add(new CssClassNameAppender("sr-only"));
+				}
+
+				@Override
+				public void onClick(AjaxRequestTarget target) {
+					target.add(curUsers.setDefaultModelObject(cm.listByRoom(r.getId()).size()));
+					onRefreshClick(target, r);
+				}
+			}.add(AttributeModifier.append(ATTR_TITLE, new ResourceModel("lbl.refresh"))));
+		}
+	};
 	@SpringBean
 	private ClientManager cm;
 
 	public RoomListPanel(String id, List<Room> rooms, final String label) {
 		super(id);
 		setOutputMarkupId(true);
-		add(list = new ListView<>("list", rooms) {
-			private static final long serialVersionUID = 1L;
-
-			@Override
-			protected void populateItem(ListItem<Room> item) {
-				final Room r = item.getModelObject();
-				WebMarkupContainer roomContainer;
-				item.add((roomContainer = new WebMarkupContainer("roomContainer")).add(new AjaxEventBehavior(EVT_CLICK){
-					private static final long serialVersionUID = 1L;
-
-					@Override
-					protected void onEvent(AjaxRequestTarget target) {
-						onContainerClick(target, r);
-					}
-				}));
-				roomContainer.add(new Label("roomName", r.getName()));
-				final WebMarkupContainer info = new WebMarkupContainer("info");
-				roomContainer.add(info.setOutputMarkupId(true)
-						.add(AttributeModifier.append(ATTR_TITLE, getString(String.format("room.type.%s.desc", r.getType().name())))));
-				final Label curUsers = new Label("curUsers", new Model<>(cm.listByRoom(r.getId()).size()));
-				roomContainer.add(curUsers.setOutputMarkupId(true));
-				roomContainer.add(new Label("totalUsers", r.getCapacity()));
-				item.add(new WebMarkupContainer("btn").add(new Label("label", label)).add(new RoomEnterBehavior(r.getId()) {
-					private static final long serialVersionUID = 1L;
-
-					@Override
-					protected void onEvent(AjaxRequestTarget target) {
-						onRoomEnter(target, roomId);
-					}
-				}));
-				roomContainer.add(new BootstrapAjaxLink<String>("refresh", null, Buttons.Type.Outline_Info, new ResourceModel("lbl.refresh")) {
-					private static final long serialVersionUID = 1L;
-
-					{
-						setIconType(FontAwesome5IconType.sync_alt_s);
-					}
-
-					@Override
-					protected <L extends Serializable> Component newLabel(String markupId, IModel<L> model) {
-						return super.newLabel(markupId, model).setRenderBodyOnly(false).add(new CssClassNameAppender("sr-only"));
-					}
-
-					@Override
-					public void onClick(AjaxRequestTarget target) {
-						target.add(curUsers.setDefaultModelObject(cm.listByRoom(r.getId()).size()));
-						onRefreshClick(target, r);
-					}
-				}.add(AttributeModifier.append(ATTR_TITLE, new ResourceModel("lbl.refresh"))));
-			}
-		});
-		add(new TooltipBehavior(".info-tooltip"));
+		this.label = label;
+		list.setList(rooms);
+	}
+
+	@Override
+	protected void onInitialize() {
+		super.onInitialize();
+		add(list);
+		add(new OmTooltipBehavior());
 	}
 
 	public void update(IPartialPageRequestHandler handler, List<Room> rooms) {
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/util/OmTooltipBehavior.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/util/OmTooltipBehavior.java
new file mode 100644
index 0000000..498aef1
--- /dev/null
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/util/OmTooltipBehavior.java
@@ -0,0 +1,34 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License") +  you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+package org.apache.openmeetings.web.util;
+
+import org.apache.wicket.Component;
+import org.apache.wicket.behavior.Behavior;
+import org.apache.wicket.markup.head.IHeaderResponse;
+import org.apache.wicket.markup.head.OnDomReadyHeaderItem;
+
+public class OmTooltipBehavior extends Behavior {
+	private static final long serialVersionUID = 1L;
+
+	@Override
+	public void renderHead(Component component, IHeaderResponse response) {
+		super.renderHead(component, response);
+		response.render(OnDomReadyHeaderItem.forScript("$('.om-tooltip').tooltip({html: true});"));
+	}
+}