Merge pull request #176 from plone/issue_169_bootstrap_5

Update Markup
This commit is contained in:
agitator 2021-02-16 10:31:42 +01:00 committed by GitHub
commit 8e614828e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 153 additions and 154 deletions

2
news/169.feature Normal file
View File

@ -0,0 +1,2 @@
Refactor templates and styling for comments and controlpanel.
[santonelli]

View File

@ -14,10 +14,9 @@
tal:condition="python:isDiscussionAllowed or has_replies" tal:condition="python:isDiscussionAllowed or has_replies"
i18n:domain="plone"> i18n:domain="plone">
<div class="reply" <div class="reply" tal:condition="python:isAnon and not isAnonymousDiscussionAllowed">
tal:condition="python:isAnon and not isAnonymousDiscussionAllowed">
<form tal:attributes="action view/login_action"> <form tal:attributes="action view/login_action">
<button class="standalone loginbutton mb-3" <button class="btn btn-primary mb-3"
type="submit" type="submit"
value="Log in to add comments" value="Log in to add comments"
i18n:attributes="value label_login_to_add_comments;" i18n:attributes="value label_login_to_add_comments;"
@ -26,9 +25,7 @@
</form> </form>
</div> </div>
<div class="discussion" <div class="discussion" tal:condition="has_replies">
tal:attributes="class python: showCommenterImage and 'discussion showCommenterImage card' or 'discussion card';"
tal:condition="has_replies">
<tal:getreplies repeat="reply_dict replies"> <tal:getreplies repeat="reply_dict replies">
<div class="comment" <div class="comment"
@ -43,142 +40,152 @@
canEdit python:view.can_edit(reply); canEdit python:view.can_edit(reply);
canDelete python:view.can_delete(reply); canDelete python:view.can_delete(reply);
colorclass python:lambda x: 'state-private' if x=='rejected' else ('state-internal' if x=='spam' else 'state-'+x);" colorclass python:lambda x: 'state-private' if x=='rejected' else ('state-internal' if x=='spam' else 'state-'+x);"
tal:attributes="class python:'comment replyTreeLevel{depth} {state}'.format(depth= depth, state=colorclass(review_state)); tal:attributes="class python:'comment level-{depth} {state}'.format(depth= depth, state=colorclass(review_state));
id comment_id" id comment_id"
tal:condition="python:canReview or review_state == 'published'"> tal:condition="python:canReview or review_state == 'published'">
<div class="card-header"> <div class="d-flex flex-row align-items-center mb-3">
<div class="commentImage" tal:condition="showCommenterImage">
<a href="" tal:condition="has_author_link" <!-- commenter image -->
tal:attributes="href author_home_url"> <div class="comment-image me-3" tal:condition="showCommenterImage">
<img src="defaultUser.png" <a href="" tal:condition="has_author_link" tal:attributes="href author_home_url">
alt="" <img src="defaultUser.png" alt="" tal:attributes="src portrait_url; alt reply/author_name" />
class="defaultuserimg"
height="32"
tal:attributes="src portrait_url;
alt reply/author_name" />
</a> </a>
<img src="defaultUser.png" <img src="defaultUser.png" alt="" tal:condition="not: has_author_link" tal:attributes="src portrait_url; alt reply/author_name" />
alt=""
class="defaultuserimg"
height="32"
tal:condition="not: has_author_link"
tal:attributes="src portrait_url;
alt reply/author_name" />
</div> </div>
<div class="documentByLine"> <!-- commenter name and date -->
<tal:name> <div class="comment-author">
<a href=""
tal:condition="has_author_link" <a href="" tal:condition="has_author_link" tal:attributes="href author_home_url">
tal:content="reply/author_name" ${reply/author_name}
tal:attributes="href author_home_url"> </a>
Poster Name
</a> <span tal:condition="not: has_author_link">
<span tal:condition="not: has_author_link" ${reply/author_name}
tal:replace="reply/author_name" /> </span>
<span tal:condition="not: reply/author_name"
i18n:translate="label_anonymous">Anonymous</span> <span tal:condition="not: reply/author_name" i18n:translate="label_anonymous">Anonymous</span>
</tal:name>
<tal:posted i18n:translate="label_says">says:</tal:posted> <br/>
<div class="commentDate"
tal:content="python:view.format_time(reply.modification_date)"> <small class="text-muted" tal:content="python:view.format_time(reply.modification_date)">
8/23/2001 12:40:44 PM 8/23/2001 12:40:44 PM
</div> </small>
</div> </div>
</div> </div>
<div class="card-body">
<div class="commentBody">
<span tal:replace="structure reply/getText" />
<div class="commentActions row row-cols-lg-auto g-3 align-items-center">
<form name="delete" <!-- comment body -->
<div class="comment-body">
<span tal:replace="structure reply/getText" />
<!-- comment actions -->
<div class="d-flex flex-row justify-content-end mb-3">
<div class="comment-actions actions-edit" tal:condition="python:isEditCommentAllowed and canEdit">
<!-- edit -->
<a class="pat-plone-modal context comment-action action-edit btn btn-primary btn-sm"
tal:condition="auth_token"
tal:attributes="href string:${reply/absolute_url}/@@edit-comment?_authenticator=${auth_token}"
i18n:translate="Edit">Edit</a>
<form name="edit"
action=""
method="get"
class="comment-action action-edit"
tal:condition="not: auth_token"
tal:attributes="action string:${reply/absolute_url}/@@edit-comment;
id string:edit-${comment_id}">
<button name="form.button.EditComment"
class="context btn btn-primary btn-sm"
type="submit"
value="Edit"
i18n:attributes="value label_edit;"
i18n:translate="label_edit"
>Edit</button>
</form>
</div>
<div class="comment-actions actions-delete" tal:condition="python:canDelete">
<!-- delete own comment -->
<form name="delete"
action="" action=""
method="post" method="post"
class="commentactionsform" class="comment-action action-delete"
tal:condition="python:not canDelete and isDeleteOwnCommentAllowed and view.could_delete_own(reply)" tal:condition="python:not canDelete and isDeleteOwnCommentAllowed and view.could_delete_own(reply)"
tal:attributes="action string:${reply/absolute_url}/@@delete-own-comment; tal:attributes="action string:${reply/absolute_url}/@@delete-own-comment;
style python:view.can_delete_own(reply) and 'display: inline' or 'display: none'; style python:view.can_delete_own(reply) and 'display: inline' or 'display: none';
id string:delete-${comment_id}"> id string:delete-${comment_id}">
<button name="form.button.DeleteComment" <button name="form.button.DeleteComment"
class="destructive btn btn-danger" class="destructive btn btn-danger btn-sm"
type="submit" type="submit"
value="Delete" value="Delete"
i18n:attributes="value label_delete;" i18n:attributes="value label_delete;"
i18n:translate="label_delete" i18n:translate="label_delete"
>Delete</button> >Delete</button>
</form> </form>
<form name="delete"
<!-- delete -->
<form name="delete"
action="" action=""
method="post" method="post"
class="commentactionsform" class="comment-action action-delete"
tal:condition="python:canDelete" tal:condition="python:canDelete"
tal:attributes="action string:${reply/absolute_url}/@@moderate-delete-comment; tal:attributes="action string:${reply/absolute_url}/@@moderate-delete-comment;
id string:delete-${comment_id}"> id string:delete-${comment_id}">
<button name="form.button.DeleteComment" <button name="form.button.DeleteComment"
class="destructive btn btn-danger" class="destructive btn btn-danger btn-sm"
type="submit" type="submit"
value="Delete" value="Delete"
i18n:attributes="value label_delete;" i18n:attributes="value label_delete;"
i18n:translate="label_delete" i18n:translate="label_delete"
>Delete</button> >Delete</button>
</form>
<tal:edit tal:condition="python:isEditCommentAllowed and canEdit">
<!-- plone 5 will have auth_token available
so we'll use modal pattern -->
<a class="pat-plone-modal context commentactionsform btn btn-primary"
tal:condition="auth_token"
tal:attributes="href string:${reply/absolute_url}/@@edit-comment?_authenticator=${auth_token}"
i18n:translate="Edit">Edit</a>
<form name="edit"
action=""
method="get"
class="commentactionsform"
tal:condition="not: auth_token"
tal:attributes="action string:${reply/absolute_url}/@@edit-comment;
id string:edit-${comment_id}">
<button name="form.button.EditComment"
class="context btn btn-primary"
type="submit"
value="Edit"
i18n:attributes="value label_edit;"
i18n:translate="label_edit"
>Edit</button>
</form> </form>
</tal:edit>
</div>
<div class="comment-actions actions-workflow d-flex flex-row" tal:condition="reply_dict/actions|nothing">
<!-- Workflow actions (e.g. 'publish') -->
<form name="" <form name=""
action="" action=""
method="get" method="get"
class="commentactionsform" class="comment-action action-${action/id}"
tal:condition="canReview" tal:condition="canReview"
tal:repeat="action reply_dict/actions|nothing" tal:repeat="action reply_dict/actions|nothing"
tal:attributes="action string:${reply/absolute_url}/@@transmit-comment; tal:attributes="action string:${reply/absolute_url}/@@transmit-comment;
name action/id; name action/id;
id string:${action/id}-${comment_id}"> id string:${action/id}-${comment_id};
<input type="hidden" name="workflow_action" tal:attributes="value action/id" /> ">
<button name="form.button.TransmitComment" <input type="hidden" name="workflow_action" tal:attributes="value action/id" />
class="context btn btn-primary" <button name="form.button.TransmitComment"
type="submit" class="context btn btn-primary btn-sm"
tal:attributes="value action/title" type="submit"
tal:content="action/title" i18n:translate=""
i18n:attributes="value" >${action/title}</button>
></button> </form>
</form>
</div> </div>
</div>
<!-- end comment actions -->
</div>
<button class="context reply-to-comment-button hide allowMultiSubmit btn btn-primary"
tal:condition="python:isDiscussionAllowed and (isAnon and isAnonymousDiscussionAllowed or userHasReplyPermission)"
i18n:translate="label_reply">
Reply
</button>
</div> </div>
<button class="context reply-to-comment-button hide allowMultiSubmit btn btn-primary btn-sm"
tal:condition="python:isDiscussionAllowed and (isAnon and isAnonymousDiscussionAllowed or userHasReplyPermission)"
i18n:translate="label_reply">
Reply
</button>
</div> </div>
</tal:getreplies> </tal:getreplies>
@ -191,8 +198,7 @@
</div> </div>
<div class="reply" <div class="reply" tal:condition="python:has_replies and (isAnon and not isAnonymousDiscussionAllowed)">
tal:condition="python:has_replies and (isAnon and not isAnonymousDiscussionAllowed)">
<form tal:attributes="action view/login_action" class="mb-3"> <form tal:attributes="action view/login_action" class="mb-3">
<button class="standalone loginbutton btn btn-primary" <button class="standalone loginbutton btn btn-primary"
type="submit" type="submit"
@ -203,11 +209,12 @@
</form> </form>
</div> </div>
<div id="commenting" class="reply" tal:condition="python:isDiscussionAllowed and (isAnon and isAnonymousDiscussionAllowed or userHasReplyPermission)"> <div id="commenting" class="reply border p-3" tal:condition="python:isDiscussionAllowed and (isAnon and isAnonymousDiscussionAllowed or userHasReplyPermission)">
<fieldset> <fieldset>
<legend i18n:translate="label_add_comment">Add comment</legend> <legend i18n:translate="label_add_comment">Add comment</legend>
<p tal:content="view/comment_transform_message"> <p tal:content="view/comment_transform_message">
You can add a comment by filling out the form below. Plain text You can add a comment by filling out the form below. Plain text
formatting. formatting.

