Merge pull request #231 from chillu/pulls/tab-consolidation

ENHANCEMENT Tab style consolidation and design consistency
This commit is contained in:
Sean Harvey 2012-11-06 13:36:30 -08:00
commit 381ab72860
9 changed files with 18 additions and 63 deletions

View File

@ -221,11 +221,11 @@ JS
$tabList = new Tab('ListView', _t('AssetAdmin.ListView', 'List View')),
$tabTree = new Tab('TreeView', _t('AssetAdmin.TreeView', 'Tree View'))
);
$tabList->addExtraClass("content-listview");
$tabTree->addExtraClass("content-treeview");
$tabList->addExtraClass("content-listview cms-tabset-icon list");
$tabTree->addExtraClass("content-treeview cms-tabset-icon tree");
if($fields->Count() && $folder->exists()) {
$tabs->push($tabDetails = new Tab('DetailsView', _t('AssetAdmin.DetailsView', 'Details')));
$tabDetails->addExtraClass("content-galleryview");
$tabDetails->addExtraClass("content-galleryview cms-tabset-icon edit");
foreach($fields as $field) {
$fields->removeByName($field->getName());
$tabDetails->push($field);

View File

@ -51,10 +51,13 @@ class SiteConfig extends DataObject implements PermissionProvider {
$fields = new FieldList(
new TabSet("Root",
$tabMain = new Tab('Main',
$titleField = new TextField("Title", _t('SiteConfig.SITETITLE', "Site title")),
$taglineField = new TextField("Tagline", _t('SiteConfig.SITETAGLINE', "Site Tagline/Slogan")),
$themeDropdownField = new DropdownField("Theme", _t('SiteConfig.THEME', 'Theme'), $this->getAvailableThemes())
$tabMain = new TabSet('Main',
new Tab('bla',
$titleField = new TextField("Title", _t('SiteConfig.SITETITLE', "Site title")),
$taglineField = new TextField("Tagline", _t('SiteConfig.SITETAGLINE', "Site Tagline/Slogan")),
$themeDropdownField = new DropdownField("Theme", _t('SiteConfig.THEME', 'Theme'), $this->getAvailableThemes())
),
new Tab('blubb')
),
$tabAccess = new Tab('Access',
$viewersOptionsField = new OptionsetField("CanViewType", _t('SiteConfig.VIEWHEADER', "Who can view pages on this site?")),

View File

@ -33,14 +33,6 @@
.cms .AssetAdmin .cms-content-fields .cms-edit-form.AssetAdmin { overflow-y: auto; }
.cms .AssetAdmin .cms-content-fields .cms-content-tools .cms-panel-content { overflow: hidden; }
.cms .AssetAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form { height: 100%; }
.cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav li a { font-weight: bold; padding: 0 20px 0; text-indent: -9999em; background: url(../images/content-header-tabs-sprite.png) no-repeat; }
.cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav li.content-treeview a { background-position: 2px 0px; }
.cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav li.content-galleryview a { background-position: -160px 0px; }
.cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav li.content-listview a { background-position: -39px 0px; }
.cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-state-active, .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active, .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active { border-top: none; }
.cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-state-active.content-treeview a, .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active.content-treeview a, .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active.content-treeview a { background-position: 1px -40px; }
.cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-state-active.content-galleryview a, .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active.content-galleryview a, .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active.content-galleryview a { background-position: -161px -40px; }
.cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-state-active.content-listview a, .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-content .ui-state-active.content-listview a, .cms .AssetAdmin .cms-content-header-tabs .ui-tabs-nav .ui-widget-header .ui-state-active.content-listview a { background-position: -38px -40px; }
.cms .AssetAdmin .cms-content-toolbar .cms-page-add-button { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f3f3), color-stop(100%, #d9d9d9)); background-image: -webkit-linear-gradient(#f3f3f3, #d9d9d9); background-image: -moz-linear-gradient(#f3f3f3, #d9d9d9); background-image: -o-linear-gradient(#f3f3f3, #d9d9d9); background-image: linear-gradient(#f3f3f3, #d9d9d9); border-color: #c0c0c2; }
.cms .AssetAdmin .cms-content-toolbar .cms-page-add-button span.btn-icon-add { height: 17px; }
.cms .AssetAdmin .cms-content-toolbar .cms-page-add-button span.ui-button-text { color: #393939; text-shadow: white 0 1px 1px; }

View File

@ -11,46 +11,6 @@
}
}
}
.cms-content-header-tabs {
.ui-tabs-nav {
li {
a {
font-weight: bold;
padding: 0 20px 0;
text-indent:-9999em;
background: url(../images/content-header-tabs-sprite.png) no-repeat;
}
&.content-treeview a {
background-position: 2px 0px;
}
&.content-galleryview a {
background-position: -160px 0px;
}
&.content-listview a {
background-position: -39px 0px;
}
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: {
top:none;
}
&.content-treeview a {
background-position: 1px -40px;
}
&.content-galleryview a {
background-position: -161px -40px;
}
&.content-listview a {
background-position: -38px -40px;
}
}
}
}
.cms-content-toolbar {
.cms-page-add-button {

View File

@ -14,7 +14,7 @@
<% if Fields.hasTabset %>
<% with Fields.fieldByName('Root') %>
<div class="cms-content-header-tabs">
<ul>
<ul class="cms-tabset-nav-primary">
<% loop Tabs %>
<li<% if extraClass %> class="$extraClass"<% end_if %>><a href="#$id">$Title</a></li>
<% end_loop %>

View File

@ -5,7 +5,7 @@
<h2><% _t('AssetAdmin.ADDFILES', 'Add Files') %></h2>
</div>
<div class="cms-content-header-tabs">
<ul>
<ul class="cms-tabset-nav-primary">
<li>
<a href="#cms-content-fromyourcomputer"><% _t('AssetAdmin.FROMYOURCOMPUTER', 'From your computer') %></a>
</li>

View File

@ -8,7 +8,7 @@
</div>
<div class="cms-content-header-tabs">
<ul>
<ul class="cms-tabset-nav-primary">
<li class="content-treeview<% if class == 'CMSPageEditController' %> ui-tabs-active<% end_if %>">
<a href="$LinkPageEdit" class="cms-panel-link" title="Form_EditForm" data-href="$LinkPageEdit">
<% _t('CMSMain.TabContent', 'Content') %>

View File

@ -8,15 +8,15 @@
</div>
<div class="cms-content-header-tabs">
<ul>
<li class="content-treeview<% if ViewState == tree %> ui-tabs-active<% end_if %>">
<ul class="cms-tabset-nav-primary">
<li class="content-treeview<% if ViewState == tree %> ui-tabs-active<% end_if %> cms-tabset-icon tree">
<a href="#cms-content-treeview" class="cms-panel-link" data-href="$LinkTreeView"><% _t('CMSPagesController.TreeView', 'Tree View') %></a>
</li>
<li class="content-listview<% if ViewState == list %> ui-tabs-active<% end_if %>">
<li class="content-listview<% if ViewState == list %> ui-tabs-active<% end_if %> cms-tabset-icon list">
<a href="#cms-content-listview" class="cms-panel-link" data-href="$LinkListView"><% _t('CMSPagesController.ListView', 'List View') %></a>
</li>
<!--
<li class="content-galleryview">
<li class="content-galleryview cms-tabset-icon gallery">
<a href="#cms-content-galleryview"><% _t('CMSPagesController.GalleryView', 'Gallery View') %></a>
</li>
-->

View File

@ -12,7 +12,7 @@
<% if Fields.hasTabset %>
<% with Fields.fieldByName('Root') %>
<div class="cms-content-header-tabs">
<ul>
<ul class="cms-tabset-nav-primary">
<% loop Tabs %>
<li<% if extraClass %> class="$extraClass"<% end_if %>><a href="#$id">$Title</a></li>
<% end_loop %>