Add horizontal spacing between the icon and text in the custom icon list #2352

SPWwj · 2023-08-05T15:41:55Z

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

Nil

What is the area that this feature belongs to?

Author Usability, Reader Usability, Syntax

Is your feature request related to a problem? Please describe.

From the PR discussion here:

A feature is needed to let users adjust spacing between customized icons and content, accommodating diverse user preferences.

Describe the solution you'd like

Some ideas:

Introduce an i-spacing attribute to customize the spacing between an icon and its associated list content.

Example Usage:

* Item 1 {icon="/images/deer.jpg" i-width="60px" i-spacing="0.35em"}
* Item 2 { i-spacing="0.55em"}
* Item 3 { i-spacing="0.75em"}

Sample output:

Describe alternatives you've considered

No response

Additional context

No response

The text was updated successfully, but these errors were encountered:

Ashleeey1224 · 2023-10-16T22:28:26Z

hi, currently I'm learning how to do first PR for a open resource repo, may I take this issue to work on?
Thank you:)

Ashleeey1224 · 2023-10-18T01:39:07Z

I'm going to work on this issue, thxx

SPWwj · 2023-10-18T04:12:26Z

@Ashleeey1224 You may refer to this to speed up the developement process of this feature:

https://github.com/SPWwj/Spirify-Ui/blob/master/src/components/markdown/ListPlugin.ts
https://github.com/SPWwj/Spirify-Ui/blob/master/src/components/markdown/ListPlugin.scss

Ashleeey1224 · 2023-10-18T04:27:01Z

Hi SPWwj, Thank you for your support! I really appreciate! Have a good day. Cheers, Ashley Yang On 18 Oct 2023, at 3:12 pm, SPWwj ***@***.***> wrote: @Ashleeey1224<https://github.com/Ashleeey1224> You may refer to this to speed up the developement process of this feature: https://github.com/SPWwj/Spirify-Ui/blob/master/src/components/markdown/ListPlugin.ts https://github.com/SPWwj/Spirify-Ui/blob/master/src/components/markdown/ListPlugin.scss — Reply to this email directly, view it on GitHub<#2352 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AZGC6ED3DUFJYIAPV3IO2PLX75JLJAVCNFSM6AAAAAA3FJD65CVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONRXGYYDOOJVGU>. You are receiving this because you were mentioned.Message ID: ***@***.***>

Ashleeey1224 · 2023-10-19T11:09:34Z

Several Questions wanna ask:

Is the icon considered as "emoji" and "image"? or only image?
Where I should put image file: If I want to test image, where I should put? Based on the sample output and previous PR, the relative path is "/images/deer.jpg". And I also found images file under docs
When I try to load image from "/docs/images", console shows:

 warn: You might have an invalid intra-link! Ignore this warning if it was intended.
'/contents/docs/images/deer.jpg' found in file '/Users/Sammy/Desktop/markbind/contents/topic1.md'

Is it appropriate?

Thaxx for reply :D

Ashleeey1224 · 2023-10-24T23:56:27Z

Hi, I think I figure it out, may I open a PR?

* Add a new list item attribute called: i-spacing; * It allows user to manually change the spacing between icon and text; * Issue MarkBind#2352

SPWwj · 2023-10-27T15:03:43Z

Hi, I think I figure it out, may I open a PR?
@tlylt any comments?

Ashleeey1224 · 2023-10-28T02:09:21Z

If it is okay, may I open a draft pr and get some feedback first?

tlylt · 2023-10-28T08:05:31Z

If it is okay, may I open a draft pr and get some feedback first?

Sure, @Ashleeey1224. I haven’t got the chance to understand the context here, but please feel free to raise a PR, will take a look afterwards.

