diff --git a/admin/css/screen.css b/admin/css/screen.css index 7da540515..c95ecddce 100644 --- a/admin/css/screen.css +++ b/admin/css/screen.css @@ -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; } diff --git a/admin/scss/_style.scss b/admin/scss/_style.scss index c9f6f256b..c116b36e9 100644 --- a/admin/scss/_style.scss +++ b/admin/scss/_style.scss @@ -755,6 +755,7 @@ form.member-profile-form { overflow-y: auto; overflow-x: auto; background: none; + width:100%; } } @@ -1002,4 +1003,50 @@ body.cms-dialog { padding: 4px; } -} \ No newline at end of file +} + +/** -------------------------------------------- + * 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%); + } + } + } + } +} diff --git a/filesystem/File.php b/filesystem/File.php index b557cb67c..a55ac034d 100644 --- a/filesystem/File.php +++ b/filesystem/File.php @@ -119,6 +119,8 @@ class File extends DataObject { 'cab','arj','tar','zip','zipx','sit','sitx','gz','tgz','bz2','ace','arc','pkg','dmg','hqx','jar', 'xml','pdf', ); + + protected static $labelSeparator = ':'; /** * @var If this is true, then restrictions set in {@link $allowed_max_file_size} and @@ -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 = "
"; $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"); + return new FieldList( new TabSet('Root', - new Tab('Main', + 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()) ) ) ); diff --git a/forms/FieldGroup.php b/forms/FieldGroup.php index 2c0dee4c0..87205184a 100644 --- a/forms/FieldGroup.php +++ b/forms/FieldGroup.php @@ -97,14 +97,21 @@ class FieldGroup extends CompositeField { $spaceZebra = isset($this->zebra) ? " fieldgroup-$this->zebra" : ''; $idAtt = isset($this->id) ? " id=\"{$this->id}\"" : ''; $content = "
"; - + + $count = 1; foreach($fs as $subfield) { $childZebra = (!isset($childZebra) || $childZebra == "odd") ? "even" : "odd"; if($subfield->hasMethod('setZebra')) { $subfield->setZebra($childZebra); } - - $content .= "
" . $subfield->{$this->subfieldParam}() . "
"; + + //label the first and last fields of each surrounding div + if ($count == 1) $firstLast = "first"; + elseif ($count == count($fs)) $firstLast = "last"; + else $firstLast = ''; + + $content .= "
" . $subfield->{$this->subfieldParam}() . "
"; + $count++; } $content .= "
"; diff --git a/model/Image.php b/model/Image.php index 7986da6c5..0761a0386 100644 --- a/model/Image.php +++ b/model/Image.php @@ -72,6 +72,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", + "{$this->Name}\n" + ); + + return $previewField; + } function getCMSFields() { $fields = parent::getCMSFields(); @@ -81,19 +96,9 @@ class Image extends File { $urlLink .= "{$this->RelativeLink()}"; $urlLink .= ""; - $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", - "{$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; }