Skip to content

P
purescript-gargantext
Commit 1b25f351 authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski
Browse files
Options

tree: nodePopupView migrated to reactix

parent 59575d75
Hide whitespace changes
Inline Side-by-side
Showing with 129 additions and 104 deletions
dist/styles/Login.css
View file @ 1b25f351
...@@ -82,7 +82,7 @@ li#rename #rename-a{ ...@@ -82,7 +82,7 @@ li#rename #rename-a{
} }
#rename-tooltip { #node-popup-tooltip {
position : absolute; position : absolute;
left : 96px; left : 96px;
top:-64px; top:-64px;
...@@ -161,7 +161,7 @@ text-align: center; ...@@ -161,7 +161,7 @@ text-align: center;
transform: scale(1.4); transform: scale(1.4);
} }
#rename-tooltip:hover { #node-popup-tooltip:hover {
border:none; border:none;
} }
...@@ -177,7 +177,7 @@ text-align: center; ...@@ -177,7 +177,7 @@ text-align: center;
left: -9px; left: -9px;
} }
#rename-tooltip a:hover #node-popup-tooltip a:hover
{ {
text-decoration:none; text-decoration:none;
} }
......
src/Gargantext/Components/Tree.purs
View file @ 1b25f351
...@@ -67,7 +67,6 @@ newtype LNode = LNode { id :: ID ...@@ -67,7 +67,6 @@ newtype LNode = LNode { id :: ID
, nodeType :: NodeType , nodeType :: NodeType
, open :: Boolean , open :: Boolean
, popOver :: Boolean , popOver :: Boolean
, renameNodeValue :: String
, nodeValue :: String , nodeValue :: String
, createNode :: Boolean , createNode :: Boolean
, droppedFile :: Maybe DroppedFile , droppedFile :: Maybe DroppedFile
...@@ -86,7 +85,6 @@ instance decodeJsonLNode :: DecodeJson LNode where ...@@ -86,7 +85,6 @@ instance decodeJsonLNode :: DecodeJson LNode where
, nodeType , nodeType
, open : true , open : true
, popOver : false , popOver : false
, renameNodeValue : ""
, createNode : false , createNode : false
, nodeValue : "" , nodeValue : ""
, droppedFile: Nothing , droppedFile: Nothing
...@@ -125,7 +123,6 @@ type FileHash = String ...@@ -125,7 +123,6 @@ type FileHash = String
data Action = ShowPopOver ID data Action = ShowPopOver ID
| ToggleFolder ID | ToggleFolder ID
| RenameNode String ID
| Submit ID String | Submit ID String
| DeleteNode ID | DeleteNode ID
| Create ID | Create ID
...@@ -174,9 +171,6 @@ performAction (Submit rid name) _ _ = do ...@@ -174,9 +171,6 @@ performAction (Submit rid name) _ _ = do
modifyState_ $ mapFTree $ map $ popOverNode rid modifyState_ $ mapFTree $ map $ popOverNode rid
<<< onNode rid (\(LNode node) -> LNode (node { name = name })) <<< onNode rid (\(LNode node) -> LNode (node { name = name }))
performAction (RenameNode r nid) _ _ =
modifyState_ $ mapFTree $ rename nid r
performAction (CreateSubmit nid name nodeType) _ _ = do performAction (CreateSubmit nid name nodeType) _ _ = do
void $ lift $ createNode nid $ CreateValue {name, nodeType} void $ lift $ createNode nid $ CreateValue {name, nodeType}
modifyState_ $ mapFTree $ map $ hidePopOverNode nid modifyState_ $ mapFTree $ map $ hidePopOverNode nid
...@@ -233,13 +227,6 @@ showCreateNode sid (NTree (LNode node@{id, createNode}) ary) = ...@@ -233,13 +227,6 @@ showCreateNode sid (NTree (LNode node@{id, createNode}) ary) =
where where
createNode' = if sid == id then not createNode else createNode createNode' = if sid == id then not createNode else createNode
-- TODO: DRY, NTree.map
rename :: ID -> String -> NTree LNode -> NTree LNode
rename sid v (NTree (LNode node@{id}) ary) =
NTree (LNode $ node {renameNodeValue = rvalue}) $ map (rename sid v) ary
where
rvalue = if sid == id then v else ""
-- TODO: DRY, NTree.map -- TODO: DRY, NTree.map
setNodeValue :: ID -> String -> NTree LNode -> NTree LNode setNodeValue :: ID -> String -> NTree LNode -> NTree LNode
setNodeValue sid v (NTree (LNode node@{id}) ary) = setNodeValue sid v (NTree (LNode node@{id}) ary) =
...@@ -315,96 +302,134 @@ treeview = simpleSpec defaultPerformAction render ...@@ -315,96 +302,134 @@ treeview = simpleSpec defaultPerformAction render
, component: treeViewClass , component: treeViewClass
} ] } ]
renameTreeView :: (Action -> Effect Unit) -> FTree -> ID -> ReactElement
renameTreeView d s@(NTree (LNode {id, name, renameNodeValue, popOver: true, showRenameBox }) ary) nid = nodePopupView :: (Action -> Effect Unit) -> FTree -> R.Element
div [ className "" nodePopupView d s@(NTree (LNode {id, name, popOver: true, showRenameBox }) ary) = R.createElement el {} []
, _id "rename-tooltip" where
, _data {toggle: "tooltip", placement: "right"} el = R.hooksComponent "NodePopupView" cpt
, title "Settings on right"] $ cpt props _ = do
[ div [_id "arrow"] [] pure $ H.div tooltipProps $
, div [ className "panel panel-default" [ H.div {id: "arrow"} []
, style {border:"1px solid rgba(0,0,0,0.2)", boxShadow : "0 2px 5px rgba(0,0,0,0.2)"}] , H.div { className: "panel panel-default"
[ div [className "panel-heading"] , style: { border:"1px solid rgba(0,0,0,0.2)"
[ div [ className "row" ] $ , boxShadow : "0 2px 5px rgba(0,0,0,0.2)"}
[ div [className (if (showRenameBox) then "col-md-10" else "col-md-8")] }
[ renameBox showRenameBox ] [ panelHeading
] <> [ editIcon showRenameBox ] <> [ , panelBody
div [ className "col-md-2" ]
[ a [className "btn text-danger glyphitem glyphicon glyphicon-remove"
, onClick $ \_ -> d $ ShowPopOver nid
, title "Close"] []
] ]
] ]
] where
, div [ className "panel-body" tooltipProps = ({ className: ""
, style {display:"flex", justifyContent : "center", backgroundColor: "white", border: "none"}] , id: "node-popup-tooltip"
[ div [className "col-md-4"] , title: "Node settings"
[a [ style iconAStyle } .= "data-toggle" $ "tooltip") .= "data-placement" $ "right"
, className (glyphicon "plus") iconAStyle = {color:"black", paddingTop: "6px", paddingBottom: "6px"}
, _id "create" panelHeading =
, title "Create" H.div {className: "panel-heading"}
, onClick $ (\_ -> d $ (ToggleCreateNode id))] [ H.div {className: "row" }
[] (
] [ H.div {className: if (showRenameBox) then "col-md-10" else "col-md-8"}
, div [className "col-md-4"] [ renameBox d s ]
[a [ style iconAStyle ] <> [ editIcon showRenameBox ] <> [
, className (glyphicon "download-alt") H.div {className: "col-md-2"}
, _id "download" [ H.a {className: "btn text-danger glyphitem glyphicon glyphicon-remove"
, title "Download [WIP]"] , onClick: mkEffectFn1 $ \_ -> d $ ShowPopOver id
[] , title: "Close"} []
] ]
, div [className "col-md-4"] ]
[a [ style iconAStyle )
, className (glyphicon "duplicate") ]
, _id "duplicate" glyphicon t = "glyphitem glyphicon glyphicon-" <> t
, title "Duplicate [WIP]"] editIcon false = H.div {className: "col-md-2"}
[] [ H.a {style: {color:"black"}
] , className: "btn glyphitem glyphicon glyphicon-pencil"
, div [className "col-md-4"] , id: "rename1"
[ a [ style iconAStyle , title: "Rename"
, className (glyphicon "trash") , onClick: mkEffectFn1 $ (\_-> d $ (ShowRenameBox id))}
, _id "rename2" []
, title "Delete" ]
, onClick $ (\_-> d $ (DeleteNode id))] editIcon true = H.div {} []
[] panelBody =
H.div {className: "panel-body"
, style: { display:"flex"
, justifyContent : "center"
, backgroundColor: "white"
, border: "none"}}
[ H.div {className: "col-md-4"}
[ H.a {style: iconAStyle
, className: (glyphicon "plus")
, id: "create"
, title: "Create"
, onClick: mkEffectFn1 $ (\_ -> d $ (ToggleCreateNode id))}
[]
]
, H.div {className: "col-md-4"}
[ H.a {style: iconAStyle
, className: (glyphicon "download-alt")
, id: "download"
, title: "Download [WIP]"}
[]
]
, H.div {className: "col-md-4"}
[ H.a {style: iconAStyle
, className: (glyphicon "duplicate")
, id: "duplicate"
, title: "Duplicate [WIP]"}
[]
]
, H.div {className: "col-md-4"}
[ H.a {style: iconAStyle
, className: (glyphicon "trash")
, id: "rename2"
, title: "Delete"
, onClick: mkEffectFn1 $ (\_-> d $ (DeleteNode id))}
[]
]
]
nodePopupView _ _ = R.createElement el {} []
where
el = R.hooksComponent "CreateNodeView" cpt
cpt props _ = pure $ H.div {} []
renameBox :: (Action -> Effect Unit) -> FTree -> R.Element
renameBox d s@(NTree (LNode {id, name, showRenameBox: true}) _) = R.createElement el {} []
where
el = R.hooksComponent "RenameBox" cpt
cpt props _ = do
renameNodeName <- R.useState $ \_ -> pure name
pure $ H.div {className: "from-group row-no-padding"}
[ renameInput renameNodeName
, renameBtn renameNodeName
, cancelBtn
] ]
] where
] renameInput (_ /\ setRenameNodeName) =
] H.div {className: "col-md-8"}
[ H.input { _type: "text"
, placeholder: "Rename Node"
, defaultValue: name
, className: "form-control"
, onInput: mkEffectFn1 $ \e -> setRenameNodeName $ e .. "target" .. "value"
}
]
renameBtn (newName /\ _) =
H.a {className: "btn glyphitem glyphicon glyphicon-ok col-md-2 pull-left"
, _type: "button"
, onClick: mkEffectFn1 $ \_ -> d $ (Submit id newName)
, title: "Rename"
} []
cancelBtn =
H.a {className: "btn text-danger glyphitem glyphicon glyphicon-remove col-md-2 pull-left"
, _type: "button"
, onClick: mkEffectFn1 $ \_ -> d $ (CancelRename id)
, title: "Cancel"
} []
renameBox _ s@(NTree (LNode {name}) _) = R.createElement el {} []
where where
iconAStyle = {color:"black", paddingTop: "6px", paddingBottom: "6px"} el = R.hooksComponent "RenameBox" cpt
glyphicon t = "glyphitem glyphicon glyphicon-" <> t cpt props _ = pure $ H.div {} [ H.text name ]
editIcon false = div [ className "col-md-2" ]
[ a [ style {color:"black"}
, className "btn glyphitem glyphicon glyphicon-pencil"
, _id "rename1"
, title "Rename"
, onClick $ (\_-> d $ (ShowRenameBox id))]
[]
]
editIcon true = div [] []
renameBox true = div [ className "from-group row-no-padding" ]
[ div [className "col-md-8"]
[ input [ _type "text"
, placeholder "Rename Node"
, defaultValue $ name
, className "form-control"
, onInput \e -> d (RenameNode (unsafeEventValue e) nid)
]
]
, a [className "btn glyphitem glyphicon glyphicon-ok col-md-2 pull-left"
, _type "button"
, onClick \_ -> d $ (Submit nid renameNodeValue)
, title "Rename"
] []
, a [className "btn text-danger glyphitem glyphicon glyphicon-remove col-md-2 pull-left"
, _type "button"
, onClick \_ -> d $ (CancelRename nid)
, title "Cancel"
] []
]
renameBox false = div [] [ text name ]
renameTreeView _ _ _ = div [] []
createNodeView :: (Action -> Effect Unit) -> FTree -> R.Element createNodeView :: (Action -> Effect Unit) -> FTree -> R.Element
createNodeView d s@(NTree (LNode {id, createNode: true, nodeValue}) _) = R.createElement el {} [] createNodeView d s@(NTree (LNode {id, createNode: true, nodeValue}) _) = R.createElement el {} []
...@@ -539,7 +564,7 @@ toHtml d s@(NTree (LNode {id, name, nodeType}) []) n = ...@@ -539,7 +564,7 @@ toHtml d s@(NTree (LNode {id, name, nodeType}) []) n =
, onClick $ (\e -> d $ CurrentNode id) , onClick $ (\e -> d $ CurrentNode id)
] ]
[ if n == (Just id) then u [] [b [] [text ("| " <> name <> " | ")]] else text (name <> " ") ] [ if n == (Just id) then u [] [b [] [text ("| " <> name <> " | ")]] else text (name <> " ") ]
, renameTreeView d s id , (R2.scuff $ nodePopupView d s)
, (R2.scuff $ createNodeView d s) , (R2.scuff $ createNodeView d s)
, (R2.scuff $ fileTypeView d s) , (R2.scuff $ fileTypeView d s)
] ]
...@@ -559,7 +584,7 @@ toHtml d s@(NTree (LNode {id, name, nodeType, open}) ary) n = ...@@ -559,7 +584,7 @@ toHtml d s@(NTree (LNode {id, name, nodeType, open}) ary) n =
, _id "rename" , _id "rename"
, onClick $ (\_-> d $ (ShowPopOver id)) , onClick $ (\_-> d $ (ShowPopOver id))
] [] ] []
, renameTreeView d s id , (R2.scuff $ nodePopupView d s)
, (R2.scuff $ createNodeView d s) , (R2.scuff $ createNodeView d s)
, (R2.scuff $ fileTypeView d s) , (R2.scuff $ fileTypeView d s)
] ]
......
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