[layout] Replace "react-awesome-popover"

* #427

[layout] Replace "react-awesome-popover"
* #427
b3b47ea2 · arturo · 786e7c81 · b3b47ea2 · b3b47ea2 · b3b47ea2
Commit b3b47ea2 authored Jul 22, 2022 by arturo
26 changed files
--- a/dist/index.html
+++ b/dist/index.html
@@ -12,6 +12,8 @@
    <body>
        <div id="app"></div>
        <div id="portal"></div>
+        <script src="js/jquery@3.5.1/jquery.slim.min.js"></script>
+        <script src="js/bootstrap@4.6.2/bootstrap.bundle.min.js"></script>
        <script src="bundle.js"></script>
    </body>
 </html>
--- a/dist/js/bootstrap@4.6.2/bootstrap.bundle.min.js
+++ b/dist/js/bootstrap@4.6.2/bootstrap.bundle.min.js
--- a/dist/js/jquery@3.5.1/jquery.slim.min.js
+++ b/dist/js/jquery@3.5.1/jquery.slim.min.js
--- a/dist/js/knowledge-phylomemy.json
+++ b/dist/js/knowledge-phylomemy.json
--- a/dist/js/vaccines_countries_06_2021.json
+++ b/dist/js/vaccines_countries_06_2021.json
--- a/dist/styles/bootstrap-darkster.css
+++ b/dist/styles/bootstrap-darkster.css
@@ -5941,30 +5941,23 @@ h3 {
  font-weight: 700;
 }

-.b-modal--visible {
-  display: block;
-}
 .b-modal__content {
  background-color: #fff;
-  max-height: calc(100% - 3.5rem );
-  overflow: auto;
+  margin-left: 1.75rem;
+  margin-right: 1.75rem;
 }
 .b-modal__header {
  background-color: white;
 }
-.b-modal__header__content {
+.b-modal__header__title {
  color: #FF550B;
  font-size: 21px;
 }
 .b-modal__overlay {
  width: 100%;
  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
 }
-.b-modal__overlay--collapsible {
-  cursor: pointer;
-}

 .b-spinner {
  font-size: inherit;
@@ -8404,65 +8397,37 @@ a:focus, a:hover {
  padding-right: 20px;
 }

-#node-popup-tooltip {
-  position: fixed;
-  background-color: white;
-  border-radius: 6px;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
-}
-#node-popup-tooltip:hover {
-  border: none;
-  text-decoration: none;
-}
-#node-popup-tooltip .tree .node {
-  margin-top: 5px;
-}
-#node-popup-tooltip .tree .children .node {
-  padding-left: 15px;
+.forest-tree-node-modal {
+  width: fit-content;
+  min-width: 544px;
+  max-width: 100vw;
 }
-#node-popup-tooltip .panel-actions .almost-useable {
+
+.node-popup-tooltip .panel-actions__almost-useable {
  color: orange;
 }
-#node-popup-tooltip .panel-actions .development-in-progress {
+.node-popup-tooltip .panel-actions__development-in-progress {
  color: red;
 }
-#node-popup-tooltip .panel-actions .ok-to-use {
+.node-popup-tooltip .panel-actions__ok-to-use {
  color: black;
 }
-#node-popup-tooltip .popup-container {
+.node-popup-tooltip .popup-container {
  display: flex;
-  flex-direction: colum;
-}
-#node-popup-tooltip .popup-container > .card {
-  width: auto !important;
-  min-width: 544px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  margin-bottom: initial;
+  flex-direction: column;
 }
-#node-popup-tooltip .popup-container > .card .fa-pencil {
+.node-popup-tooltip .popup-container__header .fa-pencil {
  color: black;
 }
-#node-popup-tooltip .popup-container > .card .card-body {
+.node-popup-tooltip .popup-container__body {
  display: flex;
  justify-content: center;
-  background-color: white;
-  border: none;
-}
-#node-popup-tooltip .popup-container > .card .card-body .spacer {
-  margin: 8px;
+  background-color: #000000;
 }
