From 41ce038c8f882ca69d16922f4a2929f9efa9bd84 Mon Sep 17 00:00:00 2001 From: David Craig Date: Fri, 26 Jun 2015 12:48:29 +1200 Subject: [PATCH] Add three column layout to Page content view - Content filters included in SiteTree view - View (tree/list) buttons included in SiteTree view - Update view button styles for new layout - Updated breadcrumbs for new layout --- css/screen.css | 5 +- javascript/CMSMain.Tree.js | 7 ++ javascript/CMSMain.js | 16 +++++ scss/_CMSMain.scss | 6 +- templates/Includes/AssetAdmin_Content.ss | 14 ++-- templates/Includes/CMSMain_Content.ss | 72 +++++++++++++------ templates/Includes/CMSMain_ListView.ss | 2 +- templates/Includes/CMSMain_Tools.ss | 4 ++ templates/Includes/CMSMain_TreeView.ss | 2 +- .../Includes/CMSPagesController_Content.ss | 23 +++--- .../CMSPagesController_ContentToolActions.ss | 2 +- tests/behat/features/insert-a-link.feature | 8 +-- tests/behat/features/manage-files.feature | 2 +- .../behat/features/search-for-a-page.feature | 1 - tests/controller/CMSMainTest.php | 10 +-- 15 files changed, 116 insertions(+), 58 deletions(-) diff --git a/css/screen.css b/css/screen.css index 37f65218..100401b1 100644 --- a/css/screen.css +++ b/css/screen.css @@ -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; } diff --git a/javascript/CMSMain.Tree.js b/javascript/CMSMain.Tree.js index 4416d537..3819f81d 100644 --- a/javascript/CMSMain.Tree.js +++ b/javascript/CMSMain.Tree.js @@ -151,6 +151,13 @@ } } }); + + // Clear filters button + $('.cms-tree-filtered .clear-filter').entwine({ + onclick: function () { + window.location = location.protocol + '//' + location.host + location.pathname; + } + }); }); }(jQuery)); diff --git a/javascript/CMSMain.js b/javascript/CMSMain.js index db409dd9..c4a4a661 100644 --- a/javascript/CMSMain.js +++ b/javascript/CMSMain.js @@ -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 () { diff --git a/scss/_CMSMain.scss b/scss/_CMSMain.scss index 2e642a28..e86dfd89 100644 --- a/scss/_CMSMain.scss +++ b/scss/_CMSMain.scss @@ -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 { diff --git a/templates/Includes/AssetAdmin_Content.ss b/templates/Includes/AssetAdmin_Content.ss index 2859df98..f33d36d6 100644 --- a/templates/Includes/AssetAdmin_Content.ss +++ b/templates/Includes/AssetAdmin_Content.ss @@ -3,7 +3,6 @@ <% with $EditForm %>
- <% include BackLink_Button %> <% with $Controller %> <% include CMSBreadcrumbs %> <% end_with %> @@ -13,11 +12,14 @@ <% with $Fields.fieldByName('Root') %>
-
    - <% loop $Tabs %> - class="$extraClass"<% end_if %>>$Title - <% end_loop %> -
+ +
+
    + <% loop $Tabs %> + class="$extraClass"<% end_if %>> + <% end_loop %> +
+
<% end_with %> <% end_if %> diff --git a/templates/Includes/CMSMain_Content.ss b/templates/Includes/CMSMain_Content.ss index 27104f0f..46da6852 100644 --- a/templates/Includes/CMSMain_Content.ss +++ b/templates/Includes/CMSMain_Content.ss @@ -1,28 +1,56 @@ -
+
-
- <% include CMSBreadcrumbs %> + + +
+
+

+ <% loop $Breadcrumbs %> + <% if $First %> + <% else_if $Last %> + $Title.XML + <% else %> + $Title.XML + / + <% end_if %> + <% end_loop %> +

+
+ +
+ +
-
- +
+
+ <% include CMSSectionIcon %> + {$MenuCurrentItem.Title} +
+ +
+ +
+ +
+
@@ -30,4 +58,4 @@ $EditForm -
\ No newline at end of file +
diff --git a/templates/Includes/CMSMain_ListView.ss b/templates/Includes/CMSMain_ListView.ss index 4c59220f..ae0aa641 100644 --- a/templates/Includes/CMSMain_ListView.ss +++ b/templates/Includes/CMSMain_ListView.ss @@ -9,7 +9,7 @@
<% _t('CMSMain.ListFiltered', 'Filtered list.') %> - <% _t('CMSMain.TreeFilteredClear', 'Clear filter') %> + <% _t('CMSMain.TreeFilteredClear', 'Clear') %>
<% end_if %> diff --git a/templates/Includes/CMSMain_Tools.ss b/templates/Includes/CMSMain_Tools.ss index 195a03a4..88d5bef3 100644 --- a/templates/Includes/CMSMain_Tools.ss +++ b/templates/Includes/CMSMain_Tools.ss @@ -1,5 +1,9 @@
+
+ $SearchForm +
+
<%-- Lazy-loaded via ajax --%>
diff --git a/templates/Includes/CMSMain_TreeView.ss b/templates/Includes/CMSMain_TreeView.ss index b1ed362c..a7daa2e9 100644 --- a/templates/Includes/CMSMain_TreeView.ss +++ b/templates/Includes/CMSMain_TreeView.ss @@ -10,7 +10,7 @@ $ExtraTreeTools <% if $TreeIsFiltered %>
<% _t('CMSMain.TreeFiltered', 'Search results.') %> - + <% _t('CMSMain.TreeFilteredClear', 'Clear') %>
diff --git a/templates/Includes/CMSPagesController_Content.ss b/templates/Includes/CMSPagesController_Content.ss index cedf137b..9dc12452 100644 --- a/templates/Includes/CMSPagesController_Content.ss +++ b/templates/Includes/CMSPagesController_Content.ss @@ -7,19 +7,16 @@
- +
+
    +
  • + +
    • +
  • + +
    • +
+
diff --git a/templates/Includes/CMSPagesController_ContentToolActions.ss b/templates/Includes/CMSPagesController_ContentToolActions.ss index ccf576e9..159442e1 100644 --- a/templates/Includes/CMSPagesController_ContentToolActions.ss +++ b/templates/Includes/CMSPagesController_ContentToolActions.ss @@ -3,7 +3,7 @@ <% _t('CMSMain.AddNewButton', 'Add new') %> <% if $View == 'Tree' %> - <% end_if %> diff --git a/tests/behat/features/insert-a-link.feature b/tests/behat/features/insert-a-link.feature index 055be288..84015b03 100644 --- a/tests/behat/features/insert-a-link.feature +++ b/tests/behat/features/insert-a-link.feature @@ -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 "awesome" + Then the "Content" HTML field should contain "awesome" # Required to avoid "unsaved changes" browser dialog Then I press the "Save draft" button diff --git a/tests/behat/features/manage-files.feature b/tests/behat/features/manage-files.feature index b101d1a7..214e4ddf 100644 --- a/tests/behat/features/manage-files.feature +++ b/tests/behat/features/manage-files.feature @@ -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" diff --git a/tests/behat/features/search-for-a-page.feature b/tests/behat/features/search-for-a-page.feature index 97beea17..4350ca6b 100644 --- a/tests/behat/features/search-for-a-page.feature +++ b/tests/behat/features/search-for-a-page.feature @@ -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" diff --git a/tests/controller/CMSMainTest.php b/tests/controller/CMSMainTest.php index faf13d3a..ec43d545 100644 --- a/tests/controller/CMSMainTest.php +++ b/tests/controller/CMSMainTest.php @@ -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); }