From 32d4b162d8292245c82a19be857d36929d01f5b6 Mon Sep 17 00:00:00 2001 From: "Dr. Frank Hoffmann" Date: Mon, 1 Oct 2018 16:14:38 +0200 Subject: [PATCH 1/5] added documentation about zope4 ZMI template updating --- docs/ZMI.rst | 154 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) diff --git a/docs/ZMI.rst b/docs/ZMI.rst index f9931792cd..141c1b5797 100644 --- a/docs/ZMI.rst +++ b/docs/ZMI.rst @@ -98,3 +98,157 @@ The properties can have one of the following types: The value of the property has to be one or more paths/URLs to CSS resp. JavaScript which will be included in the HTML of the ZMI. (Paths have to be resolvable by the browser aka not simple file system paths.) + + +Update your Zope2 ZMI template code ++++++++++++++++++++++++++++++++++++ + +The Zope4 ZMI uses some basic CSS class names of the bootstrap cCSS framework +and structuring concepts for page layout and forms. A ZMI page usually sequences +following templates nesting the page core: + +1. manage_page_header() +2. manage_tabs() +3. page core +4. manage_page_footer() + +The page core of any form or object listing ZMI template is starting by the +html element ``
``. +Ususally
is nesting a p-element for a help-text and the actual form. +To make specific form styling possible the form-element has following CSS names: + +1. zmi-$classname +2. zmi-edit|-add + + +In general specific functional ZMI elements are declared by a CSS class with a +prefixed ``zmi-`` whereas the basic layout is done by usual bootstrap classes +fowllowing the typical element nesting: +any form element has a bootstrap-like form-group structure containing a label +and an input field. Important: the width of the input field is defined by the +nesting div-container using the responsive grid classes ``col-sm-9 col-and md-10``. +The input field width is completed to 12 (=100%) by the preceeding label classes +``col-sm-3`` and ``col-md-2`` + +.. raw:: html +
+ +
+ +
+
+ +The following buttons are constructed as div element with the classname +``zmi-controls``; the bbuttons use systematically the bootstrap class pair +``btn btn-primary``. + +.. raw:: html +
+ +
+ + + +
+ +

+ You may edit the source for this document using the form below. You + may also upload the source for this document from a local file. Click + the browse button to select a local file to upload. +

