Enhance visibility of the expand/hide buttons on the left control panel

[kintigh]

Please change opacity default to 50% at the same time

[Zodiase]

Now the toggle buttons have clear labels, shadows and background colors depending on their state.

[tmcphillips]

Currently the Style buttons do not have little arrows on them indicating that they are used to expand or collapse the style panel for each variable. As a consequence, it still is not clear that one can collapse the styles for a variable once it is open (see image in preceding comment).

Is there a reason why we are not using arrows on the style expand/collapse buttons?

[Zodiase]

@tmcphillips This issue was created to address the concern about the panel expand/collapse buttons, like the one shown in the screenshot below. It does not cover any requirement on the overlay style config panel buttons.

According to Keith, by the arrows alone, it was not clear to users, what the up/down icons mean or the fact that the panels are collapsible. There was no requirement, as far as this issue is concerned, for any other buttons to have the arrows. Since other buttons didn't have any arrows in the first place.

So I made the minimum viable changes to address this issue.

As to why there is no arrows for the toggle button for the overlay style config panels, it's because they are different type of UI elements, in my mind, and should be distinguished to avoid confusion.

See this screenshot of Photoshop (not the best software known for its intuitive UI, but has a similar level of UI complexity in this case) for example. The layout panel (which contains the "Layers", "Chanels" and "Paths" tabs) itself is collapsible, even though it may not be clearly visible. The panel does not have arrows to indicate it's collapsible, either. The layers list, however, has arrows on the left of the folders, indicating a nested structure. The individual layers/folders, may or may not have another kind of arrow to the right for showing/hiding the layer effects list. You can see a pattern here. For a different kind of UI elements, a new design is needed to avoid confusion. Also toggle controls don't necessarily need arrows. Imagine all of those show/hide controls to have the identical type of arrows, would you be able to know what to expect when you expand something?

So, I didn't add arrows to the "Style" buttons so they won't look too similar to the panel toggle buttons.

We can talk about changing the overall design of toggle controls but I think that should be a separate issue.

[kintigh]

I think arrows are indeed what we want. I can’t remember exactly what they looked like before but they were far away from the variable name and didn’t convey the idea of “this can be opened”. I think the arrow styles ere a bit odd and they were far to the right. Maybe use a more conventional arrow and out it to the left of the variable name? Keith

---

Keith W. Kintigh, Professor kintigh@asu.edumailto:kintigh@asu.edu ASU Directory Pagehttps://webapp4.asu.edu/directory/person/56433 ASU School of Human Evolution & Social Changehttp://shesc.asu.edu/ ASU Center for Archaeology & Societyhttps://shesc.asu.edu/centers/archaeology-and-society, Co-director Arizona State Universityhttp://asu.edu/, Box 872402, Tempe, AZ 85287-2402

Coalition for Archaeological Synthesis<http;/archsynth.org>, Interim Co-Chair Journal of Computer Applications in Archaeologyhttp://journal.caa-international.org/, Editorial Board

From: Xingchen Hong notifications@github.com Sent: Wednesday, June 27, 2018 8:38 AM To: openskope/skope-interface skope-interface@noreply.github.com Cc: Keith Kintigh kintigh@asu.edu; Comment comment@noreply.github.com Subject: Re: [openskope/skope-interface] Enhance visibility of the expand/hide buttons on the left control panel (#173)

@tmcphillipshttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_tmcphillips&d=DwMFaQ&c=l45AxH-kUV29SRQusp9vYR0n1GycN4_2jInuKy6zbqQ&r=ur9s2KurOEwuMPidvsiKCoRQF9hp3xq6Pgyn4VShajU&m=U5rUPX3Et4BGkbpbj0ee9LudrD7AdE0J8yjM2QEuqD0&s=YCStQ_axQud0gCgBUQBBxUB2MlD_U2Ud4hKtHGn0WZw&e= This issue was created to address the concern about the panel expand/collapse buttons. It does not cover any requirement on the overlay style config panel buttons.

According to Keith, by the arrows alone, it was not clear to users, what the up/down icons mean or the fact that the panels are collapsible. There was no requirement, as far as this issue is concerned, for any other buttons to have the arrows. Since other buttons didn't have any arrows in the first place.

So I made the minimum viable changes to address this issue.

As to why there is no arrows for the toggle button for the overlay style config panels, it's because they are different type of UI elements, in my mind, and should be distinguished to avoid confusion.

[image]https://urldefense.proofpoint.com/v2/url?u=https-3A__user-2Dimages.githubusercontent.com_1815174_41980178-2D774e4b90-2D79eb-2D11e8-2D9846-2D6dd49e10da5c.png&d=DwMFaQ&c=l45AxH-kUV29SRQusp9vYR0n1GycN4_2jInuKy6zbqQ&r=ur9s2KurOEwuMPidvsiKCoRQF9hp3xq6Pgyn4VShajU&m=U5rUPX3Et4BGkbpbj0ee9LudrD7AdE0J8yjM2QEuqD0&s=9eg1eZQlRXHEgjall0c-ciyFlB0BdxZ6StD0N-BC2GA&e=

See this screenshot of Photoshop (not the best software known for its intuitive UI, but has a similar level of UI complexity in this case) for example. The layout panel (which contains the "Layers", "Chanels" and "Paths" tabs) itself is collapsible, even though it may not be clearly visible. The panel does not have arrows to indicate it's collapsible, either. The layers list, however, has arrows on the left of the folders, indicating a nested structure. The individual layers/folders, may or may not have another kind of arrow to the right for showing/hiding the layer effects list. You can see a pattern here. For a different kind of UI elements, a new design is needed to avoid confusion. Imagine all of those show/hide controls to have the identical type of arrows, would you be able to know what to expect when you expand something?

So, I didn't add arrows to the "Style" buttons so they don't look too similar to the panel toggle buttons.

We can talk about changing the overall design of toggle controls but I think that should be a separate issue.

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_openskope_skope-2Dinterface_issues_173-23issuecomment-2D400696073&d=DwMFaQ&c=l45AxH-kUV29SRQusp9vYR0n1GycN4_2jInuKy6zbqQ&r=ur9s2KurOEwuMPidvsiKCoRQF9hp3xq6Pgyn4VShajU&m=U5rUPX3Et4BGkbpbj0ee9LudrD7AdE0J8yjM2QEuqD0&s=4IzzpqAtlRV3Q0Eg9kOYEuGUdbcxrKKxuahvEynP3_c&e=, or mute the threadhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_ALAoJakZVKbhtWalsB-2D8HP4P2dxF0M-5F5ks5uA5i6gaJpZM4Tp1zW&d=DwMFaQ&c=l45AxH-kUV29SRQusp9vYR0n1GycN4_2jInuKy6zbqQ&r=ur9s2KurOEwuMPidvsiKCoRQF9hp3xq6Pgyn4VShajU&m=U5rUPX3Et4BGkbpbj0ee9LudrD7AdE0J8yjM2QEuqD0&s=vHF72eJKRq49RIKgd23pgN24Rol5nHqoineqco3HqHA&e=.

[Zodiase]

Todo:

• Move expand/collapse arrow icon to the left of the panel title.
• Change the style panel button to use a gear icon only.

[kintigh]

The agreement was to change the Tent and Style button to a gear button,

[Zodiase]

[Zodiase]

Feature is deployed in v0.1.27.