diff --git a/admin/css/screen.css b/admin/css/screen.css
index ca51023a1..898219698 100644
--- a/admin/css/screen.css
+++ b/admin/css/screen.css
@@ -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; }
diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss
index e75018f3c..09a78b76d 100755
--- a/admin/scss/_forms.scss
+++ b/admin/scss/_forms.scss
@@ -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;
diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss
index 20ab5910e..9dd3c86e4 100755
--- a/admin/scss/_style.scss
+++ b/admin/scss/_style.scss
@@ -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;
diff --git a/admin/scss/_uitheme.scss b/admin/scss/_uitheme.scss
index 2daaf4a8b..1536e44fb 100755
--- a/admin/scss/_uitheme.scss
+++ b/admin/scss/_uitheme.scss
@@ -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;
diff --git a/css/TreeDropdownField.css b/css/TreeDropdownField.css
index 3406a8918..d980ea2b1 100644
--- a/css/TreeDropdownField.css
+++ b/css/TreeDropdownField.css
@@ -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;
-}
\ No newline at end of file
+ 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;
+ }
\ No newline at end of file
diff --git a/forms/TreeDropdownField.php b/forms/TreeDropdownField.php
index 314de32fe..45650330c 100755
--- a/forms/TreeDropdownField.php
+++ b/forms/TreeDropdownField.php
@@ -1,44 +1,52 @@
Usage.
*
- * 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.
- *
*
- * // 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");
+ * ..
+ * }
*
*
- * 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