mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
!!BUGFIX: Refactored CSS and Requirements: Created more specific css-files to reduce side-effects and ease debugging, moved generic form-styling from cms/css/cms_*.css into sapphire/css/Form.css.
!!BUGFIX: Ordered Requirement-inclusions in CMSMain/LeftAndMain to be more coherent (avoiding duplicate Requirement-calls) ENHANCEMENT: Removed some css-rules disabled by comments ENHANCEMENT: coding-conventions (see r42726) FEATURE: Added Profile-page with LeftAndMain->myprofile() git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/trunk@42728 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
Ingo Schommer
parent
6f0d5a8155
commit
1e332e6dbe
12
css/CheckboxSetField.css
Normal file
12
css/CheckboxSetField.css
Normal file
@ -0,0 +1,12 @@
|
||||
#right form .CheckboxSetField ul{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
#right form .CheckboxSetField ul li{
|
||||
list-style:none !important;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
#right form .CheckboxSetField input{
|
||||
width:auto;
|
||||
}
|
||||
@ -30,10 +30,11 @@ html,body {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ComplexTableField_Popup form {
|
||||
form {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.ComplexTableField_Popup form fieldset {
|
||||
|
||||
form fieldset {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
127
css/Form.css
Normal file
127
css/Form.css
Normal file
@ -0,0 +1,127 @@
|
||||
/**
|
||||
* Fields
|
||||
*/
|
||||
form fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
form .field {
|
||||
clear: both;
|
||||
padding: .2em;
|
||||
margin: 0 0 0 10em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
form .field.nolabel {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
form label.left {
|
||||
float: left;
|
||||
width: 10em;
|
||||
margin-left: -10em;
|
||||
}
|
||||
|
||||
form input.maxlength {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
form p.actions{
|
||||
float : right;
|
||||
}
|
||||
|
||||
form .validation,
|
||||
form .error,
|
||||
form .required
|
||||
{
|
||||
border: 1px solid #f00;
|
||||
background: #fcc;
|
||||
padding: 0.5em;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
form .field span.readonly {
|
||||
border: 1px #CCC dotted;
|
||||
background-color: #F7F7F7;
|
||||
display: block;
|
||||
width: 98%;
|
||||
padding: 3px;
|
||||
margin:5px 0;
|
||||
}
|
||||
|
||||
form .indicator.inline {
|
||||
display: inline;
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
form .indicator.block {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Composite Fields - raw concatenation of fields for programmatic purposes.
|
||||
*/
|
||||
.right form div.field.CompositeField {
|
||||
margin-left: 7.5em;
|
||||
}
|
||||
.right form div.field.CompositeField div.field {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.right form div.field.CompositeField {
|
||||
clear: both;
|
||||
}
|
||||
.right form div.field.CompositeField label.left {
|
||||
float: left;
|
||||
width: 10em;
|
||||
margin-left: -10em;
|
||||
}
|
||||
|
||||
.right form div.column2 {
|
||||
float: left;
|
||||
width: 45%;
|
||||
margin-right: 4%;
|
||||
}
|
||||
|
||||
.right form div.multicolumn {
|
||||
width: 100%;
|
||||
float: left;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
/**
|
||||
* Messages
|
||||
*/
|
||||
form .message {
|
||||
margin: 1em 0;
|
||||
padding: 0.5em;
|
||||
font-weight: bold;
|
||||
border: 1px black solid;
|
||||
background-color: #B9FFB9;
|
||||
border-color: #00FF00;
|
||||
}
|
||||
form .message.warning {
|
||||
background-color: #FFD2A6;
|
||||
border-color: #FF9300;
|
||||
}
|
||||
form .message.bad {
|
||||
background-color: #FF8080;
|
||||
border-color: #FF0000;
|
||||
}
|
||||
form .message.required,
|
||||
form .message.validation {
|
||||
display:block;
|
||||
margin-top:5px;
|
||||
color:#FF9300;
|
||||
width:240px;
|
||||
border-color: #FF9300;
|
||||
}
|
||||
form .message.validation {
|
||||
color:#FF4040;
|
||||
width:240px;
|
||||
border-color: #FF4040;
|
||||
}
|
||||
23
css/ProgressBar.css
Normal file
23
css/ProgressBar.css
Normal file
@ -0,0 +1,23 @@
|
||||
div.ProgressBar {
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.ProgressBar p.text {
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
div.ProgressBar div.BarHolder {
|
||||
width: 100%;
|
||||
border: solid 1px #777;
|
||||
background-color: #FFF;
|
||||
padding: 2px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div.ProgressBar div.BarHolder div.Bar {
|
||||
width: 0%;
|
||||
background-color: #0074C6;
|
||||
}
|
||||
31
css/SelectionGroup.css
Normal file
31
css/SelectionGroup.css
Normal file
@ -0,0 +1,31 @@
|
||||
.SelectionGroup {
|
||||
padding: 0px;
|
||||
clear : both;
|
||||
}
|
||||
.SelectionGroup li {
|
||||
list-style-type: none;
|
||||
float : left;
|
||||
clear : both;
|
||||
}
|
||||
.SelectionGroup li input {
|
||||
width: 20px;
|
||||
float : left;
|
||||
|
||||
}
|
||||
|
||||
.SelectionGroup li div.field {
|
||||
display: none;
|
||||
font-size: 1em;
|
||||
}
|
||||
.SelectionGroup li input, .right .SelectionGroup li label {
|
||||
display: block;
|
||||
}
|
||||
.SelectionGroup li.selected div.field {
|
||||
margin-left: 30px;
|
||||
display: block;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.SelectionGroup li.selected label.selector {
|
||||
font-weight: bold;
|
||||
}
|
||||
182
css/TableListField.css
Normal file
182
css/TableListField.css
Normal file
@ -0,0 +1,182 @@
|
||||
table.TableField,
|
||||
table.TableListField,
|
||||
.TableListField table.data,
|
||||
table.CMSList {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border : 1px solid #aaaaaa;
|
||||
width : 100%;
|
||||
}
|
||||
|
||||
/* HACK Preventing IE6 from showing double borders */
|
||||
body>div table.TableField,
|
||||
body>div table.TableListField,
|
||||
body>div .TableListField table.data,
|
||||
body>div table.CMSList {
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
table.TableField td,
|
||||
table.TableListField td,
|
||||
.TableListField table.data td,
|
||||
table.CMSList td {
|
||||
border-style:none;
|
||||
}
|
||||
|
||||
table.TableField th,
|
||||
table.TableListField th,
|
||||
.TableListField table.data th,
|
||||
table.CMSList th {
|
||||
whitespace: no-wrap;
|
||||
}
|
||||
|
||||
table.TableField thead th,
|
||||
.TableListField table.data thead th,
|
||||
table.CMSList thead th {
|
||||
background-image : url(../../cms/images/tables/thead.png);
|
||||
background-repeat : repeat-x;
|
||||
background-position : left bottom;
|
||||
background-color : #ebeadb;
|
||||
height : 24px;
|
||||
border-right : 1px solid #aca899;
|
||||
border-left : 1px solid #ffffff;
|
||||
padding-left : 5px;
|
||||
}
|
||||
|
||||
table.TableField thead th span,
|
||||
.TableListField table.data thead th span {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
table.TableField thead th a,
|
||||
.TableListField table.data thead th a,
|
||||
table.CMSList thead th a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
table.TableField thead th span.sortLink,
|
||||
.TableListField table.data thead th span.sortLink,
|
||||
table.CMSList thead th span.sortLink {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table.TableField tfoot tr.summary td,
|
||||
.TableListField table.data tfoot tr.summary td,
|
||||
table.CMSList tfoot tr.summary td {
|
||||
background-color : #ebeadb;
|
||||
}
|
||||
|
||||
table.TableField tbody td,
|
||||
table.TableField tfoot td,
|
||||
.TableListField table.data tbody td,
|
||||
.TableListField table.data tfoot td,
|
||||
table.CMSList tbody td,
|
||||
table.CMSList tfoot td {
|
||||
border : 1px solid #f1efe2;
|
||||
padding-left : 5px;
|
||||
}
|
||||
|
||||
.TableField td input,
|
||||
.TableListField td input {
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
table.data tbody td input {
|
||||
border:0 !important;
|
||||
}
|
||||
|
||||
table.TableField tbody td.checkbox,
|
||||
.TableListField table.data tbody td.checkbox,
|
||||
table.CMSList tbody td.checkbox {
|
||||
border : 1px solid #f1efe2;
|
||||
padding-left : 5px;
|
||||
background-image : url(../../cms/images/tables/checkbox.png);
|
||||
background-repeat : repeat-x;
|
||||
background-position : left bottom;
|
||||
}
|
||||
|
||||
table.TableField tbody tr.over td,
|
||||
.TableListField table.data tbody tr.over td,
|
||||
table.CMSList tbody td.over td{
|
||||
background-color: #FFC;
|
||||
}
|
||||
|
||||
table.TableField tbody tr.current td,
|
||||
.TableListField table.data tbody tr.current td,
|
||||
table.CMSList tbody td.current td {
|
||||
background-color: #316ac5;
|
||||
color : white;
|
||||
}
|
||||
|
||||
.TableListField table.data tfoot .addlink img {
|
||||
vertical-align: middle;
|
||||
margin: 3px 6px 3px 3px;
|
||||
}
|
||||
|
||||
.right form .TableField span.readonly {
|
||||
border: 0;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.TableListField div.utility {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.TableListField div.utility a {
|
||||
font-size: 9px;
|
||||
border: 1px solid #aaa;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
form .TableField .message {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#Pagination {
|
||||
margin-top: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
#Pagination a {
|
||||
font-size: 14px;
|
||||
width: 1px;
|
||||
heigth: 1px;
|
||||
margin: 1px;
|
||||
}
|
||||
#Pagination span {
|
||||
|
||||
display: inline;
|
||||
color: red;
|
||||
font-size: 14px;
|
||||
}
|
||||
#Pagination div {
|
||||
display: inline;
|
||||
}
|
||||
#Pagination_Next a {
|
||||
text-decoration: none;
|
||||
}
|
||||
#Pagination_Next a div {
|
||||
position: relative;
|
||||
left: -20px;
|
||||
}
|
||||
#Pagination_Next a img {
|
||||
position: relative;
|
||||
top: -15px;
|
||||
left: 5px;
|
||||
}
|
||||
#Pagination_Previous a {
|
||||
text-decoration: none;
|
||||
}
|
||||
#Pagination_Previous a img {
|
||||
position: relative;
|
||||
top: -15px;
|
||||
left: 35px;
|
||||
}
|
||||
69
css/TreeDropdownField.css
Normal file
69
css/TreeDropdownField.css
Normal file
@ -0,0 +1,69 @@
|
||||
div.TreeDropdownField {
|
||||
width: 35em;
|
||||
padding: 0;
|
||||
}
|
||||
html>body div.TreeDropdownField {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
div.TreeDropdownField span.items {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border: 1px #7f9db9 solid;
|
||||
cursor: pointer;
|
||||
width: 33em;
|
||||
float: left;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
div.TreeDropdownField div.tree_holder {
|
||||
clear: left;
|
||||
cursor: default;
|
||||
border: 1px black solid;
|
||||
margin: 0;
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
background-color: white;
|
||||
/**
|
||||
* HACK IE6, see http://www.hedgerwow.com/360/bugs/css-select-free.html
|
||||
*/
|
||||
position:absolute;
|
||||
z-index:10;
|
||||
width:33em;/*must have for any value*/;
|
||||
}
|
||||
|
||||
html>body div.TreeDropdownField div.tree_holder {
|
||||
top: 20px;
|
||||
left: 0px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/**
|
||||
* HACK IE6, see http://www.hedgerwow.com/360/bugs/css-select-free.html
|
||||
*/
|
||||
div.TreeDropdownField div.tree_holder iframe {
|
||||
display:none;/* IE5*/
|
||||
display/**/:block;/* IE5*/
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
z-index:-1;
|
||||
filter:mask();
|
||||
width:31em;/*must have for any big value*/
|
||||
height:200px/*must have for any big value*/;
|
||||
}
|
||||
|
||||
div.TreeDropdownField a.editLink {
|
||||
border-width: 1px 1px 1px 0;
|
||||
background: url(../../sapphire/images/TreeDropdownField_button.gif) left top no-repeat;
|
||||
width: 19px;
|
||||
height: 21px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
float: left;
|
||||
clear: right;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -9,6 +9,12 @@ class CheckboxSetField extends OptionsetField {
|
||||
|
||||
|
||||
protected $disabled = false;
|
||||
|
||||
function __construct($name, $title = "", $source = array(), $value = "", $form = null) {
|
||||
parent::__construct($name, $title, $source, $value, $form);
|
||||
|
||||
Requirements::css('sapphire/css/CheckboxSetField.css');
|
||||
}
|
||||
|
||||
/**
|
||||
* Object handles arrays and dosets being passed by reference
|
||||
|
||||
@ -630,8 +630,8 @@ class ComplexTableField_Popup extends Form {
|
||||
*/
|
||||
Requirements::clear();
|
||||
//Requirements::css('cms/css/layout.css');
|
||||
Requirements::css('cms/css/cms_right.css');
|
||||
Requirements::css('jsparty/tabstrip/tabstrip.css');
|
||||
Requirements::css('sapphire/css/Form.css');
|
||||
Requirements::css('sapphire/css/ComplexTableField_popup.css');
|
||||
Requirements::css('cms/css/typography.css');
|
||||
Requirements::javascript("jsparty/prototype.js");
|
||||
|
||||
@ -6,8 +6,9 @@
|
||||
class ProgressBar extends FormField {
|
||||
|
||||
function FieldHolder() {
|
||||
Requirements::javascript('sapphire/javascript/ProgressBar.js');
|
||||
|
||||
Requirements::javascript('sapphire/javascript/ProgressBar.js');
|
||||
Requirements::css('sapphire/css/ProgressBar.css');
|
||||
|
||||
return $this->renderWith('ProgressBar');
|
||||
}
|
||||
|
||||
|
||||
@ -18,7 +18,10 @@ class SelectionGroup extends CompositeField {
|
||||
*/
|
||||
function __construct($name, $items) {
|
||||
$this->name = $name;
|
||||
|
||||
parent::__construct($items);
|
||||
|
||||
Requirements::css('sapphire/css/SelectionGroup.css');
|
||||
}
|
||||
|
||||
function FieldSet() {
|
||||
|
||||
@ -187,6 +187,7 @@ class TableListField extends FormField {
|
||||
parent::__construct($name);
|
||||
|
||||
Requirements::javascript('sapphire/javascript/TableListField.js');
|
||||
Requirements::css('sapphire/css/TableListField.css');
|
||||
}
|
||||
|
||||
function FieldHolder() {
|
||||
|
||||
@ -16,6 +16,9 @@ class TreeDropdownField extends FormField {
|
||||
$this->sourceObject = $sourceObject;
|
||||
$this->keyField = $keyField;
|
||||
$this->labelField = $labelField;
|
||||
|
||||
Requirements::css('sapphire/css/TreeDropdownField.css');
|
||||
|
||||
parent::__construct($name, $title);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user