Visual updates to page view toggle

This commit is contained in:
Saophalkun Ponlu 2017-06-20 12:25:24 +12:00 committed by Daniel Hensby
parent 755289b8cd
commit 4fb6e70bb8
No known key found for this signature in database
GPG Key ID: E38EC566FE29EB66
7 changed files with 49 additions and 21 deletions

View File

@ -1 +1 @@
#cms-page-history-versions tr.loading{color:#999}#cms-page-history-versions tr.loading td:hover{cursor:none}#cms-page-history-versions td:hover{cursor:pointer}.CMSPageHistoryController{overflow:hidden}.CMSPageHistoryController ins{background-color:#dfd;padding:2px;text-decoration:none}.CMSPageHistoryController del{background-color:#fdd;padding:2px;color:#f44}.CMSPageHistoryController .htmleditorfield.readonly img{max-width:100%;height:auto}.CMSPageHistoryController .cms-content-tools.collapsed{overflow:hidden}#cms-content-listview .cms-tree-expand-trigger,#cms-content-treeview .cms-tree-expand-trigger{display:none}.cms-content-tools #cms-content-treeview .cms-content-toolbar{border-bottom:none;-webkit-box-shadow:none;box-shadow:none;margin-bottom:0}.cms-content-tools #cms-content-treeview .cms-tree-expand-trigger{display:block;float:left;margin:0 0 2px}.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 .jstree-clicked>.text>.badge,.cms-content-tools #cms-content-treeview .cms-tree a:hover>.text>.badge{display:inline-block}.field.urlsegment.loading{background:url(data:image/gif;base64,R0lGODlhEAAQAPQAAP///wpakvj6+z9+qYivyg9dlC5yotfk7KvG2R9om3umxGubveXt8py80sjZ5k+IsFyRtgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAkKAAAALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkECQoAAAAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkECQoAAAAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAkKAAAALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAkKAAAALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==) no-repeat 162px 8px}.field.urlsegment .URL-link{padding-top:8px;display:inline-block}.field.urlsegment input.text{width:250px;float:left}.field.urlsegment .cancel,.field.urlsegment .edit,.field.urlsegment .update,.field.urlsegment input.text{margin-right:8px}.field.urlsegment .help{margin-left:0}.field.urlsegment .edit-holder{display:none}.field.urlsegment .edit-holder .form__field-description{clear:both}#Form_EditForm #Title .update{margin-left:7px}
#cms-page-history-versions tr.loading{color:#999}#cms-page-history-versions tr.loading td:hover{cursor:none}#cms-page-history-versions td:hover{cursor:pointer}.CMSPageHistoryController{overflow:hidden}.CMSPageHistoryController ins{background-color:#dfd;padding:2px;text-decoration:none}.CMSPageHistoryController del{background-color:#fdd;padding:2px;color:#f44}.CMSPageHistoryController .htmleditorfield.readonly img{max-width:100%;height:auto}.CMSPageHistoryController .cms-content-tools.collapsed{overflow:hidden}#cms-content-listview .cms-tree-expand-trigger,#cms-content-treeview .cms-tree-expand-trigger{display:none}.cms-content-tools #cms-content-treeview .cms-content-toolbar{border-bottom:none;-webkit-box-shadow:none;box-shadow:none;margin-bottom:0}.cms-content-tools #cms-content-treeview .cms-tree-expand-trigger{display:block;float:left;margin:0 0 2px}.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 .jstree-clicked>.text>.badge,.cms-content-tools #cms-content-treeview .cms-tree a:hover>.text>.badge{display:inline-block}.cms-content-toolbar .view-controls{margin-top:0}.cms-content-toolbar .view-controls .page-view-link{display:none;margin-right:-5px}.cms-content-toolbar .view-controls.view-controls--listview .font-icon-tree,.cms-content-toolbar .view-controls.view-controls--treeview .font-icon-list{display:inline-block}.field.urlsegment.loading{background:url(data:image/gif;base64,R0lGODlhEAAQAPQAAP///wpakvj6+z9+qYivyg9dlC5yotfk7KvG2R9om3umxGubveXt8py80sjZ5k+IsFyRtgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAkKAAAALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkECQoAAAAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkECQoAAAAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAkKAAAALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAkKAAAALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==) no-repeat 162px 8px}.field.urlsegment .URL-link{padding-top:8px;display:inline-block}.field.urlsegment input.text{width:250px;float:left}.field.urlsegment .cancel,.field.urlsegment .edit,.field.urlsegment .update,.field.urlsegment input.text{margin-right:8px}.field.urlsegment .help{margin-left:0}.field.urlsegment .edit-holder{display:none}.field.urlsegment .edit-holder .form__field-description{clear:both}#Form_EditForm #Title .update{margin-left:7px}

View File