- Allow users to modify icon's size, width, height, and class for customizing icon attributes while also providing the option to adjust spacing between the icon and text for enhanced user experience. - Added "i-spacing" attribute to ICON_ATTRIBUTES and interface IconAttributes in CustomListIconProcessor.ts. - Implemented logic to check whether the user has defined the i-spacing attribute or not. - Updated createIconSpan function to incorporate i-spacing attribute. - Updated getIconAttributes function to retrieve i-spacing attribute. - This consolidation of attributes maintains code consistency and cleanliness. And it ensures that NodeProcessor.ts can easily access and utilize these attributes without additional complexity. - Refer issue: MarkBind#2352, MarkBind#2316.

- Allow users to modify icon's size, width, height, and class for customizing icon attributes while also providing the option to adjust spacing between the icon and text for enhanced user experience. - Add "i-spacing" attribute to ICON_ATTRIBUTES and interface IconAttributes in CustomListIconProcessor.ts. - Implement logic to check whether the user has defined the i-spacing attribute or not. - Update createIconSpan function to incorporate i-spacing attribute. - Update getIconAttributes function to retrieve i-spacing attribute. - It maintains code consistency and cleanliness. - Refer issue: MarkBind#2352, MarkBind#2316.

… into MarkBind#2352-i-spacing-feature

- Allow users to modify icon's size, width, height, and class for customizing icon attributes while also providing the option to adjust spacing between the icon and text for enhanced user experience. - Add "i-spacing" attribute to ICON_ATTRIBUTES and interface IconAttributes in CustomListIconProcessor.ts. - Implement logic to check whether the user has defined the i-spacing attribute or not. - Update createIconSpan function to incorporate i-spacing attribute. - Update getIconAttributes function to retrieve i-spacing attribute. - This consolidation of attributes maintains code consistency and cleanliness. - Refer issues: MarkBind#2352, MarkBind#2316.

tlylt · 2023-11-13T00:43:20Z

@SPWwj, looking at your referenced PR discussion, it seems like it wasn't simply adding a feature to let users configure the horizontal space, but rather:

is the default spacing currently provided OK for most cases?
if not, should we either
- investigate a way to "automatically scale horizontal spacing between icon and content" quoting @ang-zeyu verbatim
- or
- add a simple way for users to adjust the spacing directly (should be what you prefer (?) I suppose)

Could you help me verify if you recall the discussion?

tlylt · 2023-11-13T00:45:35Z

@damithc quick question: Per #2316 (comment)
Have you needed to adjust the spacing, or was it OK for your usage so far?

SPWwj · 2023-11-13T01:37:39Z

Could you help me verify if you recall the discussion?

Hi @tlylt, from @ang-zeyu's feedback, the icon spacing seems a bit too tight for his preference. He suggests implementing an i-spacing configuration for greater flexibility or spacing automatically according to width of the icon, up to a certain maximum for less flexibility.

Would it be better if we have some sample screenshots showing the different icon spacing on different screens? This would help us determine the optimal display. What are your thoughts, @Ashleeey1224 and @tlylt?

tlylt · 2023-11-13T02:30:49Z

Would it be better if we have some sample screenshots showing the different icon spacing on different screens? This would help us determine the optimal display. What are your thoughts, @Ashleeey1224 and @tlylt?

Yes would be nice to see them to compare the approaches. @Ashleeey1224 would you be able to help?

damithc · 2023-11-13T09:05:35Z

@damithc quick question: Per #2316 (comment)
Have you needed to adjust the spacing, or was it OK for your usage so far?

@tlylt Not specifically, but I'm fine to provide this flexibility to authors. It may be useful in some situations.

kaixin-hc · 2024-02-07T11:35:45Z

To clarify the concern behind why the PR was closed, it was regarding whether the spacing should be automatic (based on width of the icon) or able to be manually modified (as in the PR).

I feel adding the manual modification is okay because it still has a default value, so the work to the average user is minimal - while implementing automatic spacing could lead to some sort of edge case. We could also do changes to this incrementally - merge manual spacing first, and if it makes sense to implement additional automatic spacing, that can be done in another PR afterwards.

