From 2f7f19728b791ec042b0f2b7acdef7ee65a9bcdd Mon Sep 17 00:00:00 2001
From: Davide <davide@suma-ev.de>
Date: Mon, 19 Oct 2020 16:01:26 +0200
Subject: [PATCH] added dark mode cookie and minor design changes
---
app/Http/Controllers/SettingsController.php | 45 ++++++++++++++++++-
app/Http/Controllers/StartpageController.php | 13 +++++-
resources/lang/de/settings.php | 1 +
resources/lang/en/settings.php | 1 +
resources/less/metager/metager-dark.less | 2 +-
resources/less/metager/parts/scaffolding.less | 4 +-
.../less/metager/startpage-only-dark.less | 2 +
.../less/metager/startpage-only-light.less | 2 +
resources/less/metager/startpage-only.less | 17 +++----
resources/less/metager/variables-dark.less | 7 +++
resources/less/metager/variables.less | 5 +++
resources/views/settings/index.blade.php | 8 +++-
routes/cookie.php | 1 +
webpack.mix.js | 5 ++-
14 files changed, 97 insertions(+), 16 deletions(-)
create mode 100644 resources/less/metager/startpage-only-dark.less
create mode 100644 resources/less/metager/startpage-only-light.less
diff --git a/app/Http/Controllers/SettingsController.php b/app/Http/Controllers/SettingsController.php
index 0d0d52f75..4e7a7b020 100644
--- a/app/Http/Controllers/SettingsController.php
+++ b/app/Http/Controllers/SettingsController.php
@@ -72,6 +72,18 @@ class SettingsController extends Controller
# Generating link with set cookies
$cookieLink = LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('loadSettings', $cookies));
+ # Checking if dark mode active
+ $darkmode = 0;
+ foreach($cookies as $key => $value){
+ if($key === 'dark_mode'){
+ if($value === 1)
+ $darkmode = 1;
+ elseif($value === 2){
+ $darkmode = 2;
+ }
+ }
+ }
+
return view('settings.index')
->with('title', trans('titles.settings', ['fokus' => $fokusName]))
->with('fokus', $request->input('fokus', ''))
@@ -82,7 +94,8 @@ class SettingsController extends Controller
->with('settingActive', $settingActive)
->with('url', $url)
->with('blacklist', $blacklist)
- ->with('cookieLink', $cookieLink);
+ ->with('cookieLink', $cookieLink)
+ ->with('darkmode', $darkmode);
}
private function getSumas($fokus)
@@ -394,4 +407,34 @@ class SettingsController extends Controller
return redirect(LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), url('/')));
}
+
+ public function darkmode(Request $request)
+ {
+ $fokus = $request->input('fokus', '');
+ $url = $request->input('url', '');
+
+ $path = \Request::path();
+ $cookiePath = "/" . substr($path, 0, strpos($path, "meta/") + 5);
+
+ $cookies = Cookie::get();
+ $setCookie = true;
+
+ $darkmode = "0";
+
+ if(!empty($cookies)){
+ foreach($cookies as $key => $value){
+ if($key === 'dark_mode'){
+ if($value === "0" || $value == "1"){
+ $darkmode = "2";
+ }elseif($value === "2"){
+ $darkmode = "1";
+ }
+ Cookie::queue('dark_mode', $darkmode, 0, $cookiePath, null, false, false);
+ $setCookie = false;
+ }
+ }
+ }else{
+ Cookie::queue('dark_mode', "2", 0, $cookiePath, null, false, false);
+ }
+ return redirect(LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('settings', ["fokus" => $fokus, "url" => $url]))); }
}
diff --git a/app/Http/Controllers/StartpageController.php b/app/Http/Controllers/StartpageController.php
index d38be544d..d270ccab6 100644
--- a/app/Http/Controllers/StartpageController.php
+++ b/app/Http/Controllers/StartpageController.php
@@ -3,6 +3,7 @@
namespace App\Http\Controllers;
use App;
+use Cookie;
use Illuminate\Http\Request;
use Jenssegers\Agent\Agent;
use LaravelLocalization;
@@ -42,6 +43,15 @@ class StartpageController extends Controller
$lang = 'all';
}
+ $darkmode = 0;
+
+ $cookies = Cookie::get();
+ foreach($cookies as $key => $value){
+ if($key === 'dark_mode' && $value === 1){
+ $darkmode = 1;
+ }
+ }
+
return view('index')
->with('title', trans('titles.index'))
->with('homeIcon')
@@ -52,7 +62,8 @@ class StartpageController extends Controller
->with('request', $request->input('request', 'GET'))
->with('option_values', $option_values)
->with('autocomplete', $autocomplete)
- ->with('pluginmodal', $request->input('plugin-modal', 'off'));
+ ->with('pluginmodal', $request->input('plugin-modal', 'off'))
+ ->with('darkmode', $darkmode);
}
public function loadPage($subpage)
diff --git a/resources/lang/de/settings.php b/resources/lang/de/settings.php
index e0ba814ef..767731f21 100644
--- a/resources/lang/de/settings.php
+++ b/resources/lang/de/settings.php
@@ -25,6 +25,7 @@ return [
'add' => 'Hinzufügen',
'clear' => 'Blacklist leeren',
'copy' => 'Kopieren',
+ 'darkmode' => 'Dunklen Modus umschalten',
// Translations from the settings overview
'noSettings' => 'Aktuell sind keine Einstellungen gesetzt!',
diff --git a/resources/lang/en/settings.php b/resources/lang/en/settings.php
index f1968e6af..f97149f6f 100644
--- a/resources/lang/en/settings.php
+++ b/resources/lang/en/settings.php
@@ -25,6 +25,7 @@ return [
'add' => 'Add',
'clear' => 'Clear black list',
'copy' => 'Copy',
+ 'darkmode' => 'Toggle dark mode',
// Translations from the settings overview
'noSettings' => "Currently no settings are set!",
diff --git a/resources/less/metager/metager-dark.less b/resources/less/metager/metager-dark.less
index df6cf7ab9..ddd5b804f 100644
--- a/resources/less/metager/metager-dark.less
+++ b/resources/less/metager/metager-dark.less
@@ -3,7 +3,7 @@
// Variables
@import "./bs-variables.less";
-@import "./variables.less";
+//@import "./variables.less";
@import "./variables-dark.less";
// General
diff --git a/resources/less/metager/parts/scaffolding.less b/resources/less/metager/parts/scaffolding.less
index 6f7f55a9c..1d926a607 100644
--- a/resources/less/metager/parts/scaffolding.less
+++ b/resources/less/metager/parts/scaffolding.less
@@ -11,8 +11,8 @@ body{
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif ;
font-size: 1em;
line-height:1.428571429 ;
- color: black;
- background-color:#fff ;
+ color:@text-color;
+ background-color:@background-color;
}
diff --git a/resources/less/metager/startpage-only-dark.less b/resources/less/metager/startpage-only-dark.less
new file mode 100644
index 000000000..cef1a570c
--- /dev/null
+++ b/resources/less/metager/startpage-only-dark.less
@@ -0,0 +1,2 @@
+@import "./variables-dark.less";
+@import "./startpage-only.less";
\ No newline at end of file
diff --git a/resources/less/metager/startpage-only-light.less b/resources/less/metager/startpage-only-light.less
new file mode 100644
index 000000000..d82aed9f6
--- /dev/null
+++ b/resources/less/metager/startpage-only-light.less
@@ -0,0 +1,2 @@
+@import "./variables.less";
+@import "./startpage-only.less";
\ No newline at end of file
diff --git a/resources/less/metager/startpage-only.less b/resources/less/metager/startpage-only.less
index 8fa4db3db..8fdae69b6 100644
--- a/resources/less/metager/startpage-only.less
+++ b/resources/less/metager/startpage-only.less
@@ -75,19 +75,20 @@ html {
top: 0;
z-index: 10;
+
&>:nth-child(1) {
- background-color: #EEEEEE;
+ background-color: @story-privacy-background;
}
&>:nth-child(2) {
- background-color: #ffffff;
+ background-color: @story-ngo-background;
color: #AD1A00
}
&>:nth-child(3) {
- background-color: #edfdff;
+ background-color: @story-diversity-background;
color: #0C4690;
}
&>:nth-child(4) {
- background-color: #e3ffe9;
+ background-color: @story-eco-background;
color: #0c621A;
}
@@ -192,12 +193,12 @@ footer {
// following lines set the background and heading color of each section
#story-privacy {
margin-bottom: 0;
- background-color: #EEEEEE;
+ background-color: @story-privacy-background;
}
#story-ngo {
grid-area: "icn-ngo";
- background-color: #ffffff;
+ background-color: @story-ngo-background;
clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
}
@@ -207,7 +208,7 @@ footer {
#story-diversity {
grid-area: "icn-diversity";
- background-color: #edfdff;
+ background-color: @story-diversity-background;
clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
}
@@ -217,7 +218,7 @@ footer {
#story-eco {
grid-area: "icn-eco";
- background-color: #e3ffe9;
+ background-color: @story-eco-background;
clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
}
diff --git a/resources/less/metager/variables-dark.less b/resources/less/metager/variables-dark.less
index 72a7ba33f..aec4e5feb 100644
--- a/resources/less/metager/variables-dark.less
+++ b/resources/less/metager/variables-dark.less
@@ -14,3 +14,10 @@
@card-background-color: @color-strong-grey;
// Default Borde Color
@border-color: #727272;
+
+@background-color:black;
+
+@story-privacy-background: #111111;
+@story-ngo-background:#000000;
+@story-diversity-background:#000030;
+@story-eco-background:#003000;
\ No newline at end of file
diff --git a/resources/less/metager/variables.less b/resources/less/metager/variables.less
index 1541bf4ac..c8b85e4b9 100644
--- a/resources/less/metager/variables.less
+++ b/resources/less/metager/variables.less
@@ -62,3 +62,8 @@ sans-serif;
@quicktip-background-color: @color-white;
// Color of the Spruch author
@spruch-author-color: @color-strong-grey;
+
+@story-privacy-background: @color-almost-white;
+@story-ngo-background:white;
+@story-diversity-background:#edfdff;
+@story-eco-background:#e3ffe9;
\ No newline at end of file
diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php
index e673165a3..59ec7ad34 100644
--- a/resources/views/settings/index.blade.php
+++ b/resources/views/settings/index.blade.php
@@ -122,9 +122,10 @@
@endif
</div>
- @if(LaravelLocalization::getCurrentLocale() === "de")
+
<div class="card-light">
<h2>Weitere Einstellungen</h2>
+ @if(LaravelLocalization::getCurrentLocale() === "de")
<form id="setting-form" action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('enableSetting')) }}" method="post" class="form">
<input type="hidden" name="fokus" value="{{ $fokus }}">
<input type="hidden" name="url" value="{{ $url }}">
@@ -137,8 +138,11 @@
</div>
<button type="submit" class="btn btn-default">@lang('settings.save')</button>
</form>
+ @endif
+ <form id="darkmode" action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), route('darkmode', ["fokus" => $fokus, "url" => $url])) }}" method="post" class="form">
+ <button type="submit" class="btn btn-default">@lang('settings.darkmode')</button>
+ </form>
</div>
- @endif
<div class="card-light" id="actions">
@if($settingActive)
<div id="reset">
diff --git a/routes/cookie.php b/routes/cookie.php
index 515dd0ca8..babef196f 100644
--- a/routes/cookie.php
+++ b/routes/cookie.php
@@ -29,6 +29,7 @@ Route::group(
Route::post('all-settings/removeOne', 'SettingsController@removeOneSetting')->name('removeOneSetting');
Route::post('all-settings/removeAll', 'SettingsController@removeAllSettings')->name('removeAllSettings');
Route::get('load-settings', 'SettingsController@loadSettings')->name('loadSettings');
+ Route::post('darkmode', 'SettingsController@darkmode')->name('darkmode');
});
}
);
diff --git a/webpack.mix.js b/webpack.mix.js
index 5efff061f..0288185da 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -22,7 +22,10 @@ mix
.less("resources/less/metager/metager.less", "public/css/themes/metager.css", {
strictMath: true
})
- .less("resources/less/metager/startpage-only.less", "public/css/themes/startpage-only.css", {
+ .less("resources/less/metager/startpage-only-light.less", "public/css/themes/startpage-only.css", {
+ strictMath: true
+ })
+ .less("resources/less/metager/startpage-only-dark.less", "public/css/themes/startpage-only-dark.css", {
strictMath: true
})
.less("resources/less/metager/metager-dark.less", "public/css/themes/metager-dark.css", {
--
GitLab