mirror of
https://github.com/silverstripe/silverstripe-cms
synced 2024-06-27 23:19:36 +02:00
Merge pull request #1234 from flashbackzoo/pulls/ux-three-column-layout
Add three column layout to Page content view
This commit is contained in:
Damian Mooyman
commit
0b76bd4678
|
|
@ -17,12 +17,13 @@
|
|||
.cms-content-tools #cms-content-treeview .cms-content-toolbar { border-bottom: none; box-shadow: none; margin-bottom: 8px; }
|
||||
.cms-content-tools #cms-content-treeview .cms-tree-expand-trigger { display: block; float: left; margin: 0 0 2px 0; }
|
||||
.cms-content-tools #cms-content-treeview .cms-tree-expand-trigger span.ui-button-text { padding-right: 8px; }
|
||||
.cms-content-tools #cms-content-treeview .cms-tree .badge { display: none; }
|
||||
.cms-content-tools #cms-content-treeview .cms-tree a:hover > .text > .badge, .cms-content-tools #cms-content-treeview .cms-tree .jstree-clicked > .text > .badge { display: inline-block; }
|
||||
|
||||
/** -------------------------------------------- The CMS Content Toolbar. Associated behaviour in CMSMain.js -------------------------------------------- */
|
||||
.cms-content-toolbar button.ss-ui-button { padding: .4em .75em; vertical-align: baseline; }
|
||||
.cms-content-toolbar button.ss-ui-button:hover { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
|
||||
.cms-content-toolbar button.ss-ui-button:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; outline: 0; }
|
||||
.cms-content-toolbar button.ss-ui-button:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
|
||||
.cms-content-toolbar button.ss-ui-button:before { font-size: 1.1em; }
|
||||
.cms-content-toolbar button.ss-ui-button.ui-state-focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
|
||||
.cms-content-toolbar button.ss-ui-button.active { -webkit-box-shadow: 0 0 5px #b3b3b3 inset; -moz-box-shadow: 0 0 5px #b3b3b3 inset; box-shadow: 0 0 5px #b3b3b3 inset; }
|
||||
|
|
@ -42,7 +43,7 @@
|
|||
.cms .AssetAdmin .cms-content-fields .cms-edit-form.AssetAdmin { width: 100%; 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-toolbar .cms-page-add-button { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q5ZDlkOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f3f3), color-stop(100%, #d9d9d9)); background-image: -moz-linear-gradient(#f3f3f3, #d9d9d9); background-image: -webkit-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.ui-button-text { color: #393939; text-shadow: white 0 1px 1px; }
|
||||
.cms .AssetAdmin #Root_TreeView .cms-tree ul .class-Folder a span.text span.jstree-foldericon { background: url(../images/blue-folder-horizontal.png) no-repeat; width: 16px; height: 16px; float: left; display: block; margin-right: 4px; }
|
||||
|
|
|
|||
|
|
@ -151,6 +151,13 @@
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Clear filters button
|
||||
$('.cms-tree-filtered .clear-filter').entwine({
|
||||
onclick: function () {
|
||||
window.location = location.protocol + '//' + location.host + location.pathname;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
}(jQuery));
|
||||
|
|
|
|||
|
|
@ -7,6 +7,22 @@
|
|||
*/
|
||||
$.entwine('ss', function ($) {
|
||||
|
||||
// Faux three column layout
|
||||
$('.cms-content-header-info').entwine({
|
||||
'from .cms-panel': {
|
||||
// Keep the header info's width synced with the TreeView panel's width.
|
||||
ontoggle: function (e) {
|
||||
var $treeViewPanel = this.closest('.cms-content').find(e.target);
|
||||
|
||||
if ($treeViewPanel.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.parent()[$treeViewPanel.hasClass('collapsed') ? 'addClass' : 'removeClass']('collapsed');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.cms-content-toolbar').entwine({
|
||||
|
||||
onmatch: function () {
|
||||
|
|
|
|||
|
|
@ -77,6 +77,11 @@
|
|||
}
|
||||
|
||||
.cms-tree {
|
||||
// Hide badges and drag icons to save space
|
||||
.badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Show badge on hovered node
|
||||
a:hover > .text > .badge, .jstree-clicked > .text > .badge {
|
||||
display: inline-block;
|
||||
|
|
@ -100,7 +105,6 @@
|
|||
|
||||
&:focus {
|
||||
@include box-shadow(none);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
<% with $EditForm %>
|
||||
<div class="cms-content-header north">
|
||||
<div class="cms-content-header-info">
|
||||
<% include BackLink_Button %>
|
||||
<% with $Controller %>
|
||||
<% include CMSBreadcrumbs %>
|
||||
<% end_with %>
|
||||
|
|
@ -13,11 +12,14 @@
|
|||
<% with $Fields.fieldByName('Root') %>
|
||||
<div class="cms-content-header-tabs">
|
||||
<button id="filters-button" class="icon-button font-icon-search" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>
|
||||
<ul class="cms-tabset-nav-primary">
|
||||
<% loop $Tabs %>
|
||||
<li<% if $extraClass %> class="$extraClass"<% end_if %>><a href="#$id">$Title</a></li>
|
||||
<% end_loop %>
|
||||
</ul>
|
||||
|
||||
<div class="icon-button-group">
|
||||
<ul class="cms-tabset-nav-primary ss-tabset">
|
||||
<% loop $Tabs %>
|
||||
<li<% if $extraClass %> class="$extraClass"<% end_if %>><a class="cms-panel-link icon-button <% if $Title == 'List View' %>font-icon-list<% else_if $Title == 'Tree View' %>font-icon-tree<% else %>font-icon-pencil<% end_if %>" href="#$id" title="$Title"></a></li>
|
||||
<% end_loop %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<% end_with %>
|
||||
<% end_if %>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,56 @@
|
|||
<div id="pages-controller-cms-content" class="cms-content center cms-tabset $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content" data-ignore-tab-state="true">
|
||||
<div id="pages-controller-cms-content" class="has-panel cms-content center cms-tabset $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content" data-ignore-tab-state="true">
|
||||
|
||||
<div class="cms-content-header north">
|
||||
<div class="cms-content-header-info">
|
||||
<% include CMSBreadcrumbs %>
|
||||
|
||||
|
||||
<div class="cms-content-header-nav">
|
||||
<div class="breadcrumbs-wrapper" data-pjax-fragment="Breadcrumbs">
|
||||
<h2 id="page-title-heading">
|
||||
<% loop $Breadcrumbs %>
|
||||
<% if $First %>
|
||||
<% else_if $Last %>
|
||||
<span class="cms-panel-link crumb last">$Title.XML</span>
|
||||
<% else %>
|
||||
<a class="cms-panel-link crumb" href="$Link">$Title.XML</a>
|
||||
<span class="sep">/</span>
|
||||
<% end_if %>
|
||||
<% end_loop %>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="cms-content-header-tabs">
|
||||
<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') %>
|
||||
</a>
|
||||
</li>
|
||||
<li class="content-listview<% if class == 'CMSPageSettingsController' %> ui-tabs-active<% end_if %>">
|
||||
<a href="$LinkPageSettings" class="cms-panel-link" title="Form_EditForm" data-href="$LinkPageSettings">
|
||||
<% _t('CMSMain.TabSettings', 'Settings') %>
|
||||
</a>
|
||||
</li>
|
||||
<li class="content-listview<% if class == 'CMSPageHistoryController' %> ui-tabs-active<% end_if %>">
|
||||
<a href="$LinkPageHistory" class="cms-panel-link" title="Form_EditForm" data-href="$LinkPageHistory">
|
||||
<% _t('CMSMain.TabHistory', 'History') %>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cms-content-header-tabs">
|
||||
<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') %>
|
||||
</a>
|
||||
</li>
|
||||
<li class="content-listview<% if class == 'CMSPageSettingsController' %> ui-tabs-active<% end_if %>">
|
||||
<a href="$LinkPageSettings" class="cms-panel-link" title="Form_EditForm" data-href="$LinkPageSettings">
|
||||
<% _t('CMSMain.TabSettings', 'Settings') %>
|
||||
</a>
|
||||
</li>
|
||||
<li class="content-listview<% if class == 'CMSPageHistoryController' %> ui-tabs-active<% end_if %>">
|
||||
<a href="$LinkPageHistory" class="cms-panel-link" title="Form_EditForm" data-href="$LinkPageHistory">
|
||||
<% _t('CMSMain.TabHistory', 'History') %>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="cms-content-header-info">
|
||||
<div class="section-heading">
|
||||
<% include CMSSectionIcon %>
|
||||
<span class="section-label"><a href="$LinkPages">{$MenuCurrentItem.Title}</a></span>
|
||||
</div>
|
||||
|
||||
<div class="view-controls">
|
||||
<button id="filters-button" class="icon-button font-icon-search" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>
|
||||
<div class="icon-button-group">
|
||||
<a href="$LinkPages#cms-content-treeview" class="icon-button font-icon-tree active" title="<% _t('CMSPagesController.TreeView', 'Tree View') %>"></a><a href="$LinkPages#cms-content-listview" class="icon-button font-icon-list" title="<% _t('CMSPagesController.ListView', 'List View') %>"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -30,4 +58,4 @@
|
|||
|
||||
$EditForm
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="cms-tree-filtered cms-notice">
|
||||
<strong><% _t('CMSMain.ListFiltered', 'Filtered list.') %></strong>
|
||||
<a href="$LinkPages" class="cms-panel-link">
|
||||
<% _t('CMSMain.TreeFilteredClear', 'Clear filter') %>
|
||||
<% _t('CMSMain.TreeFilteredClear', 'Clear') %>
|
||||
</a>
|
||||
</div>
|
||||
<% end_if %>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<div class="cms-content-tools west cms-panel cms-panel-layout" data-expandOnClick="true" data-layout-type="border" id="cms-content-tools-CMSMain">
|
||||
<div class="cms-panel-content center">
|
||||
<div class="cms-content-filters">
|
||||
$SearchForm
|
||||
</div>
|
||||
|
||||
<div class="cms-content-view cms-tree-view-sidebar cms-panel-deferred" id="cms-content-treeview" data-url="$LinkTreeView">
|
||||
<%-- Lazy-loaded via ajax --%>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ $ExtraTreeTools
|
|||
<% if $TreeIsFiltered %>
|
||||
<div class="cms-tree-filtered cms-notice">
|
||||
<strong><% _t('CMSMain.TreeFiltered', 'Search results.') %></strong>
|
||||
<a href="$LinkPages" class="cms-panel-link">
|
||||
<a href="javascript:void(0)" class="clear-filter">
|
||||
<% _t('CMSMain.TreeFilteredClear', 'Clear') %>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,19 +7,16 @@
|
|||
|
||||
<div class="cms-content-header-tabs">
|
||||
<button id="filters-button" class="icon-button font-icon-search" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>
|
||||
<ul class="cms-tabset-nav-primary">
|
||||
<li class="content-treeview<% if ViewState == tree %> ui-tabs-active ss-tabs-force-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 ss-tabs-force-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 cms-tabset-icon gallery">
|
||||
<a href="#cms-content-galleryview"><% _t('CMSPagesController.GalleryView', 'Gallery View') %></a>
|
||||
</li>
|
||||
-->
|
||||
</ul>
|
||||
<div class="icon-button-group">
|
||||
<ul class="cms-tabset-nav-primary ss-tabset">
|
||||
<li class="content-treeview<% if ViewState == tree %> ui-tabs-active ss-tabs-force-active<% end_if %> cms-tabset-icon tree">
|
||||
<a href="#cms-content-treeview" class="cms-panel-link icon-button font-icon-tree" data-href="$LinkTreeView" title="<% _t('CMSPagesController.TreeView', 'Tree View') %>"></a>
|
||||
</li>
|
||||
<li class="content-listview<% if ViewState == list %> ui-tabs-active ss-tabs-force-active<% end_if %> cms-tabset-icon list">
|
||||
<a href="#cms-content-listview" class="cms-panel-link icon-button font-icon-list" data-href="$LinkListView" title="<% _t('CMSPagesController.ListView', 'List View') %>"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<a class="cms-page-add-button ss-ui-button ss-ui-action-constructive tool-button" data-icon="add" href="$LinkPageAdd" data-url-addpage="{$LinkPageAdd('', 'ParentID=%s')}"><% _t('CMSMain.AddNewButton', 'Add new') %></a>
|
||||
|
||||
<% if $View == 'Tree' %>
|
||||
<button class="cms-content-batchactions-button tool-button font-icon-list" data-toolid="batch-actions">
|
||||
<button class="cms-content-batchactions-button tool-button font-icon-check" data-toolid="batch-actions">
|
||||
<% _t("CMSPagesController_ContentToolbar_ss.MULTISELECT","Batch actions") %>
|
||||
</button>
|
||||
<% end_if %>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ So that I can link to a external website or a page on my site
|
|||
Given I select "awesome" in the "Content" HTML field
|
||||
And I press the "Insert Link" button
|
||||
When I select the "Page on the site" radio button
|
||||
And I fill in the "Page" dropdown with "Home"
|
||||
And I fill in the "internal" dropdown with "Home"
|
||||
And I fill in "my desc" for "Link description"
|
||||
And I press the "Insert" button
|
||||
# TODO Dynamic DB identifiers
|
||||
|
|
@ -29,7 +29,7 @@ So that I can link to a external website or a page on my site
|
|||
Given I select "awesome" in the "Content" HTML field
|
||||
And I press the "Insert Link" button
|
||||
And I select the "Page on the site" radio button
|
||||
And I fill in the "Page" dropdown with "Details"
|
||||
And I fill in the "internal" dropdown with "Details"
|
||||
And I wait for 1 second
|
||||
And I select "youranchor" from "Form_EditorToolbarLinkForm_AnchorSelector"
|
||||
And I press the "Insert link" button
|
||||
|
|
@ -52,9 +52,9 @@ So that I can link to a external website or a page on my site
|
|||
Given I select "awesome" in the "Content" HTML field
|
||||
When I press the "Insert Link" button
|
||||
When I select the "Download a file" radio button
|
||||
And I fill in the "File" dropdown with "file1.jpg"
|
||||
And I attach the file "testfile.jpg" to "file[Uploads][]" with HTML5
|
||||
And I press the "Insert link" button
|
||||
Then the "Content" HTML field should contain "<a href="[file_link,id=1]" target="_blank">awesome</a>"
|
||||
Then the "Content" HTML field should contain "<a href="[file_link,id=3]" target="_blank">awesome</a>"
|
||||
# Required to avoid "unsaved changes" browser dialog
|
||||
Then I press the "Save draft" button
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ Feature: Manage files
|
|||
And I click on "file1" in the "folder1" table
|
||||
And I fill in "renamedfile" for "Title"
|
||||
And I press the "Save" button
|
||||
And I press the "Back" button
|
||||
And I follow "folder1"
|
||||
Then the "folder1" table should not contain "testfile"
|
||||
And the "folder1" table should contain "renamedfile"
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ Feature: Search for a page
|
|||
And I am logged in with "ADMIN" permissions
|
||||
And I go to "/admin/pages"
|
||||
And I expand the content filters
|
||||
And I wait for 2 seconds
|
||||
|
||||
Scenario: I can search for a page by its title
|
||||
Given I fill in "Search" with "About Us"
|
||||
|
|
|
|||
|
|
@ -342,8 +342,8 @@ class CMSMainTest extends FunctionalTest {
|
|||
}
|
||||
|
||||
public function testBreadcrumbs() {
|
||||
$page3 = $this->objFromFixture('Page', 'page3');
|
||||
$page31 = $this->objFromFixture('Page', 'page31');
|
||||
$page3 = $this->objFromFixture('Page', 'page3');
|
||||
$page31 = $this->objFromFixture('Page', 'page31');
|
||||
$adminuser = $this->objFromFixture('Member', 'admin');
|
||||
$this->session()->inst_set('loggedInAs', $adminuser->ID);
|
||||
|
||||
|
|
@ -352,9 +352,9 @@ class CMSMainTest extends FunctionalTest {
|
|||
$crumbs = $parser->getBySelector('.breadcrumbs-wrapper .crumb');
|
||||
|
||||
$this->assertNotNull($crumbs);
|
||||
$this->assertEquals(3, count($crumbs));
|
||||
$this->assertEquals('Page 3', (string)$crumbs[1]);
|
||||
$this->assertEquals('Page 3.1', (string)$crumbs[2]);
|
||||
$this->assertEquals(2, count($crumbs));
|
||||
$this->assertEquals('Page 3', (string)$crumbs[0]);
|
||||
$this->assertEquals('Page 3.1', (string)$crumbs[1]);
|
||||
|
||||
$this->session()->inst_set('loggedInAs', null);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user