…hleeey1224/MarkBind#2352-i-spacing-feature

…rkBind#2352-i-spacing-feature

SPWwj added c.Feature 🚀 pr.Enhancement 📈 Enhancement to an existing feature labels Aug 5, 2023

Ashleeey1224 added a commit to Ashleeey1224/markbind that referenced this issue Oct 25, 2023

Update CustomListIconProcessor.ts

c902ed9

* Add a new list item attribute called: i-spacing; * It allows user to manually change the spacing between icon and text; * Issue MarkBind#2352

Ashleeey1224 added a commit to Ashleeey1224/markbind that referenced this issue Oct 25, 2023

Merge branch 'MarkBind:master' into MarkBind#2352-i-spacing-feature

1d85b9d

Ashleeey1224 added a commit to Ashleeey1224/markbind that referenced this issue Oct 28, 2023

Merge remote-tracking branch 'origin/MarkBind#2352-i-spacing-feature'…

1c89be5

… into MarkBind#2352-i-spacing-feature

Ashleeey1224 mentioned this issue Oct 28, 2023

Add horizontal spacing between the icon and text in the custom icon list #2352 #2375

Merged

11 tasks

kaixin-hc added the d.easy label Feb 25, 2024

yucheng11122017 added a commit to Ashleeey1224/markbind that referenced this issue Mar 8, 2024

Merge branch 'master' of https://github.com/MarkBind/markbind into As…

9b28854

…hleeey1224/MarkBind#2352-i-spacing-feature

yucheng11122017 added a commit to Ashleeey1224/markbind that referenced this issue Mar 10, 2024

Merge branch 'master' of https://github.com/MarkBind/markbind into Ma…

5506dbb

…rkBind#2352-i-spacing-feature

yucheng11122017 closed this as completed in #2375 Mar 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add horizontal spacing between the icon and text in the custom icon list #2352

Add horizontal spacing between the icon and text in the custom icon list #2352

SPWwj commented Aug 5, 2023

Ashleeey1224 commented Oct 16, 2023

Ashleeey1224 commented Oct 18, 2023

SPWwj commented Oct 18, 2023

Ashleeey1224 commented Oct 18, 2023 via email

Ashleeey1224 commented Oct 19, 2023 •

edited

Ashleeey1224 commented Oct 24, 2023

SPWwj commented Oct 27, 2023

Ashleeey1224 commented Oct 28, 2023

tlylt commented Oct 28, 2023

tlylt commented Nov 13, 2023

tlylt commented Nov 13, 2023

SPWwj commented Nov 13, 2023

tlylt commented Nov 13, 2023

damithc commented Nov 13, 2023

kaixin-hc commented Feb 7, 2024

Add horizontal spacing between the icon and text in the custom icon list #2352

Add horizontal spacing between the icon and text in the custom icon list #2352

Comments

SPWwj commented Aug 5, 2023

Please confirm that you have searched existing issues in the repo

Any related issues?

What is the area that this feature belongs to?

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Example Usage:

Describe alternatives you've considered

Additional context

Ashleeey1224 commented Oct 16, 2023

Ashleeey1224 commented Oct 18, 2023

SPWwj commented Oct 18, 2023

Ashleeey1224 commented Oct 18, 2023 via email

Ashleeey1224 commented Oct 19, 2023 • edited

Ashleeey1224 commented Oct 24, 2023

SPWwj commented Oct 27, 2023

Ashleeey1224 commented Oct 28, 2023

tlylt commented Oct 28, 2023

tlylt commented Nov 13, 2023

tlylt commented Nov 13, 2023

SPWwj commented Nov 13, 2023

tlylt commented Nov 13, 2023

damithc commented Nov 13, 2023

kaixin-hc commented Feb 7, 2024

Ashleeey1224 commented Oct 19, 2023 •

edited