Commit 105ca003 authored by Karen Konou's avatar Karen Konou

[Corpus fields] reintroduce old name and tweak styling

parent 24be1255
...@@ -72,11 +72,12 @@ listsLayoutWithKeyCpt = here.component "listsLayoutWithKey" cpt where ...@@ -72,11 +72,12 @@ listsLayoutWithKeyCpt = here.component "listsLayoutWithKey" cpt where
, path , path
, loader: loadCorpusWithChild , loader: loadCorpusWithChild
, render: \corpusData@{ corpusId, corpusNode: NodePoly poly } -> , render: \corpusData@{ corpusId, corpusNode: NodePoly poly } ->
let { date, hyperdata } = poly let { name, date, hyperdata } = poly
in in
R.fragment [ R.fragment [
Table.tableHeaderWithRenameLayout { Table.tableHeaderWithRenameLayout {
cacheState cacheState
, name
, date , date
, hyperdata , hyperdata
, nodeId: corpusId , nodeId: corpusId
......
...@@ -105,11 +105,12 @@ textsLayoutWithKeyCpt = here.component "textsLayoutWithKey" cpt ...@@ -105,11 +105,12 @@ textsLayoutWithKeyCpt = here.component "textsLayoutWithKey" cpt
, loader: loadCorpusWithChild , loader: loadCorpusWithChild
, path: { nodeId, session } , path: { nodeId, session }
, render: \corpusData@{ corpusId, corpusNode } -> do , render: \corpusData@{ corpusId, corpusNode } -> do
let NodePoly { date, hyperdata } = corpusNode let NodePoly { name, date, hyperdata } = corpusNode
R.fragment R.fragment
[ Table.tableHeaderWithRenameLayout { [ Table.tableHeaderWithRenameLayout {
cacheState cacheState
, name
, date , date
, hyperdata , hyperdata
, nodeId: corpusId , nodeId: corpusId
......
module Gargantext.Components.Renameable where module Gargantext.Components.Renameable where
import Effect (Effect)
import Reactix as R
import Reactix.DOM.HTML as H
import Toestand as T
import Gargantext.Prelude import Gargantext.Prelude
import Effect (Effect)
import Gargantext.Components.InputWithEnter (inputWithEnter) import Gargantext.Components.InputWithEnter (inputWithEnter)
import Gargantext.Utils.Reactix as R2 import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
import Toestand as T
here :: R2.Here here :: R2.Here
...@@ -18,6 +17,7 @@ type RenameableProps = ...@@ -18,6 +17,7 @@ type RenameableProps =
( (
onRename :: String -> Effect Unit onRename :: String -> Effect Unit
, text :: String , text :: String
, icon :: String
) )
renameable :: R2.Component RenameableProps renameable :: R2.Component RenameableProps
...@@ -25,7 +25,7 @@ renameable = R.createElement renameableCpt ...@@ -25,7 +25,7 @@ renameable = R.createElement renameableCpt
renameableCpt :: R.Component RenameableProps renameableCpt :: R.Component RenameableProps
renameableCpt = here.component "renameableCpt" cpt renameableCpt = here.component "renameableCpt" cpt
where where
cpt { onRename, text } _ = do cpt { onRename, text, icon } _ = do
isEditing <- T.useBox false isEditing <- T.useBox false
state <- T.useBox text state <- T.useBox text
textRef <- R.useRef text textRef <- R.useRef text
...@@ -39,7 +39,7 @@ renameableCpt = here.component "renameableCpt" cpt ...@@ -39,7 +39,7 @@ renameableCpt = here.component "renameableCpt" cpt
T.write_ text state T.write_ text state
pure $ H.div { className: "renameable" } [ pure $ H.div { className: "renameable" } [
renameableText { isEditing, onRename, state } [] renameableText { isEditing, onRename, state, icon } []
] ]
type RenameableTextProps = type RenameableTextProps =
...@@ -47,6 +47,7 @@ type RenameableTextProps = ...@@ -47,6 +47,7 @@ type RenameableTextProps =
isEditing :: T.Box Boolean isEditing :: T.Box Boolean
, onRename :: String -> Effect Unit , onRename :: String -> Effect Unit
, state :: T.Box String , state :: T.Box String
, icon :: String
) )
renameableText :: R2.Component RenameableTextProps renameableText :: R2.Component RenameableTextProps
...@@ -68,15 +69,13 @@ notEditing = R.createElement notEditingCpt ...@@ -68,15 +69,13 @@ notEditing = R.createElement notEditingCpt
notEditingCpt :: R.Component RenameableTextProps notEditingCpt :: R.Component RenameableTextProps
notEditingCpt = here.component "notEditing" cpt notEditingCpt = here.component "notEditing" cpt
where where
cpt { isEditing, state } _ = do cpt { isEditing, state, icon} _ = do
state' <- T.useLive T.unequal state state' <- T.useLive T.unequal state
pure $ H.div { className: "input-group" } pure $ H.div { className: "input-group" }
[ H.input { className: "form-control" [ H.span {className: icon} []
, defaultValue: state' , H.text state'
, disabled: 1 , H.button { className: "btn input-group-append"
, type: "text" }
, H.div { className: "btn input-group-append"
, on: { click: \_ -> T.write_ true isEditing } } , on: { click: \_ -> T.write_ true isEditing } }
[ H.span { className: "fa fa-pencil" } [] [ H.span { className: "fa fa-pencil" } []
] ]
...@@ -88,11 +87,12 @@ editing = R.createElement editingCpt ...@@ -88,11 +87,12 @@ editing = R.createElement editingCpt
editingCpt :: R.Component RenameableTextProps editingCpt :: R.Component RenameableTextProps
editingCpt = here.component "editing" cpt editingCpt = here.component "editing" cpt
where where
cpt { isEditing, onRename, state } _ = do cpt { isEditing, onRename, state, icon } _ = do
state' <- T.useLive T.unequal state state' <- T.useLive T.unequal state
pure $ H.div { className: "input-group" } pure $ H.div { className: "input-group" }
[ inputWithEnter { [ H.span {className: icon} []
, inputWithEnter {
autoFocus: false autoFocus: false
, className: "form-control text" , className: "form-control text"
, defaultValue: state' , defaultValue: state'
...@@ -102,7 +102,7 @@ editingCpt = here.component "editing" cpt ...@@ -102,7 +102,7 @@ editingCpt = here.component "editing" cpt
, placeholder: "" , placeholder: ""
, type: "text" , type: "text"
} }
, H.div { className: "btn input-group-append" , H.button { className: "btn input-group-append"
, on: { click: submit state' } } , on: { click: submit state' } }
[ H.span { className: "fa fa-floppy-o" } [] [ H.span { className: "fa fa-floppy-o" } []
] ]
......
...@@ -64,6 +64,7 @@ type TableHeaderWithRenameLayoutProps = ( ...@@ -64,6 +64,7 @@ type TableHeaderWithRenameLayoutProps = (
, session :: Session , session :: Session
, hyperdata :: Hyperdata , hyperdata :: Hyperdata
, nodeId :: NodeID , nodeId :: NodeID
, name :: String
, date :: String , date :: String
, key :: String , key :: String
) )
...@@ -73,6 +74,7 @@ type TableHeaderWithRenameBoxedLayoutProps = ( ...@@ -73,6 +74,7 @@ type TableHeaderWithRenameBoxedLayoutProps = (
, session :: Session , session :: Session
, hyperdata :: Hyperdata , hyperdata :: Hyperdata
, nodeId :: NodeID , nodeId :: NodeID
, name :: String
, date :: String , date :: String
, key :: String , key :: String
, corpusInfoS :: T.Box CorpusInfo , corpusInfoS :: T.Box CorpusInfo
...@@ -88,11 +90,11 @@ tableHeaderWithRenameLayout = R.createElement tableHeaderWithRenameLayoutCpt ...@@ -88,11 +90,11 @@ tableHeaderWithRenameLayout = R.createElement tableHeaderWithRenameLayoutCpt
tableHeaderWithRenameLayoutCpt :: R.Component TableHeaderWithRenameLayoutProps tableHeaderWithRenameLayoutCpt :: R.Component TableHeaderWithRenameLayoutProps
tableHeaderWithRenameLayoutCpt = here.component "tableHeaderWithRenameLayoutCpt" cpt tableHeaderWithRenameLayoutCpt = here.component "tableHeaderWithRenameLayoutCpt" cpt
where where
cpt { hyperdata: Hyperdata h, nodeId, session, cacheState, date, key } _ = do cpt { hyperdata: Hyperdata h, nodeId, session, cacheState, name, date, key } _ = do
let corpusInfo = getCorpusInfo h.fields let corpusInfo = getCorpusInfo h.fields
corpusInfoS <- T.useBox corpusInfo corpusInfoS <- T.useBox corpusInfo
pure $ tableHeaderWithRenameBoxedLayout {hyperdata: Hyperdata h, nodeId, session, cacheState, date, corpusInfoS, key} [] pure $ tableHeaderWithRenameBoxedLayout {hyperdata: Hyperdata h, nodeId, session, cacheState, name, date, corpusInfoS, key} []
tableHeaderWithRenameBoxedLayout :: R2.Component TableHeaderWithRenameBoxedLayoutProps tableHeaderWithRenameBoxedLayout :: R2.Component TableHeaderWithRenameBoxedLayoutProps
tableHeaderWithRenameBoxedLayout = R.createElement tableHeaderWithRenameBoxedLayoutCpt tableHeaderWithRenameBoxedLayout = R.createElement tableHeaderWithRenameBoxedLayoutCpt
...@@ -100,7 +102,7 @@ tableHeaderWithRenameBoxedLayout = R.createElement tableHeaderWithRenameBoxedLay ...@@ -100,7 +102,7 @@ tableHeaderWithRenameBoxedLayout = R.createElement tableHeaderWithRenameBoxedLay
tableHeaderWithRenameBoxedLayoutCpt :: R.Component TableHeaderWithRenameBoxedLayoutProps tableHeaderWithRenameBoxedLayoutCpt :: R.Component TableHeaderWithRenameBoxedLayoutProps
tableHeaderWithRenameBoxedLayoutCpt = here.component "tableHeaderWithRenameBoxedLayoutCpt" cpt tableHeaderWithRenameBoxedLayoutCpt = here.component "tableHeaderWithRenameBoxedLayoutCpt" cpt
where where
cpt { hyperdata: Hyperdata h, nodeId, session, cacheState, date, corpusInfoS} _ = do cpt { hyperdata: Hyperdata h, nodeId, session, cacheState, name, date, corpusInfoS} _ = do
cacheState' <- T.useLive T.unequal cacheState cacheState' <- T.useLive T.unequal cacheState
CorpusInfo {title, desc, query, authors} <- T.read corpusInfoS CorpusInfo {title, desc, query, authors} <- T.read corpusInfoS
...@@ -108,19 +110,23 @@ tableHeaderWithRenameBoxedLayoutCpt = here.component "tableHeaderWithRenameBoxed ...@@ -108,19 +110,23 @@ tableHeaderWithRenameBoxedLayoutCpt = here.component "tableHeaderWithRenameBoxed
[ R2.row [FV.backButton {} []] [ R2.row [FV.backButton {} []]
, ,
R2.row R2.row
[ H.div {className: "col-md-3"} [ H.h3 {} [renameable {text: title, onRename: onRenameTitle} []] ] [ H.div {className: "col-md-3"} [ H.h3 {} [H.text name] ]
, H.div {className: "col-md-9"} , H.div {className: "col-md-9"}
[ H.hr {style: {height: "2px", backgroundColor: "black"}} ] [ H.hr {style: {height: "2px", backgroundColor: "black"}} ]
] ]
, R2.row , R2.row
[ H.div {className: "col-md-8 content"} [ H.div {className: "col-md-8 content"}
[ H.p {} [ H.p {}
[ H.span {className: "fa fa-globe"} [] [
, renameable {text: " " <> desc, onRename: onRenameDesc} [] renameable {icon: "fa fa-info", text: title, onRename: onRenameTitle} []
] ]
, H.p {} , H.p {}
[ H.span {className: "fa fa-search-plus"} [] [
, renameable {text: " " <> query, onRename: onRenameQuery} [] renameable {icon: "fa fa-globe", text: desc, onRename: onRenameDesc} []
]
, H.p {}
[
renameable {icon: "fa fa-search-plus", text: query, onRename: onRenameQuery} []
] ]
, H.p { className: "cache-toggle" , H.p { className: "cache-toggle"
, on: { click: cacheClick cacheState } } , on: { click: cacheClick cacheState } }
...@@ -130,8 +136,8 @@ tableHeaderWithRenameBoxedLayoutCpt = here.component "tableHeaderWithRenameBoxed ...@@ -130,8 +136,8 @@ tableHeaderWithRenameBoxedLayoutCpt = here.component "tableHeaderWithRenameBoxed
] ]
, H.div {className: "col-md-4 content"} , H.div {className: "col-md-4 content"}
[ H.p {} [ H.p {}
[ H.span {className: "fa fa-user"} [] [
, renameable {text: " " <> authors, onRename: onRenameAuthors} [] renameable {icon: "fa fa-user", text: authors, onRename: onRenameAuthors} []
] ]
, H.p {} , H.p {}
[ H.span {className: "fa fa-calendar"} [] [ H.span {className: "fa fa-calendar"} []
......
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