Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

messages: Adding prefix symbols to search bar. #1441

Merged
merged 2 commits into from
Dec 8, 2023

Conversation

supascooopa
Copy link
Collaborator

@supascooopa supascooopa commented Nov 10, 2023

As previously done to other parts of the UI, this commit adds prefix symbols to the narrow bar before the search input area.

This is intended to make the UI more similar to the web app UI and unify the overall look.

This is applied to both streams, topics and main narrows.

Tests adjusted accordingly.

What does this PR do, and why?

This PR adds prefix symbols to the narrow titles before the search bar. This is done in order to approximate the current UI to the web app and to unify the overall look of the UI.

External discussion & connections

How did you test this?

  • Manually - Behavioral changes
  • Manually - Visual changes
  • Adapting existing automated tests
  • Adding automated tests for new behavior (or missing tests)
  • Existing automated tests should already cover this (only a refactor of tested code)

Self-review checklist for each commit

  • It is a minimal coherent idea
  • It has a commit summary following the documented style (title & body)
  • It has a commit summary describing the motivation and reasoning for the change
  • It individually passes linting and tests
  • It contains test additions for any new behavior
  • It flows clearly from a previous branch commit, and/or prepares for the next commit

Visual changes

Before:
image

After:
image

@zulipbot zulipbot added the size: L [Automatic label added by zulipbot] label Nov 10, 2023
Copy link
Collaborator

@neiljp neiljp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@supascooopa Thanks for the followup 👍

This looks to work well and cover most narrows, except the DM subsets I refer to inline - did you intend to not cover these?

The leading space looks good, but I think it would be useful to borrow a space from that currently used to separate the narrow text from the Search [/]: (currently 2?). We can color it per the narrow to make it look a little more balanced, less abrupt after the end of the narrow name, and more similar to the spacing after the stream-topic separator. That will involve touching a different part of the code, so I'd suggest that be a separate commit after (or before) the current one.

zulipterminal/ui_tools/messages.py Outdated Show resolved Hide resolved
zulipterminal/ui_tools/messages.py Outdated Show resolved Hide resolved
(bar_color, self.stream_name),
(bar_color, ": topic narrow"),
],
)
else:
text_to_fill = (
"bar", # type: ignore[assignment]
[(bar_color, self.stream_name)],
[(bar_color, f" {stream_icon} "), (bar_color, self.stream_name)],
)
elif len(curr_narrow) == 1 and len(curr_narrow[0][1].split(",")) > 1:
text_to_fill = "Group direct message conversation"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed this wasn't updated during testing? I know we discussed different symbols, but for now I think we should have a symbol for all the narrows we support - otherwise it looks inconsistent.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not %100 sure what you mean. Would you please elaborate more? If you mean using "#" sign for the search bar part of the testing, I could add a different symbol to represent all the narrows. Do you have any suggestions?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this what you meant by the testing update you mentioned in the stream? This comment was regarding how the 'Group direct message conversation' has no prefix, as well as one other DM-related one also.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I got confused because of the changed code highlights. I thought you were referring to the changes I made that were highlighted and not updating tests accordingly. I thought I was missing something, but I understand now.

Like I mentioned in the stream, I was just unclear about which symbol we landed on last regarding the DMs, but I'm sure now and I'll make the necessary additions soon.

@neiljp neiljp added the area: UI General user interface update label Nov 11, 2023
@neiljp neiljp added this to the Next Release milestone Nov 11, 2023
@supascooopa
Copy link
Collaborator Author

@neiljp Thank you for the feedback! I will look into all the suggestions you've made.
I'm not sure what symbol we had decided on to be used for the DMs. U+2318? I remember discussing using multiple symbols and deciding on just using one in order to simplify the process.

@neiljp neiljp added the PR awaiting update PR has been reviewed & is awaiting update or response to reviewer feedback label Nov 30, 2023
As previously done to other parts of the UI, this commit adds prefix symbols
to the narrow title (before the message search input area).

This is applied to all supported narrows:
- all messages
- all direct messages
- mentions
- starred messages
- single stream
- single topic
- direct message conversations (1:1 and group)

The spacing around the prefixes is laid out to be similar to that for
message headings, so that the icons line up cleanly.

This is intended to make the UI more similar to the web app UI and unify
the overall look.

Tests adjusted accordingly.
The colored background area of stream message headings are already
visually balanced with a leading and trailing space. The narrow title
prefixes added in the previous commit contain a leading space to align
the prefixes with those in message headings; this commit adds a trailing
space, which balances the colored area in a similar way to the stream
message headings and avoids an abrupt end to the narrow text.

The existing spacing between the narrow title and message search text is
maintained by removing one of the two spaces between the `Search [/]:`
and the narrow title with a general background color, and substituting
it with an additional space at the end of each narrow title.

Tests adjusted accordingly.
@neiljp neiljp added PR ready to be merged PR has been reviewed & is ready to be merged and removed PR awaiting update PR has been reviewed & is awaiting update or response to reviewer feedback labels Dec 8, 2023
@neiljp neiljp merged commit 972a30c into zulip:main Dec 8, 2023
19 checks passed
@neiljp
Copy link
Collaborator

neiljp commented Dec 8, 2023

@supascooopa Thanks for this - it's looking good! 🎉

As per my note in the stream, I squashed a couple of commits and adjusted the messages to fit our style and expand upon the intention. Note how I using 'Show' instead of 'Showing'.

@supascooopa supascooopa deleted the adding_prefix_symbols branch December 8, 2023 19:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: UI General user interface update PR ready to be merged PR has been reviewed & is ready to be merged size: L [Automatic label added by zulipbot]
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants