Changeset 5619 in subversion

Timestamp:

Dec 15, 2011 3:32:46 PM (17 months ago)

Author:

thomasb

Message:

Give resizeable splitters to Larry

Location:

trunk/roundcubemail/skins/larry

Files:

• mail.css (modified) (2 diffs)
• settings.css (modified) (4 diffs)
• styles.css (modified) (3 diffs)
• templates/folders.html (modified) (2 diffs)
• templates/identities.html (modified) (2 diffs)
• templates/identityedit.html (modified) (2 diffs)
• templates/mail.html (modified) (1 diff)
• templates/settings.html (modified) (2 diffs)
• ui.js (modified) (11 diffs)

trunk/roundcubemail/skins/larry/mail.css

@@ -24 +24 @@
         position: absolute;
         top: 0;
-        left: 250px;
+        left: 252px;
         right: 0;
         bottom: 0;
@@ -43 +43 @@
         width: 100%;
         height: 26px;
+}
+
+#mailviewsplitter {
+        right: 30px;
+        width: 30px;
+        left: auto !important;
 }
 

trunk/roundcubemail/skins/larry/settings.css

@@ -21 +21 @@
 }
 
+#settings-right {
+        position: absolute;
+        top: 0;
+        left: 232px;
+        right: 0;
+        bottom: 0;
+}
+
 #sectionslist {
         position: absolute;
         top: 0;
-        left: 230px;
+        left: 0;
         width: 260px;
         bottom: 0;
@@ -32 +40 @@
         position: absolute;
         top: 0;
-        left: 500px;
+        left: 270px;
         right: 0;
         bottom: 0;
@@ -150 +158 @@
         position: absolute;
         top: 0;
-        left: 230px;
+        left: 0;
         width: 300px;
         bottom: 0;
@@ -159 +167 @@
         position: absolute;
         top: 0;
-        left: 540px;
+        left: 310px;
         right: 0;
         bottom: 0;

trunk/roundcubemail/skins/larry/styles.css

@@ -270 +270 @@
         text-indent: -1000px;
         background: url(images/buttons.png) -1000px 0 no-repeat;
+}
+
+a.iconbutton.disabled {
+        opacity: 0.4;
+        cursor: default;
 }
 
@@ -541 +546 @@
         text-shadow: 1px 1px 1px #fff;
         border-bottom: 1px solid #bbd3da;
+        white-space: nowrap;
 }
 
@@ -1041 +1047 @@
 }
 
+.splitter {
+        user-select: none;
+        -moz-user-select: none;
+        -khtml-user-select: none;
+        position: absolute;
+        background: url(images/splitter.png) center no-repeat;
+}
+
+.splitter-h {
+        height: 10px;
+        width: 100%;
+        cursor: n-resize;
+        cursor: row-resize;
+        background-position: center 0;
+}
+
+.splitter-v {
+        width: 10px;
+        height: 100%;
+        cursor: e-resize;
+        cursor: col-resize;
+        background-position: 0 center;
+}
 
 #rcmdraglayer {

trunk/roundcubemail/skins/larry/templates/folders.html

@@ -12 +12 @@
 
 <roundcube:include file="/includes/settingstabs.html" />
+
+<div id="settings-right">
 
 <div id="folderslist" class="uibox listbox">
@@ -30 +32 @@
 </div>
 
+</div>
+
 <div id="mailboxmenu" class="popupmenu">
         <ul class="toolbarmenu" id="mailboxoptionsmenu">

trunk/roundcubemail/skins/larry/templates/identities.html

@@ -13 +13 @@
 <roundcube:include file="/includes/settingstabs.html" />
 
+<div id="settings-right">
+        
 <div id="identitieslist" class="uibox listbox">
 <h2 class="boxtitle"><roundcube:label name="identities" /></h2>
@@ -29 +31 @@
 </div>
 
+</div>
+
 <roundcube:include file="/includes/footer.html" />
 

trunk/roundcubemail/skins/larry/templates/identityedit.html

@@ -12 +12 @@
 
 <roundcube:include file="/includes/settingstabs.html" />
+
+<div id="settings-right">
 
 <div id="identitieslist" class="uibox listbox">
@@ -40 +42 @@
 </div>
 
+</div>
+
 <roundcube:include file="/includes/footer.html" />
 

trunk/roundcubemail/skins/larry/templates/mail.html

@@ -65 +65 @@
 <div id="messagelistfooter">
         <div id="listcontrols">