-#node-popup-tooltip .popup-container .frame-search.card {
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  height: 600px;
+
+.frame-search.card {
  width: 1000px;
-}
-#node-popup-tooltip .popup-container-body {
-  max-height: 70vh;
-  overflow-y: auto;
+  height: 600px;
 }

 .forest-layout {

--- a/dist/styles/bootstrap-default.css
+++ b/dist/styles/bootstrap-default.css
@@ -5895,30 +5895,23 @@ h3 {
  font-weight: 700;
 }

-.b-modal--visible {
-  display: block;
-}
 .b-modal__content {
  background-color: #fff;
-  max-height: calc(100% - 3.5rem );
-  overflow: auto;
+  margin-left: 1.75rem;
+  margin-right: 1.75rem;
 }
 .b-modal__header {
  background-color: rgba(0, 0, 0, 0.03);
 }
-.b-modal__header__content {
+.b-modal__header__title {
  color: #005a9a;
  font-size: 21px;
 }
 .b-modal__overlay {
  width: 100%;
  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
 }
-.b-modal__overlay--collapsible {
-  cursor: pointer;
-}

 .b-spinner {
  font-size: inherit;
@@ -8357,65 +8350,37 @@ a:focus, a:hover {
  padding-right: 20px;
 }

-#node-popup-tooltip {
-  position: fixed;
-  background-color: white;
-  border-radius: 6px;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
-}
-#node-popup-tooltip:hover {
-  border: none;
-  text-decoration: none;
-}
-#node-popup-tooltip .tree .node {
-  margin-top: 5px;
-}
-#node-popup-tooltip .tree .children .node {
-  padding-left: 15px;
+.forest-tree-node-modal {
+  width: fit-content;
+  min-width: 544px;
+  max-width: 100vw;
 }
-#node-popup-tooltip .panel-actions .almost-useable {
+
+.node-popup-tooltip .panel-actions__almost-useable {
  color: orange;
 }
-#node-popup-tooltip .panel-actions .development-in-progress {
+.node-popup-tooltip .panel-actions__development-in-progress {
  color: red;
 }
-#node-popup-tooltip .panel-actions .ok-to-use {
+.node-popup-tooltip .panel-actions__ok-to-use {
  color: black;
 }
-#node-popup-tooltip .popup-container {
+.node-popup-tooltip .popup-container {
  display: flex;
-  flex-direction: colum;
-}
-#node-popup-tooltip .popup-container > .card {
-  width: auto !important;
-  min-width: 544px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  margin-bottom: initial;
+  flex-direction: column;
 }
-#node-popup-tooltip .popup-container > .card .fa-pencil {
+.node-popup-tooltip .popup-container__header .fa-pencil {
  color: black;
 }
-#node-popup-tooltip .popup-container > .card .card-body {
+.node-popup-tooltip .popup-container__body {
  display: flex;
  justify-content: center;
-  background-color: white;
-  border: none;
-}
-#node-popup-tooltip .popup-container > .card .card-body .spacer {
-  margin: 8px;
+  background-color: #fff;
 }
-#node-popup-tooltip .popup-container .frame-search.card {
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  height: 600px;
+
+.frame-search.card {
  width: 1000px;
-}
-#node-popup-tooltip .popup-container-body {
-  max-height: 70vh;
-  overflow-y: auto;
+  height: 600px;
 }

 .forest-layout {

--- a/dist/styles/bootstrap-greyson.css
+++ b/dist/styles/bootstrap-greyson.css
@@ -5650,30 +5650,23 @@ h3 {
  font-weight: 700;
 }

-.b-modal--visible {
-  display: block;
-}
 .b-modal__content {
  background-color: #fff;
-  max-height: calc(100% - 3.5rem );
-  overflow: auto;
+  margin-left: 1.75rem;
+  margin-right: 1.75rem;
 }
 .b-modal__header {
  background-color: rgba(0, 0, 0, 0.03);
 }
-.b-modal__header__content {
+.b-modal__header__title {
  color: #2f3c48;
  font-size: 21px;
 }
 .b-modal__overlay {
  width: 100%;
  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
 }
-.b-modal__overlay--collapsible {
-  cursor: pointer;
-}

 .b-spinner {
  font-size: inherit;
@@ -8113,65 +8106,37 @@ a:focus, a:hover {
  padding-right: 20px;
 }

-#node-popup-tooltip {
-  position: fixed;
-  background-color: white;
-  border-radius: 6px;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
-}
-#node-popup-tooltip:hover {
-  border: none;
-  text-decoration: none;
-}
-#node-popup-tooltip .tree .node {
-  margin-top: 5px;
-}
-#node-popup-tooltip .tree .children .node {
-  padding-left: 15px;
+.forest-tree-node-modal {
+  width: fit-content;
+  min-width: 544px;
+  max-width: 100vw;
 }
