search

battleaxedotco / brutalism

Battleaxe's component library for Adobe CEP panels
https://battleaxe.dev/brutalism-docs/
MIT License
85 stars 12 forks source link

Carousel or slider component #44

Open egdenis opened 1 year ago

egdenis commented 1 year ago

Are there any plans of adding a slider or carousel component similar to the one used in Adobe? I know there is the Input-Slider component but it is a bit confusing from a UX perspective as it isn't clear that is a slider nor does it indicate the range of the slider.

image
egdenis commented 1 year ago

Would be happy to make it myself and make a pull request but I'm not sure how you can inspect the built in Adobe panels to ensure that it matches the built in slider colors/size etc...

egdenis commented 1 year ago

So I just found out that there is an existing SliderControl not mentioned in the documentation. It seems to work okay but has a few bugs. I'll see if I can work them out. Is that why it isn't mentioned in the docs?

Inventsable commented 1 year ago

Are there any plans of adding a slider or carousel component similar to the one used in Adobe? I know there is the Input-Slider component but it is a bit confusing from a UX perspective as it isn't clear that is a slider nor does it indicate the range of the slider.

Hello, probably not given that Vue 2x is deprecating and I personally use the Bolt-CEP framework rather than bombino nowadays. I'm working on a new component library that's all in Vue 3 Composition API and Typescript though and I'll note this. As for the Input-Scroll element, this is designed to be a replica of numeric inputs as they appear and function in After Effects, hence there being no range or other slider-related designs.

Would be happy to make it myself and make a pull request but I'm not sure how you can inspect the built in Adobe panels to ensure that it matches the built in slider colors/size etc...

You can't inspect native Adobe controls, I've had to do everything manually in this library. For colors there is already CSS variable support for nearly every UI color found in the major apps included via my starlette package, though.

So I just found out that there is an existing SliderControl not mentioned in the documentation. It seems to work okay but has a few bugs. I'll see if I can work them out. Is that why it isn't mentioned in the docs?

Correct. I had started to make one on a whim along with some other components that were "left on the cutting room floor" like AE rotation controls. You can feel free to use the code found in the Slider-Control.vue file though do note all the comments at the top talking about bugs I'd noticed on the initial attempt. I'm sure it's not difficult to work these out or make an alternate version, but it wasn't something that had ever been requested or needed for Battleaxe products and I'd just spent a couple hours doing it for practice.

egdenis commented 1 year ago

I've refactored & fixed the existing code and can make a pull request.

Good to know, thanks! How far along are you in your component library to Vue 3? Have you been using non-matching components for extensions you've built with Bolt-CEP since you haven't finished the new component library?

Inventsable commented 1 year ago

Great! Looking forward to it.

The new library will be Volt and is essentially brutalism v2. There will be a lot of overlap but it's not going to be a 1:1 mapping since I'm taking the time to refactor all the components and it's not as quick in Vue 3 and Typescript (though far better DX and worth the extra time), I'm also building them during working on several projects as I'm using each so it's unlikely to be released for a month or two if not longer. More or less, I have a small amount of them done and they all do match since I've had to build core functionality like color from scratch again, but I haven't had projects that require the whole spectrum of components used in brutalism in order to need to write them out and am building as I go so far.

egdenis commented 1 year ago

Sounds cool! Do you think you could share what you have with me? Would be great to have that structure to build off of. Would be happy to contribute components that are missing as I encounter them in my own project.

egdenis commented 1 year ago

Made the pull request. Slider works great. One feature I might need to tweak is to make it so that the decimals still show up in the Input-Scroll component when the numbers are whole (purely aesthetic). Lmk if you can share your typescript/vue3 progress so far! Thanks. #45