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

fix(NcRichContenteditable): adjust to new design #5992

Merged
merged 1 commit into from
Aug 20, 2024

Conversation

ShGKme
Copy link
Contributor

@ShGKme ShGKme commented Aug 20, 2024

☑️ Resolves

🚧 Tasks

  • Use new and correct border-radious variables with old values as a fallback
  • Adjust paddings to remove double paddings
    • Paddings adjustments also applies for 28+29 intentionally (previously there were double paddings)
  • Add box-sizing: border-box so it doesn't break if mounted to body
  • Change style of autocomplete using 1.2 line-height to fix cutting issue
    • Also applies for 28 + 29, but not a visible change

Note, it has some copy-paste from NcAvatar and NcListItem. We can look at reuse in a follow-up

🖼️ Screenshots

🏚️ Before 30 🏡 After 30
image image
image image
image image
🏚️ Before 28 🏡 After 28
image image
image image
image image

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable
  • 3️⃣ Backport to next requested with a Vue 3 upgrade

@ShGKme ShGKme added bug Something isn't working 2. developing Work in progress design Design, UX, interface and interaction design feature: rich-contenteditable Related to the rich-contenteditable components labels Aug 20, 2024
@ShGKme ShGKme added this to the 8.17.0 milestone Aug 20, 2024
@ShGKme ShGKme self-assigned this Aug 20, 2024
@ShGKme
Copy link
Contributor Author

ShGKme commented Aug 20, 2024

Requires some more fixes to prevent changes in 28

@ShGKme ShGKme mentioned this pull request Aug 20, 2024
@ShGKme ShGKme force-pushed the fix/NcRichContenteditable--adjust-design branch from 830e1b5 to 0b1316f Compare August 20, 2024 16:44
@ShGKme ShGKme added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Aug 20, 2024
@ShGKme ShGKme marked this pull request as ready for review August 20, 2024 16:45
Comment on lines 132 to 134
--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);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

image

Copy link
Contributor Author

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.

Copy link
Contributor

@Antreesy Antreesy left a 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>
@ShGKme ShGKme force-pushed the fix/NcRichContenteditable--adjust-design branch from 0b1316f to 3b0dc0f Compare August 20, 2024 17:12
@ShGKme ShGKme requested a review from susnux August 20, 2024 17:18
@ShGKme
Copy link
Contributor Author

ShGKme commented Aug 20, 2024

/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
Copy link
Contributor

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);
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
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);
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
padding-right: var(--default-grid-baseline);
padding-inline-end: var(--default-grid-baseline);

Copy link
Contributor

@susnux susnux left a 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

@susnux susnux merged commit 71a99df into master Aug 20, 2024
19 checks passed
@susnux susnux deleted the fix/NcRichContenteditable--adjust-design branch August 20, 2024 20:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews bug Something isn't working design Design, UX, interface and interaction design feature: rich-contenteditable Related to the rich-contenteditable components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[NcRichContenteditable] Adjust autocomplete to new design
3 participants