rzambroni
commented
4 months ago Hey @SauloSA, thanks for taking the time to provide feedback, it is always appreciated. I'll pass it over to the product team so they can give it some thought and evaluate putting it on the roadmap.
I'm closing this ticket since this list is meant for tracking bugs and we track feature/enhancement requests separately.
Thanks so much!
SauloSA
Can we access your project?
Current Behavior
Context: Theme styles are essential for ensuring visual consistency in projects, but the current implementation in FlutterFlow makes it difficult to identify which settings are theme defaults and which have been edited. To improve usability, we suggest adopting a system similar to the one proposed by Webflow, where each style field displays an icon indicating the state of the configuration.
Proposal: Study and implement a visual system for identifying styles inspired by Webflow, with the following features:
Indicator Icons:
Plain Label: Indicates that the property's value has not been changed. Amber Icon: Indicates that the property is inheriting a value from elsewhere. Clicking the icon should show where this value is being inherited from. Blue Icon: Indicates that the property has been modified at the current breakpoint. Pink Icon: Used for specific cases (e.g., CSS Grid in Webflow) where the modification affects only the selected element and not the entire class. Additional Functionalities:
Reset Properties: Allow users to reset properties to the theme's default values, similar to holding the Option or Alt key in Webflow and clicking the label to reset the property. Inheritance Visualization: Facilitate the visualization of where inherited properties are coming from, promoting a better understanding and management of styles. Expected Benefits:
Improved Usability: With clear identification of property states, users will be able to better understand and manage style settings. Visual Consistency: Ensures that theme default styles are easily identifiable and restorable, maintaining design coherence. Development Efficiency: Reduces the time spent trying to identify and adjust styles, allowing for a more agile and efficient workflow. Reference: The suggested approach is based on the Webflow Style Panel, as explained in a micro-lesson from Webflow University, highlighting the importance of identifying style property states through colors and icons.
Expected Behavior
Not applicable
Steps to Reproduce
Not applicable
Reproducible from Blank
Bug Report Code (Required)
Not applicable
Visual documentation
Not applicable
Environment
Additional Information
No response