[Zope3-checkins] CVS: Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www - pdlib.js:1.1 zopetop_scripts.js:1.1 bg_content.jpg:1.2 help.gif:1.2 spacer2.gif:1.2 spacer3.gif:1.2 view_macros.pt:1.3 widget_macros.pt:1.4 zopetopBasic.css:1.3 zopetopStructure.css:1.3 zopetopWidgets.css:1.3

Shane Hathaway shane@zope.com
Wed, 20 Nov 2002 16:27:21 -0500


Update of /cvs-repository/Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www
In directory cvs.zope.org:/tmp/cvs-serv4293/www

Modified Files:
	bg_content.jpg help.gif spacer2.gif spacer3.gif view_macros.pt 
	widget_macros.pt zopetopBasic.css zopetopStructure.css 
	zopetopWidgets.css 
Added Files:
	pdlib.js zopetop_scripts.js 
Log Message:
Mangled ZopeTop to express some ideas. :-)

Reduced the purpleness, added more boxes, and integrated pdlib into the UI.
Now you can drag boxes around the screen, though the positions don't stick
between requests.

Now it's too busy and still too purple, but at least this is demo-able.


=== Added File Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/pdlib.js ===
// Copyright (c) 2002 Zope Corporation and Contributors.
// All Rights Reserved.
//
// This software is subject to the provisions of the Zope Public License,
// Version 2.0 (ZPL).  A copy of the ZPL should accompany this distribution.
// THIS SOFTWARE IS PROVIDED "AS IS" AND ANY AND ALL EXPRESS OR IMPLIED
// WARRANTIES ARE DISCLAIMED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
// WARRANTIES OF TITLE, MERCHANTABILITY, AGAINST INFRINGEMENT, AND FITNESS
// FOR A PARTICULAR PURPOSE.

// Page design Javascript library

// A library for manipulating objects on a page with object selection,
// context menus, and drag and drop.  Mostly DOM 2 oriented, with bits
// for IE compatibility.
// $Id: pdlib.js,v 1.1 2002/11/20 21:27:21 shane Exp $

// The following variables and functions are documented for use by
// scripts that use this library:
//
//   pd_node_setup
//   pd_selected_item
//   pd_selected_items
//
//   pd_stopEvent()
//   pd_findEventTarget()
//   pd_hideContextMenu()
//   pd_isSelected()
//   pd_select()
//   pd_deselect()
//   pd_clearSelection()
//   pd_setupContextMenu()     -- adds a context menu to an element
//   pd_setupDragUI()          -- adds drag/drop functionality to an element
//   pd_setupDropTarget()      -- turns an element into a drop target
//   pd_setupContextMenuDefinition() -- turns an element into a context menu
//   pd_setupPage()            -- Page initialization (call at bottom of page)
//
// See the documentation for descriptions.
// All other names are subject to change in future revisions.

var pd_open_context_menu = null; // The context menu node being displayed
var pd_drag_event = null;        // A pd_DragEvent object while dragging
var pd_selected_items = null;    // List of selected items
var pd_selected_item = null;     // Non-null when exactly one item is selected
var pd_drag_select_mode = null; // In drag-select mode, -1 or 1, otherwise null
var pd_node_setup = {};          // Object containing node setup functions
var pd_max_contextmenu_width = 250; // Threshold for faulty browsers

var pd_target_normal_border = "2px solid transparent";
var pd_target_highlighted_border = "2px dotted red"
var pd_target_loading_border = "2px solid green";


function pd_hasAncestor(node, ancestor) {
  var p = node;
  while (p) {
    if (p == ancestor)
      return true;
    p = p.parentNode;
  }
  return false;
}

function pd_stopEvent(e) {
  if (!e)
    e = event;
  if (e.stopPropagation)
    e.stopPropagation();
  else
    e.cancelBubble = true;
  return false;
}

function pd_findEventTarget(e, className, stop_className) {
  // Search for a node of the given class among the ancestors of the
  // target of an event, stopping if stop_className is encountered.
  var node = e.target || e.srcElement;
  while (node) {
    if (node.className == className)
      return node;
    if (stop_className && node.className == stop_className)
      return null;
    node = node.parentNode;
  }
  // Not found.
  return null;
}

//
// Context menu functions
//

function pd_showContextMenu(menunode, e) {
  if (!e)
    e = event;
  // Close any open menu
  pd_hideContextMenu();
  var page_w = window.innerWidth || document.body.clientWidth;
  var page_h = window.innerHeight || document.body.clientHeight;
  var page_x = window.pageXOffset || document.body.scrollLeft;
  var page_y = window.pageYOffset || document.body.scrollTop;

  if (menunode.offsetWidth >= pd_max_contextmenu_width) {
    // It's likely that the browser ignored "display: table"
    // and used the full width of the page.  Use a workaround.
    menunode.style.width = pd_max_contextmenu_width;
  }

  // Choose a location for the menu based on where the user clicked
  if (page_w - e.clientX < menunode.offsetWidth) {
    // Close to the right edge
    menunode.style.left = page_x + e.clientX - menunode.offsetWidth - 1;
  }
  else {
    menunode.style.left = page_x + e.clientX + 1;
  }
  if (page_h - e.clientY < menunode.offsetHeight) {
    // Close to the bottom
    menunode.style.top = page_y + e.clientY - menunode.offsetHeight - 1;
  }
  else {
    menunode.style.top = page_y + e.clientY + 1;
  }

  pd_open_context_menu = menunode;
  menunode.style.visibility = "visible";
  return false;
}

function pd_hideContextMenu(e) {
  if (pd_open_context_menu) {
    pd_open_context_menu.style.visibility = "hidden";
    pd_open_context_menu = null;
  }
}

