viadeo / tetra-ui Goto Github PK

This annoys me to hell. Every time that we want to talk about a feature of tetra-ui and would like to throw a link in the chat we find that we cannot do this.

You can only go to a page by opening the page, then clicking some tab, scroll down and then you find the information. It's like we're combining the worst of two worlds; we have totally separate pages that are sharing one URL.

• increase font size
• increase vertical padding (between the arrow and text)

There are a few environment-specific files in the repository. For example:

• project.sublime-project
• pom.xml (not entirely sure about this one)

The icon font miss an icon for the icon button "Follow a company" ("Suivre cette entreprise" in french).

We could use the Company icon as an inspiration for this one (with a little plus sign (+) maybe).

in the file tetra-ui / less / avatars.less there is a style defined for when the avatar is an anchor. I would like to have it changed a bit so that avatars IN anchors have the same appearance. Like this: (mind the gap... between a and .avatar)

a.avatar, a .avatar {
  img {
    .transition(background-color 0.2s);
  }

  &:hover {
    img { [etc] } 
  }
}

What is your opinion on this? Would it have adverse effects?

Hello,

In the component generic_autocomplete (used in Viadeo's Profile), when an user click on a first autocomplete input and quickly to an another autocomplete input, the previous (the first) is not closed, two suggestion list appear (see screenshot).

The problem is a race condition which cant hide the previous suggestion list, the container object and id has been overrided by the new suggestion list.

Proposed patch:

Before:

me.methods.suggestions.hide();
// ...
'.autocomplete input':function (e, elm) {
    me.methods.reinit(elm);
    window.setTimeout(function () {
        me.methods.suggestions.hide();
    }, 200);
}
// ...
hide:function () {
    me._container.removeClass('active');
},

After:

me.methods.suggestions.hide(me._containerId);
// ...
'.autocomplete input':function (e, elm) {
    var prevContainerId = me._containerId;
    me.methods.reinit(elm);
    window.setTimeout(function () {
        me.methods.suggestions.hide(prevContainerId);
    }, 200);
}
// ...
hide: function(containerId) {
    _('#' + containerId).removeClass('active');
}

Thanks a lot for this excellent toolkit!

Marko

PS: Referenced as Redmine 31816

Hello,

In the component generic_autocomplete (used in Viadeo's Profile), when an user enter a school name, a suggestion list appear and if the user press enter, an error occure (in the rest of the application) because the suggestion list is empty and the sugggestion list dont close because me._containerId has been overrided.

Proposed patch:

Before:

case 13: // enter
    // avoid enter to allow form submit
    e.preventDefault();
    elm = me._container.find('.autocomplete-menu li.active');
    me.methods.suggestions.clickOnSuggestion(elm);
    me.methods.suggestions.hide();

    break;

After:

case 13: // enter
    // avoid enter to allow form submit
    e.preventDefault();
    elm = me._container.find('.autocomplete-menu li.active');
    var prevContainerId = me._containerId;
    if (elm.length) {
        me.methods.suggestions.clickOnSuggestion(elm);
    }
    me.methods.suggestions.hide(prevContainerId);

    break;

Thanks a lot for this excellent toolkit!

Marko

PS: Not related to a Redmine

To optimize navigation with a keyboard.

• Removing Tianji build because nobody uses it
• Removing some components

Would be great to be able to open and close dropdown components programmatically just like popins.

Something like this, where ddId would be a unique reference to the component instance (same as data-param for yesNo component)

page.notify('dd: open', { id: ddId }); 
page.notify('dd: close', { id: ddId }); 

Exemple use case : you want to close the dropdown once you clicked on a child element of this dropdown

We already have the possibility to display custom radio buttons instead of the natives OS components, that would be awesome to have custom checkboxes too.

Lead buttons

In the global-sprite2.png there is a twitter logo that does not follow the guidelines from twitter (background-position: -169px -721px)
The twitter logo has to be white or blue (the twitter blue), it can't have a border or have a gradient as a background.
See hrer for more informations: https://twitter.com/logo

We should follow a styleguide to ensure code consistency.

There is a document about that on the internal wiki: CSS Naming Conventions and Coding Style (internal link) but these rules are currently not followed in Tetra UI :(

I think we should set a styleguide, update the Tetra UI source files accordingly and put this styleguide in the repository's wiki (it can be part of some Contributing Guidelines).

Are you agree with that ?
Are you agree with the styleguide on the internal wiki ? (contributors are welcome)

The HTML5 required attribute specifies that the user must fill in a value before submitting a form.

Browsers come with default styles for the :invalid state of HTML5 form validation. (i.e. in Firefox, the field has a red border)

By default, focused required inputs get the :invalid styles when empty.

I propose to remove the browser's :invalid styles only for the required attribute. It might confuse the user to see red borders when he is just trying to fill the form.

Hello,

In the component generic_autocomplete (used in Viadeo's Profile), when an user type a fake school name, a JSON call is maked and an empty "completion" object is returned in the response (see above), a empty box is shown with a wipe animation (see screenshot).

Empty Ajax response:

{"status":"SUCCESS","data":{"completion":{}},"alerts":{},"errors":[],"count":0}

Screenshot:

Proposed patch:

Before:

'display suggestions':function (suggestionsPack) {
    var suggestions = {};

After:

'display suggestions':function (suggestionsPack) {
    // Check if the response content one or many suggestions
    var havingSuggestion = false;
    for (var suggestion in suggestionsPack.data.completion) {
        havingSuggestion = true;
        break;
    }
    if (!havingSuggestion) {
        // No suggestion to show
        return;
    }

    var suggestions = {};

Thanks a lot for this excellent toolkit!

Marko

PS: Referenced as Redmine 31819

from

me._input.val(value);

to

if (typeof value !== 'undefined' && value.length > 0) me._input.val(value);

Is it possible to handle the clickout event with the popin?

Hey guys,

For example,
http://translate.google.com/translate?hl=en&sl=en&tl=el&u=http%3A%2F%2Fviadeo.github.com%2Ftetra-ui%2Fdoc%2Ficons.html

as you can see most of the icons are distorted.

We found that issue when @bartjo tested the new new address book, and as it happens he also had auto-translate from French to English enabled. There was a location icon on the page, which is denoted by the letter L. Google translate decided to translate it to "the", which resulted in 3 icons appearing, instead of one location icon.

http://docpad.org/docs/begin

“Creating custom collections via the configuration file”

CSS specificity for ".core-form .btn" is greater than ".btn-large" overriding the padding and font-size for .btn-large, .btn-lead, or .btn-small.

• Should we remove .core-form of the .btn selector? Is .core-form on .btn really useful?
• Or should we update all buttons selectors to include core-form?

Follow this :

1. Display a static popin with content from the data-target-id
2. Display an external popin with content from the data-target-url
3. Close the visible popin
4. Display the previous static popin

There we are. The context of the static popin is lost.
Indeed, there is no more html content in the element.
Consequently the static popin content is empty.

Please, keep me updated.

Cheers.

Using this:

https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L135-L157

Adding the possibility to have an orange line instead of blue in the case of major boxes:

Once upon a time the tooltips were visible on the Components tab of the documentation. In fact, they are still named in the page-header. They're not there anymore. I think that's a mistake that should be corrected.

• Transparent border (keeping border to avoid layout bugs)
• Transparent background (keeping padding)

For example on the page http://viadeo.github.com/tetra-ui/doc/forms.html

The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. 

You can search for Bootstrap to get other mentions.

margin side didn't change as padding when i switch test direction.

Implementing simple tabs with hashes, for example:

<ul class="nav nav-tabs">
  <li><a href="#item-1">Item 1</a></li>
  <li><a href="#item-2">Item 2</a></li>
</ul>

<div id="item-1">
…
</div>

<div id="item-2">
…
</div>

Design improvements on this component:

The class must override the height of the element.

2 fixes need to be made in generic_autocomplete.js
1/ replace .html() by .text() when clicking on suggestion and updating the value in the input field : prevent & from becoming & in the field.
2/ remove the encodeURIComponent , coz it seems to "double encode" the string when doing the query.

These changes has been commited on svn, but not through github.

It would be awesome if we could have a location-icon in the base icon font. Something like these:

A logical position would be at the letter "L" for location.

@JeffWeb I could name it .overlay or .layered for example.

• http://docpad.org/
• https://github.com/shama/grunt-docs

Hello,

In the component generic_autocomplete (used in Viadeo's Profile), when an user use IE 7, type a school name, the suggestion list dont appear because a jQuery error appear on a selector

Error:

SCRIPT5022: Syntax error, unrecognized expression: li: first-child 
tetra-viadeo-VNS.js, Ligne 735 Caractère 2

Proposed patch:

Before:

me._menu.find('li: first-child').addClass('active');

After (removing the space):

me._menu.find('li:first-child').addClass('active');

Thanks a lot for this excellent toolkit!

Marko

PS: Not related to a Redmine

Adding the possibility to close boxes like the alert boxes already do.

And not only on fields

Copy-paste from this text for example:
http://ar.wikipedia.org/wiki/%D9%82%D8%B7

most of tetra-ui blocks got css width, so why not create a "margin: 0 auto" class ?
Could be useful if context needs.

See http://blog.mediaandme.be/ to fix placeholder component (forms).