ENHANCEMENT: updated TreeDropdown display. Use jQuery UI provided icon rather than custom
This commit is contained in:
Will Rossiter
parent
6b1471165e
commit
e484a230fe
|
|
@ -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 */
|
||||
/** ---------------------------------------------------- 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 label { float: none; width: auto; }
|
||||
form.nostyle .middleColumn { margin-left: 0; }
|
||||
|
||||
.field.nolabel .middleColumn { margin-left: 0; }
|
||||
|
||||
.field input.text, .field textarea, .field select { width: 70%; }
|
||||
.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 input.text:focus, .field textarea:focus { border: 1px solid gray; }
|
||||
.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 label.left { float: left; width: 176px; padding: 8px 8px 8px 0; line-height: 16px; }
|
||||
.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: 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; }
|
||||
|
||||
/** ---------------------------------------------------- Buttons ---------------------------------------------------- */
|
||||
|
|
@ -230,19 +230,18 @@ form.nostyle .middleColumn { margin-left: 0; }
|
|||
.fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding-right: 8px; }
|
||||
|
||||
/** ---------------------------------------------------- Checkbox Field ---------------------------------------------------- */
|
||||
.checkbox { padding-left: 192px; }
|
||||
.field.checkbox { padding-left: 192px; margin-bottom: 8px; }
|
||||
|
||||
/** ---------------------------------------------------- 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 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 .middleColumn { margin-left: 0px; clear: left; }
|
||||
|
||||
#Url label .field#ViewerGroups label, .field#EditorGroups label, .field#CreateTopLevelGroups label { 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 */
|
||||
|
|
@ -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 a { padding: 0 15px; }
|
||||
.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-widget-content { color: #444444; font-size: 12px; font-family: Arial, sans-serif; border: 0; }
|
||||
.cms .ui-tabs .ui-tabs-panel { background: transparent; padding: 24px 16px; }
|
||||
.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 .ss-ui-button { padding: 5px; text-decoration: none; }
|
||||
.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; }
|
||||
|
||||
/** -------------------------------------------- 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 h3 { font-size: 16px; }
|
||||
.ui-tabs-panel h4 { font-size: 14px; }
|
||||
.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 -------------------------------------------- */
|
||||
.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-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 .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; }
|
||||
|
||||
/** -------------------------------------------- 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.warning { background-color: #ffbe66; border-color: #ff9300; }
|
||||
.message.error { background-color: #ffbe66; border-color: #ff9300; }
|
||||
|
|
|
|||
|
|
@ -10,24 +10,34 @@
|
|||
* Basic form fields
|
||||
* ---------------------------------------------------- */
|
||||
|
||||
form.nostyle {
|
||||
@include clear-form-field-styles();
|
||||
}
|
||||
|
||||
.field {
|
||||
display: block;
|
||||
|
||||
// bottom padding accounts for the border
|
||||
padding: 0 0 ($grid-vertical - 1) 0;
|
||||
margin: 0 0 $grid-vertical 0;
|
||||
// bottom padding accounts for the border and we have a negative
|
||||
// margin with a postive padding to ensure the bottom border extends
|
||||
// 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;
|
||||
overflow: hidden;
|
||||
|
||||
&.noLabel {
|
||||
.middleColumn {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
label.left {
|
||||
float: left;
|
||||
|
||||
width: $grid-horizontal * 20;
|
||||
padding: $grid-vertical $grid-horizontal;
|
||||
width: $grid-horizontal * 22;
|
||||
padding: $grid-vertical $grid-horizontal $grid-vertical 0;
|
||||
line-height: $grid-vertical * 2;
|
||||
|
||||
@include hide-text-overflow();
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-size: $font-base-size - 1;
|
||||
|
|
@ -38,43 +48,48 @@
|
|||
}
|
||||
|
||||
.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,
|
||||
textarea,
|
||||
select {
|
||||
width: 70%;
|
||||
width: 90%;
|
||||
max-width: $grid-horizontal * 64;
|
||||
}
|
||||
|
||||
input.text,
|
||||
textarea {
|
||||
@include border-radius(4px);
|
||||
textarea,
|
||||
.TreeDropdownField {
|
||||
background: #fff;
|
||||
@include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef));
|
||||
border: 1px solid lighten($color-medium-separator, 20%);
|
||||
|
||||
// remove 1px for the border.
|
||||
padding: ($grid-vertical - 1) ($grid-horizontal - 1);
|
||||
margin: 0;
|
||||
outline: none;
|
||||
}
|
||||
input.text:focus,
|
||||
textarea:focus {
|
||||
|
||||
@include border-radius(4px);
|
||||
@include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef));
|
||||
|
||||
&:focus {
|
||||
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 {
|
||||
margin-top: $grid-vertical;
|
||||
|
|
@ -192,19 +207,24 @@ form.nostyle {
|
|||
/** ----------------------------------------------------
|
||||
* Checkbox Field
|
||||
* ---------------------------------------------------- */
|
||||
.checkbox {
|
||||
padding-left: $grid-vertical * 24;
|
||||
.field {
|
||||
&.checkbox {
|
||||
padding-left: $grid-horizontal * 24;
|
||||
margin-bottom: $grid-vertical;
|
||||
}
|
||||
}
|
||||
/** ----------------------------------------------------
|
||||
* Optionsets and Checkboxsets
|
||||
* ---------------------------------------------------- */
|
||||
.optionset {
|
||||
|
||||
overflow: hidden;
|
||||
padding-bottom: 8px;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
display: block;
|
||||
width: $grid-horizontal * 31;
|
||||
padding: $grid-vertical $grid-horizontal;
|
||||
width: $grid-horizontal * 27;
|
||||
padding: $grid-vertical $grid-horizontal 0;
|
||||
line-height: $grid-vertical * 2;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
|
|
@ -223,8 +243,9 @@ form.nostyle {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** ----------------------------------------------------
|
||||
* Specific field overrides
|
||||
* HTML Text
|
||||
* ---------------------------------------------------- */
|
||||
|
||||
.htmleditor {
|
||||
|
|
@ -240,12 +261,6 @@ form.nostyle {
|
|||
}
|
||||
}
|
||||
|
||||
#Url label
|
||||
.field#ViewerGroups, .field#EditorGroups, .field#CreateTopLevelGroups {
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.action-hidden {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ html,body {
|
|||
.ui-tabs-panel {
|
||||
h2, h3, h4, h5 {
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -75,7 +75,7 @@ html,body {
|
|||
|
||||
p {
|
||||
line-height: $grid-vertical * 2;
|
||||
margin-bottom: $grid-vertical;
|
||||
margin-bottom: $grid-vertical * 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -112,8 +112,9 @@ html,body {
|
|||
|
||||
h2 {
|
||||
float: left;
|
||||
padding: ($grid-vertical + 4) 0 0 $grid-horizontal;
|
||||
padding: $grid-vertical 0 0 $grid-horizontal;
|
||||
font-size: $font-base-size;
|
||||
line-height: $grid-horizontal * 3;
|
||||
font-weight: bold;
|
||||
text-shadow: darken($color-widget-bg, 10%) 1px 1px 0;
|
||||
width: $grid-horizontal * 23;
|
||||
|
|
@ -315,7 +316,7 @@ html,body {
|
|||
* -------------------------------------------- */
|
||||
|
||||
.message {
|
||||
margin: $grid_vertical 0;
|
||||
margin: 0 0 $grid_vertical 0;
|
||||
// minus one for the borders
|
||||
padding: $grid_vertical - 1 $grid_horizontal - 1;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -39,11 +39,12 @@
|
|||
|
||||
.ui-tabs-panel {
|
||||
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;
|
||||
font-size: $font-base-size;
|
||||
font-family: $font-family;
|
||||
|
|
|
|||
|
|
@ -1,56 +1,55 @@
|
|||
div.TreeDropdownField {
|
||||
width: 200px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
div.TreeDropdownField .title {
|
||||
float: left;
|
||||
overflow:hidden;
|
||||
width: 174px;
|
||||
height: 14px;
|
||||
border: 1px #7f9db9 solid;
|
||||
width: 400px;
|
||||
background: #fff;
|
||||
border: 1px solid #666;
|
||||
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;
|
||||
float:right;
|
||||
}
|
||||
|
||||
div.TreeDropdownField .jstree-themeroller a.jstree-loading .jstree-icon {
|
||||
background:url("../images/network-save.gif") center center no-repeat !important;
|
||||
}
|
||||
div.TreeDropdownField input {
|
||||
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;
|
||||
}
|
||||
|
|
@ -1,44 +1,52 @@
|
|||
<?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>.
|
||||
*
|
||||
* 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>
|
||||
* // Put this at the top of the class that defines your model (e.g. the class that extends DataObject).
|
||||
* static $has_one = array(
|
||||
* '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");
|
||||
* ..
|
||||
* }
|
||||
* </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 DropdownField for a simple <select> field with a single element.
|
||||
* @see CheckboxSetField for multiple selections through checkboxes.
|
||||
* @see OptionsetField for single selections via radiobuttons.
|
||||
* @see {@link TreeMultiselectField} for the same implementation allowing multiple selections
|
||||
* @see {@link DropdownField} for a simple dropdown field.
|
||||
* @see {@link CheckboxSetField} for multiple selections through checkboxes.
|
||||
* @see {@link OptionsetField} for single selections via radiobuttons.
|
||||
*
|
||||
* @package forms
|
||||
* @subpackage fields-relational
|
||||
*/
|
||||
|
||||
class TreeDropdownField extends FormField {
|
||||
|
||||
public static $url_handlers = array (
|
||||
public static $url_handlers = array(
|
||||
'$Action!/$ID' => '$Action'
|
||||
);
|
||||
|
||||
public static $allowed_actions = array (
|
||||
public static $allowed_actions = array(
|
||||
'tree'
|
||||
);
|
||||
|
||||
|
|
@ -50,20 +58,28 @@ class TreeDropdownField extends FormField {
|
|||
/**
|
||||
* 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 $title the field label
|
||||
* @param sourceObject The object-type to list in the tree. Must be a 'hierachy' object. Alternatively,
|
||||
* you can set this to an array of key/value pairs, like a dropdown source. In this case, the field
|
||||
* will act like show a flat list of tree items, without any hierachy. This is most useful in
|
||||
* conjunction with TreeMultiselectField, for presenting a set of checkboxes in 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 string $showSearch enable the ability to search the tree by entering the text in the input field.
|
||||
* @param sourceObject The object-type to list in the tree. Must be a
|
||||
* {@link Hierarchy} subclass. Alternatively, you can set this to an
|
||||
* array of key/value pairs, like a {@link DropdownField} source. In
|
||||
* this case, the field will act like show a flat list of tree items,
|
||||
* without any hierarchy. This is most useful in conjunction with
|
||||
* {@link TreeMultiselectField}, for presenting a set of checkboxes in
|
||||
* 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) {
|
||||
$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
|
||||
*/
|
||||
|
|
@ -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
|
||||
*/
|
||||
|
|
@ -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
|
||||
*/
|
||||
|
|
@ -138,7 +157,7 @@ class TreeDropdownField extends FormField {
|
|||
$metadata = null;
|
||||
}
|
||||
|
||||
return $this->createTag (
|
||||
return $this->createTag(
|
||||
'div',
|
||||
array (
|
||||
'id' => "TreeDropdownField_{$this->id()}",
|
||||
|
|
@ -148,11 +167,12 @@ class TreeDropdownField extends FormField {
|
|||
// Any additional data from the selected record
|
||||
'data-metadata' => ($metadata) ? Convert::raw2json($metadata) : null
|
||||
),
|
||||
$this->createTag (
|
||||
$this->createTag(
|
||||
'input',
|
||||
array (
|
||||
'id' => $this->id(),
|
||||
'type' => 'hidden',
|
||||
'class' => 'text' . ($this->extraClass() ? $this->extraClass() : ''),
|
||||
'name' => $this->name,
|
||||
'value' => $this->value
|
||||
)
|
||||
|
|
|
|||
|
|
@ -20,12 +20,12 @@
|
|||
onmatch: function() {
|
||||
this.append(
|
||||
'<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>'
|
||||
);
|
||||
if(this.data('title')) this.setTitle(this.data('title'));
|
||||
this.getPanel().hide();
|
||||
|
||||
this.getPanel().hide();
|
||||
this._super();
|
||||
},
|
||||
getPanel: function() {
|
||||
|
|
@ -33,10 +33,24 @@
|
|||
},
|
||||
openPanel: function() {
|
||||
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();
|
||||
|
||||
// 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();
|
||||
},
|
||||
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();
|
||||
},
|
||||
togglePanel: function() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue