Commit 1f173474 authored by arturo's avatar arturo

[phylo] Memiescape (second iteration)

* #219
parent 57cb9f70
Pipeline #2535 failed with stage
in 0 seconds
......@@ -46,3 +46,5 @@ bundle.js
/dist/js/**/*.map
/dist/styles/**/*.map
# IDE specific
.vscode
......@@ -7,7 +7,6 @@
<!-- <link href="styles/bootstrap.min.css" rel="stylesheet"> -->
<link id="bootstrap-css" href="styles/bootstrap-default.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="styles/highlightjs-solarized-light.css" />
<link href="styles/sass.css" rel="stylesheet" type="text/css" />
<style> * {margin: 0; padding: 0; list-style: none;} </style>
</head>
<body>
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -4,14 +4,14 @@
"scripts": {
"generate-purs-packages-nix": "./nix/generate-purs-packages.nix",
"generate-psc-packages-nix": "./nix/generate-packages-json.bash",
"css": "sass src/sass/sass.sass:dist/styles/sass.css && yarn css-themes",
"css": "yarn css-themes",
"css-themes": "yarn css-default-theme && yarn css-dark-theme && yarn css-darkster-theme && yarn css-greyson-theme && yarn css-herbie-theme && yarn css-monotony-theme",
"css-default-theme": "sass src/sass/bootstrap/default.sass:dist/styles/bootstrap-default.css",
"css-default-theme": "sass src/sass/themes/default.scss:dist/styles/bootstrap-default.css",
"css-dark-theme": "cp node_modules/bootstrap-dark/src/bootstrap-dark.css dist/styles/bootstrap-dark.css",
"css-darkster-theme": "sass src/sass/bootstrap/darkster.scss:dist/styles/bootstrap-darkster.css",
"css-greyson-theme": "sass src/sass/bootstrap/greyson.scss:dist/styles/bootstrap-greyson.css",
"css-herbie-theme": "sass src/sass/bootstrap/herbie.scss:dist/styles/bootstrap-herbie.css",
"css-monotony-theme": "sass src/sass/bootstrap/monotony.scss:dist/styles/bootstrap-monotony.css",
"css-darkster-theme": "sass src/sass/themes/darkster.scss:dist/styles/bootstrap-darkster.css",
"css-greyson-theme": "sass src/sass/themes/greyson.scss:dist/styles/bootstrap-greyson.css",
"css-herbie-theme": "sass src/sass/themes/herbie.scss:dist/styles/bootstrap-herbie.css",
"css-monotony-theme": "sass src/sass/themes/monotony.scss:dist/styles/bootstrap-monotony.css",
"docs": "pulp docs -- --format html",
"repl": "pulp repl",
"clean": "rm -Rf output node_modules",
......
module Gargantext.Components.Bootstrap.Cloak
( cloak
) where
import Gargantext.Prelude
import Data.Foldable (elem)
import Data.Maybe (Maybe, fromMaybe)
import Data.Tuple.Nested ((/\))
import Effect.Timer (setTimeout)
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Toestand as T
type Props =
( defaultSlot :: R.Element
, cloakSlot :: R.Element
, isDisplayed :: Boolean
, idlingPhaseDuration :: Maybe Int -- Milliseconds
, sustainingPhaseDuration :: Maybe Int -- Milliseconds
)
-- | Abstract component type easing the transition display between a content
-- | component and transitional (or cloak) component
-- |
-- |
-- | Inputs:
-- | * `defaultSlot :: Element` transclude pattern providing elements
-- | to be finally displayed
-- | * `cloakSlot :: Element` transclude pattern proviging elements
-- | displayed during first phases (see lifecycle explanation below)
-- | * `isDisplayed :: Boolean` flag defining if the main content is
-- | ready to be displayed
-- | * `idlingPhaseDuration :: Maybe Int` if defined, perform idling
-- | phase (see lifecyle explanation below)
-- | * `sustainingPhaseDuration :: Maybe Int` if defined, perform sustaining
-- | phase (see lifecyle explanation below)
-- |
-- |
-- | The lifecycle is structured into 4 phases:
-- | 1. OPTIONAL, a primary idle phase, where no component is being displayed
-- | ↳ why? if the flag switched from "off" to "on" in a particularly fast
-- | pace, it will jump the sustain and wait phases (ie. the display
-- | of the transitional component, see below) which won't be
-- [ needed anymore
-- | 2. OPTIONAL a sustain phase, where the transitional component will be
-- | displayed for a defined amount of time
-- | ↳ why? same heuristic as above, if the switch is too fast, the cloak
-- | will be displayed at such speed that it will create a flickering
-- | effect, this phase will avoid it
-- | 3. a waiting phase, where the cloak will be displayed until the switch
-- | will be set to "on"
-- | 4. a final display phase, where the main content component will be shown
-- |
-- |
-- | Simple transition:
-- |
-- | ```purescript
-- | cloak
-- | { isDisplayed : onPendingFlag
-- | , cloakSlot : blankPlaceholder {}
-- | , defaultSlot : componentToBeDisplayed {} []
-- | , idlingPhaseDuration : Nothing
-- | , sustainingPhaseDuration : Nothing
-- | }
-- | ```
-- |
-- |
-- | Smart transition
-- |
-- | ```purescript
-- | cloak
-- | { isDisplayed : onPendingFlag
-- | , cloakSlot : blankPlaceholder {}
-- | , defaultSlot : componentToBeDisplayed {} []
-- | -- Idling phase set up
-- | --
-- | -- * if the computation for display makes less than 20ms, no
-- | -- transition at all will be displayed, and the content will arrive
-- | -- as soon as the 20ms delay is consumed
-- | -- * if the computation takes more, following phases will be set up
-- | -- (according to the configuration provided)
-- | , idlingPhaseDuration : Just 20
-- | -- Sustaining phase set up
-- | --
-- | -- * now let's say the computation talking above makes 35ms before
-- | -- displaying its content, setting this parameter will avoid a:
-- | -- 35ms (computation) - 20ms (idling) = 15ms (sustaining)
-- | -- * this very short delay will be considered as a UI flickering
-- | -- effect for the user, which is a UX smelly design
-- | -- * by setting the sustaining phase to 400ms, we ensure a period
-- | -- of time that eliminates this effect
-- | , sustainingPhaseDuration : Just 400
-- | }
-- | ```
cloak :: R2.Leaf Props
cloak = R2.leaf component
cname :: String
cname = "b-cloak"
component :: R.Component Props
component = R.hooksComponent cname cpt where
cpt props _ = do
-- State
phase /\ phaseBox <- R2.useBox' (Idle :: Phase)
-- Computed
canCloakBeDisplayed <- pure $ elem phase [ Sustain, Wait ]
canContentBeDisplayed <- pure $ elem phase [ Display ]
-- @executeDisplayingPhase
execDisplayingPhase <- pure $ const $
T.write_ Display phaseBox
-- Helpers
execDisplayingPhaseOr <- pure $ \fn ->
if props.isDisplayed
then execDisplayingPhase unit
else fn
-- @executeWaitingPhase
execWaitingPhase <- pure $ const $ execDisplayingPhaseOr $
T.write_ Wait phaseBox
-- @executeSustainingPhase
execSustainingPhase <- pure $ const $ execDisplayingPhaseOr $
T.write_ Sustain phaseBox
<* setTimeout
(fromMaybe 0 props.sustainingPhaseDuration)
(execWaitingPhase unit)
-- @executeIdlingPhase
execIdlingPhase <- pure $ const $ execDisplayingPhaseOr $
T.write_ Idle phaseBox
<* setTimeout
(fromMaybe 0 props.idlingPhaseDuration)
(execSustainingPhase unit)
-- Effects
R.useEffectOnce' $ execIdlingPhase unit
R.useEffect1' props.isDisplayed $
if (props.isDisplayed && phase == Wait)
then execDisplayingPhase unit
else pure unit
-- Render
pure $
R.fragment
[
R2.if' canCloakBeDisplayed props.cloakSlot
,
R2.if' canContentBeDisplayed props.defaultSlot
]
data Phase =
Idle
| Sustain
| Wait
| Display
derive instance eqPhase :: Eq Phase
module Gargantext.Components.Bootstrap.Caveat(caveat) 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 = ( | Options )
type Options =
( className :: String
, variant :: Variant
)
options :: Record Options
options =
{ className : ""
, variant : Light
}
-- | Smart reference to the <alert> Bootstrap component,
-- | trimming every features regarding the alert system
-- |
-- | https://getbootstrap.com/docs/4.6/components/alerts/
caveat :: forall r. R2.OptComponent Options Props r
caveat = R2.optComponent component options
componentName :: String
componentName = "b-caveat"
bootstrapName :: String
bootstrapName = "alert"
component :: R.Component Props
component = R.hooksComponent componentName cpt where
cpt props children = do
-- Computed
className <- pure $ intercalate " "
-- provided custom className
[ props.className
-- BEM classNames
, componentName
-- Bootstrap specific classNames
, bootstrapName
, bootstrapName <> "-" <> show props.variant
]
-- Render
pure $
H.div
{ className }
children
module Gargantext.Components.Bootstrap.Fieldset
( fieldset
) where
import Gargantext.Prelude
import Data.Array (intercalate)
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
type Props =
( titleSlot :: R.Element
| Options
)
type Options =
( className :: String
)
options :: Record Options
options =
{ className: ""
}
-- | Component simulating a native <fieldset>
-- | (which has been completly reset by Bootstrap libraries)
fieldset :: forall r. R2.OptComponent Options Props r
fieldset = R2.optComponent component options
componentName :: String
componentName = "b-fieldset"
component :: R.Component Props
component = R.hooksComponent componentName cpt where
cpt props@{ titleSlot
} children = do
-- Computed
className <- pure $ intercalate " "
-- provided custom className
[ props.className
-- BEM classNames
, componentName
]
-- Render
pure $
H.section
{ className }
[
H.div
{ className: componentName <> "__legend" }
[ titleSlot ]
,
H.div
{ className: componentName <> "__content" }
children
]
......@@ -3,26 +3,25 @@ module Gargantext.Components.Bootstrap.Spinner(spinner) where
import Gargantext.Prelude
import Data.Foldable (intercalate)
import Gargantext.Components.Bootstrap.Types (SpinnerTheme(..))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
type Props = ( | Options)
type Options =
( theme :: String
( theme :: SpinnerTheme
, className :: String
)
options :: Record Options
options =
{ theme: "border"
, className: ""
{ theme : BorderTheme
, className : ""
}
-- | Structural Component for the Bootstrap spinner
-- |
-- | * theme: `"border" (default) | "grow"`
-- |
-- | https://getbootstrap.com/docs/4.4/components/spinners/
spinner :: forall r. R2.OptLeaf Options Props r
spinner = R2.optLeaf component options
......@@ -43,7 +42,7 @@ component = R.hooksComponent componentName cpt where
-- BEM classNames
, componentName
-- Bootstrap specific classNames
, bootstrapName <> "-" <> props.theme
, bootstrapName <> "-" <> show props.theme
]
-- Render
pure $
......
......@@ -4,7 +4,12 @@ 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.Fieldset(fieldset) as Exports
import Gargantext.Components.Bootstrap.FormInput(formInput) as Exports
import Gargantext.Components.Bootstrap.FormSelect(formSelect) as Exports
import Gargantext.Components.Bootstrap.FormTextarea(formTextarea) as Exports
import Gargantext.Components.Bootstrap.Icon(icon) as Exports
import Gargantext.Components.Bootstrap.Spinner(spinner) as Exports
......@@ -4,7 +4,7 @@ import Gargantext.Prelude
import Data.Foldable (elem, intercalate)
import Effect (Effect)
import Gargantext.Components.Bootstrap.Types (ComponentStatus(..))
import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Sizing(..))
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
......@@ -21,7 +21,7 @@ type Options =
, className :: String
, type :: String
, placeholder :: String
, size :: String
, size :: Sizing
)
options :: Record Options
......@@ -30,13 +30,11 @@ options =
, className : ""
, type : "text"
, placeholder : ""
, size : "md"
, size : MediumSize
}
-- | Structural Component for the Bootstrap input
-- |
-- | * size: `"md" (default) | "sm" | "lg"`
-- |
-- | https://getbootstrap.com/docs/4.1/components/forms/
formInput :: forall r. R2.OptLeaf Options Props r
formInput = R2.optLeaf component options
......@@ -61,7 +59,7 @@ component = R.hooksComponent componentName cpt where
, componentName <> "--" <> show status
-- Bootstrap specific classNames
, bootstrapName
, bootstrapName <> "-" <> props.size
, bootstrapName <> "-" <> show props.size
]
change <- pure $ onChange status callback
......@@ -76,6 +74,7 @@ component = R.hooksComponent componentName cpt where
, placeholder: props.placeholder
, type: props.type
, autoComplete: "off"
, value: props.value
}
-- | * Change event will effectively be triggered according to the
......
This diff is collapsed.
This diff is collapsed.
......@@ -12,7 +12,7 @@ import Data.Foldable (foldl, intercalate)
import Data.Maybe (Maybe(..))
import Effect (Effect)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ComponentStatus(..))
import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), ComponentStatus(..), Variant(..))
import Gargantext.Config.REST (AffRESTError)
import Gargantext.Hooks.FormValidation (VForm, useFormValidation)
import Gargantext.Hooks.FormValidation.Unboxed as FV
......@@ -204,7 +204,7 @@ component = R.hooksComponent "documentFormCreation" cpt where
B.button
{ callback: \_ -> onSubmit
, status: props.status == Deferred ? Deferred $ Enabled
, variant: "primary"
, variant: ButtonVariant Primary
, type: "submit"
, block: true
}
......
......@@ -198,7 +198,7 @@ nodeMainSpanCpt = here.component "nodeMainSpan" cpt
, session }
popOverIcon =
H.a { className: "settings fa fa-cog"
H.a { className: "settings fa fa-cog"
, title : "Each node of the Tree can perform some actions.\n"
<> "Click here to execute one of them." } []
dropProps droppedFile droppedFile' isDragOver isDragOver' =
......@@ -321,6 +321,7 @@ graphNodeActionsCpt = here.component "graphNodeActions" cpt where
graphVersions session graphId = GraphAPI.graphVersions { graphId, session }
errorHandler = logRESTError here "[graphNodeActions]"
listNodeActions :: R2.Leaf NodeActionsCommon
listNodeActions = R2.leafComponent listNodeActionsCpt
listNodeActionsCpt :: R.Component NodeActionsCommon
......@@ -334,4 +335,3 @@ listNodeActionsCpt = here.component "listNodeActions" cpt where
, nodeType: GT.TabNgramType GT.CTabTerms } }
where
errorHandler = logRESTError here "[listNodeActions]"
......@@ -42,7 +42,7 @@ simpleButtonCpt :: R.Component Props
simpleButtonCpt = here.component "simpleButton" cpt
where
cpt {onClick, text} _ = do
pure $ H.button { className: "btn btn-outline-primary"
pure $ H.button { className: "btn btn-outline-secondary"
, on: {click: onClick}
} [ R2.small {} [ H.text text ] ]
......
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.
@import "./components/_grouped.scss"
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