[docs] UI/UX improvements

* #386
* #392

src/Gargantext/Components/Annotation/Menu.purs

--- | A ContextMenU that allows you to add terms to a list
-module Gargantext.Components.Annotation.Menu where
+module Gargantext.Components.Annotation.Menu
+  ( annotationMenu
+  , AnnotationMenu
+  ) where
 
+import Gargantext.Prelude
 
-import Data.Array as A
-import Data.Generic.Rep (class Generic)
-import Data.Eq.Generic (genericEq)
 import Data.Maybe (Maybe(..))
+import Data.String (toLower)
 import Effect (Effect)
-import Reactix as R
-import Reactix.DOM.HTML as HTML
-import Toestand as T
-
-import Gargantext.Prelude
-
+import Gargantext.Components.Annotation.Types (MenuType(..), termClass)
+import Gargantext.Components.Bootstrap as B
+import Gargantext.Components.Bootstrap.Types (ComponentStatus(..))
 import Gargantext.Types (TermList(..), termListName)
-import Gargantext.Components.Annotation.Utils (termBootstrapClass)
-
-import Gargantext.Components.ContextMenu.ContextMenu as CM
 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.Annotation.Menu"
 
-data MenuType = NewNgram | SetTermListItem
-derive instance Generic MenuType _
-instance Eq MenuType where
-  eq = genericEq
-
 type Props =
