Skip to content

Blocks with Border #12984

Closed
Closed
@itszarnish

Description

@itszarnish

In what scenarios do you need this feature?

In SiYuan, we should have something similar to groups in Capacities. We could create a group block and place content inside it. The benefit would be having a nicely rounded corner group, with the ability to change the background to any color. Please consider doing something about this.

Currently, there is no way to achieve this behavior in SiYuan, based on what I have explored.

Check out the attached video for how this feature works in Capacities:

Recording.2024-10-31.174352.mp4

Describe the optimal solution

Describe the candidate solution

No response

Other information

No response

Activity

TCOTC

TCOTC commented on Oct 31, 2024

@TCOTC
Contributor

It's similar to SiYuan's Super block:

image

itszarnish

itszarnish commented on Oct 31, 2024

@itszarnish
Author

I tested this, and yes, it is quite similar to the group feature in Capacities. However, I’ve noticed what might be a bug that could be improved: there isn’t enough space on the left side of the super block.

The spacing on the top, right and bottom seems right to me but left is a bit off.

I think if the user hasn't applied any background color, it looks okay. However, once a background color is applied, there should be space on the left to match the top, right, and bottom spaces, so the content looks more balanced. I believe this can be improved.

image

itszarnish

itszarnish commented on Oct 31, 2024

@itszarnish
Author

I tested this, and yes, it is quite similar to the group feature in Capacities. However, I’ve noticed what might be a bug that could be improved: there isn’t enough space on the left side of the super block.

The spacing on the top, right and bottom seems right to me but left is a bit off.

I think if the user hasn't applied any background color, it looks okay. However, once a background color is applied, there should be space on the left to match the top, right, and bottom spaces, so the content looks more balanced. I believe this can be improved.

image

It would be nice if we could apply borders to blocks as well. For example, in this super block case, I’ve applied a background color, but there should also be an option to apply a border.

This is exactly what I'm looking for:

image

In addition to background colors, we should have an option to apply borders. This should include various styles like dotted, dashed, and solid lines, along with customizable border width (in pixels) and border color.

changed the title [-]Need Group Block[/-] [+]Blocks with Border[/+] on Oct 31, 2024
TCOTC

TCOTC commented on Oct 31, 2024

@TCOTC
Contributor

You might like the style of this super block:

.protyle-wysiwyg [data-node-id].sb {
    padding: 4px 6px 4px 6px;
	background-color: var(--b3-table-even-background);
	box-shadow: inset 0 0 0 .6px var(--b3-border-color);
}

image

How to use:

image

itszarnish

itszarnish commented on Oct 31, 2024

@itszarnish
Author

You might like the style of this super block:

.protyle-wysiwyg [data-node-id].sb {
    padding: 4px 6px 4px 6px;
	background-color: var(--b3-table-even-background);
	box-shadow: inset 0 0 0 .6px var(--b3-border-color);
}

image

How to use:

image

Yes, I know about Code Snippets, but the problem is that I don’t want to apply this specific style to all blocks. I only want to apply borders to some blocks, not all of them, and Code Snippets can’t solve this issue. Instead, if the developers could implement a border feature, that would be great.

Additionally, regarding the left space: once the user applies a background color, there should be some space on the left, and as soon as the user removes the background color, the left space should be removed. I hope you understand my point—this would look much better.

UsmanTechJive

UsmanTechJive commented on Oct 31, 2024

@UsmanTechJive

In addition to background colors, we should have an option to apply borders. This should include various styles like dotted, dashed, and solid lines, along with customizable border width (in pixels) and border color.

I totally agree, blocks should have an option for borders as well. Sometimes I want to use this feature myself but, unfortunately, can’t. I don’t think it would be difficult to add this small feature enhancement.

Hzz-0802

Hzz-0802 commented on Oct 31, 2024

@Hzz-0802

plugin custom-block,With Border (outline)
2024-10-31_214909
2024-10-31_215136

TCOTC

TCOTC commented on Oct 31, 2024

@TCOTC
Contributor

As far as I know of notes app, there is no function to add a border to the block, and I don't think SiYuan will add this function.

Currently, in SiYuan you can achieve this functionality by using code snippets and custom attributes (just a little bit of trouble):

.protyle-wysiwyg [data-node-id][custom-box-shadow="true"] {
	box-shadow: inset 0 0 0 2px #f5822e;
}

image

image

itszarnish

itszarnish commented on Oct 31, 2024

@itszarnish
Author

If adding borders to blocks isn't possible, then at least the Custom Attribute UI could be improved.

For example, instead of having to create box-shadow or other CSS styles for specific blocks repeatedly, there could be a way to set these styles once. Maybe we could have a section in CSS Snippets or a separate Custom menu in Settings where we can define styles like box-shadow.

Once added, these predefined styles could appear as options in the custom settings for each block, allowing us to easily click and apply them as needed. I think this could be a practical solution if adding borders directly isn't feasible.

Please think about it; it would definitely speed up the process.

Edit: But the problem is with the data-node-id, as every block has a unique ID. So, if we set a CSS style for custom attributes once, how would it detect and apply the CSS to that specific block?

image

itszarnish

itszarnish commented on Oct 31, 2024

@itszarnish
Author

Also, am I getting this right? It's not applying the styles.

image

TCOTC

TCOTC commented on Oct 31, 2024

@TCOTC
Contributor

Refer to my operation. And I think the sy-quick-attr plugin is very convenient:

.protyle-wysiwyg [data-node-id][custom-box-shadow="true"] {
	box-shadow: inset 0 0 0 2px #f5822e;
}
{
    "Border": {
        "box-shadow": "true"
    },
    "Cancel Border": {
        "box-shadow": ""
    }
}
video.mp4
88250

88250 commented on Oct 31, 2024

@88250
Member

Thank you for your discussion. We will close the issue first.

itszarnish

itszarnish commented on Oct 31, 2024

@itszarnish
Author

Refer to my operation. And I think the sy-quick-attr plugin is very convenient:

.protyle-wysiwyg [data-node-id][custom-box-shadow="true"] {
	box-shadow: inset 0 0 0 2px #f5822e;
}
{
    "Border": {
        "box-shadow": "true"
    },
    "Cancel Border": {
        "box-shadow": ""
    }
}

video.mp4

Thanks, this is useful. I appreciate it.

3 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @88250@UsmanTechJive@TCOTC@itszarnish@Hzz-0802

        Issue actions

          Blocks with Border · Issue #12984 · siyuan-note/siyuan