Monotone-Parent: 13d533568c7b2e2ef1d4aeffe0c294abce793f3d

Monotone-Revision: 55bd0aadaff660782e65e1546472acf441f5dea3

Monotone-Author: wsourdeau@inverse.ca
Monotone-Date: 2010-04-12T17:51:59
Monotone-Branch: ca.inverse.sogo

UI/WebServerResources/ContactsUI.css

@@ -104,7 +104,7 @@ TABLE.titletable TD.titlecell SELECT
 
 DIV#contactFoldersList
 { position: absolute;
-  top: 65px;
+  top: 69px;
   left: 0px;
   width: 15em;
   bottom: 0px;
@@ -112,12 +112,16 @@ DIV#contactFoldersList
   padding: 0px;
   overflow: hidden; }
 
-DIV#contactFoldersList DIV.toolbar
-{ padding: 4px 0;
-  margin: 1px 0 0 0;
-  border-top: 1px solid #888;
-  border-left: 1px solid #aaa;
-  border-right: 1px solid #aaa; }
+DIV#smallToolbarContainer
+{ height: 50px;
+  margin: 0px 2px; }
+
+DIV#smallToolbarContainer > .tabs
+{ margin: 0px 2px;
+  height: 40px; }
+
+DIV#abToolbar
+{ height: 38px; }
 
 SPAN.toolbarButton
 { float: none;
@@ -135,7 +139,7 @@ UL#contactFolders
   color: #000;
   background: #CCDDEC;
   position: absolute; /* required for Safari & IE */
-  top: 76px; /* leave space for the mini addressbook */
+  top: 68px; /* leave space for the mini addressbook */
   bottom: 0px;
   left: 0;
   right: 0;
@@ -370,15 +374,9 @@ DIV.copy
   background-position: 1px -2px !important;
 }
 
-DIV#smallToolbarContainer
-{ top: 2em !important;
-  height: 44px;
-  right: 0px; }
-
 @media print
 {
   div#linkBanner, 
-  div#toolbar,
   div#contactFoldersList,
   div#dragHandle,
   div#rightDragHandle,

UI/WebServerResources/ContactsUI.js

@@ -1165,6 +1165,11 @@ function initContacts(event) {
     if ($(document.body).hasClassName("popup")) {
         configureSelectionButtons();
     } else {
+        configureAbToolbar();
+        var tabsContainer = $("smallToolbarContainer");
+        var controller = new SOGoTabsController();
+        controller.attachToTabsContainer(tabsContainer);
+
         // Addressbook import form
         $("uploadCancel").observe("click", hideContactsImport);
         $("uploadOK").observe("click", hideImportResults);
@@ -1175,7 +1180,6 @@ function initContacts(event) {
     else
         Event.observe(document, "keydown", onDocumentKeydown);        
     
-    configureAbToolbar();
     configureAddressBooks();
     updateAddressBooksMenus();
 

UI/WebServerResources/SOGoTabsController.js

@@ -0,0 +1,160 @@
+/* -*- Mode: java; tab-width: 2; c-label-minimum-indentation: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*- */
+
+function SOGoTabsController() {
+}
+
+SOGoTabsController.prototype = {
+    container: null,
+    firstTab: null,
+    activeTab: null,
+
+    list: null,
+    offset: 0,
+
+    createScrollButtons: function STC_createScrollButtons() {
+        var scrollToolbar = createElement("div", null, "scrollToolbar");
+        scrollToolbar.hide();
+        var lnk = createElement("a", null,
+                                [ "leftScrollButton",
+                                  "scrollButton", "smallToolbarButton"],
+                                { href: "#" },
+                                null, scrollToolbar);
+        var span = createElement("span");
+        lnk.appendChild(span);
+        span.appendChild(document.createTextNode("<"));
+        this.onScrollLeftBound = this.onScrollLeft.bindAsEventListener(this);
+        lnk.observe("click", this.onScrollLeftBound, false);
+
+        var lnk = createElement("a", null,
+                                [ "rightScrollButton",
+                                  "scrollButton", "smallToolbarButton"],
+                                { href: "#" },
+                                null, scrollToolbar);
+        var span = createElement("span");
+        lnk.appendChild(span);
+        span.appendChild(document.createTextNode(">"));
+        this.onScrollRightBound = this.onScrollRight.bindAsEventListener(this);
+        lnk.observe("click", this.onScrollRightBound, false);
+
+        this.container.appendChild(scrollToolbar);
+        this.scrollToolbar = scrollToolbar;
+    },
+
+    onScrollLeft: function(event) {
+        if (this.offset < 0) {
+            var offset = this.offset + 20;
+            if (offset > 0) {
+                offset = 0;
+            }
+            this.list.setStyle("margin-left: " + offset + "px;");
+            // log("offset: " + offset);
+            this.offset = offset;
+        }
+        event.stop();
+    },
+    onScrollRight: function(event) {
+        if (this.offset > this.minOffset) {
+            var offset = this.offset - 20;
+            if (offset < this.minOffset) {
+                offset = this.minOffset;
+            }
+            this.list.setStyle("margin-left: " + offset + "px;");
+            // log("offset: " + offset);
+            this.offset = offset;
+        }
+        event.stop();
+    },
+
+    attachToTabsContainer: function STC_attachToTabsContainer(container) {
+        this.container = container;
+        this.onTabMouseDownBound
+        = this.onTabMouseDown.bindAsEventListener(this);
+        this.onTabClickBound
+        = this.onTabClick.bindAsEventListener(this);
+
+        var list = container.childNodesWithTag("ul");
+        if (list.length > 0) {
+            this.list = $(list[0]);
+            var nodes = this.list.childNodesWithTag("li");
+            if (nodes.length > 0) {
+                this.firstTab = $(nodes[0]);
+                for (var i = 0; i < nodes.length; i++) {
+                    var currentNode = $(nodes[i]);
+                    currentNode.observe("mousedown",
+                                        this.onTabMouseDownBound, false);
+                    currentNode.observe("click", this.onTabClickBound, false);
+                    //$(currentNode.getAttribute("target")).hide();
+                }
+
+                this.firstTab.addClassName("first");
+                this.firstTab.addClassName("active");
+                this.activeTab = this.firstTab;
+
+                var last = nodes.length - 1;
+                this.lastTab = $(nodes[last]);
+
+                var target = $(this.firstTab.getAttribute("target"));
+                target.addClassName("active");
+            }
+            this.onWindowResizeBound = this.onWindowResize.bindAsEventListener(this);
+            Event.observe(window, "resize", this.onWindowResizeBound, false);
+        }
+
+        this.createScrollButtons();
+        this.recomputeMinOffset();
+    },
+
+    onWindowResize: function STC_onWindowResize(event) {
+        this.recomputeMinOffset();
+    },
+
+    recomputeMinOffset: function() {
+        var tabsWidth = (this.lastTab.offsetLeft + this.lastTab.clientWidth
+                         - this.firstTab.offsetLeft
+                         + 4);
+        this.minOffset = (this.container.clientWidth - tabsWidth - 40);
+        if (this.minOffset < -40) {
+            this.scrollToolbar.show();
+        } else {
+            this.scrollToolbar.hide();
+            if (this.offset < 0) {
+                this.list.setStyle("margin-left: 0px;");
+                this.offset = 0;
+            }
+        }
+    },
+
+    onTabMouseDown: function STC_onTabMouseDown(event) {
+        event.stop();
+    },
+
+    onTabClick: function STC_onTabClick(event) {
+        var clickedTab = getTarget(event);
+        if (clickedTab.nodeType == 1) {
+            while (clickedTab.tagName.toLowerCase() != "li") {
+                clickedTab = $(clickedTab.parentNode);
+            }
+            var content = $(clickedTab.getAttribute("target"));
+            var oldContent = $(this.activeTab.getAttribute("target"));
+            oldContent.removeClassName("active");
+            this.activeTab.removeClassName("active"); // previous LI
+            this.activeTab = $(clickedTab);
+            this.activeTab.addClassName("active"); // current LI
+            content.addClassName("active");
+            event.stop();
+            // Prototype alternative
+        
+            //oldContent.removeClassName("active");
+            //container.activeTab.removeClassName("active"); // previous LI
+            //container.activeTab = node;
+            //container.activeTab.addClassName("active"); // current LI
+            
+            //container.activeTab.hide();
+            //oldContent.hide();
+            //content.show();
+
+            //container.activeTab = node;
+            //container.activeTab.show();
+        }
+    }
+}

UI/WebServerResources/SchedulerUI.css

@@ -8,14 +8,14 @@ DIV#leftPanel
 
 DIV#schedulerTabs
 { position: absolute;
-  top: 22px;
-  left: .2em;
-  right: .2em;
-  height: 14em; }
+  top: 4px;
+  left: 2px;
+  right: 2px;
+  height: 186px; }
 
 DIV#tasksListView
 { position: absolute;
-  top: 17em;
+  top: 200px;
   bottom: 0px;
   left: 2px;
   right: 0px;
@@ -31,10 +31,8 @@ DIV#tasksListView LABEL
 { margin: .25em; }
 
 DIV#calendarSelectorView
-{ top: 3px; }
-
-DIV#calendarSelectorView
-{ overflow: hidden; }
+{ top: 3px;
+  overflow: hidden; }
 
 DIV#calendarsList
 { height: 100%; }
@@ -64,7 +62,7 @@ UL#tasksList, UL#calendarList
 
 UL#calendarList
 { clear: left;
-  height: 102px; }
+  height: 115px; }
 
 UL#calendarList LI
 { cursor: pointer;

UI/WebServerResources/SchedulerUI.js

@@ -2239,7 +2239,8 @@ function onCalendarExport(event) {
 }
 
 function onCalendarImport(event) {
-    var node = $("calendarList").getSelectedNodes().first();
+    var list = $("calendarList");
+    var node = list.getSelectedNodes().first();
     var folderId = node.getAttribute("id");
 
     var url = ApplicationBaseURL + folderId + "/import";
@@ -2250,6 +2251,7 @@ function onCalendarImport(event) {
     var cellDimensions = node.getDimensions();
     var left = cellDimensions['width'] - 20;
     var top = cellPosition[1];
+    top -= list.scrollTop;
 
     var div = $("uploadDialog");
     var res = $("uploadResults");
@@ -2556,6 +2558,11 @@ function initCalendars() {
     if (!$(document.body).hasClassName("popup")) {
         var node = $("filterpopup");
         listFilter = node.value;
+
+        var tabsContainer = $("schedulerTabs");
+        var controller = new SOGoTabsController();
+        controller.attachToTabsContainer(tabsContainer);
+
         initDateSelectorEvents();
         initCalendarSelector();
         configureSearchField();

UI/WebServerResources/UIxPreferences.css

@@ -1,6 +1,6 @@
 DIV#preferencesTabs
 { position: absolute;
-  top: 70px;
+  top: 54px;
   left: 5px;
   right: 5px;
   bottom: 5px; }

UI/WebServerResources/UIxPreferences.js

@@ -128,6 +128,10 @@ function addDefaultEmailAddresses(event) {
 }
 
 function initPreferences() {
+    var tabsContainer = $("preferencesTabs");
+    var controller = new SOGoTabsController();
+    controller.attachToTabsContainer(tabsContainer);
+
     var filtersListWrapper = $("filtersListWrapper");
     if (filtersListWrapper) {
         isSieveScriptsEnabled = true;

UI/WebServerResources/generic.css

@@ -739,18 +739,38 @@ SPAN.caption
   border: 0px; }
 
 /* Tabs */
+
 DIV.tabsContainer
+{ overflow: hidden;
+  top: 0px;
+  left: 5px;
+  right: 5px;
+  bottom: 5px;
+  padding: 0px 5px; }
+
+DIV.tabsContainer > DIV.scrollToolbar
 { position: absolute;
-  color: #535D6D;
-  background-color: #E6E7E6;
-  margin-top: 0.5em; 
+  background-color: #c6c7c6;
   border: 1px solid #9B9B9B;
-  top: 2.5em;
-  left: .5em;
-  right: .5em;
-  bottom: 2.5em;
-  margin-bottom: 1em;
-  padding: 0 5px; }
+  padding: 1px;
+  top: 8px;
+  right: 0px;
+  height: 12px;
+  vertical-align: bottom;
+  text-align: center;
+  width: 30px; }
+
+DIV.tabsContainer > DIV.scrollToolbar > A > SPAN
+{ border: 0px;
+  text-align: center;
+  width: 12px;
+  padding: 0px !important;
+  margin: 0px !important;
+  margin-top: 5px;  }
+
+DIV.tabsContainer > DIV.scrollToolbar > A,
+DIV.tabsContainer > DIV.scrollToolbar > A > SPAN
+{ height: 12px; }
 
 DIV.tabsContainer > UL
 { cursor: default;
@@ -758,7 +778,6 @@ DIV.tabsContainer > UL
   list-style-type: none;
   list-style-image: none;
   margin: 0px;
-  margin-top: -24px;
   padding: 0px; }
 
 DIV.tabsContainer > UL LI
@@ -787,7 +806,18 @@ DIV.tabsContainer > UL LI.first
 { margin-left: -1px;
   padding-left: -1px; }
 
-DIV.tabsContainer > DIV.tab
+DIV.tabsContainer > DIV.tabs
+{ position: absolute;
+  color: #535D6D;
+  background-color: #E6E7E6;
+  border: 1px solid #9B9B9B;
+  top: 23px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  overflow: hidden; }
+
+DIV.tabsContainer > DIV.tabs > DIV.tab
 { position: absolute;
   top: 5px;
   bottom: 5px;
@@ -856,8 +886,8 @@ A.toolbarButton SPAN,
 A.toolbarButton:hover SPAN {
   text-align: center;
   display: block;
-  line-height: 13px;
-  padding: 5px 2px 5px 5px;
+  line-height: 12px;
+  padding: 5px 2px 2px 5px;
   cursor: pointer;
 }
 

UI/WebServerResources/generic.js

@@ -409,15 +409,17 @@ function refreshOpener() {
 
 function eventIsLeftClick(event) {
    var isLeftClick = true;
-    if (isMac() && isSafari())
+    if (isMac() && isSafari()) {
         if (event.ctrlKey == 1)
             isLeftClick = false; // Control-click is equivalent to right-click under Mac OS X
         else if (event.metaKey == 1) // Command-click
             isLeftClick = true;
         else
             isLeftClick = Event.isLeftClick(event);
-    else
-        isLeftClick = Event.isLeftClick(event);
+    }
+    else {
+        isLeftClick = event.isLeftClick();
+    }
 
     return isLeftClick;
 }
@@ -1130,36 +1132,6 @@ function listRowMouseDownHandler(event) {
     return false;
 }
 
-/* tabs */
-function initTabs() {
-    var containers = document.getElementsByClassName("tabsContainer");
-    for (var x = 0; x < containers.length; x++) {
-        var container = containers[x];
-        var list = container.childNodesWithTag("ul");
-
-        if (list.length > 0) {
-            var firstTab = null;
-            var nodes = $(list[0]).childNodesWithTag("li");
-            for (var i = 0; i < nodes.length; i++) {
-                var currentNode = $(nodes[i]);
-                if (!firstTab)
-                    firstTab = currentNode;
-                currentNode.observe("mousedown", onTabMouseDown);
-                currentNode.observe("click", onTabClick);
-                //$(currentNode.getAttribute("target")).hide();
-            }
-
-            firstTab.addClassName("first");
-            firstTab.addClassName("active");
-            container.activeTab = firstTab;
-
-            var target = $(firstTab.getAttribute("target"));
-            target.addClassName("active");
-        }
-        //target.show();
-    }
-}
-
 function reverseSortByAlarmTime(a, b) {
     var x = parseInt(a[2]);
     var y = parseInt(b[2]);
@@ -1300,11 +1272,6 @@ function initMenu(menuDIV, callbacks) {
     }
 }
 
-function onTabMouseDown(event) {
-    event.stopPropagation();
-    event.preventDefault();
-}
-
 function openExternalLink(anchor) {
     return false;
 }
@@ -1342,32 +1309,6 @@ function getTopWindow() {
     return topWindow;
 }
 
-function onTabClick(event) {
-    var container = this.parentNode.parentNode;
-    var content = $(this.getAttribute("target"));
-    var oldContent = $(container.activeTab.getAttribute("target"));
-
-    oldContent.removeClassName("active");
-    container.activeTab.removeClassName("active"); // previous LI
-    container.activeTab = this;
-    container.activeTab.addClassName("active"); // current LI
-    content.addClassName("active");
-
-    // Prototype alternative
-
-    //oldContent.removeClassName("active");
-    //container.activeTab.removeClassName("active"); // previous LI
-    //container.activeTab = node;
-    //container.activeTab.addClassName("active"); // current LI
-
-    //container.activeTab.hide();
-    //oldContent.hide();
-    //content.show();
-
-    //container.activeTab = node;
-    //container.activeTab.show();
-}
-
 //function enableAnchor(anchor) {
 //    var classStr = '' + anchor.getAttribute("class");
 //    var position = classStr.indexOf("_disabled", 0);
@@ -1482,7 +1423,6 @@ function onLoadHandler(event) {
     initCriteria();
     configureSearchField();
     initMenus();
-    initTabs();
     configureDragHandles();
     configureLinkBanner();
     var progressImage = $("progressIndicator");
@@ -1518,7 +1458,7 @@ function onLinkBannerClick() {
 function onPreferencesClick(event) {
     var urlstr = UserFolderURL + "preferences";
     var w = window.open(urlstr, "_blank",
-                        "width=440,height=450,resizable=0,scrollbars=0,location=0");
+                        "width=440,height=450,resizable=1,scrollbars=0,location=0");
     w.opener = window;
     w.focus();
 

UI/WebServerResources/iefixes.css

@@ -38,6 +38,9 @@ DIV#userRoles
 UL#userList
 { top: 3em; }
 
+DIV.tabsContainer > DIV.scrollToolbar > A > SPAN
+{ line-height: 12px; }
+
 /* UIxCalUserRightsEditor */
 
 DIV.calendarUserRights HR
@@ -127,8 +130,7 @@ TABLE.frame TBODY
 { padding: 20px; }
 
 UL#calendarList
-{ margin-top: 2px;
-  height: 100px; }
+{ margin-top: 2px; }
 
 A.toolbarButton SPAN,
 A.toolbarButton:hover SPAN {