Commit 6ebc49e2 authored by arturo's avatar arturo

[forest] Sidebar issues

* #379
parent 55b2a8c9
Pipeline #2651 failed with stage
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -5,9 +5,11 @@ module Gargantext.Components.Bootstrap.Cloak
import Gargantext.Prelude
import Data.Foldable (elem)
import Data.Maybe (Maybe, fromMaybe)
import Data.Maybe (Maybe(..), fromMaybe)
import Data.Tuple.Nested ((/\))
import Effect (Effect)
import Effect.Timer (setTimeout)
import Gargantext.Hooks.FirstEffect (useFirstEffect')
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Toestand as T
......@@ -17,10 +19,20 @@ type Props =
( defaultSlot :: R.Element
, cloakSlot :: R.Element
, isDisplayed :: Boolean
, idlingPhaseDuration :: Maybe Int -- Milliseconds
| Options
)
type Options =
( idlingPhaseDuration :: Maybe Int -- Milliseconds
, sustainingPhaseDuration :: Maybe Int -- Milliseconds
)
options :: Record Options
options =
{ idlingPhaseDuration : Nothing
, sustainingPhaseDuration : Nothing
}
-- | Abstract component type easing the transition display between a content
-- | component and transitional (or cloak) component
-- |
......@@ -94,8 +106,8 @@ type Props =
-- | , sustainingPhaseDuration : Just 400
-- | }
-- | ```
cloak :: R2.Leaf Props
cloak = R2.leaf component
cloak :: forall r. R2.OptLeaf Options Props r
cloak = R2.optLeaf component options
cname :: String
cname = "b-cloak"
......@@ -107,34 +119,37 @@ component = R.hooksComponent cname cpt where
phase /\ phaseBox <- R2.useBox' (Idle :: Phase)
-- Computed
canCloakBeDisplayed <- pure $ elem phase [ Sustain, Wait ]
canContentBeDisplayed <- pure $ elem phase [ Display ]
let
canCloakBeDisplayed = elem phase [ Sustain, Wait ]
canContentBeDisplayed = elem phase [ Display ]
-- @executeDisplayingPhase
execDisplayingPhase <- pure $ const $
T.write_ Display phaseBox
-- Behaviors
let
-- Helpers
execDisplayingPhaseOr <- pure $ \fn ->
execDisplayingPhaseOr :: (Unit -> Effect Unit) -> Effect Unit
execDisplayingPhaseOr thunk =
if props.isDisplayed
then execDisplayingPhase unit
else fn
then T.write_ Display phaseBox
else thunk unit
execWaitingPhase :: Unit -> Effect Unit
execWaitingPhase _ = execDisplayingPhaseOr $ const $
-- @executeWaitingPhase
execWaitingPhase <- pure $ const $ execDisplayingPhaseOr $
T.write_ Wait phaseBox
-- @executeSustainingPhase
execSustainingPhase <- pure $ const $ execDisplayingPhaseOr $
execSustainingPhase :: Unit -> Effect Unit
execSustainingPhase _ = execDisplayingPhaseOr $ const $
T.write_ Sustain phaseBox
<* setTimeout
(fromMaybe 0 props.sustainingPhaseDuration)
(execWaitingPhase unit)
-- @executeIdlingPhase
execIdlingPhase <- pure $ const $ execDisplayingPhaseOr $
execIdlingPhase :: Unit -> Effect Unit
execIdlingPhase _ = execDisplayingPhaseOr $ const $
T.write_ Idle phaseBox
<* setTimeout
......@@ -142,12 +157,12 @@ component = R.hooksComponent cname cpt where
(execSustainingPhase unit)
-- Effects
R.useEffectOnce' $ execIdlingPhase unit
useFirstEffect' $ execIdlingPhase unit
R.useEffect1' props.isDisplayed $
R.useEffect2' props.isDisplayed phase $
if (props.isDisplayed && phase == Wait)
then execDisplayingPhase unit
then T.write_ Display phaseBox
else pure unit
-- Render
......
......@@ -37,7 +37,8 @@ component :: R.Component Props
component = R.hooksComponent componentName cpt where
cpt props children = do
-- Computed
className <- pure $ intercalate " "
let
className = intercalate " "
-- provided custom className
[ props.className
-- BEM classNames
......
module Gargantext.Components.Bootstrap.Div (div', div_) where
import Reactix as R
import Reactix.DOM.HTML as H
-- | Shorthand for using HTML <div> without writing its text node
div' :: forall r. Record r -> String -> R.Element
div' props content = H.div props [ H.text content ]
-- | Shorthand for using HTML <div> without writing its text node nor props
div_ :: String -> R.Element
div_ content = H.div {} [ H.text content ]
module Gargantext.Components.Bootstrap.ProgressBar(progressBar) where
import Gargantext.Prelude
import Data.Foldable (intercalate)
import Gargantext.Components.Bootstrap.Types (Variant(..))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
type Props =
( value :: Number
| Options
)
type Options =
( className :: String
, variant :: Variant
)
options :: Record Options
options =
{ className : ""
, variant : Primary
}
-- | Structural Component for the Bootsrap "Progress Bar"
-- |
-- | https://getbootstrap.com/docs/4.6/components/progress/
progressBar :: forall r. R2.OptLeaf Options Props r
progressBar = R2.optLeaf component options
componentName :: String
componentName = "b-progress-bar"
bootstrapName :: String
bootstrapName = "progress"
component :: R.Component Props
component = R.hooksComponent componentName cpt where
cpt props _ = do
-- Computed
let
className = intercalate " "
-- provided custom className
[ props.className
-- BEM classNames
, componentName
-- Bootstrap specific classNames
, bootstrapName
]
-- Render
pure $
H.div
{ className }
[
H.div
{ className: intercalate " "
[ "progress-bar"
, "bg-" <> show props.variant
]
, style: { width: (show props.value) <> "%" }
, role: "progress-bar"
, "aria-valuenow": show $ props.value
, "aria-valuemin": "0"
, "aria-valuemax": "100"
}
[]
]
......@@ -5,12 +5,28 @@ module Gargantext.Components.Bootstrap
import Gargantext.Components.Bootstrap.BaseModal(baseModal) as Exports
import Gargantext.Components.Bootstrap.Button(button) as Exports
import Gargantext.Components.Bootstrap.Caveat(caveat) as Exports
import Gargantext.Components.Bootstrap.Cloak(cloak) as Exports
import Gargantext.Components.Bootstrap.Div(div', div_) as Exports
import Gargantext.Components.Bootstrap.Cloak (cloak) as Exports
import Gargantext.Components.Bootstrap.Fieldset(fieldset) as Exports
import Gargantext.Components.Bootstrap.FormInput(formInput) as Exports
import Gargantext.Components.Bootstrap.FormSelect(formSelect, formSelect') as Exports
import Gargantext.Components.Bootstrap.FormTextarea(formTextarea) as Exports
import Gargantext.Components.Bootstrap.Icon(icon) as Exports
import Gargantext.Components.Bootstrap.Label(label', label_) as Exports
import Gargantext.Components.Bootstrap.IconButton(iconButton) as Exports
import Gargantext.Components.Bootstrap.ProgressBar(progressBar) as Exports
import Gargantext.Components.Bootstrap.Spinner(spinner) as Exports
import Gargantext.Components.Bootstrap.Tooltip(tooltip, tooltipBind, tooltipContainer) as Exports
import Gargantext.Components.Bootstrap.Shortcut(
div', div_
, h1', h1_
, h2', h2_
, h3', h3_
, h4', h4_
, h5', h5_
, h6', h6_
, span', span_
, li', li_
, b', b_
, code', code_
, label', label_
) as Exports
This diff is collapsed.
......@@ -71,8 +71,9 @@ component = R.hooksComponent componentName cpt where
bootstrapName <> "-block" $
mempty
]
-- @click
click <- pure $ \event -> onClick status callback event
-- Behaviors
let
click = onClick status callback
-- Render
pure $
......
This diff is collapsed.
module Gargantext.Components.Bootstrap.Label
( label'
, label_
) where
import Reactix as R
import Reactix.DOM.HTML as H
-- | Shorthand for using HTML <label> without writing its text node
label' :: forall r. Record r -> String -> R.Element
label' props content = H.label props [ H.text content ]
-- | Shorthand for using HTML <label> without writing its text node nor props
label_ :: String -> R.Element
label_ content = H.label {} [ H.text content ]
This diff is collapsed.
......@@ -185,7 +185,7 @@ docViewCpt = here.component "docView" cpt where
R.fragment
[
H.div { className: "doc-table-doc-view container1" }
H.div { className: "doc-table-doc-view" }
[ R2.row
[ chart
, if showSearch then searchBar { query } [] else H.div {} []
......
......@@ -131,7 +131,7 @@ docViewCpt = here.component "docView" cpt
else
void $ T.write ipp path
pure $ H.div { className: "facets-doc-view container1" }
pure $ H.div { className: "facets-doc-view" }
[ R2.row
[ chart
, H.div { className: "col-md-12" }
......@@ -408,4 +408,3 @@ derive newtype instance JSON.WriteForeign DeleteDocumentQuery
deleteDocuments :: Session -> Int -> DeleteDocumentQuery -> AffRESTError (Array Int)
deleteDocuments session nodeId =
deleteWithBody session $ NodeAPI Node (Just nodeId) "documents"
This diff is collapsed.
This diff is collapsed.
......@@ -432,7 +432,7 @@ fileTypeViewCpt = here.component "fileTypeView" cpt
droppedFile' <- T.useLive T.unequal droppedFile
case droppedFile' of
Nothing -> pure $ H.div {} []
Nothing -> pure $ mempty
Just df ->
pure $ H.div tooltipProps [ H.div { className: "card"}
[ panelHeading
......
This diff is collapsed.
This diff is collapsed.
......@@ -80,7 +80,7 @@ docViewCpt = here.component "docView" cpt
--[ H.pre { rows: 30 } [
-- H.text (stringifyWithIndent 2 (encodeJson (fst state)))
-- ] ] <>
[ H.div { className: "corpus-doc-view container1" }
[ H.div { className: "corpus-doc-view" }
[ R2.row
[ R2.col 12
[ H.h4 {} [ H.span {} [ badge "title", annotate doc.title [] ] ]
......
This diff is collapsed.
......@@ -87,7 +87,7 @@ publicLayoutCpt = here.component "publicLayout" cpt
pure $
H.span {}
[ H.div { className: "text-center" }
[ H.div { className:"container1", style: { marginBottom: "15px" }}
[ H.div { style: { marginBottom: "15px" }}
[ H.h2 {}
[ H.text "Discover knowledge"
, H.p { className: "lead text-muted center"}
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment