-
Notifications
You must be signed in to change notification settings - Fork 90
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
fix(NcRichContenteditable): adjust to new design #5992
Conversation
Requires some more fixes to prevent changes in 28 |
830e1b5
to
0b1316f
Compare
--auto-complete-result-status-icon-size: clamp(14px, var(--auto-complete-result-avatar-size) * 0.4, 18px); | ||
// 2 * Avatar Radius * (1 - 1 / sqrt(2)) - Status Icon Size / 2 | ||
--auto-complete-result-status-icon-position: calc(var(--auto-complete-result-avatar-size) / 2 * (1 - 1 / sqrt(2)) - var(--auto-complete-result-status-icon-size) / 2); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If it goes well, I'll try to adapt it to NcAvatar and then use NcAvatar here to not duplicate it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested with Talk
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
0b1316f
to
3b0dc0f
Compare
/backport to next |
@@ -127,21 +129,22 @@ export default { | |||
} | |||
|
|||
&__status { | |||
--auto-complete-result-status-icon-size: clamp(14px, var(--auto-complete-result-avatar-size) * 0.4, 18px); | |||
// Avatar Radius * (1 - 1 / sqrt(2)) - Status Icon Radius / 2 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fancy
min-height: 18px; | ||
width: 18px; | ||
height: 18px; | ||
right: var(--auto-complete-result-status-icon-position); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
right: var(--auto-complete-result-status-icon-position); | |
inset-inline-end var(--auto-complete-result-status-icon-position); |
@@ -1246,7 +1247,7 @@ export default { | |||
width: 20px; | |||
height: 20px; | |||
object-fit: contain; | |||
padding-right: calc(var(--default-grid-baseline) * 2); | |||
padding-right: var(--default-grid-baseline); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
padding-right: var(--default-grid-baseline); | |
padding-inline-end: var(--default-grid-baseline); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice, just some comments to make like easier in the NC31 cycle
☑️ Resolves
🚧 Tasks
box-sizing: border-box
so it doesn't break if mounted to bodyNote, it has some copy-paste from
NcAvatar
andNcListItem
. We can look at reuse in a follow-up🖼️ Screenshots
🏁 Checklist
next
requested with a Vue 3 upgrade