Plone6 styles (#114)

* Adapt viewlet styles to Plone 6 * add button css vclasses * add plone.app.layout as dependency * wrap messages in container * zpretty --------- Co-authored-by: Philip Bauer <bauer@starzel.de>
plone · Feb 19, 2024 · f37417f · f37417f
1 parent 975b5d4
commit f37417f
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 70 deletions.
diff --git a/news/95.news b/news/95.news
@@ -0,0 +1 @@
+Adapt viewlet styles to Plone 6 [pbauer]
diff --git a/plone/app/iterate/browser/cancel.pt b/plone/app/iterate/browser/cancel.pt
@@ -36,14 +36,14 @@
 
             <div class="formControls">
 
-              <input class="destructive"
+              <input class="btn btn-danger"
                      name="form.button.Cancel"
                      type="submit"
                      value="Cancel checkout"
                      i18n:attributes="value"
               />
 
-              <input class="standalone"
+              <input class="btn btn-secondary"
                      name="form.button.Keep"
                      type="submit"
                      value="Keep checkout"

diff --git a/plone/app/iterate/browser/checkin.pt b/plone/app/iterate/browser/checkin.pt
@@ -57,14 +57,14 @@
               </div>
 
               <div class="formControls">
-                <input class="context"
+                <input class="btn btn-primary"
                        name="form.button.Checkin"
                        type="submit"
                        value="Check in"
                        i18n:attributes="value"
                 />
 
-                <input class="standalone"
+                <input class="btn btn-secondary"
                        name="form.button.Cancel"
                        type="submit"
                        value="Cancel"

diff --git a/plone/app/iterate/browser/checkout.pt b/plone/app/iterate/browser/checkout.pt
@@ -91,14 +91,14 @@
 
         <div class="formControls">
 
-          <input class="context"
+          <input class="btn btn-primary"
                  name="form.button.Checkout"
                  type="submit"
                  value="Check out"
                  i18n:attributes="value"
           />
 
-          <input class="standalone"
+          <input class="btn btn-secondary"
                  name="form.button.Cancel"
                  type="submit"
                  value="Cancel"

diff --git a/plone/app/iterate/browser/info.py b/plone/app/iterate/browser/info.py
@@ -4,6 +4,7 @@
 from plone.app.iterate.interfaces import ICheckinCheckoutPolicy
 from plone.app.iterate.interfaces import keys
 from plone.app.iterate.permissions import CheckoutPermission
+from plone.app.layout.viewlets.globalstatusmessage import MTYPES_DISPLAY
 from plone.memoize.instance import memoize
 from Products.CMFCore.permissions import ModifyPortalContent
 from Products.CMFCore.utils import getToolByName
@@ -96,6 +97,10 @@ def properties(self):
     def _getReference(self):
         raise NotImplementedError
 
+    def display_info_for_mtype(self, mtype):
+        """get info for display of an mtype"""
+        return MTYPES_DISPLAY.get(mtype, MTYPES_DISPLAY["info"])
+
 
 class BaselineInfoViewlet(BaseInfoViewlet):
     index = ViewPageTemplateFile("info_baseline.pt")

diff --git a/plone/app/iterate/browser/info_baseline.pt b/plone/app/iterate/browser/info_baseline.pt
@@ -1,40 +1,47 @@
-<div class="portalMessage warning"
-     tal:define="
-       working_copy view/working_copy;
-       isAnon context/@@plone_portal_state/anonymous;
-     "
-     tal:condition="python: not isAnon"
-     i18n:domain="plone"
->
+<div class="container">
+  <div class="portalMessage ${python:display_info['cssclass']}"
+       role="alert"
+       tal:define="
+         working_copy view/working_copy;
+         isAnon context/@@plone_portal_state/anonymous;
+         display_info python:view.display_info_for_mtype('warning');
+         icons nocall: context/@@iconresolver;
+       "
+       tal:condition="python: not isAnon"
+       i18n:domain="plone"
+  >
+
+    <tal:icon tal:replace="structure python:icons.tag(display_info['icon'], tag_alt=display_info['msg'], tag_class='statusmessage-icon mb-1 me-2')" />
 
-  <strong i18n:translate="">Warning</strong>
-  <tal:block i18n:translate="working_copy_info">
+    <strong>${python:display_info['msg']}</strong>
+    <tal:block i18n:translate="working_copy_info">
         This item is being edited by
-    <a tal:content="view/creator_name"
-       tal:omit-tag="not: view/creator_url"
-       tal:attributes="
-         href view/creator_url;
-       "
-       i18n:name="creator"
-    >john smith</a>
+      <a tal:content="view/creator_name"
+         tal:omit-tag="not: view/creator_url"
+         tal:attributes="
+           href view/creator_url;
+         "
+         i18n:name="creator"
+      >john smith</a>
         in
-    <a tal:attributes="
-         href working_copy/@@plone_context_state/view_url;
-         title working_copy/Description;
-       "
-       i18n:name="working_copy"
-       i18n:translate="label_working_copy"
-    >a working copy</a>
+      <a tal:attributes="
+           href working_copy/@@plone_context_state/view_url;
+           title working_copy/Description;
+         "
+         i18n:name="working_copy"
+         i18n:translate="label_working_copy"
+      >a working copy</a>
         created on
-    <span tal:content="view/created"
-          i18n:name="created"
-    ></span>.
+      <span tal:content="view/created"
+            i18n:name="created"
+      ></span>.
 
-  </tal:block>
+    </tal:block>
 
-  (<a tal:attributes="
-       href string:${context/absolute_url}/@@iterate_diff;
-     "
-     i18n:translate="label_view_changes"
-  >View changes</a>)
+    (<a tal:attributes="
+         href string:${context/absolute_url}/@@iterate_diff;
+       "
+       i18n:translate="label_view_changes"
+    >View changes</a>)
+  </div>
 </div>
diff --git a/plone/app/iterate/browser/info_checkout.pt b/plone/app/iterate/browser/info_checkout.pt
@@ -1,40 +1,46 @@
-<div class="portalMessage info"
-     tal:define="
-       baseline view/baseline;
-     "
-     i18n:domain="plone"
->
+<div class="container">
+  <div class="portalMessage ${python:display_info['cssclass']}"
+       tal:define="
+         baseline view/baseline;
+         display_info python:view.display_info_for_mtype('warning');
+         icons nocall: context/@@iconresolver;
+       "
+       i18n:domain="plone"
+  >
+
+    <tal:icon tal:replace="structure python:icons.tag(display_info['icon'], tag_alt=display_info['msg'], tag_class='statusmessage-icon mb-1 me-2')" />
 
-  <strong i18n:translate="">Warning</strong>
-  <tal:block i18n:translate="checkout_info">
+    <strong>${python:display_info['msg']}</strong>
+    <tal:block i18n:translate="checkout_info">
 
         This is a working copy of
-    <a tal:content="baseline/Title"
-       tal:attributes="
-         href baseline/@@plone_context_state/view_url;
-         title baseline/Description;
-       "
-       i18n:name="baseline_title"
-    ></a>, made by
+      <a tal:content="baseline/Title"
+         tal:attributes="
+           href baseline/@@plone_context_state/view_url;
+           title baseline/Description;
+         "
+         i18n:name="baseline_title"
+      ></a>, made by
 
-    <a tal:content="view/creator_name"
-       tal:omit-tag="not: view/creator_url"
-       tal:attributes="
-         href view/creator_url;
-       "
-       i18n:name="creator"
-    >john smith</a>
+      <a tal:content="view/creator_name"
+         tal:omit-tag="not: view/creator_url"
+         tal:attributes="
+           href view/creator_url;
+         "
+         i18n:name="creator"
+      >john smith</a>
 
         on
 
-    <span tal:content="view/created"
-          i18n:name="created"
-    ></span>.
-  </tal:block>
+      <span tal:content="view/created"
+            i18n:name="created"
+      ></span>.
+    </tal:block>
 
-  (<a tal:attributes="
-       href string:${context/absolute_url}/@@iterate_diff;
-     "
-     i18n:translate="view_changes"
-  >View changes</a>)
+    (<a tal:attributes="
+         href string:${context/absolute_url}/@@iterate_diff;
+       "
+       i18n:translate="view_changes"
+    >View changes</a>)
+  </div>
 </div>
diff --git a/setup.py b/setup.py
@@ -63,6 +63,7 @@
         "zope.schema",
         "zope.viewlet",
         "persistent",
+        "plone.app.layout",
         "plone.base",
         "plone.dexterity",
         "plone.registry",