Skip to content

P
purescript-gargantext
Commit 326236bc authored by arturo's avatar arturo
Browse files
Options

[layout] Modal closing issue on actions 

* #432
parent 46286418
Hide whitespace changes
Inline Side-by-side
Showing with 250 additions and 87 deletions
dist/styles/bootstrap-darkster.css
View file @ 326236bc
......@@ -9725,14 +9725,21 @@ a:focus, a:hover {
max-width: 100vw;
}
.node-popup-tooltip .panel-actions {
font-size: 90%;
padding-left: 20px;
}
.node-popup-tooltip .panel-actions .b-icon {
margin-right: 8px;
}
.node-popup-tooltip .panel-actions__almost-useable {
color: orange;
color: #f1a50e;
}
.node-popup-tooltip .panel-actions__development-in-progress {
color: red;
color: #8b2823;
}
.node-popup-tooltip .panel-actions__ok-to-use {
color: black;
color: #cccccc;
}
.node-popup-tooltip .popup-container {
display: flex;
......
dist/styles/bootstrap-default.css
View file @ 326236bc
......@@ -9678,14 +9678,21 @@ a:focus, a:hover {
max-width: 100vw;
}
.node-popup-tooltip .panel-actions {
font-size: 90%;
padding-left: 20px;
}
.node-popup-tooltip .panel-actions .b-icon {
margin-right: 8px;
}
.node-popup-tooltip .panel-actions__almost-useable {
color: orange;
color: #f1a50e;
}
.node-popup-tooltip .panel-actions__development-in-progress {
color: red;
color: #8b2823;
}
.node-popup-tooltip .panel-actions__ok-to-use {
color: black;
color: #212529;
}
.node-popup-tooltip .popup-container {
display: flex;
......
dist/styles/bootstrap-greyson.css
View file @ 326236bc
......@@ -9434,14 +9434,21 @@ a:focus, a:hover {
max-width: 100vw;
}
.node-popup-tooltip .panel-actions {
font-size: 90%;
padding-left: 20px;
}
.node-popup-tooltip .panel-actions .b-icon {
margin-right: 8px;
}
.node-popup-tooltip .panel-actions__almost-useable {
color: orange;
color: #f1a50e;
}
.node-popup-tooltip .panel-actions__development-in-progress {
color: red;
color: #8b2823;
}
.node-popup-tooltip .panel-actions__ok-to-use {
color: black;
color: #212529;
}
.node-popup-tooltip .popup-container {
display: flex;
......
dist/styles/bootstrap-herbie.css
View file @ 326236bc
......@@ -9682,14 +9682,21 @@ a:focus, a:hover {
max-width: 100vw;
}
.node-popup-tooltip .panel-actions {
font-size: 90%;
padding-left: 20px;
}
.node-popup-tooltip .panel-actions .b-icon {
margin-right: 8px;
}
.node-popup-tooltip .panel-actions__almost-useable {
color: orange;
color: #f1a50e;
}
.node-popup-tooltip .panel-actions__development-in-progress {
color: red;
color: #8b2823;
}
.node-popup-tooltip .panel-actions__ok-to-use {
color: black;
color: #212529;
}
.node-popup-tooltip .popup-container {
display: flex;
......
dist/styles/bootstrap-monotony.css
View file @ 326236bc
......@@ -9683,14 +9683,21 @@ a:focus, a:hover {
max-width: 100vw;
}
.node-popup-tooltip .panel-actions {
font-size: 90%;
padding-left: 20px;
}
.node-popup-tooltip .panel-actions .b-icon {
margin-right: 8px;
}
.node-popup-tooltip .panel-actions__almost-useable {
color: orange;
color: #f1a50e;
}
.node-popup-tooltip .panel-actions__development-in-progress {
color: red;
color: #8b2823;
}
.node-popup-tooltip .panel-actions__ok-to-use {
color: black;
color: #212529;
}
.node-popup-tooltip .popup-container {
display: flex;
......
src/Gargantext/Components/Bootstrap/Floaty/BaseModal.purs
View file @ 326236bc
module Gargantext.Components.Bootstrap.BaseModal
(baseModal
( baseModal
, showModal, hideModal
) where
......
src/Gargantext/Components/FolderView.purs
View file @ 326236bc
......@@ -357,9 +357,9 @@ performAction = performAction' where
hideModal window $ "#" <> (show nodeId)
refreshFolders p@{ boxes: { reloadForest }, reload } = do
closeBox p
liftEffect $ T2.reload reload
liftEffect $ T2.reload reloadForest
closeBox p
deleteNode' nt p@{ nodeId: id, parentId: parent_id, session } = do
case nt of
......
src/Gargantext/Components/FolderView/Box.purs
View file @ 326236bc
......@@ -4,10 +4,11 @@ import Gargantext.Prelude
import DOM.Simple as DOM
import Effect (Effect)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (Elevation(..))
import Gargantext.Components.Forest.Tree.Node.Tools (prettyNodeType)
import Gargantext.Types (ID, Name)
import Gargantext.Types as GT
import Gargantext.Utils.Glyphicon (glyphicon)
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
......@@ -45,13 +46,37 @@ nodePopupViewCpt = here.component "nodePopupView" cpt where
closeBox props = props.onPopoverClose <<< R.unsafeEventTarget
panelHeading props@{ nodeType } =
H.div { className: "popup-container__header card-header" }
[ R2.row
[ H.div { className: "col-4" }
[ H.span { className: GT.fldr nodeType true} [] -- TODO fix names
, H.span { className: "h5" } [ H.text $ prettyNodeType nodeType ] ]
, H.div { className: "col-6" }
[ H.span { className: "text-primary center" } [ H.text props.name ] ]
, H.div { className: "col-1" }
[ H.a { type: "button", on: { click: closeBox props }, title: "Close"
, className: glyphicon "window-close" } [] ]]]
H.div
{ className: "popup-container__header card-header" }
[
B.wad
[ "d-flex", "align-items-center" ]
[
H.div
{ className: "w-3/12" }
[
H.span { className: GT.fldr nodeType true} [] -- TODO fix names
,
B.span' { className: "ml-1 h5" } $ prettyNodeType nodeType
]
,
B.wad
[ "w-7/12", "pl-1" ]
[
B.wad'
[ "text-primary" ]
props.name
]
,
B.wad
[ "w-2/12", "text-right" ]
[
B.iconButton
{ callback: closeBox props
, title: "Close"
, elevation: Level1
, name: "times"
}
]
]
]
src/Gargantext/Components/Forest/Tree.purs
View file @ 326236bc
......@@ -313,11 +313,12 @@ doSearch task { boxes: { tasks }, tree: NTree (LNode {id}) _ } = liftEffect $ do
GAT.insert id task tasks
here.log2 "[doSearch] DoSearch task:" task
updateNode params { boxes: { errors, tasks }, session, tree: (NTree (LNode {id}) _) } = do
updateNode params p@{ boxes: { errors, tasks }, session, tree: (NTree (LNode {id}) _) } = do
eTask <- updateRequest params session id
handleRESTError errors eTask $ \task -> liftEffect $ do
GAT.insert id task tasks
here.log2 "[updateNode] UpdateNode task:" task
closeBox p
renameNode name p@{ boxes: { errors }, session, tree: (NTree (LNode {id}) _) } = do
eTask <- rename session id $ RenameValue { text: name }
......
src/Gargantext/Components/Forest/Tree/Node.purs
View file @ 326236bc
......@@ -260,8 +260,7 @@ nodeSpanCpt = here.component "nodeSpan" cpt
(
{ nodeType
, isLeaf
-- , callback: const $ T.modify_ (not) folderOpen
, callback: \_ -> T.write_ true isBoxVisible
, callback: const $ T.modify_ (not) folderOpen
, isSelected
}
)
......
src/Gargantext/Components/Forest/Tree/Node/Box.purs
View file @ 326236bc
......@@ -7,12 +7,14 @@ import Data.Maybe (Maybe(..))
import Effect.Aff (Aff)
import Gargantext.Components.App.Store (Boxes)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (Elevation(..))
import Gargantext.Components.Forest.Tree.Node.Action.Add (addNodeView)
import Gargantext.Components.Forest.Tree.Node.Action.Contact as Contact
import Gargantext.Components.Forest.Tree.Node.Action.Delete (actionDelete)
import Gargantext.Components.Forest.Tree.Node.Action.Documentation (actionDoc)
import Gargantext.Components.Forest.Tree.Node.Action.Download (actionDownload)
import Gargantext.Components.Forest.Tree.Node.Action.Link (linkNode)
import Gargantext.Components.Forest.Tree.Node.Action.ManageTeam (actionManageTeam)
import Gargantext.Components.Forest.Tree.Node.Action.Merge (mergeNode)
import Gargantext.Components.Forest.Tree.Node.Action.Move (moveNode)
import Gargantext.Components.Forest.Tree.Node.Action.Rename (renameAction)
......@@ -22,7 +24,6 @@ import Gargantext.Components.Forest.Tree.Node.Action.Types (Action)
import Gargantext.Components.Forest.Tree.Node.Action.Update (update)
import Gargantext.Components.Forest.Tree.Node.Action.Upload (actionUpload)
import Gargantext.Components.Forest.Tree.Node.Action.WriteNodesDocuments (actionWriteNodesDocuments)
import Gargantext.Components.Forest.Tree.Node.Action.ManageTeam (actionManageTeam)
import Gargantext.Components.Forest.Tree.Node.Box.Types (NodePopupProps, NodePopupS)
import Gargantext.Components.Forest.Tree.Node.Settings (NodeAction(..), SettingsBox(..), glyphiconNodeAction, settingsBox)
import Gargantext.Components.Forest.Tree.Node.Status (Status(..), hasStatus)
......@@ -30,7 +31,7 @@ import Gargantext.Components.Forest.Tree.Node.Tools (fragmentPT, textInputBox)
import Gargantext.Sessions (Session)
import Gargantext.Types (ID, Name, prettyNodeType)
import Gargantext.Types as GT
import Gargantext.Utils.Glyphicon (glyphicon, glyphiconActive)
import Gargantext.Utils.Glyphicon (glyphiconActive)
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
......@@ -74,25 +75,65 @@ nodePopupCpt = here.component "nodePopupView" cpt where
]
panelHeading renameIsOpen open p@{ dispatch, id, name, nodeType } =
H.div { className: "popup-container__header card-header" }
[ R2.row
[ H.div { className: "col-4" }
[ H.span { className: GT.fldr nodeType true} [] -- TODO fix names
, H.span { className: "h5" } [ H.text $ prettyNodeType nodeType ] ]
, H.div { className: "col-6" }
[ if open then
textInputBox { boxAction: renameAction, boxName: "Rename"
, dispatch, id, text: name, isOpen: renameIsOpen } []
else H.span { className: "text-primary center" } [ H.text p.name ]
H.div
{ className: "popup-container__header card-header" }
[
B.wad
[ "d-flex", "align-items-center" ]
[
B.wad
[ "w-3/12" ]
[
H.span
{ className: GT.fldr nodeType true} [] -- TODO fix names
,
B.span' { className: "ml-1 h5" } $ prettyNodeType nodeType
]
,
B.wad
[ "w-7/12", "pl-1" ]
[
if open then
textInputBox
{ boxAction: renameAction
, boxName: "Rename"
, dispatch
, id
, text: name
, isOpen: renameIsOpen
} []
else
B.wad'
[ "text-primary" ]
p.name
]
,
B.wad
[ "w-2/12", "text-right" ]
[
editIcon renameIsOpen open
,
B.wad_ [ "d-inline-block", "w-3" ]
,
B.iconButton
{ callback: const $ p.closeCallback unit
, title: "Close"
, name: "times"
, elevation: Level1
}
]
, H.div { className: "col-1" } [ editIcon renameIsOpen open ]
, H.div { className: "col-1" }
[ H.a { type: "button", on: { click: \_ -> p.closeCallback unit }, title: "Close"
, className: glyphicon "window-close" } [] ]]]
editIcon _ true = H.div {} []
]
]
editIcon _ true = mempty
editIcon isOpen false =
H.a { className: glyphicon "pencil", id: "rename1"
, title : "Rename", on: { click: \_ -> T.write_ true isOpen } } []
B.iconButton
{ name: "pencil"
, title: "Rename"
, callback: const $ T.write_ true isOpen
, elevation: Level1
}
panelBody :: T.Box (Maybe NodeAction) -> Record NodePopupProps -> R.Element
panelBody nodePopupState { nodeType } =
let (SettingsBox { doc, buttons }) = settingsBox nodeType in
......@@ -118,16 +159,52 @@ nodePopupCpt = here.component "nodePopupView" cpt where
, session
}
mPanelAction { action: Nothing } _ =
H.div { className: "popup-container__footer card-footer" }
[ H.div {className:"center fa-hand-pointer-o"}
[ H.h5 {} [ H.text " Select available actions of this node" ]
, H.ul { className: "panel-actions" }
[ H.div { className: "fa-thumbs-o-up panel-actions__ok-to-use" }
[ H.text " Black: usable" ]
, H.div { className: "fa-exclamation-triangle panel-actions__almost-useable" }
[ H.text " Orange: almost useable" ]
, H.div { className: "fa-rocket panel-actions__development-in-progress" }
[ H.text " Red: development in progress" ]]]]
H.div
{ className: "popup-container__footer card-footer" }
[
H.h6
{}
[
B.icon
{ name: "hand-pointer-o"
, className: "mr-1"
}
,
H.text "Select available actions of this node"
]
,
H.ul
{ className: "panel-actions" }
[
H.div
{ className: "panel-actions__ok-to-use" }
[
B.icon
{ name: "circle" }
,
B.span_ "usable"
]
,
H.div
{ className: "panel-actions__almost-useable" }
[
B.icon
{ name: "circle" }
,
B.span_ "almost useable"
]
,
H.div
{ className: "panel-actions__development-in-progress" }
[
B.icon
{ name: "circle" }
,
B.span_ "development in progress"
]
]
]
type ActionState =
( action :: Maybe NodeAction
......
src/Gargantext/Components/Forest/Tree/Node/Tools.purs
View file @ 326236bc
......@@ -8,12 +8,13 @@ import Data.Set as Set
import Data.String as S
import Effect (Effect)
import Effect.Aff (Aff, launchAff, launchAff_)
import Gargantext.Components.Bootstrap as B
import Gargantext.Components.Bootstrap.Types (Elevation(..), Variant(..))
import Gargantext.Components.Forest.Tree.Node.Action (icon, text)
import Gargantext.Components.Forest.Tree.Node.Action.Types (Action)
import Gargantext.Components.InputWithEnter (inputWithEnter)
import Gargantext.Types as GT
import Gargantext.Utils (toggleSet)
import Gargantext.Utils.Glyphicon (glyphicon)
import Gargantext.Utils.Reactix as R2
import Reactix as R
import Reactix.DOM.HTML as H
......@@ -58,36 +59,55 @@ textInputBoxCpt = here.component "textInputBox" cpt where
where
content false _ = (R.fragment [])
content true renameNodeNameRef =
H.div { className: "from-group row" }
[ textInput renameNodeNameRef
, submitBtn renameNodeNameRef
, cancelBtn
H.div
{ className: "d-flex align-items-center" }
[
textInput renameNodeNameRef
,
B.wad_ [ "d-inline-block", "w-3" ]
,
submitBtn renameNodeNameRef
,
B.wad_ [ "d-inline-block", "w-3" ]
,
cancelBtn
]
textInput renameNodeNameRef =
H.div { className: "col-8" }
[ inputWithEnter {
autoFocus: true
, className: "form-control"
, defaultValue: text
, onBlur: R.setRef renameNodeNameRef
, onEnter: submit renameNodeNameRef
, onValueChanged: R.setRef renameNodeNameRef
, placeholder: (boxName <> " Node")
, type: "text"
}
]
H.div
{}
[
inputWithEnter
{ autoFocus: true
, className: "form-control"
, defaultValue: text
, onBlur: R.setRef renameNodeNameRef
, onEnter: submit renameNodeNameRef
, onValueChanged: R.setRef renameNodeNameRef
, placeholder: (boxName <> " Node")
, type: "text"
}
]
submitBtn renameNodeNameRef =
H.a { type: "button"
, title: "Submit"
, on: { click: submit renameNodeNameRef }
, className: "col-2 " <> glyphicon "floppy-o" } []
B.iconButton
{ callback: submit renameNodeNameRef
, title: "Submit"
, name: "floppy-o"
, elevation: Level1
}
cancelBtn =
H.a { type: "button", title: "Cancel", on: { click }
, className: "text-danger col-2 " <> glyphicon "times" } []
B.iconButton
{ callback: const $ T.write_ false isOpen
, variant: Danger
, title: "Cancel"
, name: "times"
}
submit ref _ = do
launchAff_ $ dispatch (boxAction $ R.readRef ref)
T.write_ false isOpen
click _ = T.write_ false isOpen
type DefaultText = String
......
src/sass/_legacy/_tree.sass
View file @ 326236bc
......@@ -440,12 +440,18 @@ $node-popup-width: 544px
.node-popup-tooltip
.panel-actions
font-size: 90%
padding-left: space-x(2.5)
.b-icon
margin-right: space-x(1)
&__almost-useable
color: orange
color: darken($pastel-orange, 25%)
&__development-in-progress
color: red
color: darken($pastel-red, 25%)
&__ok-to-use
color: black
color: $body-color
.popup-container
......
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