-#node-popup-tooltip .panel-actions .almost-useable {
+
+.node-popup-tooltip .panel-actions__almost-useable {
  color: orange;
 }
-#node-popup-tooltip .panel-actions .development-in-progress {
+.node-popup-tooltip .panel-actions__development-in-progress {
  color: red;
 }
-#node-popup-tooltip .panel-actions .ok-to-use {
+.node-popup-tooltip .panel-actions__ok-to-use {
  color: black;
 }
-#node-popup-tooltip .popup-container {
+.node-popup-tooltip .popup-container {
  display: flex;
-  flex-direction: colum;
-}
-#node-popup-tooltip .popup-container > .card {
-  width: auto !important;
-  min-width: 544px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  margin-bottom: initial;
+  flex-direction: column;
 }
-#node-popup-tooltip .popup-container > .card .fa-pencil {
+.node-popup-tooltip .popup-container__header .fa-pencil {
  color: black;
 }
-#node-popup-tooltip .popup-container > .card .card-body {
+.node-popup-tooltip .popup-container__body {
  display: flex;
  justify-content: center;
-  background-color: white;
-  border: none;
-}
-#node-popup-tooltip .popup-container > .card .card-body .spacer {
-  margin: 8px;
+  background-color: #fff;
 }
-#node-popup-tooltip .popup-container .frame-search.card {
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  height: 600px;
+
+.frame-search.card {
  width: 1000px;
-}
-#node-popup-tooltip .popup-container-body {
-  max-height: 70vh;
-  overflow-y: auto;
+  height: 600px;
 }

 .forest-layout {

--- a/dist/styles/bootstrap-herbie.css
+++ b/dist/styles/bootstrap-herbie.css
@@ -5898,30 +5898,23 @@ h3 {
  font-weight: 700;
 }

-.b-modal--visible {
-  display: block;
-}
 .b-modal__content {
  background-color: #fff;
-  max-height: calc(100% - 3.5rem );
-  overflow: auto;
+  margin-left: 1.75rem;
+  margin-right: 1.75rem;
 }
 .b-modal__header {
  background-color: rgba(0, 0, 0, 0.03);
 }
-.b-modal__header__content {
+.b-modal__header__title {
  color: #083358;
  font-size: 21px;
 }
 .b-modal__overlay {
  width: 100%;
  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
 }
-.b-modal__overlay--collapsible {
-  cursor: pointer;
-}

 .b-spinner {
  font-size: inherit;
@@ -8361,65 +8354,37 @@ a:focus, a:hover {
  padding-right: 20px;
 }

-#node-popup-tooltip {
-  position: fixed;
-  background-color: white;
-  border-radius: 6px;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
-}
-#node-popup-tooltip:hover {
-  border: none;
-  text-decoration: none;
-}
-#node-popup-tooltip .tree .node {
-  margin-top: 5px;
-}
-#node-popup-tooltip .tree .children .node {
-  padding-left: 15px;
+.forest-tree-node-modal {
+  width: fit-content;
+  min-width: 544px;
+  max-width: 100vw;
 }
-#node-popup-tooltip .panel-actions .almost-useable {
+
+.node-popup-tooltip .panel-actions__almost-useable {
  color: orange;
 }
