-
-
Notifications
You must be signed in to change notification settings - Fork 824
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #22975 from colemanw/afformLayout2
Afform - Easier layout creation with predefined container styles and built-in title
- Loading branch information
Showing
21 changed files
with
328 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| /* CSS rules for Angular module "crmUI" */ | ||
|
|
||
| /* In-place edit */ | ||
| .crm-container [crm-ui-editable] { | ||
| padding-left: 2px; | ||
| border: 2px dashed transparent; | ||
| } | ||
| .crm-container [crm-ui-editable]:hover, | ||
| .crm-container [crm-ui-editable]:focus { | ||
| border: 2px dashed #d1d1d1; | ||
| cursor: pointer; | ||
| background-color: white !important; | ||
| color: initial !important; | ||
| } | ||
| .crm-container span[crm-ui-editable] { | ||
| display: inline-block !important; | ||
| padding-right: 2px; | ||
| min-height: 1em; | ||
| min-width: 3em; | ||
| } | ||
| .crm-container [crm-ui-editable]:empty:before { | ||
| content: attr(placeholder); | ||
| color: #9a9a9a; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
ext/afform/admin/ang/afGuiEditor/afGuiMenuItemCollapsible.component.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| // https://civicrm.org/licensing | ||
| (function(angular, $, _) { | ||
| "use strict"; | ||
|
|
||
| // Menu item to control the border property of a node | ||
| angular.module('afGuiEditor').component('afGuiMenuItemCollapsible', { | ||
| templateUrl: '~/afGuiEditor/afGuiMenuItemCollapsible.html', | ||
| bindings: { | ||
| node: '=' | ||
| }, | ||
| controller: function($scope, afGui) { | ||
| var ts = $scope.ts = CRM.ts('org.civicrm.afform_admin'), | ||
| ctrl = this; | ||
|
|
||
| this.isCollapsible = function() { | ||
| return afGui.hasClass(ctrl.node, 'af-collapsible'); | ||
| }; | ||
|
|
||
| this.isCollapsed = function() { | ||
| return afGui.hasClass(ctrl.node, 'af-collapsible af-collapsed'); | ||
| }; | ||
|
|
||
| this.toggleCollapsible = function() { | ||
| // Node must have a title to be collapsible | ||
| if (ctrl.isCollapsible() || !ctrl.node['af-title']) { | ||
| afGui.modifyClasses(ctrl.node, 'af-collapsible af-collapsed'); | ||
| } else { | ||
| afGui.modifyClasses(ctrl.node, null, 'af-collapsible'); | ||
| } | ||
| }; | ||
|
|
||
| this.toggleCollapsed = function() { | ||
| if (ctrl.isCollapsed()) { | ||
| afGui.modifyClasses(ctrl.node, 'af-collapsed'); | ||
| } else { | ||
| afGui.modifyClasses(ctrl.node, null, 'af-collapsed'); | ||
| } | ||
| }; | ||
|
|
||
| } | ||
| }); | ||
|
|
||
| })(angular, CRM.$, CRM._); |
8 changes: 8 additions & 0 deletions
8
ext/afform/admin/ang/afGuiEditor/afGuiMenuItemCollapsible.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <label ng-class="{disabled: !$ctrl.node['af-title']}" ng-click="$ctrl.toggleCollapsible(); $event.stopPropagation();" title="{{ $ctrl.node['af-title'] ? ts('Allow user to collapse this to only show title') : ts('Must have a title to be collapsible') }}"> | ||
| <i class="crm-i fa-{{ $ctrl.isCollapsible() ? 'check-' : '' }}square-o"></i> | ||
| {{:: ts('Collapsible') }} | ||
| </label> | ||
| <a href ng-click="$ctrl.toggleCollapsed(); $event.stopPropagation();" class="btn btn-sm btn-default" ng-class="{invisible: !$ctrl.isCollapsible()}"> | ||
| <i class="crm-i fa-caret-{{ $ctrl.isCollapsed() ? 'right' : 'down' }}"></i> | ||
| {{ $ctrl.isCollapsed() ? ts('Closed') : ts('Open') }} | ||
| </a> |
31 changes: 31 additions & 0 deletions
31
ext/afform/admin/ang/afGuiEditor/afGuiMenuItemStyle.component.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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._); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| <div class="af-gui-field-select-in-dropdown form-inline" ng-click="$event.stopPropagation()"> | ||
| <label>{{:: ts('Style:') }}</label> | ||
| <select class="form-control" ng-model="getSetStyle" ng-model-options="{getterSetter: true}"> | ||
| <option value="">{{:: ts('None') }}</option> | ||
| <option ng-repeat="style in $ctrl.styles" value="{{:: style.name }}">{{:: style.label }}</option> | ||
| </select> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.