Item9571: Unify buttons (make BUTTON buttons more flexible)

Priority: Normal
Current State: Being Worked On
Released In: n/a
Target Release: major

Applies To: Extension
Component:
Branches:

Reported By: ArthurClemens
Waiting For:
Last Change By: ArthurClemens

1. possibility to have the button generated as link (no button style and no icon, as in the topic actions at the page bottom)
2. pass text, title and accesskey so they can be translated as one sentence (otherwise the 'accesskey' string is out of context, lost in the .po file). For example, this would be used in the template: %MAKETEXT{"text='Edit' accesskey='e' title='Edit this topic text'"}%. Alas BUTTON (and other macros?) does not read the single quotes.
3. disabled state: not clickable, "grayed out" link and button graphic
4. skinnable graphic and label style, ideally size as well

1. CSS classes should not change names
2. The CSS should be kept with the jquery button plugin

1. do not use a background image
2. have skinnable colors (and gradient)
3. have rounded borders on modern browsers (mac, ie9)
4. work across all major browsers (gradients, icons, rounded borders only mac and new win browsers)
5. can have an optional icon like current BUTTON
6. do not use float, so no %CLEAR% needed to prevent overlapping page elements

Current BUTTONs

<a class="jqButton jqButtonDefault jqInitedButton" href="#"><span><span class="jqButtonIcon" style="background-image:url(%PUBURLPATH%/%SYSTEMWEB%/DocumentGraphics/add.png)">Create a new topic</span></span></a>

Proposed BUTTONs and button styles

<button type="submit" class="xjqButton" name="action_button">Create new topic</button>

<a href="#" class="xjqButton">Create new topic</a>

<a href="#" class="xjqButton xjqButtonDisabled">Edit</a>

Rendered examples

CSS

To resolve

• BUTTON macro:
  • Support for access keys
• CSS:
  • You cannot use jqButtonDisabled and jqButtonRed at the same time. Perhaps a class jqButtonEnabled is needed.
  • How to add skinning if this jquery button css is loaded after the skin css? Somehow the skin css should be loaded after plugin css.