-                <a href="#list" class="iconbutton listmode" id="maillistmode" title="<roundcube:label name='list' />">List</a>
-                <a href="#threads" class="iconbutton threadmode" id="mailthreadmode" title="<roundcube:label name='threads' />">Threads</a>
+                <roundcube:if condition="env:threads" />
+                        <a href="#list" class="iconbutton listmode" id="maillistmode" title="<roundcube:label name='list' />">List</a>
+                        <a href="#threads" class="iconbutton threadmode" id="mailthreadmode" title="<roundcube:label name='threads' />">Threads</a>
+                <roundcube:else />
+                        <a href="#list" class="iconbutton listmode selected" title="<roundcube:label name='list' />" onclick="return false">List</a>
+                        <a href="#threads" class="iconbutton threadmode disabled" title="<roundcube:label name='threads' />" onclick="return false">Threads</a>
+                <roundcube:endif />
         </div>
 

trunk/roundcubemail/skins/larry/templates/settings.html

@@ -13 +13 @@
 <roundcube:include file="/includes/settingstabs.html" />
 
+<div id="settings-right">
+
 <div id="sectionslist" class="uibox listbox">
 <div class="scroller">
@@ -26 +28 @@
 </div>
 
+</div>
+
 <roundcube:include file="/includes/footer.html" />
 

trunk/roundcubemail/skins/larry/ui.js

@@ -21 +21 @@
 
   var me = this;
+  var mailviewsplit;
 
   // export public methods
@@ -33 +34 @@
   {
     if (rcmail.env.task == 'mail') {
+      rcmail.gui_object('message_dragmenu', 'dragmessagemenu');
       rcmail.addEventListener('menu-open', function(){ show_popup('listoptions'); });
       rcmail.addEventListener('menu-save', save_listoptions);
 //      rcmail.addEventListener('aftersend-attachment', 'uploadmenu', rcmail_ui);
 //      rcmail.addEventListener('aftertoggle-editor', 'resize_compose_body_ev', rcmail_ui);
-      rcmail.gui_object('message_dragmenu', 'dragmessagemenu');
-      $('#mailpreviewtoggle').addClass($('#mailpreviewframe').is(':visible') ? 'enabled' : 'closed').click(function(e){ toggle_preview_pane(e); return false });
+
+      var previewframe = $('#mailpreviewframe').is(':visible');
+      $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').click(function(e){ toggle_preview_pane(e); return false });
       $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e){ switch_view_mode('list'); return false });
       $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e){ switch_view_mode('thread'); return false });
-      
+
       if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') {
         layout_messageview();
+      }
+      else if (rcmail.env.action == 'list' || !rcmail.env.action) {
+          mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom',
+            orientation:'h', relative:true, start:310, min:150, size:0, offset:-22 });
+          if (previewframe)
+            mailviewsplit.init();
+      }
+      
+      if ($('#mailview-left').length) {
+        new rcube_splitter({ id:'mailviewsplitterv', p1:'#mailview-left', p2:'#mailview-right',
+          orientation:'v', relative:true, start:248, min:150, size:12, callback:render_mailboxlist, render:resize_leftcol }).init();
       }
     }
@@ -53 +67 @@
       $(tab).addClass('selected')
         .children().first().removeAttr('onclick').click(function() { return false; });
+
+      if (rcmail.env.action == 'folders') {
+        new rcube_splitter({ id:'folderviewsplitter', p1:'#folderslist', p2:'#folder-details',
+          orientation:'v', relative:true, start:305, min:150, size:12 }).init();
+      }
+      else if (rcmail.env.action.indexOf('identit') >= 0) {
+        new rcube_splitter({ id:'identviewsplitter', p1:'#identitieslist', p2:'#identity-details',
+          orientation:'v', relative:true, start:305, min:150, size:12 }).init();
+      }
     }
 
@@ -107 +130 @@
   }
 