function pd_getContextMenuItem(e) {
  return pd_findEventTarget(e, "context-menu-item", "context-menu");
}

function pd_highlightContextMenuItem(e) {
  if (!e)
    e = event;
  var node = pd_getContextMenuItem(e);
  if (node) {
    node.style.backgroundColor = "Highlight";
    node.style.color = "HighlightText";
  }
}

function pd_unhighlightContextMenuItem(e) {
  if (!e)
    e = event;
  var node = pd_getContextMenuItem(e);
  if (node) {
    node.style.backgroundColor = "";
    node.style.color = "";
  }
}

function pd_filterContextMenuItems(node) {
  // Execute filter scripts and set the "display" style property
  var i, f, enabled;
  if (node.getAttribute) {
    f = node.getAttribute("filter");
    if (f) {
      enabled = eval(f);
      if (enabled)
        node.style.display = "";
      else
        node.style.display = "none";
    }
  }
  for (i = 0; i < node.childNodes.length; i++)
    pd_filterContextMenuItems(node.childNodes[i]);
}

//
// Drag functions
//

function pd_DragEvent(e, move_func, checkmove_func) {
  this.target = null;
  this.move_func = move_func;
  this.checkmove_func = checkmove_func;
  this.start_x = e.pageX ? e.pageX : e.clientX + document.body.scrollLeft;
  this.start_y = e.pageY ? e.pageY : e.clientY + document.body.scrollTop;
  this.feedback_node = document.getElementById("drag-feedback-box");
  this.began_moving = false;
}

function pd_unhighlightDropTarget() {
  if (pd_drag_event && pd_drag_event.target) {
    pd_drag_event.target.style.border = pd_target_normal_border;
    pd_drag_event.target = null;
  }
}

function pd_highlightDropTarget(target, e) {
  if (!pd_drag_event)
    return;
  if (!e)
    e = event;
  var i;
  for (i = 0; i < pd_selected_items.length; i++) {
    if (pd_hasAncestor(target, pd_selected_items[i])) {
      // Don't let the user drag an element inside itself.
      return;
    }
  }
  if (pd_drag_event.checkmove_func) {
    if (!pd_drag_event.checkmove_func(pd_selected_items, target))
      return;
  }
  pd_unhighlightDropTarget();
  target.style.border = pd_target_highlighted_border;
  pd_drag_event.target = target;
}

function pd_firstDrag(x, y) {
  if (!pd_drag_event)
    return;
  var i;
  var feedback_node_style = pd_drag_event.feedback_node.style;
  var item = pd_selected_items[0];  // TODO: expand box to include all items

  pd_drag_event.began_moving = true;
  feedback_node_style.left = x + 5;
  feedback_node_style.top = y + 5;
  feedback_node_style.width = item.offsetWidth - 2;
  feedback_node_style.height = item.offsetHeight - 2;
  feedback_node_style.display = "block";
}

function pd_dragging(e) {
  if (!pd_drag_event)
    return;
  if (!e)
    e = event;
  var x = e.pageX ? e.pageX : e.clientX + document.body.scrollLeft;
  var y = e.pageY ? e.pageY : e.clientY + document.body.scrollTop;

  if (!pd_drag_event.began_moving) {
    if (Math.abs(x - pd_drag_event.start_x) <= 3 &&
        Math.abs(y - pd_drag_event.start_y) <= 3) {
      // Didn't move far enough yet.
      return;
    }
    pd_firstDrag(x, y);
  }
  pd_drag_event.feedback_node.style.left = x + 5;
  pd_drag_event.feedback_node.style.top = y + 5;
}

function pd_finishDrag() {
  document.onmousemove = null;
  document.onmouseup = null;
  document.onselectstart = null;
  pd_drag_event.feedback_node.style.display = "none";
  var ev = pd_drag_event;
  pd_drag_event = null;

  if (ev.target) {
    ev.target.style.border = pd_target_loading_border;
    if (ev.move_func)
      ev.move_func(pd_selected_items, ev.target);
  }
}

function pd_startDrag(e, move_func, checkmove_func) {
  if (pd_drag_event) {
    // Already dragging
    return;
  }
  if (!e)
    e = event;
  pd_drag_event = new pd_DragEvent(e, move_func, checkmove_func);
  document.onmousemove = pd_dragging;
  document.onmouseup = pd_finishDrag;
  document.onselectstart = pd_stopEvent;  // IE: Don't start a selection.
  if (e.preventDefault)
    e.preventDefault();  // NS 6: Don't start a selection.
}

//
// Selection management functions
//

function pd_isSelected(node) {
  if (pd_selected_items) {
    for (var i = 0; i < pd_selected_items.length; i++) {
      if (node == pd_selected_items[i]) {
        return true;
      }
    }
  }
  return false;
}

function pd_changedSelection() {
  if (pd_selected_items && pd_selected_items.length == 1)
    pd_selected_item = pd_selected_items[0];
  else
    pd_selected_item = null;
}

function pd_deselect(node) {
  var i, n;
  if (pd_selected_items) {
    var newsel = [];
    // There must be a better way.  This could be slow.
    for (i = 0; i < pd_selected_items.length; i++) {
      n = pd_selected_items[i];
      if (n != node) {
        if (newsel.push)
          newsel.push(n)
        else
          newsel = newsel.concat([n]);
      }
    }
    pd_selected_items = newsel;
    pd_changedSelection();
  }
  node.style.color = '';
  node.style.backgroundColor = '';
}

