[bootstrap v4] merge popup styling

dist/styles/sass.css

@@ -245,22 +245,22 @@ li#rename #rename-a {
   display: flex;
   flex-direction: colum;
 }
-#node-popup-tooltip .popup-container .card {
+#node-popup-tooltip .popup-container > .card {
   border: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   margin-bottom: 0px;
   width: 34rem;
 }
-#node-popup-tooltip .popup-container .card .fa-pencil {
+#node-popup-tooltip .popup-container > .card .fa-pencil {
   color: black;
 }
-#node-popup-tooltip .popup-container .card .card-body {
+#node-popup-tooltip .popup-container > .card .card-body {
   display: flex;
   justify-content: center;
   background-color: white;
   border: none;
 }
-#node-popup-tooltip .popup-container .card .card-body .spacer {
+#node-popup-tooltip .popup-container > .card .card-body .spacer {
   margin: 10px;
 }
 #node-popup-tooltip .popup-container .frame-search.card {
@@ -529,6 +529,16 @@ li .leaf:hover a.settings {
   padding-left: 15px;
 }
 
+.panel-actions .almost-useable {
+  color: orange;
+}
+.panel-actions .development-in-progress {
+  color: red;
+}
+.panel-actions .ok-to-use {
+  color: black;
+}
+
 .code-editor-heading {
   display: flex;
 }

dist/styles/sass.css.map

-{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAVA;EACA;EAEA;EASE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EAlCA;EACA;EAEA;EAiCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;;AAER;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AC1FJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;EACA;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;ACrIR;EACE;;AAEA;EACE;;AACA;EACE;;AACJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EArDR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA2DM;EACE;EACA;EACA;EACA;EACA;EA7DR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmEE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtGV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;EACA;EACA;;;AAKE;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACjDF;EACE;AACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"sass.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAVA;EACA;EAEA;EASE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EAlCA;EACA;EAEA;EAiCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;;AAER;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AC1FJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;EACA;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AC7IJ;EACE;;AAEA;EACE;;AACA;EACE;;AACJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EArDR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA2DM;EACE;EACA;EACA;EACA;EACA;EA7DR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmEE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtGV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;EACA;EACA;;;AAKE;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACjDF;EACE;AACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"sass.css"}
\ No newline at end of file

src/Gargantext/Components/Forest/Tree/Node/Action/Delete.purs

@@ -42,15 +42,9 @@ actionDelete NodeUser _ = do
                (H.div {} [])
 
 actionDelete nt dispatch = do
-  pure $ panel [ H.div {style: {margin: "10px"}} 
-                (map (\t -> H.p {} [H.text t]) 
+  pure $ panel (map (\t -> H.p {} [H.text t])
                      [ "Are your sure you want to delete it ?"
                      , "If yes, click again below."
                      ]
                 )
-               ]
-               (submitButton (DeleteNode nt) dispatch)
-
-
-
-
+                (submitButton (DeleteNode nt) dispatch)

src/Gargantext/Components/Forest/Tree/Node/Action/Merge.purs

@@ -8,7 +8,7 @@ import Reactix as R
 import Reactix.DOM.HTML as H
 
 import Gargantext.Components.Forest.Tree.Node.Action (Action(..))
-import Gargantext.Components.Forest.Tree.Node.Tools (submitButton, panel, checkbox, checkboxes)
+import Gargantext.Components.Forest.Tree.Node.Tools (submitButton, panel, checkbox, checkboxesListGroup)
 import Gargantext.Components.Forest.Tree.Node.Tools.SubTree (subTreeView, SubTreeParamsIn)
 import Gargantext.Prelude
 import Gargantext.Routes (SessionRoute(..))
@@ -24,10 +24,10 @@ mergeNodeReq session fromId toId =
 
 mergeNode :: Record SubTreeParamsIn -> R.Element
 mergeNode p = R.createElement mergeNodeCpt p []
-
-mergeNodeCpt :: R.Component SubTreeParamsIn
-mergeNodeCpt = R.hooksComponentWithModule thisModule "mergeNode" cpt
   where
+    mergeNodeCpt :: R.Component SubTreeParamsIn
+    mergeNodeCpt = R.hooksComponentWithModule thisModule "mergeNode" cpt
+
     cpt p@{dispatch, subTreeParams, id, nodeType, session, handed} _ = do
       action@(valAction /\ setAction) :: R.State Action <- R.useState' (MergeNode {params:Nothing})
 
@@ -48,13 +48,21 @@ mergeNodeCpt = R.hooksComponentWithModule thisModule "mergeNode" cpt
                       , subTreeParams
                       , handed
                       }
-                  , H.div { className:"card card-primary"}
-                          [ H.text "Merge which list?"
-                          , checkboxes [GT.MapTerm, GT.CandidateTerm, GT.StopTerm] options
-                          ]
-                  , H.div { className:"card card-primary"}
-                          [ H.text "Title"
-                          , H.div {className: "checkbox"}
-                                  [checkbox merge, H.text "Merge data?"]
-                          ]
-                  ] button
+                  , H.ul { className:"merge mx-auto list-group"}
+                     ([ H.li { className: "list-group-item" }
+                       [ H.h5 { className: "mb-1" } [ H.text "Merge which list?" ]
+                       ]
+                     ] <> (checkboxesListGroup [ GT.MapTerm, GT.CandidateTerm, GT.StopTerm ] options))
+                  , H.ul { className:"merge mx-auto list-group"}
+                     [ H.li { className: "list-group-item" }
+                       [ H.h5 { className: "mb-1" } [ H.text "Title" ]
+                       ]
+                     , H.li { className: "list-group-item" }
+                       [ H.div { className: " form-check" }
+                         [ checkbox merge
+                         , H.label { className: "form-check-label" } [ H.text "Merge data?" ]
+                         ]
+                       ]
+                     ]
+                  ]
+                  button

