Demo scene
nah0y opened this issue · comments
Maybe I'll take some time and try to reproduce every demo there is on this page: https://material.angularjs.org/#/demo/material.components.autocomplete
What do you think?
That would be awesome, although I think this would be a better reference: https://www.polymer-project.org/components/paper-elements/demo.html#paper-input
The first site is better visually and with functionality, but no problem :)
Just to make sure, don't you think the first site is better?
Look at just the checkboxes :
- https://material.angularjs.org/#/demo/material.components.checkbox
- https://www.polymer-project.org/components/paper-elements/demo.html#paper-checkbox
On the first site, we can clearly see easily which one is deactivated, which one is disabled etc... there is even the text that changes when we click on a checkbox, and the last one show the checkbox without the ripple effect.
Just to make sure :)
Also, I've started working on a first example, and there is something that are not quite fitting what the "real" material design should be. What should I do when it's the case? Open an issue every time?
Yeah, good points - use the first one if you reckon it's better. Just make sure any colours/measurements etc match this site, as it's the one MaterialUI's based off, and the 'official' spec. If what you're doing/want to know isn't there, just ask me here :)
So !
For the very first demo scene, checkboxes. https://material.angularjs.org/#/demo/material.components.checkbox
It seems that by default when putting a checkbox on the screen, we should not see the gray circle.
In your implementation, we can see the gray circle (we can see in the image below in focused and pressed). By default, we should see nothing.
Also, on the Toggle script, pressing the Is On boolean in the inspector, does not enable the checkbox. Even in play mode. In the basic Unity UI, if you do that in a toggle, even if you're not in play mode, the toggle is selected and the checkbox check appears.
Cheers :)
One another thing I'm trying to do, is change a text.text value with the value of the toggle.
I can't do that in the Toggle OnValueChanged section, because it asks for a string, and I want to give it toggle.isOn.
So I looked at using EZAnim, but when I drop a Text in the Target GameObject, in the Target Variable, there is not the option to set the Text value :(
Well, even if there was, I don't know how to set for example the color to red when the toggle is true, and the color back to black when it's false. There is no going back :)
I think it will be great if we could act depending on the state of an object (here the toggle.isOn)
Another thing about checkbox, it seems according to Google guidelines. That when the box is checked (see my image of checkboxes), the green background should be in front of the black border. And that's not the case in your implementation :)
Are you sure you want me to tell you every detail like that and in a single issue? :)
Another thing about Checkboxes, I don't know how to make a disabled checkbox. A checkbox not clickable and change its color to a disabled color :)
For example, setting Interactable to false on the Toggle script, does not work at all (I think you should check that in your Checkbox script)
Same thing for RadioButtons, the gray circle, setting isOn, disabled state etc...
I've added 2 scenes (checkbox and radio button) to my fork in the feature/demo_scenes branch.
You can take a look (it's not finished because of the issues I've told you) and I'd really love to remove all the ugly code I had to add because events are not like in NGUI :/
If you have time to talk about it, that would be great :p
https://github.com/nah0y/MaterialUI/tree/feature/demo_scenes
Hey, sorry, just going to bed now, but I'll take a long look at this tomorrow and probably end up redesigning the checkbox to make it work better :)
No problem, see you later ;)
Just thought I'd let you know I'm reworking the checkbox now. Making it performance-friendly, user-friendly and match the MD spec is trickier than I originally thought. I'm confident it can be done without anything too hacky though :)
It's a shame there's no way to invert masks, or cut a hole in an image at runtime - a LOT of the components would be better and easier to use if I could do that. Unfortunately I have little to no experience with shaders :/
Also, I don't mind you telling me every single little issue you find - the more scrutiny and nitpicking MaterialUI goes through, the better it'll be! :)
Alrighty, I think I've fixed all the issues with the checkbox. It's also much better on performance, and will work on any background without that annoying circle. The text can change depending on the state, as well as the colors. Check it out here:
The only thing I haven't been able to fix is the toggling of the checkbox when the inspector bool is clicked. I did some testing and worked out that it wasn't an issue with the checkbox, but rather that when you change the toggle value through the inspector, it doesn't send the 'on value changed' message.
Now to add those features to radiobuttons and switches :)
Nice!
Will try that as soon as I can. But looks nice! :p
I'm curious to see how you handled the text changed when clicked.
And if you don't find how to change the toggle value through inspector I'll try to take a look.
I used this script to change the text - You just attach it to the text and link it to the 'on value changed' on the toggle component in the inspector.
Hum... why not :)
Simple and elegant.
I usually prefer lots of small scripts doing things very well ;)
I've just played a little bit with it. Really great :)
Some comments:
- How do you make a checkbox disabled? I tried to set interactable to false but it just make it not interactable (but the disbled color is not set)
Ok, seems like we have to manually call the ToggleInteractivity public method. I think this should be done automatically. For example if interactable is set to false, at start it should be disabled, same thing if at runtime we set interactable to false etc... ;) - When the toggle is not interactable, we can still click on the checkbox and the ripple will appear (it will not check the box, but I would assume the ripple to not show?)
- as I commented in your code, why did you add a bool interactable to the Checkbox Toggler and not use the one in the toggle directly?
- the inspector UI and options you added are perfect :p
- oh also, when we press play, the checkbox will directly animate to the state it has to be. So instead of directly be in the state (checked or not) we will see the animation. And it might be confusing.
Maybe you should set the animation time to 0 at the first init?
Otherwise, really nice! :)
One thing about RadioButtons, in one of the examples, instead of having a text next to the radio button, it's an image (with the CheckBox Toggler script attached).
It works fine, but there is a lot of NullPointer exceptions because the RadioConfig script expect a RadioText Text :) (and sometimes we want an image for example :D)
Hum... one thing you'll need to see, is with the demo scene 02, if you select the first radio button and select add, it will add a new radio button, but in fact, it will copy the first radio button, so it will create it and set it to checked (because you selected the first). In my script I set the toggle to false, but the text color remain.
The thing is I had to duplicate the existing toggle because the methods to create RadioButton are editor only. One thing I can do though, is create an instance and hide it directly when we start the scene.
But maybe we can fix the text color issue so users doing the same thing won't have the issue?
For the Switch component, you might want to add the ToggleTextChanger by default on it (as for Checkbox) :)
Switch component, is there a reason the Image background is gray to begin with and not white?
I think most apps will have a white background?
Switch component, the Change Text Color bool does nothing :)
Switch component, trying to do the Switch (Disable Active). Disable is working (with interactable set to false). But if I press the Is On bool on the toggle, when going into play mode, the switch UI is not to true.
I'll create a new issue for each component because it's a mess here if you don't mind :)
If you want, you can close this issue.
Alrighty, sounds good.