Permalink
Browse files

MINOR Styling and structural fixes for File/Image->getCMSFields() and…

… relates usage in UploadField/HTMLEditorField.
  • Loading branch information...
1 parent 7d10ff7 commit da879da94078fe547ff8ea5419b4f4bba7076c12 @chillu chillu committed Feb 28, 2012
Showing with 128 additions and 170 deletions.
  1. +12 −26 admin/css/screen.css
  2. +48 −94 admin/scss/_style.scss
  3. +6 −0 admin/scss/_typography.scss
  4. +36 −32 filesystem/File.php
  5. +24 −0 forms/HtmlEditorField.php
  6. +0 −1 forms/UploadField.php
  7. +2 −17 model/Image.php
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -18,16 +18,9 @@
* Core Styles.
* ---------------------------------------------------- */
-html,body {
+html,body {
width: 100%;
height: 100%;
-
- @include global-reset;
-
- font-size: $font-base-size;
- line-height: $grid-y * 2;
- font-family: $font-family;
- color: $color-text;
}
body.cms {
@@ -1199,6 +1192,21 @@ body.cms-dialog {
padding: $grid-x*2;
}
}
+
+ .cms-file-info-data {
+ // Ensure it fits beside the image preview
+ max-width: 350px;
+
+ // Reduced label widths to fit everything in smaller space
+ .field {
+ label {
+ width: $grid-x*13;
+ }
+ .middleColumn {
+ margin-left: $grid-x*14;
+ }
+ }
+ }
}
@@ -1243,90 +1251,36 @@ body.cms-dialog {
* Item Edit Form
* -------------------------------------------- */
-#Form_ItemEditForm {
- .field {
- width:100%;
- .fieldgroup {
- height:$grid-y * 40;
- float:left;
- .fieldgroup-field.first {
- .ss-uploadfield-item {
- margin: 0;
- padding: $grid-x * 2;
- overflow: auto;
- .ss-uploadfield-item-preview {
- height: $grid-y * 12;
- line-height: $grid-y * 12;
- width: $grid-x * 33;
- text-align: center;
- font: {
- weight:bold;
- size:$font-base-size * 1.8;
- }
- float: left;
- overflow: hidden;
- &.ss-uploadfield-dropzone {
- @include box-shadow(lighten($color-medium-separator, 10%) 0 0 3px 3px inset);
- border: 2px dashed $color-medium-separator;
- background: $color-light-separator;
- }
- }
- .ss-uploadfield-item-name {
- float:none;
- display:block;
- clear:both;
- padding:$grid-y 0;
- }
- .ss-uploadfield-fromcomputer {
- padding-top:0px;
- margin-right:$grid-x;
- span.ui-button-text {
- padding-left:$grid-x * 3.5;
- }
- .ss-uploadfield {
- position:absolute;
- left:-9999em;
- }
- }
- .ss-uploadfield-fromfiles {
- padding-top:0px;
- margin:0;
- span.ui-button-text {
- padding-left:$grid-x * 3.5;
- }
- }
- }
- position:relative;
- margin-left:0px;
- }
- .fieldgroup-field {
- clear:both;
- width:$grid-x * 62.5;
- margin-left:$grid-x * 52.5;
- img {
- @include border-radius (8px);
- border: {
- width:$grid-x - 5;
- style:dashed;
- color:$color-menu-border;
- }
- position:absolute;
- top:$grid-y;
- }
- label {
- font-weight:bold;
- float:left;
- padding-top:$grid-y;
- line-height:$grid-y * 2;
- text-shadow: $color-text-light 1px 1px 0;
- }
- span {
- float:left;
- padding-left:$grid-x;
- font-style:italic;
- color:lighten($color-text, 20%);
- }
- }
+.cms-file-info {
+ overflow: auto;
+ // Emulate .field bottom border styling without applying .field class,
+ // as it messes up the nested .field element styling (blocklevel labels)
+ border-bottom: 1px solid $color-shadow-light;
+ @include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
+ margin-bottom: $grid-x;
+
+ // Preview might not always be available
+ .cms-file-info-preview {
+ float: left;
+ width: $grid-x * 22; // Same as ".field label"
+ margin-right: $grid-x;
+
+ img {
+ max-width: $grid-x * 22; // Same as ".field label"
}
- }
-}
+ }
+ .cms-file-info-data {
+ float: left;
+
+ .field {
+ // Unsetting styles from .field, make it more compact visually
+ margin-bottom: 0;
+ padding-bottom: $grid-x;
+ border: none;
+ box-shadow: none;
+ label, span {
+ padding: 0;
+ }
+ }
+ }
+}
@@ -3,6 +3,12 @@
*
* Contains the basic typography related styles for the admin interface.
*/
+body, html {
+ font-size: $font-base-size;
+ line-height: $grid-y * 2;
+ font-family: $font-family;
+ color: $color-text;
+}
.cms {
h2, h3, h4, h5 {
View
@@ -120,8 +120,6 @@ 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
@@ -257,57 +255,63 @@ function canDelete($member = null) {
return $this->canEdit($member);
}
- /*
- * Generate and return the preview image / file upload / replace field for this File
- * @return FormField
+ /**
+ * Returns the fields to power the edit screen of files in the CMS
+ * @return FieldList
*/
- protected function getFilePreview() {
- //file upload
+ function getCMSFields() {
+ // Preview
+ if($this instanceof Image) {
+ $formattedImage = $this->getFormattedImage('SetWidth', Image::$asset_preview_width);
+ $thumbnail = $formattedImage ? $formattedImage->URL : '';
+ $previewField = new LiteralField("ImageFull",
+ "<img id='thumbnailImage' class='thumbnail-preview' src='{$thumbnail}?r=" . rand(1,100000) . "' alt='{$this->Name}' />\n"
+ );
+ } else {
+ $previewField = new LiteralField("ImageFull", $this->CMSThumbnail());
+ }
+
+ // Upload
$uploadField = new UploadField('UploadField','Upload Field');
$uploadField->setConfig('previewMaxWidth', 40);
$uploadField->setConfig('previewMaxHeight', 30);
+ $uploadField->setConfig('allowedMaxFileNumber', 1);
//$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");
+ $filePreview = FormField::create('CompositeField',
+ FormField::create('CompositeField',
+ $previewField
+ )->setName("FilePreviewImage")->addExtraClass('cms-file-info-preview'),
+ FormField::create('CompositeField',
+ FormField::create('CompositeField',
+ new ReadonlyField("FileType", _t('AssetTableField.TYPE','File type') . ':'),
+ new ReadonlyField("Size", _t('AssetTableField.SIZE','File size') . ':', $this->getSize()),
+ $urlField = new ReadonlyField('ClickableURL', _t('AssetTableField.URL','URL'),
+ sprintf('<a href="%s" target="_blank">%s</a>', $this->Link(), $this->RelativeLink())
+ ),
+ new DateField_Disabled("Created", _t('AssetTableField.CREATED','First uploaded') . ':'),
+ new DateField_Disabled("LastEdited", _t('AssetTableField.LASTEDIT','Last changed') . ':')
+ )
+ )->setName("FilePreviewData")->addExtraClass('cms-file-info-data')
+ )->setName("FilePreview")->addExtraClass('cms-file-info');
+ $urlField->dontEscape = true;
return new FieldList(
new TabSet('Root',
new Tab('Main',
$filePreview,
+ //TODO: make the uploadField replace the existing file
+ // $uploadField,
new TextField("Title", _t('AssetTableField.TITLE','Title')),
new TextField("Name", _t('AssetTableField.FILENAME','Filename')),
- new LiteralField("AbsoluteURL", $urlLink), //TODO: replace this is a proper preview
new DropdownField("OwnerID", _t('AssetTableField.OWNER','Owner'), Member::mapInCMSGroups())
)
)
View
@@ -497,7 +497,29 @@ protected function getFieldsForFlash($url, $file) {
* @return FieldList
*/
protected function getFieldsForImage($url, $file) {
+ $formattedImage = $file->getFormattedImage('SetWidth', Image::$asset_preview_width);
+ $thumbnail = $formattedImage ? $formattedImage->URL : '';
+ $previewField = new LiteralField("ImageFull",
+ "<img id='thumbnailImage' class='thumbnail-preview' src='{$thumbnail}?r=" . rand(1,100000) . "' alt='{$file->Name}' />\n"
+ );
+
$fields = new FieldList(
+ $filePreview = FormField::create('CompositeField',
+ FormField::create('CompositeField',
+ $previewField
+ )->setName("FilePreviewImage")->addExtraClass('cms-file-info-preview'),
+ FormField::create('CompositeField',
+ FormField::create('CompositeField',
+ new ReadonlyField("FileType", _t('AssetTableField.TYPE','File type') . ':', $file->FileType),
+ new ReadonlyField("Size", _t('AssetTableField.SIZE','File size') . ':', $file->getSize()),
+ $urlField = new ReadonlyField('ClickableURL', _t('AssetTableField.URL','URL'),
+ sprintf('<a href="%s" target="_blank">%s</a>', $file->Link(), $file->RelativeLink())
+ ),
+ new DateField_Disabled("Created", _t('AssetTableField.CREATED','First uploaded') . ':', $file->Created),
+ new DateField_Disabled("LastEdited", _t('AssetTableField.LASTEDIT','Last changed') . ':', $file->LastEdited)
+ )
+ )->setName("FilePreviewData")->addExtraClass('cms-file-info-data')
+ )->setName("FilePreview")->addExtraClass('cms-file-info'),
new TextField(
'AltText',
_t('HtmlEditorField.IMAGEALTTEXT', 'Alternative text (alt) - shown if image cannot be displayed'),
@@ -524,6 +546,7 @@ protected function getFieldsForImage($url, $file) {
$heightField = new TextField('Height', " x " . _t('HtmlEditorField.IMAGEHEIGHTPX', 'Height'), $file->Height)
)
);
+ $urlField->dontEscape = true;
$dimensionsField->addExtraClass('dimensions');
$widthField->setMaxLength(5);
$heightField->setMaxLength(5);
@@ -583,6 +606,7 @@ class HtmlEditorField_File extends ViewableData {
function __construct($url, $file = null) {
$this->url = $url;
$this->file = $file;
+ $this->failover = $file;
parent::__construct();
}
View
@@ -755,7 +755,6 @@ public function EditForm() {
$validator
);
$form->loadDataFrom($file);
- $form->addExtraClass('small');
return $form;
}
Oops, something went wrong.

0 comments on commit da879da

Please sign in to comment.