-#node-popup-tooltip .panel-actions .development-in-progress {
+.node-popup-tooltip .panel-actions__development-in-progress {
  color: red;
 }
-#node-popup-tooltip .panel-actions .ok-to-use {
+.node-popup-tooltip .panel-actions__ok-to-use {
  color: black;
 }
-#node-popup-tooltip .popup-container {
+.node-popup-tooltip .popup-container {
  display: flex;
-  flex-direction: colum;
-}
-#node-popup-tooltip .popup-container > .card {
-  width: auto !important;
-  min-width: 544px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  margin-bottom: initial;
+  flex-direction: column;
 }
-#node-popup-tooltip .popup-container > .card .fa-pencil {
+.node-popup-tooltip .popup-container__header .fa-pencil {
  color: black;
 }
-#node-popup-tooltip .popup-container > .card .card-body {
+.node-popup-tooltip .popup-container__body {
  display: flex;
  justify-content: center;
-  background-color: white;
-  border: none;
-}
-#node-popup-tooltip .popup-container > .card .card-body .spacer {
-  margin: 8px;
+  background-color: #fff;
 }
-#node-popup-tooltip .popup-container .frame-search.card {
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  height: 600px;
+
+.frame-search.card {
  width: 1000px;
-}
-#node-popup-tooltip .popup-container-body {
-  max-height: 70vh;
-  overflow-y: auto;
+  height: 600px;
 }

 .forest-layout {

--- a/dist/styles/bootstrap-monotony.css
+++ b/dist/styles/bootstrap-monotony.css
@@ -5899,30 +5899,23 @@ h3 {
  font-weight: 700;
 }

-.b-modal--visible {
-  display: block;
-}
 .b-modal__content {
  background-color: #fff;
-  max-height: calc(100% - 3.5rem );
-  overflow: auto;
+  margin-left: 1.75rem;
+  margin-right: 1.75rem;
 }
 .b-modal__header {
  background-color: rgba(0, 0, 0, 0.03);
 }
-.b-modal__header__content {
+.b-modal__header__title {
  color: #222222;
  font-size: 21px;
 }
 .b-modal__overlay {
  width: 100%;
  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
 }
-.b-modal__overlay--collapsible {
-  cursor: pointer;
-}

 .b-spinner {
  font-size: inherit;
@@ -8362,65 +8355,37 @@ a:focus, a:hover {
  padding-right: 20px;
 }

-#node-popup-tooltip {
-  position: fixed;
-  background-color: white;
-  border-radius: 6px;
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%);
-}
-#node-popup-tooltip:hover {
-  border: none;
-  text-decoration: none;
-}
-#node-popup-tooltip .tree .node {
-  margin-top: 5px;
-}
-#node-popup-tooltip .tree .children .node {
-  padding-left: 15px;
+.forest-tree-node-modal {
+  width: fit-content;
+  min-width: 544px;
+  max-width: 100vw;
 }
-#node-popup-tooltip .panel-actions .almost-useable {
+
+.node-popup-tooltip .panel-actions__almost-useable {
  color: orange;
 }
-#node-popup-tooltip .panel-actions .development-in-progress {
+.node-popup-tooltip .panel-actions__development-in-progress {
  color: red;
 }
-#node-popup-tooltip .panel-actions .ok-to-use {
+.node-popup-tooltip .panel-actions__ok-to-use {
  color: black;
 }
-#node-popup-tooltip .popup-container {
+.node-popup-tooltip .popup-container {
  display: flex;
-  flex-direction: colum;
-}
-#node-popup-tooltip .popup-container > .card {
-  width: auto !important;
-  min-width: 544px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  margin-bottom: initial;
+  flex-direction: column;
 }
-#node-popup-tooltip .popup-container > .card .fa-pencil {
+.node-popup-tooltip .popup-container__header .fa-pencil {
  color: black;
 }
-#node-popup-tooltip .popup-container > .card .card-body {
+.node-popup-tooltip .popup-container__body {
  display: flex;
  justify-content: center;
-  background-color: white;
-  border: none;
-}
-#node-popup-tooltip .popup-container > .card .card-body .spacer {
-  margin: 8px;
+  background-color: #fff;
 }
