| Project: | Advanced help |
| Version: | 6.x-1.2 |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
Hello,
Not really requests, a few suggestions?
Suggestion 1:
I tried advanced help buttons directly in Drupal admin forms. I stuck them straight into otherwise standard checkboxes.
In Firefox (can't test cross-browser, I'm afraid), I found the buttons were triggering scrollbars. Presumably due to the combination of anchors going block level, floating right, and sliding .pngs (only happens when you press the button).
There are as many ways of fixing this as there are eggs in a supermarket. Float the surrounding div (yuch - every Druapl form item), wrap in divs (shame, really) etc.
I found a one pixel margin fixes it, i.e.
> help-icon.css
margin-top: 2px;
becomes,
/*margin of at least 1px blocks scrollbars in Firefox*/
margin:2px 1px 1px;
Depends on your screen space, I guess.
Suggestion 2:
It's a combination of my low res TFT and general haste, but I used Views for nearly 4 evenings before I realised those buttons were help buttons.
Anyhow, I like big buttons (where you can fit them in), so I added a css class mod to the php code,
> advanced_help.module > theme_advanced_help_topic()
Change the class lines like this,
switch ($type) {
case 'icon':
$text = '' . t('Help') . '';
$class = 'ttm-help-link' . (($size == 'large') ? '-large' : '');
break;
case 'title':
$text = $info['title'];
$class = 'advanced-help-title' . (($size == 'large') ? '-large' : '');
break;
default:
$class = 'advanced-help-title' . (($size == 'large') ? '-large' : '');
$text = $type;
break;
}
A new .png for the bigger button (attached, 3x the size - 24px, sorry, turned out a slightly different blue).
Then new css in,
> help-icon.css
like this (note this has the pixel fix also),
.ttm-help-link-large span, .ttm-help-link span {
display: none;
}
.advanced-help-title-large{
font-size:14px;
/*margin of at least 1px blocks scrollbars in Firefox*/
margin:1px;
}
.help-link-large{
background:transparent url(help_large.png) no-repeat top left;
display:block;
width:24px;
height:24px;
/*margin of at least 1px blocks scrollbars in Firefox*/
margin:6px 1px 1px;
padding:0px;
}
.help-link{
background:transparent url(help.png) no-repeat top left;
display:block;
width:12px;
height:12px;
/*margin of at least 1px blocks scrollbars in Firefox*/
margin:6px 1px 1px;
padding:0px;
}
.help-link-large:hover {
background-position: 0px -24px;
}
I figured text needs less enlarging (it's clear anyway), so it goes from stock Drupal 12px to 14px.
Suggestion 3:
Well, this is probably way too far, but I wanted my icons to go right as well as left, so I stuck a parameter and extra class in for float right/left/NULL(no float).
if ($float == 'right') {
$class .= ' fright';
}
elseif ($float == 'left') {
$class .= ' fleft';
}
and css,
.fright {
float:right;
}
.fleft {
float:left;
}
My final theme call looks like,
MyModule_help_link($topic, $type='icon', $size = 'small', $float = NULL) {
...
}
And a standard Drupal admin checkbox, with advanced help button, now looks like the attached .png.
Suggestion 4:
A note in the help files that 'Advanced Help' starts working as soon you put the files in, it doesn't need a reinstall or anything. May seem obvious, but if you are a new user, it cuts out one area where you may have gone wrong.
And just to finish, I was thinking of AJAXing my own solution to this when I remembered Views did this somehow. I really like this module.
| Attachment | Size |
|---|---|
| advanced_help2.png | 5.52 KB |
| help_large.png | 1.91 KB |
Comments
#1
An extra snippet,
To do this, I made my own theme hacked from the Advanced Help code. So I don't have a patch on hand. If you like any of this, I'll make you a patch.
Rob
#2
And just occurred to me,
Suggestion 5:
My last step was to put the button into a custom checkbox.
This could be generalised. We could try overriding theme_form_element() and adding an Advanced Help button. This would need testing for looks on all visual elements (I will do that, if you're interested). The user instructions would be nice, though,
"Advanced Help can add a help button to any of your form items. Add the property "#help_topic" to any visual form item, like this,
$form['MyItem'] = array('#type' => 'checkbox',
'#help_topic' => 'something-useful',
'#title' => t('Checkbox with Advanced Help button'),
'#description' => t('This might be friendly for your form users.'),
'#default_value' => 0,
);
"
#3
I am very interested in this. I like your images, and a #help_topic item in the form stuff is something I"ve always wanted. I haven't figured out how to render it, though, without having to introspect an entire form.
#4
Wel, ok. I was interested in my final fly comment too, so I sunk the basic function into the theme registry and got big advanced help buttons appearing everywhere, which was cheering.
I don't know a great deal about this, but I understand some modules do this ( which does not make it good practice, necessarily), so there are precedents.
By 'introspect' do you mean calling functions in a general manner, such as this approach does? And therefore burning CPU power on displays which will never be rendered, as the user does not want a button there?
I probably have nothing new to offer, but here are ideas anyway,
Simple way
Advanced Help could provide a couple of custom elements, say advanced_help_checkbox and advanced_help_radios. Not as cute as our discussion so far.
Working with what we have
#after_build might do it? Never tried it.
Not quite as tidy,
la la...#help_topic => 'bail-me-out',
#after_build => array('advanced_help_inject'),
From the outside
Got to get the element property out somehow, can't think that through. But once there, jQuery can handle DOM injection in a couple of lines.
Depends on your point of view, but inspiring/excessive .png attached (there's even a help button on a 'title' field...)
#5
I got fed up of Drupal's custom form provision, so I did the above. It's not user elegant, but it is on-demand provision of help.
Instructions to a user
1. Add this to your form somewhere,
drupal_add_js(drupal_get_path('module', 'advanced_help') . '/js/advanced_help_form_element_inject.js', 'module');2. On any form element you want to add help to, add this custom property,
'#after_build' => array('advanced_help_help_append_icon'),and now you can style the icon with this property, and set of values,
'#help_topic' => array('topic' => 'term-theme', 'style' => 'icon', 'size' => 'large', 'align' => 'right'),(well, thats the list of options to my theme, anyhow).
This function collects #ids and uses the theme (just a function in my code) to build the code, then dumps it all into Drupal.settings.
function advanced_help_append_icon($element) {$data = array();
$ht = $element['#help_topic'];
// I suppose this should be a theme (but it isn't).
// Maybe the theme should be passed into Drupal.themes, but that seems
// ornate for something so fixed in form.
$link = ttm_help_link($ht['topic'], $ht['style'], $ht['size'], $ht['align']);
// drupal_add_js() can concatenate repeated calls (while regarding the namespace).
$data['advanced_help_inject'][$element['#id']] = $link;
drupal_add_js($data, 'setting');
return $element;
}
'advanced_help_form_element_inject.js' cycles through the provided values and packs the code into the form,
Drupal.behaviors.advanced_help_inject = function() {jQuery.each(Drupal.settings.advanced_help_inject, function(k, v) {
$("#"+k).parent().before(v);
});
}
And that's all (horrible to debug, though)