function pd_select(node) {
  if (!pd_isSelected(node)) {
    if (!pd_selected_items)
      pd_selected_items = [node];
    else if (pd_selected_items.push)
      pd_selected_items.push(node);
    else
      pd_selected_items = pd_selected_items.concat([node]);
  }
  pd_changedSelection();
  node.style.color = 'HighlightText';
  node.style.backgroundColor = 'Highlight';
}

function pd_clearSelection() {
  var i, node;
  if (pd_selected_items) {
    for (i = 0; i < pd_selected_items.length; i++) {
      node = pd_selected_items[i];
      node.style.color = '';
      node.style.backgroundColor = '';
    }
  }
  pd_selected_items = [];
  pd_changedSelection();
}

function pd_dragSelecting(node) {
  if (pd_drag_select_mode == 1)
    pd_select(node);
  else if (pd_drag_select_mode == -1)
    pd_deselect(node);
}

function pd_endDragSelect() {
  pd_drag_select_mode = null;
  document.onmouseup = null;
}

function pd_startDragSelect(v) {
  document.onmouseup = pd_endDragSelect;
  pd_drag_select_mode = v;
}


//
// On-page object management functions
//

function pd_itemOnMousedown(mo, e, move_func, checkmove_func) {
  if (!e)
    e = event;
  if (e.button == 0 || e.button == 1) {
    pd_hideContextMenu();
    if (e.shiftKey) {
      // Toggle the selected state of this item and start drag select.
      if (pd_isSelected(mo)) {
        pd_deselect(mo);
        pd_startDragSelect(-1);
      }
      else {
        pd_select(mo);
        pd_startDragSelect(1);
      }
    }
    else if (e.ctrlKey) {
      if (pd_isSelected(mo))
        pd_deselect(mo);
      else
        pd_select(mo);
      // No dragging
    }
    else {
      if (!pd_isSelected(mo)) {
        pd_clearSelection();
        pd_select(mo);
      }
      pd_startDrag(e, move_func, checkmove_func);
    }
  }
  return pd_stopEvent(e);
}

function pd_itemOnMouseover(mo, e) {
  if (pd_drag_select_mode) {
    if (!e)
      e = event;
    pd_dragSelecting(mo);
    return pd_stopEvent(e);
  }
}

function pd_itemOnContextMenu(mo, e, contextMenuId) {
  if (!e)
    e = event;
  if (!pd_isSelected(mo)) {
    pd_clearSelection();
    pd_select(mo);
  }
  var menu = document.getElementById(contextMenuId);
  if (menu) {
    pd_filterContextMenuItems(menu);
    pd_showContextMenu(menu, e);
    return pd_stopEvent(e);
  }
}

function pd_setupDragUI(mo, move_func, checkmove_func) {
  // Adds selection and drag and drop functionality to an element
  function call_onmousedown(e) {
    return pd_itemOnMousedown(mo, e, move_func, checkmove_func);
  }
  function call_onmouseover(e) {
    return pd_itemOnMouseover(mo, e);
  }
  mo.onmousedown = call_onmousedown;
  mo.onmouseover = call_onmouseover;
  mo.onselectstart = pd_stopEvent;  // IE: Don't start a selection.
}

function pd_setupContextMenu(mo, contextMenuId) {
  // Adds context menu functionality to an element
  function oncontextmenu(e) {
    return pd_itemOnContextMenu(mo, e, contextMenuId);
  }
  mo.oncontextmenu = oncontextmenu;
}

function pd_documentOnMouseDown() {
  pd_hideContextMenu();
  pd_clearSelection();
}

function pd_setupNodeAndDescendants(node) {
  var i, f;
  if (node.className) {
    f = pd_node_setup[node.className];
    if (f)
      f(node);
  }
  for (i = 0; i < node.childNodes.length; i++) {
    pd_setupNodeAndDescendants(node.childNodes[i]);
  }
}

function pd_setupPage(node) {
  if (!node)
    node = document;
  if (!document.onmousedown)
    document.onmousedown = pd_documentOnMouseDown;
  pd_setupNodeAndDescendants(node);
}

function pd_setupDropTarget(node) {
  function call_highlight(e) {
    return pd_highlightDropTarget(node, e);
  }
  node.onmouseover = call_highlight;
  node.onmouseout = pd_unhighlightDropTarget;
  node.onmousedown = pd_stopEvent; // Prevent accidental selection
}

function pd_setupContextMenuDefinition(node) {
  node.onmouseover = pd_highlightContextMenuItem;
  node.onmouseout = pd_unhighlightContextMenuItem;
  node.onmousedown = pd_stopEvent;
  node.onmouseup = pd_hideContextMenu;
}

pd_node_setup['drop-target'] = pd_setupDropTarget;
pd_node_setup['context-menu'] = pd_setupContextMenuDefinition;


=== Added File Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetop_scripts.js ===
// Copyright (c) 2002 Zope Corporation and Contributors.
// All Rights Reserved.
//
// This software is subject to the provisions of the Zope Public License,
// Version 2.0 (ZPL).  A copy of the ZPL should accompany this distribution.
// THIS SOFTWARE IS PROVIDED "AS IS" AND ANY AND ALL EXPRESS OR IMPLIED
// WARRANTIES ARE DISCLAIMED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
// WARRANTIES OF TITLE, MERCHANTABILITY, AGAINST INFRINGEMENT, AND FITNESS
// FOR A PARTICULAR PURPOSE.

// ZopeTop scripts (requires pdlib)

function Box_add() {
  window.alert("Add box is not implemented yet.");
}

function Boxes_copy() {
  window.alert("Copy is not implemented yet.  Objects: " + pd_selected_items);
}

