[gen] Some actions were triggered via icons. That was not explicit enough for basic users. So now, every action is triggerd by a button that displays an icon+a text.

gen/ui/appy.css

@@ -64,10 +64,9 @@ img { border: 0; vertical-align: middle }
             background-color: #dbdde1; font-weight: bold }
 .navigate td { padding: 4px 9px }
 .login { margin: 3px; color: black }
+.button { border-width: 0 !important; color: #666666; height: 23px; width: 150px;
+          cursor:pointer; font-size: 90%; padding: 1px 0 0 10px }
 .buttons { margin-left: 4px }
-.fakeButton { border: 1px solid #D7DEE4; background-color: #fde8e0;
-              padding: 0px 8px 2px;
-              font: italic 92% "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif }
 .message { position: absolute; top: -40px; left: 150px; font-size: 90%;
            width: 600px; border: 1px #F0C36D solid; padding: 6px;
            background-color: #F9EDBE; text-align: center;
@@ -83,13 +82,14 @@ img { border: 0; vertical-align: middle }
 .portlet { width: 150px; border-right: 1px solid #5F7983;
            background-color: #ededed }
 .portletContent { margin: 4px 9px }
-.portletTitle { font-weight: bold; font-size: 110%; margin-bottom: 4px }
+.portletTitle { font-size: 110%; margin-bottom: 4px }
-.portletCurrent { font-weight: bold }
+.portletCurrent { font-weight: bold; color: grey }
 .portletSep { border-top: 1px solid #5F7983; margin-top: 2px }
 .portletPage { font-style: italic }
-.portletGroup { font-variant: small-caps; font-weight: bold; font-size: 105%;
+.portletGroup { font-variant: small-caps; font-weight: bold;
                 margin: 0.1em 0 0.3em ; border-bottom: 1px dashed grey }
 .portletSearch { font-size: 90%; font-style: italic }
+.inputSearch { height: 15px; width: 132px; margin: 3px 3px 2px 3px !important }
 .content { padding: 14px 14px 9px 15px; background-color: #f1f1f1 }
 .grey { display: none; position: absolute; left: 0px; top: 0px; z-index:2;
         background:grey; opacity:0.5; -moz-opacity:0.5; -khtml-opacity:0.5;

gen/ui/page.pt

@@ -168,14 +168,17 @@
         <tal:comment replace="nothing">Buttons for triggering transitions</tal:comment>
         <td tal:attributes="align dright" tal:repeat="transition transitions">
           <tal:comment replace="nothing">Real button</tal:comment>
-          <input type="button" tal:condition="transition/may_trigger"
+          <input type="button" class="button" tal:condition="transition/may_trigger"
-                 tal:attributes="value transition/title;
+                 tal:attributes="style string: background-image: url($appUrl/ui/buttonTransition.png);
-                                 onClick python: 'triggerTransition(\'%s\',\'%s\',\'%s\')' % (formId,transition['name'],transition['confirm'])"/>
+                                 title transition/title;
+                                 value python: tool.truncateValue(transition['title']);
+                                 onClick python: 'triggerTransition(\'%s\',\'%s\',\'%s\')' % (formId,transition['name'],transition['confirm'])">
+          
           <tal:comment replace="nothing">Fake button, explaining why the transition can't be triggered</tal:comment>
-          <div class="fakeButton" tal:condition="not: transition/may_trigger">
+          <input type="button" class="button" tal:condition="not: transition/may_trigger"
-            <acronym tal:content="transition/title"
+                 tal:attributes="style string: background-image: url($appUrl/ui/buttonFake.png);; cursor: help;
-                     tal:attributes="title transition/reason"></acronym>
+                                 value python: tool.truncateValue(transition['title']);
-          </div>
+                                 title python: '%s: %s' % (transition['title'], transition['reason'])"/>
         </td>
     </tr>
     </table>
@@ -265,27 +268,31 @@
   <tal:comment replace="nothing">Previous</tal:comment>
   <td tal:condition="python: previousPage and pageInfo['showPrevious']">
     <tal:button condition="isEdit">
-      <img style="cursor:pointer" onClick="submitAppyForm('previous')"
+     <input type="button" class="button" onClick="submitAppyForm('previous')"
-           tal:attributes="src string:$appUrl/ui/previous.png; title python: _('page_previous')"/>
+          tal:attributes="style string: background-image: url($appUrl/ui/buttonPrevious.png);
-      <input type="hidden" name="previousPage" tal:attributes="value previousPage"/>
+                          value python: _('page_previous')">
+     <input type="hidden" name="previousPage" tal:attributes="value previousPage"/>
     </tal:button>
     <tal:link condition="not: isEdit">
-      <a tal:attributes="href python: contextObj.getUrl(page=previousPage)">
+     <input type="button" class="button"
-        <img tal:attributes="src string:$appUrl/ui/previous.png; title python: _('page_previous')"/>
+            tal:attributes="style string: background-image: url($appUrl/ui/buttonPrevious.png);
-      </a>
+                            value python: _('page_previous');
+                            onclick python: 'window.location=\'%s\'' % contextObj.getUrl(page=previousPage)">
     </tal:link>
   </td>
 
   <tal:comment replace="nothing">Save</tal:comment>
   <td tal:condition="python: isEdit and pageInfo['showSave']">
-    <img style="cursor:pointer" onClick="submitAppyForm('save')"
+   <input type="button" class="button" onClick="submitAppyForm('save')"
-         tal:attributes="src string:$appUrl/ui/save.png; title python: _('object_save');"/>
+          tal:attributes="style string: background-image: url($appUrl/ui/buttonSave.png);
+                          value python: _('object_save')">
   </td>
 
   <tal:comment replace="nothing">Cancel</tal:comment>
   <td tal:condition="python: isEdit and pageInfo['showCancel']">
-    <img style="cursor:pointer" onClick="submitAppyForm('cancel')"
+   <input type="button" class="button" onClick="submitAppyForm('cancel')"
-         tal:attributes="src string:$appUrl/ui/cancel.png; title python: _('object_cancel')"/>
+          tal:attributes="style string: background-image: url($appUrl/ui/buttonCancel.png);
+                          value python: _('object_cancel')">
   </td>
 
   <tal:edit condition="not: isEdit">
@@ -293,11 +300,11 @@
                    editable python: pageInfo['showOnEdit'] and contextObj.mayEdit()">
 
     <tal:comment replace="nothing">Edit</tal:comment>
-    <a tal:condition="python: editable and not locked"
+    <input type="button" class="button" tal:condition="python: editable and not locked"
-       tal:attributes="href python: contextObj.getUrl(mode='edit', page=page)">
+           tal:attributes="style string: background-image: url($appUrl/ui/buttonEdit.png);
-     <img tal:attributes="src string: $appUrl/ui/editBig.png;
+                           value python: _('object_edit');
-                         title python: _('object_edit')"/>
+                           onclick python: 'window.location=\'%s\'' % contextObj.getUrl(mode='edit', page=page)">
-    </a>
+
     <tal:comment replace="nothing">Locked</tal:comment>
     <a tal:condition="python: editable and locked">
      <img style="cursor: help"
@@ -308,26 +315,19 @@
    </td>
   </tal:edit>
 
-  <tal:comment replace="nothing">Refresh</tal:comment>
-  <td tal:condition="contextObj/isDebug">
-    <a tal:attributes="href python: contextObj.getUrl(mode=layoutType, page=page, refresh='yes')">
-     <img title="Refresh" style="vertical-align:top"
-          tal:attributes="src string: $appUrl/ui/refresh.png"/>
-    </a>
-  </td>
-
   <tal:comment replace="nothing">Next</tal:comment>
   <td tal:condition="python: nextPage and pageInfo['showNext']">
     <tal:button condition="isEdit">
-      <img style="cursor:pointer" onClick="submitAppyForm('next')"
+     <input type="button" class="button" onClick="submitAppyForm('next')"
-           tal:attributes="src string:$appUrl/ui/next.png; title python: _('page_next')"/>
+          tal:attributes="style string: background-image: url($appUrl/ui/buttonNext.png);
-      <input type="hidden" name="nextPage" tal:attributes="value nextPage"/>
+                          value python: _('page_next')">
+     <input type="hidden" name="nextPage" tal:attributes="value nextPage"/>
     </tal:button>
     <tal:link condition="not: isEdit">
-      <a tal:attributes="href python: contextObj.getUrl(page=nextPage)">
+     <input type="button" class="button"
-        <img tal:attributes="src string:$appUrl/ui/next.png;
+            tal:attributes="style string: background-image: url($appUrl/ui/buttonNext.png);
-                             title python: _('page_next')"/>
+                            value python: _('page_next');
-      </a>
+                            onclick python: 'window.location=\'%s\'' % contextObj.getUrl(page=nextPage)">
     </tal:link>
   </td>
   <tal:comment replace="nothing">Workflow transitions</tal:comment>
@@ -335,6 +335,14 @@
       tal:condition="python: targetObj.showTransitions(layoutType)">
    <metal:transitions use-macro="app/ui/page/macros/transitions"/>
   </td>
+
+  <tal:comment replace="nothing">Refresh</tal:comment>
+  <td tal:condition="contextObj/isDebug">
+    <a tal:attributes="href python: contextObj.getUrl(mode=layoutType, page=page, refresh='yes')">
+     <img title="Refresh" style="vertical-align:top"
+          tal:attributes="src string: $appUrl/ui/refresh.png"/>
+    </a>
+  </td>
  </tr>
 </table>
 

gen/ui/portlet.pt

@@ -66,29 +66,28 @@
                           tal:condition="python: (nb != 1) or ((nb == 1) and phases)"></div>
 
   <div class="portletContent" tal:define="searchInfo python: tool.getGroupedSearches(rootClass)">
-   <tal:comment replace="nothing">Section title (link triggers the default search), with action icons</tal:comment>
+   <tal:comment replace="nothing">Section title (link triggers the default search)</tal:comment>
-   <a tal:define="queryParam python: searchInfo['default'] and searchInfo['default']['name'] or ''"
+   <div class="portletTitle">
-      tal:attributes="href python: '%s?className=%s&search=%s' % (queryUrl, rootClass, queryParam);
+    <a tal:define="queryParam python: searchInfo['default'] and searchInfo['default']['name'] or ''"
+       tal:attributes="href python: '%s?className=%s&search=%s' % (queryUrl, rootClass, queryParam);
                       class python: (not currentSearch and (currentClass==rootClass) and (currentPage=='query')) and 'portletCurrent' or ''"
-      tal:content="structure python: _(rootClass + '_plural')">
+       tal:content="structure python: _(rootClass + '_plural')">
-   </a>
+    </a>
-   <tal:icons define="addPermission python: '%s: Add %s' % (appName, rootClass);
+   </div>
-                      userMayAdd python: user.has_permission(addPermission, appFolder);
+   <tal:actions define="addPermission python: '%s: Add %s' % (appName, rootClass);
-                      createMeans python: tool.getCreateMeans(rootClass)">
+                        userMayAdd python: user.has_permission(addPermission, appFolder);
+                        createMeans python: tool.getCreateMeans(rootClass)">
     <tal:comment replace="nothing">Create a new object from a web form</tal:comment>
-    <a tal:condition="python: ('form' in createMeans) and userMayAdd"
+    <input type="button" class="button" tal:condition="python: userMayAdd and ('form' in createMeans)"
-       tal:attributes="href python: '%s/do?action=Create&className=%s' % (toolUrl, rootClass);
+           tal:attributes="style string: background-image: url($appUrl/ui/buttonAdd.png);
-                       title python: _('query_create')">
+                           value python: _('query_create');
-     <img tal:attributes="src string: $appUrl/ui/plus.png"/>
+                           onclick python: 'window.location=\'%s/do?action=Create&className=%s\'' % (toolUrl, rootClass)">
-    </a>
+    <tal:comment replace="nothing">Create object(s) by importing data</tal:comment>
-    <tal:comment replace="nothing">Create (a) new object(s) by importing data</tal:comment>
+    <input type="button" class="button" tal:condition="python: userMayAdd and ('import' in createMeans)"
-    <a tal:condition="python: ('import' in createMeans) and userMayAdd"
+           tal:attributes="style string: background-image: url($appUrl/ui/buttonImport.png);
-       tal:attributes="href python: '%s/ui/import?className=%s' % (toolUrl, rootClass);
+                           value python: _('query_import');
-                       title python: _('query_import')">
+                           onclick python: 'window.location=\'%s/ui/import?className=%s\'' % (toolUrl, rootClass)">
-     <img tal:attributes="src string: $appUrl/ui/import.png"/>
+   </tal:actions>
-    </a>
-   </tal:icons>
-   <br/>
 
    <tal:search condition="python: tool.advancedSearchEnabledFor(rootClass)">
     <tal:comment replace="nothing">Live search</tal:comment>
@@ -96,8 +95,8 @@
      <input type="hidden" name="action" value="SearchObjects"/>
      <input type="hidden" name="className" tal:attributes="value rootClass"/>
      <table cellpadding="0" cellspacing="0">
-      <tr valign="middle">
+      <tr valign="bottom">
-       <td style="padding-right: 3px"><input type="text" size="14" name="w_SearchableText"/></td>
+       <td><input type="text" size="14" name="w_SearchableText" class="inputSearch"/></td>
        <td><input type="image" style="cursor:pointer"
                   tal:attributes="src string: $appUrl/ui/search.gif;
                                   title python: _('search_button')"/></td>
@@ -106,8 +105,9 @@
     </form>
     <tal:comment replace="nothing">Advanced search</tal:comment>
     <div tal:define="highlighted python: (currentClass == rootClass) and (currentPage == 'search')"
-         tal:attributes="class python: highlighted and 'portletSearch portletCurrent' or 'portletSearch'">
+         tal:attributes="class python: highlighted and 'portletSearch portletCurrent' or 'portletSearch';
-     <a tal:define="text python: _('search_title')"
+                         align dright">
+     <a tal:define="text python: _('search_title')" style="font-size: 88%"
         tal:attributes="href python: '%s/ui/search?className=%s' % (toolUrl, rootClass); title text">
       <span tal:replace="text"/>...
      </a>

gen/ui/search.pt

@@ -44,7 +44,9 @@
 
   <tal:comment replace="nothing">Submit button</tal:comment>
   <p tal:attributes="align dright"><br/>
-    <input type="submit" tal:attributes="value python: _('search_button')"/>
+    <input type="submit" class="button"
+           tal:attributes="value python: _('search_button');
+                           style string: background-image: url($appUrl/ui/buttonSearch.png);"/>
   </p>
   </form>
  </metal:fill>

gen/ui/widgets/action.pt

@@ -8,13 +8,17 @@
     <input type="hidden" name="objectUid" tal:attributes="value contextObj/UID"/>
     <input type="hidden" name="fieldName" tal:attributes="value name"/>
     <tal:confirm condition="widget/confirm">
-    <input type="button"
+    <input type="button" class="button"
            tal:define="labelConfirm python: contextObj.translate(widget['labelId'] + '_confirm')"
-           tal:attributes="value label;
+           tal:attributes="value python: tool.truncateValue(label);
+                           title label;
+                           style string: background-image: url($appUrl/ui/buttonAction.png);
                            onClick python: 'askConfirm(\'form\', \'%s\', &quot;%s&quot;)' % (formId, labelConfirm)"/>
     </tal:confirm>
-    <input type="submit" name="do" tal:condition="not: widget/confirm"
+    <input type="submit" class="button" name="do" tal:condition="not: widget/confirm"
-           tal:attributes="value label"/>
+           tal:attributes="value python: tool.truncateValue(label);
+                           title label;
+                           style string: background-image: url($appUrl/ui/buttonAction.png);"/>
   </form>
 </metal:view>