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/02/16 07:24:12 UTC

[openmeetings] branch csp updated: [OPENMEETINGS-2165] messages looks better

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

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


The following commit(s) were added to refs/heads/csp by this push:
     new 6cfab67  [OPENMEETINGS-2165] messages looks better
6cfab67 is described below

commit 6cfab67750b05bcdb82d8466e7f250855fe8bcc9
Author: Maxim Solodovnik <so...@gmail.com>
AuthorDate: Sun Feb 16 14:24:00 2020 +0700

    [OPENMEETINGS-2165] messages looks better
---
 .../apache/openmeetings/web/user/chat/Chat.html    |  2 +-
 .../web/user/profile/MessagesContactsPanel.html    | 66 ++++++++++++------
 .../web/user/profile/MessagesContactsPanel.java    |  9 +--
 .../web/user/profile/UserSearchPanel.html          |  9 +--
 .../src/main/webapp/css/raw-general.css            | 78 +++++++++-------------
 5 files changed, 86 insertions(+), 78 deletions(-)

diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/Chat.html b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/Chat.html
index c1d6d48..3e45147 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/Chat.html
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/Chat.html
@@ -55,7 +55,7 @@
 			</div>
 			<div class="clear icons actions full">
 				<div class='user clickable' wicket:message="title:1167"><i class="fas fa-address-card"></i></div>
-				<div class='add clickable' wicket:message="title:1186"><i class="fas fa-plus-square"></i></div>
+				<div class='add clickable' wicket:message="title:1186"><i class="fas fa-plus-circle"></i></div>
 				<div class='new-email clickable' wicket:message="title:1253"><i class="fas fa-envelope"></i></div>
 				<div class='invite clickable' wicket:message="title:1131"><i class="fas fa-link"></i></div>
 			</div>
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/profile/MessagesContactsPanel.html b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/profile/MessagesContactsPanel.html
index 4b7ee28..71ff6ce 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/profile/MessagesContactsPanel.html
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/profile/MessagesContactsPanel.html
@@ -26,13 +26,30 @@
 		<table class="messages">
 			<tr>
 				<td class="side left">
-					<div class="email new clickable" onclick="privateMessage();" wicket:message="title:1208"><wicket:message key="1207"/></div>
+					<div class="email new btn btn-sm btn-outline-primary
+					" onclick="privateMessage();" wicket:message="title:1208">
+						<i class="fas fa-envelope"></i>
+						<wicket:message key="1207"/>
+					</div>
 					<div wicket:id="folders">
-						<div wicket:id="inbox"><wicket:message key="1222"/></div>
-						<div wicket:id="sent"><wicket:message key="1223"/></div>
-						<div wicket:id="trash"><wicket:message key="1224"/></div>
-						<div class="email newdir clickable" wicket:id="newdir" wicket:message="title:1259"><wicket:message key="703"/></div>
+						<div wicket:id="inbox">
+							<i class="fas fa-inbox"></i>
+							<wicket:message key="1222"/>
+						</div>
+						<div wicket:id="sent">
+							<i class="fas fa-share-square"></i>
+							<wicket:message key="1223"/>
+						</div>
+						<div wicket:id="trash">
+							<i class="fas fa-trash-alt"></i>
+							<wicket:message key="1224"/>
+						</div>
+						<div class="email newdir btn btn-sm btn-outline-primary" wicket:id="newdir" wicket:message="title:1259">
+							<i class="fas fa-plus-circle"></i>
+							<wicket:message key="703"/>
+						</div>
 						<div wicket:id="folder">
+							<i class="fas fa-folder"></i>
 							<div wicket:id="name"></div>
 							<a class="delete" wicket:id="delete" wicket:message="title:1262"></a>
 						</div>
@@ -53,20 +70,22 @@
 						<tbody wicket:id="container">
 							<tr wicket:id="messages">
 								<td class="col-1" wicket:id="id"></td>
-								<td class="col-6" wicket:id="from"></td>
-								<td class="col-3" wicket:id="subject"></td>
+								<td class="col-6 from" wicket:id="from"></td>
+								<td class="col-3 subject" wicket:id="subject"></td>
 								<td class="col-2" wicket:id="send"></td>
 							</tr>
 						</tbody>
 					</table>
 					<div wicket:id="buttons">
-						<select wicket:id="msgSelect"></select>
-						<input wicket:id="toInboxBtn" type="button" wicket:message="value:1255"/>
-						<input wicket:id="replyBtn" type="button" wicket:message="value:messages.btn.reply"/>
-						<input wicket:id="deleteBtn" type="button" wicket:message="value:80"/>
-						<input wicket:id="readBtn" type="button" wicket:message="value:1248"/>
-						<input wicket:id="unreadBtn" type="button" wicket:message="value:1247"/>
-						<select wicket:id="msgMove"></select>
+						<select class="custom-select col-2" wicket:id="msgSelect"></select>
+						<div class="btn-group">
+							<button class="btn btn-sm btn-outline-primary" wicket:id="toInboxBtn"><wicket:message key="1255"/></button>
+							<button class="btn btn-sm btn-outline-primary" wicket:id="replyBtn"><wicket:message key="messages.btn.reply"/></button>
+							<button class="btn btn-sm btn-outline-danger" wicket:id="deleteBtn"><wicket:message key="80"/></button>
+							<button class="btn btn-sm btn-outline-secondary" wicket:id="readBtn"><wicket:message key="1248"/></button>
+							<button class="btn btn-sm btn-outline-secondary" wicket:id="unreadBtn"><wicket:message key="1247"/></button>
+						</div>
+						<select class="custom-select col-3" wicket:id="msgMove"></select>
 					</div>
 					<div wicket:id="selectedMessage">
 						<table class="w-100">
@@ -111,11 +130,20 @@
 						</tr>
 						<tr wicket:id="users">
 							<td><div wicket:id="name" class="overflow-x-hidden"></div></td>
-							<td><div wicket:id="accept" class="tick om-icon clickable" wicket:message="title:1190"
-								></div><div wicket:id="decline" class="cross om-icon clickable" wicket:message="title:1191"
-								></div><div wicket:id="view" class="user om-icon clickable" wicket:message="title:1236"
-								></div><div wicket:id="message" class="new-email om-icon clickable" wicket:message="title:1253"
-								></div><a wicket:id="delete" wicket:message="title:1234"></a></td>
+							<td>
+								<div wicket:id="accept" class="accept om-icon clickable" wicket:message="title:1190">
+									<i class="fas fa-check text-success"></i>
+								</div>
+								<div wicket:id="decline" class="decline om-icon clickable" wicket:message="title:1191">
+									<i class="fas fa-times text-danger"></i>
+								</div>
+								<div wicket:id="view" class="user om-icon clickable" wicket:message="title:1236">
+									<i class="fas fa-address-card"></i>
+								</div>
+								<div wicket:id="message" class="new-email om-icon clickable" wicket:message="title:1253">
+									<i class="fas fa-envelope"></i>
+								</div>
+								<a wicket:id="delete" class="del-contact btn-sm" wicket:message="title:1234"></a></td>
 						</tr>
 					</table>
 				</td>
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/profile/MessagesContactsPanel.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/profile/MessagesContactsPanel.java
index e5c7e0f..27f0ed4 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/profile/MessagesContactsPanel.java
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/profile/MessagesContactsPanel.java
@@ -79,8 +79,6 @@ import org.apache.wicket.model.Model;
 import org.apache.wicket.model.util.ListModel;
 import org.apache.wicket.spring.injection.annot.SpringBean;
 
-import com.googlecode.wicket.jquery.core.JQueryBehavior;
-
 import de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink;
 import de.agilecoders.wicket.core.markup.html.bootstrap.button.Buttons;
 import de.agilecoders.wicket.extensions.markup.html.bootstrap.icon.FontAwesome5IconType;
@@ -181,7 +179,6 @@ public class MessagesContactsPanel extends UserBasePanel {
 			}
 		};
 		add(addFolder);
