[tree] new node adding: better name and icon

* Issue #309, feedbacks

src/Gargantext/Components/FolderView/Box.purs

@@ -9,12 +9,12 @@ import Gargantext.Components.Forest.Tree.Node.Settings (SettingsBox(..), setting
 import Gargantext.Components.Forest.Tree.Node.Tools (prettyNodeType)
 import Gargantext.Types (ID, Name)
 import Gargantext.Types as GT
-import Gargantext.Utils (glyphicon)
+import Gargantext.Utils.Glyphicon (glyphicon)
 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.FolderView.Box"
 

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

@@ -13,7 +13,7 @@ import Gargantext.Prelude
 
 import Gargantext.Components.Forest.Tree.Node.Action (Action(..))
 import Gargantext.Components.Forest.Tree.Node.Settings (SettingsBox(..), settingsBox)
-import Gargantext.Components.Forest.Tree.Node.Tools (formChoiceSafe', panel, submitButton)
+import Gargantext.Components.Forest.Tree.Node.Tools (formChoiceSafe, panel, submitButton)
 import Gargantext.Components.InputWithEnter (inputWithEnter)
 import Gargantext.Components.Lang (Lang(..), translate)
 import Gargantext.Routes as GR
@@ -76,7 +76,9 @@ addNodeViewCpt = here.component "addNodeView" cpt where
     nodeType' <- T.useLive T.unequal nodeType
 
     let
-        print nt = charCodeIcon nt
+        print nt = charCodeIcon nt true
+                -- as we are printing within an HTML text node,
+                -- margins will directly rely on content text spacing
                 <> nbsp 4
                 <> translate EN nt -- @TODO "EN" assumption
 
@@ -85,7 +87,7 @@ addNodeViewCpt = here.component "addNodeView" cpt where
           T.write_ (GT.prettyNodeType nt) nodeName
           T.write_ nt nodeType
         (maybeChoose /\ nt') = if length nodeTypes > 1
-                         then ([ formChoiceSafe' nodeTypes Error setNodeType' print ] /\ nodeType')
+                         then ([ formChoiceSafe nodeTypes Error setNodeType' print ] /\ nodeType')
                          else ([H.div {} [H.text $ "Creating a node of type "
                                                 <> show defaultNt
                                                 <> " with name:"

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

@@ -52,7 +52,7 @@ updateDashboardCpt = here.component "updateDashboard" cpt where
     methodBoard' <- T.useLive T.unequal methodBoard
 
     pure $ panel [ -- H.text "Update with"
-                  formChoiceSafe [All, Sources, Authors, Institutes, Ngrams] All (\val -> T.write_ val methodBoard)
+                  formChoiceSafe [All, Sources, Authors, Institutes, Ngrams] All (\val -> T.write_ val methodBoard) show
                  ]
                  (submitButton (UpdateNode $ UpdateNodeParamsBoard { methodBoard: methodBoard' }) dispatch)
 
@@ -65,7 +65,7 @@ updateGraphCpt = here.component "updateGraph" cpt where
     methodGraph' <- T.useLive T.unequal methodGraph
 
     pure $ panel [ -- H.text "Update with"
-                  formChoiceSafe [Order1, Order2] Order1 (\val -> T.write_ val methodGraph)
+                  formChoiceSafe [Order1, Order2] Order1 (\val -> T.write_ val methodGraph) show
                  ]
                  (submitButton (UpdateNode $ UpdateNodeParamsGraph { methodGraph: methodGraph' }) dispatch)
 
@@ -78,7 +78,7 @@ updateNodeListCpt = here.component "updateNodeList" cpt where
     methodList' <- T.useLive T.unequal methodList
 
     pure $ panel [ -- H.text "Update with"
-                  formChoiceSafe [Basic, Advanced, WithModel] Basic (\val -> T.write_ val methodList)
+                  formChoiceSafe [Basic, Advanced, WithModel] Basic (\val -> T.write_ val methodList) show
                  ]
                  (submitButton (UpdateNode $ UpdateNodeParamsList { methodList: methodList' }) dispatch)
 
@@ -91,7 +91,7 @@ updateTextsCpt = here.component "updateTexts" cpt where
     methodTexts' <- T.useLive T.unequal methodTexts
 
     pure $ panel [ -- H.text "Update with"
-                  formChoiceSafe [NewNgrams, NewTexts, Both] NewNgrams (\val -> T.write_ val methodTexts)
+                  formChoiceSafe [NewNgrams, NewTexts, Both] NewNgrams (\val -> T.write_ val methodTexts) show
                  ]
                  (submitButton (UpdateNode $ UpdateNodeParamsTexts { methodTexts: methodTexts' }) dispatch)
 

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

@@ -120,12 +120,14 @@ uploadFileViewCpt = here.component "uploadFileView" cpt
                                  , WOS
                                  , PresseRIS
                                  , Arbitrary
-                                 ] CSV setFileType'
+                                 ] CSV setFileType' show
                 ]
               ]
             , R2.row
               [ H.div {className:"col-6 flex-space-around"}
-                [ formChoiceSafe [EN, FR, No_extraction, Universal] EN setLang' ]
+                [ formChoiceSafe [EN, FR, No_extraction, Universal] EN setLang'
+                  show
+                ]
               ]
             ]
 

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

@@ -26,7 +26,7 @@ import Gargantext.Components.Forest.Tree.Node.Tools (textInputBox, fragmentPT, p
 import Gargantext.Sessions (Session)
 import Gargantext.Types (Name, ID, prettyNodeType)
 import Gargantext.Types as GT
-import Gargantext.Utils (glyphicon, glyphiconActive)
+import Gargantext.Utils.Glyphicon (glyphicon, glyphiconActive)
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H

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

@@ -21,7 +21,8 @@ import Gargantext.Components.InputWithEnter (inputWithEnter)
 import Gargantext.Ends (Frontends, url)
 import Gargantext.Sessions (Session, sessionId)
 import Gargantext.Types as GT
-import Gargantext.Utils (glyphicon, toggleSet)
+import Gargantext.Utils (toggleSet)
+import Gargantext.Utils.Glyphicon (glyphicon)
 import Gargantext.Utils.ReactTooltip as ReactTooltip
 import Gargantext.Utils.Reactix as R2
 
@@ -108,62 +109,7 @@ formEdit defaultValue setter =
 
 -- | Form Choice input
 -- if the list of options is not big enough, a button is used instead
-formChoiceSafe :: forall a b c
-               .  Read  a
-               => Show  a
-               => Array a
-               -> a
-               -> (a -> Effect c)
-               -- -> ((b -> a) -> Effect c)
-               -> R.Element
-formChoiceSafe [] _ _ = H.div {} []
-
-formChoiceSafe [n] _defaultNodeType setNodeType =
-  formButton n setNodeType
-
-formChoiceSafe nodeTypes defaultNodeType setNodeType =
-  formChoice nodeTypes defaultNodeType setNodeType
-
--- | List Form
-formChoice :: forall a b c d
-           .  Read b
-           => Show d
-           => Array d
-           -> b
-           -> (b -> Effect a)
-           -- -> ((c -> b) -> Effect a)
-           -> R.Element
-formChoice nodeTypes defaultNodeType setNodeType =
-  H.div { className: "form-group"}
-        [ R2.select { className: "form-control"
-                    , on: { change: \e -> setNodeType $ fromMaybe defaultNodeType $ read $ R.unsafeEventValue e }
-                    }
-          (map (\opt -> H.option {} [ H.text $ show opt ]) nodeTypes)
-         ]
-
--- | Button Form
--- FIXME: currently needs a click from the user (by default, we could avoid such click)
-formButton :: forall a b c
-           . Show a
-           =>   a
-           -> (a -> Effect c)
-           -- -> ((b -> a) -> Effect c)
-           -> R.Element
-formButton nodeType setNodeType =
-  H.div {} [ H.text $ "Confirm the selection of: " <> show nodeType
-           , bouton
-           ]
-    where
-      bouton = H.button { className : "cold-md-5 btn btn-primary center"
-                        , type : "button"
-                        , title: "Form Button"
-                        , style : { width: "100%" }
-                        , on: { click: \_ -> setNodeType nodeType }
-                        } [H.text $ "Confirmation"]
-
-------------------------------------------------------------------------
-
-formChoiceSafe' :: forall item m
+formChoiceSafe :: forall item m
   .  Read item
   => Show item
   => Array item
@@ -171,11 +117,12 @@ formChoiceSafe' :: forall item m
   -> (item -> Effect m)
   -> (item -> String)
   -> R.Element
-formChoiceSafe' []  _   _   _    = mempty
-formChoiceSafe' [n] _   cbk prnt = formButton' n cbk prnt
-formChoiceSafe' arr def cbk prnt = formChoice' arr def cbk prnt
+formChoiceSafe []  _   _   _    = mempty
+formChoiceSafe [n] _   cbk prnt = formButton n cbk prnt
+formChoiceSafe arr def cbk prnt = formChoice arr def cbk prnt
 
-formChoice' :: forall item m
+-- | List Form
+formChoice :: forall item m
   .  Read item
   => Show item
   => Array item
@@ -183,7 +130,7 @@ formChoice' :: forall item m
   -> (item -> Effect m)
   -> (item -> String)
   -> R.Element
-formChoice' items def cbk prnt =
+formChoice items def cbk prnt =
 
   H.div { className: "form-group"}
   [
@@ -201,12 +148,14 @@ formChoice' items def cbk prnt =
       H.option { value: show opt }
       [ H.text $ prnt opt ]
 
-formButton' :: forall item m
+-- | Button Form
+-- FIXME: currently needs a click from the user (by default, we could avoid such click)
+formButton :: forall item m
   .  item
   -> (item -> Effect m)
   -> (item -> String)
   -> R.Element
-formButton' item cbk prnt =
+formButton item cbk prnt =
 
   H.div {}
   [

src/Gargantext/Types.purs

@@ -3,19 +3,17 @@ module Gargantext.Types where
 import Data.Argonaut (class DecodeJson, class EncodeJson, decodeJson, encodeJson, jsonEmptyObject, (.:), (:=), (~>))
 import Data.Argonaut.Decode.Error (JsonDecodeError(..))
 import Data.Array as A
-import Data.Char (fromCharCode)
 import Data.Either (Either(..))
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Eq (genericEq)
 import Data.Generic.Rep.Ord (genericCompare)
 import Data.Generic.Rep.Show (genericShow)
 import Data.Int (toNumber)
-import Data.Maybe (Maybe(..), fromJust, fromMaybe, maybe)
+import Data.Maybe (Maybe(..), fromMaybe, maybe)
 import Data.String as S
-import Data.String.CodeUnits (singleton)
 import Effect.Aff (Aff)
 import Gargantext.Components.Lang (class Translate, Lang(..))
-import Partial.Unsafe (unsafePartial)
+import Gargantext.Utils.Glyphicon (classNamePrefix, glyphiconToCharCode)
 import Prim.Row (class Union)
 import Reactix as R
 import URI.Query (Query)
@@ -245,52 +243,6 @@ instance readNodeType :: Read NodeType where
 
 ------------------------------------------------------
 
--- (?) UI print Glyphicon directly on text node
---
---    * convert "Glyphicon ForkAwesome" classNames to CharCode [1]
---    * bypass React "dangerousInnerHTML" via vanilla JavaScript coerce [2]
---      (see "forkawesome.css" dist file for conversion matching)
---
--- [1] https://stackoverflow.com/a/54002856/6003907
--- [2] https://github.com/facebook/react/issues/3769#issuecomment-97163582
---
--- @TODO thinking of a purs file for glyphicon conversion?
-charCodeIcon :: NodeType -> String
-charCodeIcon = _toString <<< case _ of
-  Annuaire            -> 0xf2bb
-  Corpus              -> 0xf2b9
-  Dashboard           -> 0xf012
-  Error               -> _defaultCharCode
-  Folder              -> 0xf07b
-  FolderPrivate       -> 0xf023
-  FolderPublic        -> 0xf33f
-  FolderShared        -> 0xf1e0
-  Graph               -> 0xf2eb
-  Individu            -> _defaultCharCode
-  Node                -> _defaultCharCode
-  NodeContact         -> 0xf2bb
-  NodeList            -> 0xf00b
-  NodeUser            -> 0xf007
-  Nodes               -> _defaultCharCode
-  Phylo               -> 0xf126
-  Team                -> 0xf0c0
-  Texts               -> 0xf1ea
-  Tree                -> _defaultCharCode
-  Url_Document        -> _defaultCharCode
-  --
-  NodeFile            -> 0xf15b
-  NodeFrameCalc       -> 0xf1ec
-  NodeFrameNotebook   -> 0xf1c9
-  NodeFrameWrite      -> 0xf15c
-  NodeFrameVisio      -> 0xf03d
-  NodePublic n        -> _defaultCharCode
-
-  where
-    _defaultCharCode = 0xf309
-    _toString i = singleton $ unsafePartial $ fromJust $ fromCharCode i
-
-------------------------------------------------------
-
 instance translateNodeType :: Translate NodeType where
   translate l n = case l of
     FR -> _translateFR n
@@ -324,7 +276,7 @@ _translateFR = case _ of
   NodeFrameNotebook   -> "Carnet de notes"
   NodeFrameWrite      -> "Éditeur de texte"
   NodeFrameVisio      -> "Visio"
-  NodePublic n        -> "Nœud public"
+  NodePublic n        -> _translateFR n
 
 _translateEN :: NodeType -> String
 _translateEN = case _ of
@@ -354,65 +306,72 @@ _translateEN = case _ of
   NodeFrameNotebook   -> "Notebook"
   NodeFrameWrite      -> "Write"
   NodeFrameVisio      -> "Visio"
-  NodePublic n        -> "Public node"
+  NodePublic n        -> _translateEN n
 
 ------------------------------------------------------
 
-fldr :: NodeType -> Boolean -> String
-fldr NodeUser false = "fa fa-user-circle"
-fldr NodeUser true  = "fa fa-user"
+_getIcon :: NodeType -> Boolean -> String
+_getIcon NodeUser false = "user-circle"
+_getIcon NodeUser true  = "user"
 ------------------------------------------------------
-fldr Folder  false  = "fa fa-folder"
-fldr Folder  true   = "fa fa-folder-open-o"
+_getIcon Folder  false  = "folder"
+_getIcon Folder  true   = "folder-open-o"
 ------------------------------------------------------
-fldr FolderPrivate true  = "fa fa-lock"
-fldr FolderPrivate false = "fa fa-lock-circle"
+_getIcon FolderPrivate true  = "lock"
+_getIcon FolderPrivate false = "lock-circle"
 
-fldr FolderShared  true  = "fa fa-share-alt"
-fldr FolderShared  false = "fa fa-share-circle"
-fldr Team  true   = "fa fa-users"
-fldr Team  false  = "fa fa-users-closed"
+_getIcon FolderShared  true  = "share-alt"
+_getIcon FolderShared  false = "share-circle"
+_getIcon Team  true   = "users"
+_getIcon Team  false  = "users-closed"
 
-fldr FolderPublic true  = "fa fa-globe-circle"
-fldr FolderPublic false = "fa fa-globe"
+_getIcon FolderPublic true  = "globe-circle"
+_getIcon FolderPublic false = "globe"
 ------------------------------------------------------
 
-fldr Corpus true  = "fa fa-book"
-fldr Corpus false = "fa fa-book-circle"
+_getIcon Corpus true  = "book"
+_getIcon Corpus false = "book-circle"
+
+_getIcon Phylo _ = "code-fork"
 
-fldr Phylo _ = "fa fa-code-fork"
+_getIcon Graph _ = "hubzilla"
+_getIcon Texts _ = "newspaper-o"
+_getIcon Dashboard _ = "signal"
+_getIcon NodeList _ = "list"
+_getIcon NodeFile _ = "file"  -- TODO depending on mime type we can use fa-file-image etc
 
-fldr Graph _ = "fa fa-hubzilla"
-fldr Texts _ = "fa fa-newspaper-o"
-fldr Dashboard _ = "fa fa-signal"
-fldr NodeList _ = "fa fa-list"
-fldr NodeFile _ = "fa fa-file"  -- TODO depending on mime type we can use fa-file-image etc
+_getIcon Annuaire true  = "address-card-o"
+_getIcon Annuaire false = "address-card"
 
-fldr Annuaire true  = "fa fa-address-card-o"
-fldr Annuaire false = "fa fa-address-card"
+_getIcon NodeContact true  = "address-card-o"
+_getIcon NodeContact false = "address-card"
 
-fldr NodeContact true  = "fa fa-address-card-o"
-fldr NodeContact false = "fa fa-address-card"
+_getIcon NodeFrameWrite true  = "file-text-o"
+_getIcon NodeFrameWrite false = "file-text"
 
-fldr NodeFrameWrite true  = "fa fa-file-text-o"
-fldr NodeFrameWrite false = "fa fa-file-text"
+_getIcon NodeFrameCalc true  = "calculator"
+_getIcon NodeFrameCalc false = "calculator"
 
-fldr NodeFrameCalc true  = "fa fa-calculator"
-fldr NodeFrameCalc false = "fa fa-calculator"
+_getIcon NodeFrameNotebook true  = "file-code-o"
+_getIcon NodeFrameNotebook false = "code"
 
-fldr NodeFrameNotebook true  = "fa fa-file-code-o"
-fldr NodeFrameNotebook false = "fa fa-code"
+_getIcon NodeFrameVisio true  = "video-camera"
+_getIcon NodeFrameVisio false = "video-camera"
 
-fldr NodeFrameVisio true  = "fa fa-video-camera"
-fldr NodeFrameVisio false = "fa fa-video-camera"
 
 
+_getIcon (NodePublic nt) b   = _getIcon nt b
 
-fldr (NodePublic nt) b   = fldr nt b
+_getIcon _        true   = "folder-open"
+_getIcon _        false  = "folder-o"
 
-fldr _        true   = "fa fa-folder-open"
-fldr _        false  = "fa fa-folder-o"
+------------------------------------------------------
+
+fldr :: NodeType -> Boolean -> String
+fldr nt flag = classNamePrefix <> _getIcon nt flag
 
+charCodeIcon :: NodeType -> Boolean -> String
+charCodeIcon nt flag = glyphiconToCharCode $ _getIcon nt flag
 
 publicize :: NodeType -> NodeType
 publicize (NodePublic nt) = NodePublic nt

src/Gargantext/Utils.purs

@@ -61,12 +61,6 @@ invertOrdering EQ = EQ
 _unit :: forall s. Lens' s Unit
 _unit = lens (\_ -> unit) (\s _ -> s)
 
-glyphicon :: String -> String
-glyphicon t = "btn glyphitem fa fa-" <> t
-
-glyphiconActive :: String -> Boolean -> String
-glyphiconActive icon b = glyphicon icon <> if b then " active" else ""
-
 -- | Format a number with specified amount of zero-padding
 zeroPad :: Int -> Int -> String
 zeroPad pad num = zeros <> (show num)