function Boxes_cut() {
  window.alert("Cut is not implemented yet.  Objects: " + pd_selected_items);
}

function Boxes_paste() {
  window.alert("Paste is not implemented yet.  Objects: " + pd_selected_items);
}

function Boxes_remove() {
  var i, node;
  for (i = 0; i < pd_selected_items.length; i++) {
    node = pd_selected_items[i];
    node.style.display = "none";
  }
}

function Boxes_move(pd_selected_items, target_node) {
  var i, node;
  for (i = 0; i < pd_selected_items.length; i++) {
    node = pd_selected_items[i];
    node.parentNode.removeChild(node);
    target_node.parentNode.insertBefore(node, target_node);
    target_node.style.border = "2px solid transparent";
  }
}

function Boxes_checkmove(pd_selected_items, target_node) {
  return true;
}

function setupBox(node) {
  pd_setupDragUI(node, Boxes_move, Boxes_checkmove);
  pd_setupContextMenu(node, 'box-context-menu');
}

pd_node_setup['box'] = setupBox;



=== Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/bg_content.jpg 1.1 => 1.2 ===
  <Binary-ish file>

=== Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/help.gif 1.1 => 1.2 ===
  <Binary-ish file>

=== Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/spacer2.gif 1.1 => 1.2 ===
  <Binary-ish file>

=== Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/spacer3.gif 1.1 => 1.2 ===
  <Binary-ish file>

=== Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/view_macros.pt 1.2 => 1.3 ===
--- Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/view_macros.pt:1.2	Wed Nov 13 15:38:27 2002
+++ Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/view_macros.pt	Wed Nov 20 16:27:21 2002
@@ -13,11 +13,28 @@
         tal:attributes="href context/++resource++zopetopWidgets.css" />
 <link href="zopetopStructure.css" rel="stylesheet" type="text/css"
         tal:attributes="href context/++resource++zopetopStructure.css" />
+<script type="text/javascript" src="pdlib.js"
+        tal:attributes="src context/++resource++pdlib.js"></script>
+<script type="text/javascript" src="zopetop_scripts.js"
+        tal:attributes="src context/++resource++zopetop_scripts.js"></script>
+
+<style type="text/css"><!--
+#drag-feedback-box {
+  border: 1px dotted black;
+  position: absolute;
+  display: none;
+  z-index: 1000;
+}
+</style>
+
 <div metal:define-slot="headers">
 </div>
+
+
 </head>
 <body>
-<table width="100%" border="0" cellspacing="0" cellpadding="0">
+<table width="100%" border="0" cellspacing="0" cellpadding="0"
+       class="top-table">
   <tr> 
     <td background="bg_top.jpg"
         tal:attributes="background context/++resource++bg_top.jpg"> 
@@ -28,7 +45,7 @@
                    tal:attributes="src context/++resource++zope3logo.jpg" /></td>
           <td>
             <table border="0" align="right" cellpadding="0" cellspacing="0">
-              <tr> 
+              <tr class="personalBar">
                 <td><span metal:use-macro="views/standard_macros/logged_user">Logged in as user</span></td>
                 <td>&nbsp;<img src="spacer1.gif" alt="" width="2" height="25"
                                tal:attributes="src context/++resource++spacer1.gif" 
@@ -45,45 +62,33 @@
         </tr>
       </table></td>
   </tr>
+<!--
   <tr> 
-    <td background="bg_bar.jpg"
-         tal:attributes="background context/++resource++bg_bar.jpg"> 
+    <td background="bg_bar.gif"
+         tal:attributes="background context/++resource++bg_bar.gif"> 
       <span metal:use-macro="views/standard_macros/services_bar" />
     </td>
   </tr>
-  <tr> 
-    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
+  <tr>
+    <td bgcolor="#7d7cc0" height="1"></td>
+  </tr>
+-->
+</table>
+<table width="100%" border="0" cellspacing="0" cellpadding="0"
+       class="main-table">
         <tr> 
-          <td width="176" align="center" valign="top"> 
+          <td width="160" align="center" valign="top" class="left-column"> 
             <table width="100%" border="0" cellspacing="0" cellpadding="0">
-              <tr> 
-                <td background="bg_root_folder.jpg"
-                    tal:attributes="background context/++resource++bg_root_folder.jpg"
-                  ><img src="bg_root_folder.jpg" width="176" height="16" 
-                       tal:attributes="src context/++resource++bg_root_folder.jpg"
-                /></td>
-              </tr>
+              <tr><td class="drop-target">&nbsp;</td></tr>
             </table>
 	    <span metal:use-macro="views/standard_macros/explorer_box" />
-            <img src="spacer3.gif" width="176" height="12"
-                 tal:attributes="src context/++resource++spacer3.gif"/> 
-            <span metal:use-macro="views/standard_macros/views_box" />
-
-            <img src="spacer3.gif" width="176" height="12"
-             tal:attributes="src context/++resource++spacer3.gif"/> </td>
-          <td width="1" class="darker"> <img src="x.gif" 
-            alt="" width="1" height="400"
-             tal:attributes="src context/++resource++x.gif"/></td>
+            <img src="spacer3.gif" width="150" height="8" class="drop-target"
+                 tal:attributes="src context/++resource++spacer3.gif" /> 
+            <span metal:use-macro="views/standard_macros/search_box" />
+            <img src="spacer3.gif" width="150" height="8" class="drop-target"
+             tal:attributes="src context/++resource++spacer3.gif" />
+          </td>
           <td valign="top" class="hilite">
