>>> continue

dist/styles/bootstrap-darkster.css

@@ -7827,6 +7827,9 @@ a:focus, a:hover {
   margin-right: 16px;
 }
 
+.mainleaf__update-icon.b-icon-button--overlay::before, .mainleaf__settings-icon.b-icon-button--overlay::before {
+  top: -5px;
+}
 .mainleaf__progress-bar {
   width: 64px;
   position: relative;
@@ -7889,6 +7892,19 @@ a:focus, a:hover {
   top: 5px;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -5px;
+  }
+}
+@-moz-document url-prefix() {
+  .awesome-popover {
+    max-height: 22.5px;
+  }
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -3px;
+  }
+}
 .subtree__node {
   margin-top: 2px;
 }

dist/styles/bootstrap-default.css

@@ -7780,6 +7780,9 @@ a:focus, a:hover {
   margin-right: 16px;
 }
 
+.mainleaf__update-icon.b-icon-button--overlay::before, .mainleaf__settings-icon.b-icon-button--overlay::before {
+  top: -5px;
+}
 .mainleaf__progress-bar {
   width: 64px;
   position: relative;
@@ -7842,6 +7845,19 @@ a:focus, a:hover {
   top: 5px;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -5px;
+  }
+}
+@-moz-document url-prefix() {
+  .awesome-popover {
+    max-height: 22.5px;
+  }
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -3px;
+  }
+}
 .subtree__node {
   margin-top: 2px;
 }

dist/styles/bootstrap-greyson.css

@@ -7536,6 +7536,9 @@ a:focus, a:hover {
   margin-right: 16px;
 }
 
+.mainleaf__update-icon.b-icon-button--overlay::before, .mainleaf__settings-icon.b-icon-button--overlay::before {
+  top: -5px;
+}
 .mainleaf__progress-bar {
   width: 64px;
   position: relative;
@@ -7598,6 +7601,19 @@ a:focus, a:hover {
   top: 5px;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -5px;
+  }
+}
+@-moz-document url-prefix() {
+  .awesome-popover {
+    max-height: 22.5px;
+  }
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -3px;
+  }
+}
 .subtree__node {
   margin-top: 2px;
 }

dist/styles/bootstrap-herbie.css

@@ -7784,6 +7784,9 @@ a:focus, a:hover {
   margin-right: 16px;
 }
 
+.mainleaf__update-icon.b-icon-button--overlay::before, .mainleaf__settings-icon.b-icon-button--overlay::before {
+  top: -5px;
+}
 .mainleaf__progress-bar {
   width: 64px;
   position: relative;
@@ -7846,6 +7849,19 @@ a:focus, a:hover {
   top: 5px;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -5px;
+  }
+}
+@-moz-document url-prefix() {
+  .awesome-popover {
+    max-height: 22.5px;
+  }
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -3px;
+  }
+}
 .subtree__node {
   margin-top: 2px;
 }

dist/styles/bootstrap-monotony.css

@@ -7785,6 +7785,9 @@ a:focus, a:hover {
   margin-right: 16px;
 }
 
+.mainleaf__update-icon.b-icon-button--overlay::before, .mainleaf__settings-icon.b-icon-button--overlay::before {
+  top: -5px;
+}
 .mainleaf__progress-bar {
   width: 64px;
   position: relative;
@@ -7847,6 +7850,19 @@ a:focus, a:hover {
   top: 5px;
 }
 
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -5px;
+  }
+}
+@-moz-document url-prefix() {
+  .awesome-popover {
+    max-height: 22.5px;
+  }
+  .awesome-popover .b-icon-button--overlay::before {
+    bottom: -3px;
+  }
+}
 .subtree__node {
   margin-top: 2px;
 }

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

@@ -31,15 +31,15 @@ type NodeActionsGraphProps =
 nodeActionsGraph :: R2.Component NodeActionsGraphProps
 nodeActionsGraph = R.createElement nodeActionsGraphCpt
 nodeActionsGraphCpt :: R.Component NodeActionsGraphProps
