Skip to content

P
purescript-gargantext
Commit 5d69cae0 authored by Alexandre Delanoë's avatar Alexandre Delanoë
Browse files
Options

[UI] more relastic POCK for meeting.

parent 926a5693
Show whitespace changes
Inline Side-by-side
Showing with 214 additions and 165 deletions
src/AddCorpusview.purs
View file @ 5d69cae0
......@@ -92,7 +92,7 @@ addcorpusviewSpec = simpleSpec performAction render
render :: Render State props Action
render dispatch _ state _ =
[
div [className "container"] [L.jumboTitle]
div [className "container"] [L.jumboTitle false]
, div [className "container"]
[
div [className "jumbotron"]
......
src/Chart.purs
View file @ 5d69cae0
......@@ -373,16 +373,20 @@ yAxisIndex = unsafeMkProps "yAxisIndex"
-- , p''
-- ]
ex1 :: ReactElement
ex1 = echarts
histogram :: ReactElement
histogram = echarts
[ option
[ tooltip [trigger "axis"]
, grid [containLabel true]
, legend [data' ["Query A", "Query B", "Query C"]]
, legend [data' ["Map terms coverage", "Favorites", "All"]]
-- , legend [data' ["Map Terms coverage", "Favorites", "All"]]
, xAxis
[ type' "category"
, axisTick [alignWithLabel true]
, data' ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sep", "Oct", "Nov", "Dec"]
, data' ["Jan" , "Feb", "Mar" , "Apr"
, "May", "Jun", "July", "Aug"
, "Sep", "Oct", "Nov" , "Dec"
]
]
, dataZoom [dz1,dz1,dz2,dz2]
, yAxis [ya1, ya2]
......@@ -423,7 +427,7 @@ ya2 = unsafeFromPropsArray
]
sd1 = unsafeFromPropsArray
[ name "Query A"
[ name "Map terms coverage"
, type' "line"
, label [normal[showp true, position "top"]]
, lineStyle [ normal
......@@ -436,7 +440,7 @@ sd1 = unsafeFromPropsArray
]
sd2 = unsafeFromPropsArray
[ name "Query B"
[ name "Favorites"
, type' "bar"
, label [normal[showp true, position "top"]]
, yAxisIndex 1
......@@ -444,7 +448,7 @@ sd2 = unsafeFromPropsArray
]
sd3 = unsafeFromPropsArray
[ name "Query C"
[ name "All"
, type' "bar"
, label [normal[showp true, position "top"]]
, yAxisIndex 1
......
src/DocView.purs
View file @ 5d69cae0
......@@ -2,7 +2,7 @@ module DocView where
import Data.Argonaut
import Chart (ex1, p'')
import Chart (histogram, p'')
import Control.Monad.Aff (Aff, attempt)
import Control.Monad.Aff.Class (liftAff)
import Control.Monad.Cont.Trans (lift)
......@@ -26,8 +26,8 @@ import Partial.Unsafe (unsafePartial)
import Prelude (class Eq, class Ord, class Show, Unit, bind, map, not, pure, show, void, ($), (*), (+), (-), (/), (<), (<$>), (<>), (==), (>), (>=), (>>=))
import React (ReactElement)
import React as R
import React.DOM (a, b, b', br', div, h3, i, input, li, option, select, span, table, tbody, td, text, thead, tr, ul)
import React.DOM.Props (Props, _type, className, href, onChange, onClick, selected, value)
import React.DOM (a, b, b', br', div, h3, i, input, li, option, select, span, table, tbody, td, text, thead, th, tr, ul, nav)
import React.DOM.Props (Props, _type, className, href, onChange, onClick, selected, value, scope, _id, role, _data, aria)
import ReactDOM as RDOM
import Thermite (PerformAction, Render, Spec, cotransform, createReactSpec, modifyState, simpleSpec)
import Unsafe.Coerce (unsafeCoerce)
......@@ -64,7 +64,7 @@ newtype Response = Response
newtype Hyperdata = Hyperdata
{
title :: String
, abstract :: String
, source :: String
}
type State = CorpusTableData
......@@ -79,8 +79,8 @@ instance decodeHyperdata :: DecodeJson Hyperdata where
decodeJson json = do
obj <- decodeJson json
title <- obj .? "title"
abstract <- obj .? "abstract"
pure $ Hyperdata { title,abstract }
source <- obj .? "source"
pure $ Hyperdata { title,source }
......@@ -119,48 +119,55 @@ spec = simpleSpec performAction render
render :: Render State _ Action
render dispatch _ state@(TableData d) _ =
[ div [className "container"]
[
div [className "jumbotron"]
[
div [className "row"]
[ div [className "row"]
[ div [className "col-md-3"]
[ br' []
, br' []
, div [className "tree"] [toHtml dispatch d.tree]
]
, div [className "col-md-9"]
[ nav []
[ div [className "nav nav-tabs", _id "nav-tab",role "tablist"]
[
br' []
a [ className "nav-item nav-link active"
, _id "nav-home-tab"
, _data {toggle : "tab"}
, href "#nav-home"
, role "tab"
, aria {controls : "nav-home"}
, aria {selected:true}] [ text "Documents"]
, a [className "nav-item nav-link",_id "nav-profile-tab", _data {toggle : "tab"},href "#nav-profile",role "tab",aria {controls : "nav-profile"},aria {selected:true}] [ text "Sources"]
,a [className "nav-item nav-link",_id "nav-contact-tab", _data {toggle : "tab"},href "#nav-contact",role "tab",aria {controls : "nav-contact"},aria {selected:true}] [ text "Authors"]
,a [className "nav-item nav-link",_id "nav-contact-tab", _data {toggle : "tab"},href "#nav-contact",role "tab",aria {controls : "nav-contact"},aria {selected:true}] [ text "Terms"]
,a [className "nav-item nav-link",_id "nav-contact-tab", _data {toggle : "tab"},href "#nav-contact",role "tab",aria {controls : "nav-contact"},aria {selected:true}] [ text "(+)"]
]
]
, br' []
, p''
, h3 [] [text "Chart Title"]
, ex1
, histogram
, p''
, div [] [b [] [text d.title]]
, div [] [ text "Search "
, br' []
, div [] [ b [] [text d.title]
, text " Filter "
, input [] []
]
, sizeDD d.pageSize dispatch
, br' []
, br' []
, textDescription d.currentPage d.pageSize d.totalRecords
, br' []
, br' []
, pagination dispatch d.totalPages d.currentPage
, br' []
, br' []
, table []
[thead [] [tr []
[ td [] [ b' [text "Date"]]
, td [] [ b' [text "Title"]]
, td [] [ b' [text "Source"]]
, td [] [ b' [text "Fav"]]
, td [] [ b' [text "Delete"]]
]]
, tbody [] $ map showRow d.rows
]
, table [ className "table"]
[thead [ className "thead-dark"]
[tr [] [ th [scope "col"] [ b' [text "Date"] ]
, th [scope "col"] [ b' [text "Title"] ]
, th [scope "col"] [ b' [text "Source"] ]
, th [scope "col"] [ b' [text "Favorite"]]
, th [scope "col"] [ b' [text "Delete"] ]
]
]
, tbody [] $ map showRow d.rows
]
]
]
......@@ -171,19 +178,13 @@ spec = simpleSpec performAction render
------------------------------------------------------------------------
-- Realistic Tree for the UI
urlFacetDoc :: String
urlFacetDoc = "http://localhost:8009/index.html#/docView"
myCorpus :: Int -> String -> NTree (Tuple String String)
myCorpus n name = NNode n false name
[ NLeaf (Tuple "Facets" urlFacetDoc)
, NLeaf (Tuple "Graph" urlFacetDoc)
, NLeaf (Tuple "Dashboard" urlFacetDoc)
[ NLeaf (Tuple "Facets" "#/docView")
, NLeaf (Tuple "Graph" "#/docView")
, NLeaf (Tuple "Dashboard" "#/userPage")
]
urlFacetAuth :: String
urlFacetAuth = urlFacetDoc
exampleTree :: NTree (Tuple String String)
exampleTree =
NNode 1 true "My gargantext"
......@@ -199,22 +200,26 @@ exampleTree =
------------------------------------------------------------------------
-- TODO
-- alignment to the right
nodeOptionsCorp = [ i [className "fab fa-whmcs" ] []]
nodeOptionsCorp activated = case activated of
true -> [ i [className "fab fa-whmcs" ] []]
false -> []
-- TODO
-- alignment to the right
-- on hover make other options available:
nodeOptionsView = [ i [className "fas fa-sync-alt" ] []
nodeOptionsView activated = case activated of
true -> [ i [className "fas fa-sync-alt" ] []
, i [className "fas fa-upload" ] []
, i [className "fas fa-share-alt"] []
]
false -> []
toHtml :: _ -> FTree -> ReactElement
toHtml d (NLeaf (Tuple name link)) =
li []
[ a [ href link]
( [ text (name <> " ")
] <> nodeOptionsView
] <> nodeOptionsView false
)
]
toHtml d (NNode id open name ary) =
......@@ -222,7 +227,7 @@ toHtml d (NNode id open name ary) =
[ li [] $
( [ a [onClick $ (\e-> d $ ToggleFolder id)] [i [fldr open] []]
, text $ " " <> name <> " "
] <> nodeOptionsCorp <>
] <> nodeOptionsCorp false <>
if open then
map (toHtml d) ary
else []
......@@ -249,7 +254,7 @@ performAction LoadData _ _ = void do
, url : ""
, date : res.created
, title : (\(Hyperdata r) -> r.title) res.hyperdata
, source : (\(Hyperdata r) -> r.abstract)res.hyperdata
, source : (\(Hyperdata r) -> r.source)res.hyperdata
, fav : res.favorite
}
......@@ -258,7 +263,11 @@ performAction (ToggleFolder i) _ _ = void (cotransform (\(TableData td) -> Table
changePageSize :: PageSizes -> CorpusTableData -> CorpusTableData
changePageSize ps (TableData td) = TableData $ td { pageSize = ps, totalPages = td.totalRecords / pageSizes2Int ps, currentPage = 1}
changePageSize ps (TableData td) =
TableData $ td { pageSize = ps
, totalPages = td.totalRecords / pageSizes2Int ps
, currentPage = 1
}
data PageSizes = PS10 | PS20 | PS50 | PS100
......@@ -332,7 +341,9 @@ pagination d tp cp
else
span []
[ text " "
, a [href "javascript:void()", onClick (\e -> d $ ChangePage $ cp - 1)] [text "Previous"]
, a [ href "javascript:void()"
, onClick (\e -> d $ ChangePage $ cp - 1)
] [text "Previous"]
, text " "
]
next = if cp == tp then
......@@ -340,7 +351,9 @@ pagination d tp cp
else
span []
[ text " "
, a [href "javascript:void()", onClick (\e -> d $ ChangePage $ cp + 1)] [text "Next"]
, a [ href "javascript:void()"
, onClick (\e -> d $ ChangePage $ cp + 1)
] [text "Next"]
, text " "
]
first = if cp == 1 then
......@@ -348,7 +361,9 @@ pagination d tp cp
else
span []
[ text " "
, a [href "javascript:void()", onClick (\e -> d $ ChangePage 1)] [text "1"]
, a [ href "javascript:void()"
, onClick (\e -> d $ ChangePage 1)
] [text "1"]
, text " "
]
last = if cp == tp then
......@@ -356,7 +371,9 @@ pagination d tp cp
else
span []
[ text " "
, a [href "javascript:void()", onClick (\e -> d $ ChangePage tp)] [text $ show tp]
, a [ href "javascript:void()"
, onClick (\e -> d $ ChangePage tp)
] [text $ show tp]
, text " "
]
ldots = if cp >= 5 then
......@@ -374,7 +391,9 @@ fnmid :: _ -> Int -> ReactElement
fnmid d i
= span []
[ text " "
, a [href "javascript:void()", onClick (\e -> d $ ChangePage i)] [text $ show i]
, a [ href "javascript:void()"
, onClick (\e -> d $ ChangePage i)
] [text $ show i]
, text " "
]
......@@ -427,7 +446,7 @@ tdata = TableData
, currentPage : 1
, pageSize : PS10
, totalRecords : 100
, title : "Publications by title"
, title : "Documents"
, tree : exampleTree
}
......@@ -438,7 +457,7 @@ tdata' d = TableData
, currentPage : 1
, pageSize : PS10
, totalRecords : 100
, title : "Publications by title"
, title : "Documents"
, tree : exampleTree
}
......@@ -449,10 +468,13 @@ showRow {row : (Corpus c), delete} =
[ td [] [text c.date]
, td [] [text c.title]
, td [] [text c.source]
, td [] [text $ show c.fav]
, td [] [ input [ _type "checkbox"] []]
, td [] [div [className $ fa <> "fa-star"][]]
, td [] [input [ _type "checkbox"] []]
]
where
fa = case c.fav of
true -> "fas "
false -> "far "
......@@ -477,3 +499,6 @@ loadData = do
--liftEff $ log $ "GET /api response: " <> show a.response
let res = decodeJson a.response
pure res
src/Landing.purs
View file @ 5d69cae0
......@@ -50,12 +50,12 @@ performAction Login _ _ = void do
performAction SignUp _ _ = void do
T.modifyState \state -> state
jumboTitle :: ReactElement
jumboTitle = div [className "jumbotron" ]
jumboTitle :: Boolean -> ReactElement
jumboTitle b = div jumbo
[ div [className "row" ]
[ div [className "col-md-8 content"]
[ h1 [] [ text "Gargantext"]
, p [] [ text "Collaborative knowledge mapping experience" ]
, p [] [ text "search map share" ]
, p [] [ a [ className "btn btn-success btn-lg spacing-class"
, href "https://iscpif.fr/gargantext/your-first-map/"
, target "blank"
......@@ -64,7 +64,7 @@ jumboTitle = div [className "jumbotron" ]
[ span [ aria {hidden : true}
, className "glyphicon glyphicon-hand-right"
] []
, text " Get's started"
, text " Documentation"
]
]
]
......@@ -78,6 +78,10 @@ jumboTitle = div [className "jumbotron" ]
]
]
]
where
jumbo = case b of
true -> [className "jumbotron" ]
false -> []
imageEnter :: Props -> ReactElement
......@@ -98,7 +102,7 @@ home = simpleSpec performAction render
where
render :: Render State props Action
render dispatch _ state _ =
[ div [ className "container" ] [ jumboTitle ]
[ div [ className "container" ] [ jumboTitle true ]
, div [ className "container" ] [ imageEnter (onClick \_ -> dispatch $ Enter)]
, div [ className "container" ] [ blocksRandomText ]
, div [ className "container" ] [ hr [] [], footerLegalInfo ]
......
src/Navigation.purs
View file @ 5d69cae0
......@@ -14,8 +14,8 @@ import Network.HTTP.Affjax (AJAX)
import PageRouter (Routes(..))
import Prelude (class Applicative, class Bind, Unit, bind, id, map, negate, pure, unit, void, ($), (<>))
import React (ReactElement)
import React.DOM (a, div, img, li, span, text, ul)
import React.DOM.Props (_data, _id, aria, className, href, role, src, style, tabIndex, target, title)
import React.DOM (a, div, img, li, span, text, ul, input)
import React.DOM.Props (_data, _id, aria, className, href, name, placeholder, _type, role, src, style, tabIndex, target, title)
import Thermite (PerformAction, Render, Spec, _render, defaultRender, focus, modifyState, simpleSpec, withState)
import DocView as DV
import SearchForm as S
......@@ -280,6 +280,13 @@ sidebarnavSpec = simpleSpec performAction render
]
]
---------------------------------------------------------------------------
-- TODO put the search form in the center of the navBar
-- , ul [ className "nav navbar-nav"]
-- [ input [ className "form-control"
-- , placeholder "Query, URL or FILE (optimized experience with Firefox or Chromium browsers)"
-- , _type "text"
-- ] []
-- ]
, divDropdownRight
]
]
......
src/SearchForm.purs
View file @ 5d69cae0
......@@ -56,7 +56,7 @@ searchSpec = simpleSpec performAction render
where
render :: Render State props Action
render dispatch _ state _ =
[ div [className "container"] [L.jumboTitle]
[ div [className "container"] [L.jumboTitle false]
, div [className "container"]
[ div [className "jumbotron" ]
[ div [className "row" ]
......
src/UserPage.purs
View file @ 5d69cae0
......@@ -8,6 +8,7 @@ import React.DOM (a, div, h3, h5, h6, img, li, nav, small, span, table, tbody, t
import React.DOM.Props (_data, _id, aria, className, href, role, scope, src)
import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)
import DocView as DV
type State = String
......@@ -31,10 +32,11 @@ userPageSpec = simpleSpec performAction render
where
render :: Render State props Action
render dispatch _ state _ =
[ div [className "container-fluid"]
[ -- TODO: div [className "tree"] [DV.toHtml dispatch d.tree]
div [className "container-fluid"]
[ div [className "row", _id "user-page-header"]
[ div [className "col-md-2"]
[ h3 [] [text "UserName"]
[ h3 [] [text "User Name"]
]
, div [className "col-md-8"] []
, div [className "col-md-2"]
......@@ -54,26 +56,21 @@ userPageSpec = simpleSpec performAction render
ul [className "list-group"]
[
li [className "list-group-item justify-content-between"]
[ span [] [text "fonction"]
, span [className "badge badge-default badge-pill"] [text "Ensignent checheur"]
[ span [] [text "Fonction"]
, span [className "badge badge-default badge-pill"] [text "Enseignant chercheur"]
]
, li [className "list-group-item justify-content-between"]
[ span [] [text "Entitte, service"]
, span [className "badge badge-default badge-pill"] [text "Mines Saint - Etinene SPIN -PTSI"]
[ span [] [text "Entité, service"]
, span [className "badge badge-default badge-pill"] [text "Mines Saint-Etienne SPIN -PTSI"]
]
, li [className "list-group-item justify-content-between"]
[ span [] [text "Telephone"]
, span [className "badge badge-default badge-pill"] [text "04 77 42 0070"]
[ span [] [text "Téléphone"]
, span [className "badge badge-default badge-pill"] [text "(+33) 04 77 42 0070"]
]
, li [className "list-group-item justify-content-between"]
[ span [] [text "Telephone"]
, span [className "badge badge-default badge-pill"] [text "04 77 42 0070"]
]
, li [className "list-group-item justify-content-between"]
[ span [] [text "courriel"]
, span [className "badge badge-default badge-pill"] [text "veronica@mines-stsi.fr"]
[ span [] [text "Courriel"]
, span [className "badge badge-default badge-pill"] [text "gargantua@rabelais.fr"]
]
, li [className "list-group-item justify-content-between"]
[ span [] [text "Bureau"]
......@@ -81,11 +78,11 @@ userPageSpec = simpleSpec performAction render
]
, li [className "list-group-item justify-content-between"]
[ span [] [text "Apellation"]
, span [className "badge badge-default badge-pill"] [text "Maitre de reherche (EPA)"]
, span [className "badge badge-default badge-pill"] [text "Maître de conférences (EPA)"]
]
, li [className "list-group-item justify-content-between"]
[ span [] [text "Lieu"]
, span [className "badge badge-default badge-pill"] [text "Saint -Etienne, 158 Cours Fauriel"]
, span [className "badge badge-default badge-pill"] [text "Saint-Etienne, 158 Cours Fauriel"]
]
]
......@@ -95,62 +92,74 @@ userPageSpec = simpleSpec performAction render
]
, div [className "row",_id "user-page-footer"]
[ div [className "col-md-12"]
[ nav []
[ div [className "nav nav-tabs", _id "nav-tab",role "tablist"]
[
a [className "nav-item nav-link active",_id "nav-home-tab", _data {toggle : "tab"},href "#nav-home",role "tab",aria {controls : "nav-home"},aria {selected:true}] [ text "Publications (12)"]
, a [className "nav-item nav-link",_id "nav-profile-tab", _data {toggle : "tab"},href "#nav-profile",role "tab",aria {controls : "nav-profile"},aria {selected:true}] [ text "Brevets (2)"]
facets
]
]
]
,a [className "nav-item nav-link",_id "nav-contact-tab", _data {toggle : "tab"},href "#nav-contact",role "tab",aria {controls : "nav-contact"},aria {selected:true}] [ text "Projets IMT (5)"]
facets = [ nav []
[ div [className "nav nav-tabs", _id "nav-tab",role "tablist"]
[ a [className "nav-item nav-link active",_id "nav-home-tab" , _data {toggle : "tab"},href "#nav-home" ,role "tab",aria {controls : "nav-home"} ,aria {selected:true}] [ text "Publications (12)"]
, a [className "nav-item nav-link" ,_id "nav-profile-tab", _data {toggle : "tab"},href "#nav-profile",role "tab",aria {controls : "nav-profile"},aria {selected:true}] [ text "Brevets (2)"]
, a [className "nav-item nav-link" ,_id "nav-contact-tab", _data {toggle : "tab"},href "#nav-contact",role "tab",aria {controls : "nav-contact"},aria {selected:true}] [ text "Projets (5)"]
, a [className "nav-item nav-link" ,_id "nav-contact-tab", _data {toggle : "tab"},href "#nav-contact",role "tab",aria {controls : "nav-contact"},aria {selected:true}] [ text "All (19)"]
]
]
, div [className "tab-content" , _id "nav-tabContent"]
[
div [className "tab-pane fade show active", role "tabpanel", aria {labelledby : "nav-home-tab"}, _id "nav-home"]
[
table [ className "table"]
[ thead [ className "thead-dark"]
[ tr []
[
th [ scope "col"]
[ text "Date"
div [ className "tab-pane fade show active"
, role "tabpanel"
, aria {labelledby : "nav-home-tab"}
, _id "nav-home"
]
, th [scope "col"]
[ text "Description"
]
, th [ scope "col"]
[ text "Projects"]
, th [ scope "col"]
[ text " Favorite"]
, th [scope "col"]
[text "Delete"]
[ facetExample ]
, div [ className "tab-pane fade show"
, role "tabpanel"
, aria {labelledby : "nav-profile-tab"}
, _id "nav-profile"
]
[ ]
, div [ className "tab-pane fade show"
, role "tabpanel"
, aria {labelledby : "nav-contact-tab"}
, _id "nav-contact"
]
, tbody []
[ tr []
[ td [] [ text "2012/03/06"]
, td [] [ text "use of acoustic mission"]
, td [] [ text "use of acoustic emission"]
, td [] [ text "use of acoustic emission"]
, td [] [ text "use of acoustic emission"]
[ ]
]
]
facetExample = table [ className "table"]
[ thead [ className "thead-dark"]
[ tr []
[ th [ scope "col"] [ text "Date" ]
, th [ scope "col"] [ text "Description" ]
, th [ scope "col"] [ text "Projects" ]
, th [ scope "col"] [ text "Favorite" ]
, th [ scope "col"] [ text "Delete" ]
]
]
, div [className "tab-pane fade show", role "tabpanel", aria {labelledby : "nav-profile-tab"}, _id "nav-profile"]
[
h3 [] [text "hello1"]
]
, div [className "tab-pane fade show", role "tabpanel", aria {labelledby : "nav-contact-tab"}, _id "nav-contact"]
[
h3 [] [text "hello2"]
]
, tbody []
[ tr [] [ td [] [ text "2012/03/06"]
, td [] [ text "Big data and text mining"]
, td [] [ text "European funds"]
, td [] [ text "True"]
, td [] [ text "False"]
]
, tr [] [ td [] [ text "2013/03/06"]
, td [] [ text "Cryptography"]
, td [] [ text "French funds"]
, td [] [ text "True"]
, td [] [ text "False"]
]
, tr [] [ td [] [ text "2013/03/06"]
, td [] [ text "Artificial Intelligence"]
, td [] [ text "Not found"]
, td [] [ text "True"]
, td [] [ text "False"]
]
]
]
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