mercadolibre / chico Goto Github PK

View Code? Open in Web Editor NEW

341.0 99.0 91.0 28.97 MB

A collection of easy-to-use UI components.

Home Page: http://chico.mercadolibre.com

License: MIT License

JavaScript 65.27% CSS 18.35% HTML 16.38%

chico's Introduction

Chico UI

A collection of easy-to-use UI components.

IMPORTANT NOTICE: this project is deprecated and unmaintained. Only critical bugs will be fixed.

Installation

Install it using npm:

$ npm install chico

For a specific version, please check the releases section.

Development

Make sure to have Git and Node installed.

Fork the repo and create a new branch —or just create a new branch if you have permissions.
Once you have your local copy, install its dependencies:
```
$ npm install
```
Install Gulp:
```
$ npm install gulp -g
```
Install Browsersync:
```
$ npm install browser-sync -g
```
Run the dev task
```
$ gulp dev
```
This will open the "ui" version at http://localhost:3040 in your default browser. The "mobile" version is at http://localhost:3040/mobile.
Make all necessary changes, and when all is ready, open a PR.

Code style and formatting

Make sure your code is complying with the following documents:

Tests

Run all tests using:

$ npm test

This will run all tests in the terminal using PhantomJS.

Since tests are executed using the Karma test runner, so feel free to run them in another browser. For example, If you want to use Google Chrome run:

./node_modules/.bin/karma start --browsers Chrome

Documentation and live demos

For more information, documentation, or to see live demos, check our official website.

Special thanks

Guille Paz (@pazguille).
Her Mammana (@hmammana).
Lean Linares (@lean8086).
Natan Santolo (@natos). Creator and former leader, now traveling around the world, drinking beer and looking for the secret of eternal life.
Nati Devalle (@taly). Because we love her. She is awesome!
Oleh Burkhay (@atmaworks).

License

chico's People

Contributors

Stargazers

Watchers

Forkers

chicoui hmammana lean8086 nallegrotti natos jentanbernardus irojas ignacioiglesias boygagaoriginal yaoduren123 superforest gspandy lulabrizuela woerwin duankai chu888chu888 jcozzitorti hzbdesigner wudi kasin cyberwani black516 airpotion pazguille wichtig ndevalle marianoperez pyzhangxiang mgimenez sleopardo yoeloco zhishan332 nicolasavila89 liudejun coocon jekey fhchina gandre dosaba 1987santiago ibarbieri longhongjun marcoscaceres26 victorknust goupviet ignacioribes pmontesano lquintana soppezzo atma jmsg78 tauchter sabustamante renattorenatto vrleonel tracyll diazmartin sigh0829 stasiva lydxy smartfire constanzauanini krlosg 0xslipk jadulled jsantacruzktz 24775714 pabloscillia jpaulinoger hgarzon dudesl nachomena ffelixml bardo1 gustavo17 ale30p ifreddyrondon rotjo neysimoes cuanini thiagocaggiano jupcalvo joaquinhq93 juliadanka polem4rch felipecavassana edrangel

chico's Issues

Update Carousel test cases

Include elastic behavior and sizes configured by parameters

Over lupa en Picture Viewer

Al ingresar en el picture viewer se muestra la lupa, aunque no se este sobre la imagen para abrir el modal.

Create a method for automate the creation of interfaces

Watchers and other components are repeating code for creating interfaces with the same structure. We could create a method somewhere to automate this process and shave some bytes.

Positioner: Into an iframe, it's positioning respect to iframe

For example in http://chico-ui.com.ar/en/components Modal is positioning at center of iframe

Viewer: Map support

Add support to Map on Viewer component: http://www.chico-ui.com.ar/?q=node/28.

Update Viewer test cases

Include Video support on Viewer test-cases

Create a small keyboard event handler so components can lisent keyboard events and subscribe to call actions.
This handler should trigger friendly keyword event like "enter" or "esc" so in a component you could:
$(document).bind("enter", function(){ component.send(); });
$(document).bind("esc", function(){ component.close(); });
The handler should trigger like:
$(document).trigger(ch.events.KEY.ENTER);