-            <table width="100%" border="0" cellspacing="0" cellpadding="0">
-              <tr> 
-                <td background="bg_content.jpg"
-                    tal:attributes="background context/++resource++bg_content.jpg">
-                <img
-                    src="bg_content.jpg" width="15" height="6" 
-                    tal:attributes="src context/++resource++bg_content.jpg"/></td>
-              </tr>
-            </table>
             <table width="100%" border="0" align="center" cellpadding="0" cellspacing="10">
               <tr> 
                 <td class="background">
@@ -147,10 +152,41 @@
 		</td>
 	      </tr>
 
-            </table></td>
+            </table>
+          </td>
+          <td width="160" align="center" valign="top" class="right-column">
+            <table width="100%" border="0" cellspacing="0" cellpadding="0">
+              <tr><td>&nbsp;</td></tr>
+            </table>
+            <span metal:use-macro="views/standard_macros/metadata_box" />
+            <img src="spacer3.gif" width="150" height="8" class="drop-target"
+             tal:attributes="src context/++resource++spacer3.gif" />
+            <span metal:use-macro="views/standard_macros/views_box" />
+            <img src="spacer3.gif" width="150" height="8" class="drop-target"
+             tal:attributes="src context/++resource++spacer3.gif" />
+            <span metal:use-macro="views/standard_macros/services_box" />
+            <img src="spacer3.gif" width="150" height="8" class="drop-target"
+             tal:attributes="src context/++resource++spacer3.gif" />
+          </td>
         </tr>
-      </table></td>
-  </tr>
 </table>
+
+
+<div id="box-context-menu" class="context-menu">
+<div class="context-menu-item" onmouseup="Box_add()">Add a box...</div>
+<br />
+<div class="context-menu-item" onmouseup="Boxes_copy()">Copy</div>
+<div class="context-menu-item" onmouseup="Boxes_cut()">Cut</div>
+<div class="context-menu-item" onmouseup="Boxes_paste()"
+     filter="false">Paste</div>
+<div class="context-menu-item" onmouseup="Boxes_remove()">Remove</div>
+</div>
+
+<div id="drag-feedback-box"></div>
+<script type="text/javascript"><!--
+  pd_setupPage();
+// --></script>
+
+
 </body>
 </html>


=== Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/widget_macros.pt 1.3 => 1.4 ===
--- Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/widget_macros.pt:1.3	Wed Nov 13 15:38:27 2002
+++ Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/widget_macros.pt	Wed Nov 20 16:27:21 2002
@@ -13,53 +13,45 @@
    >Logged in as <span tal:replace="request/user/getTitle"
    >dtremea</span></span>
 
-<table metal:define-macro="services_bar" border="0" cellspacing="0" cellpadding="0">
-  <tr tal:on-error="string: No services available">
-    <td>&nbsp;
-      <img src="service_manager.gif" alt="Sort" 
-      tal:attributes="src context/++resource++service_manager.gif"/>
-    </td>
-    <td>
-      <a href="./++etc++Services/"
-      tal:condition="context/hasServiceManager">Services</a>
-      <a href="@@addServiceManager.html" 
-      tal:condition="not: context/hasServiceManager">Allow Services</a>
-    </td>     
-    <td><img src="spacer2.gif" width="15" height="28"
-      tal:attributes="src context/++resource++spacer2.gif"/>
-    </td>
-    <td><img src="user_accounts.gif" width="22" height="28"
-      tal:attributes="src context/++resource++user_accounts.gif"/>
-    </td>
-    <td nowrap="nowrap">User Accounts
-    </td>
-    <td><img src="spacer2.gif" width="15" height="28"
-      tal:attributes="src context/++resource++spacer2.gif"/>
-    </td>
-    <td><img src="control_panels.gif" width="24" height="28"
-      tal:attributes="src context/++resource++control_panels.gif"/>
-    </td>
-    <td nowrap="nowrap">Control Panels
-    </td>
-    <td><img src="spacer2.gif" width="15" height="28"
-      tal:attributes="src context/++resource++spacer2.gif"/>
-    </td>
-    <td><img src="system_security.gif" width="23" height="28"
-      tal:attributes="src context/++resource++system_security.gif"/>
-    </td>
-    <td nowrap="nowrap">System Security
-    </td>
-    <td><img src="spacer2.gif" width="15" height="28"
-      tal:attributes="src context/++resource++spacer2.gif"/>
-    </td>
-    <td><img src="add_more.gif" width="26" height="28"
-      tal:attributes="src context/++resource++add_more.gif"/>
-    </td>
-    <td nowrap="nowrap">Add More
-    </td>
-  </tr>
+
+<table metal:define-macro="services_box" align="center" class="box"
+       width="150">
+    <thead>
+      <tr> 
+        <th align="center">Services</th>
+	<th class="empty">&nbsp;</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+	<td colspan="2" nowrap="nowrap">
+
+    <span tal:condition="not: context/hasServiceManager">
+    <a href="@@addServiceManager.html">Allow Services</a>
+    <br />
+    </span>
+    <img src="user_accounts.gif" width="22" height="28"
+      tal:attributes="src context/++resource++user_accounts.gif" />
+    User Accounts
+    <br />
+    <img src="control_panels.gif" width="24" height="28"
+      tal:attributes="src context/++resource++control_panels.gif" />
+    Control Panels
+    <br />
+    <img src="system_security.gif" width="23" height="28"
+      tal:attributes="src context/++resource++system_security.gif" />
+    System Security
+    <br />
+    <img src="add_more.gif" width="26" height="28"
+      tal:attributes="src context/++resource++add_more.gif" />
+    Add More
+
+	</td>
+      </tr>
+    </tbody>
 </table>
 
+
 <table metal:define-macro="explorer_box" align="center" class="box" width="150">
   <thead>
     <tr> 
