diff --git a/admin/css/screen.css b/admin/css/screen.css index 0246987ec..9dd19d473 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -133,6 +133,8 @@ body, html { font-size: 12px; line-height: 16px; font-family: Arial, sans-serif; .cms .ui-widget-header .ui-icon-closethick { background: url('../images/sprites-32x32-sb47394f892.png') 0 -102px no-repeat; width: 30px; height: 30px; } .cms .ui-state-hover { cursor: pointer; } .cms .ui-widget input, .cms .ui-widget select, .cms .ui-widget textarea, .cms .ui-widget button { color: #444444; font-size: 12px; font-family: Arial, sans-serif; } +.cms .ui-accordion .ui-accordion-header { border-color: #c0c0c2; margin-bottom: 0; } +.cms .ui-accordion .ui-accordion-content { border: 1px solid #c0c0c2; border-top: none; } /** This file defines common styles for form elements used throughout the CMS interface. It is an addition to the base styles defined in framework/css/Form.css. @package framework @subpackage admin */ /** ---------------------------------------------------- Basic form fields ---------------------------------------------------- */ @@ -205,6 +207,13 @@ form.small .field input.text, form.small .field textarea, form.small .field sele .fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding: 8px 0 0 8px; } .fieldgroup .fieldgroup-field .field { border: none; padding-bottom: 0; } +.ss-toggle { margin-bottom: 8px; } +.ss-toggle .ui-accordion-header { font-weight: bold; } +.ss-toggle .ui-accordion-header.ui-state-default { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgyNDEsIDI0MiwgMjQyLCAwLjgpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDIwMSwgMjA1LCAyMDYsIDAuOCkiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(241, 242, 242, 0.8)), color-stop(100%, rgba(201, 205, 206, 0.8))); background-image: -webkit-linear-gradient(rgba(241, 242, 242, 0.8), rgba(201, 205, 206, 0.8)); background-image: -moz-linear-gradient(rgba(241, 242, 242, 0.8), rgba(201, 205, 206, 0.8)); background-image: -o-linear-gradient(rgba(241, 242, 242, 0.8), rgba(201, 205, 206, 0.8)); background-image: -ms-linear-gradient(rgba(241, 242, 242, 0.8), rgba(201, 205, 206, 0.8)); background-image: linear-gradient(rgba(241, 242, 242, 0.8), rgba(201, 205, 206, 0.8)); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } +.ss-toggle .ui-accordion-content { padding: 16px 0 8px 0; } +.ss-toggle .ui-accordion-content .field { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding-left: 16px; padding-right: 16px; } +.ss-toggle .ui-accordion-content .field:last-child { margin-bottom: 0; } + /** ---------------------------------------------------- Checkbox Field ---------------------------------------------------- */ .field.checkbox { padding-left: 184px; margin-bottom: 8px; } .field.checkbox input { margin-left: 0; } diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index 7519b2555..3f2eeb83e 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -429,6 +429,35 @@ form.small .field, .field.small { } } } + +.ss-toggle { + margin-bottom: $grid-y; + + .ui-accordion-header { + font-weight: bold; + + &.ui-state-default { + @include background-image( + linear-gradient(lighten($color-shadow-light, 15%), $color-shadow-light) + ); + text-shadow: 0 1px 0 rgba(255, 255, 255, .5); + } + } + + .ui-accordion-content { + padding: $grid-y*2 0 $grid-y 0; + + .field { + @include box-shadow(none); + padding-left: $grid-x*2; + padding-right: $grid-x*2; + + &:last-child { + margin-bottom: 0; + } + } + } +} /** ---------------------------------------------------- * Checkbox Field * ---------------------------------------------------- */ diff --git a/admin/scss/_uitheme.scss b/admin/scss/_uitheme.scss index a428784b9..3dded8001 100644 --- a/admin/scss/_uitheme.scss +++ b/admin/scss/_uitheme.scss @@ -109,10 +109,15 @@ font-size: $font-base-size; font-family: $font-family; } - - .ss-ui-button, - .ui-widget-content .ss-ui-button, - .ui-widget-header .ss-ui-button { + .ui-accordion { + .ui-accordion-header { + border-color: $color-button-generic-border; + margin-bottom: 0; + } + .ui-accordion-content { + border: 1px solid $color-button-generic-border; + border-top: none; + } } } diff --git a/forms/ToggleCompositeField.php b/forms/ToggleCompositeField.php index 5ddaa9190..042cba8b3 100644 --- a/forms/ToggleCompositeField.php +++ b/forms/ToggleCompositeField.php @@ -1,54 +1,94 @@ name = $name; $this->title = $title; - $this->startClosed(true); - parent::__construct($children); } - + public function FieldHolder($properties = array()) { - Requirements::javascript(FRAMEWORK_DIR . "/thirdparty/prototype/prototype.js"); - Requirements::javascript(FRAMEWORK_DIR . "/thirdparty/behaviour/behaviour.js"); - Requirements::javascript(FRAMEWORK_DIR . "/javascript/ToggleCompositeField.js"); - + Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery/jquery.js'); + Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery-ui/jquery-ui.js'); + Requirements::javascript(FRAMEWORK_DIR . '/thirdparty/jquery-entwine/dist/jquery.entwine-dist.js'); + Requirements::javascript(FRAMEWORK_DIR . '/javascript/ToggleCompositeField.js'); + Requirements::css(FRAMEWORK_DIR . '/thirdparty/jquery-ui-themes/smoothness/jquery.ui.css'); + $obj = $properties ? $this->customise($properties) : $this; - return $obj->renderWith($this->getTemplates()); - } - - /** - * Determines if the field should render open or closed by default. - * - * @param boolean - */ - public function startClosed($bool) { - ($bool) ? $this->addExtraClass('startClosed') : $this->removeExtraClass('startClosed'); } - + + public function getAttributes() { + if($this->getStartClosed()) { + $class = 'ss-toggle ss-toggle-start-closed'; + } else { + $class = 'ss-toggle'; + } + + return array_merge( + $this->attributes, + array( + 'id' => $this->id(), + 'class' => $class . ' ' . $this->extraClass() + ) + ); + } + /** - * @return string + * @return bool */ - public function HeadingLevel() { + public function getStartClosed() { + return $this->startClosed; + } + + /** + * Controls whether the field is open or closed by default. By default the + * field is closed. + * + * @param bool $bool + */ + public function setStartClosed($bool) { + $this->startClosed = (bool) $bool; + } + + /** + * @return int + */ + public function getHeadingLevel() { return $this->headingLevel; } - public function Type() { - return ' toggleCompositeField'; + /** + * @param int $level + */ + public function setHeadingLevel($level) { + $this->headingLevel = $level; } + + /** + * @deprecated 3.0 + */ + public function startClosed($bool) { + Deprecation::notice('3.0', 'Please use ToggleCompositeField->setStartClosed()'); + $this->setStartClosed($bool); + } + } diff --git a/javascript/ToggleCompositeField.js b/javascript/ToggleCompositeField.js index 8a8bd0c60..e502c5ac7 100644 --- a/javascript/ToggleCompositeField.js +++ b/javascript/ToggleCompositeField.js @@ -1,29 +1,26 @@ -// Shortcut-function (until we update to Prototye v1.5) -if(typeof $$ != "Function") $$ = document.getElementsBySelector; +(function($){ + $.entwine('ss', function($){ + $('.ss-toggle').entwine({ + onmatch: function() { + var self = $(this); + var opts = { collapsible: true }; + var tab = self.parents(".ss-tabset"); -var ToggleCompositeField = Class.create(); -ToggleCompositeField.prototype = { - initialize: function() { - var rules = {}; - rules['#' + this.id + ' .trigger'] = { - onclick: function(e) { - this.toggle(); - Event.stop(e); return false; - }.bind(this) - }; - Behaviour.register(rules); - - // close content by default - if(Element.hasClassName(this, 'startClosed')) { - Element.toggle($$('#' + this.id + ' .contentMore')[0]); - } - Element.toggle($$('#' + this.id + ' .triggerClosed')[0]); - }, - - toggle: function() { - Element.toggle($$('#' + this.id + ' .contentMore')[0]); - Element.toggle($$('#' + this.id + ' .triggerClosed')[0]); - Element.toggle($$('#' + this.id + ' .triggerOpened')[0]); - } -} -ToggleCompositeField.applyTo('div.toggleCompositeField'); \ No newline at end of file + if(self.hasClass("ss-toggle-start-closed")) { + opts.active = false; + } + + if(tab.length) { + tab.bind("tabsshow", function() { + self.accordion("resize"); + }); + } + + this.accordion(opts); + }, + onunmatch: function() { + this._super(); + } + }); + }); +})(jQuery); diff --git a/templates/forms/ToggleCompositeField.ss b/templates/forms/ToggleCompositeField.ss index 48e8a51f8..c09e6fbe6 100644 --- a/templates/forms/ToggleCompositeField.ss +++ b/templates/forms/ToggleCompositeField.ss @@ -1,12 +1,8 @@ -
- - - - $Title - -
- <% loop $FieldList %> - $FieldHolder - <% end_loop %> +
+ $Title +
+ <% loop $FieldList %> + $FieldHolder + <% end_loop %>