>>> continue

dist/styles/bootstrap-darkster.css

@@ -7482,6 +7482,23 @@ input[type=range]:-moz-focusring {
   margin-top: 16px;
 }
 
+.graph-doc-list__item {
+  cursor: pointer;
+  background-position: center;
+  background-color: #000000;
+  transition: background 0.4s ease-out;
+}
+.graph-doc-list__item:focus {
+  outline: 0;
+}
+.graph-doc-list__item:hover {
+  background: #212529 radial-gradient(circle, transparent 1%, #212529 1%) center/15000%;
+}
+.graph-doc-list__item:active {
+  background-color: #000000;
+  background-size: 100%;
+  transition: background 0s;
+}
 .graph-doc-list__item__title, .graph-doc-list__item__source, .graph-doc-list__item__date {
   line-height: 1.3;
   margin-bottom: 4px;

dist/styles/bootstrap-default.css

@@ -7435,6 +7435,23 @@ input[type=range]:-moz-focusring {
   margin-top: 16px;
 }
 
+.graph-doc-list__item {
+  cursor: pointer;
+  background-position: center;
+  background-color: #fff;
+  transition: background 0.4s ease-out;
+}
+.graph-doc-list__item:focus {
+  outline: 0;
+}
+.graph-doc-list__item:hover {
+  background: #F8F9FA radial-gradient(circle, transparent 1%, #F8F9FA 1%) center/15000%;
+}
+.graph-doc-list__item:active {
+  background-color: #fff;
+  background-size: 100%;
+  transition: background 0s;
+}
 .graph-doc-list__item__title, .graph-doc-list__item__source, .graph-doc-list__item__date {
   line-height: 1.3;
   margin-bottom: 4px;

dist/styles/bootstrap-greyson.css

@@ -7191,6 +7191,23 @@ input[type=range]:-moz-focusring {
   margin-top: 16px;
 }
 
+.graph-doc-list__item {
+  cursor: pointer;
+  background-position: center;
+  background-color: #fff;
+  transition: background 0.4s ease-out;
+}
+.graph-doc-list__item:focus {
+  outline: 0;
+}
+.graph-doc-list__item:hover {
+  background: #F8F9FA radial-gradient(circle, transparent 1%, #F8F9FA 1%) center/15000%;
+}
+.graph-doc-list__item:active {
+  background-color: #fff;
+  background-size: 100%;
+  transition: background 0s;
+}
 .graph-doc-list__item__title, .graph-doc-list__item__source, .graph-doc-list__item__date {
   line-height: 1.3;
   margin-bottom: 4px;

dist/styles/bootstrap-herbie.css

@@ -7439,6 +7439,23 @@ input[type=range]:-moz-focusring {
   margin-top: 16px;
 }
 
+.graph-doc-list__item {
+  cursor: pointer;
+  background-position: center;
+  background-color: #fff;
+  transition: background 0.4s ease-out;
+}
+.graph-doc-list__item:focus {
+  outline: 0;
+}
+.graph-doc-list__item:hover {
+  background: #F8F9FA radial-gradient(circle, transparent 1%, #F8F9FA 1%) center/15000%;
+}
+.graph-doc-list__item:active {
+  background-color: #fff;
+  background-size: 100%;
+  transition: background 0s;
+}
 .graph-doc-list__item__title, .graph-doc-list__item__source, .graph-doc-list__item__date {
   line-height: 1.3;
   margin-bottom: 4px;

dist/styles/bootstrap-monotony.css

@@ -7440,6 +7440,23 @@ input[type=range]:-moz-focusring {
   margin-top: 16px;
 }
 
+.graph-doc-list__item {
+  cursor: pointer;
+  background-position: center;
+  background-color: #fff;
+  transition: background 0.4s ease-out;
+}
+.graph-doc-list__item:focus {
+  outline: 0;
+}
+.graph-doc-list__item:hover {
+  background: #F8F9FA radial-gradient(circle, transparent 1%, #F8F9FA 1%) center/15000%;
+}
+.graph-doc-list__item:active {
+  background-color: #fff;
+  background-size: 100%;
+  transition: background 0s;
+}
 .graph-doc-list__item__title, .graph-doc-list__item__source, .graph-doc-list__item__date {
   line-height: 1.3;
   margin-bottom: 4px;

src/Gargantext/Components/GraphExplorer/Layout.purs

@@ -12,12 +12,13 @@ import Data.Nullable (null, Nullable)
 import Data.Sequence as Seq
 import Data.Set as Set
 import Data.Tuple (Tuple(..))
+import Data.Tuple.Nested ((/\))
 import Gargantext.Components.App.Data (Boxes)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.GraphExplorer.Resources as Graph
-import Gargantext.Components.GraphExplorer.Toolbar.Controls as Controls
 import Gargantext.Components.GraphExplorer.Sidebar as GES
 import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
+import Gargantext.Components.GraphExplorer.Toolbar.Controls as Controls
 import Gargantext.Components.GraphExplorer.TopBar as GETB
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Config (defaultFrontends)
@@ -84,6 +85,8 @@ layoutCpt = here.component "explorerWriteGraph" cpt where
 
     showSidebar' <- R2.useLive' showSidebar
 
+    showFocus' /\ showFocus <- R2.useBox' false
+
     -- _dataRef <- R.useRef graph
     graphRef <- R.useRef null
 
@@ -165,6 +168,7 @@ layoutCpt = here.component "explorerWriteGraph" cpt where
               , graphId
               , metaData
               , session
+              , showFocus
               }
         ]
       ,
@@ -178,6 +182,15 @@ layoutCpt = here.component "explorerWriteGraph" cpt where
         [
           Controls.controls controls []
         ]
+      ,
+        -- Doc focus
+        R2.if' (showFocus') $
+
+          H.div
+          { className: "graph-layout__focus" }
+          [
+            H.div {} [ H.text "Hello" ]
+          ]
       ,
         -- Content
         H.div

src/Gargantext/Components/GraphExplorer/Sidebar/DocList.purs

@@ -8,6 +8,7 @@ import Data.Foldable (intercalate)
 import Data.Maybe (Maybe(..))
 import Data.Sequence as Seq
 import Data.Tuple.Nested ((/\))
+import Effect (Effect)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.FacetsTable (DocumentsView(..), PagePath, Rows(..), initialPagePath, loadPage, publicationDate)
 import Gargantext.Components.GraphExplorer.Types (GraphSideCorpus(..))
@@ -33,6 +34,7 @@ type TabsProps =
   , query           :: SearchQuery
   , session         :: Session
   , graphSideCorpus :: GraphSideCorpus
+  , showFocus       :: T.Box Boolean
   )
 
 docList :: R2.Leaf TabsProps
@@ -57,6 +59,7 @@ docListCpt = here.component "main" cpt where
           { corpusId: nodeId
           , listId
           }
+      , showFocus
       } _ = do
     -- | States
     -- |
