rackerlabs / canon Goto Github PK

A lot of the text used in Canon (#999 on white) does not meet minimum standards for accessibility. In this issue, I will explore updating with a color that is more accessible. (#666)

http://accessibility.psu.edu/contrasthtml

The shared header service has started rolling out a new navigation style to customers. It looks like this:

This nav was the result of a research effort from UX to solve issues with the existing primary navigation structure.

I know there are multiple people working on navigation changes in another project

I have opened a pull request that implements these styles in a Canon way, and am looking for feedback.

So, is this something we want in Canon?

Eyebrow specifications

Eyebrow height: 40px
Menu Items:

• Font size: 13px
• Font weight: Bold
• Color: #CCCCCC (I believe Andrew has already made this change, may not be merged)

Pages that require updating:

• App Layout > Layout Framework: Example needs to be updated.
• App Layout > Navigation: Utility nav example needs new screenshot.
• Demo

Table of Contents

• Summary
• Annotations
• Images / Files

It doesn't appear that http://canon.rackspace.com is available. Is this an internal-only resource?

Designers are having a hard time keeping the docs up-to date because installing and maintaining a codebase on their computers is quite a bit of overhead just to update some static HTML pages.

We'd like to get the documentation moved to a platform that has less overhead.

We see this as a way to make sure more of the "tribal knowledge" around Canon is documented in a clear and logical way. (Currently there is a lot that is in the hearts and minds of designers but not documented on the web for others to benefit from)

The loading-indicator.gif is 16x16. For high res screens ideally it would be 32x32 and resized using either the height/width attribute or using css.

FYI noticed some of the graphics aren't Retina/high res e.g. the dropdown caret

In Mailgun, for our user account dropdown, I went ahead and used an icon font (from Font Awesome).

I'm trying to solve the problem of icons having to be specially positioned. Reach has special styles to position icons, but when we work with other CPs and they implement vanilla Canon, the icons end up off-center. Example:
http://4171e85bd5350b7f3558-7c534b3f9f8fab11de918744d806e281.r77.cf5.rackcdn.com/TinyGrab%20Screen%20Shot%204-21-15,%2011.46.19%20AM.png

@bradgignac suggested that if we switched to an icon font it would solve the problem. I put together a list of FontAwesome substitutes. Many of these are also the same icons being used by Cloud Intelligence w/ Canon-Bootstrap, so changing our icon set could make it one step easier for teams to migrate to Canon-Bootstrap in the future.

External link: fa-external-link
Cog: fa-cog
Pencil: fa-pencil
Error: fa-exclamation-triangle
Sort Asc: fa-sort-asc
Sort Dsc: fa-sort-desc
Caret: fa-angle-down
Question mark: fa-question-circle
Plus: fa-plus-square-o
Checkmark: fa-check-square
Hamburger: fa-bars
Delete: fa-minus-circle

Discuss...

The demo site currently doesn't have an icon library for things like paperclips (for attachments), carats, up & down arrows, etc.
These little pieces are really helpful when trying to implement variations on a pattern and it would be nice to reuse what we have in other parts of the website for maximum consistency.

Underline Tooltip

CSS:
border-bottom: 1px dotted #999;

Add styles for:

• variable meter widths: xsmall, small, medium, large...
• add blue version (#1e6ec1)
• classes for Details layout
  • default at small width?
  • align text next to the meter (right margin?)
    

We need to find a way to have an "add attachment"/file upload mechanism for simple cases. (different than cloud files)

Things to consider:
-drag and drop is rad
-drag and drop is not accessible thus cannot be the only means of adding files
-try not to take up too much space

I want a class that I can use for gray external links. Here is an example:

This is a change in development to monitoring.rackspace.net, which broke during the last Canon release since the sprite offsets shifted and I'm hard coding the offset in a custom stylesheet. I'd like to prevent that from happening again.

Add multiple sizes and tweak styles per Johnson's design:

https://github.com/racker/reach/issues/8357#issuecomment-29783382

Prototype with classes and sizes: http://jsfiddle.net/johnsoniscool/KR9t9/

Font Mfizz is a FontAwesome extension that includes icons for operating systems, databases, etc. I could see it being a really useful addition for Rackspace control panels, especially in combination with FontAwesome.

http://mfizz.com/oss/font-mfizz

Any chance we could add them to Canon?

I've been dogfooding canon-bootstrap for a pet project of mine and have a use case that doesn't seem to be addressed anywhere in canon. Since this is really a design issue and not a theming/implementation issue, I think it belongs here. I have a section of my app that I really want users to click. Here's how I did it before re-skinning it according to canon (green box added for illustration):

I had the UI rendering it as a button, but it behaved as a nav link. Here's the new design in canon-bootstrap:

Is there a way to give extra weight to a nav item in canon, and if so, what should I do to style this particular element? If this is something canon does not address, can we come up with a solution that is idiomatic in canon?

What patterns need to be looked at for version 2.0?

Team platypus is working on adding carets that appear when hovering over a primary nav menu item in Reach. Currently, the spacing provided by rs-dropdown is a bit too wide for this purpose.

Here's how it looks now:

Here's how we would like it to look.

CDN has a need for drag and drop table rows and I believe @annwa also needs it for MyRack. I have a design and desired behavior below.

How many CPs would want to use this before it would be considered as a Canon pattern? If we don't want it as a Canon pattern now, is there anything that I should try to communicate to the Backups team in terms of how it's built so that it can be more easily incorporated later?

Similar behavior to this: http://jqueryui.com/sortable/#placeholder

@annwa also interested in any design feedback.

Will post any required 2x images here

The bootstrapping script fails with node 0.12 but message provided insists that node version must only exceed 0.10, which it clearly does.

As we've discussed the path from Canon to Canon Bootstrap, concerns over the value-effort trade-off have been raised by a number of different teams. Specifically, the following issues have been raised:

• A full migration is going to be risky and expensive.
• Not every team will have the resources to devote to a migration.
• Most of the teams who are already using Canon were early adopters. By changing libraries, we are penalizing early adopters by forcing them to perform another migration.
• Canon is the result of ~1800 commits and ~30,000 lines of code and documentation by a dozen contributors. As the Paper Street team has found, there is a tremendous amount of work to replicate all of Canon's features inside Canon Bootstrap. By just switching to a new library, we're essentially throwing away this work and creating a new pool of work for a project that already lacks full-time developers.

So far, we've assumed that a fork in the road is necessary to move to a Bootstrap-based design framework. I don't believe that is the case and propose the following strategy for introducing Bootstrap into Canon.

1. Release Canon v2.0 essentially as it exists today (v1.8.1) but with one major difference: it packages a skinned version of Twitter Bootstrap to make it look at home alongside Canon. Most of this work has already been done in the Canon Bootstrap repository.
2. Introduce a series of minor version releases that re-implement Canon's rs-* classes in terms of Bootstrap. For example, .rs-btn becomes an alias for .btn in Bootstrap. This prevents a complete re-write of frontend code to use the new class names. Additionally, it means teams who are using rs-* classes continue to receive improvements without rewriting their control panel. The key with this step is very small, focused releases to minimize the risk of defects.
3. As patterns have been successfully ported to Bootstrap, introduce deprecations for the Canon's rs-* classes. They will continue to work and (in most case) receive updates, but new code should use Bootstrap's version of classes instead.
4. Introduce Canon v3, fully built on Twitter Bootstrap. All deprecated rs-* will be removed. This is likely 12-18 months in the future.

I think this approach works well because it minimizes rework, allows a more gradual migration path, and continues to deliver improvements to teams already using Canon for many months to come. What do you think?

Spacing between the text and the icon shouldn't depend on an actual space character. (Lauren said I should post this.)

Canon currently has no guidance on how search results should be formatted when they are returned. Currently most searches do not give an indication of how the search changed the results (i.e. perhaps bolding where search terms match the items being searched)

This puts the search at risk for looking like it didn't do anything. (especially when the amount of search terms returned is so great that the length of the list doesn't change due to pagination/scroll/etc.)

We'd really like to bump the nav down 2px so that it aligns with the logo.

Current:

Proposed:

The Cloud Office Control Panel is loving development with Canon! You are the giants upon whose shoulders we stand!

As @mkropat is building out a list page, we are discovering that the icons needed for the search field are still only just contained in reach cp. Can we get the following icons in the image sprite and a few classes for the search input field overlay div?

• inactive
• active
• active-hover

summary: Big companies' buttons not as flat (more gradient) than front-end/smaller companies framework buttons.

Flat vs Gradient (not flat)

Flat Button Pro/Cons

Pro

• Less clutter
• Less css
• Playful
• Minimal
• Modern web
• Aesthetically-pleasing
• IMO big flat buttons look out-of-place on the Reach CP when I applied them

Con

• Blends into the UI
• Might not be noticeably clickable (counter: add in hover/active/focus states)
• Relies on button size for visibility
• Relies on intense color hues for visibility
• Playful
• Reach UI is more narrow in height (dense) than flat buttons sizes
• Trendy design fad [counter: users will understand the universal flatness button visual language]
  http://www.nngroup.com/articles/windows-8-disappointing-usability/
  http://contrastrebellion.com/

Gradient Button Pro/Cons

Pro

• High visibility
• Good contrast if applied correctly

Con

• Get with the times, man: Not modern looking/ is passé
• Gradient too strong is garish
• Everyone hates gradients nowadays?
• Too much css / load time

Conclusion: Flat + Gradient in a subtle way

Iterations

Hey guys we need to make sure we aren't referencing any documentation that is hosted internally on our public github. Specifically:

• http://canon.rackspace.com
• https://github.rackspace.com/canon/canon/wiki/Environment-Configuration
• https://github.rackspace.com/canon/canon/wiki

I propose we move the canon example site to an public cloud server or something. I'll issue a PR to resolve the internal wiki links.

Resource interpreted as Font but transferred with MIME type application/json

I’ve been using it along with the already existing rs-status-disabled to have better tabular readability etc.

.rs-table-status-disabled {
background-color: #cccccc !important;
}

background color was set to match rs-status-disabled background and important tag was added to keep consistency with the other rs-table-status:background-color defs.

http://bffbc6aa58130727e531-8f0791872d93c373c3baf8313b6289e3.r31.cf1.rackcdn.com/Clipboard%20Image%2012-11-13%201.06.13%20PM.png

Notes from Jacob:
This is a concept for a new pattern that E&A may need. E&A wants to progressively add popovers, not all at once. I know I've seen this somewhere, but I can't find it. FWIW, Windows does this a lot (and we did it in Webmail) and never has an "unsaved indicator", but I think the should. Maybe Windows 8 does?

Use case: Use when editing details is a mix of inputs on page and popovers, with only one master Save button; if popover value is edited, it is highlighted as unsaved until user clicks 'Save'.

We often use color as a sole means of encoding information (status, etc.)
After looking at our colors through colorblind simulation in photoshop we probably need to revisit them.

Also Jacki has mentioned that people have been complaining about the monitoring status indicators (little squares)

rs-processing-indicator currently has a bad background-image rule:

background-image: image-image-url('processing-indicator.gif');

Gonna fix it.

CSS:

• we don't have to restyle the actual headers and hrs...

h3 {
margin: 0 0 15px;
}

h4 {
margin-bottom: 3px;
}

p {
color: #666;
}

hr {
margin: 20px 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #fff;
}

ul {
margin: 0 0 10px 25px;
padding: 0;
}

li {
margin-bottom: 5px;
}

.rs-main.rs-panel sections with a help sidebar (pulled right) would look significantly better if they had a minimum height. Something reasonable.

In the case that the main content of the page is quite small, but the side bar has a decent bit of help text, having a minimum height would cause the appearance to be significantly improved.

Currently this is a problem because the .rs-main.rs-panel and its child rs.content.rs-panel will need to take on the same min-height otherwise it just looks like jank.

here lie all things that exist in the canon-o-sphere but somehow aren't represented on canon.rackspace.com yet 😕

This issue documents design ideas around a potential "focus panel" which could serve as the base component for multiple extra-application process views like:

• Login
• Modals
• Release Notes
• Interstitial screens w/o app chrome

The idea here is that these views are based on a panel view which either entirely leaves out application navigation, or restricts it in modal fashion.

Canon currently uses a full-height column background on layouts with a right sidebar. Unfortunately, these columns are notoriously difficult to implement in a generic way and come with many trade-offs. This is a well-known problem going all the way back to the early 2000s. Once you combine fluid columns, multiple columns, and responsive features, it is pretty much impossible to implement. By including this style in Canon, we impose a lot of necessary restrictions on Canon users. The easiest solution is simply to remove the background styles altogether.

Answer first: Where do we use hrs now?

New CSS

hr {
margin: 20px 0;
border-color: #ddd
}

Developing against Canon is hard. Make it easy by removing ruby as a dependency.

From Nathan House:
I think it would be useful to others to have this added to upstream.
I¹ve been using it along with the already existing rs-status-disabled to
have better tabular readability etc.

.rs-table-status-disabled {
background-color: #cccccc !important;
}

Here I find the need to indicate most actions are disabled on this row while the information is still useful to the end user. I’m open to changing the color darker too as was just matching the background color of the existing rs-status-disabled class. The important tag was added for consistency with the other rs-table-status- classes etc.

This is a placeholder issue for design documentation for messaging in Canon. More to come.

WHAT: Cloud Intelligence has some use cases where we'd like to use the following pattern for letting users know when they have accomplished some action.

AFAICT this pattern exists outside of canon, but is a generally recognized pattern that we'd like to standardize.

HOW: This could be done in a couple of different ways depending on how framework-ready the Reach implementation is. I'll have to do a small investigation to figure out.

1. Crib the code from Reach, then forward port to canon-bootstrap.
2. Implement in canon-bootstrap first, possibly with a prototype in Intelligence. Then backport to canon if desired (probably, since we want to share more with Reach).

From Dave Williams:
I’m thinking through a major revamp of the cloud office control panel that structurally deviates from the 2 level canon list-detail model in that it has lists, details, and sub-details that are way more complicated than can be jammed into a popover (as canonical doctrine prescribes here). I see that mycloud already deviates with the 3-level server listing / server / monitoring, but I’m not particularly in love with how that works navigationally without a breadcrumb. I’ve also never enjoyed how the ‘back to parent’ link is crammed in there. So how does this seem as an option? Maybe we can discuss on Tues...

Reported by @annwa, radio buttons no longer align properly.

Nav Specifications

rs-nav-primary:

• Min-height: 74px

rs-nav:

• Padding-top: 20px

Active:

• Color: #c40022
• No underline

Hover:

• Color: #333333
• No underline

Logo:

• Margin-top: 3px

Pages that need to be updated

App Layout

Summary

• Example needs to be updated
• 3rd bullet point should be removed

Header & Navigation

• Example needs new screenshot; should include a drop down panel
• Primary Navigation: Remove 3rd bullet point
• Secondary Navigation: Add second bullet point indicating that the Top Tasks are an optional section.

Content Area
All screenshots need to be updated

UI Components

Dropdowns

• Update Primary Dropdown Example

Primary Dropdown

• Update example
• Update bullet: "Primary dropdowns are used when your application requires a secondary navigation. Use category styles to break up long lists of menu items."
• Remove second bullet

Demo