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