@@ -125,6 +128,7 @@ docListCpt = here.component "main" cpt where
               , path: path'
               , session
               , documentView: (r :: DocumentsView)
+              , callback: const $ T.write_ (true) showFocus
               }
         ]
 
@@ -136,6 +140,7 @@ type ItemProps =
   , frontends    :: Frontends
   , session      :: Session
   , path         :: PagePath
+  , callback     :: Unit -> Effect Unit
   )
 
 item :: R2.Leaf ItemProps
@@ -147,6 +152,7 @@ itemCpt = here.component "item" cpt where
       , path
       , documentView: dv@(DocumentsView { id, title, source })
       , session
+      , callback
       } _ = do
     -- Computed
     let
@@ -162,6 +168,7 @@ itemCpt = here.component "item" cpt where
           [ "graph-doc-list__item"
           , "list-group-item"
           ]
+      , on: { click: callback unit }
       }
       [
         B.div'

src/Gargantext/Components/GraphExplorer/Sidebar/Sidebar.purs

@@ -61,6 +61,7 @@ type Common =
 type Props =
   ( frontends       :: Frontends
   , graph           :: SigmaxT.SGraph
+  , showFocus       :: T.Box Boolean
   | Common
   )
 
@@ -179,6 +180,7 @@ sideTabDataCpt = here.component "sideTabData" cpt
                 , searchType: SearchDoc
                 , selectedNodeIds: selectedNodeIds'
                 , session: props.session
+                , showFocus: props.showFocus
                 }
               ]
         ]
@@ -240,6 +242,7 @@ sideTabCommunityCpt = here.component "sideTabCommunity" cpt
                 , searchType: SearchContact
                 , selectedNodeIds: selectedNodeIds'
                 , session: props.session
+                , showFocus: props.showFocus
                 }
               ]
         ]
@@ -613,6 +616,7 @@ type DocListWrapper =
   , searchType      :: SearchType
   , selectedNodeIds :: SigmaxT.NodeIds
   , session         :: Session
+  , showFocus       :: T.Box Boolean
   )
 
 docListWrapper :: R2.Leaf DocListWrapper
