Skip to content

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

tree: improvements to rename box styling 

It's quite ugly to display the buttons under the input box for rename, fixed to
have check/remove buttons on the right of the input.

Also, rename box "close" button added.
parent 027ae537
Hide whitespace changes
Inline Side-by-side
Showing with 94 additions and 94 deletions
dist/styles/Login.css
View file @ e7d4b7aa
...@@ -184,3 +184,12 @@ text-align: center; ...@@ -184,3 +184,12 @@ text-align: center;
#graph-tree .tree { #graph-tree .tree {
margin-top: 27px; margin-top: 27px;
} }
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.row-no-padding > [class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
src/Gargantext/Components/ContextMenu/ContextMenu.purs
View file @ e7d4b7aa
...@@ -24,7 +24,7 @@ import Reactix as R ...@@ -24,7 +24,7 @@ import Reactix as R
import Reactix.DOM.HTML as HTML import Reactix.DOM.HTML as HTML
import Reactix.SyntheticEvent as E import Reactix.SyntheticEvent as E
import Gargantext.Utils.Reactix as R' import Gargantext.Utils.Reactix as R2
type Props t = ( x :: Number, y :: Number, setMenu :: Maybe t -> Effect Unit) type Props t = ( x :: Number, y :: Number, setMenu :: Maybe t -> Effect Unit)
...@@ -71,14 +71,14 @@ contextMenuEffect setMenu rootRef _ = ...@@ -71,14 +71,14 @@ contextMenuEffect setMenu rootRef _ =
documentClickHandler :: forall t. (Maybe t -> Effect Unit) -> DOM.Element -> Callback DE.MouseEvent documentClickHandler :: forall t. (Maybe t -> Effect Unit) -> DOM.Element -> Callback DE.MouseEvent
documentClickHandler hide menu = documentClickHandler hide menu =
R'.named "hideMenuOnClickOutside" $ callback $ \e -> R2.named "hideMenuOnClickOutside" $ callback $ \e ->
if Element.contains menu (DE.target e) if Element.contains menu (DE.target e)
then pure unit then pure unit
else hide Nothing else hide Nothing
documentScrollHandler :: forall t. (Maybe t -> Effect Unit) -> Callback DE.MouseEvent documentScrollHandler :: forall t. (Maybe t -> Effect Unit) -> Callback DE.MouseEvent
documentScrollHandler hide = documentScrollHandler hide =
R'.named "hideMenuOnScroll" $ callback $ \e -> hide Nothing R2.named "hideMenuOnScroll" $ callback $ \e -> hide Nothing
position :: forall t. Record (Props t) -> DOMRect -> { left :: Number, top :: Number } position :: forall t. Record (Props t) -> DOMRect -> { left :: Number, top :: Number }
position mouse {width: menuWidth, height: menuHeight} = {left, top} position mouse {width: menuWidth, height: menuHeight} = {left, top}
......
src/Gargantext/Components/Search/SearchField.purs
View file @ e7d4b7aa
...@@ -93,4 +93,3 @@ submitButton (database /\ _) (term /\ _) (_ /\ setSearch) = ...@@ -93,4 +93,3 @@ submitButton (database /\ _) (term /\ _) (_ /\ setSearch) =
case term of case term of
"" -> setSearch Nothing "" -> setSearch Nothing
_ -> setSearch $ Just { database, term } _ -> setSearch $ Just { database, term }
src/Gargantext/Components/Tree.purs
View file @ e7d4b7aa
...@@ -294,99 +294,91 @@ treeview = simpleSpec defaultPerformAction render ...@@ -294,99 +294,91 @@ treeview = simpleSpec defaultPerformAction render
renameTreeView :: (Action -> Effect Unit) -> FTree -> ID -> ReactElement renameTreeView :: (Action -> Effect Unit) -> FTree -> ID -> ReactElement
renameTreeView d s@(NTree (LNode {id, name, nodeType, open, popOver, renameNodeValue, showRenameBox }) ary) nid = renameTreeView d s@(NTree (LNode {id, name, nodeType, open, popOver, renameNodeValue, showRenameBox }) ary) nid =
div [className "col-md-12", _id "rename-tooltip",className "btn btn-secondary", _data {toggle : "tooltip", placement : "right"}, title "Settings on right"] div [ className ""
[ div [_id "arrow"] [] , _id "rename-tooltip"
, div [className "panel panel-default", style {border:"1px solid rgba(0,0,0,0.2)", boxShadow : "0 2px 5px rgba(0,0,0,0.2)"}] , _data {toggle : "tooltip", placement : "right"}
[ , title "Settings on right"] $
div [className "panel-heading", style {float:"left", width: "100%"}] [ div [_id "arrow"] []
[ , div [ className "panel panel-default"
if (showRenameBox) then div [_id "afterClick"] , style {border:"1px solid rgba(0,0,0,0.2)", boxShadow : "0 2px 5px rgba(0,0,0,0.2)"}]
[ [ div [className "panel-heading"]
div [className "col-md-12"] [ div [ className "row" ] $
[ [ div [className (if (showRenameBox) then "col-md-10" else "col-md-8")]
input [ _type "text" [ if (showRenameBox) then renameBox else renameBoxLabel ]
, placeholder "Rename Node" ] <> [ if (showRenameBox) then editIconDummy else editIcon ] <> [
, defaultValue $ name div [ className "col-md-2" ]
, style {float: "left"} [ a [className "btn glyphitem glyphicon glyphicon-remove"
, className "col-md-2 form-control" , onClick $ \_ -> d $ ShowPopOver nid] []
, onInput \e -> d (RenameNode (unsafeEventValue e) nid) ]
] ]
] ]
, div [className "col-md-12"] , div [ className "panel-body"
[ div [className "row", style {marginTop : "11px"}] , style {display:"flex", justifyContent : "center", backgroundColor: "white", border: "none"}]
[ div [className "col-md-6"] [ [ div [className "col-md-4"]
a [className "btn btn-danger" [a [ style iconAStyle
, _type "button" , className (glyphicon "plus")
, onClick \_ -> d $ (Submit nid renameNodeValue) , _id "rename1"
, style {float:"left"} , title "Create"
] [text "Rename"] , onClick $ (\_ -> d $ (ToggleCreateNode id))]
] []
, div [className "col-md-6"] ]
[a [className "btn btn-primary" , div [className "col-md-4"]
, _type "button" [a [ style iconAStyle
, onClick \_ -> d $ (CancelRename nid) , className (glyphicon "download-alt")
, style {float:"left", backgroundColor: "white", color:"black"} , _id "rename1"
] [text "cancel"] , title "Download [WIP]"]
[]
] ]
] , div [className "col-md-4"]
[a [ style iconAStyle
] , className (glyphicon "duplicate")
, _id "rename1"
] , title "Duplicate [WIP]"]
else []
div [ _id "beforeClick", className "col-md-12"] ]
[ div [className "row"] , div [className "col-md-4"]
[ div [className "col-md-6"] [ a [ style iconAStyle
[text name] , className (glyphicon "trash")
, a [ style {color:"black"} , _id "rename2"
, className "glyphitem glyphicon glyphicon-pencil col-md-2" , title "Delete"
, _id "rename1" , onClick $ (\_-> d $ (DeleteNode id))]
, title "Rename" []
, onClick $ (\_-> d $ (ShowRenameBox id))] ]
[] ]
] ]
] ]
]
, div [ className "panel-body"
, style {display:"flex", justifyContent : "center", backgroundColor: "white", border: "none"}]
[ div [className "col-md-4"]
[a [ style iconAStyle
, className (glyphicon "plus")
, _id "rename1"
, title "Create"
, onClick $ (\_ -> d $ (ToggleCreateNode id))]
[]
]
, div [className "col-md-4"]
[a [ style iconAStyle
, className (glyphicon "download-alt")
, _id "rename1"
, title "Download [WIP]"]
[]
]
, div [className "col-md-4"]
[a [ style iconAStyle
, className (glyphicon "duplicate")
, _id "rename1"
, title "Duplicate [WIP]"]
[]
]
, div [className "col-md-4"]
[ a [ style iconAStyle
, className (glyphicon "trash")
, _id "rename2"
, title "Delete"
, onClick $ (\_-> d $ (DeleteNode id))]
[]
]
]
]
]
where where
iconAStyle = {color:"black", paddingTop: "6px", paddingBottom: "6px"} iconAStyle = {color:"black", paddingTop: "6px", paddingBottom: "6px"}
glyphicon t = "glyphitem glyphicon glyphicon-" <> t glyphicon t = "glyphitem glyphicon glyphicon-" <> t
editIcon = div [ className "col-md-2" ]
[ a [ style {color:"black"}
, className "btn glyphitem glyphicon glyphicon-pencil"
, _id "rename1"
, title "Rename"
, onClick $ (\_-> d $ (ShowRenameBox id))]
[]
]
editIconDummy = div [] []
renameBox = 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)
] []
, a [className "btn glyphitem glyphicon glyphicon-remove col-md-2 pull-left"
, _type "button"
, onClick \_ -> d $ (CancelRename nid)
, style {backgroundColor: "white", color:"black"}
] []
]
renameBoxLabel = div [] [ text name ]
createNodeView :: (Action -> Effect Unit) -> FTree -> ID -> ReactElement createNodeView :: (Action -> Effect Unit) -> FTree -> ID -> ReactElement
......
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