[18.1][IMP] mail: several minor discuss style improvements #195364
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
alexkuhn
changed the title
Was slightly too close to the avatar, which didn't look good. The 1px was to not touch the border, but it's best to touch the border than being slightly to close to avatar. The border is not even visible most of the time. The unread indicator of sub-threads was slightly too far away, this commit moves it closer.
The lines from channel to its pinned threads in discuss sidebar was too visible compared to unread indicators and conversation names. This commit reduces slightly the opacity to keep it visible while not as distracting.
This was too visible for an option button that is rarely used. By reducing it's default opacity, the hover effect is significantly more visible.
The lack of opacity could give a wrong 1st impression there's something on the thread component. Reduced opacity helps giving a better grasp this is empty, the message and icon is there for clarity.
They were slightly too visible compared to important content. Their opacity has been reduced slightly, which has the side-effect to make the hover effect more pronunced. Also remove the slight border on the hover effect: this didn't really look good, and the more pronunced hover effect makes it clearer when the button is hovered.
- spacing between participants is slightly reduced - name of participant has reduced weight (fw-bolder -> fw-bold) - call outline in sidebar and systray call menu reduced (2px -> 1px) - call participant status slightly reduced opacity, so they do not look too visible compared to participant names - conversation in call background color more visible in white theme, less in dark theme - conversation in call icon has slightly reduced opacity - call icon uses same green outline rather than red while self user is in call
So they visually match the messaging menu badge, and are less distracting. The single digit counter is kept mostly rounded so it stays visually pleasing.
`bg-view` is used a lot in views. So bg-view on bg-view makes it hard to see. `bg-100` is barely different in white theme, but in dark theme this makes it more easy to see.
bg-view is too light grey, making it exhausting to read menu items. bg-100 is barely noticeable in white theme, and is darker and better in dark theme. Also make similar improvement to chat bubble message preview.
They were too visible, which looks off as they are close to discuss header borders, due to narrow in height of the header. White theme has no border color as bg color is enough. In dark theme, keeping border but reduced so it's distinguishable without making buttons too visible.
Also reduced slightly hover bg effect of white theme. This keeps icon visible while hovering. Also backport partially send button effect when it becomes visible.
Notification items are slightly unbalanced on left to give room for the unread indicator. This commit reduces the spacing further and improve the placement of indicator. The mobile indicator position is slightly improved to be less close to the avatar.
The old computation was not taking into account added margins.
…f in call The color of active item was different when self in call, as to fight against the bg color of container. The drawback of this was that color is inconsistent with other active items. Now that the bg color of self color is more subtle, this specific color can be removed and thus all active item have same bg color.
Slightly reduced opacity, removed border except the left which gives the color bubble of reply.
Offline im status are less important that online. Without opacity, they were as distracting as online status. Slight reduced opacity keeps them easy to see while less highlighted than avatar and other im status.
Default size is 'lg', which makes icon too large, especially when the online / offline overall status can be deduced by the categories "Online" and "Offline".
In compact mode, sub thread have effectively 4 chars to display, but with ellipsis of `text-truncate` this became 1. By removing the ellipsis, there are 4 chars, which is easier to pick the right sub thread.
Opacity change from 50% to 100% was barely visible. This commit makes plain black (and white in dark theme) color on active/hover, so that the hover effect is more visible, while keeping same 50% opacity on message hover.
Improves using composer actions with the following style tweaks: - bigger icon size - more distinct hover effect on icon, subtle bg hover for white theme - adapt spacing to preserve same width size as before - placeholder and actions have slightly reduced visibility when composer is not focused Also fix minor issues, like send button should not be visible in composer of message edition.
- bigger quick action icon size - hover effect change icon opacity, very subtle bg hover effect for white theme - opacity of quick action when not hovered is reduced - conversation name text is bigger - conversation name color change subtly on hover when there's action menu - channel thread in chat window have text "parent > thread" aligned
Small border around message in card mode to make them more distinct visually.
Gives a better feeling when mouse-hovering discuss sidebar, to tell which item is hovered. Can reduce the bg color in dark theme, so this looks nicer overall.
These button start or join a call, which is high level commitment compared to other thread action buttons. In chat, notably, they even start a ringtone to other members. This commit makes green color of hover effect more apparent, and also adds a subtle border around to give better vibes that this button has consequences.
Dark theme popover bg color uses bg-view, which is too light grey, making it hard to read. bg-100 is much better, while barely different in white theme.
This is destructive action. Even though there's a dialog, it's good to give clarity on what this action do based on its style on a very quick glance.
robodoo
pushed a commit
that referenced
this pull request
Jan 28, 2025
Gives a better feeling when mouse-hovering discuss sidebar, to tell which item is hovered. Can reduce the bg color in dark theme, so this looks nicer overall. Part-of: #195364 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
robodoo
pushed a commit
that referenced
this pull request
Jan 28, 2025
These button start or join a call, which is high level commitment compared to other thread action buttons. In chat, notably, they even start a ringtone to other members. This commit makes green color of hover effect more apparent, and also adds a subtle border around to give better vibes that this button has consequences. Part-of: #195364 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
robodoo
pushed a commit
that referenced
this pull request
Jan 28, 2025
Dark theme popover bg color uses bg-view, which is too light grey, making it hard to read. bg-100 is much better, while barely different in white theme. Part-of: #195364 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
robodoo
pushed a commit
that referenced
this pull request
Jan 28, 2025
This is destructive action. Even though there's a dialog, it's good to give clarity on what this action do based on its style on a very quick glance. Part-of: #195364 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
robodoo
pushed a commit
that referenced
this pull request
Jan 28, 2025
This reduces the opacity of non-active category in the bottom navbar of emoji picker, so that the active category is much more visible. Also the reduced opacity gives a better separation between emoji list and category navbar. Part-of: #195364 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
robodoo
pushed a commit
that referenced
this pull request
Jan 28, 2025
This was reduced to improve visibility of more important UI element like message list of channel members in member list. With the several tweaks here-and-there, the name opacity is too low, so this commit bumps it. The icon keeps its low opacity. It looks better for icon being slightly less visible than name, so there's no confusion to mistake the icon with name at a glance. Part-of: #195364 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
robodoo
pushed a commit
that referenced
this pull request
Jan 28, 2025
Makes it easier to see the active conversation at hand Part-of: #195364 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
robodoo
pushed a commit
that referenced
this pull request
Jan 28, 2025
This was too strong, to the point that when there's unread messages the indicator was barely visible. The outline is reduced to be still visible but subtle to let other UI elements be visible too. Part-of: #195364 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
robodoo
pushed a commit
that referenced
this pull request
Jan 28, 2025
1. less distracting invitation link in invite people panel Border was too harsh, and link input content is not that relevant: people usually copy-paste with button and that's it. This reduces the visibility so the more relevant content is more visible. 2. input has darker bg in dark theme Search input was hard to see, and was inconsistent with other search inputs that are black. Part-of: #195364 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
robodoo
pushed a commit
that referenced
this pull request
Jan 28, 2025
This was too light in dark theme, which is inconsistent with other search view. closes #195364 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
C3POdoo
requested review from
a team,
BastienFafchamps and
aab-odoo
and removed request for
a team
alexkuhn
added a commit
to odoo-dev/odoo
that referenced
this pull request
Jan 28, 2025
Follow-up of odoo#195364 PR above made several small UI adjustments, from similar PR made in 18.0. One of the change was to fix avatar alignment with composer. However the alignment fix made sense in 18.0 but not in 18.1. This commit reverts this part of the improvements, so that the alignment is correct.
robodoo
pushed a commit
that referenced
this pull request
Jan 28, 2025
Follow-up of #195364 PR above made several small UI adjustments, from similar PR made in 18.0. One of the change was to fix avatar alignment with composer. However the alignment fix made sense in 18.0 but not in 18.1. This commit reverts this part of the improvements, so that the alignment is correct. closes #195435 Signed-off-by: Matthieu Stockbauer (tsm) <tsm@odoo.com>
robodoo
pushed a commit
that referenced
this pull request
Jan 28, 2025
Follow-up of #195364 PR above made several small UI adjustments, from similar PR made in 18.0. One of the change was to fix avatar alignment with composer. However the alignment fix made sense in 18.0 but not in 18.1. This commit reverts this part of the improvements, so that the alignment is correct. closes #195435 Signed-off-by: Matthieu Stockbauer (tsm) <tsm@odoo.com>
fw-bot
pushed a commit
to odoo-dev/odoo
that referenced
this pull request
Jan 28, 2025
Follow-up of odoo#195364 PR above made several small UI adjustments, from similar PR made in 18.0. One of the change was to fix avatar alignment with composer. However the alignment fix made sense in 18.0 but not in 18.1. This commit reverts this part of the improvements, so that the alignment is correct. X-original-commit: 0a20a7c
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.