Merge pull request #2305 from axpoems/revamp-user-profile-sidebar

Implement new design for user profile sidebar

apps/desktop/desktop/src/main/java/bisq/desktop/components/controls/MenuItem.java

@@ -0,0 +1,53 @@
+/*
+ * This file is part of Bisq.
+ *
+ * Bisq is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bisq is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public
+ * License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bisq. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+package bisq.desktop.components.controls;
+
+import bisq.desktop.common.utils.ImageUtil;
+import javafx.scene.control.Button;
+import javafx.scene.image.ImageView;
+
+public class MenuItem extends Button {
+    private final ImageView defaultIcon, activeIcon;
+    private ImageView buttonIcon;
+
+    public MenuItem(String text, String defaultIconId, String activeIconId) {
+        defaultIcon = ImageUtil.getImageViewById(defaultIconId);
+        activeIcon = ImageUtil.getImageViewById(activeIconId);
+        buttonIcon = defaultIcon;
+
+        setText(text);
+        setGraphic(buttonIcon);
+        setGraphicTextGap(10);
+        getStyleClass().add("menu-item");
+
+        attachListeners();
+    }
+
+    private void attachListeners() {
+        setOnMouseExited(e -> updateIcon(defaultIcon));
+        setOnMouseEntered(e -> updateIcon(activeIcon));
+    }
+
+    private void updateIcon(ImageView newIcon) {
+        if (buttonIcon != newIcon) {
+            getChildren().remove(buttonIcon);
+            buttonIcon = newIcon;
+            getChildren().add(buttonIcon);
+        }
+    }
+}

apps/desktop/desktop/src/main/resources/css/chat.css

@@ -359,13 +359,6 @@
     -fx-text-fill: -fx-light-text-color;
 }
 
-.chat-side-bar-user-profile-details {
-    -fx-fill: -fx-mid-text-color;
-    -fx-text-fill: -fx-mid-text-color;
-    -fx-font-family: "IBM Plex Sans Light";
-    -fx-font-size: 0.9em;
-}
-
 .chat-side-bar-user-profile-small-headline {
     -fx-fill: -fx-mid-text-color;
     -fx-text-fill: -fx-mid-text-color;
@@ -380,12 +373,6 @@
     -fx-font-size: 1em;
 }
 
-.chat-side-bar-user-profile-small-hyperlink {
-    /*  -fx-font-size: 1em;
-      -fx-font-family: "IBM Plex Light";*/
-    -fx-text-fill: -fx-light-text-color;
-}
-
 .chat-side-bar-user-profile.text-area {
     -fx-font-size: 1em;
     -fx-background-color: rgba(255, 255, 255, 0.05);

apps/desktop/desktop/src/main/resources/css/controls.css

@@ -889,6 +889,25 @@
     -fx-font-family: "IBM Plex Sans";
 }
 
+/*******************************************************************************
+ *                                                                             *
+ * Menu Item                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+.button.menu-item {
+    -fx-padding: 0;
+    -fx-border-width: 0;
+    -fx-background-color: transparent;
+    -fx-cursor: hand;
+    -fx-text-fill: -fx-mid-text-color;
+}
+
+.button.menu-item:hover {
+    -fx-background-color: transparent;
+    -fx-text-fill: -fx-light-text-color;
+}
+
 
 /*******************************************************************************
  *                                                                             *

apps/desktop/desktop/src/main/resources/css/images.css

@@ -857,6 +857,67 @@
     -fx-image: url("/images/chat/grey-small-dot.png");
 }
 
+#mention-green {
+    -fx-image: url("/images/chat/mention/mention-green.png");
+}
+
+#mention-grey {
+    -fx-image: url("/images/chat/mention/mention-grey.png");
+}
+
+#mention-white {
+    -fx-image: url("/images/chat/mention/mention-white.png");
+}
+
+#report-green {
+    -fx-image: url("/images/chat/report/report-green.png");
+}
+
+#report-grey {
+    -fx-image: url("/images/chat/report/report-grey.png");
+}
+
+#report-white {
+    -fx-image: url("/images/chat/report/report-white.png");
+}
+
+#ignore-green {
+    -fx-image: url("/images/chat/ignore/ignore-green.png");
+}
+
+#ignore-grey {
+    -fx-image: url("/images/chat/ignore/ignore-grey.png");
+}
+
+#ignore-white {
+    -fx-image: url("/images/chat/ignore/ignore-white.png");
+}
+
+#undo-ignore-green {
+    -fx-image: url("/images/chat/undo-ignore/undo-ignore-green.png");
+}
+
+#undo-ignore-grey {
+    -fx-image: url("/images/chat/undo-ignore/undo-ignore-grey.png");
+}
+
+#undo-ignore-white {
+    -fx-image: url("/images/chat/undo-ignore/undo-ignore-white.png");
+}
+
+#private-chat-green {
+    -fx-image: url("/images/chat/private-chat/private-chat-green.png");
+}
+
+#private-chat-grey {
+    -fx-image: url("/images/chat/private-chat/private-chat-grey.png");
+}
+
+#private-chat-white {
+    -fx-image: url("/images/chat/private-chat/private-chat-white.png");
+}
+
+
 /* ------------------------------------------------------------------------------------ */
 /* Markets */
 /* ------------------------------------------------------------------------------------ */

i18n/src/main/resources/chat.properties

@@ -155,24 +155,26 @@ chat.chatRules.content=\
   By participating in the chat, you agree to follow these rules.\n\
   Severe rule violations may lead to a ban from the Bisq network.
 
+
 ####################################################################
 # Sidebar / user profile
 ####################################################################
 
 chat.sideBar.userProfile.headline=User profile
-chat.sideBar.userProfile.nym=Bot ID: {0}
-chat.sideBar.userProfile.id=ID: {0}
-chat.sideBar.userProfile.sendPrivateMessage=Send private message
-chat.sideBar.userProfile.reputation=Reputation
+chat.sideBar.userProfile.nym=Bot id
+chat.sideBar.userProfile.id=User id
+chat.sideBar.userProfile.transportAddress=Transport address
 chat.sideBar.userProfile.totalReputationScore=Total reputation score
 chat.sideBar.userProfile.profileAge=Profile age
 chat.sideBar.userProfile.lastSeen=Last seen
+chat.sideBar.userProfile.statement=Statement
+chat.sideBar.userProfile.terms=Trade terms
+chat.sideBar.userProfile.sendPrivateMessage=Send private message
 chat.sideBar.userProfile.mention=Mention
 chat.sideBar.userProfile.ignore=Ignore
-chat.sideBar.userProfile.report=Report to moderator
 chat.sideBar.userProfile.undoIgnore=Undo ignore
-chat.sideBar.userProfile.statement=Statement
-chat.sideBar.userProfile.terms=Trade terms
+chat.sideBar.userProfile.report=Report to moderator
+
 
 ####################################################################
 # Sidebar / channel info