[DG: User Experience] making selected toolbar button look inactive in 2.9 skins

classic Classic list List threaded Threaded
4 messages Options
Keli Sato Amann Keli Sato Amann
Reply | Threaded
Open this post in threaded view
|

[DG: User Experience] making selected toolbar button look inactive in 2.9 skins

Hi
I am hoping the folks who worked on the 2.9 skin can answer my question--I have posted this as SAM-2103.

The skins have changed in 2.9 so that by default, all of the links the list, class="navIntraTool actionToolbar" are black. For most tools this is fine--those links functioned like buttons in that they took you to a page where that toolbar disappeared--you had to complete an action to return back to the main page of the tool.

However, in Samigo, the Toolbar was persistent and functioned like a tab bar--if you clicked on a link, it took you to that page, but you could navigate to other pages. Prior to the change, the only black text in the toolbar was the currently selected tab/button, the rest were blue. Now it is hard to identify which tab the user is on. Granted, the text of the selected button is repeated as a header, but it still breaks with convention.

It looks like there is a newly defined class in tool.css

 .navIntraTool li span.current,

but it is unused. If I add class="current" to the span containing the selected tab, I can make the selected button look different.

Was this the intent of how that class should be used? Or is there an easy CSS way to change the  to make the current tab appear different that I've missed?

Keli Amann
User Experience Specialist
Academic Computing Services, Stanford University
_______________________________________________
sakai-ux mailing list
[hidden email]
http://collab.sakaiproject.org/mailman/listinfo/sakai-ux

TO UNSUBSCRIBE: send email to [hidden email] with a subject of "unsubscribe"
Steve Swinsburg-3 Steve Swinsburg-3
Reply | Threaded
Open this post in threaded view
|

Re: [DG: User Experience] making selected toolbar button look inactive in 2.9 skins

Hi Keli,

Yes if you add the 'current' class to your markup then you'll get a button that looks like it's been clicked. I go a bit further and disable the link so it really is disabled. Screenshot attached. Note that 'Browse' is disabled via the 'current' class.

cheers,
Steve


On 21/03/2013, at 10:38 AM, Keli Sato Amann <[hidden email]> wrote:

Hi
I am hoping the folks who worked on the 2.9 skin can answer my question--I have posted this as SAM-2103.

The skins have changed in 2.9 so that by default, all of the links the list, class="navIntraTool actionToolbar" are black. For most tools this is fine--those links functioned like buttons in that they took you to a page where that toolbar disappeared--you had to complete an action to return back to the main page of the tool.

However, in Samigo, the Toolbar was persistent and functioned like a tab bar--if you clicked on a link, it took you to that page, but you could navigate to other pages. Prior to the change, the only black text in the toolbar was the currently selected tab/button, the rest were blue. Now it is hard to identify which tab the user is on. Granted, the text of the selected button is repeated as a header, but it still breaks with convention.

It looks like there is a newly defined class in tool.css

.navIntraTool li span.current,

but it is unused. If I add class="current" to the span containing the selected tab, I can make the selected button look different.

Was this the intent of how that class should be used? Or is there an easy CSS way to change the  to make the current tab appear different that I've missed?

Keli Amann
User Experience Specialist
Academic Computing Services, Stanford University
_______________________________________________
sakai-ux mailing list
[hidden email]
http://collab.sakaiproject.org/mailman/listinfo/sakai-ux

TO UNSUBSCRIBE: send email to [hidden email] with a subject of "unsubscribe"


_______________________________________________
sakai-ux mailing list
[hidden email]
http://collab.sakaiproject.org/mailman/listinfo/sakai-ux

TO UNSUBSCRIBE: send email to [hidden email] with a subject of "unsubscribe"
Gonzalo Silverio Gonzalo Silverio
Reply | Threaded
Open this post in threaded view
|

Re: [DG: User Experience] making selected toolbar button look inactive in 2.9 skins

Hi,

The class "current" goes in the <span> inside the toolbar item when there is no link. So:

<li><span class="current">Assessments</span></li>

which I notice is what Samigo does, minus the class. For examples on what it looks like see Assignments and Resources as well. 

Since Samigo does not use the JSF toolbar tag, at least in the places I have looked at,  this should not be too much trouble to change. 

 - Gonzalo

On Thu, Mar 21, 2013 at 8:44 AM, Steve Swinsburg <[hidden email]> wrote:
Hi Keli,

Yes if you add the 'current' class to your markup then you'll get a button that looks like it's been clicked. I go a bit further and disable the link so it really is disabled. Screenshot attached. Note that 'Browse' is disabled via the 'current' class.

cheers,
Steve


On 21/03/2013, at 10:38 AM, Keli Sato Amann <[hidden email]> wrote:

Hi
I am hoping the folks who worked on the 2.9 skin can answer my question--I have posted this as SAM-2103.

The skins have changed in 2.9 so that by default, all of the links the list, class="navIntraTool actionToolbar" are black. For most tools this is fine--those links functioned like buttons in that they took you to a page where that toolbar disappeared--you had to complete an action to return back to the main page of the tool.

