>>> continue

dist/styles/bootstrap-darkster.css

@@ -8403,42 +8403,33 @@ a:focus, a:hover {
   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 {
   display: flex;
   flex-direction: column;
 }
-.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__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;
+  height: 600px;
 }
+
 .forest-layout {
   scrollbar-width: none;
   overflow-y: scroll;

dist/styles/bootstrap-default.css

@@ -8356,42 +8356,33 @@ a:focus, a:hover {
   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 {
   display: flex;
   flex-direction: column;
 }
-.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__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;
+  height: 600px;
 }
+
 .forest-layout {
   scrollbar-width: none;
   overflow-y: scroll;

dist/styles/bootstrap-greyson.css

@@ -8112,42 +8112,33 @@ a:focus, a:hover {
   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 {
   display: flex;
   flex-direction: column;
 }
-.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__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;
+  height: 600px;
 }
+
 .forest-layout {
   scrollbar-width: none;
   overflow-y: scroll;

dist/styles/bootstrap-herbie.css

@@ -8360,42 +8360,33 @@ a:focus, a:hover {
   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 {
   display: flex;
   flex-direction: column;
 }
-.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__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;
+  height: 600px;
 }
+
 .forest-layout {
   scrollbar-width: none;
   overflow-y: scroll;

dist/styles/bootstrap-monotony.css

@@ -8361,42 +8361,33 @@ a:focus, a:hover {
   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 {
   display: flex;
   flex-direction: column;
 }
-.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__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;
+  height: 600px;
 }
+
 .forest-layout {
   scrollbar-width: none;
   overflow-y: scroll;

src/Gargantext/Components/Bootstrap/Floaty/BaseModal.js

@@ -22,5 +22,6 @@ function hide(window, querySelector) {
   // @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();
 }

src/Gargantext/Components/FolderView/Box.purs

@@ -28,19 +28,24 @@ nodePopupViewCpt :: R.Component NodePopupProps
 nodePopupViewCpt = here.component "nodePopupView" cpt where
   cpt props  _ = do
 
-    pure $ H.div tooltipProps
-      [ H.div { className: "popup-container" }
-        [ H.div { className: "card" }
-          [ panelHeading  props
-          ]]]
+    pure $
+
+      H.div
+      { className: "node-popup-tooltip"
+      , title: "Node settings"
+      }
+      [
+        H.div
+        { className: "popup-container card" }
+        [
+          panelHeading  props
+        ]
+      ]
 
   closePopover props = props.onPopoverClose <<< R.unsafeEventTarget
 
-  tooltipProps = { id: "node-popup-tooltip", title: "Node settings"
-                 , data: { toggle: "tooltip", placement: "right" } }
-
   panelHeading props@{ nodeType } =
-    H.div { className: "card-header" }
+    H.div { className: "popup-container__header card-header" }
     [ R2.row
       [ H.div { className: "col-4" }
         [ H.span { className: GT.fldr nodeType true} [] -- TODO fix names
@@ -49,4 +54,4 @@ nodePopupViewCpt = here.component "nodePopupView" cpt where
         [ H.span { className: "text-primary center" } [ H.text props.name ] ]
       , H.div { className: "col-1" }
         [ H.a { type: "button", on: { click: closePopover props }, title: "Close"
-              , className: glyphicon "window-close" } [] ]]] 
+              , className: glyphicon "window-close" } [] ]]]

src/Gargantext/Components/Forest/Tree/Node.purs

@@ -328,43 +328,6 @@ nodeSpanCpt = here.component "nodeSpan" cpt
             , elevation: Level1
             }
         ,
-          -- @XXX: React Awesome Popover not suited for the feature UX
-          --       We SHOULD use a more common `Modal` type of thing
-          --       As of now, we have issues on z-index management and erratic
-          --       popup close action
-        --   R2.when (showBox) $
-
-        --     Popover.popover
-        --     { arrow: false
-        --     , open: false
-        --     , onClose: \_ -> pure unit
-        --     , onOpen:  \_ -> pure unit
-        --     , ref: popoverRef
-        --     }
-        --     [
-        --       B.iconButton
-        --       { name: "cog"
-        --       , className: "mainleaf__settings-icon"
-        --       -- (cf. Popover callbacks)
-        --       , callback: const R.nothing
-        --       , title:
-        --             "Each node of the Tree can perform some actions.\n"
-        --           <> "Click here to execute one of them."
-        --       , variant: Secondary
-        --       , elevation: Level1
-        --       }
-        --     ,
-        --       nodePopupView
-        --       { boxes
-        --       , dispatch
-        --       , id
-        --       , name
-        --       , nodeType
-        --       , onPopoverClose: const $ onPopoverClose popoverRef
-        --       , session
-        --       }
-        --     ]
-        -- ,
           R.fragment $ flip map currentTasks' \task ->
 
             asyncProgress
@@ -395,7 +358,6 @@ nodeSpanCpt = here.component "nodeSpan" cpt
             , id
             , name
             , nodeType
-            -- , onPopoverClose: const $ onPopoverClose popoverRef
             , onPopoverClose: \_ -> toggleSettingsModal unit
             , session
             }

