Skip to content

P
purescript-gargantext
Commit 4e60123f authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski
Browse files
Options

[Tree] fix node popup to use fixed CSS positioning 

This way the popup really floats, avoiding being caught up in absolute
divs with limited width etc.
parent 03e4cf67
Hide whitespace changes
Inline Side-by-side
Showing with 185 additions and 162 deletions
dist/styles/Login.css
View file @ 4e60123f
......@@ -46,9 +46,7 @@ li#rename #rename-a {
}
#node-popup-tooltip {
position: absolute;
left: 96px;
top: -64px;
position: fixed;
background-color: white;
z-index: 1000;
}
......
dist/styles/Login.sass
View file @ 4e60123f
......@@ -45,9 +45,10 @@ li#rename
#node-popup-tooltip
position : absolute
left : 96px
top: -64px
//position : absolute
position: fixed
//left : 96px
//top: -64px
background-color: white
z-index: 1000
&:hover
......
src/Gargantext/Components/Forest/Tree/Node.purs
View file @ 4e60123f
......@@ -2,6 +2,9 @@ module Gargantext.Components.Forest.Tree.Node where
import Prelude (class Eq, class Show, show, (&&), (<>), (==))
import Data.Array (foldl)
import Data.Maybe (Maybe(..))
import Data.Tuple (Tuple(..))
import Gargantext.Types
------------------------------------------------------------------------
......@@ -62,7 +65,6 @@ glyphiconNodeAction _ = ""
------------------------------------------------------------------------
------------------------------------------------------------------------
data SettingsBox =
SettingsBox { show :: Boolean
, edit :: Boolean
......@@ -72,134 +74,143 @@ data SettingsBox =
------------------------------------------------------------------------
settingsBox :: NodeType -> SettingsBox
settingsBox NodeUser = SettingsBox { show : true
, edit : false
, doc : Documentation NodeUser
, buttons : [ SearchBox
, Add [ FolderPrivate
, FolderShared
, FolderPublic
]
, Delete
]
}
settingsBox FolderPrivate = SettingsBox { show: true
, edit : false
, doc : Documentation FolderPrivate
, buttons : [ SearchBox
, Add [ Corpus
, Folder
, Annuaire
]
, Delete]
}
settingsBox Team = SettingsBox { show: true
, edit : false
, doc : Documentation Team
, buttons : [ SearchBox
, Add [ Corpus
, Folder
, Annuaire
]
, Delete]
}
settingsBox FolderShared = SettingsBox { show: true
, edit : true
, doc : Documentation FolderShared
, buttons : [ Add [Team, FolderShared]
, Delete
]
}
settingsBox FolderPublic = SettingsBox { show : true
, edit : false
, doc : Documentation FolderPublic
, buttons : [{-, SearchBox
settingsBox NodeUser = SettingsBox {
show: true
, edit : false
, doc : Documentation NodeUser
, buttons : [ SearchBox
, Add [ FolderPrivate
, FolderShared
, FolderPublic
]
, Delete
]
}
settingsBox FolderPrivate = SettingsBox {
show: true
, edit : false
, doc : Documentation FolderPrivate
, buttons : [ SearchBox
, Add [ Corpus
, Folder
, Annuaire
]
, Delete]
}
settingsBox Team = SettingsBox {
show: true
, edit : false
, doc : Documentation Team
, buttons : [ SearchBox
, Add [ Corpus
, Folder
, Annuaire
]
, Delete]
}
settingsBox FolderShared = SettingsBox {
show: true
, edit : true
, doc : Documentation FolderShared
, buttons : [ Add [Team, FolderShared]
, Delete
]
}
settingsBox FolderPublic = SettingsBox {
show: true
, edit : false
, doc : Documentation FolderPublic
, buttons : [{-, SearchBox
, Add [ Corpus
, Folder
]-}
Delete
]
}
settingsBox Folder = SettingsBox { show : true
, edit : true
, doc : Documentation Folder
, buttons : [ SearchBox
, Add [ Corpus
, Folder
, Annuaire
]
, Delete
]
}
settingsBox Corpus = SettingsBox { show : true
, edit : true
, doc : Documentation Corpus
, buttons : [ SearchBox
, Add [ NodeList
, Graph
, Dashboard
]
, Upload
, Download
--, Share
--, Move
--, Clone
, Link Annuaire
, Delete
]
}
settingsBox Texts = SettingsBox { show : true
, edit : false
, doc : Documentation Texts
, buttons : [ Upload
, Download
, Delete
]
}
settingsBox Graph = SettingsBox { show : true
, edit : false
, doc : Documentation Graph
, buttons : [ Documentation Graph
, Download
, Delete
]
}
settingsBox NodeList = SettingsBox { show : true
, edit : false
, doc : Documentation NodeList
, buttons : [ Upload
, Download
, Delete
]
}
settingsBox Dashboard = SettingsBox { show : true
, edit : false
, doc : Documentation Dashboard
, buttons : [Delete]
}
settingsBox Annuaire = SettingsBox { show : true
, edit : false
, doc : Documentation Annuaire
, buttons : [Delete]
}
settingsBox _ = SettingsBox { show : false
, edit : false
, doc : Documentation NodeUser
, buttons : []
}
Delete
]
}
settingsBox Folder = SettingsBox {
show: true
, edit : true
, doc : Documentation Folder
, buttons : [ SearchBox
, Add [ Corpus
, Folder
, Annuaire
]
, Delete
]
}
settingsBox Corpus = SettingsBox {
show: true
, edit : true
, doc : Documentation Corpus
, buttons : [ SearchBox
, Add [ NodeList
, Graph
, Dashboard
]
, Upload
, Download
--, Share
--, Move
--, Clone
, Link Annuaire
, Delete
]
}
settingsBox Texts = SettingsBox {
show: true
, edit : false
, doc : Documentation Texts
, buttons : [ Upload
, Download
, Delete
]
}
settingsBox Graph = SettingsBox {
show: true
, edit : false
, doc : Documentation Graph
, buttons : [ Documentation Graph
, Download
, Delete
]
}
settingsBox NodeList = SettingsBox {
show: true
, edit : false
, doc : Documentation NodeList
, buttons : [ Upload
, Download
, Delete
]
}
settingsBox Dashboard = SettingsBox {
show: true
, edit : false
, doc : Documentation Dashboard
, buttons : [Delete]
}
settingsBox Annuaire = SettingsBox {
show: true
, edit : false
, doc : Documentation Annuaire
, buttons : [Delete]
}
settingsBox _ = SettingsBox {
show: false
, edit : false
, doc : Documentation NodeUser
, buttons : []
}
src/Gargantext/Components/Forest/Tree/Node/Box.purs
View file @ 4e60123f
......@@ -48,9 +48,10 @@ nodeMainSpan :: (Action -> Aff Unit)
nodeMainSpan d p folderOpen session frontends = R.createElement el p []
where
el = R.hooksComponent "NodeMainSpan" cpt
cpt {id, name, nodeType, mCurrentRoute} _ = do
cpt props@{id, name, nodeType, mCurrentRoute} _ = do
-- only 1 popup at a time is allowed to be opened
popupOpen <- R.useState' (Nothing :: Maybe NodePopup)
popupPosition <- R.useState' (Nothing :: Maybe R2.Point)
droppedFile <- R.useState' (Nothing :: Maybe DroppedFile)
isDragOver <- R.useState' false
......@@ -60,36 +61,45 @@ nodeMainSpan d p folderOpen session frontends = R.createElement el p []
, style: {marginLeft: "22px"}
}
[ nodeText { isSelected: (mCorpusId mCurrentRoute) == (Just id)
, name: name'} ]
, if showBox then popOverIcon popupOpen else H.div {} []
, if showBox
then nodePopupView d { id
, name:name'
, nodeType
, action: Nothing
, session
} popupOpen
else H.div {} []
, name: name' props} ]
, popOverIcon showBox popupOpen popupPosition
, mNodePopupView props showBox popupOpen popupPosition
, fileTypeView d {id, nodeType} droppedFile isDragOver
]
where
name' = if nodeType == NodeUser then show session else name
SettingsBox {show:showBox} = settingsBox nodeType
SettingsBox {show: showBox} = settingsBox nodeType
name' {name, nodeType} = if nodeType == NodeUser then show session else name
folderIcon nodeType folderOpen'@(open /\ _) =
H.a {onClick: R2.effToggler folderOpen'}
[ H.i {className: fldr nodeType open} [] ]
popOverIcon (popOver /\ setPopOver) =
popOverIcon false _ _ = H.div {} []
popOverIcon true (popOver /\ setPopOver) (_ /\ setPopupPosition) =
H.a { className: "glyphicon glyphicon-cog"
, id: "rename-leaf"
, on: { click: \_ -> setPopOver $ toggle }
, on: { click: toggle popOver }
} []
where
toggle Nothing = Just NodePopup
toggle _ = Nothing
toggle Nothing e = do
setPopupPosition $ const $ Just $ R2.mousePosition e
setPopOver $ const $ Just NodePopup
toggle _ _ = do
setPopupPosition $ const Nothing
setPopOver $ const Nothing
mNodePopupView _ false _ _ = H.div {} []
mNodePopupView _ _ (Nothing /\ _) _ = H.div {} []
mNodePopupView _ _ _ (Nothing /\ _) = H.div {} []
mNodePopupView props@{id, nodeType} true popupOpen (Just position /\ _) =
nodePopupView d { id
, action: Nothing
, name: name' props
, nodeType
, position
, session
} popupOpen
dropProps droppedFile isDragOver =
{ className: dropClass droppedFile isDragOver
......@@ -159,9 +169,10 @@ mCorpusId _ = Nothing
-- | START Popup View
type NodePopupProps =
( id :: ID
, action :: Maybe NodeAction
, name :: Name
, nodeType :: NodeType
, action :: Maybe NodeAction
, position :: R2.Point
, session :: Session
)
......@@ -178,11 +189,11 @@ nodePopupView :: (Action -> Aff Unit)
nodePopupView d p mPop@(Just NodePopup /\ setPopupOpen) = R.createElement el p []
where
el = R.hooksComponent "NodePopupView" cpt
cpt {id, name, nodeType, action, session} _ = do
cpt {id, action, name, nodeType, position, session} _ = do
renameBoxOpen <- R.useState' false
nodePopupState@(nodePopup /\ setNodePopup) <- R.useState' {id, name, nodeType, action}
search <- R.useState' $ defaultSearch { node_id = Just id }
pure $ H.div tooltipProps $
pure $ H.div (tooltipProps position) $
[ H.div {id: "arrow"} []
, H.div { className: "popup-container" }
[ H.div { className: "panel panel-default" }
......@@ -206,12 +217,14 @@ nodePopupView d p mPop@(Just NodePopup /\ setPopupOpen) = R.createElement el p [
]
]
where
tooltipProps = { className: ""
, id: "node-popup-tooltip"
, title: "Node settings"
, data: { toggle: "tooltip"
, placement: "right"}
}
tooltipProps (R2.Point {x, y}) = {
className: ""
, id: "node-popup-tooltip"
, title: "Node settings"
, data: { toggle: "tooltip"
, placement: "right"},
style: { top: y, left: x }
}
SettingsBox {edit, doc, buttons} = settingsBox nodeType
......
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