Skip to content
Snippets Groups Projects
Commit f91d7d81 authored by Ivica Puljic's avatar Ivica Puljic Committed by Ivica Puljic
Browse files

Issue #3327991 by pivica: Basic support for comments and user compact view

parent d98c2135
No related branches found
No related tags found
No related merge requests found
Showing
with 277 additions and 0 deletions
......@@ -143,3 +143,15 @@ function bs_bootstrap_bs_update_8005($target_theme_name) {
]);
}
}
/**
* Add links.css to global css library.
*/
function bs_bootstrap_bs_update_8006($target_theme_name) {
$themes_info = _bs_base_drupal_theme_list_info();
if (isset($themes_info[$target_theme_name])) {
_bs_base_regexp_file($themes_info[$target_theme_name]->subpath . '/' . $target_theme_name . '.libraries.yml', [
'css/components/entity.css: {\s*}' => "css/components/entity.css: {}\n css/components/links.css: {}",
]);
}
}
......@@ -34,6 +34,8 @@ libraries-extend:
- bs_bootstrap/tabledrag
entity_browser/tabs:
- bs_bootstrap/entity-browser-tabs
comment/drupal.comment-by-viewer:
- bs_bootstrap/comment
libraries-override:
views/views.module: false
......
......@@ -10,6 +10,7 @@ global-styling:
css/components/field.css: {}
css/components/forms.css: {}
css/components/entity.css: {}
css/components/links.css: {}
css/components/navigation.css: {}
css/components/node.css: {}
css/components/pagination.css: {}
......@@ -20,6 +21,11 @@ global-styling:
css/theme/theme.css: {}
css/theme/print.css: { media: print }
comment:
css:
component:
css/components/comment.css: {}
entity-browser-tabs:
js:
js/entity-browser.tabs.js: {}
......
......@@ -46,6 +46,13 @@ function bs_bootstrap_theme_suggestions_links_alter(array &$suggestions, array $
}
}
/**
* Implements hook_theme_suggestions_HOOK_alter().
*/
function bs_bootstrap_theme_suggestions_user_alter(&$suggestions, $variables) {
$suggestions[] = 'user__' . $variables['elements']['#view_mode'];
}
/**
* Implements hook_form_FORM_ID_alter() for node_preview_form_select.
*/
......
.comment:not(:last-child) {
margin-bottom: 2rem;
}
.comment__meta {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
font-size: 0.875em;
}
.comment__title {
margin-top: 0;
margin-bottom: 0.5rem;
}
.comment + .indented {
margin-bottom: 2rem;
margin-left: 2rem;
}
ul.links.inline {
margin-left: 0;
padding-left: 0;
display: flex;
flex-wrap: wrap;
-moz-column-gap: 1rem;
column-gap: 1rem;
list-style: none;
font-size: 0.9rem;
}
@import "init";
@import "partials/comment";
@import "init";
@import "partials/links";
.comment {
&:not(:last-child) {
margin-bottom: $container-spacer-y;
}
&__meta {
display: flex;
gap: $spacer-y;
margin-bottom: $spacer-y;
font-size: $small-font-size;
}
&__title {
margin-top: 0;
margin-bottom: $spacer-y/2;
}
+ .indented {
margin-bottom: $container-spacer-y;
margin-left: $container-spacer-y;
}
}
ul.links {
&.inline {
margin-left: 0;
padding-left: 0;
display: flex;
flex-wrap: wrap;
column-gap: $spacer-x;
list-style: none;
font-size: $font-size-sm;
}
}
{#
/**
* @file
* Default theme implementation for comments.
*
* Available variables:
* - author: Comment author. Can be a link or plain text.
* - content: The content-related items for the comment display. Use
* {{ content }} to print them all, or print a subset such as
* {{ content.field_example }}. Use the following code to temporarily suppress
* the printing of a given child element:
* @code
* {{ content|without('field_example') }}
* @endcode
* - created: Formatted date and time for when the comment was created.
* Preprocess functions can reformat it by calling DateFormatter::format()
* with the desired parameters on the 'comment.created' variable.
* - changed: Formatted date and time for when the comment was last changed.
* Preprocess functions can reformat it by calling DateFormatter::format()
* with the desired parameters on the 'comment.changed' variable.
* - permalink: Comment permalink.
* - submitted: Submission information created from author and created
* during template_preprocess_comment().
* - user_picture: The comment author's profile picture.
* - status: Comment status. Possible values are:
* unpublished, published, or preview.
* - title: Comment title, linked to the comment.
* - attributes: HTML attributes for the containing element.
* The attributes.class may contain one or more of the following classes:
* - comment: The current template type; for instance, 'theming hook'.
* - by-anonymous: Comment by an unregistered user.
* - by-{entity-type}-author: Comment by the author of the parent entity,
* eg. by-node-author.
* - preview: When previewing a new or edited comment.
* The following applies only to viewers who are registered users:
* - unpublished: An unpublished comment visible only to administrators.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
* - content_attributes: List of classes for the styling of the comment content.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - threaded: A flag indicating whether the comments are threaded or not.
*
* These variables are provided to give context about the parent comment (if
* any):
* - parent_comment: Full parent comment entity (if any).
* - parent_author: Equivalent to author for the parent comment.
* - parent_created: Equivalent to created for the parent comment.
* - parent_changed: Equivalent to changed for the parent comment.
* - parent_title: Equivalent to title for the parent comment.
* - parent_permalink: Equivalent to permalink for the parent comment.
* - parent: A text string of parent comment submission information created from
* 'parent_author' and 'parent_created' during template_preprocess_comment().
* This information is presented to help screen readers follow lengthy
* discussion threads. You can hide this from sighted users using the class
* visually-hidden.
*
* These two variables are provided for context:
* - comment: Full comment object.
* - commented_entity: Entity the comments are attached to.
*
* @see template_preprocess_comment()
*
* @ingroup themeable
*/
#}
{%
set classes = [
'comment',
'js-comment',
]
%}
{% block comment %}
<article{{ attributes.addClass(classes) }}>
{% if user_picture -%}
<div class="comment__picture">
{{ user_picture }}
</div>
{%- endif %}
{% if title %}
{{ title_prefix }}
<h3{{ title_attributes.addClass('comment__title') }}>{{ title }}</h3>
{{ title_suffix }}
{% endif %}
<footer class="comment__meta">
{#
Hide the "new" indicator by default, let a piece of JavaScript ask the
server which comments are new for the user. Rendering the final "new"
indicator here would break the render cache.
#}
<mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></mark>
<div class="comment__submitted">{{ submitted }}</div>
{#
Indicate the semantic relationship between parent and child comments for
accessibility. The list is difficult to navigate in a screen reader
without this information.
#}
{% if parent %}
<p class="visually-hidden">{{ parent }}</p>
{% endif %}
{{ permalink }}
</footer>
<div{{ content_attributes.addClass('comment__content') }}>
{{ content }}
</div>
</article>
{% endblock %}
{% extends "@bs_base/field/field.html.twig" %}
{#
/**
* @file
* Default theme override for comment fields.
*
* Available variables:
* - attributes: HTML attributes for the containing element.
* - label_hidden: Whether to show the field label or not.
* - title_attributes: HTML attributes for the title.
* - label: The label for the field.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional title output populated by modules, intended to
* be displayed after the main title tag that appears in the template.
* - comments: List of comments rendered through comment.html.twig.
* - content_attributes: HTML attributes for the form title.
* - comment_form: The 'Add new comment' form.
* - comment_display_mode: Is the comments are threaded.
* - comment_type: The comment type bundle ID for the comment field.
* - entity_type: The entity type to which the field belongs.
* - field_name: The name of the field.
* - field_type: The type of the field.
* - label_display: The display settings for the label.
*
* @see template_preprocess_field()
* @see comment_preprocess_field()
*/
#}
{% block field %}
<section{{ attributes.addClass(classes) }}>
{% if comments and not label_hidden %}
{{ title_prefix }}
<h2{{ title_attributes }}>{{ label }}</h2>
{{ title_suffix }}
{% endif %}
{{ comments }}
{% if comment_form %}
<h2{{ content_attributes }}>{{ 'Add new comment'|t }}</h2>
{{ comment_form }}
{% endif %}
</section>
{% endblock %}
{#
/**
* @file
* Theme override to present 'compact' view display mode of user data.
*
* Available variables:
* - content: A list of content items. Use 'content' to print all content, or
* print a subset such as 'content.field_example'. Fields attached to a user
* such as 'user_picture' are available as 'content.user_picture'.
* - attributes: HTML attributes for the container element.
* - user: A Drupal User entity.
*
* @see template_preprocess_user()
*
* @ingroup themeable
*/
#}
{% if content -%}
<div{{ attributes }}>
{{- content -}}
</div>
{%- endif %}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment