Issue #3257977: Optimise custom color input (f72a4634) · Commits · project / gin

dist/css/components/settings.css

+18 −0

Original line number	Diff line number	Diff line
		@@ -71,6 +71,24 @@
		visibility: visible;
		}

		[data-drupal-selector=edit-accent-group] .form-type--color,
		[data-drupal-selector=edit-accent-group] .form-type--textfield,
		[data-drupal-selector=edit-focus-group] .form-type--color,
		[data-drupal-selector=edit-focus-group] .form-type--textfield {
		float: left;
		margin: 0 0 .5rem 0;
		}

		[data-drupal-selector=edit-accent-group] .form-type--color,
		[data-drupal-selector=edit-focus-group] .form-type--color {
		margin-right: .5rem;
		}

		[data-drupal-selector=edit-accent-group] .fieldset__description,
		[data-drupal-selector=edit-focus-group] .fieldset__description {
		clear: both;
		}

		[data-drupal-selector=edit-enable-darkmode] .form-radios {
		display: inline-flex;
		flex-wrap: wrap;

dist/js/settings.js

+8 −2

Original line number	Diff line number	Diff line
		@@ -18,9 +18,12 @@
		const accentColorSetting = $('input[name="accent_color"]').val();
		Drupal.behaviors.ginAccent.setCustomAccentColor(accentColorSetting);
		}
		})), $('input[name="accent_picker"]', context).change((function() {
		const accentColorSetting = $(this).val();
		$('input[name="accent_color"]', context).val(accentColorSetting), Drupal.behaviors.ginAccent.setCustomAccentColor(accentColorSetting);
		})), $('input[name="accent_color"]', context).change((function() {
		const accentColorSetting = $(this).val();
		Drupal.behaviors.ginAccent.setCustomAccentColor(accentColorSetting);
		$('input[name="accent_picker"]', context).val(accentColorSetting), Drupal.behaviors.ginAccent.setCustomAccentColor(accentColorSetting);
		})), $('select[name="preset_focus_color"]', context).change((function() {
		const focusColorPreset = $(this).val();
		if (Drupal.behaviors.ginAccent.clearFocusColor(), Drupal.behaviors.ginAccent.setFocusColor(focusColorPreset),
		@@ -28,9 +31,12 @@
		const focusColorSetting = $('input[name="focus_color"]').val();
		Drupal.behaviors.ginAccent.setCustomFocusColor(focusColorSetting);
		}
		})), $('input[name="focus_picker"]', context).change((function() {
		const focusColorSetting = $(this).val();
		$('input[name="focus_color"]', context).val(focusColorSetting), Drupal.behaviors.ginAccent.setCustomFocusColor(focusColorSetting);
		})), $('input[name="focus_color"]', context).change((function() {
		const focusColorSetting = $(this).val();
		Drupal.behaviors.ginAccent.setCustomFocusColor(focusColorSetting);
		$('input[name="focus_picker"]', context).val(focusColorSetting), Drupal.behaviors.ginAccent.setCustomFocusColor(focusColorSetting);
		})), $('input[name="high_contrast_mode"]', context).change((function() {
		const highContrastMode = $(this).is(":checked");
		Drupal.behaviors.ginSettings.setHighContrastMode(highContrastMode);

js/settings.js

+29 −1

Original line number	Diff line number	Diff line
		@@ -49,15 +49,29 @@
		}
		});

		// Watch Accent color picker has changed.
		$('input[name="accent_picker"]', context).change(function () {
		const accentColorSetting = $(this).val();

		// Sync fields.
		$('input[name="accent_color"]', context).val(accentColorSetting);

		// Update.
		Drupal.behaviors.ginAccent.setCustomAccentColor(accentColorSetting);
		});

		// Watch Accent color setting has changed.
		$('input[name="accent_color"]', context).change(function () {
		const accentColorSetting = $(this).val();

		// Sync fields.
		$('input[name="accent_picker"]', context).val(accentColorSetting);

		// Update.
		Drupal.behaviors.ginAccent.setCustomAccentColor(accentColorSetting);
		});

		// Watch Accent color setting has changed.
		// Watch Focus color setting has changed.
		$('select[name="preset_focus_color"]', context).change(function () {
		const focusColorPreset = $(this).val();

		@@ -73,10 +87,24 @@
		}
		});

		// Watch Focus color picker has changed.
		$('input[name="focus_picker"]', context).change(function () {
		const focusColorSetting = $(this).val();

		// Sync fields.
		$('input[name="focus_color"]', context).val(focusColorSetting);

		// Update.
		Drupal.behaviors.ginAccent.setCustomFocusColor(focusColorSetting);
		});

		// Watch Accent color setting has changed.
		$('input[name="focus_color"]', context).change(function () {
		const focusColorSetting = $(this).val();

		// Sync fields.
		$('input[name="focus_picker"]', context).val(focusColorSetting);

		// Update.
		Drupal.behaviors.ginAccent.setCustomFocusColor(focusColorSetting);
		});

src/GinAfterBuild.php

+1 −1

Original line number	Diff line number	Diff line
		@@ -25,7 +25,7 @@ class GinAfterBuild implements TrustedCallbackInterface {
		$settings = \Drupal::classResolver(GinSettings::class);

		// Check if this is overridden by the logged in user.
		if ($settings->overridden($element['#name'])) {
		if ($element && isset($element['#name']) && $settings->overridden($element['#name'])) {
		$userEditUrl = Url::fromRoute('entity.user.edit_form', ['user' => \Drupal::currentUser()->id()])->toString();

		$value = $settings->get($element['#name']);

src/GinSettings.php

+75 −17

Original line number	Diff line number	Diff line
		@@ -4,6 +4,7 @@ namespace Drupal\gin;

		use Drupal\Core\Config\ConfigFactoryInterface;
		use Drupal\Core\DependencyInjection\ContainerInjectionInterface;
		use Drupal\Core\Form\FormStateInterface;
		use Drupal\Core\Session\AccountInterface;
		use Drupal\user\UserDataInterface;
		use Symfony\Component\DependencyInjection\ContainerInterface;
		@@ -308,23 +309,41 @@ class GinSettings implements ContainerInjectionInterface {
		],
		];

		// Main Accent color setting.
		$form['accent_color'] = [
		'#type' => 'textfield',
		'#placeholder' => '#777777',
		// Accent color group.
		$form['accent_group'] = [
		'#type' => 'fieldset',
		'#title' => $this->t('Custom Accent color'),
		'#description' => $this->t('Use with caution, values should meet a11y criteria.'),
		'#default_value' => $account ? $this->get('accent_color', $account) : $this->getDefault('accent_color'),
		'#min' => '7',
		'#max' => '7',
		'#size' => '7',
		'#states' => [
		// Show if met.
		'visible' => [
		':input[name="preset_accent_color"]' => ['value' => 'custom'],
		],
		],
		];

		// Main Accent color setting.
		$form['accent_color'] = [
		'#type' => 'textfield',
		'#placeholder' => '#777777',
		'#maxlength' => 7,
		'#size' => 7,
		'#default_value' => $account ? $this->get('accent_color', $account) : $this->getDefault('accent_color'),
		'#after_build' => [],
		'#group' => 'accent_group',
		'#attributes' => [
		'pattern' => '^#[a-fA-F0-9]{6}',
		],
		];

		// Accent color picker (helper field).
		$form['accent_group']['accent_picker'] = [
		'#type' => 'color',
		'#placeholder' => '#777777',
		'#default_value' => $account ? $this->get('accent_color', $account) : $this->getDefault('accent_color'),
		'#process' => [
		[static::class, 'processColorPicker'],
		],
		];

		// Focus color setting.
		@@ -345,25 +364,44 @@ class GinSettings implements ContainerInjectionInterface {
		'#after_build' => [],
		];

		// Custom Focus color setting.
		$form['focus_color'] = [
		'#type' => 'textfield',
		'#placeholder' => '#777777',
		// Focus color group.
		$form['focus_group'] = [
		'#type' => 'fieldset',
		'#title' => $this->t('Custom Focus color (BETA)'),
		'#description' => $this->t('Use with caution, values should meet a11y criteria.'),
		'#default_value' => $account ? $this->get('focus_color', $account) : $this->getDefault('focus_color'),
		'#min' => '7',
		'#max' => '7',
		'#size' => '7',
		'#states' => [
		// Show if met.
		'visible' => [
		':input[name="preset_focus_color"]' => ['value' => 'custom'],
		],
		],
		];

		// Focus color picker (helper).
		$form['focus_group']['focus_picker'] = [
		'#type' => 'color',
		'#placeholder' => '#777777',
		'#default_value' => $account ? $this->get('focus_color', $account) : $this->getDefault('focus_color'),
		'#process' => [
		[static::class, 'processColorPicker'],
		],
		];

		// Custom Focus color setting.
		$form['focus_color'] = [
		'#type' => 'textfield',
		'#placeholder' => '#777777',
		'#maxlength' => 7,
		'#size' => 7,
		'#default_value' => $account ? $this->get('focus_color', $account) : $this->getDefault('focus_color'),
		'#after_build' => [],
		'#group' => 'focus_group',
		'#attributes' => [
		'pattern' => '^#[a-fA-F0-9]{6}',
		],
		];

		// High contrast mode.
		$form['high_contrast_mode'] = [
		'#type' => 'checkbox',
		'#title' => $this->t('Increase contrast (EXPERIMENTAL)'),
		@@ -372,6 +410,7 @@ class GinSettings implements ContainerInjectionInterface {
		'#after_build' => [],
		];

		// Toolbar setting.
		$form['classic_toolbar'] = [
		'#type' => 'radios',
		'#title' => $this->t('Drupal Toolbar'),
		@@ -398,4 +437,23 @@ class GinSettings implements ContainerInjectionInterface {
		return $form;
		}

		/**
		* Unset color picker fields.
		*
		* @param array $element
		* An associative array containing the properties and children of the
		* element.
		* @param \Drupal\Core\Form\FormStateInterface $form_state
		* The current state of the form.
		*
		* @return array
		* The form element.
		*/
		public static function processColorPicker(array $element, FormStateInterface $form_state) {
		$keys = $form_state->getCleanValueKeys();
		$form_state->setCleanValueKeys(array_merge((array) $keys, $element['#parents']));

		return $element;
		}

		}