src/Gargantext/Components/Forest/Tree/Node/Box.purs

@@ -5,11 +5,8 @@ import Gargantext.Prelude
 import Data.Array as A
 import Data.Maybe (Maybe(..))
 import Effect.Aff (Aff)
-import Reactix as R
-import Reactix.DOM.HTML as H
-import Toestand as T
-
 import Gargantext.Components.App.Store (Boxes)
+import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Forest.Tree.Node.Action.Add (addNodeView)
 import Gargantext.Components.Forest.Tree.Node.Action.Contact as Contact
 import Gargantext.Components.Forest.Tree.Node.Action.Delete (actionDelete)
@@ -34,6 +31,9 @@ import Gargantext.Types (ID, Name, prettyNodeType)
 import Gargantext.Types as GT
 import Gargantext.Utils.Glyphicon (glyphicon, glyphiconActive)
 import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
+import Toestand as T
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Forest.Tree.Node.Box"
@@ -53,24 +53,27 @@ nodePopupCpt = here.component "nodePopupView" cpt where
     action <- T.useFocused (_.action) (\a b -> b { action = a }) nodePopup
     nodePopup' <- T.useLive T.unequal nodePopup
 
-    pure $ H.div tooltipProps
-      [ H.div { className: "popup-container" }
-        [ H.div { className: "card" }
-          [ panelHeading renameIsOpen open p
-          , H.div { className: "popup-container-body" }
-            [
-              panelBody    action p
-            ,
-              mPanelAction nodePopup' p
-            ]
-          ]
+    pure $
+
+      H.div
+      { className: "node-popup-tooltip"
+      , title: "Node settings"
+      }
+      [
+        H.div
+        { className: "popup-container card" }
+        [
+          panelHeading renameIsOpen open p
+        ,
+          panelBody    action p
+        ,
+          mPanelAction nodePopup' p
         ]
       ]
+
   closePopover p = p.onPopoverClose <<< R.unsafeEventTarget
-  tooltipProps = { className: "node-popup-tooltip", title: "Node settings"
-                 , data: { toggle: "tooltip", placement: "right" } }
   panelHeading renameIsOpen open p@{ dispatch, id, name, nodeType } =
-    H.div { className: "card-header" }
+    H.div { className: "popup-container__header card-header" }
     [ R2.row
       [ H.div { className: "col-4" }
         [ H.span { className: GT.fldr nodeType true} [] -- TODO fix names
@@ -92,8 +95,8 @@ nodePopupCpt = here.component "nodePopupView" cpt where
   panelBody :: T.Box (Maybe NodeAction) -> Record NodePopupProps -> R.Element
   panelBody nodePopupState { nodeType } =
     let (SettingsBox { doc, buttons }) = settingsBox nodeType in
-    H.div {className: "card-body flex-space-between"}
-    $ [ H.p { className: "spacer" } []
+    H.div {className: "popup-container__body card-body flex-space-between"}
+    $ [ B.wad_ [ "m-1" ]
       , H.div { className: "flex-center" }
         [ buttonClick { action: doc, state: nodePopupState, nodeType } ]
       , H.div {className: "flex-center"}
@@ -114,15 +117,15 @@ nodePopupCpt = here.component "nodePopupView" cpt where
                 , session
                 }
   mPanelAction { action: Nothing } _ =
-    H.div { className: "card-footer" }
+    H.div { className: "popup-container__footer card-footer" }
     [ H.div {className:"center fa-hand-pointer-o"}
       [ H.h5 {} [ H.text " Select available actions of this node" ]
       , H.ul { className: "panel-actions" }
-        [ H.div { className: "fa-thumbs-o-up ok-to-use" }
+        [ H.div { className: "fa-thumbs-o-up panel-actions__ok-to-use" }
           [ H.text " Black: usable" ]
-        , H.div { className: "fa-exclamation-triangle almost-useable" }
+        , H.div { className: "fa-exclamation-triangle panel-actions__almost-useable" }
           [ H.text " Orange: almost useable" ]
-        , H.div { className: "fa-rocket development-in-progress" }
+        , H.div { className: "fa-rocket panel-actions__development-in-progress" }
           [ H.text " Red: development in progress" ]]]]
 
 type ActionState =

src/Gargantext/Components/Login.purs

@@ -49,6 +49,7 @@ loginCpt = here.component "login" cpt where
     mBackend <- R2.useLive' props.backend
     formType <- T.useBox Login
     formType' <- T.useLive T.unequal formType
+
     -- Render
     pure $
 

src/Gargantext/Components/Modals/Modal.js

-'use strict';
-
-exports.modalShow = function(name) {
-    return function(){
-        var myModal = document.getElementById(name);
-        var myModalInstance = new Modal(myModal);
-        myModalInstance.show();
-    };
-};
-
-exports.modalHide = function(name){
-    return function() {
-        var myModal = document.getElementById(name);
-        var myModalInstance = new Modal(myModal);
-        myModalInstance.hide();
-    };
-};

src/Gargantext/Components/Modals/Modal.purs

-module Gargantext.Components.Modals.Modal where
-
-import Prelude (Unit)
-
-import Effect (Effect)
-
-foreign import modalShow :: String -> Effect Unit
-
-foreign import modalHide :: String -> Effect Unit

src/Gargantext/Components/Router.purs

@@ -67,10 +67,9 @@ router :: R2.Leaf Props
 router = R2.leafComponent routerCpt
 routerCpt :: R.Component Props
 routerCpt = here.component "router" cpt where
-  cpt { boxes: boxes@{ handed, showLogin } } _ = do
+  cpt { boxes: boxes@{ handed } } _ = do
     -- States
     handed'     <- R2.useLive' handed
-    showLogin'  <- R2.useLive' showLogin
 
     -- Computed
     let
@@ -100,9 +99,7 @@ routerCpt = here.component "router" cpt where
       H.div
       { className: "router" }
       [
-        -- loginModal { boxes }
-         R2.when showLogin' $
-            login' boxes
+        login' boxes
        , TopBar.topBar { boxes }
        , errorsView { errors: boxes.errors } []
        , H.div { className: "router__inner" }

src/sass/_legacy/_tree.sass

@@ -440,11 +440,11 @@ $node-popup-width: 544px
 .node-popup-tooltip
 
   .panel-actions
-    .almost-useable
+    &__almost-useable
       color: orange
-    .development-in-progress
+    &__development-in-progress
       color: red
-    .ok-to-use
+    &__ok-to-use
       color: black
 
 
@@ -452,31 +452,24 @@ $node-popup-width: 544px
     display: flex
     flex-direction: column
 
-    & > .card
-
-      border: 1px solid rgba(0,0,0,0.2)
-      box-shadow: 0 2px 5px rgba(0,0,0,0.2)
-      margin-bottom: initial
+    &__header
 
       .fa-pencil
         color: black
 
-      .card-body
-        display: flex
-        justify-content: center
-        background-color: white
-        border: none
-        .spacer
-          margin: space-x(1)
-
-    .frame-search.card
-      $frame-width: 1000px
-      $frame-height: 600px
-
-      border: 1px solid rgba(0,0,0,0.2)
-      box-shadow: 0 2px 5px rgba(0,0,0,0.2)
-      width: $frame-width
-      height: $frame-height
+    &__body
+      display: flex
+      justify-content: center
+      background-color: $body-bg
+
+/////////////////////////////////////////
+
+.frame-search.card
+  $frame-width: 1000px
+  $frame-height: 600px
+
+  width: $frame-width
+  height: $frame-height
 
 /////////////////////////////////////////