Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

NG1594 - CAP/Modal Propagate and Compact #8702

Merged
merged 6 commits into from
May 16, 2024
Merged

NG1594 - CAP/Modal Propagate and Compact #8702

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
09a56e0
Added new settings `propagateStyle` and `compactPanel`
tjamesallen15 May 9, 2024
5aa5ed9
Fix Lint
tjamesallen15 May 9, 2024
ea6a8d6
Merge branch 'main' into NG1594-cap-propagate-compact
tmcconechy May 10, 2024
4facfa4
Merge branch 'main' into NG1594-cap-propagate-compact
tjamesallen15 May 16, 2024
fe67657
Fixed Lint
tjamesallen15 May 16, 2024
08c17dd
Update test page
tjamesallen15 May 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions app/views/components/contextualactionpanel/test-propagate-compact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@

<div class="row">
<div class="six columns">

<button type="button" class="btn-secondary contextual-action-panel-trigger" data-options='{ fullsize: "responsive", modalSettings: {propagateStyle: "true", compactPanel: "true"} }'>
Contextual Action Panel
</button>
<div class="contextual-action-panel">
<div class="toolbar">
<div class="title">Company Information</div>
<div class="buttonset">
<button class="btn" type="button">
<svg class="icon" focusable="false" aria-hidden="true" role="presentation">
<use href="#icon-save"></use>
</svg>
<span>Save</span>
</button>
<div class="separator"></div>
<button name="close" class="btn" type="button">
<svg class="icon icon-close" focusable="false" aria-hidden="true" role="presentation">
<use href="#icon-close"></use>
</svg>
<span>Close</span>
</button>
</div>
</div>
<div class="row" style="width:660px; height:350px">
</div>
</div>

</div>
</div>
2 changes: 2 additions & 0 deletions docs/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@

## v4.96.0 Features

- `[ContextualActionPanel/Modal]` Added new settings `propagateStyle` and `compactPanel`. ([NG#1594](https://github.com/infor-design/enterprise-ng/issues/1594))

## v4.96.0 Fixes

- `[About]` Removed `isMobile` in about spec. ([#8502](https://github.com/infor-design/enterprise/issues/8502))
Expand Down
10 changes: 10 additions & 0 deletions src/components/contextualactionpanel/_contextualactionpanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,6 +252,16 @@
.modal-body {
padding: 3rem 0;

&.propagate-style {
max-height: inherit;
max-width: inherit;
overflow: inherit;
}

&.compact {
padding: 0;
}

.field:last-child input,
.field:last-child textarea {
margin-bottom: 10px;
Expand Down
2 changes: 2 additions & 0 deletions src/components/contextualactionpanel/contextualactionpanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ const CONTEXTUALACTIONPANEL_DEFAULTS = {
showCloseBtn: false,
title: undefined,
trigger: 'click',
propagateStyle: false,
compactPanel: false,
useFlexToolbar: false
}
};
Expand Down
10 changes: 10 additions & 0 deletions src/components/modal/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -576,6 +576,16 @@ body.modal-engaged {
p:last-child {
padding-bottom: 0;
}

&.propagate-style {
max-height: inherit;
max-width: inherit;
overflow: inherit;
}

&.compact {
padding: 0;
}
}

//Toolbar Buttons
Expand Down
12 changes: 11 additions & 1 deletion src/components/modal/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,8 @@ const MODAL_DEFAULTS = {
suppressEnterKey: false,
draggable: false,
draggableOffset: { left: 0, top: 0 },
propagateStyle: false,
compactPanel: false,
icon: null,
iconClass: null,
buttonsetTextWidth: null
Expand Down Expand Up @@ -301,6 +303,14 @@ Modal.prototype = {
// beneath another modal in the stack
this.element[0].classList[this.settings.hideUnderneath ? 'add' : 'remove']('hide-underneath');

if (this.settings.propagateStyle) {
this.element.find('.modal-body').addClass('propagate-style');
}

if (this.settings.compactPanel) {
this.element.find('.modal-body').addClass('compact');
}

this.registerModal();

this.element.appendTo('body');
Expand Down Expand Up @@ -367,7 +377,7 @@ Modal.prototype = {
<div class="modal-content"${maxWidth}>
<div class="modal-header ${isSplitter ? 'splitter-header' : ''}"><h1 class="modal-title"></h1></div>
<div class="modal-body-wrapper ${isSplitter ? 'splitter-wrapper' : ''}">
<div class="modal-body${this.settings.forceOverflow ? ' overflow' : ''}"></div>
<div class="modal-body${this.settings.forceOverflow ? ' overflow' : ''} ${this.settings.propagateStyle ? ' propagate-style' : ''} ${this.settings.compactPanel ? ' compact' : ''}"></div>
</div>
</div>
</div>
Expand Down
Loading