Author: jmorliaguet
Date: Fri Jun  9 18:51:56 2006
New Revision: 3378

Modified:
   cpsskins/branches/paris-sprint-2006/ui/screens/common/authoring.css
   cpsskins/branches/paris-sprint-2006/ui/screens/common/portlet_factory.pt
   cpsskins/branches/paris-sprint-2006/ui/screens/editor.pt

Log:

- new portlet factory design: portlets are listed in a left-side panel
  with their title, description, icon



Modified: cpsskins/branches/paris-sprint-2006/ui/screens/common/authoring.css
==============================================================================
--- cpsskins/branches/paris-sprint-2006/ui/screens/common/authoring.css 
(original)
+++ cpsskins/branches/paris-sprint-2006/ui/screens/common/authoring.css Fri Jun 
 9 18:51:56 2006
@@ -40,30 +40,38 @@
 }
 
 .toolbox {
-  position: fixed;
-  bottom: 6px;
-  margin-left: auto;
-  margin-right: auto;
+  vertical-align: top;
+  width: 30%;
   cursor: default;
-  background-color: #f6f6f6;
   border-width: 1px;
-  border-style: solid;
-  border-color: #999 #000 #000 #999;
-  z-index: 10;
+  border-style: none solid none none;
+  border-color: #999;
+  padding: 3px;
 }
 
-.toolbox td {
-  background-color: #f6f6f6;
-  padding: 1px;
+.factory {
+  padding: 3px;
 }
 
-.toolbox td:hover {
+.factory:hover {
   background-color: #fc6; 
 }
 
-.toolbox img {
+.factory img.icon {
   border: 0;
-  margin: 3px 1px 0px 1px;
+  width: 16px;
+  height: 16px;
+  float:left;
+  padding-right: 8px
+}
+
+.factory .title {
+  font-weight: bold;
+  font-size: 90%;
+}
+
+.factory .description {
+  font-style: italic
 }
 
 @media screen {

Modified: 
cpsskins/branches/paris-sprint-2006/ui/screens/common/portlet_factory.pt
==============================================================================
--- cpsskins/branches/paris-sprint-2006/ui/screens/common/portlet_factory.pt    
(original)
+++ cpsskins/branches/paris-sprint-2006/ui/screens/common/portlet_factory.pt    
Fri Jun  9 18:51:56 2006
@@ -1,15 +1,15 @@
-<table class="toolbox" cellpadding="2" cellspacing="1"
-       tal:define="portlets context/@@view_get_menu/cpsskins_add_portlet"
-       tal:condition="portlets">
-  <tr>
-    <tal:block repeat="portlet portlets">
-      <td class="factory"
-          tal:define="title portlet/title"
-          tal:attributes="type_name portlet/action">
-        <img width="16" height="16"
-             i18n:attributes="title"
-             tal:attributes="title title;
-             src string:++resource++${portlet/icon}" /></td>
-    </tal:block>
-  </tr>
-</table>
+<tal:block define="portlets context/@@view_get_menu/cpsskins_add_portlet"
+           condition="portlets">
+  <tal:block repeat="portlet portlets">
+    <div class="factory"
+      tal:define="title portlet/title"
+      tal:attributes="type_name portlet/action">
+      <img class="icon" i18n:attributes="title"
+           tal:attributes="title title;
+           src string:++resource++${portlet/icon}" />
+      <span class="title" tal:content="title" /> &mdash;
+      <span class="description" tal:content="portlet/description" />
+      <div style="clear:both"></div>
+    </div>
+  </tal:block>
+</tal:block>

Modified: cpsskins/branches/paris-sprint-2006/ui/screens/editor.pt
==============================================================================
--- cpsskins/branches/paris-sprint-2006/ui/screens/editor.pt    (original)
+++ cpsskins/branches/paris-sprint-2006/ui/screens/editor.pt    Fri Jun  9 
18:51:56 2006
@@ -21,7 +21,7 @@
     <ins class="view" tal:content="python: view('stylesheet')" />
   </head>
 
-  <body style="overflow-x: hidden">
+  <body>
     <div class="floatingHeader">
       <ins class="model" tal:content="python: model('action-pad')" />
       <ins class="view" tal:content="python: view('action-pad')" />
@@ -51,37 +51,44 @@
       <ins class="model" tal:content="python: model('page-mode-selector')" />
       <ins class="view" tal:content="python: view('page-mode-selector')" />
       <ins class="controller"
-           tal:content="python: controller('page-mode-perspectives')" />
-
-      <!-- rendered pages -->
-      <div id="canvasArea">
-        <ins class="model" tal:content="python: model('page-designer')" />
-        <ins class="view" tal:content="python: view('page-designer')" />
-        <ins class="model" tal:content="python: model('content-author')" />
-        <ins class="view" tal:content="python: view('content-author')" />
-        <ins class="controller" tal:content="python: 
controller('element-mover')" />
-      </div>
+       tal:content="python: controller('page-mode-perspectives')" />
 
+      <table style="width:100%">
+        <tr>
+          <!-- left panel -->
+          <td class="toolbox">
+            <ins class="model"
+             tal:content="python: model('portlet-factory')" />
+            <ins class="view"
+             tal:content="python: view('portlet-factory')" />
+            <ins class="controller"
+             tal:content="python: controller('portlet-factory')" />
+          </td>
+          <!-- rendered pages -->
+          <td id="canvasArea" valign="top">
+            <ins class="model" tal:content="python: model('page-designer')" />
+            <ins class="view" tal:content="python: view('page-designer')" />
+            <ins class="model" tal:content="python: model('content-author')" />
+            <ins class="view" tal:content="python: view('content-author')" />
+            <ins class="controller"
+             tal:content="python: controller('element-mover')" />
+          </td>
+        </tr>
+      </table>
       <!-- Contextual menu -->
       <ins class="view" tal:content="python: view('context-menu')" />
-      <ins class="controller" tal:content="python: controller('menu-actions')" 
/>
-      <ins class="controller" tal:content="python: 
controller('show-hide-menu')" />
+      <ins class="controller"
+       tal:content="python: controller('menu-actions')" />
+      <ins class="controller"
+       tal:content="python: controller('show-hide-menu')" />
     </div>
-
     <!-- Main area for other screens -->
     <div id="mainArea">
       <ins class="model" tal:content="python: model('site-manager')" />
       <ins class="view" tal:content="python: view('site-manager')" />
-
       <!-- element editor -->
       <ins class="model" tal:content="python: model('element-editor')" />
       <ins class="view" tal:content="python: view('element-editor')" />
     </div>
-
-    <!-- Toolbox -->
-    <ins class="model" tal:content="python: model('portlet-factory')" />
-    <ins class="view" tal:content="python: view('portlet-factory')" />
-    <ins class="controller" tal:content="python: 
controller('portlet-factory')" />
-
   </body>
 </html>
-- 
http://lists.nuxeo.com/mailman/listinfo/z3lab-checkins

Reply via email to