Index: Resources/Private/Layouts/popup.html =================================================================== --- Resources/Private/Layouts/popup.html (revision 3897) +++ Resources/Private/Layouts/popup.html (revision 3898) @@ -10,6 +10,8 @@ // poor way to avoid that we require any scrollbars within the frames var finalHeight = height * 1.1; Ext.getCmp('visualPanel').setHeight(finalHeight); + Ext.getCmp('liveContainer').setHeight((100-Ext.getCmp('sizeSlider').getValue()/100) * finalHeight); + Ext.getCmp('wsContainer').setHeight(finalHeight); Ext.getCmp('wsPanel').setHeight(finalHeight); Ext.getCmp('livePanel').setHeight(finalHeight); } Index: Resources/Private/Templates/Preview/Preview.html =================================================================== --- Resources/Private/Templates/Preview/Preview.html (revision 3897) +++ Resources/Private/Templates/Preview/Preview.html (revision 3898) @@ -1,19 +1,45 @@ Index: Resources/Public/JavaScript/preview.js =================================================================== --- Resources/Public/JavaScript/preview.js (revision 3897) +++ Resources/Public/JavaScript/preview.js (revision 3898) @@ -25,6 +25,8 @@ ***************************************************************/ Ext.onReady(function() { + var iconClsChecked = 't3-icon t3-icon-status t3-icon-status-status t3-icon-status-checked'; + var iconClsEmpty = 't3-icon t3-icon-empty t3-icon-empty-empty t3-icon-empty'; var viewport = new Ext.Viewport({ layout: 'border', items: [{ @@ -35,96 +37,222 @@ plugins : [{ ptype : 'Ext.ux.plugins.TabStripContainer', id: 'controls', - width: 400, - items: [{ - xtype: 'button', - id: 'sizeSliderButtonLive', - cls: 'sliderButton', - text: TYPO3.LLL.Workspaces.livePreview, - width: 100, - listeners: { - click: { - fn: function () { - Ext.getCmp('sizeSlider').setValue(0); - } - } - } - }, - { - xtype: 'slider', - id: 'sizeSlider', - margins: '0 10 0 10', - maxValue: 100, - minValue: 0, - value: 100, - flex: 1, - listeners: { - change: { - fn: function resizeFromValue(slider, newValue, thumb) { - var height = Ext.getCmp('wsPanel').getHeight(); - Ext.getCmp('liveContainer').setHeight(height * (100 - newValue) / 100); - Ext.getCmp('visualPanel').setHeight(height); - } - } - } - }, - { - xtype: 'button', - id: 'sizeSliderButtonWorkspace', - cls: 'sliderButton', - text: TYPO3.LLL.Workspaces.workspacePreview, - width: 100, - listeners: { - click: { - fn: function () { - Ext.getCmp('sizeSlider').setValue(100); - } - } - } - }] + width: 600, + items: [ + { + xtype: 'panel', + id: 'slider', + width: 460, + layout: 'hbox', + items: [ + { + xtype: 'button', + id: 'sizeSliderButtonLive', + cls: 'sliderButton', + text: TYPO3.LLL.Workspaces.livePreview, + tooltip: TYPO3.LLL.Workspaces.livePreviewDetail, + width: 100, + listeners: { + click: { + fn: function () { + Ext.getCmp('sizeSlider').setValue(0); + } + } + } + }, + { + xtype: 'slider', + id: 'sizeSlider', + margins: '0 10 0 10', + maxValue: 100, + minValue: 0, + value: 100, + width: 200, + flex: 1, + listeners: { + change: { + fn: function resizeFromValue(slider, newValue, thumb) { + var height = Ext.getCmp('wsPanel').getHeight(); + Ext.getCmp('liveContainer').setHeight(height * (100 - newValue) / 100); + //Ext.getCmp('visualPanel').setHeight(height); + } + } + } + }, + { + xtype: 'button', + id: 'sizeSliderButtonWorkspace', + cls: 'sliderButton', + text: TYPO3.LLL.Workspaces.workspacePreview, + tooltip: TYPO3.LLL.Workspaces.workspacePreviewDetail, + width: 100, + listeners: { + click: { + fn: function () { + Ext.getCmp('sizeSlider').setValue(100); + } + } + } + } + ] + }, + { + xtype: 'toolbar', + id: 'visual-mode-toolbar', + items: [{ + iconCls: 'x-btn-icon t3-icon t3-icon-actions t3-icon-actions-system t3-icon-system-options-view', + id: 'visual-mode-options', + menu: { + id: 'visual-mode-selector', + items: [{ + text: TYPO3.LLL.Workspaces.modeSlider, + id: 'visual-mode-selector-slider', + iconCls: iconClsChecked, + handler: function(){ + Ext.getCmp('visualPanel-hbox').hide(); + Ext.getCmp('visualPanel-vbox').hide(); + Ext.getCmp('visualPanel').show(); + Ext.getCmp('slider').show(); + Ext.select('#visual-mode-selector ul li a img.t3-icon-status-checked').removeClass(iconClsChecked.split(" ")) + Ext.getCmp('visual-mode-selector-slider').setIconClass(iconClsChecked); + Ext.getCmp('visual-mode-selector-hbox').setIconClass(iconClsEmpty); + Ext.getCmp('visual-mode-selector-vbox').setIconClass(iconClsEmpty); + } + },{ + text: TYPO3.LLL.Workspaces.modeVbox, + id: 'visual-mode-selector-vbox', + iconCls: iconClsEmpty, + handler: function() { + Ext.getCmp('visualPanel-hbox').hide(); + Ext.getCmp('visualPanel-vbox').show(); + Ext.getCmp('visualPanel').hide(); + Ext.getCmp('slider').hide(); + Ext.select('#visual-mode-selector ul li a img.t3-icon-status-checked').removeClass(iconClsChecked.split(" ")) + Ext.getCmp('visual-mode-selector-slider').setIconClass(iconClsEmpty); + Ext.getCmp('visual-mode-selector-vbox').setIconClass(iconClsChecked) + Ext.getCmp('visual-mode-selector-hbox').setIconClass(iconClsEmpty); + } + },{ + text: TYPO3.LLL.Workspaces.modeHbox, + id: 'visual-mode-selector-hbox', + iconCls: iconClsEmpty, + handler: function(){ + Ext.getCmp('visualPanel-hbox').show(); + Ext.getCmp('visualPanel-vbox').hide(); + Ext.getCmp('visualPanel').hide(); + Ext.getCmp('slider').hide(); + Ext.select('#visual-mode-selector ul li a img.t3-icon-status-checked').removeClass(iconClsChecked.split(" ")) + Ext.getCmp('visual-mode-selector-slider').setIconClass(iconClsEmpty); + Ext.getCmp('visual-mode-selector-vbox').setIconClass(iconClsEmpty); + Ext.getCmp('visual-mode-selector-hbox').setIconClass(iconClsChecked); + } + }] + } + }] + }] }], items: [{ title: TYPO3.LLL.Workspaces.visualPreview, id: 'wsVisual', layout: 'fit', + anchor: '100% 100%', items: [{ - layout: 'fit', + layout: 'absolute', + anchor: '100% 100%', x: 0, y:0, - anchor: '100% 100%', - autoScroll: true, items: [{ - layout: 'absolute', - id: 'visualPanel', - items: [{ + layout: 'fit', x: 0, y:0, anchor: '100% 100%', - id: 'wsContainer', - layout: 'absolute', - autoScroll: false, - items:[{ + autoScroll: true, + items: [{ + layout: 'absolute', + id: 'visualPanel', + items: [{ + x: 0, y:0, + anchor: '100% 100%', + id: 'wsContainer', + layout: 'absolute', + autoScroll: false, + items:[{ + xtype: 'iframePanel', + x: 0, y:0, + id: 'wsPanel', + doMask: false, + src: wsUrl, + autoScroll: false + }] + },{ + x: 0, y:0, + anchor: '100% 0%', + id: 'liveContainer', + layout: 'absolute', + bodyStyle: 'height:0px;border-bottom: 2px solid red;', + autoScroll: false, + items:[{ + xtype: 'iframePanel', + x: 0, y:0, + id: 'livePanel', + doMask: false, + src: liveUrl, + autoScroll: false + }] + }] + }] + },{ + layout: 'hbox', + hidden: true, + x: 0, y:0, + anchor: '100% 100%', + layoutConfig: { + align : 'stretch', + pack : 'start' + }, + id: 'visualPanel-hbox', + items: [{ xtype: 'iframePanel', x: 0, y:0, - id: 'wsPanel', + id: 'wsPanel-hbox', doMask: false, src: wsUrl, - autoScroll: false + autoScroll: false, + flex: 1 + },{ + xtype: 'iframePanel', + x: 0, y:0, + id: 'livePanel-hbox', + doMask: false, + src: liveUrl, + autoScroll: false, + flex: 1 }] - },{ + },{ + layout: 'vbox', + hidden: true, x: 0, y:0, - anchor: '100% 0%', - id: 'liveContainer', - layout: 'absolute', - bodyStyle: 'height:0px;border-bottom: 2px solid red;', - autoScroll: false, - items:[{ + anchor: '100% 100%', + layoutConfig: { + align : 'stretch', + pack : 'start' + }, + id: 'visualPanel-vbox', + items: [{ xtype: 'iframePanel', x: 0, y:0, - id: 'livePanel', + id: 'wsPanel-vbox', doMask: false, + src: wsUrl, + autoScroll: false, + flex: 1 + },{ + xtype: 'iframePanel', + x: 0, y:0, + id: 'livePanel-vbox', + doMask: false, src: liveUrl, - autoScroll: false + autoScroll: false, + flex: 1 }] - }] }] }] },{ Index: Resources/Public/StyleSheet/preview.css =================================================================== --- Resources/Public/StyleSheet/preview.css (revision 3897) +++ Resources/Public/StyleSheet/preview.css (revision 3898) @@ -103,8 +103,11 @@ * Slider */ #controls { - padding-top: 10px; + padding-top: 5px; } +#slider { + padding-top: 5px; +} /* remove default ExtJS border */ .x-panel-body { @@ -143,6 +146,48 @@ text-align: left; } +#visual-mode-selector { + list-style: none; + background-color: #f9f9f9; + border: 1px solid #abb2bc; + border-top: none; +} + +#visual-mode-selector td { + text-align: left; +} + +#visual-mode-selector td button { + font-size: 11px; + line-height: 12px; + text-decoration: none; +} + +#visual-mode-options { + display: block; + height: 20px; + margin: 5px 0 0 0; +} +#visual-mode-options.x-btn-menu-active { + background-color: #f9f9f9; + border: 1px solid #abb2bc; + border-bottom: none; +} +#visual-mode-options .x-btn-arrow { + padding-right: 2px; +} + +#visual-mode-options .x-btn-text { + font-size: 11px; +} +#visual-mode-options.x-btn-menu-active .x-btn-text { + color: black; +} + +#visual-mode-toolbar { + border:none; +} + /** * Preview panel */ Index: ext_emconf.php =================================================================== --- ext_emconf.php (revision 3897) +++ ext_emconf.php (revision 3898) @@ -26,7 +26,7 @@ 'uploadfolder' => 0, 'createDirs' => '', 'modify_tables' => '', - 'clearCacheOnLoad' => 0, + 'clearCacheOnLoad' => 1, 'lockType' => '', 'author_company' => '', 'version' => '4.5.0beta4',