-  ( list     :: Maybe TermList
-  , menuType :: MenuType
-  , setList  :: TermList -> Effect Unit -- not a state hook setter
+  ( menuRef :: R.Ref (Maybe (Record AnnotationMenu))
   )
 
-type AnnotationMenu = (
-    onClose    :: Effect Unit
+type AnnotationMenu =
+  ( closeCallback :: Unit -> Effect Unit
   , redrawMenu    :: T.Box Boolean
   , x             :: Number
   , y             :: Number
-  | Props
+  , list          :: Maybe TermList
+  , menuType      :: MenuType
+  , setList       :: TermList -> Effect Unit -- not a state hook setter
   )
 
-type AnnotationMenuWrapper =
-  (
-    menuRef :: R.Ref (Maybe (Record AnnotationMenu))
-  )
+annotationMenu :: R2.Leaf Props
+annotationMenu = R2.leaf annotationMenuCpt
 
-eqAnnotationMenu :: Record AnnotationMenu -> Record AnnotationMenu -> Boolean
-eqAnnotationMenu new old = new.list == old.list &&
-                           new.menuType == old.menuType &&
-                           new.x == old.x &&
-                           new.y == old.y
-
-eqAnnotationMenuWrapper :: { new :: Maybe (Record AnnotationMenu)
-                           , old :: Maybe (Record AnnotationMenu) } -> Effect Boolean
-eqAnnotationMenuWrapper { new: Nothing, old: Nothing } = pure $ true
-eqAnnotationMenuWrapper { new: Nothing, old: Just _ } = pure $ false
-eqAnnotationMenuWrapper { new: Just _, old: Nothing } = pure $ false
-eqAnnotationMenuWrapper { new: Just n, old: Just o } = pure $ eqAnnotationMenu n o
-
-annotationMenuWrapper :: R2.Leaf AnnotationMenuWrapper
-annotationMenuWrapper = R2.leafComponent annotationMenuWrapperCpt
-annotationMenuWrapperCpt :: R.Component AnnotationMenuWrapper
-annotationMenuWrapperCpt = here.component "annotationMenuWrapper" cpt where
+annotationMenuCpt :: R.Component Props
+annotationMenuCpt = here.component "main" cpt where
   cpt { menuRef } _ = do
-    case R.readRef menuRef of
-      Nothing -> pure $ HTML.div {} []
-      Just menu -> pure $ annotationMenu menu
-
--- | An Annotation Menu is parameterised by a Maybe Termlist of the
--- | TermList the currently selected text belongs to
-annotationMenu :: R2.Leaf AnnotationMenu
-annotationMenu = R2.leafComponent annotationMenuCpt
-annotationMenuCpt :: R.Component AnnotationMenu
-annotationMenuCpt = here.component "annotationMenu" cpt where
-  cpt { x, y, list, menuType, onClose, redrawMenu, setList } _ = do
-    redrawMenu' <- T.useLive T.unequal redrawMenu
-
-    pure $ CM.contextMenu {x, y, onClose} [
-        annotationMenuInner { list, menuType, setList }
+    -- Render
+    pure $
+
+      R2.fromMaybe (R.readRef menuRef) \props' ->
+
+        B.contextMenu
+        { x: props'.x
+        , y: props'.y
+        , closeCallback: props'.closeCallback
+        } $
+        (addToList props') <$> [ MapTerm, CandidateTerm, StopTerm ]
+
+--------------------------------------------------------------------------
+
+-- addToList :: Record AnnotationMenu -> TermList -> Maybe R.Element
+-- addToList {list: Just t'} t
+--   | t == t'   = Nothing
+
+-- addToList {menuType, setList} t = Just $
+--   B.contextMenuItem
+--   { callback: click }
+--   [
+--     B.icon
+--     { name: "circle"
+--     , className: "mr-2 " <> termClass t
+--     }
+--   ,
+--     H.text (label menuType)
+--   ]
+
+--   where
+--     label NewNgram        = "Add to "    <> (toLower $ termListName t)
+--     label SetTermListItem = "Change to " <> (toLower $ termListName t)
+--     click _ = setList t
+
+addToList :: Record AnnotationMenu -> TermList -> R.Element
+addToList {list: Just t', menuType} t
+  | t == t' =
+    B.contextMenuItem
+    { callback: const R.nothing
+    , status: Disabled
+    }
+    [
+      B.icon
+      { name: "circle"
+      , className: "mr-2 disabled-term"
+      }
+    ,
+      H.text (label t menuType)
+    ]
+
+addToList {menuType, setList} t =
+    B.contextMenuItem
+    { callback: const $ setList t }
+    [
+      B.icon
+      { name: "circle"
+      , className: "mr-2 " <> termClass t
+      }
+    ,
+      H.text (label t menuType)
     ]
 
-annotationMenuInner :: R2.Leaf Props
-annotationMenuInner = R2.leafComponent annotationMenuInnerCpt
-annotationMenuInnerCpt :: R.Component Props
-annotationMenuInnerCpt = here.component "annotationMenuInner" cpt where
-  cpt props _ = pure $ R.fragment $ A.mapMaybe (addToList props) [ MapTerm, CandidateTerm, StopTerm ]
-
--- | Given the TermList to render the item for zand the Maybe TermList the item may belong to, possibly render the menuItem
-addToList :: Record Props -> TermList -> Maybe R.Element
-addToList {list: Just t'} t
-  | t == t'   = Nothing
-addToList {menuType, setList} t = Just $ CM.contextMenuItem {} [ link ]
-  where
-    link = HTML.a { on: { click }, className: className } [ HTML.text (label menuType) ]
-    label NewNgram = "Add to " <> termListName t
-    label SetTermListItem = "Change to " <> termListName t
-    className = "list-group-item list-group-item-" <> (termBootstrapClass t)
-    click _ = setList t
+label :: TermList -> MenuType -> String
+label t NewNgram        = "Add to "    <> (toLower $ termListName t)
+label t SetTermListItem = "Change to " <> (toLower $ termListName t)

src/Gargantext/Components/Bootstrap/Abstract/Cloak.purs

@@ -170,9 +170,9 @@ component = R.hooksComponent cname cpt where
 
       R.fragment
       [
-        R2.if' canCloakBeDisplayed    props.cloakSlot
+        R2.when canCloakBeDisplayed    props.cloakSlot
       ,
-        R2.if' canContentBeDisplayed  props.defaultSlot
+        R2.when canContentBeDisplayed  props.defaultSlot
       ]