+ +
+ + +
+ +
+ +
+
+
+ +
+ + +
+ + + + + + +
+ +
+ + +
+
+
+ + +
+
+ +
+
+
+ + +
+ + + +More details +------------ + +**Textarea:** +A textarea element for editing template or script code uses the JS library +``ace`` for syntax high-lighting and line numbering. Textarea elements which +are declared by the CSS class ``zmi-code`` are transformed into an ace-edditor +field. Moreover this element has an attribute ``data-contenttype`` which is +needed by ace-editor to determine the fitting syntax high-lighting. +ZPT-Example see: ``../Zope/src/Products/PageTemplates/www/ptEdit.zpt`` + +**File upload element:** +The file upload element has an own form container (classfied as ``zmi-upload``). +All subseqeunt elements are nested as 'input-group' containing a div classified as +``custom-file`` nestingthe actual input element. An inline JS fired on the +onchange-event beautifies the file name showed after selecting it. +ZPT-Example see: ../Zope/src/Products/PageTemplates/www/ptEdit.zpt + +**Hints and Warnings:** +Some input field show additional informations; these are added as element +```` directly following the referred inout field. (Both element are nested +by the width defining div-container). Possible text colors are declared by +typical bootstrap class names like ``text-warning``. + +**Icons:** +Zope4 object classes which are show in the ZMI have declared a global variable +``zmi_icon``; this string corresponds to an appropiate font icon-CSS class +supplied by the Fontawsome web font (https://fontawesome.com/icons) + +**Tables:** +Bootstraps requires an explictit CSS class ``table`` for any table; espcially +long item lists should get an additional CSS class ``table-sm`` and maybe another +class ``table-striped`` for a better readability. Finally it is recommended +to add a specific identifying class name. The table structure is + +**ZMI-classes:** +All basic stylings of the zmi-elements are defined in the CSS file, see: +``../Zope/src/zmi/styles/resources/zmi_base.css`` \ No newline at end of file From 655b33a32f0e9af9ac0b4d7538bd207c90953aa1 Mon Sep 17 00:00:00 2001 From: "Dr. Frank Hoffmann" Date: Mon, 1 Oct 2018 17:12:08 +0200 Subject: [PATCH 2/5] added fixes according to suggestions from conversation --- docs/ZMI.rst | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/ZMI.rst b/docs/ZMI.rst index 141c1b5797..34d8b3331f 100644 --- a/docs/ZMI.rst +++ b/docs/ZMI.rst @@ -226,7 +226,7 @@ needed by ace-editor to determine the fitting syntax high-lighting. ZPT-Example see: ``../Zope/src/Products/PageTemplates/www/ptEdit.zpt`` **File upload element:** -The file upload element has an own form container (classfied as ``zmi-upload``). +The file upload element has it's own form container (classfied as ``zmi-upload``). All subseqeunt elements are nested as 'input-group' containing a div classified as ``custom-file`` nestingthe actual input element. An inline JS fired on the onchange-event beautifies the file name showed after selecting it. @@ -239,7 +239,7 @@ by the width defining div-container). Possible text colors are declared by typical bootstrap class names like ``text-warning``. **Icons:** -Zope4 object classes which are show in the ZMI have declared a global variable +Zope4 object classes which are shown in the ZMI have declared a class variable ``zmi_icon``; this string corresponds to an appropiate font icon-CSS class supplied by the Fontawsome web font (https://fontawesome.com/icons) @@ -247,7 +247,8 @@ supplied by the Fontawsome web font (https://fontawesome.com/icons) Bootstraps requires an explictit CSS class ``table`` for any table; espcially long item lists should get an additional CSS class ``table-sm`` and maybe another class ``table-striped`` for a better readability. Finally it is recommended -to add a specific identifying class name. The table structure is +to add a specific identifying class name. The table structure is compliant to +bootstrap standard table (https://getbootstrap.com/docs/4.1/content/tables/). **ZMI-classes:** All basic stylings of the zmi-elements are defined in the CSS file, see: From e8a66084bacd12314b0053d249b08d9da5faf041 Mon Sep 17 00:00:00 2001 From: "Dr. Frank Hoffmann" Date: Mon, 1 Oct 2018 17:12:08 +0200 Subject: [PATCH 3/5] added fixes according to suggestions from conversation --- docs/ZMI.rst | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/docs/ZMI.rst b/docs/ZMI.rst index 141c1b5797..36c26c79f7 100644 --- a/docs/ZMI.rst +++ b/docs/ZMI.rst @@ -103,7 +103,7 @@ resolvable by the browser aka not simple file system paths.) Update your Zope2 ZMI template code +++++++++++++++++++++++++++++++++++ -The Zope4 ZMI uses some basic CSS class names of the bootstrap cCSS framework +The Zope4 ZMI uses some basic CSS class names of the bootstrap CSS framework and structuring concepts for page layout and forms. A ZMI page usually sequences following templates nesting the page core: @@ -125,17 +125,16 @@ In general specific functional ZMI elements are declared by a CSS class with a prefixed ``zmi-`` whereas the basic layout is done by usual bootstrap classes fowllowing the typical element nesting: any form element has a bootstrap-like form-group structure containing a label -and an input field. Important: the width of the input field is defined by the -nesting div-container using the responsive grid classes ``col-sm-9 col-and md-10``. -The input field width is completed to 12 (=100%) by the preceeding label classes -``col-sm-3`` and ``col-md-2`` +and an input field. Important: The width of the input field is defined by the +nesting div-container using the responsive grid classes ``col-sm-9 col md-10``. +With the classes ``col-sm-3 col-md-2`` for the label, a complete bootstrap row +of 12 is filled. .. raw:: html
- +
@@ -226,29 +225,30 @@ needed by ace-editor to determine the fitting syntax high-lighting. ZPT-Example see: ``../Zope/src/Products/PageTemplates/www/ptEdit.zpt`` **File upload element:** -The file upload element has an own form container (classfied as ``zmi-upload``). -All subseqeunt elements are nested as 'input-group' containing a div classified as +The file upload element has it's own form container (classfied as ``zmi-upload``). +All subsequent elements are nested as 'input-group' containing a div classified as ``custom-file`` nestingthe actual input element. An inline JS fired on the onchange-event beautifies the file name showed after selecting it. ZPT-Example see: ../Zope/src/Products/PageTemplates/www/ptEdit.zpt **Hints and Warnings:** -Some input field show additional informations; these are added as element +Some input fields show additional information; these are added as element ```` directly following the referred inout field. (Both element are nested by the width defining div-container). Possible text colors are declared by typical bootstrap class names like ``text-warning``. **Icons:** -Zope4 object classes which are show in the ZMI have declared a global variable +Zope4 object classes which are shown in the ZMI have declared a class variable ``zmi_icon``; this string corresponds to an appropiate font icon-CSS class supplied by the Fontawsome web font (https://fontawesome.com/icons) **Tables:** -Bootstraps requires an explictit CSS class ``table`` for any table; espcially +Bootstraps requires an explicit CSS class ``table`` for any table; especially long item lists should get an additional CSS class ``table-sm`` and maybe another class ``table-striped`` for a better readability. Finally it is recommended -to add a specific identifying class name. The table structure is +to add a specific id attribute like "zmi-db_info". The general table structure is +compliant to bootstrap standard table (https://getbootstrap.com/docs/4.1/content/tables/). **ZMI-classes:** -All basic stylings of the zmi-elements are defined in the CSS file, see: +All basic stylings of the zmi-elements are defined in the CSS file, see: ``../Zope/src/zmi/styles/resources/zmi_base.css`` \ No newline at end of file From b9fedd1511a9544639a761abcfa95d4471093dbf Mon Sep 17 00:00:00 2001 From: "Dr. Frank Hoffmann" Date: Tue, 2 Oct 2018 13:36:06 +0200 Subject: [PATCH 4/5] fixed rst --- docs/ZMI.rst | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/ZMI.rst b/docs/ZMI.rst index e8a07e2908..af2f6b9a8b 100644 --- a/docs/ZMI.rst +++ b/docs/ZMI.rst @@ -155,6 +155,7 @@ Zope4 ZMI (from: ``../Zope/src/OFS/dtml/documentEdit.dtml``) .. raw:: html + From b1798c4b7148c26d29787ae9264684be38fd3c8f Mon Sep 17 00:00:00 2001 From: "Dr. Frank Hoffmann" Date: Tue, 2 Oct 2018 13:55:38 +0200 Subject: [PATCH 5/5] added minor corrections --- docs/ZMI.rst | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/ZMI.rst b/docs/ZMI.rst index af2f6b9a8b..82ab41e13f 100644 --- a/docs/ZMI.rst +++ b/docs/ZMI.rst @@ -140,13 +140,13 @@ of 12 is filled. The following buttons are constructed as div element with the classname -``zmi-controls``; the bbuttons use systematically the bootstrap class pair +``zmi-controls``; the buttons use systematically the bootstrap class pair ``btn btn-primary``. .. raw:: html
-
The following example code shows a whole restructed DTML template rendering the Zope4 ZMI @@ -221,7 +221,7 @@ More details **Textarea:** A textarea element for editing template or script code uses the JS library ``ace`` for syntax high-lighting and line numbering. Textarea elements which -are declared by the CSS class ``zmi-code`` are transformed into an ace-edditor +are declared by the CSS class ``zmi-code`` are transformed into an ace-editor field. Moreover this element has an attribute ``data-contenttype`` which is needed by ace-editor to determine the fitting syntax high-lighting. ZPT-Example see: ``../Zope/src/Products/PageTemplates/www/ptEdit.zpt`` @@ -229,9 +229,9 @@ ZPT-Example see: ``../Zope/src/Products/PageTemplates/www/ptEdit.zpt`` **File upload element:** The file upload element has it's own form container (classfied as ``zmi-upload``). All subsequent elements are nested as 'input-group' containing a div classified as -``custom-file`` nestingthe actual input element. An inline JS fired on the +``custom-file`` nesting the actual input element. An inline JS fired on the onchange-event beautifies the file name showed after selecting it. -ZPT-Example see: ../Zope/src/Products/PageTemplates/www/ptEdit.zpt +ZPT-Example see: ``../Zope/src/Products/PageTemplates/www/ptEdit.zpt **Hints and Warnings:** Some input fields show additional information; these are added as element