Skip to content
Snippets Groups Projects
Commit 66e5ac14 authored by Daniel Schömer's avatar Daniel Schömer :chipmunk:
Browse files

Admin App-Settings Metrics header expand/collapse

Update section headers in Admin / Application Settings / Metrics and
profiling to expand/collapse on click/tap.

CSS classes settings-title, js-settings-toggle and
js-settings-toggle-trigger-only are added to header/h4 elements. This
enables the expand/collapse behavior on on-click / on-tap.

Project Settings headers (h4 elements) expand/collapse on mouse-click
/ tap and using the Expand/Collapse button. Most h4 headers in Admin
/ Application Settings pages do not expand/collapse on mouse-click /
tap, but only using the Expand/Collapse button. This may seem
inconsistent to the user.

Changelog: changed
parent 4eb840e6
No related branches found
No related tags found
1 merge request!90573Admin App-Settings Metrics header expand/collapse
......@@ -136,7 +136,9 @@ export default {
<template>
<section class="settings no-animate js-self-monitoring-settings">
<div class="settings-header">
<h4 class="js-section-header">
<h4
class="js-section-header settings-title js-settings-toggle js-settings-toggle-trigger-only"
>
{{ s__('SelfMonitoring|Self monitoring') }}
</h4>
<gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
......
......@@ -6,7 +6,7 @@
%section.settings.as-prometheus.no-animate#js-prometheus-settings{ class: ('expanded' if expanded_by_default?) }
.settings-header
%h4
%h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
= _('Metrics - Prometheus')
= render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
= expanded_by_default? ? _('Collapse') : _('Expand')
......@@ -17,7 +17,7 @@
%section.settings.as-grafana.no-animate#js-grafana-settings{ class: ('expanded' if expanded_by_default?) }
.settings-header
%h4
%h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
= _('Metrics - Grafana')
= render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
= expanded_by_default? ? _('Collapse') : _('Expand')
......@@ -30,7 +30,7 @@
%section.settings.as-performance-bar.no-animate#js-performance-bar-settings{ class: ('expanded' if expanded_by_default?), data: { qa_selector: 'performance_bar_settings_content' } }
.settings-header
%h4
%h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
= _('Profiling - Performance bar')
= render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
= expanded_by_default? ? _('Collapse') : _('Expand')
......@@ -44,7 +44,7 @@
%section.settings.as-usage.no-animate#js-usage-settings{ class: ('expanded' if expanded_by_default?), data: { qa_selector: 'usage_statistics_settings_content' } }
.settings-header#usage-statistics
%h4
%h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
= _('Usage statistics')
= render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
= expanded_by_default? ? _('Collapse') : _('Expand')
......@@ -56,7 +56,7 @@
- if Feature.enabled?(:configure_sentry_in_application_settings)
%section.settings.as-sentry.no-animate#js-sentry-settings{ class: ('expanded' if expanded_by_default?), data: { qa_selector: 'sentry_settings_content' } }
.settings-header
%h4
%h4.settings-title.js-settings-toggle.js-settings-toggle-trigger-only
= _('Sentry')
= render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
= expanded_by_default? ? _('Collapse') : _('Expand')
......
......@@ -8,7 +8,7 @@ exports[`self monitor component When the self monitor project has not been creat
class="settings-header"
>
<h4
class="js-section-header"
class="js-section-header settings-title js-settings-toggle js-settings-toggle-trigger-only"
>
Self monitoring
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment