From 82b768ff9b6650f21f5d699666cd40ba6a327073 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 20 Aug 2021 18:15:02 -0500 Subject: [PATCH 01/26] GH-83: Callout Component --- .../css/src/_imports/components/c-callout.css | 82 +++++++++++++++++++ taccsite_cms/static/site_cms/css/src/site.css | 1 + 2 files changed, 83 insertions(+) create mode 100644 taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css new file mode 100644 index 000000000..0ebb95b68 --- /dev/null +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css @@ -0,0 +1,82 @@ +/* +Callout + +Interrupt or end Sections with a "call to action". + +Markup: + + +Styleguide Components.Callout +*/ +@import url("_imports/tools/media-queries.css"); + + + + + +/* Layout */ + +.c-callout { + display: grid; + grid-template-areas: + 'figure title' + 'figure desc'; + + padding: 20px; +} +.c-callout__figure { grid-area: figure; } +.c-callout__title { grid-area: title; } +.c-callout__desc { grid-area: desc; } + +/* To hide figure on narrow window */ +@media only screen and (--narrow-and-below) { + .c-callout { column-gap: 0px; } + .c-callout__figure { display: none; } +} +@media only screen and (--narrow-and-above) { + .c-callout { column-gap: 40px; } +} + +/* To align image to exact center */ +.c-callout__figure { + place-self: center; + margin: 0; /* override Bootstrap and browser */ +} + +/* To force wrap before full width (to match design) */ +/* NOTE: 1200px window, design has 15px but this was 7px (wraps the same) */ +/* FAQ: Differ from design so narrow screen wrap limit is not noticeable */ +.c-callout__desc { padding-right: 1%; } + + + + + +/* Style */ + +.c-callout { + /* HELP: Should this color change if it is in a dark `o-section`? */ + /* SEE: https://confluence.tacc.utexas.edu/x/DyUFDg */ + background-color: var(--global-color-link-on-light--normal); +} +.c-callout__title { + padding-bottom: 12px; + margin-bottom: 12px; + border-bottom: 1px solid var(--global-color-primary--xx-light); + + font-size: var(--global-font-size--x-large); + font-weight: var(--medium); + color: var(--global-color-primary--xx-light); /* override `html-elements.css` */ +} +.c-callout__desc { + font-size: var(--global-font-size--large); + color: var(--global-color-primary--xx-light); +} diff --git a/taccsite_cms/static/site_cms/css/src/site.css b/taccsite_cms/static/site_cms/css/src/site.css index 03103175e..c9318e035 100644 --- a/taccsite_cms/static/site_cms/css/src/site.css +++ b/taccsite_cms/static/site_cms/css/src/site.css @@ -27,6 +27,7 @@ /* COMPONENTS */ /* GH-302: HELP: How should all of these become individually built files? */ /* GH-302: FAQ: Individually built stylesheets could be loaded explicitely. */ +@import url("_imports/components/c-callout.css"); @import url("_imports/components/c-data-list.css"); @import url("_imports/components/c-footer.css"); @import url("_imports/components/c-see-all-link.css"); From c2c96ecbed4a45df1be98337d214bbb5b84a2ae0 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 20 Aug 2021 18:15:25 -0500 Subject: [PATCH 02/26] GH-83: Temp: Callout Snippet (Frontera) --- taccsite_cms/templates/snippets/c-callout.html | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 taccsite_cms/templates/snippets/c-callout.html diff --git a/taccsite_cms/templates/snippets/c-callout.html b/taccsite_cms/templates/snippets/c-callout.html new file mode 100644 index 000000000..dec571a70 --- /dev/null +++ b/taccsite_cms/templates/snippets/c-callout.html @@ -0,0 +1,5 @@ + From c15d7667864ba8f879d35a4d6b02eb1d3ea52705 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 20 Aug 2021 18:53:49 -0500 Subject: [PATCH 03/26] GH-83: WIP: Callout Plugin --- .../contrib/taccsite_callout/__init__.py | 0 .../contrib/taccsite_callout/cms_plugins.py | 69 +++++++++++++++++++ .../migrations/0001_initial.py | 30 ++++++++ .../taccsite_callout/migrations/__init__.py | 0 .../contrib/taccsite_callout/models.py | 28 ++++++++ .../taccsite_callout/templates/callout.html | 13 ++++ .../templates/data_list_item.html | 17 +++++ .../templates/data_list_item_key.html | 9 +++ taccsite_cms/settings.py | 1 + .../css/src/_imports/components/c-callout.css | 17 +++-- 10 files changed, 179 insertions(+), 5 deletions(-) create mode 100644 taccsite_cms/contrib/taccsite_callout/__init__.py create mode 100644 taccsite_cms/contrib/taccsite_callout/cms_plugins.py create mode 100644 taccsite_cms/contrib/taccsite_callout/migrations/0001_initial.py create mode 100644 taccsite_cms/contrib/taccsite_callout/migrations/__init__.py create mode 100644 taccsite_cms/contrib/taccsite_callout/models.py create mode 100644 taccsite_cms/contrib/taccsite_callout/templates/callout.html create mode 100644 taccsite_cms/contrib/taccsite_callout/templates/data_list_item.html create mode 100644 taccsite_cms/contrib/taccsite_callout/templates/data_list_item_key.html diff --git a/taccsite_cms/contrib/taccsite_callout/__init__.py b/taccsite_cms/contrib/taccsite_callout/__init__.py new file mode 100644 index 000000000..e69de29bb diff --git a/taccsite_cms/contrib/taccsite_callout/cms_plugins.py b/taccsite_cms/contrib/taccsite_callout/cms_plugins.py new file mode 100644 index 000000000..4428e5683 --- /dev/null +++ b/taccsite_cms/contrib/taccsite_callout/cms_plugins.py @@ -0,0 +1,69 @@ +from cms.plugin_base import CMSPluginBase +from cms.plugin_pool import plugin_pool +from django.utils.translation import gettext_lazy as _ + +from taccsite_cms.contrib.constants import TEXT_FOR_NESTED_PLUGIN_CONTENT_SWAP + +from .models import TaccsiteCallout + +@plugin_pool.register_plugin +class TaccsiteCalloutPlugin(CMSPluginBase): + """ + Components > "Callout" Plugin + https://confluence.tacc.utexas.edu/x/EiIFDg + """ + module = 'TACC Site' + model = TaccsiteCallout + name = _('Callout') + render_template = 'callout.html' + + cache = True + text_enabled = False + allow_children = True + # GH-91: Enable this limitation + # parent_classes = [ + # 'SectionPlugin' + # ] + child_classes = [ + 'PicturePlugin', + 'Bootstrap4PicturePlugin' + ] + max_children = 1 + + fieldsets = [ + (None, { + 'fields': ( + 'title', 'description', + ), + }), + (_('Figure'), { + 'classes': ('collapse',), + 'description': TEXT_FOR_NESTED_PLUGIN_CONTENT_SWAP.format( + element='an image', + plugin_name='Image' + ), + 'fields': (), + }), + (_('Advanced settings'), { + 'classes': ('collapse',), + 'fields': ( + 'attributes', + ) + }), + ] + + # Render + + def render(self, context, instance, placeholder): + context = super().render(context, instance, placeholder) + request = context['request'] + has_children = len(instance.child_plugin_instances) + + classes = concat_classnames([ + 'c-callout', + 'c-callout--has-children' if has_children else '', + instance.attributes.get('class'), + ]) + instance.attributes['class'] = classes + + return context diff --git a/taccsite_cms/contrib/taccsite_callout/migrations/0001_initial.py b/taccsite_cms/contrib/taccsite_callout/migrations/0001_initial.py new file mode 100644 index 000000000..3957c6a21 --- /dev/null +++ b/taccsite_cms/contrib/taccsite_callout/migrations/0001_initial.py @@ -0,0 +1,30 @@ +# Generated by Django 2.2.16 on 2021-08-20 23:53 + +from django.db import migrations, models +import django.db.models.deletion +import djangocms_attributes_field.fields + + +class Migration(migrations.Migration): + + initial = True + + dependencies = [ + ('cms', '0022_auto_20180620_1551'), + ] + + operations = [ + migrations.CreateModel( + name='TaccsiteCallout', + fields=[ + ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, related_name='taccsite_callout_taccsitecallout', serialize=False, to='cms.CMSPlugin')), + ('title', models.CharField(blank=True, help_text='A heading for the callout.', max_length=100, verbose_name='Title')), + ('description', models.CharField(blank=True, help_text='A paragraph for the callout.', max_length=200, verbose_name='Description')), + ('attributes', djangocms_attributes_field.fields.AttributesField(default=dict)), + ], + options={ + 'abstract': False, + }, + bases=('cms.cmsplugin',), + ), + ] diff --git a/taccsite_cms/contrib/taccsite_callout/migrations/__init__.py b/taccsite_cms/contrib/taccsite_callout/migrations/__init__.py new file mode 100644 index 000000000..e69de29bb diff --git a/taccsite_cms/contrib/taccsite_callout/models.py b/taccsite_cms/contrib/taccsite_callout/models.py new file mode 100644 index 000000000..0155514b0 --- /dev/null +++ b/taccsite_cms/contrib/taccsite_callout/models.py @@ -0,0 +1,28 @@ +from cms.models.pluginmodel import CMSPlugin + +from django.db import models +from django.utils.translation import gettext_lazy as _ + +from djangocms_attributes_field import fields + +class TaccsiteCallout(CMSPlugin): + """ + Components > "Callout" Model + """ + title = models.CharField( + verbose_name=_('Title'), + help_text=_('A heading for the callout.'), + blank=True, + max_length=100, + ) + description = models.CharField( + verbose_name=_('Description'), + help_text=_('A paragraph for the callout.'), + blank=True, + max_length=200, + ) + + attributes = fields.AttributesField() + + def get_short_description(self): + return self.title diff --git a/taccsite_cms/contrib/taccsite_callout/templates/callout.html b/taccsite_cms/contrib/taccsite_callout/templates/callout.html new file mode 100644 index 000000000..b3f80442f --- /dev/null +++ b/taccsite_cms/contrib/taccsite_callout/templates/callout.html @@ -0,0 +1,13 @@ +{% load cms_tags %} + + diff --git a/taccsite_cms/contrib/taccsite_callout/templates/data_list_item.html b/taccsite_cms/contrib/taccsite_callout/templates/data_list_item.html new file mode 100644 index 000000000..0ed71f277 --- /dev/null +++ b/taccsite_cms/contrib/taccsite_callout/templates/data_list_item.html @@ -0,0 +1,17 @@ +{% if parent_plugin_instance.type_style == 'dlist' %} + +
+ {% include "./data_list_item_key.html" %} +
+
{{ instance.value }}
+ +{% elif parent_plugin_instance.type_style == 'table' %} + + + + {% include "./data_list_item_key.html" %} + + {{ instance.value }} + + +{% endif %} diff --git a/taccsite_cms/contrib/taccsite_callout/templates/data_list_item_key.html b/taccsite_cms/contrib/taccsite_callout/templates/data_list_item_key.html new file mode 100644 index 000000000..a6cc3ad86 --- /dev/null +++ b/taccsite_cms/contrib/taccsite_callout/templates/data_list_item_key.html @@ -0,0 +1,9 @@ +{% load cms_tags %} + +{% if instance.use_plugin_as_key and instance.child_plugin_instances|length %} + {% for plugin_instance in instance.child_plugin_instances %} + {% render_plugin plugin_instance %} + {% endfor %} +{% else %} + {{ instance.key }} +{% endif %} diff --git a/taccsite_cms/settings.py b/taccsite_cms/settings.py index c3cf06878..bb712d4f5 100644 --- a/taccsite_cms/settings.py +++ b/taccsite_cms/settings.py @@ -240,6 +240,7 @@ def getsecrets(): 'taccsite_cms', # TODO: Extract TACC CMS UI components into pip-installable plugins # FAQ: The djangocms_bootstrap4 library can serve as an example + 'taccsite_cms.contrib.taccsite_callout', 'taccsite_cms.contrib.taccsite_sample', 'taccsite_cms.contrib.taccsite_system_monitor', 'taccsite_cms.contrib.taccsite_data_list', diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css index 0ebb95b68..bf2909336 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css @@ -26,11 +26,18 @@ Styleguide Components.Callout .c-callout { display: grid; + + padding: 20px; +} +.c-callout--has-children { grid-template-areas: 'figure title' 'figure desc'; - - padding: 20px; +} +.c-callout:not(.c-callout--has-children) { + grid-template-areas: + 'title' + 'desc'; } .c-callout__figure { grid-area: figure; } .c-callout__title { grid-area: title; } @@ -38,11 +45,11 @@ Styleguide Components.Callout /* To hide figure on narrow window */ @media only screen and (--narrow-and-below) { - .c-callout { column-gap: 0px; } - .c-callout__figure { display: none; } + .c-callout--has-children .c-callout { column-gap: 0px; } + .c-callout--has-children .c-callout__figure { display: none; } } @media only screen and (--narrow-and-above) { - .c-callout { column-gap: 40px; } + .c-callout--has-children .c-callout { column-gap: 40px; } } /* To align image to exact center */ From 4fa354cd6ca120c47638184ade411dbe4c25afce Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Fri, 20 Aug 2021 19:09:41 -0500 Subject: [PATCH 04/26] GH-83: Fix Callout Component after Plugin's tweaks --- .../css/src/_imports/components/c-callout.css | 22 ++++++++++++++----- .../templates/snippets/c-callout.html | 2 +- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css b/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css index bf2909336..89dc2ff37 100644 --- a/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css +++ b/taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css @@ -4,7 +4,8 @@ Callout Interrupt or end Sections with a "call to action". Markup: -