@@ -626,6 +630,7 @@ docListWrapperCpt = here.component "docListWrapper" cpt where
       , searchType
       , selectedNodeIds
       , session
+      , showFocus
       } _ = do
     -- States
     query /\ queryBox <- R2.useBox' Nothing
@@ -664,6 +669,7 @@ docListWrapperCpt = here.component "docListWrapper" cpt where
             , query: query'
             , session
             , graphSideCorpus: toGraphSideCorpus corpusId
+            , showFocus
             }
 
           _ /\ _ ->

src/Gargantext/Components/Nodes/Corpus/Graph/Tabs.purs

-module Gargantext.Components.Nodes.Corpus.Graph.Tabs where
-
-import Prelude hiding (div)
-import Data.Array (fromFoldable)
-import Data.Tuple (Tuple(..))
-import Reactix as R
-import Toestand as T
-
-import Gargantext.Components.GraphExplorer.Types (GraphSideCorpus(..))
-import Gargantext.Components.FacetsTable (docView)
-import Gargantext.Components.Search (SearchQuery)
-import Gargantext.Components.Table as Table
-import Gargantext.Components.Tab as Tab
-import Gargantext.Ends (Frontends)
-import Gargantext.Sessions (Session)
-import Gargantext.Utils.Reactix as R2
-
-here :: R2.Here
-here = R2.here "Gargantext.Components.Nodes.Corpus.Graph.Tabs"
-
-type Props =
-  ( frontends :: Frontends
-  , query     :: SearchQuery
-  , session   :: Session
-  , sides     :: Array GraphSideCorpus
-  )
-
-tabs :: Record Props -> R.Element
-tabs props = R.createElement tabsCpt props []
-
--- TODO no need for Children here
-tabsCpt :: R.Component Props
-tabsCpt = here.component "tabs" cpt
-  where
-    cpt {frontends, query, session, sides} _ = do
-      activeTab <- T.useBox 0
-
-      pure $ Tab.tabs { activeTab, tabs: tabs' }
-      where
-        tabs' = fromFoldable $ tab frontends session query <$> sides
-
-tab :: Frontends -> Session -> SearchQuery -> GraphSideCorpus -> Tuple String R.Element
-tab frontends session query (GraphSideCorpus {corpusId: nodeId, corpusLabel, listId}) =
-  Tuple corpusLabel (docView dvProps)
-  where
-    dvProps   = {frontends, session, nodeId, listId, query, chart, totalRecords: 0, container}
-    chart     = mempty
-    container = Table.graphContainer

src/sass/_legacy/_graph.sass

@@ -186,6 +186,8 @@ $layout-height: calc(100vh - #{ $topbar-height} )
 .graph-doc-list
 
   &__item
+    @include clickable
+    @include ripple-effect($body-bg, $gray-100)
 
     &__title,
     &__source,

src/sass/abstract/_members.scss

@@ -108,11 +108,42 @@
 }
 
 /// Add led effect with the input color
+/// @param {Color} $color
 @mixin led($color) {
   color: $color;
   text-shadow: 0 0 4px brighten($color, 90);
 }
 
+/// Add a base ripple effect on click
+/// @param {Color} $background-color
+/// @param {Color} $wave-color default is a lighten version of bg color
+@mixin ripple-effect(
+  $background-color,
+  $wave-color: lighten($background-color, 15%)
+) {
+  background-position: center;
+  background-color: $background-color;
+  transition: background 0.4s ease-out;
+
+  &:hover {
+    background:
+      $wave-color
+      radial-gradient(
+        circle,
+        transparent 1%,
+        $wave-color 1%
+      )
+      center/15000%;
+  }
+
+  &:active {
+    background-color: $background-color;
+    background-size: 100%;
+    transition: background 0s;
+  }
+}
+
+
 /// Extend element to fit all four positions
 /// @param {value} value [default: 0]
 @mixin fit-positions($value: 0) {

src/sass/abstract/_variables.scss

@@ -4,8 +4,9 @@
 $space-unit: 8px;
 
 // Bootstrap color system
-// * with added shades of gray
+// * with added shades of gray (+)
 $white:    #FFFFFF;
+$gray-50 : #FCFCFC; // (+)
 $gray-100: #F8F9FA;
 $gray-150: #FAFAFA; // (+)
 $gray-175: #F0F0F0; // (+)

src/sass/themes/darkster.scss

@@ -37,6 +37,7 @@ $theme-colors: map.merge(
   )
 );
 
+$gray-50 : #121212; // (+)
 $gray-100: #212529;
 $gray-150: #2E2E2E; // (+)
 $gray-175: #333333; // (+)