diff --git a/admin/css/screen.css b/admin/css/screen.css index f36c8bc17..0b454944d 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -88,6 +88,8 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, /** ----------------------------- CMS Components ------------------------------ */ /** File: typography.scss Contains the basic typography related styles for the admin interface. */ +body, html { font-size: 12px; line-height: 16px; font-family: Arial, sans-serif; color: #444444; } + .cms h2, .cms h3, .cms h4, .cms h5 { font-weight: bold; margin: 16px 0 16px 0; line-height: 16px; } .cms h2 { font-size: 18px; line-height: 24px; } .cms h3 { font-size: 16px; } @@ -214,16 +216,7 @@ input.radio { margin-left: 0; } * (see _tree.scss and _menu.scss). */ /** ---------------------------------------------------- Core Styles. ---------------------------------------------------- */ -html, body { width: 100%; height: 100%; font-size: 12px; line-height: 16px; font-family: Arial, sans-serif; color: #444444; } -html html, html body, html div, html span, html applet, html object, html iframe, html h1, html h2, html h3, html h4, html h5, html h6, html p, html blockquote, html pre, html a, html abbr, html acronym, html address, html big, html cite, html code, html del, html dfn, html em, html img, html ins, html kbd, html q, html s, html samp, html small, html strike, html strong, html sub, html sup, html tt, html var, html b, html u, html i, html center, html dl, html dt, html dd, html ol, html ul, html li, html fieldset, html form, html label, html legend, html table, html caption, html tbody, html tfoot, html thead, html tr, html th, html td, html article, html aside, html canvas, html details, html embed, html figure, html figcaption, html footer, html header, html hgroup, html menu, html nav, html output, html ruby, html section, html summary, html time, html mark, html audio, html video, body html, body body, body div, body span, body applet, body object, body iframe, body h1, body h2, body h3, body h4, body h5, body h6, body p, body blockquote, body pre, body a, body abbr, body acronym, body address, body big, body cite, body code, body del, body dfn, body em, body img, body ins, body kbd, body q, body s, body samp, body small, body strike, body strong, body sub, body sup, body tt, body var, body b, body u, body i, body center, body dl, body dt, body dd, body ol, body ul, body li, body fieldset, body form, body label, body legend, body table, body caption, body tbody, body tfoot, body thead, body tr, body th, body td, body article, body aside, body canvas, body details, body embed, body figure, body figcaption, body footer, body header, body hgroup, body menu, body nav, body output, body ruby, body section, body summary, body time, body mark, body audio, body video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } -html body, body body { line-height: 1; } -html ol, html ul, body ol, body ul { list-style: none; } -html table, body table { border-collapse: collapse; border-spacing: 0; } -html caption, html th, html td, body caption, body th, body td { text-align: left; font-weight: normal; vertical-align: middle; } -html q, html blockquote, body q, body blockquote { quotes: none; } -html q:before, html q:after, html blockquote:before, html blockquote:after, body q:before, body q:after, body blockquote:before, body blockquote:after { content: ""; content: none; } -html a img, body a img { border: none; } -html article, html aside, html details, html figcaption, html figure, html footer, html header, html hgroup, html menu, html nav, html section, html summary, body article, body aside, body details, body figcaption, body figure, body footer, body header, body hgroup, body menu, body nav, body section, body summary { display: block; } +html, body { width: 100%; height: 100%; } body.cms { overflow: hidden; } @@ -458,6 +451,9 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai .htmleditorfield-mediaform .ss-htmleditorfield-file .overview .title { display: inline-block; vertical-align: middle; background: #fff; border: 1px solid #b3b3b3; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; margin-left: 16px; padding: 4px; } .htmleditorfield-mediaform .ss-htmleditorfield-file .overview .action-delete { display: inline-block; } .htmleditorfield-mediaform .ss-htmleditorfield-file .details { padding: 16px; } +.htmleditorfield-mediaform .cms-file-info-data { max-width: 350px; } +.htmleditorfield-mediaform .cms-file-info-data .field label { width: 104px; } +.htmleditorfield-mediaform .cms-file-info-data .field .middleColumn { margin-left: 112px; } /** -------------------------------------------- Step labels -------------------------------------------- */ .step-label > * { display: inline-block; vertical-align: top; } @@ -466,22 +462,12 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai .step-label .title { height: 18px; padding: 4px; } /** -------------------------------------------- Item Edit Form -------------------------------------------- */ -#Form_ItemEditForm .field { width: 100%; } -#Form_ItemEditForm .field .fieldgroup { height: 320px; float: left; } -#Form_ItemEditForm .field .fieldgroup .fieldgroup-field.first { position: relative; margin-left: 0px; } -#Form_ItemEditForm .field .fieldgroup .fieldgroup-field.first .ss-uploadfield-item { margin: 0; padding: 16px; overflow: auto; } -#Form_ItemEditForm .field .fieldgroup .fieldgroup-field.first .ss-uploadfield-item .ss-uploadfield-item-preview { height: 96px; line-height: 96px; width: 264px; text-align: center; font-weight: bold; font-size: 21.6px; float: left; overflow: hidden; } -#Form_ItemEditForm .field .fieldgroup .fieldgroup-field.first .ss-uploadfield-item .ss-uploadfield-item-preview.ss-uploadfield-dropzone { -moz-box-shadow: #9a9a9a 0 0 3px 3px inset; -webkit-box-shadow: #9a9a9a 0 0 3px 3px inset; -o-box-shadow: #9a9a9a 0 0 3px 3px inset; box-shadow: #9a9a9a 0 0 3px 3px inset; border: 2px dashed gray; background: rgba(201, 205, 206, 0.8); } -#Form_ItemEditForm .field .fieldgroup .fieldgroup-field.first .ss-uploadfield-item .ss-uploadfield-item-name { float: none; display: block; clear: both; padding: 8px 0; } -#Form_ItemEditForm .field .fieldgroup .fieldgroup-field.first .ss-uploadfield-item .ss-uploadfield-fromcomputer { padding-top: 0px; margin-right: 8px; } -#Form_ItemEditForm .field .fieldgroup .fieldgroup-field.first .ss-uploadfield-item .ss-uploadfield-fromcomputer span.ui-button-text { padding-left: 28px; } -#Form_ItemEditForm .field .fieldgroup .fieldgroup-field.first .ss-uploadfield-item .ss-uploadfield-fromcomputer .ss-uploadfield { position: absolute; left: -9999em; } -#Form_ItemEditForm .field .fieldgroup .fieldgroup-field.first .ss-uploadfield-item .ss-uploadfield-fromfiles { padding-top: 0px; margin: 0; } -#Form_ItemEditForm .field .fieldgroup .fieldgroup-field.first .ss-uploadfield-item .ss-uploadfield-fromfiles span.ui-button-text { padding-left: 28px; } -#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; } +.cms-file-info { overflow: auto; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); margin-bottom: 8px; } +.cms-file-info .cms-file-info-preview { float: left; width: 176px; margin-right: 8px; } +.cms-file-info .cms-file-info-preview img { max-width: 176px; } +.cms-file-info .cms-file-info-data { float: left; } +.cms-file-info .cms-file-info-data .field { margin-bottom: 0; padding-bottom: 8px; border: none; box-shadow: none; } +.cms-file-info .cms-file-info-data .field label, .cms-file-info .cms-file-info-data .field span { padding: 0; } /** 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, .TreeDropdownField .treedropdownfield-panel .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index 51552fa08..cc19ca321 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -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; + } + } + } +} \ No newline at end of file diff --git a/admin/scss/_typography.scss b/admin/scss/_typography.scss index 8060bc774..7d95fca21 100644 --- a/admin/scss/_typography.scss +++ b/admin/scss/_typography.scss @@ -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 { diff --git a/filesystem/File.php b/filesystem/File.php index 53473b44a..62c0a9d67 100644 --- a/filesystem/File.php +++ b/filesystem/File.php @@ -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 @@ class File extends DataObject { 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", + "{$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 = "
"; - $urlLink .= ""; - $urlLink .= "{$this->RelativeLink()}"; - $urlLink .= "
"; - //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('%s', $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()) ) ) diff --git a/forms/HtmlEditorField.php b/forms/HtmlEditorField.php index 7f697bfc2..83b4c7d93 100644 --- a/forms/HtmlEditorField.php +++ b/forms/HtmlEditorField.php @@ -497,7 +497,29 @@ class HtmlEditorField_Toolbar extends RequestHandler { * @return FieldList */ protected function getFieldsForImage($url, $file) { + $formattedImage = $file->getFormattedImage('SetWidth', Image::$asset_preview_width); + $thumbnail = $formattedImage ? $formattedImage->URL : ''; + $previewField = new LiteralField("ImageFull", + "{$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('%s', $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 @@ class HtmlEditorField_Toolbar extends RequestHandler { $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(); } diff --git a/forms/UploadField.php b/forms/UploadField.php index 8043b18d8..276da3a77 100644 --- a/forms/UploadField.php +++ b/forms/UploadField.php @@ -755,7 +755,6 @@ class UploadField_ItemHandler extends RequestHandler { $validator ); $form->loadDataFrom($file); - $form->addExtraClass('small'); return $form; } diff --git a/model/Image.php b/model/Image.php index 0761a0386..c19714a9c 100644 --- a/model/Image.php +++ b/model/Image.php @@ -73,21 +73,6 @@ 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", - "{$this->Name}\n" - ); - - return $previewField; - } - function getCMSFields() { $fields = parent::getCMSFields(); @@ -97,8 +82,8 @@ class Image extends File { $urlLink .= ""; //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)); + $fileAttributes = $fields->fieldByName('Root.Main.FilePreview')->fieldByName('FilePreviewData'); + $fileAttributes->push(new ReadonlyField("Dimensions", _t('AssetTableField.DIM','Dimensions') . ':')); return $fields; }