Form Submit Button Styling

Bakgrunn

Form submit button styling i Application-Frontend og Creative-Engine har blitt oppdatert for å bruke en konsistent tilnærming med background/backgroundSettings istedenfor direkte bruk av backgroundColor. Dette støtter nå alle bakgrunnstyper: solid farge, gradient og bakgrunnsbilder.

Tidligere problemer

Form submit button styling i Application-Frontend og Creative-Engine kunne føre til runtime-feil og udefinerte egenskaper når:

1. Props-strukturen i FormConfiguration.vue ikke samsvarer med det styling-seksjonkomponentene forventer
2. Verdier hardkodes i FormConfiguration.vue istedenfor å defineres i defaults.ts
3. Creative-Engine bruker ikke-reaktive data fra DataStore.creativeSettings.creativeBlocks

Løsning

1. Korrekt props-struktur for styling-komponenter

Hver styling-komponent forventer en spesifikk props-struktur:

// BackgroundStyleSection
:background-settings="{
  mode: 'color',  // 'none', 'color', 'gradient', 'image'
  color: '#007bff',
  colors: ['#007bff', '#0056b3']
}"

// FontColorSection
:font-style="{
  color: '#ffffff'
}"

// FontSizeSection
:font-style="{
  fontSize: '14px'
}"
@update:value="(value) => updateValue(value + 'px', 'submitButtonFontSize')"

// FontWeightSection
:font-style="{
  fontWeight: 'bold'
}"

// AlignmentSection
:selected-alignment="'center'"

// BoxShadowSection
:checked="false"
:shadow-settings="{
  x: '0px',
  y: '2px',
  blur: '4px',
  spread: '0px',
  color: 'rgba(0, 0, 0, 0.2)',
  inset: false
}"

2. Bruk defaults.ts for konsistente standardverdier

Definer alle submit button styling-verdier i defaults.ts med den nye strukturen:

// I defaults.ts
formProperties: {
  // ...
  submitButtonStyles: {
    background: true,
    backgroundSettings: {
      mode: 'color',
      color: '#007bff',
      colors: ['#007bff', '#0056b3']
    },
  submitButtonTextColor: '#ffffff',
  submitButtonBorderRadius: '4px',
  submitButtonPadding: '8px 16px',
  submitButtonFontSize: '14px',
  submitButtonFontWeight: 'bold',
  submitButtonBorder: 'none',
  submitButtonBorderWidth: '1px',
  submitButtonBorderStyle: 'solid',
  submitButtonBorderColor: '#007bff',
  submitButtonMarginTop: '10px',
  submitButtonAlignment: 'center',
  submitButtonBoxShadow: false,
  submitButtonBoxShadowSettings: {
    x: '0px',
    y: '2px',
    blur: '4px',
    spread: '0px',
    color: 'rgba(0, 0, 0, 0.2)',
    inset: false
  }
}

3. Bakgrunnsbilder for submit-knappen

For å støtte bakgrunnsbilder i submit-knappen, må følgende egenskaper være tilgjengelige:

submitButtonStyles: {
  background: true,
  backgroundSettings: {
    mode: 'image',
    url: 'https://example.com/image.jpg',
    size: 'cover' // optional, defaults to 'cover'
  },
  horizontalAlignment: 'center', // optional, defaults to 'center'
  verticalAlignment: 'center'    // optional, defaults to 'center'
}

I Creative-Engine må horizontalAlignment og verticalAlignment sendes med til getBackgroundProperties for å posisjonere bakgrunnsbildet korrekt.

4. CSS-egenskaper i getBackgroundProperties

I Creative-Engine bruker getBackgroundProperties funksjonen konsekvent CSS-egenskaper for alle bakgrunnstyper:

// For 'none' modus
return {} // Ingen bakgrunn

// For 'color' modus
return {
  background: color, // Bruker 'background' i stedet for 'backgroundColor'
}

// For 'gradient' modus
return {
  backgroundImage: `linear-gradient(to bottom, ${colors[0]}, ${colors[1]})`,
}

// For 'image' modus
return {
  backgroundImage: `url(${url})`,
  backgroundSize: size || 'cover',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: [horizontalAlignment, verticalAlignment].join(' '),
}

5. Reaktivitet mellom Application-Frontend og Creative-Engine

Creative-Engine's formStore bruker DataStore.creativeSettings.creativeBlocks som ikke er reaktiv til endringer i Application-Frontend's Vuex store. For å løse dette:

1. Implementer en reaktiv binding mellom DataStore og Vue-komponenter
2. Bruk en watch eller computed property for å oppdatere UI når dataene endres
3. Alternativt, implementer en eksplisitt synkroniseringsmekanisme mellom systemene

CSS-egenskaper i getBackgroundProperties

Bakgrunnsmoduser

Det finnes fire bakgrunnsmoduser som håndteres i systemet:

1. none - Ingen bakgrunn (transparent)
2. color - Fast bakgrunnsfarge
3. gradient - Gradient bakgrunn
4. image - Bakgrunnsbilde

Når bakgrunnsmodusen er satt til 'none', vil knappen ha transparent bakgrunn. Dette oppnås ved at:

1. background egenskapen settes til false i FormSubmitButtonStyleSection.vue
2. backgroundSettings.mode settes til 'none' i FormConfiguration.vue
3. Eksplisitt backgroundColor: 'transparent' settes i CreativeFormBlock.vue når background er false eller mode er 'none'

Dette sikrer at knappen ikke har noen bakgrunnsfarge når bakgrunnsmodusen er 'none'.

Håndtering av nettleserens standard 'buttonface' bakgrunnsfarge

Nettlesere setter en standard bakgrunnsfarge (ofte kalt 'buttonface') på knapper. For å sikre at knappen virkelig får transparent bakgrunn når bakgrunnsmodusen er 'none', må vi eksplisitt overstyre denne standardverdien i CSS:

// I CreativeFormBlock.vue
[this.toClassSelector(submitButton)]: {
  // Eksplisitt sette transparent bakgrunn når background er false eller mode er 'none'
  ...(formProps.submitButtonStyles?.background === false || 
     (formProps.submitButtonStyles?.backgroundSettings?.mode === 'none')
    ? { backgroundColor: 'transparent' }
    : formProps.submitButtonStyles?.background &&
      formProps.submitButtonStyles?.backgroundSettings
      ? getBackgroundProperties({
          background: formProps.submitButtonStyles.background,
          backgroundSettings: formProps.submitButtonStyles.backgroundSettings,
          // ... andre egenskaper
        })
      : {}),
  // ... andre stiler
}

Denne tilnærmingen sikrer at knappen får transparent bakgrunn selv om nettleseren prøver å sette en standard bakgrunnsfarge.

I Creative-Engine bruker getBackgroundProperties funksjonen forskjellige CSS-egenskaper avhengig av bakgrunnstypen:

// For 'none' modus
return {} // Ingen bakgrunn

// For 'color' modus
return {
  backgroundColor: color, // Bruker 'backgroundColor' for farger
}

// For 'gradient' modus
return {
  backgroundImage: `linear-gradient(to bottom, ${colors[0]}, ${colors[1]})`,
}

// For 'image' modus
return {
  backgroundImage: `url(${url})`,
  backgroundSize: size || 'cover',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: [horizontalAlignment, verticalAlignment].join(' '),
}

Merk at for fargemodus brukes backgroundColor i stedet for background. Dette er viktig å huske når man jobber med styling i Application-Frontend.

Vanlige feil

1. Manglende standardverdier: Alltid bruk defaults.ts for standardverdier og inkluder fallback-verdier i komponentene
2. Feil props-struktur: Sjekk komponentens forventede props-struktur før bruk
3. Manglende postfix: Husk å legge til 'px' for numeriske verdier som forventer CSS-enheter
4. Manglende reaktivitet: Sjekk at endringer i Application-Frontend reflekteres i Creative-Engine
5. Manglende alignment-egenskaper: For bakgrunnsbilder må horizontalAlignment og verticalAlignment være definert
6. Feil CSS-egenskaper: Vær oppmerksom på at getBackgroundProperties bruker backgroundColor for farger, ikke background

Testing

For å teste at submit button styling fungerer korrekt:

1. Sjekk at alle styling-alternativer i FormConfiguration.vue fungerer uten feil
2. Verifiser at endringer i styling reflekteres umiddelbart i forhåndsvisningen
3. Test alle bakgrunnstyper (none, color, gradient, image)
4. Bekreft at Creative-Engine rendrer submit button med korrekt styling