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 2015-07-02 10:26:56 +12:00
commit 0b76bd4678
15 changed files with 116 additions and 58 deletions

View File

@ -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-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 { 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-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; } .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 -------------------------------------------- */ /** -------------------------------------------- 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 { 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: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: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.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; } .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-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 { 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-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.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; }
.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; } .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; }

View File

@ -151,6 +151,13 @@
} }
} }
}); });
// Clear filters button
$('.cms-tree-filtered .clear-filter').entwine({
onclick: function () {
window.location = location.protocol + '//' + location.host + location.pathname;
}
});
}); });
}(jQuery)); }(jQuery));

View File

@ -7,6 +7,22 @@
*/ */
$.entwine('ss', function ($) { $.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({ $('.cms-content-toolbar').entwine({
onmatch: function () { onmatch: function () {

View File

@ -77,6 +77,11 @@
} }
.cms-tree { .cms-tree {
// Hide badges and drag icons to save space
.badge {
display: none;
}
// Show badge on hovered node // Show badge on hovered node
a:hover > .text > .badge, .jstree-clicked > .text > .badge { a:hover > .text > .badge, .jstree-clicked > .text > .badge {
display: inline-block; display: inline-block;
@ -100,7 +105,6 @@
&:focus { &:focus {
@include box-shadow(none); @include box-shadow(none);
outline: 0;
} }
&:before { &:before {

View File

@ -3,7 +3,6 @@
<% with $EditForm %> <% with $EditForm %>
<div class="cms-content-header north"> <div class="cms-content-header north">
<div class="cms-content-header-info"> <div class="cms-content-header-info">
<% include BackLink_Button %>
<% with $Controller %> <% with $Controller %>
<% include CMSBreadcrumbs %> <% include CMSBreadcrumbs %>
<% end_with %> <% end_with %>
@ -13,11 +12,14 @@
<% with $Fields.fieldByName('Root') %> <% with $Fields.fieldByName('Root') %>
<div class="cms-content-header-tabs"> <div class="cms-content-header-tabs">
<button id="filters-button" class="icon-button font-icon-search" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button> <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 %> <div class="icon-button-group">
<li<% if $extraClass %> class="$extraClass"<% end_if %>><a href="#$id">$Title</a></li> <ul class="cms-tabset-nav-primary ss-tabset">
<% end_loop %> <% loop $Tabs %>
</ul> <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> </div>
<% end_with %> <% end_with %>
<% end_if %> <% end_if %>

View File

@ -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 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>
<div class="cms-content-header-tabs"> <div class="cms-content-header-info">
<ul class="cms-tabset-nav-primary"> <div class="section-heading">
<li class="content-treeview<% if class == 'CMSPageEditController' %> ui-tabs-active<% end_if %>"> <% include CMSSectionIcon %>
<a href="$LinkPageEdit" class="cms-panel-link" title="Form_EditForm" data-href="$LinkPageEdit"> <span class="section-label"><a href="$LinkPages">{$MenuCurrentItem.Title}</a></span>
<% _t('CMSMain.TabContent', 'Content') %> </div>
</a>
</li> <div class="view-controls">
<li class="content-listview<% if class == 'CMSPageSettingsController' %> ui-tabs-active<% end_if %>"> <button id="filters-button" class="icon-button font-icon-search" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>
<a href="$LinkPageSettings" class="cms-panel-link" title="Form_EditForm" data-href="$LinkPageSettings"> <div class="icon-button-group">
<% _t('CMSMain.TabSettings', 'Settings') %> <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>
</a> </div>
</li> </div>
<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> </div>
@ -30,4 +58,4 @@
$EditForm $EditForm
</div> </div>

View File

@ -9,7 +9,7 @@
<div class="cms-tree-filtered cms-notice"> <div class="cms-tree-filtered cms-notice">
<strong><% _t('CMSMain.ListFiltered', 'Filtered list.') %></strong> <strong><% _t('CMSMain.ListFiltered', 'Filtered list.') %></strong>
<a href="$LinkPages" class="cms-panel-link"> <a href="$LinkPages" class="cms-panel-link">
<% _t('CMSMain.TreeFilteredClear', 'Clear filter') %> <% _t('CMSMain.TreeFilteredClear', 'Clear') %>
</a> </a>
</div> </div>
<% end_if %> <% end_if %>

View File

@ -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-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-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"> <div class="cms-content-view cms-tree-view-sidebar cms-panel-deferred" id="cms-content-treeview" data-url="$LinkTreeView">
<%-- Lazy-loaded via ajax --%> <%-- Lazy-loaded via ajax --%>
</div> </div>

View File

@ -10,7 +10,7 @@ $ExtraTreeTools
<% if $TreeIsFiltered %> <% if $TreeIsFiltered %>
<div class="cms-tree-filtered cms-notice"> <div class="cms-tree-filtered cms-notice">
<strong><% _t('CMSMain.TreeFiltered', 'Search results.') %></strong> <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') %> <% _t('CMSMain.TreeFilteredClear', 'Clear') %>
</a> </a>
</div> </div>

View File

@ -7,19 +7,16 @@
<div class="cms-content-header-tabs"> <div class="cms-content-header-tabs">
<button id="filters-button" class="icon-button font-icon-search" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button> <button id="filters-button" class="icon-button font-icon-search" title="<% _t('CMSPagesController_Tools_ss.FILTER', 'Filter') %>"></button>
<ul class="cms-tabset-nav-primary"> <div class="icon-button-group">
<li class="content-treeview<% if ViewState == tree %> ui-tabs-active ss-tabs-force-active<% end_if %> cms-tabset-icon tree"> <ul class="cms-tabset-nav-primary ss-tabset">
<a href="#cms-content-treeview" class="cms-panel-link" data-href="$LinkTreeView"><% _t('CMSPagesController.TreeView', 'Tree View') %></a> <li class="content-treeview<% if ViewState == tree %> ui-tabs-active ss-tabs-force-active<% end_if %> cms-tabset-icon tree">
</li> <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 class="content-listview<% if ViewState == list %> ui-tabs-active ss-tabs-force-active<% end_if %> cms-tabset-icon list"> </li>
<a href="#cms-content-listview" class="cms-panel-link" data-href="$LinkListView"><% _t('CMSPagesController.ListView', 'List View') %></a> <li class="content-listview<% if ViewState == list %> ui-tabs-active ss-tabs-force-active<% end_if %> cms-tabset-icon list">
</li> <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>
<li class="content-galleryview cms-tabset-icon gallery"> </ul>
<a href="#cms-content-galleryview"><% _t('CMSPagesController.GalleryView', 'Gallery View') %></a> </div>
</li>
-->
</ul>
</div> </div>
</div> </div>

View File

@ -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> <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' %> <% 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") %> <% _t("CMSPagesController_ContentToolbar_ss.MULTISELECT","Batch actions") %>
</button> </button>
<% end_if %> <% end_if %>

View File

@ -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 Given I select "awesome" in the "Content" HTML field
And I press the "Insert Link" button And I press the "Insert Link" button
When I select the "Page on the site" radio 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 fill in "my desc" for "Link description"
And I press the "Insert" button And I press the "Insert" button
# TODO Dynamic DB identifiers # 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 Given I select "awesome" in the "Content" HTML field
And I press the "Insert Link" button And I press the "Insert Link" button
And I select the "Page on the site" radio 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 wait for 1 second
And I select "youranchor" from "Form_EditorToolbarLinkForm_AnchorSelector" And I select "youranchor" from "Form_EditorToolbarLinkForm_AnchorSelector"
And I press the "Insert link" button 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 Given I select "awesome" in the "Content" HTML field
When I press the "Insert Link" button When I press the "Insert Link" button
When I select the "Download a file" radio 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 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 # Required to avoid "unsaved changes" browser dialog
Then I press the "Save draft" button Then I press the "Save draft" button

View File

@ -36,7 +36,7 @@ Feature: Manage files
And I click on "file1" in the "folder1" table And I click on "file1" in the "folder1" table
And I fill in "renamedfile" for "Title" And I fill in "renamedfile" for "Title"
And I press the "Save" button And I press the "Save" button
And I press the "Back" button And I follow "folder1"
Then the "folder1" table should not contain "testfile" Then the "folder1" table should not contain "testfile"
And the "folder1" table should contain "renamedfile" And the "folder1" table should contain "renamedfile"

View File

@ -10,7 +10,6 @@ Feature: Search for a page
And I am logged in with "ADMIN" permissions And I am logged in with "ADMIN" permissions
And I go to "/admin/pages" And I go to "/admin/pages"
And I expand the content filters And I expand the content filters
And I wait for 2 seconds
Scenario: I can search for a page by its title Scenario: I can search for a page by its title
Given I fill in "Search" with "About Us" Given I fill in "Search" with "About Us"

View File

@ -342,8 +342,8 @@ class CMSMainTest extends FunctionalTest {
} }
public function testBreadcrumbs() { public function testBreadcrumbs() {
$page3 = $this->objFromFixture('Page', 'page3'); $page3 = $this->objFromFixture('Page', 'page3');
$page31 = $this->objFromFixture('Page', 'page31'); $page31 = $this->objFromFixture('Page', 'page31');
$adminuser = $this->objFromFixture('Member', 'admin'); $adminuser = $this->objFromFixture('Member', 'admin');
$this->session()->inst_set('loggedInAs', $adminuser->ID); $this->session()->inst_set('loggedInAs', $adminuser->ID);
@ -352,9 +352,9 @@ class CMSMainTest extends FunctionalTest {
$crumbs = $parser->getBySelector('.breadcrumbs-wrapper .crumb'); $crumbs = $parser->getBySelector('.breadcrumbs-wrapper .crumb');
$this->assertNotNull($crumbs); $this->assertNotNull($crumbs);
$this->assertEquals(3, count($crumbs)); $this->assertEquals(2, count($crumbs));
$this->assertEquals('Page 3', (string)$crumbs[1]); $this->assertEquals('Page 3', (string)$crumbs[0]);
$this->assertEquals('Page 3.1', (string)$crumbs[2]); $this->assertEquals('Page 3.1', (string)$crumbs[1]);
$this->session()->inst_set('loggedInAs', null); $this->session()->inst_set('loggedInAs', null);
} }