Merge branch 'dev-search-field-styling' of...

Merge branch 'dev-search-field-styling' of ssh://gitlab.iscpif.fr:20022/gargantext/purescript-gargantext into dev-merge

dist/styles/context-menu.css

@@ -28,14 +28,19 @@
   height: 100%;
 }
 .search-bar-container {
+  margin-top: 11px;
   text-align: center;
+  max-width: 800px;
+  height: 33px;
+  float: left;
+  display: grid;
+  grid-template-columns: auto auto auto;
 }
 .search-bar-toggle {
-  padding: 3px;
+  padding: 2px;
+  margin: 2px;
   border: 0;
-  
 }
-.search-field {
-  display: grid;
-  grid-template-columns: auto auto auto;
+.search-bar.closed {
+  display: none;
 }

src/Gargantext/Components/NgramsTable.purs

@@ -49,6 +49,7 @@ import Data.Map (Map)
 import Data.Map as Map
 import Data.Maybe (Maybe(..), maybe)
 import Data.Monoid.Additive (Additive(..))
+import Data.Ord.Down (Down(..))
 import Data.Traversable (class Traversable, traverse, traverse_, sequence)
 import Data.TraversableWithIndex (class TraversableWithIndex, traverseWithIndex)
 import Data.Set (Set)
@@ -57,7 +58,7 @@ import Data.String as S
 import Data.String.Regex as R
 import Data.String.Regex.Flags as R
 import Data.Symbol (SProxy(..))
-import Data.Tuple (Tuple(..))
+import Data.Tuple (Tuple(..), snd)
 import Effect (Effect)
 import Effect.Aff (Aff)
 import Foreign.Object as FO
@@ -716,7 +717,16 @@ ngramsTableSpec = simpleSpec performAction render
             setParams params =
               loaderDispatch $ Loader.SetPath $ pageParams {params = params}
             ngramsTable = applyNgramsTablePatch ngramsTablePatch initTable
-            rows = convertRow <$> Map.toUnfoldable (Map.filter displayRow (ngramsTable ^. _NgramsTable))
+            orderWith =
+              case convOrderBy <$> pageParams.params.orderBy of
+                Just ScoreAsc  -> A.sortWith \x -> (snd x) ^. _NgramsElement <<< _occurrences
+                Just ScoreDesc -> A.sortWith \x -> Down $ (snd x) ^. _NgramsElement <<< _occurrences
+                _              -> identity -- the server ordering is enough here
+
+            rows = convertRow <$> orderWith (addOcc <$> Map.toUnfoldable (Map.filter displayRow (ngramsTable ^. _NgramsTable)))
+            addOcc (Tuple ne ngramsElement) =
+              let Additive occurrences = sumOccurrences ngramsTable ngramsElement in
+              Tuple ne (ngramsElement # _NgramsElement <<< _occurrences .~ occurrences)
 
             ngramsParentRoot :: Maybe String
             ngramsParentRoot =
@@ -734,11 +744,15 @@ ngramsTableSpec = simpleSpec performAction render
               || -- Unless they are scheduled to be removed.
                  ngramsChildren ^. at ngrams == Just false
             convertRow (Tuple ngrams ngramsElement) =
-              { row:
-                  renderNgramsItem { ngramsTable, ngrams, ngramsParent, ngramsElement, dispatch }
+              { row: renderNgramsItem { ngramsTable, ngrams, ngramsParent, ngramsElement, dispatch}
               , delete: false
               }
 
+convOrderBy (T.ASC  (T.ColumnName "Score (Occurrences)")) = ScoreAsc
+convOrderBy (T.DESC (T.ColumnName "Score (Occurrences)")) = ScoreDesc
+convOrderBy (T.ASC  _) = TermAsc
+convOrderBy (T.DESC _) = TermDesc
+
 loadNgramsTable :: PageParams -> Aff VersionedNgramsTable
 loadNgramsTable { nodeId, listIds, termListFilter, termSizeFilter
          , searchQuery, tabType, params: {offset, limit, orderBy}} =
@@ -749,11 +763,6 @@ loadNgramsTable { nodeId, listIds, termListFilter, termSizeFilter
                      , searchQuery
                      })
           (Just nodeId)
-  where
-    convOrderBy (T.ASC  (T.ColumnName "Score (Occurrences)")) = ScoreAsc
-    convOrderBy (T.DESC (T.ColumnName "Score (Occurrences)")) = ScoreDesc
-    convOrderBy (T.ASC  _) = TermAsc
-    convOrderBy (T.DESC _) = TermDesc
 
 ngramsLoaderClass :: Loader.LoaderClass PageParams VersionedNgramsTable
 ngramsLoaderClass = Loader.createLoaderClass "NgramsTableLoader" loadNgramsTable
@@ -842,10 +851,9 @@ renderNgramsItem { ngramsTable, ngrams, ngramsElement, ngramsParent, dispatch }
         [ i [className "fas fa-plus"] []
         , span ngramsStyle [text $ " " <> ngrams]
         ]
-  , text $ show occurrences
+  , text $ show (ngramsElement ^. _NgramsElement <<< _occurrences)
   ]
   where
-    Additive occurrences = sumOccurrences ngramsTable ngramsElement
     termList    = ngramsElement ^. _NgramsElement <<< _list
     ngramsStyle = [termStyle termList]
     ngramsClick = Just <<< dispatch <<< SetParentResetChildren <<< Just <<< view _ngrams

src/Gargantext/Components/Search/SearchField.purs

@@ -14,10 +14,10 @@ import DOM.Simple.Element as Element
 import DOM.Simple.Event as DE
 import Effect ( Effect )
 import Effect.Uncurried (mkEffectFn1)
-import FFI.Simple ((..))
+import FFI.Simple ((..), (.=))
 import Reactix as R
 import Reactix.DOM.HTML as HTML
-import Reactix.DOM.HTML (text, button, div, input, option)
+import Reactix.DOM.HTML (text, button, div, input, option, form, span, ul, li, a)
 import Reactix.SyntheticEvent as E
 import Gargantext.Components.Search.Types
 
@@ -49,33 +49,45 @@ searchFieldComponent = R.memo (R.hooksComponent "SearchField" cpt) hasChanged
       term <- R.useState $ \_ -> pure search.term
       db   <- R.useState $ \_ -> pure Nothing
       pure $
-        div { className: "search-field" }
-        [ databaseInput db props.databases
-        , searchInput term
-        , submitButton db term props.search
-        ]
+          div { className: "search-field input-group" }
+              [ databaseInput db props.databases
+              , searchInput term
+              , span { className: "input-group-btn" }
+                     [ submitButton db term props.search ]
+              ]
     hasChanged p p' = (fst p.search /= fst p'.search) || (p.databases /= p'.databases)
 
 databaseInput :: R.State (Maybe Database) -> Array Database -> R.Element
 databaseInput (db /\ setDB) dbs =
-  div {} [ select { className: "database", onChange } (item <$> dbs) ]
+  div { className: "input-group-btn search-panel dropdown" }
+      [
+        dropdownBtn db
+        , ul {className: "dropdown-menu", role: "menu"} (liItem <$> dbs)
+      ]
   where
-    onChange = mkEffectFn1 $ \e -> setDB (readDatabase (e .. "target" .. "value"))
-    item db = option { value: (show db) } [ text (show db) ]
+    liItem db = li { onClick }
+                   [ a {href: "#"} [text (show db) ] ]
+                where
+                  onClick = mkEffectFn1 $ \_ -> setDB $ Just db
+    dropdownBtnProps = { id: "search-dropdown"
+                        , className: "btn btn-default dropdown-toggle"
+                        , type: "button"} .= "data-toggle" $ "dropdown"
+    dropdownBtn (Just db) = button dropdownBtnProps [ span {} [ text (show db) ] ]
+    dropdownBtn (Nothing) = button dropdownBtnProps [ span {} [ text "-" ] ]
 
 searchInput :: R.State String -> R.Element
 searchInput (term /\ setTerm) =
-  div {} [ input { defaultValue: term
-                 , type: "text"
-                 , style: { maxWidth: "110px" }
-                 , onChange
-                 , placeholder } ]
+  input { defaultValue: term
+        , className: "form-control"
+        , type: "text"
+        , onChange
+        , placeholder }
   where onChange = mkEffectFn1 $ \e -> setTerm $ e .. "target" .. "value"
 
 
 submitButton :: R.State (Maybe Database) -> R.State String -> R.State (Maybe Search) -> R.Element
 submitButton (database /\ _) (term /\ _) (_ /\ setSearch) =
-  div {} [ button { onClick: click } [ text "Search" ] ]
+  button { className: "btn btn-default", type: "button", onClick: click } [ text "Search" ]
   where
     click = mkEffectFn1 $ \_ -> do
       case term of

src/Gargantext/Pages/Layout/Specs.purs

@@ -95,9 +95,7 @@ layout0 layout =
       , rs bs
       ]
     ls   = over _render \render d p s c -> [
-         div [ className "col-md-2", style {paddingTop: "60px"} ]
-           $ [ R'.scuff (SB.searchBar SB.defaultProps) ]
-           <> (render d p s c)
+         div [ className "col-md-2", style {paddingTop: "60px"} ] $ render d p s c
          
       ]
     rs   = over _render \render d p s c -> [
@@ -182,6 +180,7 @@ searchBar = simpleSpec defaultPerformAction render
                           ,  div [ className "collapse navbar-collapse"
                                  ]
                              $  [ divDropdownLeft ]
+                             <> [ R'.scuff (SB.searchBar SB.defaultProps) ]
                              <> [ divDropdownRight d s ]
                           ]
                     ]
@@ -338,7 +337,7 @@ divDropdownRight d s =
   ul [className "nav navbar-nav pull-right"]
      [ li [className "dropdown"]
           [ logLinks d s ]
-    ]
+     ]
 
 layoutFooter :: Spec AppState {} Action
 layoutFooter = simpleSpec performAction render

