commit 3aa39e347eeb29307376fd56578533ab35564889
parent 6e1d491aa8e387f735958c443fe816598e5e91f7
Author: Jan Dankert <devnull@localhost>
Date: Tue, 5 Mar 2013 00:45:38 +0100
Workbench: Die Größe der einzelnen Bereiche ist durch den Benutzer veränderbar.
Diffstat:
3 files changed, 213 insertions(+), 52 deletions(-)
diff --git a/themes/default/css/openrat.css.php b/themes/default/css/openrat.css.php
@@ -1114,12 +1114,10 @@ body
overflow:hidden;
}
-div#workbench > div.bar
+div#workbench div.bar
{
- float:left;
-
border:1px solid <?php echo $_GET['title_background_color']; ?>;
- margin:3px;
+ margin:0px;
padding:0px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
@@ -1127,13 +1125,22 @@ div#workbench > div.bar
border-radius:5px;
}
-div#workbench > div.bar
+div#workbench div.container,
+div#workbench div.bar,
+div#workbench div.divider
{
+ display: inline;
+ float: left;
+ margin: 0px;
}
+div#workbench
+{
+ padding:3px;
+}
-div#workbench > div.bar > div.frame > div.window > div.content
+div#workbench div.bar > div.frame > div.window > div.content
{
overflow:auto;
}
@@ -1796,3 +1803,37 @@ div.filler div.header a.back.button
{
font-size: 0.8em;
}
+
+
+div.container.axle-x > div.divider
+{
+ width:5px;
+}
+div.container.axle-y > div.divider
+{
+ height:5px;
+}
+
+/* Pfeile */
+div.divider.to-left
+{
+ cursor: w-resize;
+}
+div.divider.to-right
+{
+ cursor: e-resize;
+}
+div.divider.to-top
+{
+ cursor: n-resize;
+}
+div.divider.to-bottom
+{
+ cursor: s-resize;
+}
+
+/* Mouseover */
+div.container > div.divider.ui-draggable-dragging
+{
+ background-color: <?php echo $_GET['title_background_color']; ?>;
+}
diff --git a/themes/default/js/openrat.js b/themes/default/js/openrat.js
@@ -34,6 +34,9 @@ function refreshAll()
refreshTitleBar();
refreshWorkbench();
+ // Workbench-Events registrieren
+
+ // Nicht-Modale Dialoge durch Klick auf freie Fläche schließen.
$('div#filler').click( function()
{
if ( $('div#dialog').hasClass('modal') )
@@ -50,6 +53,8 @@ function refreshAll()
}
});
+
+
}
@@ -169,6 +174,51 @@ function refreshWorkbench()
}
+ // Divider
+ $('div.container.axle-x > div.divider').draggable(
+
+ {
+ stop: function( event, ui ) {
+ var xoffset = ui.position.left;
+ var lr = $(this).hasClass('to-right')?1:-1;
+
+ $(this).parent().children('div.resizable').each( function()
+ {
+ var factor = ((lr*xoffset)+$(this).width()) / ($(this).parent().width());
+ factor = Math.min(0.5,Math.max(0.1,factor)); // Erlaubter Bereich
+
+ $(this).data('size-factor',factor);
+ }
+ );
+ resizeWorkbenchContainer( $(this).parent() );
+ },
+ axis: "x",
+ revert: true,
+ revertDuration: 0
+ }
+ );
+ $('div.container.axle-y > div.divider').draggable(
+
+ {
+ stop: function( event, ui ) {
+ var yoffset = ui.position.top;
+ var lr = $(this).hasClass('to-bottom')?1:-1;
+
+ $(this).parent().children('div.resizable').each( function()
+ {
+ var factor = ((lr*yoffset)+$(this).height()) / ($(this).parent().height());
+ factor = Math.min(0.5,Math.max(0.1,factor)); // Erlaubter Bereich
+
+ $(this).data('size-factor',factor);
+ }
+ );
+ resizeWorkbenchContainer( $(this).parent() );
+ },
+ axis: "y",
+ revert: true,
+ revertDuration: 0
+ }
+ );
});
//alert('go');
@@ -1187,6 +1237,69 @@ function createUrl(action,subaction,id,extraid)
/**
+ * Setzt Breite/Höhe für einen Container in der Workbench.
+ *
+ * Sind weitere Container enthalten, werden diese rekursiv angepasst.
+ *
+ * @param container
+ */
+function resizeWorkbenchContainer( container )
+{
+
+ var availableWidth = container.width();
+ var availableHeight = container.height();
+ var factor = container.children('div.resizable').data('size-factor');
+
+ var horizontal = container.hasClass('axle-x');
+
+ if ( horizontal )
+ {
+ // Container ist horizontal geteilt.
+ var size = Math.floor(availableWidth * factor);
+ container.find('div.resizable > div.frame > div.window').css('width',''+size +'px');
+ container.find('div.resizable > div.frame > div.window > div.content').css('height',''+(availableHeight-27)+'px');
+ container.find('div.autosize > div.frame > div.window').css('width',''+(availableWidth-size-9)+'px');
+ container.find('div.autosize > div.frame > div.window > div.content').css('height',''+(availableHeight-27)+'px');
+
+ container.children('div.resizable').css('width',''+size +'px');
+ container.children('div.resizable').css('height',''+availableHeight+'px');
+ container.children('div.autosize').css('width',''+(availableWidth-size-9)+'px');
+ container.children('div.autosize').css('height',''+availableHeight+'px');
+
+ container.children('div.divider').css('height',''+availableHeight+'px');
+ }
+ else
+ {
+ // Container ist vertikal geteilt.
+ var size = Math.floor(availableHeight * factor);
+ container.find('div.resizable > div.frame > div.window').css('width',''+availableWidth +'px');
+ container.find('div.resizable > div.frame > div.window > div.content').css('height',''+(size-27)+'px');
+ container.find('div.autosize > div.frame > div.window').css('width',''+availableWidth +'px');
+ container.find('div.autosize > div.frame > div.window > div.content').css('height',''+(availableHeight-size-27)+'px');
+
+ container.children('div.resizable').css('width',''+availableWidth +'px');
+ container.children('div.resizable').css('height',''+size+'px');
+ container.children('div.autosize').css('width',''+availableWidth+'px');
+ container.children('div.autosize').css('height',''+(availableHeight-size-20)+'px');
+
+ container.children('div.divider').css('width',''+availableWidth+'px');
+ }
+
+ container.children('div.bar').each( function()
+ {
+ resizeTabs( $(this) );
+ }
+ );
+
+ $(container).children('div.container').each( function() {
+ resizeWorkbenchContainer($(this));
+ });
+
+}
+
+
+
+/**
* Fenstergröße wurde verändert, nun die Größe der DIVs neu berechnen.
*/
function resizeWorkbench()
@@ -1195,40 +1308,27 @@ function resizeWorkbench()
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
- // OpenRat-spezifische Ermittlung der einzelnen DIV-Größen
- var titleBarHeight = 55; // Title:35px
- var viewBorder = 33; // Padding 2x3px, Rand 2x1px, View-Kopf:25px
- var singleHeight = viewportHeight - titleBarHeight - viewBorder;
- var upperHeight = Math.ceil((viewportHeight - titleBarHeight - viewBorder)*(2/3));
- var lowerHeight = viewportHeight - upperHeight - titleBarHeight - (2*viewBorder);
-
- var outerWidth = Math.floor(viewportWidth/4);
- var innerWidth = viewportWidth-(3*8)-(2*outerWidth);
- $('div#workbench > div#navigationbar > div.frame > div.window').css('width',outerWidth+'px');
- resizeTabs( $('div#navigationbar'),false);
- $('div#workbench > div#contentbar > div.frame > div.window').css('width',innerWidth+'px');
- resizeTabs( $('div#contentbar'),true);
- $('div#workbench > div#sidebar > div.frame > div.window').css('width',outerWidth+'px');
- resizeTabs( $('div#sidebar'),false);
- $('div#workbench > div#bottombar > div.frame > div.window').css('width',(outerWidth+innerWidth+8)+'px');
- resizeTabs( $('div#bottombar'),false);
-
- $('div#workbench > div#navigationbar > div.frame > div.window > div.content').css('height',singleHeight+'px');
- $('div#workbench > div#contentbar > div.frame > div.window > div.content').css('height',upperHeight +'px');
- $('div#workbench > div#sidebar > div.frame > div.window > div.content').css('height',upperHeight +'px');
- $('div#workbench > div#bottombar > div.frame > div.window > div.content').css('height',lowerHeight +'px');
+ var container = $('div#workbench > div.container')
+
+ // Verfügbare Breite der Workbench ist Fensterbreite - Innenabstand der Workbench (2*3px)
+ container.css('width' ,''+viewportWidth-6+'px');
+
+ // Verfügbare Höhe der Workbench ist Fensterhöhe - Höhe der Titelleiste - Innenabstand der Workbench (2*3px)
+ container.css('height',''+(viewportHeight-61)+'px');
+
+ resizeWorkbenchContainer( container );
}
/**
* Größe der TABs pro Frame neu berechnen.
*/
-function resizeTabs( el, closable )
+function resizeTabs( bar )
{
- var windowsize = parseInt($(el).find('div.frame > div.window').css('width'));
- var count = $(el).find('ul.views > li').size();
- var width = Math.floor(Math.min(((windowsize-24)/count)-(closable?24:0)-24-8-1,100));
- $(el).find('li.action div.tabname').css('width',width+'px');
+ var tabCount = $(bar).find('div.views li.action').size();
+ //alert("Breite ist"+$(bar).width()+ " und Count ist "+tabCount + " sind "+(($(bar).width()-50)/tabCount));
+ var tabWidth = Math.min(90,Math.max(30,(($(bar).width()-60)/tabCount)-15 ));
+ $(bar).find('li.action div.tabname').width(tabWidth);
}
diff --git a/themes/default/layout/perspective/workbench.php b/themes/default/layout/perspective/workbench.php
@@ -1,24 +1,44 @@
-<div class="bar small" id="navigationbar">
-<?php
-view_header('tree');
-?>
-</div>
+<!-- Workbench -->
+<div class="container axle-x">
-<div class="bar wide" id="contentbar">
-<?php
-view_header('content');
-?>
-</div>
+ <div class="bar small resizable" id="navigationbar" data-size-factor="0.2">
+ <?php
+ view_header('tree');
+ ?>
+ </div>
-<div class="bar small" id="sidebar">
-<?php
-view_header('side');
-?>
-</div>
+ <div class="divider to-right"></div>
+
+ <div class="container axle-y autosize">
+
+ <div class="container axle-x autosize">
+
+ <div class="bar wide autosize">
+ <?php
+ view_header('content');
+ ?>
+ </div>
+
+ <div class="divider to-left" />
+
+ <div class="bar small resizable" data-size-factor="0.2">
+ <?php
+ view_header('side');
+ ?>
+ </div>
+
+ </div>
+
+
+ <div class="divider to-top" />
+
+ <div class="bar wide resizable" data-size-factor="0.2">
+ <?php
+ view_header('bottom');
+ ?>
+ </div>
+
+ </div>
-<div class="bar wide" id="bottombar">
-<?php
-view_header('bottom');
-?>
</div>
