Notes:

• All haml as the same view - no more distinction that the customer can invoke.
• CSS media queries for density, collapsing and breaking into blocks
• Use js to detect the fold or number of items in a set: maybe go with a few simple rules
• js for counting the number of rows and
• Classing on a threshold .blocks (less than 12 rows)
  http://codepen.io/andyfitz/pen/LIwKi

This is to track the discussion around responsive design elements.

This is to track the discussion and design of buttons.

This is to track the discussion of updates for the header.

This is to track the discussion of the addition of Modernizr.

This is to track and contain discussions around Iconfont / SVG library/spritelibrary.

Discussion about possible cool names for Converge-UI. Since we want to have it as an independent upstream project, Converge-UI doesn't work that well.

We are also looking for name for our online guide (web where are presented components and related information). Or will it be just .......-web (-guide)?

So as Conductor demands to work with or without javascript, I would like to propose
some changes in the converge-ui login views and layouts. Unfortunatelly these changes also
require some work in Katello to be done. But overall I think this will lead to better solution
then we have now.

The basic idea is to get rid of the converge-ui's login_layout.html.haml and separate
the forms into partials which would be then rendered in corresponding views. So the
converge-ui changes would be following:

Organize views:

• instead of login_layout.html.haml create separate partials for each
  form (action) eg. converge-ui/rails/views/partials/_user_sessions_new.haml.haml.
• we can remove the get_string helpers as it will not be necessaryas we can
  provide the translated strings as locals in rendering the partial (see below)

In Conductor/Katello we'll have converge-ui symlinks:

app/views/layouts/converge-ui/_user_sessions_new.html.haml
app/views/layouts/converge-ui/_password_resets_new.html.haml
app/views/layouts/converge-ui/_password_resets_edit.html.haml
app/views/layouts/converge-ui/_login_retrieval_new.html.haml
app/views/layouts/converge-ui/_user_session_layout.html.haml

The example of partial(_user_sessions_new.html.haml):

= content_for(:content) do
  .card#user_sessions_new
    = form_tag path, :id => 'login_form', :method => "post", :remote=>true do
      %fieldset.primary
        = label_tag :username, username_string
        = text_field_tag :username, params[:username], :class => 'username', :id => "username"
      %fieldset.primary
        = label_tag :password, password_string
        = password_field_tag :password, params[:password], :class => 'password', :id => 'password-input'
      %div.group.secondary_actions
        %span
          = login_password_retrieval_string
      = submit_tag login_submit_string, :class => "button fr", :id => 'login_btn'
      .spinner

The get_string() calls are substituted by local variables which are passed
when rendering the partial.

With these changes, we can use the following "cascaded" views structure for the login:

Restful user_sessions#new action renders app/views/user_sessions/new.html.haml

render :partial => "layouts/converge-ui/user_sessions_new", :locals => { :form_path => user_session_path, :password_string => t("user_sessions.password") }

the view will be rendered with layout "login" which is Conductor's own and is specified in controller.

app/views/layouts/login.html.haml - Conductor's layout that includes contents_for head with styles, js, login_logo, title, notifications etc. that are common for all the login views.

...
render :partial => "layouts/converge-ui/user_session_layout", :locals => {:no_script_string => t("noscript_warning")})

app/views/layouts/converge-ui/user_session_layout.html.haml

...
render :partial => "layouts/converge-ui/base"

Restful Controllers structure:

UserSessionsController

before_filter :require_no_user, :only => [:new, :create]
before_filter :require_user, :only => :destroy
layout "login"

new - displays login form

create - authenticate user and either redirects to root_url

       or renders #new with error

destroy - destroy

PasswordResetsController

layout "login"
before_filter :require_no_user

new - displays password reset form

create - sends the email with reset link if email and username

      matches, redirects to user_sessions#new with success notice

edit - checks for user with password_token and if it's not timed out:

      redirect_to user_sessions#new with notice || displays password
      reset form

update - checks for user with password_token and if it's not timed out,

      updates the user (logs him in) and redirects to root_url with
      the reset successful message

**LoginRetrievalsController*

layout "login"
before_filter :requires_no_user

new - displays usernames retrieval form

create - sends the email with usernames related to given email

      and redirects to user_sessions#new with success notice

PROS & CONS:

• we get nice restful solution ready to support js and non-js responses
• get rid of the get_string() method and related helpers, it will not matter
  which translation solution we use.
• Katello will have to update it's solution to changes done in converge-ui

This is to discuss checkbox and radio JS-enhancements.

This is to discuss alternatives to jQuery UI progress bar.

Liberation webfonts should be packaged in separate package. There is no need to bundle it together.

Tracking the discussion and addition of helper classes.

Like Katello, a hierarchical navigation system is needed. When visiting a page, it is useful to have some form of nav system. For example here on github you'll see Code, Network, Pull Requests,... and then once clicking there you'll see the next level of hierarchy (Issues -> Browse Issues, Milestones), and even a third level (eg. in new issue there is Write and Preview).

