[bootstrap] theme chooser

dist/index.html

@@ -5,8 +5,8 @@
         <title>CNRS GarganText</title>
         <link rel="stylesheet" href="icons/forkawesome.css">
         <!-- <link href="styles/bootstrap.min.css" rel="stylesheet"> -->
-        <link href="styles/bootstrap-custom.css" rel="stylesheet">
-        <link rel="stylesheet" type="text/css" href="styles/highlightjs-solarized-light.css"/>
+        <link id="bootstrap-css" href="styles/bootstrap-default.css" rel="stylesheet" />
+        <link rel="stylesheet" type="text/css" href="styles/highlightjs-solarized-light.css" />
         <link href="styles/sass.css" rel="stylesheet" type="text/css" />
         <style> * {margin: 0; padding: 0; list-style: none;} </style>
     </head>

index.html

@@ -5,8 +5,8 @@
         <title>CNRS GarganText</title>
         <link rel="stylesheet" href="icons/forkawesome.css">
         <!-- <link href="styles/bootstrap.min.css" rel="stylesheet"> -->
-        <link href="styles/bootstrap-custom.css" rel="stylesheet">
-        <link rel="stylesheet" type="text/css" href="styles/highlightjs-solarized-light.css"/>
+        <link id="bootstrap-css" href="styles/bootstrap-default.css" rel="stylesheet" />
+        <link rel="stylesheet" type="text/css" href="styles/highlightjs-solarized-light.css" />
         <link href="styles/sass.css" rel="stylesheet" type="text/css" />
         <style> * {margin: 0; padding: 0; list-style: none;} </style>
     </head>

package.json

@@ -7,7 +7,7 @@
         "install-ps": "psc-package install",
         "compile": "pulp build",
         "build": "pulp browserify -t dist/bundle.js",
-        "css": "sass src/sass/sass.sass:dist/styles/sass.css && sass src/sass/bootstrap/bootstrap.sass:dist/styles/bootstrap-custom.css",
+        "css": "sass src/sass/sass.sass:dist/styles/sass.css && sass src/sass/bootstrap/default.sass:dist/styles/bootstrap-default.css && cp node_modules/bootstrap-dark/src/bootstrap-dark.css dist/styles/bootstrap-dark.css && sass src/sass/bootstrap/greyson.scss:dist/styles/bootstrap-greyson.css && sass src/sass/bootstrap/monotony.scss:dist/styles/bootstrap-monotony.css",
         "docs": "pulp docs -- --format html",
         "repl": "pulp repl",
         "clean": "rm -Rf output node_modules",
@@ -24,7 +24,8 @@
     "dependencies": {
         "aes-js": "^3.1.1",
         "base-x": "^3.0.2",
-        "bootstrap": "^4.6.0",
+        "bootstrap": "4.4.1",
+        "bootstrap-dark": "^1.0.3",
         "create-react-class": "^15.6.3",
         "echarts": "^4.1.0",
         "echarts-for-react": "^2.0.14",

src/Gargantext/Components/Themes.purs

+module Gargantext.Components.Themes where
+
+import Data.Array as A
+import Data.Maybe (Maybe(..))
+import Data.Tuple (fst)
+import Data.Tuple.Nested ((/\))
+import Effect (Effect)
+import FFI.Simple ((.=))
+import Reactix as R
+import Reactix.DOM.HTML as H
+
+import Gargantext.Prelude
+import Gargantext.Utils.Reactix as R2
+
+thisModule :: String
+thisModule = "Gargantext.Components.Themes"
+
+stylesheetElId :: String
+stylesheetElId = "bootstrap-css"
+
+newtype Theme = Theme { name :: String
+                      , location :: String }
+
+themeName :: Theme -> String
+themeName (Theme { name }) = name
+
+defaultTheme :: Theme
+defaultTheme = Theme { name: "default"
+                     , location: "styles/bootstrap-default.css" }
+
+greysonTheme :: Theme
+greysonTheme = Theme { name: "greyson"
+                     , location: "styles/bootstrap-greyson.css" }
+
+monotonyTheme :: Theme
+monotonyTheme = Theme { name: "monotony"
+                      , location: "styles/bootstrap-monotony.css" }
+
+allThemes :: Array Theme
+allThemes = [ defaultTheme, greysonTheme, monotonyTheme ]
+
+switchTheme :: Theme -> Effect Unit
+switchTheme (Theme { location }) = do
+  mEl <- R2.getElementById stylesheetElId
+  case mEl of
+    Nothing -> pure unit
+    Just el -> do
+      _ <- pure $ (el .= "href") location
+      pure unit
+
+type ThemeSwitcherProps = (
+    theme  :: Theme
+  , themes :: Array Theme
+  )
+
+themeSwitcher :: R2.Component ThemeSwitcherProps
+themeSwitcher = R.createElement themeSwitcherCpt
+
+themeSwitcherCpt :: R.Component ThemeSwitcherProps
+themeSwitcherCpt = R.hooksComponentWithModule thisModule "themeSwitcher" cpt
+  where
+    cpt { theme, themes } _ = do
+      currentTheme <- R.useState' theme
+
+      let option (Theme { name }) = H.option { value: name } [ H.text name ]
+      let options = map option themes
+
+      pure $ R2.select { className: "form-control"
+                       , defaultValue: themeName $ fst currentTheme
+                       , on: { change: onChange currentTheme } } options
+      where
+        onChange (_ /\ setCurrentTheme) e = do
+          let value = R.unsafeEventValue e
+          let mTheme = A.head $ A.filter (\(Theme { name }) -> value == name) themes
+
+          case mTheme of
+            Nothing -> pure unit
+            Just t  -> do
+              switchTheme t
+              setCurrentTheme $ const t

src/Gargantext/Components/TopBar.purs

@@ -4,11 +4,14 @@ import Data.Array (reverse)
 import Data.Foldable (intercalate)
 import Data.Tuple (fst)
 import Data.Tuple.Nested ((/\))
+import Reactix as R
+import Reactix.DOM.HTML as H
+
 import Gargantext.Prelude
+
+import Gargantext.Components.Themes (themeSwitcher, defaultTheme, allThemes)
 import Gargantext.Types (Handed(..))
 import Gargantext.Utils.Reactix as R2
-import Reactix as R
-import Reactix.DOM.HTML as H
 
 thisModule :: String
 thisModule = "Gargantext.Components.TopBar"
@@ -34,6 +37,8 @@ topBarCpt = R.hooksComponentWithModule thisModule "topBar" cpt
                        divDropdownLeft {} []
                      , handButton handed
                      , smiley
+                     , H.li { className: "nav-item" } [ themeSwitcher { theme: defaultTheme
+                                                                      , themes: allThemes } [] ]
                      ]
                    ]
           where

