Permalink
Browse files

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

  • Loading branch information...
1 parent 83284dc commit c55cd6ac64f12ee87481a0d7b17850f980286855 @FMCorz FMCorz committed Mar 26, 2013
Showing with 22 additions and 2 deletions.
  1. +19 −2 lib/form/yui/showadvanced/showadvanced.js
  2. +3 −0 theme/base/style/core.css
@@ -24,7 +24,13 @@ YUI.add('moodle-form-showadvanced', function(Y) {
},
CSS = {
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 = {};
@@ -73,15 +79,24 @@ YUI.add('moodle-form-showadvanced', function(Y) {
fieldset.get('id') + "'", 'debug');
return;
}
+
var morelesslink = Y.Node.create('<a href="#"></a>');
morelesslink.addClass(CSS.MORELESSTOGGLER);
if (statuselement.get('value') === '0') {
morelesslink.setHTML(M.str.form.showmore);
} else {
morelesslink.setHTML(M.str.form.showless);
+ morelesslink.addClass(CSS.SHOWLESS);
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) {
e.preventDefault();
@@ -93,9 +108,11 @@ YUI.add('moodle-form-showadvanced', function(Y) {
// Invert it and change the link text.
if (statuselement.get('value') === '0') {
statuselement.set('value', 1);
+ this.addClass(CSS.SHOWLESS);
this.setHTML(M.util.get_string('showless', 'form'));
} else {
statuselement.set('value', 0);
+ this.removeClass(CSS.SHOWLESS);
this.setHTML(M.util.get_string('showmore', 'form'));
}
}
@@ -270,6 +270,9 @@ a.skip:active {position: static;display: block;}
.mform fieldset.fdate_selector label {display:inline;float: none;width: auto;}
.mform .ftags label.accesshide {display: block;position: static;}
.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;}
.dir-rtl .mform .helplink img { margin: 0 .45em 0 0; padding: 0;}
.mform legend .helplink img { margin-right: .2em; }

0 comments on commit c55cd6a

Please sign in to comment.