module Gargantext.Components.TopBar where import Data.Array (reverse) import Data.Foldable (intercalate) import Data.Tuple (fst) import Data.Tuple.Nested ((/\)) import Reactix as R import Reactix.DOM.HTML as H import Gargantext.Prelude import Gargantext.Types (Handed(..)) import Gargantext.Utils.Reactix as R2 thisModule :: String thisModule = "Gargantext.Components.TopBar" type TopBarProps = ( handed :: R.State Handed ) topBar :: R2.Component TopBarProps topBar = R.createElement topBarCpt topBarCpt :: R.Component TopBarProps topBarCpt = R.hooksComponentWithModule thisModule "topBar" cpt where cpt { handed } children = do pure $ H.div { id: "dafixedtop" , role: "navigation" , className: "navbar navbar-inverse navbar-fixed-top" } [ H.div { className: "container-fluid" } [ H.div { className: "navbar-inner" } [ logo (fst handed) , H.div { className: "collapse navbar-collapse" <> navHanded} ( [ H.ul { className: "nav navbar-nav" <> navHanded} [] , H.ul { title: "If you are Left Handed you can change " <> "the interface by clicking on me. Click " <> "again to come back to previous state." , className: "nav navbar-nav" <> navHanded } [handedChooser { handed }] , H.ul { className: "nav navbar-nav" <> navHanded} [divDropdownLeft] {-, H.ul { title: "Dark Mode soon here" , className : "nav navbar-nav" } [ H.li {} [ H.a {} [ H.span {className : "fa fa-moon"}[] ] ] ] -} ] <> children) ] ] ] where navHanded = if fst handed == LeftHanded then " navbar-right" else "" -- sortHanded = if fst handed == LeftHanded then reverse else reverse -- identity -- SB.searchBar {session, databases: allDatabases} logo :: Handed -> R.Element logo handed = H.a { className, href: "#/" } [ H.img { src, title, width: "30", height: "28" } ] where className = "navbar-brand logoSmall" <> navHanded src = "images/logoSmall.png" title = "Back to home." navHanded = if handed == LeftHanded then " navbar-right" else "" divDropdownLeft :: R.Element divDropdownLeft = divDropdownLeft' $ LiNav { title : "About Gargantext" , href : "#" , icon : "fa fa-info-circle" , text : "Info" } divDropdownLeft' :: LiNav -> R.Element divDropdownLeft' mb = H.li {className: "dropdown"} [ menuButton mb, menuElements' ] menuButton :: LiNav -> R.Element menuButton (LiNav { title, href, icon, text } ) = H.a { className: "dropdown-toggle navbar-text" , data: {toggle: "dropdown"} , href, title , role: "button" } [ H.span { aria: {hidden : true}, className: icon } [] , H.text (" " <> text) ] menuElements' :: R.Element menuElements' = menuElements-- title, icon, text [ -- =========================================================== [ LiNav { title : "Quick start, tutorials and methodology" , href : "https://iscpif.fr/gargantext/your-first-map/" , icon : "fa fa-lightbulb-o" , text : "Tutorials" } , LiNav { title : "Report bug here" , href : "https://www.iscpif.fr/gargantext/feedback-and-bug-reports/" , icon : "glyphicon glyphicon-bullhorn" , text : "Feedback" } ] , ----------------------------------------------------------- [ LiNav { title : "Chat" , href : "https://chat.iscpif.fr/channel/gargantext" , icon : "fa fa-rocket" , text : "Chat" } , LiNav { title : "Forums" , href : "https://discourse.iscpif.fr/c/gargantext" , icon : "fa fa-weixin" , text : "Forum" } ] ,------------------------------------------------------------ [ LiNav { title : "Code documentation" , href : "https://doc.gargantext.org" , icon : "glyphicon glyphicon-book" , text : "Source Code Documentation" } , LiNav { title : "API documentation" , href : "https://v4.gargantext.org/swagger-ui" , icon : "fa fa-code-fork" , text : "API documentation" } , LiNav { title : "Source code" , href : "https://gitlab.iscpif.fr/gargantext/haskell-gargantext" , icon : "fa fa-code" , text : "Source Code" } ] ,------------------------------------------------------------ [ LiNav { title : "More about us (you)" , href : "https://iscpif.fr" , icon : "glyphicon glyphicon-question-sign" , text : "About" } ] ] -- =========================================================== -- | Menu in the sidebar, syntactic sugar menuElements :: Array (Array LiNav) -> R.Element menuElements ns = dropDown $ intercalate divider $ map (map liNav) ns where dropDown :: Array R.Element -> R.Element dropDown = H.ul {className: "dropdown-menu"} divider :: Array R.Element divider = [H.li {className: "divider"} []] -- | surgar for target : "blank" --data LiNav_ = LiNav_ { title :: String -- , href :: String -- , icon :: String -- , text :: String -- , target :: String -- } data LiNav = LiNav { title :: String , href :: String , icon :: String , text :: String } liNav :: LiNav -> R.Element liNav (LiNav { title : title' , href : href' , icon : icon' , text : text' } ) = H.li {} [ H.a { tabIndex: (-1) , target: "blank" , title: title' , href: href' } [ H.span { className: icon' } [] , H.text $ " " <> text' ] ] type HandedChooserProps = ( handed :: R.State Handed ) handedChooser :: Record HandedChooserProps -> R.Element handedChooser props = R.createElement handedChooserCpt props [] handedChooserCpt :: R.Component HandedChooserProps handedChooserCpt = R.hooksComponentWithModule thisModule "handedChooser" cpt where cpt { handed } _ = do pure $ H.li {} [ H.a {} [ H.span { className: handedClass handed , on: { click: onClick handed } } [] ] ] handedClass (LeftHanded /\ _) = "fa fa-hand-o-left" handedClass (RightHanded /\ _) = "fa fa-hand-o-right" onClick (_ /\ setHanded) = setHanded $ \h -> case h of LeftHanded -> RightHanded RightHanded -> LeftHanded