-		add(new JQueryBehavior(".email.new", "button"));
 		folders.add(inbox.add(new AjaxEventBehavior(EVT_CLICK) {
 			private static final long serialVersionUID = 1L;
 
@@ -213,13 +210,13 @@ public class MessagesContactsPanel extends UserBasePanel {
 			protected void onEvent(AjaxRequestTarget target) {
 				addFolder.show(target);
 			}
-		}).add(new JQueryBehavior(".email.newdir", "button")));
+		}));
 		add(folders.add(new ListView<>("folder", foldersModel) {
 			private static final long serialVersionUID = 1L;
 
 			@Override
 			protected void populateItem(final ListItem<PrivateMessageFolder> item) {
-				item.add(new Label("name", item.getModelObject().getFolderName()));
+				item.add(new Label("name", item.getModelObject().getFolderName()).setRenderBodyOnly(true));
 				BootstrapAjaxLink<String> del = new BootstrapAjaxLink<>("delete", Buttons.Type.Outline_Danger) {
 					private static final long serialVersionUID = 1L;
 
@@ -531,7 +528,7 @@ public class MessagesContactsPanel extends UserBasePanel {
 	}
 
 	private static void selectFolder(WebMarkupContainer folder) {
-		folder.add(AttributeModifier.append(ATTR_CLASS, "ui-widget-header ui-corner-all"));
+		folder.add(AttributeModifier.append(ATTR_CLASS, "selected"));
 	}
 
 	private void setFolderClass(ListItem<PrivateMessageFolder> folder) {
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/profile/UserSearchPanel.html b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/profile/UserSearchPanel.html
index da602ff..9d7402a 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/profile/UserSearchPanel.html
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/profile/UserSearchPanel.html
@@ -53,10 +53,11 @@
 						<td class="col-2" wicket:id="tz"></td>
 						<td class="col-2" wicket:id="offer"></td>
 						<td class="col-3" wicket:id="search"></td>
-						<td class="col-2 text-nowrap"><div wicket:id="add" class="add om-icon clickable" wicket:message="title:1186"
-							></div><div wicket:id="message" class="new-email om-icon clickable" wicket:message="title:1253"
-							></div><div wicket:id="view" class="user om-icon clickable" wicket:message="title:1236"
-							></div><div wicket:id="invite" class="invite om-icon clickable" wicket:message="title:1131"></div></td>
+						<td class="col-2 text-nowrap">
+							<div wicket:id="add" class="om-icon clickable" wicket:message="title:1186"><i class="fas fa-plus-circle"></i></div>
+							<div wicket:id="message" class="om-icon clickable" wicket:message="title:1253"><i class="fas fa-envelope"></i></div>
+							<div wicket:id="view" class="om-icon clickable" wicket:message="title:1236"><i class="fas fa-address-card"></i></div>
+							<div wicket:id="invite" class="om-icon clickable" wicket:message="title:1131"><i class="fas fa-link"></i></div></td>
 					</tr>
 				</tbody>
 			</table>
diff --git a/openmeetings-web/src/main/webapp/css/raw-general.css b/openmeetings-web/src/main/webapp/css/raw-general.css
index 2e3e0b2..fbcf8a2 100644
--- a/openmeetings-web/src/main/webapp/css/raw-general.css
+++ b/openmeetings-web/src/main/webapp/css/raw-general.css
@@ -234,41 +234,22 @@ html, body {
 	font-family: 'Font Awesome 5 Free';
 	font-weight: 900;
 	color: var(--secondary);
-	font-size: 1.5em;
-	vertical-align: text-top;
+	font-size: 1.2em;
+	vertical-align: text-bottom;
 }
 .om-icon.big::before {
 	font-size: 2.2em;
 }
-.cross.om-icon {
-	background-image: url(images/cross.png);
-}
-.tick.om-icon {
-	background-image: url(images/tick.png);
-}
 .add.om-icon::before {
 	content: '\f055';
 }
-.new-email.om-icon {
-	background-image: url(images/email_add.png);
-}
-.user.om-icon {
-	background-image: url(images/user.png);
-}
-.invite.om-icon {
-	background-image: url(images/connect.png);
-}
-.online.om-icon {
-	background-image: url(images/bullet_green.png);
+.online.om-icon::before {
+	color: var(--success);
+	content: '\f111';
 }
 .offline.om-icon {
-	background-image: url(images/bullet_red.png);
-}
-.error .k-notification-wrap {
-	white-space: normal;
-}
-.error {
-	color: red;
+	color: var(--danger);
+	content: '\f111';
 }
 .message {
 	margin: 50px;
@@ -301,11 +282,25 @@ table.messages td.side.right {
 	min-width: 200px;
 	overflow-x: hidden;
 }
+table.messages td.side.right .del-contact {
+	padding: 0;
+	margin: 0;
+	height: 16px;
+	width: 16px;
+	position: relative;
+}
+table.messages td.side.right .del-contact i {
+	position: absolute;
+	top: 1px;
+	left: 3px;
+}
 table.messages td.main {
 	width: 100%;
 }
+table.messages td.from, table.messages td.subject {
+	overflow-wrap: break-word;
+}
 .email {
-	padding-left: 25px;
 	background-repeat: no-repeat !important;
 	background-position: 5px 3px !important;
 	background-size: 16px 16px !important;
@@ -313,28 +308,11 @@ table.messages td.main {
 	display: block;
 	text-align:left;
 }
-.email.new {
-	background-image: url(images/email_add.png);
-	font-weight: normal;
-}
-.email.new .ui-button-text, .email.newdir .ui-button-text {
-	padding: 0;
-}
-.email.inbox {
-	background-image: url(images/basket_put.png);
-}
-.email.sent {
-	background-image: url(images/email_go.png);
-}
-.email.trash {
-	background-image: url(images/email_delete.png);
-}
-.email.newdir {
-	background-image: url(images/folder_add.png);
-	font-weight: normal;
+.email.selected {
+	border: 1px solid #cccccc;
+	background-color:var(--light);
 }
 .email.folder {
-	background-image: url(images/folder.png);
 	font-weight: normal;
 	position: relative;
 }
@@ -342,7 +320,6 @@ table.messages td.main {
 	position:absolute;
 	right: 2px;
 	top: 2px;
-	background-image: url(images/cross.png);
 	font-weight: normal;
 	padding: 0;
 	display: inline-block;
@@ -350,6 +327,11 @@ table.messages td.main {
 	width: 18px;
 	height: 18px;
 }
+.email.folder .delete i {
+	top: 2px;
+	position: absolute;
+	left: 4px;
+}
 .messages.column.label {
 	width: 20px;
 	min-height: inherit;