===== See All link =====
**Usage example**

<code>
see_all_link(:total_count => <total records available>, :visible_count => <number of records initially displayed>, :update => <ID of div to update>, :url => <url of action that will render all the records>, :item_style => <style of each item that is rendered as list>)
</code>

**Options:**
:total_count - This has to be the total records that are available for the given entity.

:visible_count - The number of records that will be initially displayed as well as when clicked on "See Less"

:url - This will be the action that is responsible for rendering all the records.

:update - This is the ID of the html element that will be updated with the response of the action that is specified in :url option.

:item_style - The "See All" link in most of the cases will be used to display list of records. When render a record in the view, each of the record should be wrapped within an html element with same css class. The name of the css class should be passed to this option.

E.g If I am rendering list of recommendations then, I need to wrap each recommendation within a common css class.
<code>
- recommendations_given.each do |recommendation|
  .a_dummy_style_name
    = "#{recommendation.title} - #{recommendation.user.full_name}"
</code>

The implementation of the "See All" link can be found in my_learnings/recommendations_given_controller and related views can be found at corresponding views folder.

===== Manual Input pagination link =====
{{:manual_input_pagination.png|}}

**Usage examples:**

__Type 1 (will generate an ajax pagination link)__

<code>
= will_paginate(collection, :renderer => ManualPageInputPaginationLinkRenderer, :remote => {:hash_for_path => hash_for_xxx_path, :update => 'div_to_update'})
</code>

__Type 2 (will generate an ajax pagination link which will point to the action from which the view was rendered)__
<code>
= will_paginate(collection, :renderer => ManualPageInputPaginationLinkRenderer, :remote => :update => 'div_to_update'})
</code>

__Type 3 (will generate a normal link)__
<code>
= will_paginate(collection, :renderer => ManualPageInputPaginationLinkRenderer)
</code>

**Options:**

- :remote - Use this if the pagination has to be ajaxified.

- :remote => :hash_for_path - This options has to be a hash which points to an action. e.g. {:action => 'show', :controller => 'users'}. If one want to use a restful route then the hash_for* can be used here. e.g. hash_for_users_path. The hash_for* is created by rails for each of the routes defined in routes.rb.

- :remote => :update - Specify the ID of the html element that has to updated with the response.

The implementation of this pagination can be found in "views/my_learnings/recommendations/_index.html.haml"

===== Profile Page panel ====
This panel can be used to create panels similar to the ones seen on Profile View mockup. Usage of this helper avoids the code duplication for the header part of it and the panels on the page would be consistent.

<code>
 profile_page_panel(opts, &block)
</code>

**Options:**

options is a hash with the following keys

  * :title => The title of the panel,
  * :group_name => the group_name parameter passed to panel_for
  * :side_panel => if true then panel is aligned on the right most of the page otherwise on the left side
  * :count => the count to be displayed on the header
  * :see_all_opts => If passed this would create a see all link with this options('See All' link options can be referred above)
  * :pagination_opts => The pagination options needed to be passed to will_paginate as mentioned above.

The code that renders content of the panel should be passed as a block to this method.

Sample implementation can be found at - app/views/users/recently_shared/_index.html.haml and at - app/views/users/comments_made/_index.html.haml

 
===== More link =====

Used to expand and collapse large amount of text.

**Usage:**

<code>
= truncate_words_with_more_link(text, number_of_words_to_display_initially)
</code>

===== User profile image with chat status =====

{{:avatar_ui_example.png|}}

**Usage:**

<code>
= avatar_for(user, options) 
</code>

**Options:**

  * :size - Can be :thumb, :medium, :large (default is :medium)
  * :show_chat_status - True/false. Indicates whether to show the chat status icon or not (default is false)

===== Inline Popup =====

{{:popup_ui_example.png|}}

**Usage:**

<code>
= link_to_popup(name, options)
</code>

**Options:**

  * :id - ID of the popup
  * :show_expander - True/false. Setting true will show a small arrow next to the link which indicates whether the popup was expanded or collapsed. (Default is true)
  * :remote - A hash that represents all the options that are valid for remote_function.
  * :header_text - Text that will be shown as header of the popup
  * :popup_direction - The direction where the popup will show. Can be :up, :down, :left or :right (default is :down)
  * :padding - True/false. If set to true then the padding will be placed between the popup inner borders and the actual content of the popup.
  * :color - Color of the inner panel of the popup (Default is 'white')
  * :actions - Array of html elements that will appear in the bottom of the popup along side the "Close" button. Ususally this can be a "Save" button that might submit the contents of the popup.
  * :width - The width of popup. Should be an integer value i.e. specify 200 and not 200px

**Note:** To programatically close the popup use the close_popup(id) helper method. Id here is the ID that is specified in the link_to_popup call.

===== Custom scrollbar =====

{{:scrollable_content_ui_example.png|}}

**Usage:**

<code>
- scrollable_content(options) do
  = some scrollable html here 
  = some html here 
</code>

**Options:**

  * :id - ID of the main container
  * :height - Height after which the scrollbars should appear

===== Display of rating stars =====

{{:rating_stars_ui_example.png|}}

**Usage:**
<code>
stars(value, size, color)
</code>

**Arguments:**

  * value - The value of the rating. A numeric value.
  * size - Can be 'large' or 'small'. Default is 'small'
  * color - Can be 'orange' or 'yellow'. Default is 'yellow'

===== Chat link =====

{{:chat_link_ui_example.png|}}

**Usage:**

<code>
 = chat_link(from, to)
</code>

Both from and to should be objects of User model.

===== Miscellaneous links =====

The links like "Follow", "Like", "Bookmark", "Share" can be obtained by following helper methods. All the methods take the object which has to be worked upon as a parameter. e.g. in case of "Like" pass object of comment for liking a comment, pass an object of user for liking a user etc...

  * following_for(followable)
  * liking_for(likeable)
  * bookmark_for(bookmarkable)
  * share_link(shareable)


===== Flash for ajax calls =====

To display the flash UI for ajax calls use 

  * flash_notice - To display notice message
  * flash_warning - To display warning or error message 

**Usage: **

In the action's render section do something like below

<code>
render :update do |page|
  if(success)
    page << flash_notice("Yes done")
  else
    page << flash_warning("Nop")
  end
end
</code>