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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 7 commits into from
Mar 12, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0c854da
Add i-spacing attribute to CustomListIconProcessor.ts
Ashleeey1224 Oct 28, 2023
9b28854
Merge branch 'master' of https://github.com/MarkBind/markbind into As…
yucheng11122017 Mar 8, 2024
e0690fe
remove unecessary comments
yucheng11122017 Mar 8, 2024
e6c2d85
add documentation for i-spacing
yucheng11122017 Mar 8, 2024
b7852ea
add functional test cases
yucheng11122017 Mar 8, 2024
5506dbb
Merge branch 'master' of https://github.com/MarkBind/markbind into #2…
yucheng11122017 Mar 10, 2024
624d093
rename iSpacing to iconSpacing
yucheng11122017 Mar 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion docs/userGuide/syntax/lists.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,20 @@ If either the `i-width` or the `i-height` of an image is not specified, the unsp
</variable>
</include>

**The spacing between the icon and the content can be customized by using a `i-spacing` attribute.**

<include src="codeAndOutput.md" boilerplate >
<variable name="highlightStyle">markdown</variable>
<variable name="code">
* Item 1 { icon="+1" }
* Item 2 { i-spacing="1rem" }
* Item 3 { i-spacing="2rem" }
</variable>
</include>

<box type=tip seamless>

Similar to the `icon` attribute, other icon attributes such as `i-class`, `i-width`, `i-height` apply for subsequent list items at the same level, until they are overridden by the same attribute. For example, Item 2.3's `i-class` overrides Item 2.1's and applies up to Item 3.1.
Similar to the `icon` attribute, other icon attributes such as `i-class`, `i-width`, `i-height`, `i-spacing` apply for subsequent list items at the same level, until they are overridden by the same attribute. For example, Item 2.3's `i-class` overrides Item 2.1's and applies up to Item 3.1.
yucheng11122017 marked this conversation as resolved.
Show resolved Hide resolved
</box>

</div>
Expand Down
6 changes: 3 additions & 3 deletions packages/cli/test/functional/test_site/expected/testList.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,10 +378,10 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
<li style="display: flex;"><span aria-hidden="true" class="fas fa-file-code" style="font-size: 30px; min-width: 16px; line-height: unset; margin-inline-end: 0.35em; align-self: flex-start; flex-shrink: 0;">​</span>
<div>Sub-item B1</div>
</li>
<li style="display: flex;"><span aria-hidden="true" class="fas fa-file-code text-success" style="font-size: 30px; min-width: 16px; line-height: unset; margin-inline-end: 0.35em; align-self: flex-start; flex-shrink: 0;">​</span>
<li style="display: flex;"><span aria-hidden="true" class="fas fa-file-code text-success" style="font-size: 30px; min-width: 16px; line-height: unset; margin-inline-end: 2rem; align-self: flex-start; flex-shrink: 0;">​</span>
<div>Sub-item B2</div>
</li>
<li style="display: flex;"><span aria-hidden="true" class="fas fa-file-code text-success" style="font-size: 30px; min-width: 16px; line-height: unset; margin-inline-end: 0.35em; align-self: flex-start; flex-shrink: 0;">​</span>
<li style="display: flex;"><span aria-hidden="true" class="fas fa-file-code text-success" style="font-size: 30px; min-width: 16px; line-height: unset; margin-inline-end: 2rem; align-self: flex-start; flex-shrink: 0;">​</span>
<div>Sub-item B3
<ul style="list-style-type: none; padding-inline-start: 0px;">
<li style="display: flex;"><span style="padding-bottom: 0.3em; padding-top: 0.3em; font-size: unset; min-width: 16px; line-height: unset; margin-inline-end: 0.35em; align-self: flex-start; flex-shrink: 0;"><img src="/test_site/images/deer.jpg" alt="Icon" style="width: 50px; height: 50px; display: inline-block;">​​</span>
Expand All @@ -397,7 +397,7 @@ <h3 id="testing-site-nav">Testing Site-Nav<a class="fa fa-anchor" href="#testing
</ul>
</div>
</li>
<li style="display: flex;"><span aria-hidden="true" class="fas fa-file-code text-success" style="font-size: 30px; min-width: 16px; line-height: unset; margin-inline-end: 0.35em; align-self: flex-start; flex-shrink: 0;">​</span>
<li style="display: flex;"><span aria-hidden="true" class="fas fa-file-code text-success" style="font-size: 30px; min-width: 16px; line-height: unset; margin-inline-end: 1rem; align-self: flex-start; flex-shrink: 0;">​</span>
<div>Sub-item B4</div>
</li>
</ul>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testList.page-vue-render.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions packages/cli/test/functional/test_site/testList.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,12 @@
* Item A { icon="glyphicon-education" i-size="20px" i-class="text-primary" }
* Item B { icon="./images/deer.jpg" i-width="200px" i-height="100px" i-class="text-warning" }
* Sub-item B1 { icon="fas-file-code" i-size="30px" }
* Sub-item B2 { i-class="text-success" }
* Sub-item B2 { i-class="text-success" i-spacing="2rem" }
* Sub-item B3
* Sub-sub-item B3.1 { icon="./images/deer.jpg" i-width="50px" i-height="50px" }
* Sub-sub-item B3.2
* Sub-sub-sub-item B3.2.1 { i-class="text-danger" }
* Sub-item B4
* Sub-item B4 { i-spacing="1rem" }

1. Mixing basic and customized lists
* Item A
Expand Down
8 changes: 5 additions & 3 deletions packages/core/src/html/CustomListIconProcessor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ interface EmojiData {
}

const emojiData = emojiDictionary as unknown as EmojiData;

const ICON_ATTRIBUTES = ['icon', 'i-width', 'i-height', 'i-size', 'i-class'];
const ICON_ATTRIBUTES = ['icon', 'i-width', 'i-height', 'i-size', 'i-class', 'i-spacing'];

interface IconAttributes {
icon?: string;
className?: string;
size?: string;
width?: string;
height?: string;
spacing?: string;
}

type IconAttributeDetail = {
Expand Down Expand Up @@ -67,9 +67,10 @@ function createIconSpan(iconAttrs: IconAttributes): cheerio.Cheerio {
}
// Add invisible character to avoid the element from being empty
spanNode.append('\u200B');
const iconSpacing = iconAttrs.spacing || '0.35em';
return spanNode.css({
'line-height': 'unset',
'margin-inline-end': '0.35em',
'margin-inline-end': iconSpacing,
'align-self': 'flex-start',
'flex-shrink': '0',
});
Expand Down Expand Up @@ -98,6 +99,7 @@ IconAttributes | null => {
height: node.attribs['i-height'] !== undefined ? node.attribs['i-height'] : iconAttrsSoFar?.height,
size: node.attribs['i-size'] !== undefined ? node.attribs['i-size'] : iconAttrsSoFar?.size,
className: node.attribs['i-class'] !== undefined ? node.attribs['i-class'] : iconAttrsSoFar?.className,
spacing: node.attribs['i-spacing'] !== undefined ? node.attribs['i-spacing'] : iconAttrsSoFar?.spacing,
};
};

Expand Down
Loading