tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

Disable split view mode when not enough room

Browse Source
This commit is contained in:
scott1702 2015-09-07 10:49:37 +12:00
parent 8c99659e3f
commit 48c48d703d
7 changed files with 138 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
admin/css/screen.css
View File

@ -1200,14 +1200,6 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; }
.cms-content-controls.cms-preview-controls { z-index: 1; background: #eceff1; height: 30px; /* should be set in js Layout to match page actions */ padding: 12px 12px; }
.cms-content-controls .icon-view, .cms-content-controls .preview-selector.dropdown a.chzn-single { white-space: nowrap; }
.cms-content-controls .icon-view:before, .cms-content-controls .preview-selector.dropdown a.chzn-single:before { display: inline-block; float: left; width: 20px; overflow: hidden; color: #1f1f1f; }
.cms-content-controls .icon-auto:before { background: url('../images/sprites-32x32-s47450c5f5b.png') 0 -898px no-repeat; }
.cms-content-controls .icon-desktop:before { background: url('../images/sprites-32x32-s47450c5f5b.png') 0 -925px no-repeat; }
.cms-content-controls .icon-tablet:before { background: url('../images/sprites-32x32-s47450c5f5b.png') 0 -1087px no-repeat; }
.cms-content-controls .icon-mobile:before { background: url('../images/sprites-32x32-s47450c5f5b.png') 0 -1006px no-repeat; }
.cms-content-controls .icon-split:before { background: url('../images/sprites-32x32-s47450c5f5b.png') 0 -1060px no-repeat; }
.cms-content-controls .icon-edit:before { background: url('../images/sprites-32x32-s47450c5f5b.png') 0 -979px no-repeat; }
.cms-content-controls .icon-preview:before { background: url('../images/sprites-32x32-s47450c5f5b.png') 0 -1033px no-repeat; }
.cms-content-controls .icon-window:before { background: url('../images/sprites-32x32-s47450c5f5b.png') 0 -952px no-repeat; }
.cms-content-controls .cms-navigator { width: 100%; }
.cms-content-controls .preview-selector { float: right; border-bottom: none; position: relative; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; margin: 2px 0 0 4px; padding: 0; height: 28px; }
.cms-content-controls .preview-selector a.chzn-single { width: 16px; padding: 6px; height: 16px; margin: -2px 0 0; filter: none; /* remove ie background */ background: none; border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
@ -1222,7 +1214,7 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; }
.cms-content-controls .preview-selector .chzn-container { width: auto !important; }
.cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop { padding: 0; border-bottom: 1px solid #aaa; margin-top: -5px; width: auto !important; }
.cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop .chzn-search { display: none; }
.cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop ul { padding: 0; margin: 0; }
.cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop ul { padding: 0; margin: 0; overflow: visible; }
.cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop ul li { font-size: 12px; line-height: 16px; padding: 7px 16px 7px 6px; color: #0073C1; border-bottom: 1px solid #DDD; background-color: #FFF; /* Description styling */ }
.cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop ul li:before { margin-right: 2px; font-size: 16px; }
.cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop ul li.description { padding-top: 5px; padding-bottom: 5px; }
@ -1234,8 +1226,15 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; }
.cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop ul li.restricted:before { opacity: 0.2; }
.cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop ul li span { display: block; color: #6c6c6c; font-size: 0.85em; line-height: 1.1em; padding-left: 23px; }
.cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop ul li .icon-view { margin-right: 4px; }
.cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop ul .disabled-tooltip { position: absolute; top: 0; left: 0; right: 0; height: 32px; background: rgba(255, 255, 255, 0); }
.cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop ul .disabled-tooltip::before { content: 'Screen size too small'; text-align: center; background: #555; color: white; padding: 4px 0; position: absolute; top: -24px; left: -1px; right: -1px; border-radius: 3px 3px 0 0; display: none; z-index: 2; }
.cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop ul .disabled-tooltip::after { content: ''; position: absolute; width: 10px; height: 10px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); display: none; background: #555; left: 47%; top: -6px; }
.cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop ul .disabled-tooltip:hover::after, .cms-content-controls .preview-selector .chzn-container.chzn-with-rise .chzn-drop ul .disabled-tooltip:hover::before { display: block; }
.cms-content-controls .preview-selector .chzn-drop ul.chzn-results li.result-selected { background: #e6eaed; color: #66727d; }
.cms-content-controls .preview-selector .chzn-drop ul.chzn-results li.result-selected.highlighted, .cms-content-controls .preview-selector .chzn-drop ul.chzn-results li.result-selected:hover, .cms-content-controls .preview-selector .chzn-drop ul.chzn-results li.result-selected:focus { background: #e6eaed; color: #66727d; }
.cms-content-controls .preview-selector.split-disabled .chzn-container.chzn-with-rise .chzn-drop ul li.font-icon-columns { color: #aaa; pointer-events: none; }
.cms-content-controls .preview-selector.split-disabled .chzn-container.chzn-with-rise .chzn-drop ul li.font-icon-columns.highlighted, .cms-content-controls .preview-selector.split-disabled .chzn-container.chzn-with-rise .chzn-drop ul li.font-icon-columns:hover, .cms-content-controls .preview-selector.split-disabled .chzn-container.chzn-with-rise .chzn-drop ul li.font-icon-columns:focus { color: #aaa; background: #fff; cursor: default; }
.cms-content-controls .preview-selector.split-disabled .chzn-container.chzn-with-rise .chzn-drop ul li.font-icon-columns::before { color: #aaa; }
.cms-content-controls .cms-preview-states { float: right; }
.cms-content-controls .cms-preview-states select { max-width: 150px; }
.cms-content-controls .cms-preview-states.dropdown { max-width: 150px; }

2
admin/css/screen.css.map
View File

File diff suppressed because one or more lines are too long

7
admin/javascript/LeftAndMain.Layout.js
View File

@ -137,6 +137,13 @@
if (posthidden.content !== prehidden.content) spec.content.trigger('columnvisibilitychanged');
if (posthidden.preview !== prehidden.preview) spec.preview.trigger('columnvisibilitychanged');
// Calculate whether preview is possible in split mode
if (contentWidth + previewWidth < options.minContentWidth + options.minPreviewWidth) {
spec.preview.trigger('disable');
} else {
spec.preview.trigger('enable');
}
return container;
};

41
admin/javascript/LeftAndMain.Preview.js
View File

@ -1,4 +1,5 @@
(function($) {
$.entwine('ss.preview', function($){
/**
@ -290,6 +291,20 @@
}
},
onenable: function () {
var $viewModeSelector = $('.preview-mode-selector');
$viewModeSelector.removeClass('split-disabled');
$viewModeSelector.find('.disabled-tooltip').hide();
},
ondisable: function () {
var $viewModeSelector = $('.preview-mode-selector');
$viewModeSelector.addClass('split-disabled');
$viewModeSelector.find('.disabled-tooltip').show();
},
/**
* Set the preview to unavailable - could be still visible. This is purely visual.
*/
@ -620,8 +635,16 @@
$('.cms-preview.column-hidden').entwine({
onmatch: function() {
$('#preview-mode-dropdown-in-content').show();
// Alert the user as to why the preview is hidden
if ($('.cms-preview .result-selected').hasClass('font-icon-columns')) {
statusMessage(ss.i18n._t(
'LeftAndMain.DISABLESPLITVIEW',
"Screen too small to show site preview in split mode"),
"error");
}
this._super();
},
onunmatch: function() {
$('#preview-mode-dropdown-in-content').hide();
this._super();
@ -771,6 +794,16 @@
}
}); */
$('.preview-mode-selector .chzn-drop li:last-child').entwine({
onmatch: function () {
if ($('.preview-mode-selector').hasClass('split-disabled')) {
this.parent().append('<div class="disabled-tooltip"></div>');
} else {
this.parent().append('<div class="disabled-tooltip" style="display: none;"></div>');
}
}
});
/**
* Recalculate the preview space to allow for horizontal scrollbar and the preview actions panel
*/
@ -803,11 +836,9 @@
/**
* Rotate preview to landscape
*/
$('.preview-device-outer').click(function() {
if(!$('.preview-device-outer').hasClass('rotate')) {
$('.preview-device-outer').addClass('rotate');
} else {
$('.preview-device-outer').removeClass('rotate');
$('.preview-device-outer').entwine({
onclick: function () {
this.toggleClass('rotate');
}
});
});

6
admin/javascript/lang/en.js
View File

@ -18,6 +18,8 @@ if(typeof(ss) == 'undefined' || typeof(ss.i18n) == 'undefined') {
"ModelAdmin.REALLYDELETE": "Do you really want to delete?",
"ModelAdmin.DELETED": "Deleted",
"ModelAdmin.VALIDATIONERROR": "Validation Error",
"LeftAndMain.PAGEWASDELETED": "This page was deleted. To edit a page, select it from the left."
});
"LeftAndMain.PAGEWASDELETED": "This page was deleted. To edit a page, select it from the left.",
"LeftAndMain.DISABLESPLITVIEW": "Screen too small to show site preview in split mode"
}
);
}

3
admin/javascript/lang/src/en.js
View File

@ -13,5 +13,6 @@
"ModelAdmin.REALLYDELETE": "Do you really want to delete?",
"ModelAdmin.DELETED": "Deleted",
"ModelAdmin.VALIDATIONERROR": "Validation Error",
"LeftAndMain.PAGEWASDELETED": "This page was deleted. To edit a page, select it from the left."
"LeftAndMain.PAGEWASDELETED": "This page was deleted. To edit a page, select it from the left.",
"LeftAndMain.DISABLESPLITVIEW": "Screen too small to show site preview in split mode"
}

90
admin/scss/_preview.scss
View File

@ -21,30 +21,7 @@
color: $color-text-dark;
}
}
.icon-auto:before {
background: sprite($sprites32, preview_auto) no-repeat;
}
.icon-desktop:before {
background: sprite($sprites32, preview_desktop) no-repeat;
}
.icon-tablet:before {
background: sprite($sprites32, preview_tablet) no-repeat;
}
.icon-mobile:before {
background: sprite($sprites32, preview_mobile) no-repeat;
}
.icon-split:before {
background: sprite($sprites32, preview_split) no-repeat;
}
.icon-edit:before {
background: sprite($sprites32, preview_edit) no-repeat;
}
.icon-preview:before {
background: sprite($sprites32, preview_preview) no-repeat;
}
.icon-window:before {
background: sprite($sprites32, preview_dual_window) no-repeat;
}
.cms-navigator{
width: 100%;
}
@ -118,9 +95,10 @@
display: none;
}
ul{
padding:0;
margin:0;
ul {
padding: 0;
margin: 0;
overflow: visible;
li{
font-size: 12px;
@ -177,6 +155,47 @@
}
}
.disabled-tooltip {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 32px;
background: rgba(255,255,255,0); // Prevent clicking on browsers that do not support pointer-events: none;
&::before {
content: 'Screen size too small';
text-align: center;
background: #555;
color: white;
padding: 4px 0;
position: absolute;
top: -24px;
left: -1px;
right: -1px;
border-radius: 3px 3px 0 0;
display: none;
z-index: 2;
}
&::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
@include rotate(45deg);
display: none;
background: #555;
left: 47%;
top: -6px;
}
&:hover::after,
&:hover::before {
display: block;
}
}
}
}
}
@ -189,6 +208,23 @@
color: $color-text;
}
}
&.split-disabled {
.chzn-container.chzn-with-rise .chzn-drop ul li.font-icon-columns {
color: $color-text-disabled;
pointer-events: none;
&.highlighted, &:hover, &:focus {
color: $color-text-disabled;
background: #fff;
cursor: default;
}
&::before {
color: $color-text-disabled;
}
}
}
}
.cms-preview-states{