[DESIGN] uniform panels of box actions

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

@@ -10,7 +10,7 @@ import Gargantext.Routes (SessionRoute(..))
 import Gargantext.Types (NodeType(..))
 import Gargantext.Components.Forest.Tree.Node.Action (Action(..))
 import Reactix as R
-import Gargantext.Components.Forest.Tree.Node.Tools (submitButton)
+import Gargantext.Components.Forest.Tree.Node.Tools (submitButton, panel)
 import Reactix.DOM.HTML as H
 
 -- TODO Delete with asyncTaskWithType
@@ -20,25 +20,24 @@ deleteNode session nodeId = delete session $ NodeAPI GT.Node (Just nodeId) ""
 -- | Action : Delete
 actionDelete :: NodeType -> (Action -> Aff Unit) -> R.Hooks R.Element
 actionDelete NodeUser _ = do
-  pure $ R.fragment [
-    H.div {style: {margin: "10px"}} 
-          [H.text $ "Yes, we are RGPD compliant!"
+  pure $ panel [ H.div { style: {margin: "10px"}}
+                       [ H.text $ "Yes, we are RGPD compliant!"
                       <> " But you can not delete User Node yet."
                       <> " We are still on development."
                       <> " Thanks for your comprehensin."
                        ]
                ]
+               (H.div {} [])
 
 actionDelete _ dispatch = do
-  pure $ R.fragment [
-    H.div {style: {margin: "10px"}} 
+  pure $ panel [ H.div {style: {margin: "10px"}} 
                 (map (\t -> H.p {} [H.text t]) 
                      [ "Are your sure you want to delete it ?"
                      , "If yes, click again below."
                      ]
                 )
-    , submitButton DeleteNode dispatch
                ]
+               (submitButton DeleteNode dispatch)
 
 
 

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

@@ -5,14 +5,15 @@ import Gargantext.Types (NodeType)
 import Gargantext.Types as GT
 import Reactix as R
 import Reactix.DOM.HTML as H
+import Gargantext.Components.Forest.Tree.Node.Tools (panel)
 
 -- | Action: Show Documentation
 actionDoc :: NodeType -> R.Hooks R.Element
 actionDoc nodeType =
-  pure $ R.fragment [ H.div { style: {margin: "10px"} }
-                            $ [ infoTitle nodeType ]
+  pure $ panel ( [ infoTitle nodeType ]
                  <> (map (\info -> H.p {} [H.text info]) $ docOf nodeType)
-                    ]
+               )
+               ( H.div {} [])
   where
     infoTitle :: NodeType -> R.Element
     infoTitle nt = H.div { style: {margin: "10px"}}

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

@@ -64,6 +64,3 @@ downloadButton href label info = do
                                ]
                     ]
 
-
-
-

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

@@ -9,7 +9,7 @@ import Effect.Aff (Aff, launchAff)
 import Effect.Class (liftEffect)
 import Gargantext.Components.Forest.Tree.Node.Action (Action(..), Props)
 import Gargantext.Components.Forest.Tree.Node.Action.Upload.Types (FileType(..), UploadFileContents(..))
-import Gargantext.Components.Forest.Tree.Node.Tools (fragmentPT, formChoiceSafe)
+import Gargantext.Components.Forest.Tree.Node.Tools (fragmentPT, formChoiceSafe, panel)
 import Gargantext.Components.Lang (Lang(..))
 import Gargantext.Prelude (class Show, Unit, discard, bind, const, id, map, pure, show, unit, void, ($), read)
 import Gargantext.Routes       as GR
@@ -65,10 +65,7 @@ uploadFileViewCpt = R.hooksComponent "G.C.F.T.N.A.U.UploadFileView" cpt
       fileType@(_ /\ setFileType)   <- R.useState'  CSV
       lang@( _chosenLang /\ setLang) <- R.useState' EN
 
-      pure $
-        H.div {className:""}
-              [ H.div {className:"row"}
-                      [ H.div {className:"col-md-6 flex-space-around"}
+      let    bodies = [ H.div { className:"col-md-6 flex-space-around"}
                            [ H.input { type: "file"
                                         , placeholder: "Choose file"
                                         , on: {change: onChangeContents mFile}
@@ -86,10 +83,7 @@ uploadFileViewCpt = R.hooksComponent "G.C.F.T.N.A.U.UploadFileView" cpt
                            [ formChoiceSafe [EN, FR, No_extraction, Universal] EN setLang ]
                    ]
 
-              , H.div { className : "panel-footer" }
-                      [ H.div {} []
-                      , H.div {className:"flex-center"} 
-                              [ uploadButton { dispatch
+      let footer = H.div {} [ uploadButton { dispatch
                                            , fileType
                                            , lang
                                            , id
@@ -97,8 +91,7 @@ uploadFileViewCpt = R.hooksComponent "G.C.F.T.N.A.U.UploadFileView" cpt
                                            , nodeType
                                            }
                             ]
-                      ]
-              ]
+      pure $ panel bodies footer
 
     renderOptionFT :: FileType -> R.Element
     renderOptionFT opt = H.option {} [ H.text $ show opt ]
@@ -299,17 +292,20 @@ uploadTermListViewCpt = R.hooksComponent "G.C.F.T.N.A.U.UploadTermListView" cpt
   where
     cpt {dispatch, id, nodeType} _ = do
       mFile :: R.State (Maybe UploadFile) <- R.useState' Nothing
-
-      pure $ H.div {} [
-        H.div {} [ H.input { type: "file"
+      let body = H.input { type: "file"
                             , placeholder: "Choose file"
                             , on: {change: onChangeContents mFile}
                             }
-                  ]
 
-      , H.div {} [ uploadTermButton { dispatch, id, mFile, nodeType } ]
+      let footer = H.div {} [ uploadTermButton { dispatch
+                                               , id
+                                               , mFile
+                                               , nodeType
+                                               } 
                             ]
 
+      pure $ panel [body] footer
+
     onChangeContents :: forall e. R.State (Maybe UploadFile)
                      -> E.SyntheticEvent_ e
                      -> Effect Unit