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: File and Image CMSFields styling

Browse Source
This commit is contained in:
Julian Seidenberg 2012-02-24 10:43:37 +13:00 committed by Ingo Schommer
parent 7a755da101
commit 550f75408e
5 changed files with 130 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
admin/css/screen.css
View File

@ -346,7 +346,7 @@ form.member-profile-form #Groups .middleColumn .TreeDropdownField { width: 90%;
form.member-profile-form #Permissions .optionset li { float: none; width: auto; }
.cms .cms-content { border-right: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -o-box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); box-shadow: 3px 0 4px rgba(0, 0, 0, 0.15); -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -khtml-border-radius: 0; border-radius: 0; }
.cms .cms-content-fields { /* always show a y scroll bar as popups like TreeDropdowns can trigger longer pages and the extra scroll bar doesn't fire our sizing bar */ overflow-y: auto; overflow-x: auto; background: none; }
.cms .cms-content-fields { /* always show a y scroll bar as popups like TreeDropdowns can trigger longer pages and the extra scroll bar doesn't fire our sizing bar */ overflow-y: auto; overflow-x: auto; background: none; width: 100%; }
/** -------------------------------------------- Panels -------------------------------------------- */
.cms-panel { overflow: hidden; }
@ -410,6 +410,15 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai
.step-label .arrow { height: 26px; width: 10px; background: url('../images/sprites_32x32-s98eda4974b.png') 0 -171px no-repeat; margin-right: 4px; }
.step-label .title { height: 18px; padding: 4px; }
/** -------------------------------------------- Item Edit Form -------------------------------------------- */
#Form_ItemEditForm .field { width: 100%; }
#Form_ItemEditForm .field .fieldgroup { height: 230px; float: left; }
#Form_ItemEditForm .field .fieldgroup .fieldgroup-field.first { position: relative; margin-left: 0px; }
#Form_ItemEditForm .field .fieldgroup .fieldgroup-field { clear: both; width: 500px; margin-left: 420px; }
#Form_ItemEditForm .field .fieldgroup .fieldgroup-field img { -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; border-width: 3px; border-style: dashed; border-color: #8c99a1; position: absolute; top: 8px; }
#Form_ItemEditForm .field .fieldgroup .fieldgroup-field label { font-weight: bold; float: left; padding-top: 8px; line-height: 16px; text-shadow: white 1px 1px 0; }
#Form_ItemEditForm .field .fieldgroup .fieldgroup-field span { float: left; padding-left: 8px; font-style: italic; color: #777777; }
/** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file). The styles are usually added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree. */
.cms .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; }
.cms .jstree li { display: block; margin: 0; padding: 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; }

47
admin/scss/_style.scss
View File

@ -755,6 +755,7 @@ form.member-profile-form {
overflow-y: auto;
overflow-x: auto;
background: none;
width:100%;
}
}
@ -1003,3 +1004,49 @@ body.cms-dialog {
}
}
/** --------------------------------------------
* Item Edit Form
* -------------------------------------------- */
#Form_ItemEditForm {
.field {
width:100%;
.fieldgroup {
height:230px;
float:left;
.fieldgroup-field.first {
position:relative;
margin-left:0px;
}
.fieldgroup-field {
clear:both;
width:500px;
margin-left:420px;
img {
@include border-radius (8px);
border: {
width:3px;
style:dashed;
color:$color-menu-border;
}
position:absolute;
top:8px;
}
label {
font-weight:bold;
float:left;
padding-top:8px;
line-height:16px;
text-shadow: $color-text-light 1px 1px 0;
}
span {
float:left;
padding-left:8px;
font-style:italic;
color:lighten($color-text, 20%);
}
}
}
}
}

49
filesystem/File.php
View File

