diff --git a/css/uptime.css b/css/uptime.css index b245c39..a97cc05 100644 --- a/css/uptime.css +++ b/css/uptime.css @@ -50,13 +50,14 @@ div.uptime-wrap td { .uptime-table, .uptime-body, td.uptime-notice { + padding-right: 15px; border: 0 none !important; border-collapse: separate; } /* Center the copyright notice vertically with the pageratio widget.*/ table.uptime-table.notice { - padding: 3px 15px; + padding: 3px 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } @@ -71,3 +72,127 @@ table.uptime-table caption { table.uptime-table caption a { text-decoration: none; } + +/*-----------------Circle-styled widget--------------------*/ +.uptime-body-circle { + display: flex; + align-items: center; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +.uptime-body-circle .circle-wrapper { + margin-left: 20px; + height: 5em; + width: 5em; + border-radius: 5em; + border: 5px solid; + border-color: #2a93ef #2a93ef #2a93ef transparent; /* CHANGE THE COLOR HERE */ + transform: rotate(-25deg); +} + +.uptime-body-circle .info-wrapper { + position: absolute; + margin-top: 0.7em; +} + +.uptime-body-circle .uptime-first { + font-weight: bold; + font-size: 1.6em; + line-height: 1.2; + color: #3a3a3a; /* CHANGE THE COLOR HERE */ +} + +.uptime-body-circle .uptime-last { + font-weight: lighter; + text-transform: uppercase; + font-size: 0.9em; + text-align: right; + color: #6b6b6b; /* CHANGE THE COLOR HERE */ +} + +/*------------------------Diamond-styled widget-----------------------*/ +.uptime-body-diamond { + text-align: center; + display: flex; + position: relative; + align-items: center; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +.diamond-wrapper { + margin: 10px; +} + +.diamond-wrapper:before { + content: ""; + display: block; + width: 5em; + height: 5em; + transform: rotate(45deg); + background-color: #2a93ef; /* CHANGE THE COLOR HERE */ + border-radius: 10px; +} + +.uptime-body-diamond .info-wrapper { + margin-left: 0.8em; + top: 1.7em; + z-index: 100; + position: absolute; +} + +.uptime-body-diamond .uptime-first { + font-size: 1.6em; + font-weight: bold; + line-height: 1; + color: white; +} + +.uptime-body-diamond .uptime-first span { + font-size: 0.7em; +} + +.uptime-body-diamond .uptime-last { + font-weight: lighter; +} + +/*-------------------------Signal-styled widget--------------------------*/ +.uptime-body-signal { + display: flex; + align-items: center; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +} + +.uptime-body-signal .uptime-first { + font-weight: bold; + font-size: 2em; + text-align: right; + line-height: 1; + color: #2a93ef; /* CHANGE THE COLOR HERE */ +} + +.uptime-body-signal .uptime-first span { + font-size: 0.7em; + vertical-align: top; + color: #2a93ef; /* CHANGE THE COLOR HERE */ +} + +.uptime-body-signal .uptime-last { + font-weight: lighter; + font-size: 1.3em; + text-transform: uppercase; + color: #003c71; /* CHANGE THE COLOR HERE */ +} + +.uptime-body-signal .signal-wrapper { + display: flex; + align-items: center; +} + +.uptime-body-signal .signal-wrapper:before { + width: 1.2em; + height: 1.2em; + display: inline-block; + content: ""; + background-size: contain; + background-image: url("../images/icons/signal.png"); +} diff --git a/images/icons/signal.png b/images/icons/signal.png new file mode 100644 index 0000000..ed47ce3 Binary files /dev/null and b/images/icons/signal.png differ diff --git a/src/Plugin/Block/UptimeWidgetBlock.php b/src/Plugin/Block/UptimeWidgetBlock.php new file mode 100644 index 0000000..0e787ac --- /dev/null +++ b/src/Plugin/Block/UptimeWidgetBlock.php @@ -0,0 +1,85 @@ +getConfiguration(); + + $form['selected_widget'] = [ + '#type' => 'select', + '#title' => t('Widget'), + '#options' => [ + 'all' => $this->t('All widgets'), + 'uptime' => $this->t('Uptime widget'), + 'copyright' => $this->t('Copyright widget'), + ], + '#default_value' => isset($config['selected_widget']) ? $config['selected_widget'] : 'all', + '#description' => $this->t('Select the widget which will be shown in this block.'), + ]; + $options = [ + 'default' => $this->t('Default'), + 'circle' => $this->t('Circle'), + 'diamond' => $this->t('Diamond'), + 'signal' => $this->t('Signal'), + ]; + + // At this point, allow other modules to alter the list of widget options. + \Drupal::moduleHandler()->alter('uptime_widget_type', $options); + $form['widget_type'] = [ + '#type' => 'select', + '#title' => t('Widget Type'), + '#options' => $options, + '#description' => $this->t('Select the widget type which will be shown in this block.'), + ]; + + return $form; + } + + /** + * {@inheritdoc} + */ + public function blockSubmit($form, FormStateInterface $form_state) { + parent::blockSubmit($form, $form_state); + + $values = $form_state->getValues(); + $this->configuration['selected_widget'] = $values['selected_widget']; + $this->configuration['widget_type'] = $values['widget_type']; + } + + /** + * The version of the uptime block. + */ + public function build() { + $config = \Drupal::config('uptime_widget.settings'); + $is_uptime_enabled = $config->get('enabled'); + $is_notice_enabled = $config->get('notice_enabled'); + $build = []; + if ($is_uptime_enabled || $is_notice_enabled) { + $build = [ + '#theme' => 'uptime_widget_block', + '#selected_widget' => $this->configuration['selected_widget'], + '#widget_type' => $this->configuration['widget_type'], + ]; + } + return $build; + } + +} diff --git a/src/Plugin/Block/UptimeWidgetFancyBlock.php b/src/Plugin/Block/UptimeWidgetFancyBlock.php deleted file mode 100644 index 71a8fb4..0000000 --- a/src/Plugin/Block/UptimeWidgetFancyBlock.php +++ /dev/null @@ -1,68 +0,0 @@ -getConfiguration(); - - $form['selected_widget'] = [ - '#type' => 'select', - '#title' => t('Widget'), - '#options' => [ - 'all' => $this->t('All widgets'), - 'uptime' => $this->t('Uptime widget'), - 'copyright' => $this->t('Copyright widget'), - ], - '#default_value' => isset($config['selected_widget']) ? $config['selected_widget'] : 'all', - '#description' => $this->t('Select the widget which will be shown in this block.'), - ]; - - return $form; - } - - /** - * {@inheritdoc} - */ - public function blockSubmit($form, FormStateInterface $form_state) { - parent::blockSubmit($form, $form_state); - - $values = $form_state->getValues(); - $this->configuration['selected_widget'] = $values['selected_widget']; - } - - /** - * The fancy version of the uptime block. - */ - public function build() { - $config = \Drupal::config('uptime_widget.settings'); - $is_uptime_enabled = $config->get('enabled'); - $is_notice_enabled = $config->get('notice_enabled'); - $build = []; - if ($is_uptime_enabled || $is_notice_enabled) { - $build = [ - '#theme' => 'uptime_widget_fancy_block', - '#selected_widget' => $this->configuration['selected_widget'], - ]; - } - return $build; - } - -} diff --git a/templates/uptime-widget-block.html.twig b/templates/uptime-widget-block.html.twig new file mode 100644 index 0000000..1d24112 --- /dev/null +++ b/templates/uptime-widget-block.html.twig @@ -0,0 +1,41 @@ +{# +/** + * @file + * Default theme implementation for rendering an uptime block. + * + * + * Available variables: + * - enabled: Display uptime ratio. + * - nocss: Do not apply the module's CSS. + * - ratio: The latest reported uptime ratio. + * - notice_enabled: Display copyright notice. + * - host: Host. + * - notice: Notice. + * - widget: Widget. + * + * @see template_preprocess_uptime_widget_block() + * + * @ingroup themeable + */ +#} +{% if not nocss %} + {{ attach_library('uptime_widget/uptime-widget') }} +{% endif %} +
+{% if enabled and (selected_widget == 'uptime' or selected_widget == 'all') %} + {% if widget_type %} + {{ widget }} + {% endif %} +{% endif %} +{% if notice_enabled and (selected_widget == 'copyright' or selected_widget == 'all') %} + + + + + + +
+ {{ notice }} {{ host }} +
+{% endif %} +
diff --git a/templates/uptime-widget-fancy-block.html.twig b/templates/uptime-widget-fancy-block.html.twig deleted file mode 100644 index d406c11..0000000 --- a/templates/uptime-widget-fancy-block.html.twig +++ /dev/null @@ -1,51 +0,0 @@ -{# -/** - * @file - * Default theme implementation for rendering a fancy uptime block. - * - * - * Available variables: - * - enabled: Display uptime ratio. - * - nocss: Do not apply the module's CSS. - * - ratio: The latest reported uptime ratio. - * - notice_enabled: Display copyright notive. - * - host: Host. - * - notice: Notice. - * - * @see template_preprocess_uptime_widget_fancy_block() - * - * @ingroup themeable - */ -#} -{% if not nocss %} - {{ attach_library('uptime_widget/uptime-widget') }} -{% endif %} -
-{% if enabled and (selected_widget == 'uptime' or selected_widget == 'all') %} - - - - - - - - -
- UpTime - - {{ ratio }} % -
UpTimeRobot.com
-{% endif %} -{% if notice_enabled and (selected_widget == 'copyright' or selected_widget == 'all') %} - - - - - - -
- {{ notice }} {{ host }} -
-{% endif %} -
- diff --git a/templates/uptime-widget-type.html.twig b/templates/uptime-widget-type.html.twig new file mode 100644 index 0000000..ee852ec --- /dev/null +++ b/templates/uptime-widget-type.html.twig @@ -0,0 +1,78 @@ +{# +/** + * @file + * Default theme implementation for rendering a widget for uptime block. + * + * + * Available variables: + * - ratio: The latest reported uptime ratio. + * - widget_type: Type of widget for uptime block. + * + * @see template_preprocess_uptime_widget_type() + * + * @ingroup themeable + * + * To create your own custom widget, see hook_uptime_widget_type_alter(). + * After altering options of available widget_types, copy this template + * into your theme templates folder like 'uptime-widget-type--*YOUR_WIDGET_NAME*.html.twig'. + */ +#} +{% if widget_type == "circle" %} + +
+
+
+ {{ ratio }}% +
+
+ {{ "UpTime"|t }} +
+
+
+
+ +{% elseif widget_type == "diamond" %} + +
+
+
+
+ {{ ratio }}% +
+
+ {{ "UpTime"|t }} +
+
+
+
+ +{% elseif widget_type == "signal" %} + +
+
+
+ {{ ratio }}% +
+
+ {{ "UpTime"|t }} +
+
+
+ +{% else %} + + + + + + + + +
+ {{ "UpTime"|t }} + + {{ ratio }} % +
+ +{% endif %} + diff --git a/uptime_widget.api.php b/uptime_widget.api.php new file mode 100644 index 0000000..dd887fe --- /dev/null +++ b/uptime_widget.api.php @@ -0,0 +1,23 @@ +getEditable('uptime_widget.settings'); - $host = $config->get('url_name'); - if (empty($host)) { - $config->set('url_name', parse_url($GLOBALS['base_url'], PHP_URL_HOST))->save(); - } - $year = $config->get('year'); - // If the notice is enabled we want it.. - if ($config->get('notice_enabled')) { - $notice = ' ' . $config->get('prepend') . ' © ' . (($year != date('Y') && !empty($year)) ? $year . '-' . date('Y') : date('Y')); - } - else { - // ..and leave it empty if disabled. - $notice = ''; - $host = ''; - } - return [ - 'uptime_widget_fancy_block' => [ + 'uptime_widget_block' => [ 'variables' => [ - 'enabled' => $config->get('enabled'), - 'nocss' => $config->get('nocss'), - 'ratio' => \Drupal::state()->get('uptime_widget.ratio', 0), - 'notice_enabled' => $config->get('notice_enabled'), - 'host' => $host, - 'notice' => $notice, - 'selected_widget' => 'all', + 'enabled' => NULL, + 'nocss' => NULL, + 'ratio' => NULL, + 'notice_enabled' => NULL, + 'host' => NULL, + 'notice' => NULL, + 'selected_widget' => NULL, + 'widget_type' => NULL, + ], + ], + 'uptime_widget_type' => [ + 'variables' => [ + 'ratio' => NULL, + 'widget_type' => NULL, ], - 'template' => 'uptime-widget-fancy-block', ], 'uptime_range' => [ 'render element' => 'elements', @@ -246,3 +236,58 @@ function uptime_widget_tokens($type, $tokens, array $data, array $options, Bubbl } return $replacements; } + +/** + * Implements hook_preprocess_HOOK() for uptime widget block. + */ +function uptime_widget_preprocess_uptime_widget_block(&$variables) { + $config = \Drupal::configFactory()->getEditable('uptime_widget.settings'); + $host = $config->get('url_name'); + if (empty($host)) { + $config->set('url_name', parse_url($GLOBALS['base_url'], PHP_URL_HOST))->save(); + } + $year = $config->get('year'); + + // If the notice is enabled we want it.. + if ($config->get('notice_enabled')) { + $notice = ' ' . $config->get('prepend') . ' © ' . (($year != date('Y') && !empty($year)) ? $year . '-' . date('Y') : date('Y')); + } + else { + + // ..and leave it empty if disabled. + $notice = ''; + $host = ''; + } + + $defaults = [ + 'enabled' => $config->get('enabled'), + 'nocss' => $config->get('nocss'), + 'ratio' => $config->get('ratio'), + 'notice_enabled' => $config->get('notice_enabled'), + 'host' => $host, + 'notice' => $notice, + ]; + + // Overrides default values. + foreach ($variables as $key => &$value) { + if (!isset($value)) { + $value = $defaults[$key]; + } + } + + $variables['widget'] = [ + '#theme' => 'uptime_widget_type', + '#widget_type' => $variables['widget_type'], + '#ratio' => $variables['ratio'], + ]; +} + +/** + * Implements hook_theme_suggestions_HOOK(). + */ +function uptime_widget_theme_suggestions_uptime_widget_type(array $variables) { + $suggestions = []; + + $suggestions[] = $variables['theme_hook_original'] . '__' . $variables['widget_type']; + return $suggestions; +}