View File

@ -6,16 +6,12 @@
metal:use-macro="here/prefs_main_template/macros/master" metal:use-macro="here/prefs_main_template/macros/master"
i18n:domain="plone"> i18n:domain="plone">
<body> <body>
<article id="content"
tal:attributes="class view/settings"
metal:fill-slot="prefs_configlet_main">
<div class="portalMessage warning" <metal:main metal:fill-slot="prefs_configlet_main" i18n:domain="plone">
role="status"
tal:condition="view/mailhost_warning"> <div class="statusmessage statusmessage-warning alert alert-warning" role="alert" tal:condition="view/mailhost_warning">
<strong i18n:translate=""> <tal:icon tal:replace="structure python:icons.tag('plone-statusmessage-warning', tag_alt='Warning', tag_class='statusmessage-icon mb-1 me-2')" />
Warning <strong i18n:translate="">Warning</strong>
</strong>
<span tal:omit-tag="" i18n:translate="text_no_mailhost_configured"> <span tal:omit-tag="" i18n:translate="text_no_mailhost_configured">
You have not configured a mail host or a site 'From' You have not configured a mail host or a site 'From'
address, various features including contact forms, email address, various features including contact forms, email
@ -30,12 +26,9 @@
</span> </span>
</div> </div>
<div class="portalMessage warning" <div class="statusmessage statusmessage-warning alert alert-warning" role="alert" tal:condition="view/custom_comment_workflow_warning">
role="status" <tal:icon tal:replace="structure python:icons.tag('plone-statusmessage-warning', tag_alt='Warning', tag_class='statusmessage-icon mb-1 me-2')" />
tal:condition="view/custom_comment_workflow_warning"> <strong i18n:translate="">Warning</strong>
<strong i18n:translate="">
Warning
</strong>
<span tal:omit-tag="" i18n:translate="text_custom_comment_workflow"> <span tal:omit-tag="" i18n:translate="text_custom_comment_workflow">
You have configured a custom workflow for the 'Discussion Item' You have configured a custom workflow for the 'Discussion Item'
content type. You can enable/disable the comment moderation content type. You can enable/disable the comment moderation
@ -55,18 +48,20 @@
Portal status message Portal status message
</div> </div>
<h1 class="documentFirstHeading" tal:content="view/label">View Title</h1> <header>
<h1 class="documentFirstHeading" tal:content="view/label">View Title</h1>
<p class="lead" tal:content="view/description">Description</p>
</header>
<div id="content-core"> <div id="content-core" tal:attributes="class view/settings">
<div id="layout-contents"> <span tal:replace="structure view/contents" />
<span tal:replace="structure view/contents" />
</div>
</div> </div>
<script type="text/javascript" <script type="text/javascript"
tal:attributes="src string:${portal_url}/++plone++plone.app.discussion.javascripts/controlpanel.js"> tal:attributes="src string:${portal_url}/++plone++plone.app.discussion.javascripts/controlpanel.js">
</script> </script>
</article> </metal:main>
</body> </body>
</html> </html>

