TopBar.purs 8.85 KB
Newer Older
1 2 3 4 5 6
module Gargantext.Components.TopBar where

import Data.Array (reverse)
import Data.Foldable (intercalate)
import Data.Tuple (fst)
import Data.Tuple.Nested ((/\))
7 8 9
import Reactix as R
import Reactix.DOM.HTML as H

10
import Gargantext.Prelude
11 12

import Gargantext.Components.Themes (themeSwitcher, defaultTheme, allThemes)
13
import Gargantext.Types (Handed(..))
14
import Gargantext.Utils.Reactix as R2
15 16 17 18

thisModule :: String
thisModule = "Gargantext.Components.TopBar"

19
type TopBarProps = (handed :: R.State Handed)
20

21 22
topBar :: R2.Component TopBarProps
topBar = R.createElement topBarCpt
23 24 25 26

topBarCpt :: R.Component TopBarProps
topBarCpt = R.hooksComponentWithModule thisModule "topBar" cpt
  where
27
    cpt { handed } _children = do
28 29
      pure $ H.div { id: "dafixedtop"
                   , role: "navigation"
30
                   , className: "navbar navbar-expand-lg navbar-dark bg-dark fixed-top"
31 32 33 34 35
                   } $ sortHanded [
                     -- NOTE: first (and only) entry in the sorted array should have the "ml-auto class"
                     -- https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-or-right-aligned-items
                     -- In practice: only apply "ml-auto" to the last element of this list, if handed == LeftHanded
                     logo
36
                   , H.ul { className: "navbar-nav " <> if fst handed == LeftHanded then "ml-auto" else "" } $ sortHanded [
37
                       divDropdownLeft {} []
38 39
                     , handButton handed
                     , smiley
40 41
                     , H.li { className: "nav-item" } [ themeSwitcher { theme: defaultTheme
                                                                      , themes: allThemes } [] ]
42
                     ]
43
                   ]
44
          where
45
            handButton handed = H.li { title: "If you are Left Handed you can change\n"
46
                                           <> "the interface by clicking on me. Click\n"
47
                                           <> "again to come back to previous state."
48
                                     , className: "nav-item"
49 50
                                     } [handedChooser { handed } []]

51 52 53 54 55 56
            smiley = H.li { title: "Hello! Looking for the tree ?\n"
                                <> "Just watch on the other side!\n"
                                <> "Click on the hand again to see it back."
                          , className : "nav-item"
                          }
                          [ H.a { className: "nav-link" } [H.span {className: "fa fa-question-circle-o"} [] ]]
57 58 59 60 61 62 63 64

                        {-, H.ul { title: "Dark Mode soon here"
                                , className : "nav navbar-nav"
                                } [ H.li {} [ H.a {} [ H.span {className : "fa fa-moon"}[]
                                                          ]
                                                ]
                                      ]
                              -}
65

66
            sortHanded = if fst handed == LeftHanded then reverse else identity
67 68 69
            -- SB.searchBar {session, databases: allDatabases}


70 71 72 73
logo :: R.Element
logo =
  H.a { className, href: "#/" } [
    H.img { src, title, width: "30", height: "28" }
74 75
  ]
  where
76
    className = "navbar-brand logoSmall"
77
    src       = "images/logoSmall.png"
78
    title     = "Back home."
79 80


81 82
divDropdownLeft :: R2.Component ()
divDropdownLeft = R.createElement divDropdownLeftCpt
83

84 85 86 87 88 89
divDropdownLeftCpt :: R.Component ()
divDropdownLeftCpt = R.hooksComponentWithModule thisModule "divDropdownLeft" cpt
  where
    cpt {} _ = do
      show <- R.useState' false

90
      pure $ H.li { className: "nav-item dropdown" } [
91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
          menuButton { element: menuElement, show } []
        , menuElements { elements, show } []
        ]

    menuElement = LiNav { title : "About Gargantext"
                        , href  : "#"
                        , icon  : "fa fa-info-circle"
                        , text  : "Info" }

    elements = [
      [
        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/"
109
              , icon  : "fa fa-bullhorn"
110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
              , 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"
128
              , icon  : "fa fa-book"
129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145
              , 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"
146
              , icon  : "fa fa-question"
147 148 149 150 151 152 153 154 155 156 157 158 159
              , text  : "About"
              }
      ]
    ] -- ===========================================================

type MenuButtonProps = (
    element :: LiNav
  , show :: R.State Boolean
  )

menuButton :: R2.Component MenuButtonProps
menuButton = R.createElement menuButtonCpt

160 161 162
menuButtonCpt :: R.Component MenuButtonProps
menuButtonCpt = R.hooksComponentWithModule thisModule "menuButton" cpt
  where
163 164 165 166 167 168 169 170 171 172 173 174 175 176 177
    cpt { element: LiNav { title, href, icon, text }, show: (_ /\ setShow) } _ = do
      pure $ H.a { className: "dropdown-toggle navbar-text"
                -- , data: {toggle: "dropdown"}
                , href, title
                , on: { click: \_ -> setShow $ not }
                , role: "button" } [
          H.span { aria: {hidden : true}, className: icon } []
        , H.text (" " <> text)
        ]

-- | Menu in the sidebar, syntactic sugar
type MenuElementsProps = (
    elements :: Array (Array LiNav)
  , show :: R.State Boolean
  )
178

179 180 181
menuElements :: R2.Component MenuElementsProps
menuElements = R.createElement menuElementsCpt

182 183 184
menuElementsCpt :: R.Component MenuElementsProps
menuElementsCpt = R.hooksComponentWithModule thisModule "menuElements" cpt
  where
185 186 187 188 189 190 191 192
    cpt { show: false /\ _ } _ = do
      pure $ H.div {} []
    cpt { elements, show: (true /\ setShow) } _ = do
      pure $ H.ul { className: "dropdown-menu"
                  , on: { click: setShow $ const false }
                  , style: { display: "block" } } $ intercalate divider $ map (map liNav) elements
      where
        divider :: Array R.Element
193
        divider = [H.li {className: "dropdown-divider"} []]
194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214

-- | 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'
             }
215 216 217 218 219 220 221
      ) = H.li { className: "dropdown-item" } [
            H.a { tabIndex: (-1)
                , target: "blank"
                , title: title'
                , href: href'
                } [ H.span { className: icon' } []
                  , H.text $ " " <> text'
222
                  ]
223
            ]
224 225 226 227 228 229


type HandedChooserProps = (
  handed :: R.State Handed
  )

230 231
handedChooser :: R2.Component HandedChooserProps
handedChooser = R.createElement handedChooserCpt
232 233 234 235 236

handedChooserCpt :: R.Component HandedChooserProps
handedChooserCpt = R.hooksComponentWithModule thisModule "handedChooser" cpt
  where
    cpt { handed } _ = do
237 238
      pure $ H.a { className: "nav-link" } [
        H.span { className: handedClass handed
239
               , on: { click: onClick handed } } []
240 241 242 243 244 245 246 247
        ]

    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