This is an automated email from the ASF dual-hosted git repository.
amaranhao pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/couchdb-fauxton.git
The following commit(s) were added to refs/heads/main by this push:
new 01ebc86 Fix: permanent notification (#1333)
01ebc86 is described below
commit 01ebc86fba98b4765243b772596210766ec6a1c8
Author: Antonio Maranhao <[email protected]>
AuthorDate: Fri Jan 28 14:55:33 2022 -0500
Fix: permanent notification (#1333)
Why
When the permanent notification is displayed, a vertical scroll bar
is always displayed because the height of the window is more than
100%
What
Adjust app-container height when the permanent notification is visible
---
app/addons/fauxton/appwrapper.js | 11 ++++++++---
app/addons/fauxton/assets/less/components.less | 16 +++++++++++-----
.../notifications/components/PermanentNotification.js | 6 +++---
assets/less/templates.less | 4 ++++
4 files changed, 26 insertions(+), 11 deletions(-)
diff --git a/app/addons/fauxton/appwrapper.js b/app/addons/fauxton/appwrapper.js
index 77cbca3..522454f 100644
--- a/app/addons/fauxton/appwrapper.js
+++ b/app/addons/fauxton/appwrapper.js
@@ -76,6 +76,9 @@ class App extends React.Component {
const mainClass = classNames(
{'closeMenu': this.props.isPrimaryNavMinimized}
);
+ const appContainerClass = classNames(
+ {'app-container__with-perm-notification':
this.props.isPermanentNotificationShowing}
+ );
return (
<div>
<ToastContainer
@@ -96,7 +99,7 @@ class App extends React.Component {
<NotificationPanelContainer />
</div>
<div id="main" className={mainClass}>
- <div id="app-container">
+ <div id="app-container" className={appContainerClass}>
<div className="wrapper">
<div role="main" className="pusher">
<ContentWrapper router={this.props.router}
setNavbarActiveLink={this.props.setNavbarActiveLink}/>
@@ -113,9 +116,11 @@ class App extends React.Component {
}
export default connect(
- ({ navigation }) => {
+ ({ navigation, notifications }) => {
return {
- isPrimaryNavMinimized: navigation.isMinimized};
+ isPrimaryNavMinimized: navigation.isMinimized,
+ isPermanentNotificationShowing:
notifications.permanentNotificationVisible,
+ };
},
(dispatch) => {
return {
diff --git a/app/addons/fauxton/assets/less/components.less
b/app/addons/fauxton/assets/less/components.less
index 26a0229..0be4844 100644
--- a/app/addons/fauxton/assets/less/components.less
+++ b/app/addons/fauxton/assets/less/components.less
@@ -54,13 +54,19 @@ button.clipboard-copy-element {
#perma-warning {
background-color: white;
+ height: 3.5rem;
+ border-bottom-style: solid;
+ border-width: 2px;
+ border-top-style: solid;
+ border-color: #B11925;
+ overflow-y: auto;
}
.perma-warning__content {
- margin: 4px;
- padding: 10px;
+ margin: 0rem;
+ padding: 0.5rem 1rem 0.5rem 1rem;
color: #B11925;
- outline-style: solid;
- outline-color: #B11925;
- outline-width: 4px;
+ top: 50%;
+ transform: translateY(-50%);
+ position: relative;
}
diff --git
a/app/addons/fauxton/notifications/components/PermanentNotification.js
b/app/addons/fauxton/notifications/components/PermanentNotification.js
index ff5c396..7a1b6da 100644
--- a/app/addons/fauxton/notifications/components/PermanentNotification.js
+++ b/app/addons/fauxton/notifications/components/PermanentNotification.js
@@ -34,15 +34,15 @@ export default class PermanentNotification extends
React.Component {
}
getContent () {
- if (!this.props.visible || !this.props.message) {
- return null;
- }
return (
<p className="perma-warning__content"
dangerouslySetInnerHTML={this.getMsg()}></p>
);
}
render () {
+ if (!this.props.visible || !this.props.message) {
+ return null;
+ }
return (
<div id="perma-warning">
{this.getContent()}
diff --git a/assets/less/templates.less b/assets/less/templates.less
index b5bc864..0001b45 100644
--- a/assets/less/templates.less
+++ b/assets/less/templates.less
@@ -28,6 +28,10 @@
height: 100vh;
position: relative;
overflow: hidden;
+
+ &.app-container__with-perm-notification {
+ height: calc(100vh - 3.5rem);
+ }
}
@media screen and (max-height: 600px) {