@ -101,6 +101,30 @@
}
}
/* -------------------------------------------------------------------
* Sitetree tool bar
* ----------------------------------------------------------------- */
.cms-content-toolbar {
.view-controls {
margin-top: 0;
.page-view-link {
display: none;
margin-right: -5px;
}
&.view-controls--treeview .font-icon-list {
display: inline-block;
}
&.view-controls--listview .font-icon-tree {
display: inline-block;
}
}
}
/** ------------------------------------------------------------------
* URLSegment field
* ----------------------------------------------------------------- */

View File

@ -0,0 +1,4 @@
<div class="view-controls">
<button id="filters-button" class="btn btn-secondary icon-button font-icon-search btn--icon-large no-text" title="<% _t('SilverStripe\CMS\Controllers\CMSPagesController.FILTER', 'Filter') %>"></button>
</div>

View File

@ -2,10 +2,9 @@
<div class="cms-content-header north">
<div class="cms-content-header-info">
<div class="section-heading">
<% include SilverStripe\\Admin\\CMSSectionIcon %>
<span class="section-label"><a href="$LinkPages">{$MenuCurrentItem.Title}</a></span>
</div>
<% include SilverStripe\\CMS\\Controllers\\CMSMain_ViewControls PJAXTarget='Content' %>
<% include SilverStripe\\CMS\\Controllers\\CMSMain_Filter %>
</div>
</div>
<div class="panel panel--scrollable flexbox-area-grow fill-height cms-panel-content">

View File

@ -1,17 +1,15 @@
<div class="view-controls">
<button id="filters-button" class="btn btn-secondary icon-button font-icon-search btn--icon-large no-text" title="<% _t('SilverStripe\CMS\Controllers\CMSPagesController.FILTER', 'Filter') %>"></button>
<div class="icon-button-group">
<%-- Change to data-pjax-target="Content-PageList" to enable in-edit listview --%>
<a class="cms-panel-link icon-button font-icon-tree page-view-link <% if $ViewState == 'treeview' %>active<% end_if %>"
href="$LinkTreeView.ATT"
data-view="treeview"
data-pjax-target="$PJAXTarget.ATT"
title="<% _t('SilverStripe\CMS\Controllers\CMSPagesController.TreeView', 'Tree View') %>"
></a><a class="cms-panel-link icon-button font-icon-list page-view-link <% if $ViewState == 'listview' %>active<% end_if %>"
href="$LinkListView.ATT"
data-view="listview"
data-pjax-target="$PJAXTarget.ATT"
title="<% _t('SilverStripe\CMS\Controllers\CMSPagesController.ListView', 'List View') %>"
></a>
</div>
<div class="view-controls view-controls--{$ViewState}">
<%-- Change to data-pjax-target="Content-PageList" to enable in-edit listview --%>
<a class="page-view-link btn btn-secondary btn--icon-sm btn--no-text font-icon-tree"
href="$LinkTreeView.ATT"
data-view="treeview"
data-pjax-target="$PJAXTarget.ATT"
title="<% _t('SilverStripe\CMS\Controllers\CMSPagesController.TreeView', 'Tree View') %>"
></a>
<a class="page-view-link btn btn-secondary btn--icon-sm btn--no-text font-icon-list"
href="$LinkListView.ATT"
data-view="listview"
data-pjax-target="$PJAXTarget.ATT"
title="<% _t('SilverStripe\CMS\Controllers\CMSPagesController.ListView', 'List View') %>"
></a>
</div>

View File

@ -3,7 +3,7 @@
<div class="cms-content-header north">
<div class="cms-content-header-info fill-width">
<% include SilverStripe\\Admin\\CMSBreadcrumbs %>
<% include SilverStripe\\CMS\\Controllers\\CMSMain_ViewControls PJAXTarget='Content-PageList' %>
<% include SilverStripe\\CMS\\Controllers\\CMSMain_Filter %>
</div>
</div>

View File

@ -3,12 +3,15 @@
<a class="btn btn-primary cms-content-addpage-button tool-button font-icon-plus" href="$LinkPageAdd" data-url-addpage="{$LinkPageAdd('', 'ParentID=%s')}"><% _t('SilverStripe\CMS\Controllers\CMSMain.AddNewButton', 'Add new') %></a>
<% if $View == 'Tree' %>
<button type="button" class="cms-content-batchactions-button btn btn-secondary tool-button font-icon-check-mark-2" data-toolid="batch-actions">
<button type="button" class="cms-content-batchactions-button btn btn-secondary tool-button font-icon-check-mark-2 btn--last" data-toolid="batch-actions">
<% _t("SilverStripe\CMS\Controllers\CMSPageHistoryController.MULTISELECT","Batch actions") %>
</button>
<% end_if %>
<% include SilverStripe\\CMS\\Controllers\\CMSMain_ViewControls PJAXTarget='Content-PageList' %>
</div>
<div class="cms-actions-tools-row">
<% if $View == 'Tree' %>
<div id="batch-actions" class="cms-content-batchactions-dropdown tool-action">