Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SiteTree page icons update and accessibility fixes #574

Closed
hdpero opened this issue Jul 19, 2018 · 21 comments

Comments

Projects
None yet
@hdpero
Copy link
Contributor

commented Jul 19, 2018

Current SiteTree page icons
sitetree-page-icons
are kind of ugly (IMHO) and doesn't match current UI of SilverStripe 4 Admin Interface, further more they are PNG, and not SVG sprite.

Is there a new version of icons?

Related PRs

@hdpero

This comment has been minimized.

Copy link
Contributor Author

commented Jul 25, 2018

@robbieaverill @clarkepaul Based on I didn't find suitable icons in current SilverStripe Font Icons Reference I've created an SVG Sprite from IcoMoon aplication and they are from IcoMoon - Free set with CC BY 4.0 licence.

Icons are as follows:
sitetree-pagetype-icons

  • Page
  • BlogPost (SilverStripe Blog module)
  • Blog (SilverStripe Blog module)
  • Profile (SilverShop module)
  • HomePage (HomePage class or page with ID="1" - usually it is Home)
  • VirtualPage
  • ElementalPage (usage with DNADesigns Elemental module - if Page Type exists)
  • CartPage (SilverShop module)
  • CheckoutPage (SilverShop module)
  • CalendarPage (TitleDk SilverStripe Calendar module)
  • ErrorPage
  • RedirectorPage

Here is how they look like in fresh SS4 install:
sitetree-sitetree-pagetype-icons

sitetree-add-page-form

@DorsetDigital

This comment has been minimized.

Copy link

commented Jul 25, 2018

I'd agree the current icons aren't that pretty, but I'd also put a slightly different perspective (for what it's worth):

I like a clean site tree, without the noise of different icons. The names of the pages ought to provide at least some hints as to what they are. (I don't even like the icons you get with the blog module)

Lots of different icons in the SiteTree can be a visual distraction and, for a lot of users, not especially helpful. If they can't work out that the page titled 'Checkout' is the checkout page without a pretty icon, then they maybe have bigger issues!

My vote would be to keep a minimalist set of icons for the core pages, and let module authors decide if they want something.

Or, maybe an option to turn on or off 'fancy icons' too, for those curmudgeonly types like me ;-)

@clarkepaul

This comment has been minimized.

Copy link
Member

commented Jul 26, 2018

Thanks for looking into this, they are the last set of icons that need to be replaced from what I know of. I feel that the set needs to look more cohesive as these look a little busy specially if they were amongst the site tree pages all at once, they also need to work with the modified and draft status dot so they will get even busier.

With the right icons we can get them added to the admin set as SVGs, I guess what I thinking is that its an actual set designed for the likes of a site tree rather than UI icons, might not be as easy finding such a set though. From my quick search there are no obvious sets which seem to cater to the likes of a site tree like we need although Fontawesome has quite a few page type icons and its already an existing set we've used icons from (the other set we heavily use is Entypo). I will add the most obvious icons from Fontawesome that will be useful for pages. I'll share back here which ones have been added so that any gaps can be filled by adding custom SVGs into the set.

We really need them to be added to the core set to be used consistently across all modules and UIs.

@clarkepaul

This comment has been minimized.

Copy link
Member

commented Jul 27, 2018

These are what I've come up with, I don't expect all of these to be used but thought if I get enough variety it should keep most devs/users happy having some variety when building custom templates and modules.
pasted_image_27_07_18__3_03_pm

I've made them the same size as the old icons so hopefully we don't need to reposition the modified and draft dot. I've stayed away from icons which are filled as they attract a lot of attention when they are all next to each other.

Feedback/question/requests welcome before I add these to the set properly.

@be2n

This comment has been minimized.

Copy link

commented Jul 27, 2018

Do we need an event page icon?

@clarkepaul

This comment has been minimized.

Copy link
Member

commented Jul 27, 2018

The event icon is already in the set as a calendar icon already, just doesn't have the page shape so I should have added it to the list really ;) cheers

@hdpero

This comment has been minimized.

Copy link
Contributor Author

commented Jul 27, 2018

Feedback/question/requests welcome before I add these to the set properly.