+
+  function render_mailboxlist(splitter)
+  {
+  }
+
+
+  function resize_leftcol(splitter)
+  {
+    if (splitter)
+      $('#quicksearchbar input').css('width', (splitter.pos - 70) + 'px');
+  }
+
+
   /**
    * Trigger for popup menus
@@ -188 +224 @@
 
 
+  /**
+   * Show/hide the preview pane
+   */
   function toggle_preview_pane(e)
   {
@@ -193 +232 @@
       frame = $('#mailpreviewframe'),
       visible = !frame.is(':visible'),
-      splitter = parseInt(bw.get_cookie('mailviewsplitter') || 320),
+      splitter = mailviewsplit.pos || parseInt(bw.get_cookie('mailviewsplitter') || 320),
       topstyles, bottomstyles, uid;
 
@@ -200 +239 @@
 
     if (visible) {
-      topstyles = { height:(splitter-38)+'px', bottom:'auto' };
-      bottomstyles = { top:(splitter+5)+'px', height:'auto' };
+      $('#mailview-top').css({ bottom:'auto' });
+      $('#mailview-bottom').css({ height:'auto' });
+
       rcmail.env.contentframe = 'messagecontframe';
       if (uid = rcmail.message_list.get_single_selection())
         rcmail.show_message(uid, false, true);
+
+      // let the splitter set the correct size and position
+      if (mailviewsplit.handle) {
+        mailviewsplit.handle.show();
+        mailviewsplit.resize();
+      }
+      else
+        mailviewsplit.init();
     }
     else {
-      topstyles = { height:'auto', bottom:'28px' };
-      bottomstyles = { top:'auto', height:'26px' };
       rcmail.env.contentframe = null;
       rcmail.show_contentframe(false);
-    }
-
-    $('#mailview-top').css(topstyles);
-    $('#mailview-bottom').css(bottomstyles);
+
+      $('#mailview-top').css({ height:'auto', bottom:'28px' });
+      $('#mailview-bottom').css({ top:'auto', height:'26px' });
+
+      if (mailviewsplit.handle)
+        mailviewsplit.handle.hide();
+    }
 
     if (visible && uid && rcmail.message_list)
@@ -223 +272 @@
 
 
+  /**
+   *
+   */
   function switch_view_mode(mode)
   {
@@ -266 +318 @@
 
 
+  /**
+   *
+   */
   function save_listoptions()
   {
@@ -280 +335 @@
 
 
+  /**
+   *
+   */
   function set_searchmod(elem)
   {
@@ -326 +384 @@
 }
 
+
+
+/**
+ * Roundcube splitter GUI class
+ *
+ * @constructor
+ */
+function rcube_splitter(p)
+{
+  this.p = p;
+  this.id = p.id;
+  this.horizontal = (p.orientation == 'horizontal' || p.orientation == 'h');
+  this.halfsize = (p.size !== undefined ? p.size : 10) / 2;
+  this.pos = p.start || 0;
+  this.min = p.min || 20;
+  this.offset = p.offset || 0;
+  this.relative = p.relative ? true : false;
+  this.drag_active = false;
+  this.render = p.render;
+  this.callback = p.callback;
+
+  var me = this;
+
+  this.init = function()
+  {
+    this.p1 = $(this.p.p1);
+    this.p2 = $(this.p.p2);
+
+    // create and position the handle for this splitter
+    this.p1pos = this.relative ? this.p1.position() : this.p1.offset();
+    this.p2pos = this.relative ? this.p2.position() : this.p2.offset();
+    this.handle = $('<div>')
+      .attr('id', this.id)
+      .attr('unselectable', 'on')
+      .addClass('splitter ' + (this.horizontal ? 'splitter-h' : 'splitter-v'))
+      .appendTo(this.p1.parent())
+      .bind('mousedown', onDragStart);
+
+    if (this.horizontal) {
+      var top = this.p1pos.top + this.p1.outerHeight();
+      this.handle.css({ left:'0px', top:top+'px' });
+    }
+    else {
+      var left = this.p1pos.left + this.p1.outerWidth();
+      this.handle.css({ left:left+'px', top:'0px' });
+    }
+
+    this.elm = this.handle.get(0);
+
+    // listen to window resize on IE
+    if (bw.ie)
+      $(window).resize(function(e){ onResize(e) });
+
+    // read saved position from cookie
+    var cookie = bw.get_cookie(this.id);
+    if (cookie && !isNaN(cookie)) {
+      this.pos = parseFloat(cookie);
+      this.resize();
+    }
+    else if (this.pos) {
+      this.resize();
+      this.set_cookie();
+    }
+  };
+
+  /**
+   * Set size and position of all DOM objects
+   * according to the saved splitter position
+   */
+  this.resize = function()
+  {
+    if (this.horizontal) {
+      this.p1.css('height', Math.floor(this.pos - this.p1pos.top - this.halfsize) + 'px');
+      this.p2.css('top', Math.ceil(this.pos + this.halfsize + 2) + 'px');
+      this.handle.css('top', Math.round(this.pos - this.halfsize + this.offset)+'px');
+      if (bw.ie) {
+        var new_height = parseInt(this.p2.parent().outerHeight(), 10) - parseInt(this.p2.css('top'), 10) - (bw.ie8 ? 2 : 0);
+        this.p2.css('height') = (new_height > 0 ? new_height : 0) + 'px';
+      }
+    }
+    else {
+      this.p1.css('width', Math.floor(this.pos - this.p1pos.left - this.halfsize) + 'px');
+      this.p2.css('left', Math.ceil(this.pos + this.halfsize) + 'px');
+      this.handle.css('left', Math.round(this.pos - this.halfsize + this.offset + 3)+'px');
+      if (bw.ie) {
+        var new_width = parseInt(this.p2.parent().outerWidth(), 10) - parseInt(this.p2.css('left'), 10) ;
+        this.p2.css('width', (new_width > 0 ? new_width : 0) + 'px');
+      }
+    }
+
+    this.p2.resize();
+    this.p1.resize();
+
+    if (typeof this.render == 'function')
+      this.render(this);
+  };
+
+  /**
+   * Handler for mousedown events
+   */
+  function onDragStart(e)
+  {
+    // disable text selection while dragging the splitter
+    if (bw.konq || bw.chrome || bw.safari)
+      document.body.style.webkitUserSelect = 'none';
+
+    me.p1pos = me.relative ? me.p1.position() : me.p1.offset();
+    me.p2pos = me.relative ? me.p2.position() : me.p2.offset();
+    me.drag_active = true;
+
+    // start listening to mousemove events
+    $(document).bind('mousemove.'+this.id, onDrag).bind('mouseup.'+this.id, onDragStop);
+
+    // enable dragging above iframes
+    $('iframe').each(function() {
+      $('<div class="iframe-splitter-fix"></div>')
+        .css({ background: '#fff',
+          width: this.offsetWidth+'px', height: this.offsetHeight+'px',
+          position: 'absolute', opacity: '0.001', zIndex: 1000
+        })
+        .css($(this).offset())
+        .appendTo('body');
+      });
+  };
+
+  /**
+   * Handler for mousemove events
+   */
+  function onDrag(e)
+  {
+    if (!me.drag_active)
+      return false;
+
+    var pos = rcube_event.get_mouse_pos(e);
+
+    if (me.relative) {
+      var parent = me.p1.parent().offset();
+      pos.x -= parent.left;
+      pos.y -= parent.top;
+    }
+
+    if (me.horizontal) {
+      if (((pos.y - me.halfsize) > me.p1pos.top) && ((pos.y + me.halfsize) < (me.p2pos.top + me.p2.outerHeight()))) {
+        me.pos = Math.max(me.min, pos.y - me.offset);
+        me.resize();
+      }
+    }
+    else {
+      if (((pos.x - me.halfsize) > me.p1pos.left) && ((pos.x + me.halfsize) < (me.p2pos.left + me.p2.outerWidth()))) {
+        me.pos = Math.max(me.min, pos.x - me.offset);
+        me.resize();
+      }
+    }
+
+    me.p1pos = me.relative ? me.p1.position() : me.p1.offset();
+    me.p2pos = me.relative ? me.p2.position() : me.p2.offset();
+    return false;
+  };
+
+  /**
+   * Handler for mouseup events
+   */
+  function onDragStop(e)
+  {
+    // resume the ability to highlight text
+    if (bw.konq || bw.chrome || bw.safari)
+      document.body.style.webkitUserSelect = 'auto';
+
+    // cancel the listening for drag events
+    $(document).unbind('.'+me.id);
+    me.drag_active = false;
+
+    // remove temp divs
+    $('div.iframe-splitter-fix').each(function(){ this.parentNode.removeChild(this); });
+
+    me.set_cookie();
+
+    if (typeof me.callback == 'function')
+      me.callback(me);
+
+    return bw.safari ? true : rcube_event.cancel(e);
+  };
+
+  /**
+   * Handler for window resize events
+   */
+  function onResize(e)
+  {
+    if (me.horizontal) {
+      var new_height = parseInt(me.p2.parent().outerHeight(), 10) - parseInt(me.p2[0].style.top, 10) - (bw.ie8 ? 2 : 0);
+      me.p2.css('height', (new_height > 0 ? new_height : 0) +'px');
+    }
+    else {
+      var new_width = parseInt(me.p2.parent().outerWidth(), 10) - parseInt(me.p2[0].style.left, 10);
+      me.p2.css('width', (new_width > 0 ? new_width : 0) + 'px');
+    }
+  };
+
+  /**
+   * Saves splitter position in cookie
+   */
+  this.set_cookie = function()
+  {
+    var exp = new Date();
+    exp.setYear(exp.getFullYear() + 1);
+    bw.set_cookie(this.id, this.pos, exp);
+  };
+
+} // end class rcube_splitter
+
+