mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 12:05:37 +00:00
Using new description style in MemberDateTimeOptionSetField
This commit is contained in:
Ingo Schommer
parent
1ca3883a76
commit
963f02e7a3
@ -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 #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-fields { overflow-y: auto; overflow-x: auto; background: none; width: 100%; }
|
||||
.cms .cms-content-fields #Root_Main .confirmedpassword { border-bottom: none; box-shadow: none; }
|
||||
|
||||
@ -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
|
||||
* and declaring a URL to load its content via a 'url' HTML5 data attribute.
|
||||
|
||||
20
admin/javascript/MemberDatetimeOptionsetField.js
Normal file
20
admin/javascript/MemberDatetimeOptionsetField.js
Normal 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));
|
||||
@ -998,6 +998,15 @@ form.member-profile-form {
|
||||
}
|
||||
}
|
||||
|
||||
.memberdatetimeoptionset {
|
||||
.description {
|
||||
font-style: normal;
|
||||
}
|
||||
.toggle {
|
||||
font-size: $font-base-size - 1;
|
||||
}
|
||||
}
|
||||
|
||||
.cms {
|
||||
.cms-content {
|
||||
border-right: 1px solid #BBB;
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
class MemberDatetimeOptionsetField extends OptionsetField {
|
||||
|
||||
public function Field($properties = array()) {
|
||||
Requirements::javascript(FRAMEWORK_ADMIN_DIR . '/javascript/MemberDatetimeOptionsetField.js');
|
||||
|
||||
$options = '';
|
||||
$odd = 0;
|
||||
$source = $this->getSource();
|
||||
@ -39,7 +41,11 @@ class MemberDatetimeOptionsetField extends OptionsetField {
|
||||
$itemID, $this->name, $checked)
|
||||
. sprintf('<label for="%s_custom">%s:</label>',
|
||||
$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\" />",
|
||||
$this->Link() . '/validate');
|
||||
$options .= ($value) ? sprintf(
|
||||
@ -47,15 +53,6 @@ class MemberDatetimeOptionsetField extends OptionsetField {
|
||||
_t('MemberDatetimeOptionsetField.Preview', 'Preview'),
|
||||
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();
|
||||
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?
|
||||
*/
|
||||
public function getFormattingHelpText() {
|
||||
$output = '<ul>';
|
||||
$output .= '<li>YYYY = ' . _t('MemberDatetimeOptionsetField.FOURDIGITYEAR', 'Four-digit year',
|
||||
40, 'Help text describing what "YYYY" means in ISO date formatting') . '</li>';
|
||||
$output .= '<li>YY = ' . _t('MemberDatetimeOptionsetField.TWODIGITYEAR', 'Two-digit year',
|
||||
40, 'Help text describing what "YY" means in ISO date formatting') . '</li>';
|
||||
$output .= '<li>MMMM = ' . _t('MemberDatetimeOptionsetField.FULLNAMEMONTH', 'Full name of month (e.g. June)',
|
||||
40, 'Help text describing what "MMMM" means in ISO date formatting') . '</li>';
|
||||
$output .= '<li>MMM = ' . _t('MemberDatetimeOptionsetField.SHORTMONTH', 'Short name of month (e.g. Jun)',
|
||||
40, 'Help text letting describing what "MMM" means in ISO date formatting') . '</li>';
|
||||
$output .= '<li>MM = ' . _t('MemberDatetimeOptionsetField.TWODIGITMONTH', 'Two-digit month (01=January, etc.)',
|
||||
40, 'Help text describing what "MM" means in ISO date formatting') . '</li>';
|
||||
$output .= '<li>M = ' . _t('MemberDatetimeOptionsetField.MONTHNOLEADING', 'Month digit without leading zero',
|
||||
40, 'Help text describing what "M" means in ISO date formatting') . '</li>';
|
||||
$output .= '<li>dd = ' . _t('MemberDatetimeOptionsetField.TWODIGITDAY', 'Two-digit day of month',
|
||||
40, 'Help text describing what "dd" means in ISO date formatting') . '</li>';
|
||||
$output .= '<li>d = ' . _t('MemberDatetimeOptionsetField.DAYNOLEADING', 'Day of month without leading zero',
|
||||
40, 'Help text describing what "d" means in ISO date formatting') . '</li>';
|
||||
$output .= '<li>hh = ' . _t('MemberDatetimeOptionsetField.TWODIGITHOUR', 'Two digits of hour (00 through 23)',
|
||||
40, 'Help text describing what "hh" means in ISO date formatting') . '</li>';
|
||||
$output .= '<li>h = ' . _t('MemberDatetimeOptionsetField.HOURNOLEADING', 'Hour without leading zero',
|
||||
40, 'Help text describing what "h" means in ISO date formatting') . '</li>';
|
||||
$output .= '<li>mm = ' . _t('MemberDatetimeOptionsetField.TWODIGITMINUTE',
|
||||
public function getDescription() {
|
||||
$output =
|
||||
'<a href="#" class="toggle">'
|
||||
. _t('MemberDatetimeOptionsetField.Toggle', 'Show formatting help')
|
||||
. '</a>'
|
||||
. '<ul class="toggle-content">'
|
||||
. '<li>YYYY = ' . _t('MemberDatetimeOptionsetField.FOURDIGITYEAR', 'Four-digit year',
|
||||
40, 'Help text describing what "YYYY" means in ISO date formatting') . '</li>'
|
||||
. '<li>YY = ' . _t('MemberDatetimeOptionsetField.TWODIGITYEAR', 'Two-digit year',
|
||||
40, 'Help text describing what "YY" means in ISO date formatting') . '</li>'
|
||||
. '<li>MMMM = ' . _t('MemberDatetimeOptionsetField.FULLNAMEMONTH', 'Full name of month (e.g. June)',
|
||||
40, 'Help text describing what "MMMM" means in ISO date formatting') . '</li>'
|
||||
. '<li>MMM = ' . _t('MemberDatetimeOptionsetField.SHORTMONTH', 'Short name of month (e.g. Jun)',
|
||||
40, 'Help text letting describing what "MMM" means in ISO date formatting') . '</li>'
|
||||
. '<li>MM = ' . _t('MemberDatetimeOptionsetField.TWODIGITMONTH', 'Two-digit month (01=January, etc.)',
|
||||
40, 'Help text describing what "MM" means in ISO date formatting') . '</li>'
|
||||
. '<li>M = ' . _t('MemberDatetimeOptionsetField.MONTHNOLEADING', 'Month digit without leading zero',
|
||||
40, 'Help text describing what "M" means in ISO date formatting') . '</li>'
|
||||
. '<li>dd = ' . _t('MemberDatetimeOptionsetField.TWODIGITDAY', 'Two-digit day of month',
|
||||
40, 'Help text describing what "dd" means in ISO date formatting') . '</li>'
|
||||
. '<li>d = ' . _t('MemberDatetimeOptionsetField.DAYNOLEADING', 'Day of month without leading zero',
|
||||
40, 'Help text describing what "d" means in ISO date formatting') . '</li>'
|
||||
. '<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)',
|
||||
40, 'Help text describing what "mm" means in ISO date formatting') . '</li>';
|
||||
$output .= '<li>m = ' . _t('MemberDatetimeOptionsetField.MINUTENOLEADING', 'Minute without leading zero',
|
||||
40, 'Help text describing what "m" means in ISO date formatting') . '</li>';
|
||||
$output .= '<li>ss = ' . _t('MemberDatetimeOptionsetField.TWODIGITSECOND',
|
||||
40, 'Help text describing what "mm" means in ISO date formatting') . '</li>'
|
||||
. '<li>m = ' . _t('MemberDatetimeOptionsetField.MINUTENOLEADING', 'Minute without leading zero',
|
||||
40, 'Help text describing what "m" means in ISO date formatting') . '</li>'
|
||||
. '<li>ss = ' . _t('MemberDatetimeOptionsetField.TWODIGITSECOND',
|
||||
'Two digits of second (00 through 59)',
|
||||
40, 'Help text describing what "ss" means in ISO date formatting') . '</li>';
|
||||
$output .= '<li>s = ' . _t('MemberDatetimeOptionsetField.DIGITSDECFRACTIONSECOND',
|
||||
40, 'Help text describing what "ss" means in ISO date formatting') . '</li>'
|
||||
. '<li>s = ' . _t('MemberDatetimeOptionsetField.DIGITSDECFRACTIONSECOND',
|
||||
'One or more digits representing a decimal fraction of a second',
|
||||
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)',
|
||||
40, 'Help text describing what "a" means in ISO date formatting') . '</li>';
|
||||
$output .= '</ul>';
|
||||
40, 'Help text describing what "s" means in ISO date formatting') . '</li>'
|
||||
. '<li>a = ' . _t('MemberDatetimeOptionsetField.AMORPM', 'AM (Ante meridiem) or PM (Post meridiem)',
|
||||
40, 'Help text describing what "a" means in ISO date formatting') . '</li>'
|
||||
. '</ul>';
|
||||
return $output;
|
||||
}
|
||||
|
||||
|
||||
13
tests/behat/features/profile.feature
Normal file
13
tests/behat/features/profile.feature
Normal 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"
|
||||
Loading…
x
Reference in New Issue
Block a user