Selecting a nav level should update either the URL or a breadcrumb system.

Unlike Katello's, having the menus dynamic is preferable. This allows customization of what is shown to be modified at runtime and not just at server restart.

This issue is created for us to specify notation and unified rules of creating and referring variables across multiple UI components.

The header for katello will have the total of unread events
Clicking the header notofication number should mark all the notifications displayed on that page as read.

The header for conductor will include an additional sticky messages factor for notifications that require acknowledging in some way.

This would be displayed as [ 9 ] -of- [ 40 ] for example where clicking either will take you to to the notification centre

Implementation for existing UI

We will style the katello notification list and conductor event log to use the same table class

<table class="notifications">  
  <tr class="error">
    <td class="date">05:02 on 29-08-2012 ....
    <td class="description"> Something failed  ? ...
    <td class="actions">
      <a class="btn accept">restart </a>
      <a class="btn delete ">delete </a> ...
  </tr>
</table>

datestamp will get a reduced visual priority while the status class on the TR will style the event

Instead of

KT.something_global


"The header for katello will have the total of unread events
Clicking the header notofication number should mark all the notifications displayed on that page as read.

The header for conductor will include an additional sticky messages factor for notifications that require acknowledging in some way.

This would be displayed as [ 9 ] -of- [ 40 ] for example where clicking either will take you to to the notification centre" - @andyfitz

This is to track the changes being made to the footer.

• Rework current SCSS files so that they use Compass mixins (especially for CSS3 features).
• For future files, keep using Compass
• Create new mixin only if it is not covered by Compass library,
• Document all mixins which are available for us to use

(Compass documentation http://compass-style.org/reference/compass/)

Hi,

it would be quite useful to update alchemy.gemspec with missing information like description, summary, license so we could use them when packing the gem for Fedora.

This is to track the addition of tables as a feature within ConvergeUI.

This is to discuss ideas around a JS-enhanced select box.

This is to discuss ideas around a JS-enhanced file chooser.

This is to discuss ideas around a JS-enhanced datepicker.

This is to discuss alternatives to jQuery UI dialog.

This thread is to discuss possibilities for a JS-enhanced multi-select form input.

Originally posted by Tzu-Mainn Chen:

"Hi,

I was wondering if it would be practical to have requirements-level documentation published somewhere for the great amount of converge-ui work coming up. It would ensure that everyone was on the same page, and also give a good starting point for outsiders like myself to find answers to questions, and possibly raise concerns.

For example, on Friday, Andy showed some really nice tab navigation, and true to my contrary nature, I spent five minutes figuring out how to ask where the subnavigation would go (I had thought that the tabs would be dropdowns). He was kind enough to explain the answer to me, but I'm guessing it would have been easier for everyone involved if I had been told to RTFM.

I don't think it would have to be anything too detailed; something along the lines of the text here, without the HAML on top:

http://convergeui.readthedocs.org/en/latest/resources/layouts.html

I dunno, what do people think?

Thanks,
Tzu-Mainn Chen"

One of my colleagues suggested, that we can use Font Awesome [1] library for our icons. From my point of view, it doesn't look as that bad idea. What others think?

[1] http://fortawesome.github.com/Font-Awesome/

This is to discuss the addition of a JS-library to handle resizing of components.

So I was thinking "wouldn't it be nice if we could just print a regular html ordered list of useful tips as a first-use tour for conductor/katello and have it progressively enhance until it was a full fledged tour system.

Turns out someone had that idea first.
http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin

It's a very good implementation. I'm thinking we should loot it completely and only strip out the css to replace with our own (button/message style).

Take it from an Aussie, there is no shame in stealing.

A common problem on dense/complex web application's is that long names don't fit in the spaces they set for them. The natural approach is to ellipsis text up to a point and provide a tooltip that displays the missing text. While CSS3 and thus some browsers supports this for single-line text, a mechanism needs to be provided to in an intelligent way use CSS and JavaScript to ellipsis text for multiple lines and instantiate a tooltip only when text has an ellipsis.

The tabs need an updated styling that will be reflected as part of the header update work. These tab updates should still support the optional configuration of having a 'context switcher' due to the Katello requirement for the ability to switch organizations.

This is to discuss a JS-enhanced range input.

This is to discuss a JS-enhanced number input.

Notes:

• Started / starting as pulse animation ( wont work in ie but acceptable )
• red border - some problems?
• red border flashing - some problems happening right now
• red background white text - massive
• black background white text represents a blocker maybe?

This is to track the addition of a grid system.

This is to track addition and updates to typography.

This is to track the addition of new Form styling and interactions.

http://codepen.io/andyfitz/pen/DdjoK

They do not stack (as in you cannot do .spin-forever.pulse )

useful for declaring what nice animation you would like upon introduction of an element.

.fade-down would be useful for almost all our disclosures like the notification stack.

these shouldn't be done with JS implementations as animations are only nice to have an not essential

Due to the overall size of jQuery UI and lack of usage of it's components it should be removed.

• Progress Bar
• Datepicker
• Resizable
• Dialog