Created initial concept for blog UI rework

This commit is contained in:
micmania1 2015-02-01 09:24:37 +00:00
parent c31a45497d
commit f6c35d67e6
5 changed files with 81 additions and 31 deletions

View File

@ -0,0 +1,5 @@
<?php
class BlogAdminSidebar extends FieldGroup {
}

View File

@ -62,8 +62,24 @@ class BlogPost extends Page {
$self =& $this; $self =& $this;
$this->beforeUpdateCMSFields(function($fields) use ($self) { $this->beforeUpdateCMSFields(function($fields) use ($self) {
$fields->addFieldsToTab('Root.Main', array(
HeaderField::create('Post Options', 3), // Add featured image
$fields->insertBefore(
$uploadField = UploadField::create("FeaturedImage", _t("BlogPost.FeaturedImage", "Featured Image")),
"Content"
);
$uploadField->getValidator()->setAllowedExtensions(array('jpg', 'jpeg', 'png', 'gif'));
// Now we're going to create the blog options panel.
$menuTitle = $fields->dataFieldByName('MenuTitle');
$urlSegment = $fields->dataFieldByName('URLSegment');
$fields->removeFieldsFromTab('Root.Main', array(
'MenuTitle',
'URLSegment',
));
$options = BlogAdminSidebar::create(
$menuTitle,
$urlSegment,
$publishDate = DatetimeField::create("PublishDate", _t("BlogPost.PublishDate", "Publish Date")), $publishDate = DatetimeField::create("PublishDate", _t("BlogPost.PublishDate", "Publish Date")),
ListboxField::create( ListboxField::create(
"Categories", "Categories",
@ -75,40 +91,13 @@ class BlogPost extends Page {
_t("BlogPost.Tags", "Tags"), _t("BlogPost.Tags", "Tags"),
$self->Parent()->Tags()->map()->toArray() $self->Parent()->Tags()->map()->toArray()
)->setMultiple(true) )->setMultiple(true)
)); )->setTitle('Post Options');
$fields->insertBefore($options, 'Root');
$publishDate->getDateField()->setConfig("showcalendar", true); $publishDate->getDateField()->setConfig("showcalendar", true);
// Add featured image
$fields->insertBefore(
$uploadField = UploadField::create("FeaturedImage", _t("BlogPost.FeaturedImage", "Featured Image")),
"Content"
);
$uploadField->getValidator()->setAllowedExtensions(array('jpg', 'jpeg', 'png', 'gif'));
}); });
$fields = parent::getCMSFields(); $fields = parent::getCMSFields();
// We're going to make an SEO tab and move all the usual crap there
$menuTitle = $fields->dataFieldByName('MenuTitle');
$urlSegment = $fields->dataFieldByName('URLSegment');
$fields->addFieldsToTab('Root.SEO', array(
$menuTitle,
$urlSegment,
));
$metaField = $fields->fieldByName('Root.Main.Metadata');
if($metaField) {
$metaFields = $metaField->getChildren();
if($metaFields->count() > 0) {
$tab = $fields->findOrMakeTab('Root.SEO');
$tab->push(HeaderField::create('Meta', 3));
foreach($metaFields as $field) {
$tab->push($field);
}
}
$fields->removeByName('Metadata');
}
return $fields; return $fields;
} }

View File

@ -21,3 +21,22 @@
clear: none; clear: none;
float: left; float: left;
} }
/* line 23, ../scss/cms.scss */
.blog-admin-sidebar {
width: 280px !important;
border-right: none;
border-left: 1px solid #C0C0C2;
height: 547px;
position: fixed;
right: 0;
}
/* line 31, ../scss/cms.scss */
.blog-admin-sidebar ~ .ss-tabset {
width: 866px;
float: left;
}
/* line 37, ../scss/cms.scss */
.blog-admin-sidebar.cms-content-tools .cms-panel-content {
width: auto;
}

View File

@ -18,4 +18,24 @@
#FeaturedImage .middleColumn { #FeaturedImage .middleColumn {
clear: none; clear: none;
float: left; float: left;
}
.blog-admin-sidebar {
width: 280px !important;
border-right: none;
border-left: 1px solid #C0C0C2;
height: 547px;
position: fixed;
right: 0;
~ .ss-tabset {
width: 866px;
float:left;
}
&.cms-content-tools {
.cms-panel-content {
width: auto;
}
}
} }

View File

@ -0,0 +1,17 @@
<div class="cms-content-tools west cms-panel cms-panel-layout blog-admin-sidebar" data-expandOnClick="true" data-layout-type="border" id="blog-admin-sidebar">
<div class="cms-panel-content center">
<div class="cms-content-view cms-tree-view-sidebar" id="blog-admin-content">
<h3 class="cms-panel-header">$Title</h3>
<% loop $Children %>
$FieldHolder
<% end_loop %>
</div>
</div>
<div class="cms-panel-content-collapsed">
<h3 class="cms-panel-header">$Title</h3>
</div>
<div class="cms-panel-toggle south">
<a class="toggle-expand" href="#"><span>&laquo;</span></a>
<a class="toggle-collapse" href="#"><span>&raquo;</span></a>
</div>
</div>