@ -120,6 +120,8 @@ class File extends DataObject {
'xml','pdf',
);
protected static $labelSeparator = ':';
/**
* @var If this is true, then restrictions set in {@link $allowed_max_file_size} and
* {@link $allowed_extensions} will be applied to users with admin privileges as
@ -255,23 +257,58 @@ class File extends DataObject {
return $this->canEdit($member);
}
/*
* Generate and return the preview image / file upload / replace field for this File
* @return FormField
*/
protected function getFilePreview() {
//file upload
$uploadField = new UploadField('UploadField','Upload Field');
$uploadField->setConfig('previewMaxWidth', 40);
$uploadField->setConfig('previewMaxHeight', 30);
//$uploadField->setTemplate('FileEditUploadField');
if ($this->ParentID) {
$parent = $this->Parent();
if ($parent) { //set the parent that the Upload field should use for uploads
$uploadField->setFolderName($parent->getFilename());
$uploadField->setRecord($parent);
//TODO: make the uploadField replace the existing file
}
}
return $uploadField;
}
/**
* Returns the fields to power the edit screen of files in the CMS
* @return FieldList
*/
function getCMSFields() {
$urlLink = "<div class='field readonly'>";
$urlLink .= "<label class='left'>"._t('AssetTableField.URL','URL')."</label>";
$urlLink .= "<span class='readonly'><a href='{$this->Link()}' target='_blank'>{$this->RelativeLink()}</a></span>";
$urlLink .= "</div>";
//create the file attributes in a FieldGroup
$filePreview = new FieldGroup(
$this->getFilePreview(),
new ReadonlyField("FileType", _t('AssetTableField.TYPE','File type').self::$labelSeparator),
new ReadonlyField("Filename", _t('AssetTableField.FILENAME','File name').self::$labelSeparator),
new ReadonlyField("Size", _t('AssetTableField.SIZE','File size').self::$labelSeparator, $this->getSize()),
new DateField_Disabled("Created", _t('AssetTableField.CREATED','First uploaded').self::$labelSeparator),
new DateField_Disabled("LastEdited", _t('AssetTableField.LASTEDIT','Last changed').self::$labelSeparator)
);
$filePreview->setTitle("File preview");
$filePreview->setName("FilePreview");
return new FieldList(
new TabSet('Root',
new Tab('Main',
$filePreview,
new TextField("Title", _t('AssetTableField.TITLE','Title')),
new TextField("Name", _t('AssetTableField.FILENAME','Filename')),
new LiteralField("AbsoluteURL", $urlLink),
new ReadonlyField("FileType", _t('AssetTableField.TYPE','Type')),
new ReadonlyField("Size", _t('AssetTableField.SIZE','Size'), $this->getSize()),
new DropdownField("OwnerID", _t('AssetTableField.OWNER','Owner'), Member::mapInCMSGroups()),
new DateField_Disabled("Created", _t('AssetTableField.CREATED','First uploaded')),
new DateField_Disabled("LastEdited", _t('AssetTableField.LASTEDIT','Last changed'))
new LiteralField("AbsoluteURL", $urlLink), //TODO: replace this is a proper preview
new DropdownField("OwnerID", _t('AssetTableField.OWNER','Owner'), Member::mapInCMSGroups())
)
)
);

9
forms/FieldGroup.php
View File

@ -98,13 +98,20 @@ class FieldGroup extends CompositeField {
$idAtt = isset($this->id) ? " id=\"{$this->id}\"" : '';
$content = "<div class=\"fieldgroup$spaceZebra\"$idAtt>";
$count = 1;
foreach($fs as $subfield) {
$childZebra = (!isset($childZebra) || $childZebra == "odd") ? "even" : "odd";
if($subfield->hasMethod('setZebra')) {
$subfield->setZebra($childZebra);
}
$content .= "<div class=\"fieldgroup-field\">" . $subfield->{$this->subfieldParam}() . "</div>";
//label the first and last fields of each surrounding div
if ($count == 1) $firstLast = "first";
elseif ($count == count($fs)) $firstLast = "last";
else $firstLast = '';
$content .= "<div class=\"fieldgroup-field $firstLast\">" . $subfield->{$this->subfieldParam}() . "</div>";
$count++;
}
$content .= "</div>";

31
model/Image.php
View File

@ -73,6 +73,21 @@ class Image extends File {
parent::defineMethods();
}
/*
* Generate and return the preview image / file upload / replace field for this File
* @return FormField
*/
protected function getFilePreview() {
$formattedImage = $this->getFormattedImage('AssetLibraryPreview');
$thumbnail = $formattedImage ? $formattedImage->URL : '';
$previewField = new LiteralField("ImageFull",
"<img id='thumbnailImage' class='thumbnail-preview' src='{$thumbnail}?r=" . rand(1,100000) . "' alt='{$this->Name}' />\n"
);
return $previewField;
}
function getCMSFields() {
$fields = parent::getCMSFields();
@ -81,19 +96,9 @@ class Image extends File {
$urlLink .= "<span class='readonly'><a href='{$this->Link()}'>{$this->RelativeLink()}</a></span>";
$urlLink .= "</div>";
$big = $this->URL;
$formattedImage = $this->getFormattedImage('AssetLibraryPreview');
$thumbnail = $formattedImage ? $formattedImage->URL : '';
// Hmm this required the translated string to be appended to BottomRoot to add this to the Main tab
$fields->addFieldToTab('Root.Main',
new ReadonlyField("Dimensions", _t('AssetTableField.DIM','Dimensions'))
);
$fields->addFieldToTab('Root.Main',
new LiteralField("ImageFull",
"<img id='thumbnailImage' src='{$thumbnail}?r=" . rand(1,100000) . "' alt='{$this->Name}' />"
)
);
//attach the addition file information for an image to the existing FieldGroup create in the parent class
$fileAttributes = $fields->FieldByName('Root.Main.FilePreview');
$fileAttributes->push(new ReadonlyField("Dimensions", _t('AssetTableField.DIM','Dimensions').self::$labelSeparator));
return $fields;
}