Commit 51b1d0ac authored by arturo's avatar arturo

>>> continue

parent 8682b0cd
Pipeline #2680 canceled with stage
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -7,6 +7,7 @@ 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.Fieldset(fieldset) as Exports
import Gargantext.Components.Bootstrap.Fluff(fluff, fluff', fluff_) 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
......
module Gargantext.Components.Bootstrap.Fluff
( fluff
, fluff'
, fluff_
) where
import Gargantext.Prelude
import Data.Foldable (intercalate)
import Reactix as R
import Reactix.DOM.HTML as H
componentName :: String
componentName = "b-fluff"
-- | Structural Component for a simple Element only serving the purpose to add
-- | some classes in it
-- |
-- | Hence the name: Fluff (uncountable noun): Consists of soft threads or
-- | fibres in the form of small, light balls or lump [or a set of utility
-- | classes...]
fluff :: Array String -> Array R.Element -> R.Element
fluff classes children = R.createDOMElement "span" cls children
where
cls = { className: intercalate " " $
[ componentName
] <> classes
}
-- | Shorthand for using <fluff> Component without writing its text node
fluff' :: Array String -> String -> R.Element
fluff' classes text = R.createDOMElement "span" cls chd
where
cls = { className: intercalate " " $
[ componentName
] <> classes
}
chd = [ H.text text ]
-- | Shorthand for using <fluff> Component without any child
fluff_ :: Array String -> R.Element
fluff_ classes = R.createDOMElement "span" cls []
where
cls = { className: intercalate " " $
[ componentName
] <> classes
}
......@@ -16,7 +16,6 @@ import Gargantext.Ends (Frontends)
import Gargantext.Hooks.LinkHandler (useLinkHandler)
import Gargantext.Routes (AppRoute(..))
import Gargantext.Sessions (Session(..), unSessions)
import Gargantext.Utils (nbsp)
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
......@@ -132,9 +131,10 @@ plusCpt = here.component "plus" cpt where
, variant: ButtonVariant Light
}
[
B.icon { name: "universal-access" }
B.icon
{ name: "universal-access" }
,
H.text $ nbsp 1
B.fluff_ [ "d-inline-block", "w-1" ]
,
H.text $ "Log in/out"
]
......@@ -150,7 +150,7 @@ forestLayout :: R2.Leaf Props
forestLayout = R2.leaf forestLayoutCpt
forestLayoutCpt :: R.Memo Props
forestLayoutCpt = R.memo' $ here.component "forestLayout" cpt where
cpt p children = pure $
cpt p _ = pure $
H.div
{ className: "forest-layout" }
......
......@@ -256,7 +256,7 @@ controlsCpt = here.component "controls" cpt
}
[
H.div
{ className: "d-flex justify-content-between _mb-3" }
{ className: "d-flex justify-content-between mb-3" }
[
edgeConfluenceControl
{ range: edgeConfluenceRange
......
......@@ -402,12 +402,9 @@ neighborhoodCpt = R.memo' $ here.component "neighborhood" cpt where
H.div
{ className: "graph-neighborhood__counter" }
[
-- @WIP utility classes component
H.span
{ className: "text-info" }
[
H.text $ show termCount
]
B.fluff'
[ "text-info" ] $
show termCount
,
H.text $ nbsp 1 <> "terms"
]
......@@ -670,14 +667,13 @@ documentation _ =
H.div
{ className: "graph-documentation" }
[
-- @WIP: shortcuts
H.div
{ className: "graph-documentation__text-section" }
[
H.p
{}
[
H.b {} [ H.text "What is a graph? "]
B.b_ "What is a graph? "
,
H.text "Graph is a conveniant tool to explore your documents."
]
......
......@@ -2,7 +2,7 @@ module Gargantext.Components.GraphExplorer.TopBar (topBar) where
import Gargantext.Prelude hiding (max, min)
import Data.Maybe (Maybe(..))
import Data.Maybe (Maybe)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
import Gargantext.Components.GraphExplorer.Search (nodeSearchControl)
......@@ -74,14 +74,12 @@ component = here.component "topBar" cpt where
]
,
-- Search
-- @WIP: R2.fromMaybe_
case mGraph' of
Nothing -> mempty
Just graph ->
nodeSearchControl
{ graph
, multiSelectEnabled
, selectedNodeIds
, className: "graph-topbar__search"
}
R2.fromMaybe_ mGraph' \graph ->
nodeSearchControl
{ graph
, multiSelectEnabled
, selectedNodeIds
, className: "graph-topbar__search"
}
]
......@@ -5,19 +5,20 @@ module Gargantext.Components.Nodes.Corpus.Phylo
import Gargantext.Prelude
import DOM.Simple (document, querySelector)
import Data.Maybe (Maybe(..))
import FFI.Simple ((..), (.=))
import Data.Maybe (Maybe(..), isJust)
import Data.Tuple.Nested ((/\))
import Gargantext.Components.App.Data (Boxes)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.PhyloExplorer.API (get)
import Gargantext.Components.PhyloExplorer.Layout (layout)
import Gargantext.Components.PhyloExplorer.Types (PhyloDataSet)
import Gargantext.Config.REST (logRESTError)
import Gargantext.Hooks.FirstEffect (useFirstEffect')
import Gargantext.Hooks.Loader (useLoader)
import Gargantext.Hooks.Loader (useLoaderEffect)
import Gargantext.Sessions (Session)
import Gargantext.Types (NodeID)
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
type MainProps =
( nodeId :: NodeID
......@@ -35,60 +36,93 @@ phyloLayoutCpt :: R.Component MainProps
phyloLayoutCpt = here.component "main" cpt where
cpt { nodeId, session } _ = do
-- | States
-- |
state' /\ state <- R2.useBox' Nothing
-- | Computed
-- |
let
errorHandler = logRESTError here "[phylo]"
handler (dataset :: PhyloDataSet) =
content
handler (phyloDataSet :: PhyloDataSet) =
layout
{ nodeId
, dataset
, phyloDataSet
}
useLoader
-- | Hooks
-- |
useLoaderEffect
{ errorHandler
, loader: get session
, path: nodeId
, render: handler
, state
}
-- @XXX: Runtime odd behavior
-- cannot use the `useEffect` + its cleanup function within the
-- same `Effect`, otherwise the below cleanup example will be
-- execute at mount
--------------------------------------------------------
-- @XXX: inopinent <div> (see Gargantext.Components.Router) (@TODO?)
R.useEffectOnce' do
mEl <- querySelector document ".main-page__main-route .container"
type ContentProps =
( nodeId :: NodeID
, dataset :: PhyloDataSet
)
case mEl of
Nothing -> R.nothing
Just el -> R2.addClass el [ "d-none" ]
content :: R2.Leaf ContentProps
content = R2.leaf contentCpt
R.useEffectOnce do
pure do
mEl <- querySelector document ".main-page__main-route .container"
contentCpt :: R.Component ContentProps
contentCpt = here.component "content" cpt where
cpt { nodeId, dataset } _ = do
-- Hooks
case mEl of
Nothing -> R.nothing
Just el -> R2.removeClass el [ "d-none" ]
-- @XXX: reset "main-page__main-route" wrapper margin
-- see Gargantext.Components.Router) (@TODO?)
R.useEffectOnce' do
mEl <- querySelector document ".main-page__main-route"
useFirstEffect' do
-- @XXX: inopinent <div> (see Gargantext.Components.Router) (@TODO?)
mEl <- querySelector document ".main-page__main-route .container"
case mEl of
Nothing -> pure unit
Just el -> do
style <- pure $ (el .. "style")
pure $ (style .= "display") "none"
-- @XXX: reset "main-page__main-route" wrapper margin
-- see Gargantext.Components.Router) (@TODO?)
mEl' <- querySelector document ".main-page__main-route"
case mEl' of
Nothing -> pure unit
Just el -> do
style <- pure $ (el .. "style")
pure $ (style .= "padding") "initial"
-- Render
Nothing -> R.nothing
Just el -> R2.addClass el [ "p-0--i" ]
R.useEffectOnce do
pure do
mEl <- querySelector document ".main-page__main-route"
case mEl of
Nothing -> R.nothing
Just el -> R2.removeClass el [ "p-0--i" ]
-- | Render
-- |
pure $
layout
{ nodeId
, phyloDataSet: dataset
B.cloak
{ isDisplayed: isJust state'
, idlingPhaseDuration: Just 150
, cloakSlot:
-- mimicking `PhyloExplorer.layout` preloading template
H.div
{ className: "phylo" }
[
H.div
{ className: "phylo__spinner-wrapper" }
[
B.spinner
{ className: "phylo__spinner" }
]
]
, defaultSlot:
R2.fromMaybe_ state' handler
}
......@@ -5,17 +5,15 @@ module Gargantext.Components.Nodes.Corpus.Graph
import Gargantext.Prelude
import DOM.Simple (document, querySelector)
import Data.Maybe (Maybe(..))
import Data.Maybe (Maybe(..), isJust)
import Data.Set as Set
import Data.Tuple (Tuple(..))
import Data.Tuple.Nested ((/\))
import FFI.Simple ((..), (.=))
import Gargantext.Components.App.Data (Boxes)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.GraphExplorer.Layout (convert, layout)
import Gargantext.Components.GraphExplorer.Types as GET
import Gargantext.Config.REST (AffRESTError, logRESTError)
import Gargantext.Hooks.FirstEffect (useFirstEffect')
import Gargantext.Hooks.Loader (useLoaderEffect)
import Gargantext.Hooks.Sigmax.Types as SigmaxT
import Gargantext.Routes (SessionRoute(NodeAPI))
......@@ -62,45 +60,61 @@ graphLayoutCpt = here.component "explorerLayout" cpt where
, state
}
useFirstEffect' do
-- @XXX: inopinent <div> (see Gargantext.Components.Router) (@TODO?)
-- @XXX: Runtime odd behavior
-- cannot use the `useEffect` + its cleanup function within the
-- same `Effect`, otherwise the below cleanup example will be
-- execute at mount
-- @XXX: inopinent <div> (see Gargantext.Components.Router) (@TODO?)
R.useEffectOnce' do
mEl <- querySelector document ".main-page__main-route .container"
case mEl of
Nothing -> R.nothing
Just el -> R2.addClass el [ "d-none" ]
R.useEffectOnce do
pure do
mEl <- querySelector document ".main-page__main-route .container"
case mEl of
Nothing -> R.nothing
Just el -> R2.removeClass el [ "d-none" ]
-- @XXX: reset "main-page__main-route" wrapper margin
-- see Gargantext.Components.Router) (@TODO?)
R.useEffectOnce' do
mEl <- querySelector document ".main-page__main-route"
case mEl of
Nothing -> pure unit
Just el -> do
style <- pure $ (el .. "style")
pure $ (style .= "display") "none"
-- @XXX: reset "main-page__main-route" wrapper margin
-- see Gargantext.Components.Router) (@TODO?)
mEl' <- querySelector document ".main-page__main-route"
case mEl' of
Nothing -> pure unit
Just el -> do
style <- pure $ (el .. "style")
pure $ (style .= "padding") "initial"
Nothing -> R.nothing
Just el -> R2.addClass el [ "p-0--i" ]
R.useEffectOnce do
pure do
mEl <- querySelector document ".main-page__main-route"
case mEl of
Nothing -> R.nothing
Just el -> R2.removeClass el [ "p-0--i" ]
-- | Render
-- |
-- @WIP: cloak & R2.fromMaybe_
pure $
R.fragment
[
case state' of
Nothing ->
H.div
{ className: "graph-loader" }
[
B.spinner
{ className: "graph-loader__spinner" }
]
Just s ->
handler s
]
B.cloak
{ isDisplayed: isJust state'
, idlingPhaseDuration: Just 150
, cloakSlot:
H.div
{ className: "graph-loader" }
[
B.spinner
{ className: "graph-loader__spinner" }
]
, defaultSlot:
R2.fromMaybe_ state' handler
}
where
errorHandler = logRESTError here "[explorerLayout]"
......
......@@ -10,6 +10,8 @@ import Reactix (nothing, thenNothing)
import Reactix as R
-- | Hook triggered on first mount event only
-- |
-- | /!\ @TODO cleanup function not working
useFirstMount :: R.Hooks (Boolean)
useFirstMount = do
firstMount <- R.useRef true
......
@import "./base/_reset.scss"
@import "./base/_general.scss"
@import "./base/_form.scss"
@import "./base/_layout.scss"
@import "./base/_nav.scss"
......
......@@ -4,7 +4,6 @@ $layout-height: calc(100vh - #{ $topbar-height} )
/////////////////////////////////////////////
// @WIP
.graph-loader
width: 100%
height: 100%
......@@ -20,7 +19,7 @@ $layout-height: calc(100vh - #{ $topbar-height} )
// (?) `centered` mixin will not work here, due to Bootstrap process
// interfering with the transform rule
top: calc( 50% - #{ $size / 2 } )
left: calc( 50% + #{ $size / 2 } )
left: calc( 50% - #{ $size / 2 } )
/////////////////////////////////////////////
......@@ -86,7 +85,7 @@ $layout-height: calc(100vh - #{ $topbar-height} )
/////////////////////////////////////////////
.graph-sidebar
@extend %sidebar
@include sidebar
$margin-x: $sidebar-tab-margin-x
$margin-y: space-x(2)
......@@ -133,13 +132,9 @@ $layout-height: calc(100vh - #{ $topbar-height} )
font-size: 15px
line-height: 1.5
// @WIP: remove "_reboot.scss"
p
margin-bottom: space-x(1)
ul
margin-bottom: revert
li
list-style-type: circle
padding-left: space-x(0.5)
......@@ -180,8 +175,6 @@ $layout-height: calc(100vh - #{ $topbar-height} )
&__badge
white-space: normal
word-break: break-word
// remove "_reboot.scss" line height
line-height: initial
&:not(:last-child)
margin-bottom: space-x(0.75)
......@@ -233,11 +226,7 @@ $layout-height: calc(100vh - #{ $topbar-height} )
flex-basis: calc(50% - #{ $item-margin * 2 })
/////////////////////////////////////////////////////
// Atlas button animation
// @WIP: better management ("_animation.scss", etc)
.on-running-animation .b-icon
animation-name: pulse
animation-duration: 0.5s
......@@ -245,10 +234,3 @@ $layout-height: calc(100vh - #{ $topbar-height} )
animation-direction: alternate
animation-iteration-count: infinite
animation-play-state: running
@keyframes pulse
from
transform: scale(1)
to
transform: scale(1.1)
......@@ -9,6 +9,11 @@
&__tree-switcher
margin-right: space-x(1)
&__tree-switcher
$fixed-width: 136px
width: $fixed-width
// add hovering effect
&.navbar-dark .navbar-text:hover
color: $navbar-dark-hover-color
......
......@@ -494,7 +494,7 @@ $decreasing-color: #11638F;
////////////////////////////////////////////////////////////////
.phylo-sidebar {
@extend %sidebar;
@include sidebar;
}
.phylo-details-tab {
......@@ -548,7 +548,6 @@ $decreasing-color: #11638F;
&__item {
white-space: normal;
word-break: break-word;
// remove "_reboot.scss" line height
line-height: initial;
&:not(:last-child) {
......
......@@ -168,11 +168,6 @@ $leaf-margin-bottom: 3px
@include left-handed
margin-left: space-x(1)
// @TODO: handle default <a> color (override "_reboot.scss" rules or
// whole file?)
a
color: $body-color
// preparing "before" content (see "&--selected", "&--file-dropped")
&::before
// margin for the before background
......
@use 'sass:map';
/// Global spacing value
$space-unit: 8px;
/// Misc
$overlay-radius: 5px;
// Bootstrap color system
// * with added shades of gray
$white: #FFFFFF;
$gray-100: #F8F9FA;
$gray-150: #FAFAFA; // (+)
$gray-175: #F0F0F0; // (+)
$gray-200: #E9ECEF;
$gray-300: #DEE2E6;
$gray-400: #CED4DA;
$gray-500: #ADB5BD;
$gray-600: #6C757D;
$gray-700: #495057;
$gray-800: #343A40;
$gray-900: #212529;
$black: #000000;
/// Z-Index Management
/// @link https://medium.com/alistapart/sassier-z-index-management-for-complex-layouts-4540717a9488
......
......@@ -46,3 +46,7 @@
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.1); }
}
......@@ -12,7 +12,6 @@
label {
font-weight: 600;
margin-bottom: initial; // reset Bootstrap "_reboot.scss"
}
&--sub {
......
/// Opinionated box-sizing
/// @link https://www.paulirish.com/2012/box-sizing-border-box-ftw/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/// Make images easier to work with
/// @link https://hankchizljaw.com/wrote/a-modern-css-reset/
img {
max-width: 100%;
display: block;
}
/// Remove hyperlink very first interaction (not including in "_reset.scss"
/// as this interaction came as an intricated-native feature)
// a:focus,a:visited,a:active{
// outline: none;
// }
// Colors based on Chromium engine
// (every browser renders its input range on its own, here we are trying
// to add some consistency)
$range-bg-color: #EFEFEF
$range-border-color: #B2B2B2
$range-bg-progress-color: #0075FF
$range-bg-color: $gray-175
$range-border-color: $gray-400
$range-bg-progress-color: $secondary
$range-height: 8px
$range-radius: 3px
$knob-size: 14px
......@@ -98,9 +98,6 @@ $knob-size: 14px
font-size: 14px
color: $gray-700
// @TODO: override "_reboot.scss"
margin-bottom: revert
&__field
position: relative
......@@ -124,6 +121,9 @@ input[type=range]
// one → set only background range
// * unable to position the input ideally → have to rely on
// absolute + position
input[type=range]
-webkit-appearance: none
input[type=range]::-webkit-slider-runnable-track
$chromium-offset-y: 4px
......@@ -136,9 +136,16 @@ input[type=range]::-webkit-slider-runnable-track
top: $chromium-offset-y
input[type=range]::-webkit-slider-thumb
$chromium-offset-y: -5px
$chromium-offset-y: -4px
transform: translateY(-5px)
-webkit-appearance: none
transform: translateY($chromium-offset-y)
border: none
height: $knob-size
width: $knob-size
border-radius: 50%
background-color: $range-bg-progress-color
box-shadow: 0 0 1px 0 $range-bg-progress-color
// Styling FireFox input range, mimicking Chromium one
//
......
// Most simple reset ever found
// @link https://meiert.com/en/blog/stop-using-resets/#comment-240548
html{
box-sizing: border-box;
height: 100%
}
*,
:after,
:before{
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: inherit
}
::-moz-focus-inner{
border: 0;
}
body{
position:relative;
}
a{
text-decoration: none;
color: inherit
}
a:focus{
outline: 0;
}
ul{
list-style:none;
}
......@@ -2,3 +2,36 @@
h4, h5, h6 {
font-weight: bold;
}
/// #"_hover.scss"
a:hover {
color: inherit;
}
/// from "_reboot.scss"
body {
margin: 0;
font-family: $font-family-base;
@include font-size($font-size-base);
font-weight: $font-weight-base;
line-height: $line-height-base;
color: $body-color;
text-align: left;
background-color: $body-bg;
}
/// from "_reboot.scss"
pre,
code,
kbd,