src/Gargantext/Components/Forest/Tree/Node/Box.purs

@@ -70,7 +70,7 @@ nodePopupView p = R.createElement nodePopupCpt p []
           [ H.div { className: "card" }
             [ panelHeading renameIsOpen   p
             , panelBody    nodePopupState p
-            , H.div { className: "card-footer" } [ mPanelAction nodePopupState p ]
+            , mPanelAction nodePopupState p
             ]
           ]
         ]
@@ -158,12 +158,15 @@ nodePopupView p = R.createElement nodePopupCpt p []
                      -> Record NodePopupProps
                      -> R.Element
         mPanelAction ({action: Nothing    } /\ _) _     =
-          H.div {className:"center fa-hand-pointer-o"}
-            [ H.h5 {} [H.text " Select available actions of this node"]
-            , H.ul {} [ H.div {style:{color:"black"} , className: "fa-thumbs-o-up"         } [H.text " Black: yes you can use it"    ]
-                      , H.div {style:{color:"orange"}, className: "fa-exclamation-triangle"} [H.text " Orange: almost useable"       ]
-                      , H.div {style:{color:"red"}   , className: "fa-rocket"              } [H.text " Red: development in progress" ]
-                      ]
+          H.div { className: "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 ok-to-use" } [ H.text " Black: yes you can use it" ]
+                , H.div { className: "fa-exclamation-triangle almost-useable" } [ H.text " Orange: almost useable" ]
+                , H.div { className: "fa-rocket development-in-progress" } [ H.text " Red: development in progress" ]
+                ]
+              ]
             ]
         mPanelAction ({action: Just action} /\ _) props =
             panelAction { action
@@ -251,10 +254,10 @@ type PanelActionProps =
 
 panelAction :: Record PanelActionProps -> R.Element
 panelAction p = R.createElement panelActionCpt p []
-
-panelActionCpt :: R.Component PanelActionProps
-panelActionCpt = R.hooksComponentWithModule thisModule "panelAction" cpt
   where
+    panelActionCpt :: R.Component PanelActionProps
+    panelActionCpt = R.hooksComponentWithModule thisModule "panelAction" cpt
+
     cpt {action: Documentation nodeType}                  _ = actionDoc      nodeType
     cpt {action: Download, id, nodeType, session}         _ = actionDownload nodeType id session
     cpt {action: Upload, dispatch, id, nodeType, session} _ = actionUpload   nodeType id session dispatch

src/Gargantext/Components/Forest/Tree/Node/Tools.purs

@@ -35,21 +35,22 @@ type Footer  = R.Element
 
 panel :: Body -> Footer -> R.Element
 panel bodies submit =
-  H.div {} [ panelBody bodies, footer submit ]
+  R.fragment [ panelBody bodies, footer submit ]
     where
       panelBody bs =
-          H.div {className: "card-body"}
-          [ H.div { className: "row spacer" }
-                  [ H.div { className: "col-md-12" } bs
+          H.div { className: "card-body" }
+          [ H.div { className: "row" }
+                  [ H.div { className: "col-12" } bs
                           -- TODO add type for text or form here
                           -- [ H.form {className: "form-horizontal"} bs ]
                   ]
             ]
       footer sb = 
         H.div {className: "card-footer"}
-            [ H.div {} []
-            , H.div { className: "center"} [ sb ]
-            ]
+          [ H.div { className: "row" }
+              [ H.div { className: "mx-auto"} [ sb ]
+              ]
+          ]
 
 
 ------------------------------------------------------------------------
@@ -82,7 +83,7 @@ textInputBox p@{ boxName, boxAction, dispatch, isOpen: (true /\ setIsOpen) } = R
             [ inputWithEnter {
                  onEnter: submit renameNodeNameRef
                , onValueChanged: R.setRef renameNodeNameRef
-               , autoFocus: false
+               , autoFocus: true
                , autoSave: false
                , className: "form-control"
                , defaultValue: text
@@ -209,7 +210,6 @@ submitButton :: Action -> (Action -> Aff Unit) -> R.Element
 submitButton action dispatch =
   H.button { className : "btn btn-primary fa fa-" <> icon action
            , type: "button"
-           , style : { width: "50%" }
            , id: S.toLower $ show action
            , title: show action
            , on: {click: \_ -> launchAff $ dispatch action}
@@ -221,7 +221,6 @@ type Href  = String
 submitButtonHref :: Action -> Href -> R.Element
 submitButtonHref action href =
   H.a { className : "btn btn-primary fa fa-" <> icon action
-      , style : { width: "50%" }
       , href
       , target: "_blank"
       }
@@ -260,6 +259,28 @@ checkboxes xs (val /\ set) =
                                  ]
                   ) xs
 
+checkboxesListGroup :: forall a
+           .  Ord   a
+           => Show  a
+           => Array a
+           -> R.State (Set a)
+           -> Array R.Element
+checkboxesListGroup xs (val /\ set) =
+  map (\a -> H.li { className: "list-group-item" }
+             [ H.div { className: "form-check" }
+               [ H.input { type: "checkbox"
+                         , className: "form-check-input"
+                         , defaultChecked: Set.member a val
+                         , on: { click: \_ -> set
+                                            $ const
+                                            $ toggleSet a val
+                             }
+                       }
+               , H.label { className: "form-check-label" } [ H.text $ show a ]
+               ]
+             ]
+      ) xs
+
 
 prettyNodeType :: GT.NodeType -> String
 prettyNodeType nt = S.replace (S.Pattern "Node")   (S.Replacement " ")

src/sass/_login.sass

@@ -63,7 +63,7 @@ li#rename
   .popup-container
     display: flex
     flex-direction: colum
-    .card
+    & > .card
       border: 1px solid rgba(0,0,0,0.2)
       box-shadow: 0 2px 5px rgba(0,0,0,0.2)
       margin-bottom: 0px

src/sass/_tree.sass

@@ -153,3 +153,11 @@ li
     .children
       .node
         padding-left: 15px
+
+.panel-actions
+  .almost-useable
+    color: orange
+  .development-in-progress
+    color: red
+  .ok-to-use
+    color: black