diff options
| -rw-r--r-- | apps/theming/src/components/BackgroundSettings.vue | 37 | ||||
| -rw-r--r-- | cypress/e2e/theming/themingUtils.ts | 12 | ||||
| -rw-r--r-- | cypress/e2e/theming/user-background.cy.ts | 6 |
3 files changed, 31 insertions, 24 deletions
diff --git a/apps/theming/src/components/BackgroundSettings.vue b/apps/theming/src/components/BackgroundSettings.vue index 0a8c49be45e..deb0a93a51a 100644 --- a/apps/theming/src/components/BackgroundSettings.vue +++ b/apps/theming/src/components/BackgroundSettings.vue @@ -58,16 +58,15 @@ </button> <!-- Custom color picker --> - <NcColorPicker v-model="Theming.color" @input="debouncePickColor"> - <button class="background background__color" - :data-color="Theming.color" - :data-color-bright="invertTextColor(Theming.color)" - :style="{ backgroundColor: Theming.color, '--border-color': Theming.color}" - data-user-theming-background-color - tabindex="0"> - {{ t('theming', 'Change color') }} - </button> - </NcColorPicker> + <div class="background-color" + data-user-theming-background-color> + <NcColorPicker v-model="Theming.color" + @input="debouncePickColor"> + <NcButton type="ternary"> + {{ t('theming', 'Change color') }} + </NcButton> + </NcColorPicker> + </div> <!-- Remove background --> <button :aria-pressed="isBackgroundDisabled" @@ -113,6 +112,7 @@ import { Palette } from 'node-vibrant/lib/color.js' import axios from '@nextcloud/axios' import debounce from 'debounce' import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js' +import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import Vibrant from 'node-vibrant' import Check from 'vue-material-design-icons/Check.vue' @@ -133,6 +133,7 @@ export default { Check, Close, ImageEdit, + NcButton, NcColorPicker, }, @@ -341,6 +342,17 @@ export default { flex-wrap: wrap; justify-content: center; + .background-color { + display: flex; + justify-content: center; + align-items: center; + width: 176px; + height: 96px; + margin: 8px; + border-radius: var(--border-radius-large); + background-color: var(--color-primary); + } + .background { overflow: hidden; width: 176px; @@ -368,11 +380,6 @@ export default { border-color: var(--color-border); } - &__color { - color: var(--color-primary-text); - background-color: var(--color-primary-default); - } - // Over a background image &__default, &__shipped { diff --git a/cypress/e2e/theming/themingUtils.ts b/cypress/e2e/theming/themingUtils.ts index 532cee46911..1cbab439012 100644 --- a/cypress/e2e/theming/themingUtils.ts +++ b/cypress/e2e/theming/themingUtils.ts @@ -54,13 +54,13 @@ export const validateBodyThemingCss = function(expectedColor = defaultPrimary, e */ export const validateUserThemingDefaultCss = function(expectedColor = defaultPrimary, expectedBackground: string|null = defaultBackground) { const defaultSelectButton = Cypress.$('[data-user-theming-background-default]') - const customColorSelectButton = Cypress.$('[data-user-theming-background-color]') - if (defaultSelectButton.length === 0 || customColorSelectButton.length === 0) { + const customColor = Cypress.$('[data-user-theming-background-color]') + if (defaultSelectButton.length === 0 || customColor.length === 0) { return false } const defaultOptionBackground = defaultSelectButton.css('background-image') - const colorPickerOptionColor = customColorSelectButton.css('background-color') + const colorPickerOptionColor = customColor.css('background-color') const isValidBackgroundImage = !expectedBackground ? defaultOptionBackground === 'none' @@ -71,15 +71,15 @@ export const validateUserThemingDefaultCss = function(expectedColor = defaultPri return isValidBackgroundImage && colord(colorPickerOptionColor).isEqual(expectedColor) } -export const pickRandomColor = function(pickerSelector: string): Cypress.Chainable<string> { +export const pickRandomColor = function(): Cypress.Chainable<string> { // Pick one of the first 8 options const randColour = Math.floor(Math.random() * 8) // Open picker - cy.get(pickerSelector).click() + cy.get('button').contains('Change color').click() // Return selected colour - return cy.get(pickerSelector).get('.color-picker__simple-color-circle').eq(randColour).then(($el) => { + return cy.get('.color-picker__simple-color-circle').eq(randColour).then(($el) => { $el.trigger('click') return $el.css('background-color') }) diff --git a/cypress/e2e/theming/user-background.cy.ts b/cypress/e2e/theming/user-background.cy.ts index 7597047895e..ce8a50821ef 100644 --- a/cypress/e2e/theming/user-background.cy.ts +++ b/cypress/e2e/theming/user-background.cy.ts @@ -129,7 +129,7 @@ describe('User select a custom color', function() { it('Select a custom color', function() { cy.intercept('*/apps/theming/background/color').as('setColor') - pickRandomColor('[data-user-theming-background-color]') + pickRandomColor() // Validate custom colour change cy.wait('@setColor') @@ -168,7 +168,7 @@ describe('User select a bright custom color and remove background', function() { cy.intercept('*/apps/theming/background/color').as('setColor') // Pick one of the bright color preset - cy.get('[data-user-theming-background-color]').click() + cy.get('button').contains('Change color').click() cy.get('.color-picker__simple-color-circle:eq(4)').click() // Validate custom colour change @@ -286,7 +286,7 @@ describe('User changes settings and reload the page', function() { it('Select a custom color', function() { cy.intercept('*/apps/theming/background/color').as('setColor') - cy.get('[data-user-theming-background-color]').click() + cy.get('button').contains('Change color').click() cy.get('.color-picker__simple-color-circle:eq(5)').click() // Validate clear background |