...
 
Commits (2)
......@@ -9457,6 +9457,14 @@ select.form-control {
padding: 0.25em 0.4em;
font-weight: bold;
}
.phylo-selection-tab__highlight__expand {
position: absolute;
right: 1.25rem;
bottom: 1rem;
}
.phylo-selection-tab__highlight__actions {
margin-top: 16px;
}
.phylo-selection-tab__selection {
margin: 16px 20px;
}
......
......@@ -9410,6 +9410,14 @@ select.form-control {
padding: 0.25em 0.4em;
font-weight: bold;
}
.phylo-selection-tab__highlight__expand {
position: absolute;
right: 1.25rem;
bottom: 1rem;
}
.phylo-selection-tab__highlight__actions {
margin-top: 16px;
}
.phylo-selection-tab__selection {
margin: 16px 20px;
}
......
......@@ -9166,6 +9166,14 @@ select.form-control {
padding: 0.25em 0.4em;
font-weight: bold;
}
.phylo-selection-tab__highlight__expand {
position: absolute;
right: 1.25rem;
bottom: 1rem;
}
.phylo-selection-tab__highlight__actions {
margin-top: 16px;
}
.phylo-selection-tab__selection {
margin: 16px 20px;
}
......
......@@ -9414,6 +9414,14 @@ select.form-control {
padding: 0.25em 0.4em;
font-weight: bold;
}
.phylo-selection-tab__highlight__expand {
position: absolute;
right: 1.25rem;
bottom: 1rem;
}
.phylo-selection-tab__highlight__actions {
margin-top: 16px;
}
.phylo-selection-tab__selection {
margin: 16px 20px;
}
......
......@@ -9415,6 +9415,14 @@ select.form-control {
padding: 0.25em 0.4em;
font-weight: bold;
}
.phylo-selection-tab__highlight__expand {
position: absolute;
right: 1.25rem;
bottom: 1rem;
}
.phylo-selection-tab__highlight__actions {
margin-top: 16px;
}
.phylo-selection-tab__selection {
margin: 16px 20px;
}
......
......@@ -13,6 +13,7 @@ import Effect (Effect)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
import Gargantext.Components.PhyloExplorer.Sidebar.DocList (docListWrapper)
import Gargantext.Components.PhyloExplorer.Sidebar.UpdateTerms (updateTerms)
import Gargantext.Components.PhyloExplorer.Store as PhyloStore
import Gargantext.Components.PhyloExplorer.Types (ExtractedCount(..), ExtractedTerm(..), defaultCacheParams)
import Gargantext.Hooks.FirstEffect (useFirstEffect')
......@@ -47,6 +48,7 @@ component = here.component "main" cpt where
selectedBranch <- R2.useLive' store.selectedBranch
selectedSource <- R2.useLive' store.selectedSource
expandNeighborhood <- R2.useLive' store.expandNeighborhood
expandSelection <- R2.useLive' store.expandSelection
showMore' /\ showMore <- R2.useBox' false
......@@ -79,8 +81,8 @@ component = here.component "main" cpt where
-- | Behaviors
-- |
let
onExpandClick _ = T.modify_ (not) store.expandNeighborhood
onExpandNeighborhoodClick _ = T.modify_ (not) store.expandNeighborhood
onExpandSelectionClick _ = T.modify_ (not) store.expandSelection
-- | Render
-- |
......@@ -195,21 +197,42 @@ component = here.component "main" cpt where
[
H.text "term"
]
,
-- Expand Selection actions
B.iconButton
{ name: expandSelection ?
"caret-up" $
"caret-down"
, className: "phylo-selection-tab__highlight__expand"
, callback: onExpandSelectionClick
}
]
,
H.li
{ className: "list-group-item" }
[
H.a
{ href: "https://en.wikipedia.org/w/index.php?search=\""
<> s
<> "\""
, target: "_blank"
}
-- Selection actions
R2.when expandSelection $
H.li
{ className: "list-group-item" }
[
H.text "Click here for more info"
-- Wikipedia informations
H.a
{ href: "https://en.wikipedia.org/w/index.php?search=\""
<> s
<> "\""
, target: "_blank"
}
[
H.text "Click here for more info"
]
,
-- NGrams edition
H.div
{ className: "phylo-selection-tab__highlight__actions" }
[
updateTerms
{}
]
]
]
]
]
]
......@@ -270,7 +293,7 @@ component = here.component "main" cpt where
"caret-up" $
"caret-down"
, className: "phylo-selection-tab__counter__expand"
, callback: onExpandClick
, callback: onExpandNeighborhoodClick
}
]
,
......
module Gargantext.Components.PhyloExplorer.Sidebar.UpdateTerms where
import Gargantext.Prelude
import Effect (Effect)
import Gargantext.Components.App.Store as AppStore
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), ComponentStatus(..), Variant(..))
import Gargantext.Components.PhyloExplorer.Store as PhyloStore
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
here :: R2.Here
here = R2.here "Gargantext.Components.PhyloExplorer.Sidebar.UpdateTerms"
-- | @NOTE #408: only dealing with single Term selection
-- | (hence not dealing with multiple selection, nor Branch,
-- | nor Source → if so, please change the source code accordingly)
updateTerms :: R2.Leaf ()
updateTerms = R2.leaf updateTermsCpt
updateTermsCpt :: R.Component ()
updateTermsCpt = here.component "main" cpt where
cpt {} _ = do
-- | States
-- |
{ errors
, reloadForest
} <- AppStore.use
{ selectedTerm
, phyloId
} <- PhyloStore.use
selectedTerm' <- R2.useLive' selectedTerm
phyloId' <- R2.useLive' phyloId
-- | Behaviors
-- |
let
callback :: Unit -> Effect Unit
callback _ = pure unit
-- | Render
-- |
pure $
B.buttonGroup
{ collapse: false }
[
B.button
{ variant: ButtonVariant Light
, status: Disabled
, callback
}
[
B.icon
{ name: "circle"
, className: "mr-1 candidate-term"
}
,
H.text "Move as candidate"
]
,
B.button
{ variant: ButtonVariant Light
, status: Disabled
, callback
}
[
B.icon
{ name: "circle"
, className: "mr-1 stop-term"
}
,
H.text "Move as stop"
]
]
......@@ -573,6 +573,21 @@ $decreasing-color: #11638F;
padding: $badge-padding-y $badge-padding-x;
font-weight: bold;
}
&__expand {
// Following <list-group-item> spacing
$position-x: $list-group-item-padding-x;
// Empirical: fit well with icon overlay
$position-y: 1rem;
position: absolute;
right: $position-x;
bottom: $position-y;
}
&__actions {
margin-top: space-x(2);
}
}
&__selection {
......