Icons are nice. @clarkepaul are you planing to add them to Font Icons?

From Slack
tractorcow [Yesterday 12:01 AM]
I wonder if we should switch to font icons for everything
it'd be great if sitetree could support that too.

I agree with Damian it would be more versatile if Sitetree supports font icons.

@clarkepaul

This comment has been minimized.

Copy link
Member

commented Jul 27, 2018

Yup thats the plan, I be adding them to the font but they can also be used as SVGs if we choose to do so at a later date.

@purplespider

This comment has been minimized.

Copy link

commented Aug 7, 2018

@clarkepaul Love these! I like how they are still mostly page shaped, but with extra differentiating details where necessary.

Thinking about the page types I regularly use, it would be ace to also have:

  • List page (page icon with bulleted list icon within)
  • File page (page icon with attachment or download icon)
  • Calendar page
@kinglozzer

This comment has been minimized.

Copy link
Member

commented Aug 7, 2018

I think those icons look excellent. My suggestions to add to the list:

  • Product icon (I’m thinking ecommerce modules)
  • Something representing “location” - a map/map marker perhaps?
  • Magnifying glass (representing pages with a search/filtering)

Alternatively, if it’s possible to provide a template and an easy way to define your own icons we could leave the default set a bit lighter 😉

@clarkepaul

This comment has been minimized.

Copy link
Member

commented Aug 8, 2018

Current set...
image

@hdpero

This comment has been minimized.

Copy link
Contributor Author

commented Aug 8, 2018

@clarkepaul these are great!
What is a HEX color for those icons?

@clarkepaul

This comment has been minimized.

Copy link
Member

commented Aug 13, 2018

We would apply the colour #6F84A7 which is (or will be) the variable $grey-500 in the CMS.

@clarkepaul clarkepaul changed the title SiteTree page icons update? SiteTree page icons update Aug 22, 2018

@sachajudd sachajudd referenced this issue Aug 30, 2018

Closed

CWP site tree icons should be using default #150

3 of 3 tasks complete
@JorisDebonnet

This comment has been minimized.

Copy link

commented Dec 9, 2018

Beautiful. When might these be implemented? I don't see a milestone :)

@clarkepaul

This comment has been minimized.

Copy link
Member

commented Dec 9, 2018

They are already part of the CMS ready for use, although updating the site tree still needs to be done.

@robbieaverill

This comment has been minimized.

Copy link
Member

commented Jan 7, 2019

I think we should move towards supporting font icons in CSS sooner rather than later. I see the new icons are in the 1 branch already which is cool, but we won't be able to use them until they exist as image files without adding support for font icons too.

@clarkepaul

This comment has been minimized.

Copy link
Member

commented Jan 10, 2019

FYI we've got someone on this issue currently, hoping to get it in the next release.

@clarkepaul clarkepaul self-assigned this Jan 10, 2019

@clarkepaul clarkepaul removed their assignment Jan 10, 2019

@chillu chillu changed the title SiteTree page icons update SiteTree page icons update and accessibility fixes Jan 14, 2019

@chillu

This comment has been minimized.

Copy link
Member

commented Jan 14, 2019

@clarkepaul suggested that we address the accessibility issues of marking the currently edited page by a differently coloured status icon, see silverstripe/silverstripe-cms#2360

@robbieaverill robbieaverill added this to the Recipe 4.4.0 milestone Jan 14, 2019

@ScopeyNZ

This comment has been minimized.

Copy link
Contributor

commented Jan 14, 2019

@chillu we might want to reopen that issue about the accessibility of the active state because all the new icons have just been merged in!

@maxime-rainville

This comment has been minimized.

Copy link
Contributor

commented Jan 15, 2019

@sachajudd Was doing a PR to update the doc about how to use this feature. We should wait until that is merged to close this issue.

@maxime-rainville

This comment has been minimized.

Copy link
Contributor

commented Jan 16, 2019

@sachajudd @clarkepaul Looks like I missed something. The treeview loading indicator gets displayed over the new font icon, while previously it would completely replace it. Do you want me to raise a new issue?

Treeview loading indicator:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.