Add new color picker to user settings page (#16625)

This commit is contained in:
Suzanne Aitchison 2022-02-18 08:43:56 +00:00 committed by GitHub
parent c14d09e3dc
commit 46404ed8c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 12 deletions

View file

@ -1,4 +1,4 @@
<%= javascript_packs_with_chunks_tag "colorPreview", "stickySaveFooter", "userProfileSettings", "validateFileInputs", defer: true %>
<%= javascript_packs_with_chunks_tag "colorPicker", "stickySaveFooter", "userProfileSettings", "validateFileInputs", defer: true %>
<%= render "users/additional_authentication" %>
@ -167,16 +167,14 @@
<%= f.public_send(:text_field, "users_setting[brand_color1]",
value: users_setting.public_send(:brand_color1),
placeholder: "#000000",
class: "crayons-textfield js-color-field") %>
<%= f.public_send(:color_field,
"users_setting[brand_color1]",
value: users_setting.public_send(:brand_color1),
class: "crayons-color-selector js-color-field ml-2") %>
class: "crayons-textfield",
data: { color_picker: "true", label_text: t("views.logo.color_1.label") }) %>
</div>
</div>
<div class="crayons-field ">
<label class="crayons-field__label" for="users_setting[brand_color1]">
<label class="crayons-field__label" for="users_setting[brand_color2]">
<%= t("views.logo.color_2.label") %>
</label>
<p class="crayons-field__description"><%= t("views.logo.color_2.description_html") %></p>
@ -184,11 +182,8 @@
<%= f.public_send(:text_field, "users_setting[brand_color2]",
value: users_setting.public_send(:brand_color2),
placeholder: "#000000",
class: "crayons-textfield js-color-field") %>
<%= f.public_send(:color_field,
"users_setting[brand_color2]",
value: users_setting.public_send(:brand_color2),
class: "crayons-color-selector js-color-field ml-2") %>
class: "crayons-textfield",
data: { color_picker: "true", label_text: t("views.logo.color_2.label") }) %>
</div>
</div>
</div>

View file

@ -0,0 +1,35 @@
describe('Update profile settings', () => {
beforeEach(() => {
cy.testSetup();
cy.fixture('users/adminUser.json').as('user');
cy.get('@user').then((user) => {
cy.loginAndVisit(user, '/settings');
});
});
it('updates brand colors', () => {
// Verify both a button and an input exist to update both colors
cy.findByRole('button', { name: 'Brand color 1' });
cy.findByRole('textbox', { name: 'Brand color 1' }).as('brandColor1');
cy.findByRole('button', { name: 'Brand color 2' });
cy.findByRole('textbox', { name: 'Brand color 2' }).as('brandColor2');
// Verify that changing the value saves properly
cy.get('@brandColor1').clear().type('ababab');
cy.get('@brandColor2').clear().type('d22a2a');
cy.findByRole('button', { name: 'Save Profile Information' }).click();
cy.findByText('Your profile has been updated');
cy.findByRole('textbox', { name: 'Brand color 1' }).should(
'have.value',
'#ababab',
);
cy.findByRole('textbox', { name: 'Brand color 2' }).should(
'have.value',
'#d22a2a',
);
});
});