tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 12:05:37 +00:00
Code Issues Projects Releases Wiki Activity

Using new description style in MemberDateTimeOptionSetField

Browse Source
This commit is contained in:
Ingo Schommer 2012-11-30 12:27:38 +01:00
parent 1ca3883a76
commit 963f02e7a3
6 changed files with 89 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
admin/css/screen.css
View File

@ -555,6 +555,9 @@ form.member-profile-form #Groups .middleColumn { margin-left: 0; width: 100%; }
form.member-profile-form #Groups .middleColumn .TreeDropdownField { width: 90%; max-width: 90%; } form.member-profile-form #Groups .middleColumn .TreeDropdownField { width: 90%; max-width: 90%; }
form.member-profile-form #Permissions .optionset li { float: none; width: auto; } form.member-profile-form #Permissions .optionset li { float: none; width: auto; }
.memberdatetimeoptionset .description { font-style: normal; }
.memberdatetimeoptionset .toggle { font-size: 11px; }
.cms .cms-content { border-right: 1px solid #BBB; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; background: #eceff1; width: 800px; z-index: 40; } .cms .cms-content { border-right: 1px solid #BBB; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; background: #eceff1; width: 800px; z-index: 40; }
.cms .cms-content-fields { overflow-y: auto; overflow-x: auto; background: none; width: 100%; } .cms .cms-content-fields { overflow-y: auto; overflow-x: auto; background: none; width: 100%; }
.cms .cms-content-fields #Root_Main .confirmedpassword { border-bottom: none; box-shadow: none; } .cms .cms-content-fields #Root_Main .confirmedpassword { border-bottom: none; box-shadow: none; }

19
admin/javascript/LeftAndMain.js
View File

@ -928,25 +928,6 @@ jQuery.noConflict();
}); });
/**
* Simple toggle link, which points to a DOm element by its ID selector
* in the href attribute (which doubles as an anchor link to that element).
*/
$('.cms .cms-help-toggle').entwine({
onmatch: function() {
this._super();
$(this.attr('href')).hide();
},
onunmatch: function() {
this._super();
},
onclick: function(e) {
$(this.attr('href')).toggle();
e.preventDefault();
}
});
/** /**
* Allows to lazy load a panel, by leaving it empty * Allows to lazy load a panel, by leaving it empty
* and declaring a URL to load its content via a 'url' HTML5 data attribute. * and declaring a URL to load its content via a 'url' HTML5 data attribute.

20
admin/javascript/MemberDatetimeOptionsetField.js Normal file
View File

@ -0,0 +1,20 @@
(function($) {
$.entwine('ss', function($){
$('.memberdatetimeoptionset').entwine({
onmatch: function() {
this.find('.description .toggle-content').hide();
this._super();
}
});
$('.memberdatetimeoptionset .toggle').entwine({
onclick: function(e) {
jQuery(this).closest('.description').find('.toggle-content').toggle();
return false;
}
});
});
}(jQuery));

9
admin/scss/_style.scss
View File

@ -998,6 +998,15 @@ form.member-profile-form {
} }
} }
.memberdatetimeoptionset {
.description {
font-style: normal;
}
.toggle {
font-size: $font-base-size - 1;
}
}
.cms { .cms {
.cms-content { .cms-content {
border-right: 1px solid #BBB; border-right: 1px solid #BBB;

87
forms/MemberDatetimeOptionsetField.php
View File

@ -6,6 +6,8 @@
class MemberDatetimeOptionsetField extends OptionsetField { class MemberDatetimeOptionsetField extends OptionsetField {
public function Field($properties = array()) { public function Field($properties = array()) {
Requirements::javascript(FRAMEWORK_ADMIN_DIR . '/javascript/MemberDatetimeOptionsetField.js');
$options = ''; $options = '';
$odd = 0; $odd = 0;
$source = $this->getSource(); $source = $this->getSource();
@ -39,7 +41,11 @@ class MemberDatetimeOptionsetField extends OptionsetField {
$itemID, $this->name, $checked) $itemID, $this->name, $checked)
. sprintf('<label for="%s_custom">%s:</label>', . sprintf('<label for="%s_custom">%s:</label>',
$itemID, _t('MemberDatetimeOptionsetField.Custom', 'Custom')) $itemID, _t('MemberDatetimeOptionsetField.Custom', 'Custom'))
. sprintf("<input class=\"customFormat\" name=\"%s_custom\" value=\"%s\" />\n", $this->name, $value) . sprintf(
"<input class=\"customFormat cms-help cms-help-tooltip\" name=\"%s_custom\" value=\"%s\" />\n",
$this->name,
$value
)
. sprintf("<input type=\"hidden\" class=\"formatValidationURL\" value=\"%s\" />", . sprintf("<input type=\"hidden\" class=\"formatValidationURL\" value=\"%s\" />",
$this->Link() . '/validate'); $this->Link() . '/validate');
$options .= ($value) ? sprintf( $options .= ($value) ? sprintf(
@ -47,15 +53,6 @@ class MemberDatetimeOptionsetField extends OptionsetField {
_t('MemberDatetimeOptionsetField.Preview', 'Preview'), _t('MemberDatetimeOptionsetField.Preview', 'Preview'),
Zend_Date::now()->toString($value) Zend_Date::now()->toString($value)
) : ''; ) : '';
$options .= sprintf(
'<a class="cms-help-toggle" href="#%s">%s</a>',
$this->id() . '_Help',
_t('MemberDatetimeOptionsetField.TOGGLEHELP', 'Toggle formatting help')
);
$options .= "<div id=\"" . $this->id() . "_Help\">";
$options .= $this->getFormattingHelpText();
$options .= "</div>";
$options .= "</li>\n";
$id = $this->id(); $id = $this->id();
return "<ul id=\"$id\" class=\"optionset {$this->extraClass()}\">\n$options</ul>\n"; return "<ul id=\"$id\" class=\"optionset {$this->extraClass()}\">\n$options</ul>\n";
@ -64,42 +61,46 @@ class MemberDatetimeOptionsetField extends OptionsetField {
/** /**
* @todo Put this text into a template? * @todo Put this text into a template?
*/ */
public function getFormattingHelpText() { public function getDescription() {
$output = '<ul>'; $output =
$output .= '<li>YYYY = ' . _t('MemberDatetimeOptionsetField.FOURDIGITYEAR', 'Four-digit year', '<a href="#" class="toggle">'
40, 'Help text describing what "YYYY" means in ISO date formatting') . '</li>'; . _t('MemberDatetimeOptionsetField.Toggle', 'Show formatting help')
$output .= '<li>YY = ' . _t('MemberDatetimeOptionsetField.TWODIGITYEAR', 'Two-digit year', . '</a>'
40, 'Help text describing what "YY" means in ISO date formatting') . '</li>'; . '<ul class="toggle-content">'
$output .= '<li>MMMM = ' . _t('MemberDatetimeOptionsetField.FULLNAMEMONTH', 'Full name of month (e.g. June)', . '<li>YYYY = ' . _t('MemberDatetimeOptionsetField.FOURDIGITYEAR', 'Four-digit year',
40, 'Help text describing what "MMMM" means in ISO date formatting') . '</li>'; 40, 'Help text describing what "YYYY" means in ISO date formatting') . '</li>'
$output .= '<li>MMM = ' . _t('MemberDatetimeOptionsetField.SHORTMONTH', 'Short name of month (e.g. Jun)', . '<li>YY = ' . _t('MemberDatetimeOptionsetField.TWODIGITYEAR', 'Two-digit year',
40, 'Help text letting describing what "MMM" means in ISO date formatting') . '</li>'; 40, 'Help text describing what "YY" means in ISO date formatting') . '</li>'
$output .= '<li>MM = ' . _t('MemberDatetimeOptionsetField.TWODIGITMONTH', 'Two-digit month (01=January, etc.)', . '<li>MMMM = ' . _t('MemberDatetimeOptionsetField.FULLNAMEMONTH', 'Full name of month (e.g. June)',
40, 'Help text describing what "MM" means in ISO date formatting') . '</li>'; 40, 'Help text describing what "MMMM" means in ISO date formatting') . '</li>'
$output .= '<li>M = ' . _t('MemberDatetimeOptionsetField.MONTHNOLEADING', 'Month digit without leading zero', . '<li>MMM = ' . _t('MemberDatetimeOptionsetField.SHORTMONTH', 'Short name of month (e.g. Jun)',
40, 'Help text describing what "M" means in ISO date formatting') . '</li>'; 40, 'Help text letting describing what "MMM" means in ISO date formatting') . '</li>'
$output .= '<li>dd = ' . _t('MemberDatetimeOptionsetField.TWODIGITDAY', 'Two-digit day of month', . '<li>MM = ' . _t('MemberDatetimeOptionsetField.TWODIGITMONTH', 'Two-digit month (01=January, etc.)',
40, 'Help text describing what "dd" means in ISO date formatting') . '</li>'; 40, 'Help text describing what "MM" means in ISO date formatting') . '</li>'
$output .= '<li>d = ' . _t('MemberDatetimeOptionsetField.DAYNOLEADING', 'Day of month without leading zero', . '<li>M = ' . _t('MemberDatetimeOptionsetField.MONTHNOLEADING', 'Month digit without leading zero',
40, 'Help text describing what "d" means in ISO date formatting') . '</li>'; 40, 'Help text describing what "M" means in ISO date formatting') . '</li>'
$output .= '<li>hh = ' . _t('MemberDatetimeOptionsetField.TWODIGITHOUR', 'Two digits of hour (00 through 23)', . '<li>dd = ' . _t('MemberDatetimeOptionsetField.TWODIGITDAY', 'Two-digit day of month',
40, 'Help text describing what "hh" means in ISO date formatting') . '</li>'; 40, 'Help text describing what "dd" means in ISO date formatting') . '</li>'
$output .= '<li>h = ' . _t('MemberDatetimeOptionsetField.HOURNOLEADING', 'Hour without leading zero', . '<li>d = ' . _t('MemberDatetimeOptionsetField.DAYNOLEADING', 'Day of month without leading zero',
40, 'Help text describing what "h" means in ISO date formatting') . '</li>'; 40, 'Help text describing what "d" means in ISO date formatting') . '</li>'
$output .= '<li>mm = ' . _t('MemberDatetimeOptionsetField.TWODIGITMINUTE', . '<li>hh = ' . _t('MemberDatetimeOptionsetField.TWODIGITHOUR', 'Two digits of hour (00 through 23)',
40, 'Help text describing what "hh" means in ISO date formatting') . '</li>'
. '<li>h = ' . _t('MemberDatetimeOptionsetField.HOURNOLEADING', 'Hour without leading zero',
40, 'Help text describing what "h" means in ISO date formatting') . '</li>'
. '<li>mm = ' . _t('MemberDatetimeOptionsetField.TWODIGITMINUTE',
'Two digits of minute (00 through 59)', 'Two digits of minute (00 through 59)',
40, 'Help text describing what "mm" means in ISO date formatting') . '</li>'; 40, 'Help text describing what "mm" means in ISO date formatting') . '</li>'
$output .= '<li>m = ' . _t('MemberDatetimeOptionsetField.MINUTENOLEADING', 'Minute without leading zero', . '<li>m = ' . _t('MemberDatetimeOptionsetField.MINUTENOLEADING', 'Minute without leading zero',
40, 'Help text describing what "m" means in ISO date formatting') . '</li>'; 40, 'Help text describing what "m" means in ISO date formatting') . '</li>'
$output .= '<li>ss = ' . _t('MemberDatetimeOptionsetField.TWODIGITSECOND', . '<li>ss = ' . _t('MemberDatetimeOptionsetField.TWODIGITSECOND',
'Two digits of second (00 through 59)', 'Two digits of second (00 through 59)',
40, 'Help text describing what "ss" means in ISO date formatting') . '</li>'; 40, 'Help text describing what "ss" means in ISO date formatting') . '</li>'
$output .= '<li>s = ' . _t('MemberDatetimeOptionsetField.DIGITSDECFRACTIONSECOND', . '<li>s = ' . _t('MemberDatetimeOptionsetField.DIGITSDECFRACTIONSECOND',
'One or more digits representing a decimal fraction of a second', 'One or more digits representing a decimal fraction of a second',
40, 'Help text describing what "s" means in ISO date formatting') . '</li>'; 40, 'Help text describing what "s" means in ISO date formatting') . '</li>'
$output .= '<li>a = ' . _t('MemberDatetimeOptionsetField.AMORPM', 'AM (Ante meridiem) or PM (Post meridiem)', . '<li>a = ' . _t('MemberDatetimeOptionsetField.AMORPM', 'AM (Ante meridiem) or PM (Post meridiem)',
40, 'Help text describing what "a" means in ISO date formatting') . '</li>'; 40, 'Help text describing what "a" means in ISO date formatting') . '</li>'
$output .= '</ul>'; . '</ul>';
return $output; return $output;
} }

13
tests/behat/features/profile.feature Normal file
View File

@ -0,0 +1,13 @@
@database-defaults
Feature: My Profile
As a CMS user
I want to be able to change personal settings
In order to streamline my CMS experience
@javascript
Scenario: I can see date formatting help
Given I am logged in with "ADMIN" permissions
# Only tests this specific field and admin UI because its got built-in tooltips
When I go to "/admin/myprofile"
And I follow "Show formatting help"
Then I should see "Four-digit year"