ENHANCEMENT Tab style consolidation and design consistency

This commit is contained in:
Ingo Schommer 2012-11-06 10:53:34 +01:00
parent bd86cf2c50
commit a52514a306
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')), $tabList = new Tab('ListView', _t('AssetAdmin.ListView', 'List View')),
$tabTree = new Tab('TreeView', _t('AssetAdmin.TreeView', 'Tree View')) $tabTree = new Tab('TreeView', _t('AssetAdmin.TreeView', 'Tree View'))
); );
$tabList->addExtraClass("content-listview"); $tabList->addExtraClass("content-listview cms-tabset-icon list");
$tabTree->addExtraClass("content-treeview"); $tabTree->addExtraClass("content-treeview cms-tabset-icon tree");
if($fields->Count() && $folder->exists()) { if($fields->Count() && $folder->exists()) {
$tabs->push($tabDetails = new Tab('DetailsView', _t('AssetAdmin.DetailsView', 'Details'))); $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) { foreach($fields as $field) {
$fields->removeByName($field->getName()); $fields->removeByName($field->getName());
$tabDetails->push($field); $tabDetails->push($field);

View File

@ -51,10 +51,13 @@ class SiteConfig extends DataObject implements PermissionProvider {
$fields = new FieldList( $fields = new FieldList(
new TabSet("Root", new TabSet("Root",
$tabMain = new Tab('Main', $tabMain = new TabSet('Main',
$titleField = new TextField("Title", _t('SiteConfig.SITETITLE', "Site title")), new Tab('bla',
$taglineField = new TextField("Tagline", _t('SiteConfig.SITETAGLINE', "Site Tagline/Slogan")), $titleField = new TextField("Title", _t('SiteConfig.SITETITLE', "Site title")),
$themeDropdownField = new DropdownField("Theme", _t('SiteConfig.THEME', 'Theme'), $this->getAvailableThemes()) $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', $tabAccess = new Tab('Access',
$viewersOptionsField = new OptionsetField("CanViewType", _t('SiteConfig.VIEWHEADER', "Who can view pages on this site?")), $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-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 { overflow: hidden; }
.cms .AssetAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form { height: 100%; } .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 { 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.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; } .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-content-toolbar {
.cms-page-add-button { .cms-page-add-button {

View File

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

View File

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

View File

@ -8,7 +8,7 @@
</div> </div>
<div class="cms-content-header-tabs"> <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 %>"> <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"> <a href="$LinkPageEdit" class="cms-panel-link" title="Form_EditForm" data-href="$LinkPageEdit">
<% _t('CMSMain.TabContent', 'Content') %> <% _t('CMSMain.TabContent', 'Content') %>

View File

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

View File

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