From 6b362fd88de44328d52a6c1016574a4487c350f0 Mon Sep 17 00:00:00 2001 From: James Brooks Date: Mon, 24 Aug 2015 22:39:11 +0100 Subject: [PATCH 1/2] Theming of Cachet is much simpler with more color settings --- app/Composers/AppComposer.php | 6 +- app/Composers/ThemeComposer.php | 20 +-- app/Http/helpers.php | 28 ++++ app/Presenters/ComponentPresenter.php | 17 ++ app/Presenters/IncidentPresenter.php | 8 +- app/Providers/ComposerServiceProvider.php | 2 +- resources/assets/sass/_status-page.scss | 5 +- resources/lang/en/cachet.php | 2 +- resources/lang/en/forms.php | 7 + .../views/dashboard/settings/theme.blade.php | 78 +++++++--- resources/views/incident.blade.php | 72 ++++----- resources/views/index.blade.php | 146 +++++++++--------- resources/views/partials/component.blade.php | 4 +- resources/views/partials/incident.blade.php | 2 +- resources/views/partials/metrics.blade.php | 19 +-- resources/views/partials/stylesheet.blade.php | 61 +++++++- 16 files changed, 304 insertions(+), 173 deletions(-) diff --git a/app/Composers/AppComposer.php b/app/Composers/AppComposer.php index e8fee296..01a4dc2e 100644 --- a/app/Composers/AppComposer.php +++ b/app/Composers/AppComposer.php @@ -29,10 +29,6 @@ class AppComposer $mailAddress = env('MAIL_ADDRESS', false); $mailFrom = env('MAIL_NAME', false); - $withData = [ - 'subscribersEnabled' => $isEnabled && $mailAddress && $mailFrom, - ]; - - $view->with($withData); + $view->withSubscribersEnabled($isEnabled && $mailAddress && $mailFrom); } } diff --git a/app/Composers/ThemeComposer.php b/app/Composers/ThemeComposer.php index 54bc5946..c1b3cf32 100644 --- a/app/Composers/ThemeComposer.php +++ b/app/Composers/ThemeComposer.php @@ -25,15 +25,15 @@ class ThemeComposer */ public function compose(View $view) { - $view->withThemeBackgroundColor(Setting::get('style_background_color')); - $view->withThemeTextColor(Setting::get('style_text_color')); - - $viewData = $view->getData(); - $themeView = array_only($viewData, preg_grep('/^theme/', array_keys($viewData))); - $hasThemeSettings = array_filter($themeView, function ($data) { - return $data != null; - }); - - $view->withThemeSetup(!empty($hasThemeSettings)); + // Theme colors. + $view->withThemeBackgroundColor(Setting::get('style_background_color', '#F0F3F4')); + $view->withThemeTextColor(Setting::get('style_text_color', '#333333')); + $view->withThemeReds(Setting::get('style_reds', '#ff6f6f')); + $view->withThemeBlues(Setting::get('style_blues', '#3498db')); + $view->withThemeGreens(Setting::get('style_greens', '#7ED321')); + $view->withThemeYellows(Setting::get('style_yellows', '#F7CA18')); + $view->withThemeOranges(Setting::get('style_oranges', '#FF8800')); + $view->withThemeMetrics(Setting::get('style_metrics', '#0dccc0')); + $view->withThemeLinks(Setting::get('style_links', '#7ED321')); } } diff --git a/app/Http/helpers.php b/app/Http/helpers.php index 7297236f..03b403f7 100644 --- a/app/Http/helpers.php +++ b/app/Http/helpers.php @@ -67,3 +67,31 @@ if (!function_exists('subscribers_enabled')) { return $isEnabled && $mailAddress && $mailFrom; } } + +if (!function_exists('color_darken')) { + /** + * Darken a color. + * + * @param string $hex + * @param int $percent + * + * @return string + */ + function color_darken($hex, $percent) + { + $hex = preg_replace('/[^0-9a-f]/i', '', $hex); + $new_hex = '#'; + + if (strlen($hex) < 6) { + $hex = $hex[0] + $hex[0] + $hex[1] + $hex[1] + $hex[2] + $hex[2]; + } + + for ($i = 0; $i < 3; $i++) { + $dec = hexdec(substr($hex, $i * 2, 2)); + $dec = min(max(0, $dec + $dec * $percent), 255); + $new_hex .= str_pad(dechex($dec), 2, 0, STR_PAD_LEFT); + } + + return $new_hex; + } +} diff --git a/app/Presenters/ComponentPresenter.php b/app/Presenters/ComponentPresenter.php index 7a68c10b..293e23c4 100644 --- a/app/Presenters/ComponentPresenter.php +++ b/app/Presenters/ComponentPresenter.php @@ -17,6 +17,23 @@ class ComponentPresenter extends AbstractPresenter { use TimestampsTrait; + /** + * Returns the override class name for theming. + * + * @return string + */ + public function status_color() + { + $newStatus = ''; + + switch ($this->wrappedObject->status) { + case 1: return 'greens'; + case 2: return 'blues'; + case 3: return 'yellows'; + case 4: return 'reds'; + } + } + /** * Convert the presenter instance to an array. * diff --git a/app/Presenters/IncidentPresenter.php b/app/Presenters/IncidentPresenter.php index d18cef4f..c099a34e 100644 --- a/app/Presenters/IncidentPresenter.php +++ b/app/Presenters/IncidentPresenter.php @@ -168,13 +168,13 @@ class IncidentPresenter extends AbstractPresenter case 0: // Scheduled return 'icon ion-android-calendar'; case 1: // Investigating - return 'icon ion-flag'; + return 'icon ion-flag oranges'; case 2: // Identified - return 'icon ion-alert'; + return 'icon ion-alert yellows'; case 3: // Watching - return 'icon ion-eye'; + return 'icon ion-eye blues'; case 4: // Fixed - return 'icon ion-checkmark'; + return 'icon ion-checkmark greens'; default: // Something actually broke, this shouldn't happen. return ''; } diff --git a/app/Providers/ComposerServiceProvider.php b/app/Providers/ComposerServiceProvider.php index 5faa635e..a8ee4234 100644 --- a/app/Providers/ComposerServiceProvider.php +++ b/app/Providers/ComposerServiceProvider.php @@ -34,7 +34,7 @@ class ComposerServiceProvider extends ServiceProvider $factory->composer('*', CurrentUserComposer::class); $factory->composer(['index'], MetricsComposer::class); $factory->composer(['index', 'incident', 'subscribe'], StatusPageComposer::class); - $factory->composer(['index', 'incident', 'subscribe'], ThemeComposer::class); + $factory->composer(['index', 'incident', 'subscribe', 'dashboard.settings.theme'], ThemeComposer::class); $factory->composer('dashboard.*', DashboardComposer::class); $factory->composer(['setup', 'dashboard.settings.app-setup'], TimezoneLocaleComposer::class); } diff --git a/resources/assets/sass/_status-page.scss b/resources/assets/sass/_status-page.scss index 5315e9b1..85c1924b 100755 --- a/resources/assets/sass/_status-page.scss +++ b/resources/assets/sass/_status-page.scss @@ -27,6 +27,10 @@ body.status-page { } } + p, strong { + color: $cachet-base-dark; + } + .tooltip { .tooltip-inner { padding: 8px 12px; @@ -269,7 +273,6 @@ body.status-page { } &.group-name { - font-size: 1.2em; background-color: $cachet_gray_light; padding: { top: 0.6em; diff --git a/resources/lang/en/cachet.php b/resources/lang/en/cachet.php index 946cf141..3d07b235 100755 --- a/resources/lang/en/cachet.php +++ b/resources/lang/en/cachet.php @@ -88,7 +88,7 @@ return [ ], // Other - 'powered_by' => ':app Status Page is powered by Cachet.', + 'powered_by' => ':app Status Page is powered by Cachet.', 'about_this_site' => 'About this site', 'rss-feed' => 'RSS', 'atom-feed' => 'Atom', diff --git a/resources/lang/en/forms.php b/resources/lang/en/forms.php index 9b304627..0aa8a56f 100755 --- a/resources/lang/en/forms.php +++ b/resources/lang/en/forms.php @@ -119,6 +119,13 @@ return [ 'background-color' => 'Background Color', 'text-color' => 'Text Color', 'dashboard-login' => 'Show dashboard button in the footer?', + 'reds' => 'Red (Used for errors)', + 'blues' => 'Blue (Used for information)', + 'greens' => 'Green (Used for success)', + 'yellows' => 'Yellow (Used for alerts)', + 'oranges' => 'Orange (Used for notices)', + 'metrics' => 'Metrics Fill', + 'links' => 'Links', ], ], diff --git a/resources/views/dashboard/settings/theme.blade.php b/resources/views/dashboard/settings/theme.blade.php index 157dca24..622b1cba 100644 --- a/resources/views/dashboard/settings/theme.blade.php +++ b/resources/views/dashboard/settings/theme.blade.php @@ -21,16 +21,68 @@
- +
- +
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
@@ -39,28 +91,6 @@
- {{-- -
-
-
- - -
-
-
-
- - -
-
-
-
- - -
-
-
- --}}
diff --git a/resources/views/incident.blade.php b/resources/views/incident.blade.php index 972c7faa..b73fb0b1 100644 --- a/resources/views/incident.blade.php +++ b/resources/views/incident.blade.php @@ -1,48 +1,48 @@ @extends('layout.master') @section('content') -
- @if($subscribersEnabled) -

{{ trans('cachet.subscriber.button') }}

- @endif -

-
- -
- -
- @include('dashboard.partials.errors') -
- - @if($bannerImage = Setting::get('app_banner')) -
-
- - @if($app_url = Setting::get('app_domain')) - - @else - - @endif -
-
+
+ @if($subscribers_enabled) +

{{ trans('cachet.subscriber.button') }}

@endif +

+
-

{{ formatted_date($incident->created_at) }}

+
-
-
-
-
-
-
- -
-
-
- @include('partials.incident', ['incident' => $incident, 'with_link' => false]) +
+ @include('dashboard.partials.errors') +
+ +@if($bannerImage = Setting::get('app_banner')) +
+
+ + @if($app_url = Setting::get('app_domain')) + + @else + + @endif +
+
+@endif + +

{{ formatted_date($incident->created_at) }}

+ +
+
+
+
+
+
+
+
+ @include('partials.incident', ['incident' => $incident, 'with_link' => false]) +
+
@stop diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php index 2ba65ae7..ff65f6ed 100644 --- a/resources/views/index.blade.php +++ b/resources/views/index.blade.php @@ -1,85 +1,85 @@ @extends('layout.master') @section('content') - @if($subscribersEnabled) -
-

{{ trans('cachet.subscriber.button') }}

+@if($subscribers_enabled) +
+

{{ trans('cachet.subscriber.button') }}

+
+@endif + +
+ +
+ @include('dashboard.partials.errors') +
+ +@if($bannerImage = Setting::get('app_banner')) +
+
+ + @if($app_url = Setting::get('app_domain')) + + @else + + @endif
- @endif +
+@endif -
+
+
{{ $systemMessage }}
+
-
- @include('dashboard.partials.errors') -
+@if($about_app) +
+

{{ trans('cachet.about_this_site') }}

+

{!! $about_app !!}

+
+@endif - @if($bannerImage = Setting::get('app_banner')) -
-
- - @if($app_url = Setting::get('app_domain')) - - @else - - @endif -
-
- @endif +@if(!$component_groups->isEmpty() || !$ungrouped_components->isEmpty()) +
+ @include('partials.components') +
+@endif -
-
{{ $systemMessage }}
-
+@if($display_metrics && Setting::get('display_graphs')) +
+ @include('partials.metrics') +
+@endif - @if($about_app) -
-

{{ trans('cachet.about_this_site') }}

-

{!! $about_app !!}

-
- @endif +@if(!$scheduled_maintenance->isEmpty()) +
+ @include('partials.schedule') +
+@endif - @if(!$component_groups->isEmpty() || !$ungrouped_components->isEmpty()) -
- @include('partials.components') -
- @endif +@if($days_to_show > 0) +
+

{{ trans('cachet.incidents.past') }}

+ @foreach($all_incidents as $date => $incidents) + @include('partials.incidents', [compact($date), compact($incidents)]) + @endforeach +
- @if($display_metrics && Setting::get('display_graphs')) -
- @include('partials.metrics') -
- @endif - - @if(!$scheduled_maintenance->isEmpty()) -
- @include('partials.schedule') -
- @endif - - @if($days_to_show > 0) -
-

{{ trans('cachet.incidents.past') }}

- @foreach($all_incidents as $date => $incidents) - @include('partials.incidents', [compact($date), compact($incidents)]) - @endforeach -
- - - @endif + +@endif @stop diff --git a/resources/views/partials/component.blade.php b/resources/views/partials/component.blade.php index 224a18f7..90369f57 100644 --- a/resources/views/partials/component.blade.php +++ b/resources/views/partials/component.blade.php @@ -1,6 +1,6 @@
  • @if($component->link) - {{ $component->name }} + {{ $component->name }} @else {{ $component->name }} @endif @@ -10,6 +10,6 @@ @endif
    - {{ $component->humanStatus }} + {{ $component->humanStatus }}
    • diff --git a/resources/views/partials/incident.blade.php b/resources/views/partials/incident.blade.php index 9a9feda8..5c27e067 100644 --- a/resources/views/partials/incident.blade.php +++ b/resources/views/partials/incident.blade.php @@ -13,7 +13,7 @@
    @if($with_link) - + @else @endif diff --git a/resources/views/partials/metrics.blade.php b/resources/views/partials/metrics.blade.php index 689dcfc4..b538fe4a 100644 --- a/resources/views/partials/metrics.blade.php +++ b/resources/views/partials/metrics.blade.php @@ -1,15 +1,15 @@ @if($metrics->count() > 0) -
      +
        @foreach($metrics as $metric)
      • -

        + {{ $metric->name }} @if($metric->description) @endif -

        +
        @@ -45,12 +45,13 @@ showTooltips: false, labels: [], datasets: [{ - fillColor: "rgba(220,220,220,0.1)", - strokeColor: "rgba(52,152,219,0.6)", - pointColor: "rgba(220,220,220,1)", - pointStrokeColor: "#fff", - pointHighlightFill: "#fff", - pointHighlightStroke: "rgba(220,220,220,1)", + // fillColor: "rgba(220,220,220,0.1)", + fillColor: "{{$theme_metrics}}", + // strokeColor: "{{ $theme_metrics }}", + pointColor: "{{ color_darken($theme_metrics, -0.1) }}", + pointStrokeColor: "{{ color_darken($theme_metrics, -0.1) }}", + pointHighlightFill: "{{ color_darken($theme_metrics, -0.2) }}", + pointHighlightStroke: "{{ color_darken($theme_metrics, -0.2) }}", data: [] }], }; diff --git a/resources/views/partials/stylesheet.blade.php b/resources/views/partials/stylesheet.blade.php index c32b3504..55291156 100644 --- a/resources/views/partials/stylesheet.blade.php +++ b/resources/views/partials/stylesheet.blade.php @@ -1,12 +1,61 @@ -@if($theme_setup) -@endif From 7ab139f82e4678015bdf9daf8d145d4f6de4cd83 Mon Sep 17 00:00:00 2001 From: Joseph Cohen Date: Fri, 4 Sep 2015 17:02:48 -0500 Subject: [PATCH 2/2] Add backgroud fills --- app/Composers/ThemeComposer.php | 1 + resources/lang/en/forms.php | 1 + .../views/dashboard/settings/theme.blade.php | 6 +++++ resources/views/partials/footer.blade.php | 2 +- resources/views/partials/incident.blade.php | 2 +- resources/views/partials/incidents.blade.php | 2 +- resources/views/partials/stylesheet.blade.php | 27 +++++++++++++++++++ 7 files changed, 38 insertions(+), 3 deletions(-) diff --git a/app/Composers/ThemeComposer.php b/app/Composers/ThemeComposer.php index c1b3cf32..98074023 100644 --- a/app/Composers/ThemeComposer.php +++ b/app/Composers/ThemeComposer.php @@ -27,6 +27,7 @@ class ThemeComposer { // Theme colors. $view->withThemeBackgroundColor(Setting::get('style_background_color', '#F0F3F4')); + $view->withThemeBackgroundFills(Setting::get('style_background_fills', '#FFFFFF')); $view->withThemeTextColor(Setting::get('style_text_color', '#333333')); $view->withThemeReds(Setting::get('style_reds', '#ff6f6f')); $view->withThemeBlues(Setting::get('style_blues', '#3498db')); diff --git a/resources/lang/en/forms.php b/resources/lang/en/forms.php index 0aa8a56f..fcff2234 100755 --- a/resources/lang/en/forms.php +++ b/resources/lang/en/forms.php @@ -117,6 +117,7 @@ return [ ], 'theme' => [ 'background-color' => 'Background Color', + 'background-fills' => 'Background Fills (Components, Incidents, Footer)', 'text-color' => 'Text Color', 'dashboard-login' => 'Show dashboard button in the footer?', 'reds' => 'Red (Used for errors)', diff --git a/resources/views/dashboard/settings/theme.blade.php b/resources/views/dashboard/settings/theme.blade.php index 622b1cba..d10ea484 100644 --- a/resources/views/dashboard/settings/theme.blade.php +++ b/resources/views/dashboard/settings/theme.blade.php @@ -81,6 +81,12 @@
        +
        +
        + + +
        +
        diff --git a/resources/views/partials/footer.blade.php b/resources/views/partials/footer.blade.php index 1ae48149..08988731 100644 --- a/resources/views/partials/footer.blade.php +++ b/resources/views/partials/footer.blade.php @@ -1,4 +1,4 @@ -