src/Gargantext/Utils/Reactix.purs

@@ -234,8 +234,6 @@ appendChild n c = delay unit $ \_ -> pure $ n ... "appendChild" $ [c]
 appendChildToParentId :: forall c. IsNode c => String -> c -> Effect Unit
 appendChildToParentId ps c = delay unit $ \_ -> do
   parentEl <- getElementById ps
-  log2 "[appendChildToParentId] ps" ps
-  log2 "[appendChildToParentId] parentEl" parentEl
   case parentEl of
     Nothing -> pure unit
     Just el -> appendChild el c

src/sass/bootstrap/greyson.scss

+/*! Themestr.app `Greyson` Bootstrap 4.3.1 theme */
+/* https://github.com/ThemesGuide/bootstrap-themes/blob/master/greyson/ */
+@import url(https://fonts.googleapis.com/css?family=Muli:200,300,400,700);
+$font-family-base:Muli;
+@import url(https://fonts.googleapis.com/css?family=Oswald:200,300,400,700);
+$headings-font-family:Oswald;
+
+// $enable-grid-classes:false;
+$primary:#2f3c48;
+$secondary:#6f7f8c;
+$success:#3e4d59;
+$danger:#cc330d;
+$info:#5c8f94;
+$warning:#6e9fa5;
+$light:#eceeec;
+$dark:#1e2b37;
+
+/*! Import Bootstrap 4 variables */
+@import "../../../node_modules/bootstrap/scss/functions";
+@import "../../../node_modules/bootstrap/scss/variables";
+
+$enable-rounded:false;
+
+@import "../../../node_modules/bootstrap/scss/bootstrap";
+
+// Add SASS theme customizations here..

src/sass/bootstrap/monotony.scss

+/*! Themestr.app `Monotony` Bootstrap 4.3.1 theme */
+/* https://github.com/ThemesGuide/bootstrap-themes/blob/master/monotony/ */
+@import url(https://fonts.googleapis.com/css?family=Montserrat:200,300,400,700);
+$font-family-base:Montserrat;
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);
+$headings-font-family:Open Sans;
+
+// $enable-grid-classes:false;
+$primary:#222222;
+$secondary:#666666;
+$success:#333333;
+$danger:#434343;
+$info:#515151;
+$warning:#5f5f5f;
+$light:#eceeec;
+$dark:#111111;
+
+/*! Import Bootstrap 4 variables */
+@import "../../../node_modules/bootstrap/scss/functions";
+@import "../../../node_modules/bootstrap/scss/variables";
+
+@import "../../../node_modules/bootstrap/scss/bootstrap";
+
+// Add SASS theme customizations here..

yarn.lock

@@ -1441,7 +1441,19 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-bootstrap@^4.6.0:
+bootstrap-dark@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/bootstrap-dark/-/bootstrap-dark-1.0.3.tgz#e36159eff02c26624951766e13fc18ba367a474d"
+  integrity sha512-HH/141KZ/3hm6zKKGSX/xyHlp9C0id66B9miVKFHptrBTdbC2ZEzRu0X/jw+5M2M+2kb5xgPbUfctuWaZ25GYg==
+  dependencies:
+    bootstrap ">=4.3"
+
+bootstrap@4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.4.1.tgz#8582960eea0c5cd2bede84d8b0baf3789c3e8b01"
+  integrity sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA==
+
+bootstrap@>=4.3:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.6.0.tgz#97b9f29ac98f98dfa43bf7468262d84392552fd7"
   integrity sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==