ui changes

dist/css/Login.css

@@ -157,3 +157,9 @@ text-align: center;
     text-decoration:none;
 }
 
+#sp-container 
+{ -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
+    transition: width 2s;
+
+}
+

src/.psc-ide-port

+15747
\ No newline at end of file

src/Gargantext/Pages/Corpus/Graph.purs

@@ -24,15 +24,16 @@ import Math (cos, sin)
 import Partial.Unsafe (unsafePartial)
 import React (ReactElement)
 import React.DOM (a, br', button, div, form', input, li, li', menu, option, p, select, span, text, ul, ul')
-import React.DOM.Props (_id, _type, checked, className, href, name, onChange, placeholder, style, title, value)
+import React.DOM.Props (_id, _type, checked, className, href, name, onChange, onClick,placeholder, style, title, value)
 import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)
 import Unsafe.Coerce (unsafeCoerce)
 
 
 
 data Action
-  = LoadGraph Int         --- need to make it as String
+  = LoadGraph Int         
   | SelectNode SelectedNode
+  | ShowSidePanel 
 
 newtype SelectedNode = SelectedNode {id :: String, label :: String}
 
@@ -45,6 +46,7 @@ newtype State = State
   , sigmaGraphData :: Maybe SigmaGraphData
   , legendData :: Array Legend
   , selectedNode :: Maybe SelectedNode
+  , showSidePanel :: Boolean
   }
 
 initialState :: State
@@ -54,6 +56,7 @@ initialState = State
   , sigmaGraphData : Nothing
   , legendData : []
   , selectedNode : Nothing
+  , showSidePanel : false
   }
 
 graphSpec :: Spec State {} Action
@@ -75,6 +78,9 @@ performAction (LoadGraph fp) _ _ = void do
 performAction (SelectNode node) _ _ = void do
   modifyState $ \(State s) -> State s {selectedNode = pure node}
 
+performAction (ShowSidePanel) _ (State state) = void do
+  modifyState $ \(State s) -> State s {showSidePanel = not (state.showSidePanel) }
+
 convert :: GraphData -> SigmaGraphData
 convert (GraphData r) = SigmaGraphData { nodes, edges}
   where
@@ -268,7 +274,7 @@ specOld = simpleSpec performAction render'
     render' :: Render State {} Action
     render' d _ (State st) _ =
       [  div [className "row"] [
-            div [className "col-md-12", style {marginTop : "34px", marginBottom : "21px"}]
+            div [className "col-md-12", style {marginBottom : "21px"}]
             [ menu [_id "toolbar"]
               [ ul'
                 [
@@ -331,12 +337,13 @@ specOld = simpleSpec performAction render'
                 , li'
                   [ button [className "btn btn-primary"] [text "Save"] -- TODO: Implement Save!
                   ]
+                , button [onClick \_ -> d ShowSidePanel, className "btn btn-primary"] [text "show sidepanel"]
                 ]
               ]
             ]
            ]
          , div [className "row"]
-           [ div [className "col-md-9"]
+           [ div [if (st.showSidePanel) then className "col-md-10" else className "col-md-12"]
              [ div [style {border : "1px black solid", height: "90%"}] $
                [ 
                ]
@@ -361,9 +368,11 @@ specOld = simpleSpec performAction render'
                  <>
                  if length st.legendData > 0 then [div [style {position : "absolute", bottom : "10px", border: "1px solid black", boxShadow : "rgb(0, 0, 0) 0px 2px 6px", marginLeft : "10px", padding:  "16px"}] [dispLegend st.legendData]] else []
              ]
-         , div [className "col-md-3", style {border : "1px black solid", backgroundColor : "beige"}]
+         
+         , if (st.showSidePanel) then 
+            div [_id "sp-container",className "col-md-2", style {border : "1px black solid", backgroundColor : "beige", position:"absolute",right: "0px",top:"265px"}]
              [ div [className "row"]
-               [ div [_id "sidepanel" , className "col-md-12", style {borderBottom : "1px solid black"}]
+               [ div [_id "sidepanel" , style {borderBottom : "1px solid black"}]
                [ case st.selectedNode of
                     Nothing -> span [] []
                     Just selectedNode -> p [] [text $ "selected Node : " <> getter _.label selectedNode
@@ -459,6 +468,8 @@ specOld = simpleSpec performAction render'
                 ]
                ]
              ]
+            else 
+              div [] []   -- ends sidepanel column here
            ]
          ]
 

src/Gargantext/Pages/Layout/Actions.purs

@@ -38,6 +38,7 @@ data Action
   | Go
   | ShowLogin
   | ShowAddcorpus
+  | ShowTree 
 
 
 performAction :: PerformAction AppState {} Action
@@ -46,6 +47,9 @@ performAction (SetRoute route)  _ _ = void do
 performAction (Search s)  _ _ = void do
   modifyState $ _ {search = s}
 
+performAction (ShowTree)  _ (state) = void do
+  modifyState $ _ {showTree = not (state.showTree)}
+
 performAction (ShowLogin)  _ _ = void do
   liftEffect $ modalShow "loginModal"
   modifyState $ _ {showLogin = true}

src/Gargantext/Pages/Layout/Specs.purs

@@ -88,8 +88,10 @@ layout0 layout =
             then ls as
             else outerLayout1
       , rs bs      ]
-    ls   = over _render \render d p s c -> [ div [className "col-md-2" ] (render d p s c) ]
-    rs   = over _render \render d p s c -> [ div [className "col-md-10"] (render d p s c) ]
+    ls   = over _render \render d p s c -> [ 
+      div [if (s.showTree) then className "col-md-2" else className ""] if (s.showTree) then (render d p s c) else (render d p s c) 
+      ]
+    rs   = over _render \render d p s c -> [ div [if (s.showTree) then className "col-md-10" else className "col-md-12"] (render d p s c) ]
     cont = over _render \render d p s c -> [ div [className "row"      ] (render d p s c) ]
 
     as = focus _treeState _treeAction Tree.treeview
@@ -111,7 +113,7 @@ layoutSidebar = over _render \render d p s c ->
       [ div [ _id "dafixedtop"
             , className "navbar navbar-inverse navbar-fixed-top"
             , role "navigation"
-            ] [ div [className "container"]
+            ] [ div [className "container-fluid"]
                     [ div [ className "navbar-inner" ]
                           [ divLogo
                           ,  div [ className "collapse navbar-collapse"]
@@ -282,6 +284,10 @@ divDropdownRight d =
           -- else
          [text " Login / Signup"]
         ]
+      , li [] 
+      [
+        button [onClick $ \e -> d ShowTree, className "btn btn-primary"] [text "ShowTree"]
+      ]
      ]
 
 layoutFooter :: Spec AppState {} Action

src/Gargantext/Pages/Layout/States.purs

@@ -27,6 +27,7 @@ type AppState =
   , showCorpus     :: Boolean
   , graphExplorerState  :: GE.State
   , initialized    :: Boolean
+  , showTree :: Boolean
   }
 
 initAppState :: AppState
@@ -43,6 +44,7 @@ initAppState =
   , showCorpus     : false
   , graphExplorerState : GE.initialState
   , initialized    : false
+  , showTree : false
   }
 
 ---------------------------------------------------------