@@ -100,7 +92,7 @@
   <table metal:define-macro="views_box" align="center" class="box" width="150">
     <thead>
       <tr> 
-	  <th align="center">Views</th>
+        <th align="center">Views</th>
 	<th class="empty">&nbsp;</th>
       </tr>
       </thead>
@@ -115,6 +107,74 @@
       </tr>
       </tbody>
     </table>
+
+  <table metal:define-macro="search_box" align="center" class="box"
+         width="150">
+    <thead>
+      <tr> 
+        <th align="center">Search</th>
+	<th class="empty">&nbsp;</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+	<td colspan="2" nowrap="nowrap">
+          <form name="search">
+          <input type="text" size="15" style="width: 85%;"
+          /><input type="submit" value="Go" style="width: 15%;" />
+          </form>
+	</td>
+      </tr>
+    </tbody>
+  </table>
+
+  <table metal:define-macro="metadata_box" align="center" class="box"
+         width="150">
+    <thead>
+      <tr> 
+        <th align="center">Metadata</th>
+	<th class="empty">&nbsp;</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+	<td colspan="2" nowrap="nowrap">
+
+    <form name="metadata">
+    <table border="0" cellspacing="0" cellpadding="0">
+      <tr>
+
+        <td>Title</td>
+        <td><input type="edit" size="10" name="title:string"
+                   value=""></td>
+      </tr>
+      <tr>
+        <td>Creator</td>
+        <td>mowgli</td>
+      </tr>
+
+      <tr>
+        <td>Last Modified</td>
+        <td>09-06</td>
+      </tr>
+      <tr>
+        <td>Keywords</td>
+        <td>Many</td>
+
+      </tr>
+      <tr>
+        <td colspan="2">
+          <input type="submit" name="save" value="Save Changes">
+        </td>
+      </tr>
+    </table>
+    </form>
+
+	</td>
+      </tr>
+    </tbody>
+  </table>
+
 
 <table metal:define-macro="content_header_bar" width="100%" border="0" cellpadding="0" cellspacing="0">
   <tr> 


=== Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetopBasic.css 1.2 => 1.3 ===
--- Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetopBasic.css:1.2	Fri Jul 12 20:44:37 2002
+++ Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetopBasic.css	Wed Nov 20 16:27:21 2002
@@ -1,190 +1,190 @@
-/*****************************************************************************
- *
- * Copyright (c) 2001, 2002 Zope Corporation and Contributors.
- * All Rights Reserved.
- * 
- * This software is subject to the provisions of the Zope Public License,
- * Version 2.0 (ZPL).  A copy of the ZPL should accompany this distribution.
- * THIS SOFTWARE IS PROVIDED "AS IS" AND ANY AND ALL EXPRESS OR IMPLIED
- * WARRANTIES ARE DISCLAIMED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF TITLE, MERCHANTABILITY, AGAINST INFRINGEMENT, AND FITNESS
- * FOR A PARTICULAR PURPOSE.
- * 
- *****************************************************************************
- 
- These are the basic CSS declarations.
-
- $Id$
-*/
-
-
-body {
-    font: 0.8em Tahoma, Helvetica, Arial, sans-serif;
-    background: #CCCCFF;
-    color: #000066;
-    margin: 0;
-    padding: 0;
-}
-
-a {
-    text-decoration: none;
-    color: #000066;
-    background-color: transparent;
-}
-
-table {
-    font: 1em Tahoma, Helvetica, Arial, sans-serif;
-}
-
-
-img {
-/* turn off image borders. */
-    border: none;
-}
-
-p {
-/* Default paragraph style*/
-    font: 1em Tahoma, Helvetica, Arial, sans-serif;
-    margin: 1em 0em;
-    text-align: justify;
-}
-
-p a {
-    text-decoration: underline;
-}
-
-p a:visited {
-    color: Purple;
-    background-color: transparent;
-}
-
-p a:active {
-    color: Red;
-    background-color: transparent;
-}
-
-p img {
-    border: 1px solid Black;
-    margin: 1em;
-}
-
-
-hr {
-    clear: both;
-    height: 1px;
-    color: #8CACBB;
-    background-color: transparent;
-}
-
-
-h1, h2, h3, h4, h5, h6 {
-	color: Black;
-	margin-top: 0;
-	font-family: Tahoma, Helvetica, Arial, sans-serif;
-
-
-}
-
-h1 {
-    font-size: 1.8em;
-}
-
-h2 {
-    font-size: 1.6em;
-}
-
-h3 {
-    font-size: 1.4em;
-}
-
-h4 {
-    font-size: 1.2em;
-}
-
-h5 {
-    font-size: 1.1em;
-}
-
-h6 {
-    font-size: 1.0em;
-}
-
-ul { 
-    list-style-image: url("bullet.gif"); 
-    margin-top: 1em;
-    margin-bottom: 1em;
-    margin-left: 2em;
-    padding:0;
-}
-
-/* we advise you to use the div.group and span.legend elements instead of
-these, as the only browser showing legends correctly is IE. They are just
-included here for completeness */
-
-fieldset {
-    border: 1px solid #8cacbb;
-    margin: 2em 0em 1em 0em;
-    padding: 1em 0em;
-}
-
-legend {
-    background: White;
-    padding: 0.5em;
-}
-
-
-form {
-    border: none;
-}
-
-textarea {
-/* Small cosmetic hack which makes textarea gadgets look nicer.*/
-    font: bold 1em Tahoma, Helvetica, Arial, sans-serif;
-    border: 1px solid #8cacbb;  
-    width: 100%;
-    color: Black;
-    background-color: white;
-}
-
-input {
-/* Small cosmetic fix which makes input gadgets look nicer.  */
-    font: 1em Tahoma, Helvetica, Arial, sans-serif;
-/*    border: 1px solid #8cacbb;   */
-    color: Black;
-/*    background-color: white; */
-    margin: 1px 1px 1px 1px;
-}
-
-select {
-    font: 1em Tahoma, Helvetica, Arial, sans-serif;
-/*    border: 1px solid #8cacbb;  */
-    margin: 1px 1px 1px 1px;
-}
-
-abbr, acronym, .explain {
-/* Help classes */
-    border-bottom: 1px dotted Black;
-    color: Black;
-    background-color: transparent;
-    cursor: help;
-}
-
-code {
-    font-size: 1.2em;
-    color: Black;
-    background-color: #dee7ec;
-}
-
-pre {
-    font-size: 1.2em;
-    padding: 1em;
-    border: 1px solid #8cacbb;
-    color: Black;
-    background-color: #dee7ec;
-}
-
-.netscape4 {
-/* This hides elements necessary for getting Netscape 4.x to look better.
-   Mostly strategically placed hr tags and &middot;'s */
-    display: none;
-}
+/*****************************************************************************
+ *
+ * Copyright (c) 2001, 2002 Zope Corporation and Contributors.
+ * All Rights Reserved.
+ * 
+ * This software is subject to the provisions of the Zope Public License,
+ * Version 2.0 (ZPL).  A copy of the ZPL should accompany this distribution.
+ * THIS SOFTWARE IS PROVIDED "AS IS" AND ANY AND ALL EXPRESS OR IMPLIED
+ * WARRANTIES ARE DISCLAIMED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF TITLE, MERCHANTABILITY, AGAINST INFRINGEMENT, AND FITNESS
+ * FOR A PARTICULAR PURPOSE.
+ * 
+ *****************************************************************************
+ 
+ These are the basic CSS declarations.
+
+ $Id$
+*/
+
+
+body {
+    font: 0.8em Tahoma, Helvetica, Arial, sans-serif;
+    background: #FFFFFF;
+    color: #000066;
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    text-decoration: none;
+    color: #000066;
+    background-color: transparent;
+}
+
+table {
+    font: 1em Tahoma, Helvetica, Arial, sans-serif;
+}
+
+
+img {
+/* turn off image borders. */
+    border: none;
+}
+
+p {
+/* Default paragraph style*/
+    font: 1em Tahoma, Helvetica, Arial, sans-serif;
+    margin: 1em 0em;
+    text-align: justify;
+}
+
+p a {
+    text-decoration: underline;
+}
+
+p a:visited {
+    color: Purple;
+    background-color: transparent;
+}
+
+p a:active {
+    color: Red;
+    background-color: transparent;
+}
+
+p img {
+    border: 1px solid Black;
+    margin: 1em;
+}
+
+
+hr {
+    clear: both;
+    height: 1px;
+    color: #8CACBB;
+    background-color: transparent;
+}
+
+
+h1, h2, h3, h4, h5, h6 {
+	color: Black;
+	margin-top: 0;
+	font-family: Tahoma, Helvetica, Arial, sans-serif;
+
+
+}
+
+h1 {
+    font-size: 1.8em;
+}
+
+h2 {
+    font-size: 1.6em;
+}
+
+h3 {
+    font-size: 1.4em;
+}
+
+h4 {
+    font-size: 1.2em;
+}
+
+h5 {
+    font-size: 1.1em;
+}
+
+h6 {
+    font-size: 1.0em;
+}
+
+ul { 
+    list-style-image: url("bullet.gif"); 
+    margin-top: 1em;
+    margin-bottom: 1em;
+    margin-left: 2em;
+    padding:0;
+}
+
+/* we advise you to use the div.group and span.legend elements instead of
+these, as the only browser showing legends correctly is IE. They are just
+included here for completeness */
+
+fieldset {
+    border: 1px solid #8cacbb;
+    margin: 2em 0em 1em 0em;
+    padding: 1em 0em;
+}
+
+legend {
+    background: White;
+    padding: 0.5em;
+}
+
+
+form {
+    border: none;
+}
+
+textarea {
+/* Small cosmetic hack which makes textarea gadgets look nicer.*/
+    font: bold 1em Tahoma, Helvetica, Arial, sans-serif;
+    border: 1px solid #8cacbb;  
+    width: 100%;
+    color: Black;
+    background-color: white;
+}
+
+input {
+/* Small cosmetic fix which makes input gadgets look nicer.  */
+    font: 1em Tahoma, Helvetica, Arial, sans-serif;
+/*    border: 1px solid #8cacbb;   */
+    color: Black;
+/*    background-color: white; */
+    margin: 1px 1px 1px 1px;
+}
+
+select {
+    font: 1em Tahoma, Helvetica, Arial, sans-serif;
+/*    border: 1px solid #8cacbb;  */
+    margin: 1px 1px 1px 1px;
+}
+
+abbr, acronym, .explain {
+/* Help classes */
+    border-bottom: 1px dotted Black;
+    color: Black;
+    background-color: transparent;
+    cursor: help;
+}
+
+code {
+    font-size: 1.2em;
+    color: Black;
+    background-color: #dee7ec;
+}
+
+pre {
+    font-size: 1.2em;
+    padding: 1em;
+    border: 1px solid #8cacbb;
+    color: Black;
+    background-color: #dee7ec;
+}
+
+.netscape4 {
+/* This hides elements necessary for getting Netscape 4.x to look better.
+   Mostly strategically placed hr tags and &middot;'s */
+    display: none;
+}


=== Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetopStructure.css 1.2 => 1.3 === (438/538 lines abridged)
--- Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetopStructure.css:1.2	Fri Jul 12 20:44:37 2002
+++ Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetopStructure.css	Wed Nov 20 16:27:21 2002
@@ -1,255 +1,280 @@
-/*****************************************************************************
- *
- * Copyright (c) 2001, 2002 Zope Corporation and Contributors.
- * All Rights Reserved.
- * 
- * This software is subject to the provisions of the Zope Public License,
- * Version 2.0 (ZPL).  A copy of the ZPL should accompany this distribution.
- * THIS SOFTWARE IS PROVIDED "AS IS" AND ANY AND ALL EXPRESS OR IMPLIED
- * WARRANTIES ARE DISCLAIMED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF TITLE, MERCHANTABILITY, AGAINST INFRINGEMENT, AND FITNESS
- * FOR A PARTICULAR PURPOSE.
- * 
- *****************************************************************************
- 
- The Structure CSS contains elements that make up the structure of Plone,
- generally stuff that is used once on a page - general layout, opposed to the
- Widgets, that are used several times in a page.
-
- KNOWN BUG: The selected tab cannot have image backdrop. FIXME
-
- $Id$
-*/
-
-div.top {
-/* Top section */
-    background: transparent;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-}
-
-.logo {
-/* Logo properties */
-    margin: 1em 0em 1em 2em;
-    padding: 0;
-}
-
-div.searchBox {
-/*searchbox style and positioning */
-    background-color: transparent;
-    color: Black;
-    float: right;
-    margin: 3em 0em 0em 0em;
-    padding: 0em 2em 0em 0em;
-    text-align: right;
-}
-

[-=- -=- -=- 438 lines omitted -=- -=- -=-]

+}
+
+.hilite {
+    background: #FFFFFF;
+}
+
+.background {
+    border-bottom: 1px solid #7B7AC6;
+}
+
+.description {
+/* The summary text describing the document */
+    font: bold 1em Tahoma, Helvetica, Arial, sans-serif;
+    display: block;
+    margin-bottom: 1em;
+}
+
+.footer {
+    background: #DEE7EC;
+    border-top: 1px solid #8CACBB;
+    border-bottom: 1px solid #8CACBB;
+    color: Black;
+    clear: both;
+    float: none;
+    margin: 2em 0em;
+    padding: 0.5em 0em 1em 0em;
+    text-align: center;
+}
+
+.context-menu {
+  position: absolute;
+  border: 1px outset;
+  background-color: Menu;
+  color: MenuText;
+  cursor: default;
+  z-index: 1000;
+  visibility: hidden;
+  display: table;
+}
+
+.context-menu-item {
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.drop-target {
+  border: 2px solid transparent;
+}


=== Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetopWidgets.css 1.2 => 1.3 === (607/707 lines abridged)
--- Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetopWidgets.css:1.2	Fri Jul 12 20:44:37 2002
+++ Zope3/lib/python/Zope/App/ZMI/Browser/ZopeTop/www/zopetopWidgets.css	Wed Nov 20 16:27:21 2002
@@ -1,351 +1,353 @@
-/*****************************************************************************
- *
- * Copyright (c) 2001, 2002 Zope Corporation and Contributors.
- * All Rights Reserved.
- * 
- * This software is subject to the provisions of the Zope Public License,
- * Version 2.0 (ZPL).  A copy of the ZPL should accompany this distribution.
- * THIS SOFTWARE IS PROVIDED "AS IS" AND ANY AND ALL EXPRESS OR IMPLIED
- * WARRANTIES ARE DISCLAIMED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF TITLE, MERCHANTABILITY, AGAINST INFRINGEMENT, AND FITNESS
- * FOR A PARTICULAR PURPOSE.
- * 
- *****************************************************************************
- 
- These are the Widget CSS declarations.
-
- TODO: table.listing, 
-       table.box
-
- $Id$
-*/
-
-input.standalone {
-    background: #A1A1F1 url(linkOpaque.gif) left no-repeat;
-    color: Black;
-    cursor: pointer;
-    font-weight: normal;
-    padding: 1px 1px 1px 15px;
-}
-
-input.context {
-    background: White url(linkTransparent.gif) left no-repeat;
-    color: Black;
-    cursor: pointer;
-    font-weight: normal;
-    padding: 1px 1px 1px 15px;
-}
-
-input.noborder {
-/* radiobuttons and checkmarks, different behaviour in Moz and IE. 
-   Border necessary in Moz, not in IE */
-    border: none;
-    margin: 0;
-    background-color: transparent;
-}
-
-div.row {

[-=- -=- -=- 607 lines omitted -=- -=- -=-]

+}
+
+.syndicated {
+    color: #008000;
+}
+
+.expired {
+    color: Red;
+}
+
+
+div.listingBar {
+    background: #A1A1F1;
+    border-color: #7B7AC6;
+    border-style: solid;
+    border-width: 1px;
+    padding: 0em 1em;
+    text-align: right;
+    height: 1em;
+    clear: both;
+}
+
+div.listingBar span.previous {
+    text-align: left;
+    float: left;
+}
+
+div.listingBar span.next {
+    text-align: right;
+    float: right;
+}
+
+div.workspace {
+}
+
+div.workspace span.small {
+    float: left;
+    height: 30em;
+    width: 20em;
+    margin-right: 1em;
+    margin-bottom: 1em;
+}
+
+div.workspace span.big {
+    float: left;
+    height: 40em;
+    width: 40em;        
+    margin-right: 1em;
+    margin-bottom: 1em;
+}