src/Gargantext/Pages/Layout/Specs/SearchBar.purs

@@ -26,7 +26,7 @@ import Gargantext.Utils (id)
 type Props = ( open :: Boolean, databases :: Array Database )
 
 defaultProps :: Record Props
-defaultProps = { open: true, databases: allDatabases }
+defaultProps = { open: false, databases: allDatabases }
 
 searchBar :: Record Props -> R.Element
 searchBar p = R.createElement searchBarComponent p []
@@ -43,9 +43,10 @@ searchBarComponent = R.hooksComponent "SearchBar" cpt
         , searchFieldContainer open props.databases search ]
 
 searchFieldContainer :: R.State Boolean -> Array Database -> R.State (Maybe Search) -> R.Element
-searchFieldContainer (true /\ _) databases search =
-  H.div { className: "search-bar open" } [ searchField { databases, search } ]
-searchFieldContainer (false /\ _) _ _ = H.div {className: "search-bar closed"} []
+searchFieldContainer (open /\ _) databases search =
+  H.div { className: "search-bar " <> openClass } [ searchField { databases, search } ]
+  where
+    openClass = if open then "open" else "closed"
 
 onSearchChange :: R.State (Maybe Search) -> R.Hooks Unit
 onSearchChange (search /\ setSearch) =
@@ -63,7 +64,7 @@ toggleButton :: R.State Boolean -> R.Element
 toggleButton open =
   H.button { onClick: onToggleExpanded open, className: "search-bar-toggle" }
     [ H.i { className: "material-icons md-24"
-          , style: { marginTop: "-5px", color: "#000" } }
+          , style: { marginTop: "-2px", color: "#000" } }
           [ H.text "control_point" ] ]
 
 onToggleExpanded :: forall e. R.State Boolean -> EffectFn1 e Unit