From 082da2537ccf58e031118e39b3533e00d851ad1a Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Fri, 18 Mar 2022 15:24:34 -0400 Subject: [PATCH] Afform - Predefined container styles Adds a predefined "Panel Pane" style, for creating dashboards. --- .../Civi/AfformAdmin/AfformAdminMeta.php | 1 + ext/afform/admin/ang/afGuiEditor.css | 7 ++++ .../afGuiMenuItemStyle.component.js | 31 +++++++++++++++++ .../ang/afGuiEditor/afGuiMenuItemStyle.html | 7 ++++ .../elements/afGuiContainer-menu.html | 1 + .../afGuiEditor/elements/afGuiContainer.html | 6 ++-- .../elements/afGuiSearchContainer-menu.html | 1 + ext/afform/core/ang/afCore.css | 33 +++++++++++++++++++ 8 files changed, 84 insertions(+), 3 deletions(-) create mode 100644 ext/afform/admin/ang/afGuiEditor/afGuiMenuItemStyle.component.js create mode 100644 ext/afform/admin/ang/afGuiEditor/afGuiMenuItemStyle.html diff --git a/ext/afform/admin/Civi/AfformAdmin/AfformAdminMeta.php b/ext/afform/admin/Civi/AfformAdmin/AfformAdminMeta.php index 8ca5ec909c41..51cd1c151f7c 100644 --- a/ext/afform/admin/Civi/AfformAdmin/AfformAdminMeta.php +++ b/ext/afform/admin/Civi/AfformAdmin/AfformAdminMeta.php @@ -249,6 +249,7 @@ public static function getGuiSettings() { 'element' => [ '#tag' => 'fieldset', 'af-fieldset' => NULL, + 'class' => 'af-container', 'af-title' => E::ts('Enter title'), '#children' => [], ], diff --git a/ext/afform/admin/ang/afGuiEditor.css b/ext/afform/admin/ang/afGuiEditor.css index 3b60112dd1e6..efb2c82151da 100644 --- a/ext/afform/admin/ang/afGuiEditor.css +++ b/ext/afform/admin/ang/afGuiEditor.css @@ -204,6 +204,13 @@ body.af-gui-dragging { margin-top: 10px; } +/* Card style */ +#afGuiEditor .af-gui-container.af-container-style-pane { + box-shadow: 1px 2px 8px 1px rgb(0, 0, 0, .3); + background: linear-gradient(to bottom, #f2f2f2 0 22px, transparent 22px 100%) no-repeat; + border-radius: 4px; +} + #afGuiEditor af-gui-container, #afGuiEditor af-gui-markup, #afGuiEditor af-gui-field, diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemStyle.component.js b/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemStyle.component.js new file mode 100644 index 000000000000..ec0680c9585e --- /dev/null +++ b/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemStyle.component.js @@ -0,0 +1,31 @@ +// https://civicrm.org/licensing +(function(angular, $, _) { + "use strict"; + + // Menu item to control the border property of a node + angular.module('afGuiEditor').component('afGuiMenuItemStyle', { + templateUrl: '~/afGuiEditor/afGuiMenuItemStyle.html', + bindings: { + node: '=' + }, + controller: function($scope, afGui) { + var ts = $scope.ts = CRM.ts('org.civicrm.afform_admin'), + ctrl = this; + + // Todo: Make this an option group so other extensions can add to it + this.styles = [ + {name: 'af-container-style-pane', label: ts('Panel Pane')} + ]; + + $scope.getSetStyle = function(style) { + var options = _.map(ctrl.styles, 'name'); + if (arguments.length) { + afGui.modifyClasses(ctrl.node, options, style); + } + return _.intersection(afGui.splitClass(ctrl.node['class']), options)[0] || ''; + }; + + } + }); + +})(angular, CRM.$, CRM._); diff --git a/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemStyle.html b/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemStyle.html new file mode 100644 index 000000000000..2404397b653f --- /dev/null +++ b/ext/afform/admin/ang/afGuiEditor/afGuiMenuItemStyle.html @@ -0,0 +1,7 @@ +
+ + +
diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer-menu.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer-menu.html index 9afec26ebda0..00b75cff2717 100644 --- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer-menu.html +++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer-menu.html @@ -31,6 +31,7 @@
    • +
    • diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html index 6e3fe030db31..c98ec2297e8a 100644 --- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html +++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiContainer.html @@ -25,14 +25,14 @@
    - - + + - +
    diff --git a/ext/afform/admin/ang/afGuiEditor/elements/afGuiSearchContainer-menu.html b/ext/afform/admin/ang/afGuiEditor/elements/afGuiSearchContainer-menu.html index ac3b8b7c303f..088e4bd712d6 100644 --- a/ext/afform/admin/ang/afGuiEditor/elements/afGuiSearchContainer-menu.html +++ b/ext/afform/admin/ang/afGuiEditor/elements/afGuiSearchContainer-menu.html @@ -7,6 +7,7 @@
    • +
    • diff --git a/ext/afform/core/ang/afCore.css b/ext/afform/core/ang/afCore.css index edc60124370f..841cf8732a39 100644 --- a/ext/afform/core/ang/afCore.css +++ b/ext/afform/core/ang/afCore.css @@ -8,6 +8,7 @@ a.af-api4-action-idle { .af-container.af-layout-cols { display: flex; + flex-wrap: wrap; } .af-container.af-layout-cols > * { flex: 1; @@ -17,6 +18,14 @@ a.af-api4-action-idle { margin-right: .5em; vertical-align: top; } +.af-container.af-layout-cols > .af-title { + flex: 0 0 100%; +} +.af-container.af-layout-inline > .af-title { + display: block; + width: 100%; +} + af-form { display: block; } @@ -47,3 +56,27 @@ af-form { .af-collapsible.af-collapsed > .af-title + * { display: none; } + +/* Card style */ +#bootstrap-theme .af-container-style-pane { + background-color: white; + border-radius: 4px; + box-shadow: 1px 2px 8px 1px rgba(0, 0, 0, 0.3); + margin: 10px; + padding: 5px; +} +#bootstrap-theme .af-container-style-pane > .af-title { + background-color: #70716b; + color: white; + padding: 5px; + border-radius: 4px 4px 0 0; + position: relative; + top: -5px; + left: -5px; + width: calc(100% + 10px); + margin-top: 0; + margin-bottom: 10px; +} +#bootstrap-theme .af-container-style-pane.af-collapsed > .af-title { + margin-bottom: 0; +}