View File

@ -41,9 +41,9 @@ require([ // jshint ignore:line
/* Update settings */ /* Update settings */
$.updateSettings = function () { $.updateSettings = function () {
var globally_enabled = $('#content').hasClass('globally_enabled'); var globally_enabled = $('#content-core').hasClass('globally_enabled');
var moderation_custom = $('#content').hasClass('moderation_custom'); var moderation_custom = $('#content-core').hasClass('moderation_custom');
var invalid_mail_setup = $('#content').hasClass('invalid_mail_setup'); var invalid_mail_setup = $('#content-core').hasClass('invalid_mail_setup');
/* If commenting is globally disabled, disable all settings. */ /* If commenting is globally disabled, disable all settings. */
if (globally_enabled === true) { if (globally_enabled === true) {
@ -115,13 +115,13 @@ require([ // jshint ignore:line
// Update settings on page load // Update settings on page load
$.updateSettings(); $.updateSettings();
// Set #content class and update settings afterwards // Set #content-core class and update settings afterwards
$('#form-widgets-globally_enabled-0').on('change', function(){ $('#form-widgets-globally_enabled-0').on('change', function(){
if (this.checked) { if (this.checked) {
$('#content').addClass('globally_enabled'); $('#content-core').addClass('globally_enabled');
} }
else { else {
$('#content').removeClass('globally_enabled'); $('#content-core').removeClass('globally_enabled');
} }
$.updateSettings(); $.updateSettings();
}); });

View File

@ -33,23 +33,18 @@
} }
</style> </style>
<h1 class="documentFirstHeading" i18n:translate="heading_moderate_comments"> <h1 i18n:translate="heading_moderate_comments">
Moderate comments Moderate comments
</h1> </h1>
<div class="portalMessage warning" <p class="lead" i18n:translate="message_moderation_disabled">
role="status" Moderation workflow is disabled. You have to
tal:condition="not: moderation_enabled"> <a i18n:name="enable_comment_workflow"
<strong i18n:translate="">Warning</strong> i18n:translate="message_enable_comment_workflow" href=""
<span tal:omit-tag="" i18n:translate="message_moderation_disabled"> tal:attributes="href string:${context/portal_url}/@@content-controlpanel?type_id=Discussion Item">
Moderation workflow is disabled. You have to enable the 'Comment Review Workflow' for the Comment content
<a i18n:name="enable_comment_workflow" type</a> before you can moderate comments here.
i18n:translate="message_enable_comment_workflow" href="" </p>
tal:attributes="href string:${context/portal_url}/@@content-controlpanel?type_id=Discussion Item">
enable the 'Comment Review Workflow' for the Comment content
type</a> before you can moderate comments here.
</span>
</div>
<form class="mb-3" <form class="mb-3"
method="post" method="post"