Carousel: Define with and height trough arguments

Carousel: Define with and height trough arguments.

$().carousel({ width: 330, height: 100 });

tablas!!!

Algo para tablas! tipo el admin de mercadoclics :)

Los labels no dan foco al campo

Estuve viendo que los labels no dan foco al campo input.
Probé agregarle overflow:hidden; ya que los elementos internos están flotados y comenzó a tomar el evento.

FF 3.6.13 Ubuntu

Viewer: Use only one instance of modals

We have a serious issue with performance here. Viewer is creating a lot of modals and using a lot of memory.
We need to handle a singleton instance of a modal component.

LoadContent: Add headers to ajax request

Actually we are sending a querystring x=x to let the server know when is an ajax request. There is a better way to do this, by creating a header in the request. Available with jQuery 1.5

Don't remove the query string for backwards compatibility.

Error not revalidated on blur when field is empty

Given a a watcher with validations other than required, on blur event it's not revalidated, hence validation errors don't go away.
This is due to pre-validation of ch.watcher.validate() method:
if ( !that.validations.hasOwnProperty("required") && that.isEmpty() ) { return; }
When the field isn't required and is empty, it just returns but it doesn't change watcher's active satus nor hides the helper message

Codelighter: Update color palette

Codelighter: Update color palette:

Improve contrast
and readability

Reference: http://ethanschoonover.com/solarized

Helper: Improve variable scope

Every Helper instances are exposing private data.

Viewer: Video support

Add support to Video on Viewer component: http://www.chico-ui.com.ar/?q=node/28

Add keyboard support to Dropdown

Support

Navigation

Codelighter doesn't support forms

Codelighter is rendering HTML when content has form tags

Create a .content() method to Floats

We need a method to set and get content from floats.

Tablas

http://wiki.ml.com/display/ux/Tablas+MP

Bug: Required watcher doesn't work on selects

After upgrading our project from Chico 0.5.4 to 0.5.6 the Required watcher stopped working on select tags.

This is a sample page that shows the unexpected behavior:

<!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="es" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="es" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="es" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="es" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
<head>
    <script></script>
    <meta charset="utf-8">
    <title>Chico UI</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script src="http://download.chico-ui.com.ar/chico-min-0.5.6.js"></script>
    <link rel="stylesheet" href="http://download.chico-ui.com.ar/chico-min-0.5.6.css">
</head>
<body>
<div class="box">
    <form action="#">
        <fieldset>
            <ul>
                <li class="fieldBox">
                    <label class="required" for="field">
                        <span>Skub? <em>*</em></span>
                        <select id="field" required="required">
                            <option value="">-- Choose --</option>
                            <option value="1">Pro Skub</option>
                            <option value="2">Anti Skub</option>
                        </select>
                    </label>
                    <p class="help">Why is this not working?</p>
                </li>
            </ul>
        </fieldset>
        <p class="actions">
            <input type="submit" value="Send" class="btn primary">
        </p>
    </form>
</div>
<script>
var form = $('form').form({
    messages: {
        required: "It's required",
    }
});
$('#field').required();
</script>

</body>
</html>

No error message is shown when the form is submitted with the "-1" value.

With prevoius versions of Chico, the value "-1" is treated as a no selection and causes a validation error when trying to submit the form, but it doesn't seem to be the case anymore. Now the empty string value "" is the one that triggers the validation error.

Desarrollar componente de input de precios

En base a la definición: http://wiki.ml.com/display/ux/Input+de+precios

Cualquier duda, me consultan a mí o PatoBlanc que lo definió. Yo estoy encargado del seguimiento y soporte.

Saludos
Ivan

Desarrollar componente calendar

Según la definición de interacción: http://wiki.ml.com/display/ux/Calendar

El sprite está en: http://wiki.ml.com/download/attachments/48435923/sprite-calendar.png?version=1&modificationDate=1303911090387

Cualquier duda me consultan.

Saludos
Ivan

First movement of CSS3 transitions don't work in Firefox 4

Only first movement don't work.

Add a download link to Mesh

Mesh dosen't have any link to download.

