Skip to content

Commit

Permalink
Merge pull request #1586 from axpoems/imp-design-chats
Browse files Browse the repository at this point in the history 
Various improvements in chat design
  • Loading branch information
@alvasw
alvasw authored Jan 18, 2024
2 parents 9b9400a + a878ba8 commit 612f69e
Show file tree
Hide file tree
Showing 10 changed files with 181 additions and 130 deletions.
2 changes: 1 addition & 1 deletion .../desktop/desktop/src/main/java/bisq/desktop/components/controls/AutoCompleteComboBox.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ public AutoCompleteComboBox(ObservableList<T> items, String description, @Nullab
@Override
protected void updateItem(T item, boolean empty) {
super.updateItem(item, empty);

if (item != null && !empty) {
if (editor.getText() != null) {
skin.getMaterialTextField().update();
Expand All @@ -104,7 +105,6 @@ protected void updateItem(T item, boolean empty) {
} else {
editor.setText("");
}

}
});
setAutocompleteItems(items);
Expand Down
7 changes: 5 additions & 2 deletions apps/desktop/desktop/src/main/java/bisq/desktop/components/controls/BisqTextArea.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,10 @@ private void adjustHeight() {
} else {
selectorScrollPane.setVbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
}
setMinHeight(textHeight + INITIAL_HEIGHT);
setMaxHeight(textHeight + INITIAL_HEIGHT);
double newHeight = textHeight + INITIAL_HEIGHT;
setMinHeight(newHeight);

// Set max height dynamically or remove if not needed
setMaxHeight(Math.min(newHeight, 300)); // FIXME: max width not being applied
}
}
5 changes: 3 additions & 2 deletions ...op/src/main/java/bisq/desktop/main/content/bisq_easy/offerbook/BisqEasyOfferbookView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@

