Merge remote-tracking branch 'origin/461-dev-popup-darkmode-rc0.x' into dev-merge

dist/styles/bootstrap-darkster.css

@@ -10104,6 +10104,7 @@ a:focus, a:hover {
 }
 .node-popup-tooltip .panel-actions .b-icon {
   margin-right: 8px;
+  font-size: 11px;
 }
 .node-popup-tooltip .panel-actions__almost-useable {
   color: #f1a50e;
@@ -10112,19 +10113,41 @@ a:focus, a:hover {
   color: #8b2823;
 }
 .node-popup-tooltip .panel-actions__ok-to-use {
-  color: #cccccc;
+  color: #212529;
+  display: none;
 }
 .node-popup-tooltip .popup-container {
   display: flex;
   flex-direction: column;
 }
-.node-popup-tooltip .popup-container__header .fa-pencil {
-  color: black;
-}
 .node-popup-tooltip .popup-container__body {
   display: flex;
   justify-content: center;
   background-color: #000000;
+  padding: 40px 56px;
+  gap: 48px;
+}
+.node-popup-tooltip .popup-container__cta {
+  position: relative;
+}
+.node-popup-tooltip .popup-container__cta__button {
+  font-size: 18px;
+}
+.node-popup-tooltip .popup-container__cta__icon {
+  position: absolute;
+  top: -9px;
+  right: -13px;
+  font-size: 11px;
+}
+.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
+  color: #f1a50e;
+}
+.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
+  color: #8b2823;
+}
+.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
+  color: #212529;
+  display: none;
 }
 
 .frame-search.card {

dist/styles/bootstrap-default.css

@@ -10057,6 +10057,7 @@ a:focus, a:hover {
 }
 .node-popup-tooltip .panel-actions .b-icon {
   margin-right: 8px;
+  font-size: 11px;
 }
 .node-popup-tooltip .panel-actions__almost-useable {
   color: #f1a50e;
@@ -10066,18 +10067,40 @@ a:focus, a:hover {
 }
 .node-popup-tooltip .panel-actions__ok-to-use {
   color: #212529;
+  display: none;
 }
 .node-popup-tooltip .popup-container {
   display: flex;
   flex-direction: column;
 }
-.node-popup-tooltip .popup-container__header .fa-pencil {
-  color: black;
-}
 .node-popup-tooltip .popup-container__body {
   display: flex;
   justify-content: center;
   background-color: #fff;
+  padding: 40px 56px;
+  gap: 48px;
+}
+.node-popup-tooltip .popup-container__cta {
+  position: relative;
+}
+.node-popup-tooltip .popup-container__cta__button {
+  font-size: 18px;
+}
+.node-popup-tooltip .popup-container__cta__icon {
+  position: absolute;
+  top: -9px;
+  right: -13px;
+  font-size: 11px;
+}
+.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
+  color: #f1a50e;
+}
+.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
+  color: #8b2823;
+}
+.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
+  color: #212529;
+  display: none;
 }
 
 .frame-search.card {

dist/styles/bootstrap-greyson.css

@@ -9813,6 +9813,7 @@ a:focus, a:hover {
 }
 .node-popup-tooltip .panel-actions .b-icon {
   margin-right: 8px;
+  font-size: 11px;
 }
 .node-popup-tooltip .panel-actions__almost-useable {
   color: #f1a50e;
@@ -9822,18 +9823,40 @@ a:focus, a:hover {
 }
 .node-popup-tooltip .panel-actions__ok-to-use {
   color: #212529;
+  display: none;
 }
 .node-popup-tooltip .popup-container {
   display: flex;
   flex-direction: column;
 }
-.node-popup-tooltip .popup-container__header .fa-pencil {
-  color: black;
-}
 .node-popup-tooltip .popup-container__body {
   display: flex;
   justify-content: center;
   background-color: #fff;
+  padding: 40px 56px;
+  gap: 48px;
+}
+.node-popup-tooltip .popup-container__cta {
+  position: relative;
+}
+.node-popup-tooltip .popup-container__cta__button {
+  font-size: 18px;
+}
+.node-popup-tooltip .popup-container__cta__icon {
+  position: absolute;
+  top: -9px;
+  right: -13px;
+  font-size: 11px;
+}
+.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
+  color: #f1a50e;
+}
+.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
+  color: #8b2823;
+}
+.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
+  color: #212529;
+  display: none;
 }
 
 .frame-search.card {

dist/styles/bootstrap-herbie.css

@@ -10061,6 +10061,7 @@ a:focus, a:hover {
 }
 .node-popup-tooltip .panel-actions .b-icon {
   margin-right: 8px;
+  font-size: 11px;
 }
 .node-popup-tooltip .panel-actions__almost-useable {
   color: #f1a50e;
@@ -10070,18 +10071,40 @@ a:focus, a:hover {
 }
 .node-popup-tooltip .panel-actions__ok-to-use {
   color: #212529;
+  display: none;
 }
 .node-popup-tooltip .popup-container {
   display: flex;
   flex-direction: column;
 }
-.node-popup-tooltip .popup-container__header .fa-pencil {
-  color: black;
-}
 .node-popup-tooltip .popup-container__body {
   display: flex;
   justify-content: center;
   background-color: #fff;
+  padding: 40px 56px;
+  gap: 48px;
+}
+.node-popup-tooltip .popup-container__cta {
+  position: relative;
+}
+.node-popup-tooltip .popup-container__cta__button {
+  font-size: 18px;
+}
+.node-popup-tooltip .popup-container__cta__icon {
+  position: absolute;
+  top: -9px;
+  right: -13px;
+  font-size: 11px;
+}
+.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
+  color: #f1a50e;
+}
+.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
+  color: #8b2823;
+}
+.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
+  color: #212529;
+  display: none;
 }
 
 .frame-search.card {

dist/styles/bootstrap-monotony.css

@@ -10062,6 +10062,7 @@ a:focus, a:hover {
 }
 .node-popup-tooltip .panel-actions .b-icon {
   margin-right: 8px;
+  font-size: 11px;
 }
 .node-popup-tooltip .panel-actions__almost-useable {
   color: #f1a50e;
@@ -10071,18 +10072,40 @@ a:focus, a:hover {
 }
 .node-popup-tooltip .panel-actions__ok-to-use {
   color: #212529;
+  display: none;
 }
 .node-popup-tooltip .popup-container {
   display: flex;
   flex-direction: column;
 }
-.node-popup-tooltip .popup-container__header .fa-pencil {
-  color: black;
-}
 .node-popup-tooltip .popup-container__body {
   display: flex;
   justify-content: center;
   background-color: #fff;
+  padding: 40px 56px;
+  gap: 48px;
+}
+.node-popup-tooltip .popup-container__cta {
+  position: relative;
+}
+.node-popup-tooltip .popup-container__cta__button {
+  font-size: 18px;
+}
+.node-popup-tooltip .popup-container__cta__icon {
+  position: absolute;
+  top: -9px;
+  right: -13px;
+  font-size: 11px;
+}
+.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
+  color: #f1a50e;
+}
+.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
+  color: #8b2823;
+}
+.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
+  color: #212529;
+  display: none;
 }
 
 .frame-search.card {

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

@@ -3,11 +3,12 @@ module Gargantext.Components.Forest.Tree.Node.Box where
 import Gargantext.Prelude
 
 import Data.Array as A
+import Data.Foldable (intercalate)
 import Data.Maybe (Maybe(..))
 import Effect.Aff (Aff)
 import Gargantext.Components.App.Store (Boxes)
 import Gargantext.Components.Bootstrap as B
-import Gargantext.Components.Bootstrap.Types (Elevation(..))
+import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Elevation(..))
 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)
@@ -31,7 +32,7 @@ import Gargantext.Components.Forest.Tree.Node.Tools (fragmentPT, textInputBox)
 import Gargantext.Sessions (Session)
 import Gargantext.Types (ID, Name, prettyNodeType)
 import Gargantext.Types as GT
-import Gargantext.Utils.Glyphicon (glyphiconActive)
+import Gargantext.Utils ((?))
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -119,7 +120,7 @@ nodePopupCpt = here.component "nodePopupView" cpt where
           { callback: const $ p.closeCallback unit
           , title: "Close"
           , name: "times"
-          , elevation: Level1
+          , elevation: Level2
           }
         ]
       ]
@@ -131,22 +132,42 @@ nodePopupCpt = here.component "nodePopupView" cpt where
     { name: "pencil"
     , title: "Rename"
     , callback: const $ T.write_ true isOpen
-    , elevation: Level1
+    , elevation: Level2
     }
 
   panelBody :: T.Box (Maybe NodeAction) -> Record NodePopupProps -> R.Element
   panelBody nodePopupState { nodeType } =
-    let (SettingsBox { doc, buttons }) = settingsBox nodeType in
-    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"}
-        $ map (\t -> buttonClick { action: t, state: nodePopupState, nodeType }) buttons ]
-        -- FIXME trick to increase the size of the box
-        <> if A.length buttons < 2
-           then [ H.div { className: "col-4" } [] ]
-           else []
+    let (SettingsBox { doc, buttons }) = settingsBox nodeType
+    in
+      H.div
+      { className: intercalate " "
+          [ "popup-container__body"
+          , "card-body"
+          ]
+      } $
+      [
+        buttonClick
+        { action: doc
+        , state: nodePopupState
+        , nodeType
+        }
+      ]
+      <>
+        (
+          buttons <#> \t ->
+
+            buttonClick
+            { action: t
+            , state: nodePopupState
+            , nodeType
+            }
+        )
+
+      -- FIXME trick to increase the size of the box
+      <> if A.length buttons < 2
+          then [ H.div { className: "col-4" } [] ]
+          else []
+
   mPanelAction :: Record NodePopupS -> Record NodePopupProps -> R.Element
   mPanelAction { action: Just action }
                { boxes, dispatch, id, name, nodeType, session } =
@@ -219,27 +240,75 @@ type ButtonClickProps =
   , nodeType :: GT.NodeType
   )
 
-buttonClick :: Record ButtonClickProps -> R.Element
-buttonClick p = R.createElement buttonClickCpt p []
+buttonClick :: R2.Leaf ButtonClickProps
+buttonClick = R2.leaf buttonClickCpt
 
 buttonClickCpt :: R.Component ButtonClickProps
 buttonClickCpt = here.component "buttonClick" cpt where
-  cpt {action: todo, state, nodeType} _ = do
-    action <- T.useLive T.unequal state
-    let className = glyphiconActive (glyphiconNodeAction todo) (action == (Just todo))
-    let style = iconAStyle nodeType todo
-    let click _ = T.write_ (if action == Just todo then Nothing else Just todo) state
-    pure $ H.div { className: "col-1" }
-      [ H.a { style, className, id: show todo, title: show todo, on: { click } } [] ]
-        -- | Open the help indications if selected already
-  iconAStyle n a =
-    { color: hasColor (hasStatus n a)
-    , paddingTop: "6px", paddingBottom: "6px" }
+  cpt { action: todo
+      , state
+      , nodeType
+      } _ = do
+    -- | States
+    -- |
+    action <- R2.useLive' state
+
+    -- | Behaviors
+    -- |
+    let
+      click _ = T.write_ (Just todo) state
+
+    -- | Render
+    pure $
+
+      -- B.iconButton
+      -- { className: intercalate " "
+      --     [ "popup-container__body__button"
+      --     , modifierClassName (hasStatus nodeType todo)
+      --     ]
+      -- , name: glyphiconNodeAction todo
+      -- , title: show todo
+      -- , callback: click
+      -- , elevation: Level2
+      -- , status: action == Just todo ?
+      --     Disabled $
+      --     Enabled
+      -- }
+
+      H.div
+      { className: intercalate " "
+          [ "popup-container__cta"
+          , modifierClassName (hasStatus nodeType todo)
+          ]
+      }
+      [
+        B.iconButton
+        { className: "popup-container__cta__button"
+        , name: glyphiconNodeAction todo
+        , title: show todo
+        , callback: click
+        , elevation: Level2
+        , status: action == Just todo ?
+            Disabled $
+            Enabled
+        }
+      ,
+        B.icon
+        { className: "popup-container__cta__icon"
+        , name: "circle"
+        }
+      ]
+
+  -- | Helpers
+  -- |
 
-hasColor :: Status -> String
-hasColor Stable = "black"
-hasColor Test   = "orange"
-hasColor Dev    = "red"
+  modifierClassName :: Status -> String
+  modifierClassName = case _ of
+    Stable -> blk <> "--ok-to-use"
+    Test   -> blk <> "--almost-useable"
+    Dev    -> blk <> "--development-in-progress"
+    where
+      blk = "popup-container__cta"
 
 type NodeProps =
   ( id       :: ID

src/sass/_legacy/_tree.sass

@@ -453,28 +453,54 @@ $node-popup-width: 544px
 
     .b-icon
       margin-right: space-x(1)
+      font-size: 11px
 
     &__almost-useable
-      color: darken($pastel-orange, 25%)
+      color: $almost-useable
     &__development-in-progress
-      color: darken($pastel-red, 25%)
+      color: $development-in-progress
     &__ok-to-use
-      color: $body-color
+      color: $ok-to-use
+      // (?) avoid unnecessary informations
+      display: none
 
 
   .popup-container
     display: flex
     flex-direction: column
 
-    &__header
-
-      .fa-pencil
-        color: black
-
     &__body
       display: flex
       justify-content: center
       background-color: $body-bg
+      padding: space-x(5) space-x(7)
+      gap: space-x(6)
+
+    &__cta
+      position: relative
+
+      &__button
+        font-size: 18px
+
+      &__icon
+        $offset-y: -9px
+        $offset-x: -13px
+
+        position: absolute
+        top: $offset-y
+        right: $offset-x
+        font-size: 11px
+
+      // @XXX SASS lacking of immediate parent selector
+      &--almost-useable .popup-container__cta__icon
+        color: $almost-useable
+      &--development-in-progress .popup-container__cta__icon
+        color: $development-in-progress
+      &--ok-to-use .popup-container__cta__icon
+        color: $ok-to-use
+        // (?) avoid unnecessary informations
+        display: none
+
 
 /////////////////////////////////////////
 

src/sass/_modules.sass

 @import './modules/_form'
 @import './modules/_layout'
 @import './modules/_annotation'
+@import './modules/_tree'

src/sass/modules/_tree.scss

+/// Colours
+$almost-useable: darken($pastel-orange, 25%);
+$development-in-progress: darken($pastel-red, 25%);
+$ok-to-use: $body-color;