However, in Samigo, the Toolbar was persistent and functioned like a tab bar--if you clicked on a link, it took you to that page, but you could navigate to other pages. Prior to the change, the only black text in the toolbar was the currently selected tab/button, the rest were blue. Now it is hard to identify which tab the user is on. Granted, the text of the selected button is repeated as a header, but it still breaks with convention.

It looks like there is a newly defined class in tool.css

.navIntraTool li span.current,

but it is unused. If I add class="current" to the span containing the selected tab, I can make the selected button look different.

Was this the intent of how that class should be used? Or is there an easy CSS way to change the  to make the current tab appear different that I've missed?

Keli Amann
User Experience Specialist
Academic Computing Services, Stanford University
_______________________________________________
sakai-ux mailing list
[hidden email]
http://collab.sakaiproject.org/mailman/listinfo/sakai-ux

TO UNSUBSCRIBE: send email to [hidden email] with a subject of "unsubscribe"


_______________________________________________
sakai-ux mailing list
[hidden email]
http://collab.sakaiproject.org/mailman/listinfo/sakai-ux

TO UNSUBSCRIBE: send email to [hidden email] with a subject of "unsubscribe"



--
- Gonzalo

_______________________________________________
sakai-ux mailing list
[hidden email]
http://collab.sakaiproject.org/mailman/listinfo/sakai-ux

TO UNSUBSCRIBE: send email to [hidden email] with a subject of "unsubscribe"
Keli Sato Amann Keli Sato Amann
Reply | Threaded
Open this post in threaded view
|

Re: [DG: User Experience] making selected toolbar button look inactive in 2.9 skins

Hi
Thanks for the confirmation guys.
In addition to SAM-2103, I've also filed the following for Preferences and Roster
SAK-23448 Can't tell which page you are on based on button state of Preferences toolbar
SAK-23449 Add "current" class to the span holding the active toolbar button in Roster

I've asked to fix all three locally, but not sure when we will get to them.

Keli

----- Original Message -----
From: "Gonzalo Silverio" <[hidden email]>
To: "Steve Swinsburg" <[hidden email]>
Cc: "Keli Sato Amann" <[hidden email]>, "sakai-ux" <[hidden email]>
Sent: Thursday, March 21, 2013 5:57:14 AM
Subject: Re: [DG: User Experience] making selected toolbar button look inactive in 2.9 skins

Hi,


The class "current" goes in the <span> inside the toolbar item when there is no link. So:


<li><span class="current">Assessments</span></li>


which I notice is what Samigo does, minus the class. For examples on what it looks like see Assignments and Resources as well.


Since Samigo does not use the JSF toolbar tag, at least in the places I have looked at, this should not be too much trouble to change.


- Gonzalo



On Thu, Mar 21, 2013 at 8:44 AM, Steve Swinsburg < [hidden email] > wrote:



Hi Keli,


Yes if you add the 'current' class to your markup then you'll get a button that looks like it's been clicked. I go a bit further and disable the link so it really is disabled. Screenshot attached. Note that 'Browse' is disabled via the 'current' class.


cheers,
Steve







On 21/03/2013, at 10:38 AM, Keli Sato Amann < [hidden email] > wrote:


Hi
I am hoping the folks who worked on the 2.9 skin can answer my question--I have posted this as SAM-2103.

The skins have changed in 2.9 so that by default, all of the links the list, class="navIntraTool actionToolbar" are black. For most tools this is fine--those links functioned like buttons in that they took you to a page where that toolbar disappeared--you had to complete an action to return back to the main page of the tool.

However, in Samigo, the Toolbar was persistent and functioned like a tab bar--if you clicked on a link, it took you to that page, but you could navigate to other pages. Prior to the change, the only black text in the toolbar was the currently selected tab/button, the rest were blue. Now it is hard to identify which tab the user is on. Granted, the text of the selected button is repeated as a header, but it still breaks with convention.

It looks like there is a newly defined class in tool.css

.navIntraTool li span.current,

but it is unused. If I add class="current" to the span containing the selected tab, I can make the selected button look different.

Was this the intent of how that class should be used? Or is there an easy CSS way to change the to make the current tab appear different that I've missed?

Keli Amann
User Experience Specialist
Academic Computing Services, Stanford University
_______________________________________________
sakai-ux mailing list
[hidden email]
http://collab.sakaiproject.org/mailman/listinfo/sakai-ux 

TO UNSUBSCRIBE: send email to [hidden email] with a subject of "unsubscribe"


_______________________________________________
sakai-ux mailing list
[hidden email]
http://collab.sakaiproject.org/mailman/listinfo/sakai-ux 

TO UNSUBSCRIBE: send email to [hidden email] with a subject of "unsubscribe"




--
- Gonzalo
_______________________________________________
sakai-ux mailing list
[hidden email]
http://collab.sakaiproject.org/mailman/listinfo/sakai-ux

TO UNSUBSCRIBE: send email to [hidden email] with a subject of "unsubscribe"