@Slf4j
public final class BisqEasyOfferbookView extends BaseChatView {
private static final double CHAT_BOX_MAX_WIDTH = 1440;
private static final double CHAT_BOX_MAX_WIDTH = 1200;
// private static double filterPaneHeight;

private final BisqEasyOfferbookModel bisqEasyOfferbookModel;
Expand Down Expand Up @@ -72,6 +72,7 @@ protected void configTitleHBox() {
titleHBox.getStyleClass().add("bisq-easy-container-header");
titleHBox.setMinHeight(HEADER_HEIGHT);
titleHBox.setMaxHeight(HEADER_HEIGHT);
titleHBox.setMaxWidth(CHAT_BOX_MAX_WIDTH);

channelTitle.getStyleClass().add("chat-header-title");
channelTitle.setCursor(Cursor.HAND);
Expand Down Expand Up @@ -114,7 +115,6 @@ protected void configTitleHBox() {
protected void configCenterVBox() {
centerVBox.setSpacing(0);
centerVBox.setFillWidth(true);
centerVBox.setMaxWidth(CHAT_BOX_MAX_WIDTH);

/* filterButton = new Button(Res.get("bisqEasy.topPane.filter"));
ImageView filterIcon = ImageUtil.getImageViewById("filter");
Expand Down Expand Up @@ -146,6 +146,7 @@ protected void configCenterVBox() {
VBox.setVgrow(chatMessagesComponent, Priority.ALWAYS);
centerVBox.getChildren().addAll(titleHBox, Layout.hLine(), chatMessagesComponent);
centerVBox.getStyleClass().add("bisq-easy-container");
centerVBox.setAlignment(Pos.CENTER);
}

@Override
Expand Down
7 changes: 4 additions & 3 deletions apps/desktop/desktop/src/main/java/bisq/desktop/main/content/chat/ChatView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
@Slf4j
public class ChatView<V extends ChatView<V, M>, M extends ChatModel> extends BaseChatView {
protected static final double SIDE_PADDING = 40;
protected static final double CHAT_BOX_MAX_WIDTH = 1440;
protected static final double CHAT_BOX_MAX_WIDTH = 1200;

public ChatView(ChatModel model,
ChatController<V, M> controller,
Expand All @@ -42,9 +42,10 @@ protected void configTitleHBox() {
@Override
protected void configCenterVBox() {
VBox.setVgrow(chatMessagesComponent, Priority.ALWAYS);
centerVBox.getStyleClass().add("bisq-easy-container");
centerVBox.setMaxWidth(CHAT_BOX_MAX_WIDTH);
titleHBox.setMaxWidth(CHAT_BOX_MAX_WIDTH);
centerVBox.getChildren().addAll(titleHBox, Layout.hLine(), chatMessagesComponent);
centerVBox.setAlignment(Pos.CENTER);
centerVBox.getStyleClass().add("bisq-easy-container");
centerVBox.setFillWidth(true);
}

Expand Down
3 changes: 2 additions & 1 deletion ...desktop/src/main/java/bisq/desktop/main/content/chat/common/pub/CommonPublicChatView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@
import javafx.scene.layout.Priority;

public final class CommonPublicChatView extends ChatView<CommonPublicChatView, CommonPublicChatModel> {
public CommonPublicChatView(ChatModel model, CommonPublicChatController controller, Pane chatMessagesComponent, Pane channelInfo) {
public CommonPublicChatView(ChatModel model, CommonPublicChatController controller,
Pane chatMessagesComponent, Pane channelInfo) {
super(model, controller, chatMessagesComponent, channelInfo);
}

Expand Down
4 changes: 3 additions & 1 deletion apps/desktop/desktop/src/main/java/bisq/desktop/main/content/chat/priv/PrivateChatsView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,14 +104,16 @@ private void addChatBox() {
chatHeaderHBox.setAlignment(Pos.CENTER_LEFT);
chatHeaderHBox.setPadding(new Insets(15, 30, 15, 30));
chatHeaderHBox.getStyleClass().add("bisq-easy-container-header");
chatHeaderHBox.setMaxWidth(CHAT_BOX_MAX_WIDTH);

VBox.setMargin(chatMessagesComponent, new Insets(0, 30, 15, 30));
VBox.setVgrow(chatMessagesComponent, Priority.ALWAYS);
VBox chatVBox = new VBox(chatHeaderHBox, Layout.hLine(), chatMessagesComponent);
chatVBox.getStyleClass().add("bisq-easy-container");
chatVBox.setAlignment(Pos.CENTER);

VBox.setVgrow(chatVBox, Priority.ALWAYS);
centerVBox.setMaxWidth(CHAT_BOX_MAX_WIDTH);
centerVBox.setAlignment(Pos.CENTER);
centerVBox.setFillWidth(true);
centerVBox.getChildren().add(chatVBox);
}
Expand Down
215 changes: 121 additions & 94 deletions ...top/desktop/src/main/java/bisq/desktop/main/content/components/ChatMessagesComponent.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@
import javafx.beans.binding.Bindings;
import javafx.beans.property.*;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
Expand Down Expand Up @@ -532,17 +531,18 @@ public void setSelectedAccount(Account<?, ? extends PaymentMethod<?>> selectedAc

@Slf4j
public static class View extends bisq.desktop.common.view.View<VBox, Model, Controller> {
private final static double CHAT_BOX_MAX_WIDTH = 1200;
public final static String EDITED_POST_FIX = " " + Res.get("chat.message.wasEdited");

private final BisqTextArea inputField;
private final Button sendButton;

private final ChatMentionPopupMenu<UserProfile> userMentionPopup;
private final ChatMentionPopupMenu<ChatChannel<?>> channelMentionPopup;
private final Pane userProfileSelectionRoot, messagesListView;
private final Button leaveChannelButton, createOfferButton;
private final VBox emptyMessageList;
private final ChangeListener<Number> createOfferButtonHeightListener;
private final BisqTextArea inputField = new BisqTextArea();
private final Button sendButton = new Button();
private final Pane messagesListView;
private final VBox emptyMessageList = new VBox();
private ChatMentionPopupMenu<UserProfile> userMentionPopup;
private ChatMentionPopupMenu<ChatChannel<?>> channelMentionPopup;
private ChangeListener<Number> createOfferButtonHeightListener;
private Pane userProfileSelectionRoot;
private Button leaveChannelButton, createOfferButton;

private View(Model model,
Controller controller,
Expand All @@ -552,94 +552,16 @@ private View(Model model,
super(new VBox(), model, controller);

this.messagesListView = messagesListView;

inputField = new BisqTextArea();
inputField.setPromptText(Res.get("chat.message.input.prompt"));
inputField.getStyleClass().addAll("chat-input-field", "normal-text");

sendButton = new Button("", ImageUtil.getImageViewById("chat-send"));
sendButton.setId("chat-messages-send-button");
sendButton.setPadding(new Insets(5));
sendButton.setMinWidth(31);
sendButton.setMaxWidth(31);
sendButton.setTooltip(new BisqTooltip(Res.get("chat.message.input.send"), true));

StackPane.setAlignment(inputField, Pos.CENTER_LEFT);
StackPane.setAlignment(sendButton, Pos.CENTER_RIGHT);
StackPane.setMargin(sendButton, new Insets(0, 5, 0, 0));
StackPane bottomBoxStackPane = new StackPane(inputField, sendButton);

userProfileSelection.setMaxComboBoxWidth(165);
userProfileSelection.setConverter(new StringConverter<>() {
@Override
public String toString(UserProfileSelection.ListItem item) {
return item != null ? StringUtils.truncate(item.getUserIdentity().getUserName(), 10) : "";
}

@Override
public UserProfileSelection.ListItem fromString(String string) {
return null;
}
});
userProfileSelectionRoot = userProfileSelection.getRoot();
userProfileSelectionRoot.setMaxHeight(44);
userProfileSelectionRoot.setMaxWidth(165);
userProfileSelectionRoot.setMinWidth(165);
userProfileSelectionRoot.setId("chat-user-profile-bg");

HBox.setHgrow(bottomBoxStackPane, Priority.ALWAYS);
HBox.setMargin(userProfileSelectionRoot, new Insets(0, -20, 0, -8));
HBox bottomHBox = new HBox(10);

leaveChannelButton = createAndGetChatButton(Res.get("chat.leave"), 120);
leaveChannelButton.getStyleClass().add("outlined-button");

Label noChatsPlaceholderTitle = new Label(Res.get("chat.private.messagebox.noChats.placeholder.title"));
noChatsPlaceholderTitle.getStyleClass().add("large-text");
noChatsPlaceholderTitle.setTextAlignment(TextAlignment.CENTER);

Label noChatsPlaceholderDescription = new Label(Res.get("chat.private.messagebox.noChats.placeholder.description"));
noChatsPlaceholderDescription.getStyleClass().add("normal-text");
noChatsPlaceholderDescription.setTextAlignment(TextAlignment.CENTER);

emptyMessageList = new VBox(10, noChatsPlaceholderTitle, noChatsPlaceholderDescription);
emptyMessageList.setAlignment(Pos.CENTER);
emptyMessageList.getStyleClass().add("chat-container-placeholder-text");
VBox.setVgrow(emptyMessageList, Priority.ALWAYS);

createOfferButton = new Button(Res.get("offer.createOffer"));
createOfferButton.getStyleClass().addAll("create-offer-button", "normal-text");
createOfferButton.setMinWidth(170);

bottomHBox.getChildren().addAll(createOfferButton, userProfileSelectionRoot, bottomBoxStackPane, leaveChannelButton);
bottomHBox.getStyleClass().add("bg-grey-5");
bottomHBox.setAlignment(Pos.CENTER);
bottomHBox.setPadding(new Insets(14, 25, 14, 25));

VBox.setVgrow(messagesListView, Priority.ALWAYS);
root.getChildren().addAll(emptyMessageList, messagesListView, quotedMessageBlock, bottomHBox);

userMentionPopup = new ChatMentionPopupMenu<>(inputField);
userMentionPopup.setItemDisplayConverter(UserProfile::getUserName);
userMentionPopup.setSelectionHandler(controller::listUserNamesHandler);
setUpEmptyMessageList();

channelMentionPopup = new ChatMentionPopupMenu<>(inputField);
channelMentionPopup.setItemDisplayConverter(model::getChannelTitle);
channelMentionPopup.setSelectionHandler(controller::listChannelsHandler);
VBox bottomBarContainer = createBottomBar(userProfileSelection);

createOfferButtonHeightListener = new ChangeListener<>() {
@Override
public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
if (newValue != null) {
createOfferButton.setMinHeight(inputField.getHeight());
createOfferButton.setMaxHeight(inputField.getHeight());
createOfferButton.setPrefHeight(inputField.getHeight());
} else {
UIThread.runOnNextRenderFrame(() -> inputField.heightProperty().removeListener(createOfferButtonHeightListener));
}
}
};
inputField.heightProperty().addListener(createOfferButtonHeightListener);
quotedMessageBlock.setMaxWidth(CHAT_BOX_MAX_WIDTH);

root.setAlignment(Pos.CENTER);
root.getChildren().addAll(messagesListView, emptyMessageList, quotedMessageBlock, bottomBarContainer);
}

@Override
Expand Down Expand Up @@ -704,6 +626,110 @@ protected void onViewDetached() {
createOfferButton.setOnAction(null);
}

private void setUpEmptyMessageList() {
Label noChatsPlaceholderTitle = new Label(Res.get("chat.private.messagebox.noChats.placeholder.title"));
noChatsPlaceholderTitle.getStyleClass().add("large-text");
noChatsPlaceholderTitle.setTextAlignment(TextAlignment.CENTER);

Label noChatsPlaceholderDescription = new Label(Res.get("chat.private.messagebox.noChats.placeholder.description"));
noChatsPlaceholderDescription.getStyleClass().add("normal-text");
noChatsPlaceholderDescription.setTextAlignment(TextAlignment.CENTER);

emptyMessageList.setSpacing(10);
emptyMessageList.getChildren().addAll(noChatsPlaceholderTitle, noChatsPlaceholderDescription);
emptyMessageList.setAlignment(Pos.CENTER);
emptyMessageList.getStyleClass().add("chat-container-placeholder-text");
VBox.setVgrow(emptyMessageList, Priority.ALWAYS);
}

private VBox createBottomBar(UserProfileSelection userProfileSelection) {
createOfferButton = createAndGetCreateOfferButton();
setUpUserProfileSelection(userProfileSelection);
HBox sendMessageBox = createSendMessageBox();

// TODO: Remove this. We need a better solution for this use-case.
leaveChannelButton = createAndGetChatButton(Res.get("chat.leave"), 120);

HBox bottomBar = new HBox(10);
bottomBar.getChildren().addAll(createOfferButton, userProfileSelectionRoot, sendMessageBox, leaveChannelButton);
bottomBar.setMaxWidth(CHAT_BOX_MAX_WIDTH);
bottomBar.setPadding(new Insets(14, 20, 14, 20));

VBox bottomBarContainer = new VBox(bottomBar);
bottomBarContainer.setAlignment(Pos.CENTER);
return bottomBarContainer;
}

private HBox createSendMessageBox() {
inputField.setPromptText(Res.get("chat.message.input.prompt"));
inputField.getStyleClass().addAll("chat-input-field", "normal-text");
inputField.setPadding(new Insets(5, 0, 5, 5));
HBox.setHgrow(inputField, Priority.ALWAYS);
setUpInputFieldAtMentions();

sendButton.setGraphic(ImageUtil.getImageViewById("chat-send"));
sendButton.setId("chat-messages-send-button");
sendButton.setPadding(new Insets(5, 5, 5, 0));
sendButton.setMinWidth(30);
sendButton.setMaxWidth(30);
sendButton.setTooltip(new BisqTooltip(Res.get("chat.message.input.send"), true));

HBox sendMessageBox = new HBox(inputField, sendButton);
sendMessageBox.getStyleClass().add("chat-send-message-box");
sendMessageBox.setAlignment(Pos.CENTER);
HBox.setHgrow(sendMessageBox, Priority.ALWAYS);
return sendMessageBox;
}

private void setUpInputFieldAtMentions() {
userMentionPopup = new ChatMentionPopupMenu<>(inputField);
userMentionPopup.setItemDisplayConverter(UserProfile::getUserName);
userMentionPopup.setSelectionHandler(controller::listUserNamesHandler);

channelMentionPopup = new ChatMentionPopupMenu<>(inputField);
channelMentionPopup.setItemDisplayConverter(model::getChannelTitle);
channelMentionPopup.setSelectionHandler(controller::listChannelsHandler);
}

private Button createAndGetCreateOfferButton() {
Button createOfferButton = new Button(Res.get("offer.createOffer"));
createOfferButton.getStyleClass().addAll("create-offer-button", "normal-text");
createOfferButton.setMinWidth(170);

createOfferButtonHeightListener = (observable, oldValue, newValue) -> {
if (newValue != null) {
createOfferButton.setMinHeight(inputField.getHeight());
createOfferButton.setMaxHeight(inputField.getHeight());
createOfferButton.setPrefHeight(inputField.getHeight());
} else {
UIThread.runOnNextRenderFrame(() -> inputField.heightProperty().removeListener(createOfferButtonHeightListener));
}
};
inputField.heightProperty().addListener(createOfferButtonHeightListener);
return createOfferButton;
}

private void setUpUserProfileSelection(UserProfileSelection userProfileSelection) {
userProfileSelection.setMaxComboBoxWidth(165);
userProfileSelection.setConverter(new StringConverter<>() {
@Override
public String toString(UserProfileSelection.ListItem item) {
return item != null ? StringUtils.truncate(item.getUserIdentity().getUserName(), 10) : "";
}

@Override
public UserProfileSelection.ListItem fromString(String string) {
return null;
}
});
userProfileSelectionRoot = userProfileSelection.getRoot();
userProfileSelectionRoot.setMaxHeight(44);
userProfileSelectionRoot.setMaxWidth(165);
userProfileSelectionRoot.setMinWidth(165);
userProfileSelectionRoot.setId("chat-user-profile-bg");
HBox.setMargin(userProfileSelectionRoot, new Insets(0, -20, 0, -8));
}

private void createChatDialogEnabledSubscription() {
inputField.disableProperty().bind(model.getChatDialogEnabled().not());
sendButton.disableProperty().bind(model.getChatDialogEnabled().not());
Expand All @@ -730,6 +756,7 @@ private static Button createAndGetChatButton(String title, double width) {
button.setStyle("-fx-label-padding: 0 -30 0 -30; -fx-background-radius: 8; -fx-border-radius: 8;");
button.setMinHeight(34);
button.setMinWidth(width);
button.getStyleClass().add("outlined-button");
return button;
}
}
Loading

0 comments on commit 612f69e

Please sign in to comment.