-nodeActionsGraphCpt = here.component "nodeActionsGraph" cpt
-  where
-    cpt { id, graphVersions, session, refresh } _ = do
-      pure $ H.div { className: "node-actions" } [
-        if graphVersions.gv_graph == Just graphVersions.gv_repo then
-          H.div {} []
-        else
-          graphUpdateButton { id, session, refresh }
-      ]
+nodeActionsGraphCpt = here.component "nodeActionsGraph" cpt where
+  cpt { id, graphVersions, session, refresh } _ =
+    let sameVersions = (graphVersions.gv_graph == Just graphVersions.gv_repo)
+    in pure $
+
+      R2.if' (not sameVersions) $
+
+        graphUpdateButton { id, session, refresh }
+
 
 type GraphUpdateButtonProps =
   ( id :: GT.ID
@@ -99,12 +99,9 @@ type NodeActionsNodeListProps =
 nodeActionsNodeList :: Record NodeActionsNodeListProps -> R.Element
 nodeActionsNodeList p = R.createElement nodeActionsNodeListCpt p []
 nodeActionsNodeListCpt :: R.Component NodeActionsNodeListProps
-nodeActionsNodeListCpt = here.component "nodeActionsNodeList" cpt
-  where
-    cpt props _ = do
-      pure $ H.div { className: "node-actions" } [
-        nodeListUpdateButton props
-      ]
+nodeActionsNodeListCpt = here.component "nodeActionsNodeList" cpt where
+  cpt props _ = pure $ nodeListUpdateButton props
+
 
 type NodeListUpdateButtonProps =
   ( listId :: GT.ListId

src/Gargantext/Utils/Popover.purs

 module Gargantext.Utils.Popover where
 
+import Gargantext.Prelude
+
+import DOM.Simple as DOM
 import Data.Maybe (maybe)
 import Data.Nullable (Nullable, toMaybe)
-import DOM.Simple as DOM
 import Effect (Effect)
 import Effect.Uncurried (EffectFn2, runEffectFn2)
 import Reactix as R
-
-import Gargantext.Prelude
+import Record as Record
 
 type PopoverRef = R.Ref (Nullable DOM.Element)
 
@@ -22,8 +23,11 @@ type Props =
 
 foreign import popoverCpt :: R.Component Props
 
+-- | https://github.com/vaheqelyan/react-awesome-popover
 popover :: Record Props -> Array R.Element -> R.Element
-popover = R.rawCreateElement popoverCpt
+popover props children = R.rawCreateElement popoverCpt props' children
+  where
+    props' = Record.merge props { className: "awesome-popover" }
 
 foreign import _setState :: forall a. EffectFn2 DOM.Element a Unit
 

src/sass/_legacy/_tree.sass

@@ -60,10 +60,9 @@ $node-popup-width: 544px
 
 ////////////////////////////////////
 
-$leaf-margin-bottom: 3px
-
 .mainleaf
   $self: &
+  $leaf-margin-bottom: 3px
 
   display: flex
   align-items: center
@@ -212,15 +211,14 @@ $leaf-margin-bottom: 3px
 
   //----------------------------
 
-    &__update-icon,
-    &__settings-icon
-      // altering component overlay offset to fit it with the ".mainleaf" overlay
-      // dimension
-      $aside-icon-offset-y: -5px
+  &__update-icon,
+  &__settings-icon
+    // altering component overlay offset to fit it with the ".mainleaf" overlay
+    // dimension
+    $aside-icon-offset-top: -5px
 
-      &.b-icon-button--overlay::before
-        top: $aside-icon-offset-y
-        bottom: $aside-icon-offset-y
+    &.b-icon-button--overlay::before
+      top: $aside-icon-offset-top
 
   //----------------------------
 
@@ -303,6 +301,30 @@ $leaf-margin-bottom: 3px
         position: absolute
         top: $blank-link-offset-y
 
+// (?) Chrome engine adds extra height to the overlay embedded settings icon
+//        → set an empirical icon overlay position
+@media screen and (-webkit-min-device-pixel-ratio:0)
+  $icon-overlay-bottom: -5px
+
+  .awesome-popover
+
+    .b-icon-button--overlay::before
+      bottom: $icon-overlay-bottom
+
+
+// (?) FireFox engine adds extra height to the embedded settings
+//        → set an empirical fixed height on its wrapper to avoid
+//          an height flickering alteration (on mainleaf hover) ;
+//          and modify the icon overlay position
+@-moz-document url-prefix()
+  $simulated-mainleaf-overlay-height: 22.5px
+  $icon-overlay-bottom: -3px
+
+  .awesome-popover
+    max-height: $simulated-mainleaf-overlay-height
+
+    .b-icon-button--overlay::before
+      bottom: $icon-overlay-bottom
 
 
 ////////////////////////////////////////