New addon: show more costumes in assets list, more than one column

[WorldLanguages]

Why this would be helpful

Feedback from 2024;

Could an addon be added for where I can view multiple rows when scrolling through my costumes? It'd be like viewing multiple rows in the backpack, but for the costume editor instead

Feedback from 2021:

I just hope I could hide the paint editor panel, and show only the costume contents, so I could organize them easily

I guess this is useful for animations

How this addon works

Idea 1: show two columns instead of one, and use horizontal scrolling instead of vertical.

Idea 2: a button to hide the costume editor completely and only show the list of costumes as a grid.

Possible alternatives

No response

Additional context

No response

[Waakul]

I'm thinking of making the left of the costume editor draggable, The more you drag away the more space is there and columns can be added accordingly. (Similar to how you can drag the inspect panel in browsers)

[CST1229]

I'm thinking of making the left of the costume editor draggable, The more you drag away the more space is there and columns can be added accordingly. (Similar to how you can drag the inspect panel in browsers)

I actually made a userstyle for that a while ago:

:root {
    --default-columns: 1;
}

[class*="selector_wrapper"] {
    width: auto;
    justify-content: center;
}
[class*="selector_list-area"] {
    width: calc(96px * var(--default-columns) + 2em);
    resize: horizontal;
    min-width: calc(96px + 2em);
    
    display: grid;
    align-content: start;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    
    padding: 0 1em;
    padding-bottom: 140px;
    
    gap: 1em;
    
    overflow-x: visible;
    overflow-y: scroll;
    
}
[class*="selector_list-area"] > div {
    margin-bottom: calc(-0.5em - 1em);
    min-width: 5rem;
    flex-grow: 1;
}
[class*="asset-panel_wrapper"] {
    position: relative;
}

[class*="selector_list-area"]::after {
    content: unset;
}

[class*="selector_list-item"][class*="sprite-selector-item_sprite-selector-item"] {
    width: auto;
}
[class*="selector_new-buttons"] {
    width: calc(100% - 16px);
}

oBqQOvVsCl.mp4

[Waakul]

I'm thinking of making the left of the costume editor draggable, The more you drag away the more space is there and columns can be added accordingly. (Similar to how you can drag the inspect panel in browsers)

I actually made a userstyle for that a while ago:

:root {
    --default-columns: 1;
}

[class*="selector_wrapper"] {
    width: auto;
    justify-content: center;
}
[class*="selector_list-area"] {
    width: calc(96px * var(--default-columns) + 2em);
    resize: horizontal;
    min-width: calc(96px + 2em);
    
    display: grid;
    align-content: start;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    
    padding: 0 1em;
    padding-bottom: 140px;
    
    gap: 1em;
    
    overflow-x: visible;
    overflow-y: scroll;
    
}
[class*="selector_list-area"] > div {
    margin-bottom: calc(-0.5em - 1em);
    min-width: 5rem;
    flex-grow: 1;
}
[class*="asset-panel_wrapper"] {
    position: relative;
}

[class*="selector_list-area"]::after {
    content: unset;
}

[class*="selector_list-item"][class*="sprite-selector-item_sprite-selector-item"] {
    width: auto;
}
[class*="selector_new-buttons"] {
    width: calc(100% - 16px);
}

oBqQOvVsCl.mp4

It moves the costume editor and other stuff away. We need to be able to clip it instead.

[mybearworld]

That userstyle doesn't work well with editor-stage-left.

[mybearworld]

It moves the costume editor and other stuff away. We need to be able to clip it instead.

A way to do this is to add position: absolute to the [class*="selector_wrapper"], and to add a <div style="width: calc(96px + 2em);"></div> before it. Maybe there's a way do it with pure CSS, though.

[mybearworld]

Found something, you can add the width to [class*="asset-panel_detail-area"]::before.

This also resolves it being incompatible with editor-stage-left.

Modified CSS:

:root {
    --default-columns: 1;
}

[class*="asset-panel_detail-area"]::before {
    content: "";
    width: calc(96px + 3em);
}
[class*="selector_wrapper"] {
    width: auto;
    justify-content: center;
    position: absolute;
    height: 100%;
    z-index: 2;
}
[class*="selector_list-area"] {
    width: calc(96px * var(--default-columns) + 2em);
    resize: horizontal;
    min-width: calc(96px + 2em);
    
    display: grid;
    align-content: start;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    
    padding: 0 1em;
    padding-bottom: 140px;
    
    gap: 1em;
    
    overflow-x: visible;
    overflow-y: scroll;
    
}
[class*="selector_list-area"] > div {
    margin-bottom: calc(-0.5em - 1em);
    min-width: 5rem;
    flex-grow: 1;
}
[class*="asset-panel_wrapper"] {
    position: relative;
}

[class*="selector_list-area"]::after {
    content: unset;
}

[class*="selector_list-item"][class*="sprite-selector-item_sprite-selector-item"] {
    width: auto;
}
[class*="selector_new-buttons"] {
    width: calc(100% - 16px);
}

[mybearworld]

You can move it outside of the visible area, which makes it impossible to zoom back in my modified stylesheet:

[Secret-chest]

Why make it horizontal and not a grid?

[mybearworld]

It is a grid, just not when it's that big and there's not enough costumes.
See CST's video above for the behavior

[Waakul]

Found something, you can add the width to [class*="asset-panel_detail-area"]::before.

This also resolves it being incompatible with editor-stage-left.

Modified CSS:

:root {
    --default-columns: 1;
}

[class*="asset-panel_detail-area"]::before {
    content: "";
    width: calc(96px + 3em);
}
[class*="selector_wrapper"] {
    width: auto;
    justify-content: center;
    position: absolute;
    height: 100%;
    z-index: 2;
}
[class*="selector_list-area"] {
    width: calc(96px * var(--default-columns) + 2em);
    resize: horizontal;
    min-width: calc(96px + 2em);
    
    display: grid;
    align-content: start;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    
    padding: 0 1em;
    padding-bottom: 140px;
    
    gap: 1em;
    
    overflow-x: visible;
    overflow-y: scroll;
    
}
[class*="selector_list-area"] > div {
    margin-bottom: calc(-0.5em - 1em);
    min-width: 5rem;
    flex-grow: 1;
}
[class*="asset-panel_wrapper"] {
    position: relative;
}

[class*="selector_list-area"]::after {
    content: unset;
}

[class*="selector_list-item"][class*="sprite-selector-item_sprite-selector-item"] {
    width: auto;
}
[class*="selector_new-buttons"] {
    width: calc(100% - 16px);
}

The min-width doesn't seem responsive....

[mybearworld]

The min-width doesn't seem responsive....

What do you mean?

[Waakul]

The min-width doesn't seem responsive....

What do you mean?

The min-width is supposed to be different on screens with different dimensions else there will be an overlay that can't be dragged to remove.

[mybearworld]

I don't think the size of the costume bar changes based on screen size...