[texts] side panel floating style

dist/styles/Styles.css

 #page-wrapper .cache-toggle {
   cursor: pointer;
 }
+#page-wrapper .side-panel {
+  background-color: white;
+  left: 70%;
+  padding: 5px;
+  position: fixed;
+  top: 60px;
+  width: 28%;
+}
 
 .simple-layout {
   height: 100%;

dist/styles/Styles.sass

 #page-wrapper
   .cache-toggle
     cursor: pointer
+  .side-panel
+    background-color: white
+    left: 70%
+    padding: 5px
+    position: fixed
+    top: 60px
+    width: 28%
 
 .simple-layout
   height: 100%

src/Gargantext/Components/App.purs

@@ -16,7 +16,7 @@ import Gargantext.Components.Nodes.Annuaire (annuaireLayout)
 import Gargantext.Components.Nodes.Annuaire.User.Contacts (annuaireUserLayout, userLayout)
 import Gargantext.Components.Nodes.Corpus (corpusLayout)
 import Gargantext.Components.Nodes.Corpus.Dashboard (dashboardLayout)
-import Gargantext.Components.Nodes.Corpus.Document (documentLayout)
+import Gargantext.Components.Nodes.Corpus.Document (documentMainLayout)
 import Gargantext.Components.Nodes.File (fileLayout)
 import Gargantext.Components.Nodes.Frame  (frameLayout)
 import Gargantext.Components.Nodes.Home (homeLayout)
@@ -116,7 +116,7 @@ appCpt = R.hooksComponentWithModule thisModule "app" cpt where
             corpusLayout { nodeId, session }
           ]
           CorpusDocument sid corpusId listId nodeId -> withSession sid $ \session -> forested [
-            documentLayout { listId, mCorpusId: Just corpusId,  nodeId, session } []
+            documentMainLayout { listId, mCorpusId: Just corpusId,  nodeId, session } []
           ]
           Dashboard sid nodeId       -> withSession sid $ \session -> forested [
             dashboardLayout { nodeId, session }
@@ -124,7 +124,7 @@ appCpt = R.hooksComponentWithModule thisModule "app" cpt where
           Document sid listId nodeId ->
             withSession sid $
               \session -> forested [
-                documentLayout { listId, mCorpusId: Nothing, nodeId, session } []
+                documentMainLayout { listId, mCorpusId: Nothing, nodeId, session } []
               ]
           Folder sid nodeId -> withSession sid $ \session -> forested [ corpusLayout { nodeId, session } ]
           FolderPrivate sid nodeId -> withSession sid $ \session -> forested [ corpusLayout { nodeId, session } ]

src/Gargantext/Components/Nodes/Corpus/Document.purs

@@ -42,10 +42,10 @@ docViewWrapper = R.createElement docViewWrapperCpt
 docViewWrapperCpt :: R.Component Props
 docViewWrapperCpt = R.hooksComponentWithModule thisModule "docViewWrapper" cpt
   where
-    cpt { loaded, path } _ = do
+    cpt props@{ loaded } _ = do
       state <- R.useState' $ initialState { loaded }
 
-      pure $ docView { loaded, path, state } []
+      pure $ docView (Record.merge props { state }) []
 
 type DocViewProps = (
   state :: R.State State
@@ -88,7 +88,7 @@ docViewCpt = R.hooksComponentWithModule thisModule "docView" cpt
         [
           R2.row
           [
-            R2.col 8
+            R2.col 12
             [ H.h4 {} [ annotate doc.title ]
             , H.ul { className: "list-group" }
               [ li' [ H.span {} [ text' doc.source ]
@@ -127,12 +127,25 @@ docViewCpt = R.hooksComponentWithModule thisModule "docView" cpt
           NodePoly {hyperdata: Document doc} = document
 
 type LayoutProps = (
-    listId   :: ListId
-  , mCorpusId :: Maybe NodeID
-  , nodeId   :: NodeID
-  , session  :: Session
+    listId         :: ListId
+  , mCorpusId      :: Maybe NodeID
+  , nodeId         :: NodeID
+  , session        :: Session
   )
 
+documentMainLayout :: R2.Component LayoutProps
+documentMainLayout = R.createElement documentMainLayoutCpt
+
+documentMainLayoutCpt :: R.Component LayoutProps
+documentMainLayoutCpt = R.hooksComponentWithModule thisModule "documentMainLayout" cpt
+  where
+    cpt props _ = do
+      pure $ R2.row [
+        R2.col 10 [
+           documentLayout props []
+           ]
+        ]
+
 documentLayout :: R2.Component LayoutProps
 documentLayout = R.createElement documentLayoutCpt
 

src/Gargantext/Components/Nodes/Corpus/Document/Types.purs

@@ -28,8 +28,8 @@ type LoadedData =
   }
 
 type Props = (
-    loaded :: LoadedData
-  , path   :: DocPath
+    loaded         :: LoadedData
+  , path           :: DocPath
   )
 
 -- This is a subpart of NgramsTable.State.

src/Gargantext/Components/Nodes/Texts.purs

@@ -4,7 +4,7 @@ import Prelude
 import Data.Generic.Rep (class Generic)
 import Data.Generic.Rep.Show (genericShow)
 import Data.Maybe (Maybe(..))
-import Data.Tuple (fst)
+import Data.Tuple (fst, snd)
 import Data.Tuple.Nested ((/\))
 import DOM.Simple.Console (log, log2)
 import Effect (Effect)
@@ -52,6 +52,11 @@ textsWithForestCpt = R.hooksComponentWithModule thisModule "textsWithForest" cpt
         , textsProps: textProps@{ session } } _ = do
       controls <- initialControls
 
+      R.useEffect' $ do
+        let trigger _ = do
+              snd controls.showSidePanel $ const InitialClosed
+        R2.setTrigger controls.triggers.triggerSidePanel trigger
+
       pure $ Forest.forestLayoutWithTopBar forestProps [
         topBar { controls } []
       , H.div { className: "col-md-10" } [
@@ -61,7 +66,7 @@ textsWithForestCpt = R.hooksComponentWithModule thisModule "textsWithForest" cpt
             ]
           ]
         ]
-      , H.div { className: "col-md-2" } [
+      , H.div { className: "side-panel" } [
           sidePanel { controls, session } []
         ]
       ]
@@ -218,14 +223,14 @@ tabsCpt = R.hooksComponentWithModule thisModule "tabs" cpt
                                         , sidePanelTriggers } []
 
 type DocViewProps a = (
-    cacheState      :: R.State NT.CacheState
-  , corpusData      :: CorpusData
-  , corpusId        :: NodeID
-  , frontends       :: Frontends
-  , listId          :: ListId
-  -- , path         :: Record DT.Path
-  , session         :: Session
-  , tabType         :: TabSubType a
+    cacheState        :: R.State NT.CacheState
+  , corpusData        :: CorpusData
+  , corpusId          :: NodeID
+  , frontends         :: Frontends
+  , listId            :: ListId
+  -- , path           :: Record DT.Path
+  , session           :: Session
+  , tabType           :: TabSubType a
   , sidePanelTriggers :: Record SidePanelTriggers
   )
 
@@ -355,12 +360,9 @@ sidePanel = R.createElement sidePanelCpt
 sidePanelCpt :: R.Component SidePanelProps
 sidePanelCpt = R.hooksComponentWithModule thisModule "sidePanel" cpt
   where
-    cpt { controls: { showSidePanel: (InitialClosed /\ _) } } _ = do
-      pure $ H.div {} []
-    cpt { controls: { showSidePanel: (Closed /\ _) } } _ = do
-      pure $ H.div {} []
-    cpt { controls: { showSidePanel: (Opened /\ _)
-                    , triggers: { triggerAnnotatedDocIdChange } }
+    cpt { controls: { showSidePanel: (showSidePanel /\ _)
+                    , triggers: { triggerAnnotatedDocIdChange
+                                , triggerSidePanel } }
         , session } _ = do
       (mCorpusId /\ setMCorpusId) <- R.useState' Nothing
       (mListId /\ setMListId) <- R.useState' Nothing
@@ -372,9 +374,11 @@ sidePanelCpt = R.hooksComponentWithModule thisModule "sidePanel" cpt
               -- log2 "[sidePanel trigger] trigger corpusId change" corpusId
               -- log2 "[sidePanel trigger] trigger listId change" listId
               -- log2 "[sidePanel trigger] trigger nodeId change" nodeId
+              -- TODO work on this?
               setMCorpusId $ const $ Just corpusId
               setMListId $ const $ Just listId
               setMNodeId $ const $ Just nodeId
+              R2.callTrigger triggerSidePanel unit
         -- log2 "[sidePanel] trigger" trigger
         R2.setTrigger triggerAnnotatedDocIdChange trigger
 
@@ -382,7 +386,11 @@ sidePanelCpt = R.hooksComponentWithModule thisModule "sidePanel" cpt
           -- log "[sidePanel] clearing triggerAnnotatedDocIdChange"
           R2.clearTrigger triggerAnnotatedDocIdChange
 
-      pure $ H.div { className: "side-panel" } [
+      let mainStyle = case showSidePanel of
+            Opened -> { display: "block" }
+            _      -> { display: "none" }
+
+      pure $ H.div { style: mainStyle } [
         sidePanelDocView { mCorpusId, mListId, mNodeId, session } []
       ]
 
@@ -390,7 +398,7 @@ type SidePanelDocView = (
     mCorpusId :: Maybe NodeID
   , mListId   :: Maybe ListId
   , mNodeId   :: Maybe NodeID
-  , session  :: Session
+  , session   :: Session
   )
 
 sidePanelDocView :: R2.Component SidePanelDocView
@@ -408,6 +416,9 @@ sidePanelDocViewCpt = R.hooksComponentWithModule thisModule "sidePanel" cpt
         , mNodeId: Just nodeId
         , session } _ = do
       -- pure $ H.h4 {} [ H.text txt ]
-      pure $ D.documentLayout { listId, mCorpusId, nodeId, session } []
+      pure $ D.documentLayout { listId
+                              , mCorpusId
+                              , nodeId
+                              , session } []
       where
         txt = "mCorpusId: " <> show mCorpusId <> ", listId: " <> show listId <> ", nodeId: " <> show nodeId

src/Gargantext/Components/Nodes/Texts/Types.purs

@@ -46,7 +46,7 @@ type TextsLayoutControls = (
 
 initialControls :: R.Hooks (Record TextsLayoutControls)
 initialControls = do
-  showSidePanel  <- R.useState' InitialClosed
+  showSidePanel  <- R.useState' Opened
   triggers <- emptySidePanelTriggers
 
   pure $ {