>>> BEGIN

dist/index.html

@@ -13,5 +13,8 @@
         <div id="app"></div>
         <div id="portal"></div>
         <script src="bundle.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
+
     </body>
 </html>

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,67 +8397,48 @@ 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;
+  flex-direction: column;
 }
-#node-popup-tooltip .popup-container > .card {
-  width: auto !important;
-  min-width: 544px;
+.node-popup-tooltip .popup-container > .card {
   border: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   margin-bottom: initial;
 }
-#node-popup-tooltip .popup-container > .card .fa-pencil {
+.node-popup-tooltip .popup-container > .card .fa-pencil {
   color: black;
 }
-#node-popup-tooltip .popup-container > .card .card-body {
+.node-popup-tooltip .popup-container > .card .card-body {
   display: flex;
   justify-content: center;
   background-color: white;
   border: none;
 }
-#node-popup-tooltip .popup-container > .card .card-body .spacer {
+.node-popup-tooltip .popup-container > .card .card-body .spacer {
   margin: 8px;
 }
-#node-popup-tooltip .popup-container .frame-search.card {
+.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;
   width: 1000px;
 }
-#node-popup-tooltip .popup-container-body {
-  max-height: 70vh;
-  overflow-y: auto;
-}
-
 .forest-layout {
   scrollbar-width: none;
   overflow-y: scroll;

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,67 +8350,48 @@ 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;
+  flex-direction: column;
 }
-#node-popup-tooltip .popup-container > .card {
-  width: auto !important;
-  min-width: 544px;
+.node-popup-tooltip .popup-container > .card {
   border: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   margin-bottom: initial;
 }
-#node-popup-tooltip .popup-container > .card .fa-pencil {
+.node-popup-tooltip .popup-container > .card .fa-pencil {
   color: black;
 }
-#node-popup-tooltip .popup-container > .card .card-body {
+.node-popup-tooltip .popup-container > .card .card-body {
   display: flex;
   justify-content: center;
   background-color: white;
   border: none;
 }
-#node-popup-tooltip .popup-container > .card .card-body .spacer {
+.node-popup-tooltip .popup-container > .card .card-body .spacer {
   margin: 8px;
 }
-#node-popup-tooltip .popup-container .frame-search.card {
+.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;
   width: 1000px;
 }
-#node-popup-tooltip .popup-container-body {
-  max-height: 70vh;
-  overflow-y: auto;
-}
-
 .forest-layout {
   scrollbar-width: none;
   overflow-y: scroll;

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,67 +8106,48 @@ 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;
+  flex-direction: column;
 }
-#node-popup-tooltip .popup-container > .card {
-  width: auto !important;
-  min-width: 544px;
+.node-popup-tooltip .popup-container > .card {
   border: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   margin-bottom: initial;
 }
-#node-popup-tooltip .popup-container > .card .fa-pencil {
+.node-popup-tooltip .popup-container > .card .fa-pencil {
   color: black;
 }
-#node-popup-tooltip .popup-container > .card .card-body {
+.node-popup-tooltip .popup-container > .card .card-body {
   display: flex;
   justify-content: center;
   background-color: white;
   border: none;
 }
-#node-popup-tooltip .popup-container > .card .card-body .spacer {
+.node-popup-tooltip .popup-container > .card .card-body .spacer {
   margin: 8px;
 }
-#node-popup-tooltip .popup-container .frame-search.card {
+.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;
   width: 1000px;
 }
-#node-popup-tooltip .popup-container-body {
-  max-height: 70vh;
-  overflow-y: auto;
-}
-
 .forest-layout {
   scrollbar-width: none;
   overflow-y: scroll;

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,67 +8354,48 @@ 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;
+  flex-direction: column;
 }
-#node-popup-tooltip .popup-container > .card {
-  width: auto !important;
-  min-width: 544px;
+.node-popup-tooltip .popup-container > .card {
   border: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   margin-bottom: initial;
 }
-#node-popup-tooltip .popup-container > .card .fa-pencil {
+.node-popup-tooltip .popup-container > .card .fa-pencil {
   color: black;
 }
-#node-popup-tooltip .popup-container > .card .card-body {
+.node-popup-tooltip .popup-container > .card .card-body {
   display: flex;
   justify-content: center;
   background-color: white;
   border: none;
 }
-#node-popup-tooltip .popup-container > .card .card-body .spacer {
+.node-popup-tooltip .popup-container > .card .card-body .spacer {
   margin: 8px;
 }
-#node-popup-tooltip .popup-container .frame-search.card {
+.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;
   width: 1000px;
 }
-#node-popup-tooltip .popup-container-body {
-  max-height: 70vh;
-  overflow-y: auto;
-}
-
 .forest-layout {
   scrollbar-width: none;
   overflow-y: scroll;

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,67 +8355,48 @@ 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;
+  flex-direction: column;
 }
-#node-popup-tooltip .popup-container > .card {
-  width: auto !important;
-  min-width: 544px;
+.node-popup-tooltip .popup-container > .card {
   border: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   margin-bottom: initial;
 }
-#node-popup-tooltip .popup-container > .card .fa-pencil {
+.node-popup-tooltip .popup-container > .card .fa-pencil {
   color: black;
 }
-#node-popup-tooltip .popup-container > .card .card-body {
+.node-popup-tooltip .popup-container > .card .card-body {
   display: flex;
   justify-content: center;
   background-color: white;
   border: none;
 }
-#node-popup-tooltip .popup-container > .card .card-body .spacer {
+.node-popup-tooltip .popup-container > .card .card-body .spacer {
   margin: 8px;
 }
-#node-popup-tooltip .popup-container .frame-search.card {
+.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;
   width: 1000px;
 }
-#node-popup-tooltip .popup-container-body {
-  max-height: 70vh;
-  overflow-y: auto;
-}
-
 .forest-layout {
   scrollbar-width: none;
   overflow-y: scroll;

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.$('.modal-backdrop').remove();
 }

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
+-- |
+-- | @XXX Bootstrap not removing some modal elements on "hide" method
+-- |      This implies that:
+-- |        - a FFI fix has been added to remove left elements
+-- |        - an overlay has been added to synchronise the close button
+-- |        - the keyboard shortcut has been removed
+-- | @https://stackoverflow.com/questions/50168312/bootstrap-4-close-modal-backdrop-doesnt-disappear
+-- |