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

ENHANCEMENT: updated TreeDropdown display. Use jQuery UI provided icon rather than custom

Browse Source
This commit is contained in:
Will Rossiter 2011-08-01 14:27:52 +12:00
parent 6b1471165e
commit e484a230fe
7 changed files with 198 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
admin/css/screen.css
View File

@ -200,20 +200,20 @@ li.class-ErrorPage a .jstree-pageicon { background-position: 0 -112px; }
/** This file defines common styles for form elements used throughout the CMS interface. It is an addition to the base styles defined in sapphire/css/Form.css. @package sapphire @subpackage admin */ /** This file defines common styles for form elements used throughout the CMS interface. It is an addition to the base styles defined in sapphire/css/Form.css. @package sapphire @subpackage admin */
/** ---------------------------------------------------- Basic form fields ---------------------------------------------------- */ /** ---------------------------------------------------- Basic form fields ---------------------------------------------------- */
.field { display: block; padding: 0 0 7px 0; margin: 0 0 8px 0; border-bottom: 1px solid rgba(201, 205, 206, 0.8); overflow: hidden; }
.field label.left { float: left; width: 160px; padding: 8px 8px; line-height: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
.field label.left span { display: block; font-size: 11px; color: #848484; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
.field .middleColumn { margin-left: 192px; }
form.nostyle .field { display: inline; padding: 0; border: 0; } form.nostyle .field { display: inline; padding: 0; border: 0; }
form.nostyle label { float: none; width: auto; } form.nostyle label { float: none; width: auto; }
form.nostyle .middleColumn { margin-left: 0; } form.nostyle .middleColumn { margin-left: 0; }
.field.nolabel .middleColumn { margin-left: 0; } .field { display: block; padding: 0 8px 7px 8px; margin: 0 -8px 8px -8px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); overflow: hidden; /* TreeDropdowns */ }
.field.noLabel .middleColumn { margin-left: 0; }
.field input.text, .field textarea, .field select { width: 70%; } .field label.left { float: left; width: 176px; padding: 8px 8px 8px 0; line-height: 16px; }
.field input.text, .field textarea { -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background: #fff; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); border: 1px solid #b3b3b3; padding: 7px 7px; margin: 0; outline: none; } .field label.left span { display: block; font-size: 11px; color: #848484; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
.field input.text:focus, .field textarea:focus { border: 1px solid gray; } .field .middleColumn { margin-left: 184px; /* 23 as we lose a column on the field padding */ }
.field input.text, .field textarea, .field select { width: 90%; max-width: 512px; }
.field input.text, .field textarea, .field .TreeDropdownField { background: #fff; border: 1px solid #b3b3b3; padding: 7px 7px; margin: 0; outline: none; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); }
.field input.text:focus, .field textarea:focus, .field .TreeDropdownField:focus { border: 1px solid gray; }
.field .TreeDropdownField { padding: 0; }
.field .TreeDropdownField .panel { margin-top: -4px; border: 1px solid #b3b3b3; border-top: none; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -o-border-bottom-left-radius: 4px; -ms-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -o-border-bottom-right-radius: 4px; -ms-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.field select { margin-top: 8px; } .field select { margin-top: 8px; }
/** ---------------------------------------------------- Buttons ---------------------------------------------------- */ /** ---------------------------------------------------- Buttons ---------------------------------------------------- */
@ -230,19 +230,18 @@ form.nostyle .middleColumn { margin-left: 0; }
.fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding-right: 8px; } .fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding-right: 8px; }
/** ---------------------------------------------------- Checkbox Field ---------------------------------------------------- */ /** ---------------------------------------------------- Checkbox Field ---------------------------------------------------- */
.checkbox { padding-left: 192px; } .field.checkbox { padding-left: 192px; margin-bottom: 8px; }
/** ---------------------------------------------------- Optionsets and Checkboxsets ---------------------------------------------------- */ /** ---------------------------------------------------- Optionsets and Checkboxsets ---------------------------------------------------- */
.optionset li { float: left; display: block; width: 248px; padding: 8px 8px; line-height: 16px; list-style: none; position: relative; } .optionset { overflow: hidden; padding-bottom: 8px; }
.optionset li { float: left; display: block; width: 216px; padding: 8px 8px 0; line-height: 16px; list-style: none; position: relative; }
.optionset li input { position: absolute; top: 9px; left: 2px; margin: 0; } .optionset li input { position: absolute; top: 9px; left: 2px; margin: 0; }
.optionset li label { display: block; cursor: pointer; padding: 0 0 0 16px; } .optionset li label { display: block; cursor: pointer; padding: 0 0 0 16px; }
/** ---------------------------------------------------- Specific field overrides ---------------------------------------------------- */ /** ---------------------------------------------------- HTML Text ---------------------------------------------------- */
.htmleditor label { display: block; float: none; padding-bottom: 10px; } .htmleditor label { display: block; float: none; padding-bottom: 10px; }
.htmleditor .middleColumn { margin-left: 0px; clear: left; } .htmleditor .middleColumn { margin-left: 0px; clear: left; }
#Url label .field#ViewerGroups label, .field#EditorGroups label, .field#CreateTopLevelGroups label { display: none; }
.action-hidden { display: none; } .action-hidden { display: none; }
/** Icon styles. @todo Automatic sprite generation and ensure that developers can define icons for their own admin interfaces @package sapphire @subpackage admin */ /** Icon styles. @todo Automatic sprite generation and ensure that developers can define icons for their own admin interfaces @package sapphire @subpackage admin */
@ -264,8 +263,8 @@ form.nostyle .middleColumn { margin-left: 0; }
.cms .ui-tabs .ui-tabs-nav li { top: 0; } .cms .ui-tabs .ui-tabs-nav li { top: 0; }
.cms .ui-tabs .ui-tabs-nav li a { padding: 0 15px; } .cms .ui-tabs .ui-tabs-nav li a { padding: 0 15px; }
.cms .ui-tabs .ui-tabs-nav.ui-state-active { border-color: gray; } .cms .ui-tabs .ui-tabs-nav.ui-state-active { border-color: gray; }
.cms .ui-tabs .ui-tabs-panel { background: transparent; padding: 16px 8px; } .cms .ui-tabs .ui-tabs-panel { background: transparent; padding: 24px 16px; }
.cms .ui-widget-content { color: #444444; font-size: 12px; font-family: Arial, sans-serif; border: 0; } .cms .ui-widget-content, .cms .ui-widget { color: #444444; font-size: 12px; font-family: Arial, sans-serif; border: 0; }
.cms .ui-widget-header { background: #eceff1; border: 0; padding: 0; } .cms .ui-widget-header { background: #eceff1; border: 0; padding: 0; }
.cms .ss-ui-button { padding: 5px; text-decoration: none; } .cms .ss-ui-button { padding: 5px; text-decoration: none; }
.cms .ui-state-hover { cursor: pointer; } .cms .ui-state-hover { cursor: pointer; }
@ -291,12 +290,12 @@ html article, html aside, html details, html figcaption, html figure, html foote
.cms strong { font-weight: bold; } .cms strong { font-weight: bold; }
/** -------------------------------------------- Typography styles in tabs -------------------------------------------- */ /** -------------------------------------------- Typography styles in tabs -------------------------------------------- */
.ui-tabs-panel h2, .ui-tabs-panel h3, .ui-tabs-panel h4, .ui-tabs-panel h5 { font-weight: bold; margin: 16px 0 8px 0; line-height: 16px; } .ui-tabs-panel h2, .ui-tabs-panel h3, .ui-tabs-panel h4, .ui-tabs-panel h5 { font-weight: bold; margin: 16px 0 16px 0; line-height: 16px; }
.ui-tabs-panel h2 { font-size: 18px; line-height: 24px; } .ui-tabs-panel h2 { font-size: 18px; line-height: 24px; }
.ui-tabs-panel h3 { font-size: 16px; } .ui-tabs-panel h3 { font-size: 16px; }
.ui-tabs-panel h4 { font-size: 14px; } .ui-tabs-panel h4 { font-size: 14px; }
.ui-tabs-panel h5 { font-size: 12px; } .ui-tabs-panel h5 { font-size: 12px; }
.ui-tabs-panel p { line-height: 16px; margin-bottom: 8px; } .ui-tabs-panel p { line-height: 16px; margin-bottom: 16px; }
/** -------------------------------------------- Panels Styles -------------------------------------------- */ /** -------------------------------------------- Panels Styles -------------------------------------------- */
.cms-container { height: 100%; background: #f0f3f4 url(../images/textures/bg_cms_main_content.png) repeat top left; } .cms-container { height: 100%; background: #f0f3f4 url(../images/textures/bg_cms_main_content.png) repeat top left; }
@ -305,7 +304,7 @@ html article, html aside, html details, html figcaption, html figure, html foote
.cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-fields, .cms-edit-form { *display: inline; } .cms-preview, .cms-menu, .cms-content, .cms-content-header, .cms-content-tools, .cms-content-fields, .cms-edit-form { *display: inline; }
.cms-content-header { background-color: #b0bec7; padding: 8px 8px 6px 8px; height: 32px; z-index: 60; border-bottom: 2px solid #8399a7; -moz-box-shadow: #eceff1 0 16px 16px; -webkit-box-shadow: #eceff1 0 16px 16px; -o-box-shadow: #eceff1 0 16px 16px; box-shadow: #eceff1 0 16px 16px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); } .cms-content-header { background-color: #b0bec7; padding: 8px 8px 6px 8px; height: 32px; z-index: 60; border-bottom: 2px solid #8399a7; -moz-box-shadow: #eceff1 0 16px 16px; -webkit-box-shadow: #eceff1 0 16px 16px; -o-box-shadow: #eceff1 0 16px 16px; box-shadow: #eceff1 0 16px 16px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ced7dc), color-stop(100%, #92a5b2)); background-image: -webkit-linear-gradient(#ced7dc, #92a5b2); background-image: -moz-linear-gradient(#ced7dc, #92a5b2); background-image: -o-linear-gradient(#ced7dc, #92a5b2); background-image: -ms-linear-gradient(#ced7dc, #92a5b2); background-image: linear-gradient(#ced7dc, #92a5b2); }
.cms-content-header h2 { float: left; padding: 12px 0 0 8px; font-size: 12px; font-weight: bold; text-shadow: #ced7dc 1px 1px 0; width: 184px; } .cms-content-header h2 { float: left; padding: 8px 0 0 8px; font-size: 12px; line-height: 24px; font-weight: bold; text-shadow: #ced7dc 1px 1px 0; width: 184px; }
.cms-content-header > div { width: 9999em; overflow: hidden; } .cms-content-header > div { width: 9999em; overflow: hidden; }
.cms-content-header .cms-content-header-tabs { float: left; } .cms-content-header .cms-content-header-tabs { float: left; }
@ -343,7 +342,7 @@ html article, html aside, html details, html figcaption, html figure, html foote
.cms-content-actions { margin: 8px 8px; text-align: right; } .cms-content-actions { margin: 8px 8px; text-align: right; }
/** -------------------------------------------- Messages -------------------------------------------- */ /** -------------------------------------------- Messages -------------------------------------------- */
.message { margin: 8px 0; padding: 7px 7px; font-weight: bold; border: 1px black solid; } .message { margin: 0 0 8px 0; padding: 7px 7px; font-weight: bold; border: 1px black solid; }
.message.notice { background-color: #ffbe66; border-color: #ff9300; } .message.notice { background-color: #ffbe66; border-color: #ff9300; }
.message.warning { background-color: #ffbe66; border-color: #ff9300; } .message.warning { background-color: #ffbe66; border-color: #ff9300; }
.message.error { background-color: #ffbe66; border-color: #ff9300; } .message.error { background-color: #ffbe66; border-color: #ff9300; }

95
admin/scss/_forms.scss
View File

@ -10,24 +10,34 @@
* Basic form fields * Basic form fields
* ---------------------------------------------------- */ * ---------------------------------------------------- */
form.nostyle {
@include clear-form-field-styles();
}
.field { .field {
display: block; display: block;
// bottom padding accounts for the border // bottom padding accounts for the border and we have a negative
padding: 0 0 ($grid-vertical - 1) 0; // margin with a postive padding to ensure the bottom border extends
margin: 0 0 $grid-vertical 0; // over the edges
padding: 0 $grid-horizontal $grid-vertical - 1 $grid-horizontal;
margin: 0 $grid-horizontal * -1 $grid-vertical ($grid-horizontal * -1);
border-bottom: 1px solid $color-shadow-light; border-bottom: 1px solid $color-shadow-light;
overflow: hidden; overflow: hidden;
&.noLabel {
.middleColumn {
margin-left: 0;
}
}
label.left { label.left {
float: left; float: left;
width: $grid-horizontal * 20; width: $grid-horizontal * 22;
padding: $grid-vertical $grid-horizontal; padding: $grid-vertical $grid-horizontal $grid-vertical 0;
line-height: $grid-vertical * 2; line-height: $grid-vertical * 2;
@include hide-text-overflow();
span { span {
display: block; display: block;
font-size: $font-base-size - 1; font-size: $font-base-size - 1;
@ -38,43 +48,48 @@
} }
.middleColumn { .middleColumn {
margin-left: $grid-horizontal * 24; margin-left: $grid-horizontal * 23; /* 23 as we lose a column on the field padding */
} }
}
form.nostyle {
@include clear-form-field-styles();
}
.field.nolabel {
.middleColumn {
margin-left: 0;
}
}
.field {
input.text, input.text,
textarea, textarea,
select { select {
width: 70%; width: 90%;
max-width: $grid-horizontal * 64;
} }
input.text, input.text,
textarea { textarea,
@include border-radius(4px); .TreeDropdownField {
background: #fff; background: #fff;
@include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef));
border: 1px solid lighten($color-medium-separator, 20%); border: 1px solid lighten($color-medium-separator, 20%);
// remove 1px for the border. // remove 1px for the border.
padding: ($grid-vertical - 1) ($grid-horizontal - 1); padding: ($grid-vertical - 1) ($grid-horizontal - 1);
margin: 0; margin: 0;
outline: none; outline: none;
}
input.text:focus, @include border-radius(4px);
textarea:focus { @include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef));
&:focus {
border: 1px solid $color-medium-separator; border: 1px solid $color-medium-separator;
} }
}
/* TreeDropdowns */
.TreeDropdownField {
padding: 0;
.panel {
margin-top: $grid-vertical * -0.5;
border: 1px solid lighten($color-medium-separator, 20%);
border-top: none;
@include border-bottom-left-radius(4px);
@include border-bottom-right-radius(4px);
}
}
select { select {
margin-top: $grid-vertical; margin-top: $grid-vertical;
@ -192,19 +207,24 @@ form.nostyle {
/** ---------------------------------------------------- /** ----------------------------------------------------
* Checkbox Field * Checkbox Field
* ---------------------------------------------------- */ * ---------------------------------------------------- */
.checkbox { .field {
padding-left: $grid-vertical * 24; &.checkbox {
padding-left: $grid-horizontal * 24;
margin-bottom: $grid-vertical;
}
} }
/** ---------------------------------------------------- /** ----------------------------------------------------
* Optionsets and Checkboxsets * Optionsets and Checkboxsets
* ---------------------------------------------------- */ * ---------------------------------------------------- */
.optionset { .optionset {
overflow: hidden;
padding-bottom: 8px;
li { li {
float: left; float: left;
display: block; display: block;
width: $grid-horizontal * 31; width: $grid-horizontal * 27;
padding: $grid-vertical $grid-horizontal; padding: $grid-vertical $grid-horizontal 0;
line-height: $grid-vertical * 2; line-height: $grid-vertical * 2;
list-style: none; list-style: none;
position: relative; position: relative;
@ -223,8 +243,9 @@ form.nostyle {
} }
} }
} }
/** ---------------------------------------------------- /** ----------------------------------------------------
* Specific field overrides * HTML Text
* ---------------------------------------------------- */ * ---------------------------------------------------- */
.htmleditor { .htmleditor {
@ -240,12 +261,6 @@ form.nostyle {
} }
} }
#Url label
.field#ViewerGroups, .field#EditorGroups, .field#CreateTopLevelGroups {
label {
display: none;
}
}
.action-hidden { .action-hidden {
display: none; display: none;

9
admin/scss/_style.scss
View File

@ -52,7 +52,7 @@ html,body {
.ui-tabs-panel { .ui-tabs-panel {
h2, h3, h4, h5 { h2, h3, h4, h5 {
font-weight: bold; font-weight: bold;
margin: $grid-vertical * 2 0 $grid-vertical 0; margin: $grid-vertical * 2 0 $grid-vertical * 2 0;
line-height: $grid-vertical * 2; line-height: $grid-vertical * 2;
} }
@ -75,7 +75,7 @@ html,body {
p { p {
line-height: $grid-vertical * 2; line-height: $grid-vertical * 2;
margin-bottom: $grid-vertical; margin-bottom: $grid-vertical * 2;
} }
} }
@ -112,8 +112,9 @@ html,body {
h2 { h2 {
float: left; float: left;
padding: ($grid-vertical + 4) 0 0 $grid-horizontal; padding: $grid-vertical 0 0 $grid-horizontal;
font-size: $font-base-size; font-size: $font-base-size;
line-height: $grid-horizontal * 3;
font-weight: bold; font-weight: bold;
text-shadow: darken($color-widget-bg, 10%) 1px 1px 0; text-shadow: darken($color-widget-bg, 10%) 1px 1px 0;
width: $grid-horizontal * 23; width: $grid-horizontal * 23;
@ -315,7 +316,7 @@ html,body {
* -------------------------------------------- */ * -------------------------------------------- */
.message { .message {
margin: $grid_vertical 0; margin: 0 0 $grid_vertical 0;
// minus one for the borders // minus one for the borders
padding: $grid_vertical - 1 $grid_horizontal - 1; padding: $grid_vertical - 1 $grid_horizontal - 1;
font-weight: bold; font-weight: bold;

5
admin/scss/_uitheme.scss
View File

@ -39,11 +39,12 @@
.ui-tabs-panel { .ui-tabs-panel {
background: transparent; // default it's white background: transparent; // default it's white
padding: $grid-vertical * 2 $grid-horizontal; padding: $grid-vertical * 3 $grid-horizontal * 2;
} }
} }
.ui-widget-content { .ui-widget-content,
.ui-widget {
color: $color-text; color: $color-text;
font-size: $font-base-size; font-size: $font-base-size;
font-family: $font-family; font-family: $font-family;

101
css/TreeDropdownField.css
View File

@ -1,56 +1,55 @@
div.TreeDropdownField { div.TreeDropdownField {
width: 200px; width: 400px;
height: 21px; background: #fff;
} border: 1px solid #666;
div.TreeDropdownField .title {
float: left;
overflow:hidden;
width: 174px;
height: 14px;
border: 1px #7f9db9 solid;
cursor: pointer; cursor: pointer;
padding: 2px 0 2px 4px;
background-color: #fff;
}
div.TreeDropdownField .panel {
clear: left;
position: relative;
overflow: auto;
display: none;
cursor: default;
border: 1px black solid;
width: 200px;
height: 200px;
background-color: #fff;
}
div.TreeDropdownField .panel.loading {
background: #fff url(../images/network-save.gif) center center no-repeat;
}
div.TreeDropdownField .panel ul.tree a {
font-size: 12px;
}
div.TreeDropdownField .panel ul.tree {
margin-top: 0;
}
div.TreeDropdownField .toggle-panel-link {
border:none;
text-decoration: none;
background: url(../images/TreeDropdownField_button.gif) no-repeat left top;
width: 19px;
height: 21px;
margin: 0;
padding: 0 0 0 1px;
z-index: 0;
overflow: hidden; overflow: hidden;
float:right;
} }
div.TreeDropdownField .jstree-themeroller a.jstree-loading .jstree-icon { div.TreeDropdownField input {
background:url("../images/network-save.gif") center center no-repeat !important; border: none;
} background: none;
padding: 0;
margin: 0;
}
div.TreeDropdownField .title {
float: left;
padding: 7px;
overflow:hidden;
}
div.TreeDropdownField .panel {
clear: left;
position: absolute;
overflow: auto;
display: none;
cursor: default;
border: 1px solid #666;
border-top: none;
margin: 1px 0 0 -1px; /* account for border on container div */
width: 400px;
height: 200px;
background-color: #fff;
z-index: 50;
}
div.TreeDropdownField .panel ul.tree {
margin: 0;
}
div.TreeDropdownField .panel ul.tree a {
font-size: 12px;
}
div.TreeDropdownField .toggle-panel-link {
border: none;
text-decoration: none;
margin: 4px 4px 0 0;
z-index: 0;
overflow: hidden;
float: right;
}
div.TreeDropdownField .loading,
div.TreeDropdownField .jstree-themeroller a.jstree-loading .jstree-icon {
background: #fff url("../images/network-save.gif") center center no-repeat !important;
}

78
forms/TreeDropdownField.php
View File

@ -1,44 +1,52 @@
<?php <?php
/** /**
* Dropdown-like field that allows you to select an item from a hierachical AJAX-expandable tree. * Dropdown-like field that allows you to select an item from a hierarchical
* AJAX-expandable tree.
* *
* Creates a field which opens a dropdown (actually a div via javascript included for you) which contains a tree with the ability to select a singular item for the value of the field. This field has the ability to store one-to-one joins related to hierarchy or a hierarchy based filter. * Creates a field which opens a dropdown (actually a div via javascript
* included for you) which contains a tree with the ability to select a singular
* item for the value of the field. This field has the ability to store one-to-one
* joins related to hierarchy or a hierarchy based filter.
* *
* **Note:** your source object must use an implementation of hierarchy for this field to generate the tree correctly, e.g. groups, sitetree etc. * **Note:** your source object must use an implementation of hierarchy for this
* field to generate the tree correctly, e.g. {@link Group}, {@link SiteTree} etc.
* *
* All operations are carried out through behaviour and javascript. * All operations are carried out through javascript and provides no fallback
* to non JS.
* *
* <b>Usage</b>. * <b>Usage</b>.
* *
* treedropdownfield is used on {@link VirtualPage} a class which creates another instance of a page, with exactly the same fields that can be represented on another part of the site. The code below is taken from an example of this.
*
* <code> * <code>
* // Put this at the top of the class that defines your model (e.g. the class that extends DataObject).
* static $has_one = array( * static $has_one = array(
* 'RightContent' => 'SiteTree' * 'RightContent' => 'SiteTree'
* ); * );
* *
* // Setup the linking to the original page. (Put this in your getCMSFields() method or similar) * function getCMSFields() {
* ...
* $treedropdownfield = new TreeDropdownField("RightContentID", "Choose a page to show on the right:", "SiteTree"); * $treedropdownfield = new TreeDropdownField("RightContentID", "Choose a page to show on the right:", "SiteTree");
* ..
* }
* </code> * </code>
* *
* This will generate a tree allowing the user to expand and contract subsections to find the appropriate page to save to the field. * This will generate a tree allowing the user to expand and contract subsections
* to find the appropriate page to save to the field.
* *
* @see TreeMultiselectField for the same implementation allowing multiple selections * @see {@link TreeMultiselectField} for the same implementation allowing multiple selections
* @see DropdownField for a simple <select> field with a single element. * @see {@link DropdownField} for a simple dropdown field.
* @see CheckboxSetField for multiple selections through checkboxes. * @see {@link CheckboxSetField} for multiple selections through checkboxes.
* @see OptionsetField for single selections via radiobuttons. * @see {@link OptionsetField} for single selections via radiobuttons.
* *
* @package forms * @package forms
* @subpackage fields-relational * @subpackage fields-relational
*/ */
class TreeDropdownField extends FormField { class TreeDropdownField extends FormField {
public static $url_handlers = array ( public static $url_handlers = array(
'$Action!/$ID' => '$Action' '$Action!/$ID' => '$Action'
); );
public static $allowed_actions = array ( public static $allowed_actions = array(
'tree' 'tree'
); );
@ -50,20 +58,28 @@ class TreeDropdownField extends FormField {
/** /**
* Used by field search to leave only the relevant entries * Used by field search to leave only the relevant entries
*/ */
protected $searchIds = null, $searchExpanded = array(); protected $searchIds = null, $showSearch, $searchExpanded = array();
/** /**
* CAVEAT: for search to work properly $labelField must be a database field, or you need to setSearchFunction. * CAVEAT: for search to work properly $labelField must be a database field,
* or you need to setSearchFunction.
* *
* @param string $name the field name * @param string $name the field name
* @param string $title the field label * @param string $title the field label
* @param sourceObject The object-type to list in the tree. Must be a 'hierachy' object. Alternatively, * @param sourceObject The object-type to list in the tree. Must be a
* you can set this to an array of key/value pairs, like a dropdown source. In this case, the field * {@link Hierarchy} subclass. Alternatively, you can set this to an
* will act like show a flat list of tree items, without any hierachy. This is most useful in * array of key/value pairs, like a {@link DropdownField} source. In
* conjunction with TreeMultiselectField, for presenting a set of checkboxes in a compact view. * this case, the field will act like show a flat list of tree items,
* @param string $keyField to field on the source class to save as the field value (default ID). * without any hierarchy. This is most useful in conjunction with
* @param string $labelField the field name to show as the human-readable value on the tree (default Title). * {@link TreeMultiselectField}, for presenting a set of checkboxes in
* @param string $showSearch enable the ability to search the tree by entering the text in the input field. * a compact view.
*
* @param string $keyField to field on the source class to save as the
* field value (default ID).
* @param string $labelField the field name to show as the human-readable
* value on the tree (default Title).
* @param bool $showSearch enable the ability to search the tree by
* entering the text in the input field.
*/ */
public function __construct($name, $title = null, $sourceObject = 'Group', $keyField = 'ID', $labelField = 'Title', $showSearch = false) { public function __construct($name, $title = null, $sourceObject = 'Group', $keyField = 'ID', $labelField = 'Title', $showSearch = false) {
$this->sourceObject = $sourceObject; $this->sourceObject = $sourceObject;
@ -75,7 +91,8 @@ class TreeDropdownField extends FormField {
} }
/** /**
* Set the ID of the root node of the tree. This defaults to 0 - i.e. displays the whole tree. * Set the ID of the root node of the tree. This defaults to 0 - i.e.
* displays the whole tree.
* *
* @param int $ID * @param int $ID
*/ */
@ -84,7 +101,8 @@ class TreeDropdownField extends FormField {
} }
/** /**
* Set a callback used to filter the values of the tree before displaying to the user. * Set a callback used to filter the values of the tree before
* displaying to the user.
* *
* @param callback $callback * @param callback $callback
*/ */
@ -97,7 +115,8 @@ class TreeDropdownField extends FormField {
} }
/** /**
* Set a callback used to search the hierarchy globally, even before applying the filter. * Set a callback used to search the hierarchy globally, even before
* applying the filter.
* *
* @param callback $callback * @param callback $callback
*/ */
@ -138,7 +157,7 @@ class TreeDropdownField extends FormField {
$metadata = null; $metadata = null;
} }
return $this->createTag ( return $this->createTag(
'div', 'div',
array ( array (
'id' => "TreeDropdownField_{$this->id()}", 'id' => "TreeDropdownField_{$this->id()}",
@ -148,11 +167,12 @@ class TreeDropdownField extends FormField {
// Any additional data from the selected record // Any additional data from the selected record
'data-metadata' => ($metadata) ? Convert::raw2json($metadata) : null 'data-metadata' => ($metadata) ? Convert::raw2json($metadata) : null
), ),
$this->createTag ( $this->createTag(
'input', 'input',
array ( array (
'id' => $this->id(), 'id' => $this->id(),
'type' => 'hidden', 'type' => 'hidden',
'class' => 'text' . ($this->extraClass() ? $this->extraClass() : ''),
'name' => $this->name, 'name' => $this->name,
'value' => $this->value 'value' => $this->value
) )

18
javascript/TreeDropdownField.js
View File

@ -20,12 +20,12 @@
onmatch: function() { onmatch: function() {
this.append( this.append(
'<span class="title"></span>' + '<span class="title"></span>' +
'<a href="#" title="' + strings.openLink + '" class="toggle-panel-link"></a>' + '<a href="#" title="' + strings.openLink + '" class="toggle-panel-link ui-icon ui-icon-triangle-1-s"></a>' +
'<div class="panel"><div class="tree-holder"></div></div>' '<div class="panel"><div class="tree-holder"></div></div>'
); );
if(this.data('title')) this.setTitle(this.data('title')); if(this.data('title')) this.setTitle(this.data('title'));
this.getPanel().hide();
this.getPanel().hide();
this._super(); this._super();
}, },
getPanel: function() { getPanel: function() {
@ -33,10 +33,24 @@
}, },
openPanel: function() { openPanel: function() {
var panel = this.getPanel(), tree = this.find('.tree-holder'); var panel = this.getPanel(), tree = this.find('.tree-holder');
// set the panel to the bottom of the field
panel.css('top', this.position().top + this.height());
panel.show(); panel.show();
// swap the down arrow with an up arrow
this.find(".toggle-panel-link")
.removeClass('ui-icon-triangle-1-s')
.addClass('ui-icon-triangle-1-n');
if(tree.is(':empty')) this.loadTree(); if(tree.is(':empty')) this.loadTree();
}, },
closePanel: function() { closePanel: function() {
// swap the up arrow with a down arrow
this.find(".toggle-panel-link")
.removeClass('ui-icon-triangle-1-n')
.addClass('ui-icon-triangle-1-s');
this.getPanel().hide(); this.getPanel().hide();
}, },
togglePanel: function() { togglePanel: function() {