I've been charged with designing a horizontal version of the attached graphic.
Think of the 'Conditions' area like the white text box where you type your search query in Google.
Pictured are 2 groups of items. The outer group (colored blue) has a right border that is blue with vertical lines and a triangle. This indicates it is an AND group. The inner group (colored green) has right border that is orangish with diagonal lines and a half-circle. This indicates it is an OR group.
Inside each of the groups are some key / value pairs. The inner-most are left value IS EQUAL TO the right value. The outer-most are the left value IS NOT EQUAL TO the right value.
If this were an if statement it would read as follows:
Before you say it - yes, I know the if statement is a nice, compact way to represent this, AND it's horizontal! However I need to come up with a way to show the above if statement in a colorful GUI similar to the attached graphic, but horizontally. I have VERY limited vertical space to deal with (about 50 pixels, though on roll-over it could expand to as much as around 300 if necessary). I've got a minimum of 800 pixels in which to lay it out horizontally before I have to add a horizontal scroll bar (but this area could grow based on the user's screen resolution).
I've got a couple of ideas, but I figured I'd crowd-source the problem to see if you guys could come up with any more. Maybe there is a design pattern that fits this bill nicely that I'm overlooking.
Thanks a TON!
some other things to consider:
You don't have to be able to see the whole thing all at once, but it'd be nice.
Things can expand/collapse if needed.
User will be able to rearrange the items (e.g. drag/drop key/value pairs into other groups, drag a group inside/outside of another group etc, drag items to replace a key or a value.
There can be n-number of groups and n-number of key/value pairs (the largest one I'm aware of has around 60 different groups containing around 90 different key/value pairs - but it is very a-typical)