Skip to content

P
purescript-gargantext
Commit ab1a5d9b authored by Przemyslaw Kaminski's avatar Przemyslaw Kaminski
Browse files
Options

[bootstrap] theme chooser

parent a3593615
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 29613 additions and 11 deletions
dist/index.html
View file @ ab1a5d9b
......@@ -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>
......
dist/styles/bootstrap-default.css 0 → 100644
View file @ ab1a5d9b
This diff is collapsed.
dist/styles/bootstrap-greyson.css 0 → 100644
View file @ ab1a5d9b
This diff is collapsed.
dist/styles/bootstrap-monotony.css 0 → 100644
View file @ ab1a5d9b
This diff is collapsed.
index.html
View file @ ab1a5d9b
......@@ -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
View file @ ab1a5d9b
......@@ -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 0 → 100644
View file @ ab1a5d9b
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
View file @ ab1a5d9b
......@@ -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
View file @ ab1a5d9b
......@@ -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 0 → 100644
View file @ ab1a5d9b
/*! 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 0 → 100644
View file @ ab1a5d9b
/*! 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
View file @ ab1a5d9b
......@@ -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==
......
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