mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-03-14 12:40:01 +01:00
Code Issues Projects Releases Wiki Activity

MDL-38691 form: Styling for show more/less toggle

Browse Source
This commit is contained in:
Frederic Massart 2013-03-26 17:18:47 +08:00
parent 83284dc962
commit c55cd6ac64
2 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
lib/form/yui/showadvanced/showadvanced.js vendored
View File

@ -24,7 +24,13 @@ YUI.add('moodle-form-showadvanced', function(Y) {
}, },
CSS = { CSS = {
SHOW : 'show', SHOW : 'show',
MORELESSTOGGLER : 'morelesstoggler' MORELESSACTIONS: 'moreless-actions',
MORELESSTOGGLER : 'moreless-toggler',
SHOWLESS : 'moreless-less'
},
WRAPPERS = {
FITEM : '<div class="fitem"></div>',
FELEMENT : '<div class="felement"></div>'
}, },
ATTRS = {}; ATTRS = {};
@ -73,15 +79,24 @@ YUI.add('moodle-form-showadvanced', function(Y) {
fieldset.get('id') + "'", 'debug'); fieldset.get('id') + "'", 'debug');
return; return;
} }
var morelesslink = Y.Node.create('<a href="#"></a>'); var morelesslink = Y.Node.create('<a href="#"></a>');
morelesslink.addClass(CSS.MORELESSTOGGLER); morelesslink.addClass(CSS.MORELESSTOGGLER);
if (statuselement.get('value') === '0') { if (statuselement.get('value') === '0') {
morelesslink.setHTML(M.str.form.showmore); morelesslink.setHTML(M.str.form.showmore);
} else { } else {
morelesslink.setHTML(M.str.form.showless); morelesslink.setHTML(M.str.form.showless);
morelesslink.addClass(CSS.SHOWLESS);
fieldset.all(SELECTORS.DIVFITEMADVANCED).addClass(CSS.SHOW); fieldset.all(SELECTORS.DIVFITEMADVANCED).addClass(CSS.SHOW);
} }
fieldset.one(SELECTORS.DIVFCONTAINER).append(morelesslink);
var fitem = Y.Node.create(WRAPPERS.FITEM);
fitem.addClass(CSS.MORELESSACTIONS);
var felement = Y.Node.create(WRAPPERS.FELEMENT);
felement.append(morelesslink);
fitem.append(felement);
fieldset.one(SELECTORS.DIVFCONTAINER).append(fitem);
}, },
switch_state : function(e) { switch_state : function(e) {
e.preventDefault(); e.preventDefault();
@ -93,9 +108,11 @@ YUI.add('moodle-form-showadvanced', function(Y) {
// Invert it and change the link text. // Invert it and change the link text.
if (statuselement.get('value') === '0') { if (statuselement.get('value') === '0') {
statuselement.set('value', 1); statuselement.set('value', 1);
this.addClass(CSS.SHOWLESS);
this.setHTML(M.util.get_string('showless', 'form')); this.setHTML(M.util.get_string('showless', 'form'));
} else { } else {
statuselement.set('value', 0); statuselement.set('value', 0);
this.removeClass(CSS.SHOWLESS);
this.setHTML(M.util.get_string('showmore', 'form')); this.setHTML(M.util.get_string('showmore', 'form'));
} }
} }

3
theme/base/style/core.css
View File

@ -270,6 +270,9 @@ a.skip:active {position: static;display: block;}
.mform fieldset.fdate_selector label {display:inline;float: none;width: auto;} .mform fieldset.fdate_selector label {display:inline;float: none;width: auto;}
.mform .ftags label.accesshide {display: block;position: static;} .mform .ftags label.accesshide {display: block;position: static;}
.mform .ftags select {margin-bottom: 0.7em;min-width: 22em;} .mform .ftags select {margin-bottom: 0.7em;min-width: 22em;}
.mform .moreless-toggler {background: url([[pix:t/more]]) left center no-repeat; padding-left: 16px;}
.dir-rtl .moreless-toggler {padding-left: 0; padding-right: 16px; background-position: right center; }
.mform .moreless-less {background-image: url([[pix:t/less]]);}
.mform .helplink img { margin: 0 0 0 .45em; padding: 0;} .mform .helplink img { margin: 0 0 0 .45em; padding: 0;}
.dir-rtl .mform .helplink img { margin: 0 .45em 0 0; padding: 0;} .dir-rtl .mform .helplink img { margin: 0 .45em 0 0; padding: 0;}
.mform legend .helplink img { margin-right: .2em; } .mform legend .helplink img { margin-right: .2em; }