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;
#graph-tree .tree {
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
import Reactix.DOM.HTML as HTML
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)
......@@ -71,14 +71,14 @@ contextMenuEffect setMenu rootRef _ =
documentClickHandler :: forall t. (Maybe t -> Effect Unit) -> DOM.Element -> Callback DE.MouseEvent
documentClickHandler hide menu =
R'.named "hideMenuOnClickOutside" $ callback $ \e ->
R2.named "hideMenuOnClickOutside" $ callback $ \e ->
if Element.contains menu (DE.target e)
then pure unit
else hide Nothing
documentScrollHandler :: forall t. (Maybe t -> Effect Unit) -> Callback DE.MouseEvent
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 mouse {width: menuWidth, height: menuHeight} = {left, top}
......
src/Gargantext/Components/Search/SearchField.purs
View file @ e7d4b7aa
......@@ -93,4 +93,3 @@ submitButton (database /\ _) (term /\ _) (_ /\ setSearch) =
case term of
"" -> setSearch Nothing
_ -> setSearch $ Just { database, term }
src/Gargantext/Components/Tree.purs
View file @ e7d4b7aa
......@@ -294,99 +294,91 @@ treeview = simpleSpec defaultPerformAction render
renameTreeView :: (Action -> Effect Unit) -> FTree -> ID -> ReactElement
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 [_id "arrow"] []
, 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)"}]
[
div [className "panel-heading", style {float:"left", width: "100%"}]
[
if (showRenameBox) then div [_id "afterClick"]
[
div [className "col-md-12"]
[
input [ _type "text"
, placeholder "Rename Node"
, defaultValue $ name
, style {float: "left"}
, className "col-md-2 form-control"
, onInput \e -> d (RenameNode (unsafeEventValue e) nid)
]
]
, div [className "col-md-12"]
[ div [className "row", style {marginTop : "11px"}]
[ div [className "col-md-6"] [
a [className "btn btn-danger"
, _type "button"
, onClick \_ -> d $ (Submit nid renameNodeValue)
, style {float:"left"}
] [text "Rename"]
]
, div [className "col-md-6"]
[a [className "btn btn-primary"
, _type "button"
, onClick \_ -> d $ (CancelRename nid)
, style {float:"left", backgroundColor: "white", color:"black"}
] [text "cancel"]
]
]
]
]
else
div [ _id "beforeClick", className "col-md-12"]
[ div [className "row"]
[ div [className "col-md-6"]
[text name]
, a [ style {color:"black"}
, className "glyphitem glyphicon glyphicon-pencil col-md-2"
, _id "rename1"
, 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))]
[]
]
]
]
]
div [ className ""
, _id "rename-tooltip"
, _data {toggle : "tooltip", placement : "right"}
, title "Settings on right"] $
[ div [_id "arrow"] []
, 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)"}]
[ div [className "panel-heading"]
[ div [ className "row" ] $
[ div [className (if (showRenameBox) then "col-md-10" else "col-md-8")]
[ if (showRenameBox) then renameBox else renameBoxLabel ]
] <> [ if (showRenameBox) then editIconDummy else editIcon ] <> [
div [ className "col-md-2" ]
[ a [className "btn glyphitem glyphicon glyphicon-remove"
, onClick $ \_ -> d $ ShowPopOver nid] []
]
]
]
, 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
iconAStyle = {color:"black", paddingTop: "6px", paddingBottom: "6px"}
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
......
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