Modal: Use positioner on dimmer

Apply positioner method on dimmer.

Add keyboard support to Viewer

Support

Navigation
Zoom
Close

No se puede cerrar la ventana modal que se abre luego de hacer zoom en Chrome.

Lo probé en Chrome 10.0.648.204 en Ubuntu 10.10 usando la página de playground del www.chico-ui.com.ar

Compilation problems when using reserved words

Replace component.public for component["public"]

Ajustar padding de las cajas de mensajes de error

El padding de las cajas actuales son mayores a los definidos.
http://wiki.ml.com/download/attachments/20152485/error_generico.png?version=7&modificationDate=1291913227000
Saludos!
Ivan

Carrousel: Elastic width + redraw method

Carrousel: Add support to elastics widths and add a redraw method so carrousel data can be re-processed. Maybe is a good idea subscribe to the global event CHANGE_LAYOUT or something.

Delete parasito branch

We are not using that branch and its pretty old...

Watcher: Improve merge instances

Today Watchers are merging a lot of data and processing a lot of things without any particular reason. We need to improve the merge instances process.

Merge Flavors branch to master

Add a core method "delete" to erase instances from memory

And a mechanism to erase instances from the instances map to free browser memory on heavy works.

Erase a component from itself:
modal.erase( null );
Erase a instance and his family:
ch.eraser( 0 ); // uid
Erase a type of component:
ch.eraser( "tooltip" );
Erase all:
ch.eraser( "meltdown" );

With these things done

We need a delete method in every component to:

Unbind events
Remove HTML Snippets
Erase variables

Make a plan.

Watcher: URL validation is too permissive

The URL validator seem to be too permisive in Chico 0.5.7. For example the string "foo" is a valid URL, as well as any string with at least one non-whitespace character, like the string "½" or even "uʍop-ǝpısdn" or "☠".

The problem (probably) lies in the regex that Chico uses to validate URL's:

/((ftp|http|https):\/\/)?(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/

As all the groups are optional except (\S+), it makes every string a valid URL except the empty ones:

>>> /((ftp|http|https):\/\/)?(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test('|@#~½¬')
true
>>> /((ftp|http|https):\/\/)?(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test('   ')
false

Maybe the regex should check that the characters are valid ones. Or use the jQuery Validation plugin.

Expando: the component shown always open

The expando shown always open on v0.6.0 in firefox4 and chome (both on mac). Add class ch-hide to hide the content.

Validator: Double input validations

Watchers: Add suport to doble inputs validations, always use as a reference the second input.

Core: Instance components without a DOM trigger

We need to be able to create components without a DOM trigger.

Watcher.reset() disables all handlers attached to "blur" event

If I have an element with a handler attached to the "blur" event:

$(element).blur(someHandler);

And a watcher for that element:

watcher = $(element).required();

When calling watcher.reset() the event handler someHandler gets unbound from the "blur" event.

This is quite annoying, as I have to remember to re-bind the handlers after calling reset, which makes the Chico-related code highly coupled with the rest of the application.

Taking a look at Chico's code, I noticed that the reset method is calling .unbind("blur") on the element, which unbinds all the blur handlers attached to it, when it probably should only unbind the handlers that Chico has attached, calling unbind with a second argument: unbind(event, handler).

Accordion / Menu - Skin ML - Padding en .ch-bellows-content li

En el skin de ML el padding en

.ch-bellows-content li
es
3px 0 3px 20px; lo que hace que ese li quede más alto que el li contenedor (L1)

recomiendo usar el padding con valor:

0 0 0 20px;

Saludos!

Fer Martin

Avoid selecting text when double click

Avoid selecting text when double click. This behavior is odd when its comes to a Carousel, or Viewer, even Navs like Dropdown, or Accordeon,

mercadolibre / chico Goto Github PK

chico's Introduction

Chico UI

Installation

Development

Code style and formatting

Tests

Documentation and live demos

Special thanks

License

chico's People

Contributors

Stargazers

Watchers

Forkers

chico's Issues

Support

Support

With these things done

Support

Recommend Projects

Recommend Topics

Recommend Org