-#node-popup-tooltip .popup-container .frame-search.card {
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  height: 600px;
+
+.frame-search.card {
  width: 1000px;
-}
-#node-popup-tooltip .popup-container-body {
-  max-height: 70vh;
-  overflow-y: auto;
+  height: 600px;
 }

 .forest-layout {

--- a/src/Gargantext/Components/Bootstrap/Floaty/BaseModal.js
+++ b/src/Gargantext/Components/Bootstrap/Floaty/BaseModal.js
 'use strict';

-exports._addClassName = function(window, className) {
-  window.document.body.classList.add(className);
+exports._show = show;
+exports._hide = hide;
+/**
+ * @function show
+ * @param {Window} window
+ * @param {string} querySelector
+ * @unpure {Object} window.$
+ */
+function show(window, querySelector) {
+  window.$(querySelector).modal('show');
 }
-
-exports._removeClassName = function(window, className) {
-  window.document.body.classList.remove(className);
+/**
+ * @function hide
+ * @param {Window} window
+ * @param {string} querySelector
+ * @unpure {Object} window.$
+ */
+function hide(window, querySelector) {
+  window.$(querySelector).modal('hide');
+  // @XXX Bootstrap not removing some modal elements on "hide" method
+  // @https://stackoverflow.com/questions/50168312/bootstrap-4-close-modal-backdrop-doesnt-disappear
+  window.$('body').removeClass('modal-open');
+  window.$('body').css('padding-right', '0');
+  window.$('.modal-backdrop').remove();
 }
--- a/src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs
+++ b/src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs
@@ -4,153 +4,207 @@ import Gargantext.Prelude

 import DOM.Simple (Window, window)
 import Data.Foldable (intercalate)
+import Data.Maybe (Maybe(..))
+import Data.UUID as UUID
 import Effect (Effect)
 import Effect.Uncurried (EffectFn2, runEffectFn2)
-import Gargantext.Utils (nbsp, (?))
+import Gargantext.Components.Bootstrap.Types (ModalSizing(..))
+import Gargantext.Hooks.UpdateEffect (useUpdateEffect1')
+import Gargantext.Utils ((?))
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Toestand as T

-foreign import _addClassName :: EffectFn2 Window String Unit
-foreign import _removeClassName :: EffectFn2 Window String Unit
+foreign import _show :: EffectFn2
+  Window
+  String
+  Unit
+
+showModal ::
+     Window
+  -> String
+  -> Effect Unit
+showModal = runEffectFn2 _show
+
+foreign import _hide :: EffectFn2
+  Window
+  String
+  Unit
+
+hideModal ::
+     Window
+  -> String
+  -> Effect Unit
+hideModal = runEffectFn2 _hide
+

 type Props =
-  ( isVisibleBox :: T.Box Boolean
+  ( isVisibleBox              :: T.Box Boolean
  | Options
  )

 type Options =
-  ( id :: String
-  , title :: String
-  , hasBackground :: Boolean
-  , hasCollapsibleBackground :: Boolean
+  ( modalClassName            :: String
+  , title                     :: Maybe String
+  , hasCollapsibleBackground  :: Boolean
+  , hasInnerScroll            :: Boolean
+  , noHeader                  :: Boolean
+  , noBody                    :: Boolean -- ie. Bootstrap Body
+  , size                      :: ModalSizing
  )

 options :: Record Options
 options =
-  { id: ""
-  , title: ""
-  , hasBackground: true
-  , hasCollapsibleBackground: true
+  { modalClassName            : ""
+  , title                     : Nothing
+  , hasCollapsibleBackground  : true
+  , hasInnerScroll            : false
+  , noHeader                  : false
+  , noBody                    : false
+  , size                      : MediumModalSize
  }

 componentName :: String
 componentName = "b-modal"

-vendorName :: String
-vendorName = "modal"
-
+-- | Structural Component for the Bootstrap modal