Extended Card editor with "box" local styling.

Author: azaslonov

src/button/ko/buttonEditor.ts

@@ -119,8 +119,10 @@ export class ButtonEditor {
     }
 
     public onBoxUpdate(pluginConfig: BoxStylePluginConfig): void {
-        this.boxConfig(pluginConfig);
-        this.applyChanges();
+        StyleHelper.setPluginConfigForLocalStyles(this.model.styles, "margin", pluginConfig.margin);
+        StyleHelper.setPluginConfigForLocalStyles(this.model.styles, "padding", pluginConfig.padding);
+        StyleHelper.setPluginConfigForLocalStyles(this.model.styles, "border", pluginConfig.border);
+        this.onChange(this.model);
     }
 
     public onSizeChange(sizeConfig: SizeStylePluginConfig): void {

src/card/ko/cardEditor.html

@@ -10,7 +10,7 @@
 
 <details open>
     <summary>
-        Styling
+        Base styling
     </summary>
     <div class="form-group">
         <label for="appearanceStyle" class="form-label">
@@ -22,4 +22,20 @@
             params="{ options: appearanceStyles, value: appearanceStyle, optionsText: 'displayName', optionsValue: 'key', heading: 'Appearance' }">
         </dropdown>
     </div>
+</details>
+
+<details open>
+    <summary>
+        Size
+    </summary>
+    <size-editor
+        params="{ features: 'height,width', allowUnits: 'px,%', sizeConfig: sizeConfig, onUpdate: onSizeChange }">
+    </size-editor>
+</details>
+
+<details open>
+    <summary>
+        Box
+    </summary>
+    <box params="{ features: 'margin,padding,border', box: boxConfig, onUpdate: onBoxUpdate }"></box>
 </details>

src/card/ko/cardEditor.ts

@@ -4,7 +4,7 @@ import template from "./cardEditor.html";
 import { ViewManager } from "@paperbits/common/ui";
 import { WidgetEditor } from "@paperbits/common/widgets";
 import { StyleService, StyleHelper } from "@paperbits/styles";
-import { ContainerStylePluginConfig } from "@paperbits/styles/plugins";
+import { BoxStylePluginConfig, ContainerStylePluginConfig, MarginStylePluginConfig, SizeStylePluginConfig } from "@paperbits/styles/plugins";
 import { Component, OnMounted, Param, Event } from "@paperbits/common/ko/decorators";
 import { CardModel } from "../cardModel";
 import { BackgroundStylePluginConfig, TypographyStylePluginConfig } from "@paperbits/styles/plugins";
@@ -22,6 +22,8 @@ export class CardEditor implements WidgetEditor<CardModel> {
     public readonly appearanceStyles: ko.ObservableArray<any>;
     public readonly appearanceStyle: ko.Observable<any>;
     public readonly containerConfig: ko.Observable<ContainerStylePluginConfig>;
+    public readonly boxConfig: ko.Observable<BoxStylePluginConfig>;
+    public readonly sizeConfig: ko.Observable<SizeStylePluginConfig>;
 
     constructor(
         private readonly viewManager: ViewManager,
@@ -32,6 +34,8 @@ export class CardEditor implements WidgetEditor<CardModel> {
         this.appearanceStyle = ko.observable<any>();
         this.containerConfig = ko.observable<ContainerStylePluginConfig>();
         this.background = ko.observable<BackgroundStylePluginConfig>();
+        this.boxConfig = ko.observable<BoxStylePluginConfig>();
+        this.sizeConfig = ko.observable<SizeStylePluginConfig>();
     }
 
     @Param()
@@ -53,14 +57,22 @@ export class CardEditor implements WidgetEditor<CardModel> {
 
     private updateObservables(): void {
         const viewport = this.viewManager.getViewport();
+        const localStyles = this.model.styles;
 
-        const containerStyleConfig = StyleHelper.getPluginConfigForLocalStyles(this.model.styles, "container", viewport);
+        const containerStyleConfig = StyleHelper.getPluginConfigForLocalStyles(localStyles, "container", viewport);
         this.containerConfig(containerStyleConfig);
 
-        const backgroundStyleConfig = StyleHelper.getPluginConfigForLocalStyles(this.model.styles, "background", viewport);
+        const backgroundStyleConfig = StyleHelper.getPluginConfigForLocalStyles(localStyles, "background", viewport);
         this.background(backgroundStyleConfig);
 
-        this.appearanceStyle(this.model.styles.appearance);
+        const marginConfig = <MarginStylePluginConfig>StyleHelper.getPluginConfigForLocalStyles(localStyles, "margin");
+        const paddingConfig = <MarginStylePluginConfig>StyleHelper.getPluginConfigForLocalStyles(localStyles, "padding");
+        this.boxConfig({ margin: marginConfig, padding: paddingConfig });
+
+        const sizeConfig = <SizeStylePluginConfig>StyleHelper.getPluginConfigForLocalStyles(localStyles, "size");
+        this.sizeConfig(sizeConfig);
+
+        this.appearanceStyle(localStyles.appearance);
     }
 
     public onContainerChange(pluginConfig: ContainerStylePluginConfig): void {
@@ -78,7 +90,18 @@ export class CardEditor implements WidgetEditor<CardModel> {
     public onAppearanceChange(): void {
         const styleKey = this.appearanceStyle();
         Objects.setValue("styles/appearance", this.model, styleKey);
+        this.onChange(this.model);
+    }
+
+    public onBoxUpdate(pluginConfig: BoxStylePluginConfig): void {
+        StyleHelper.setPluginConfigForLocalStyles(this.model.styles, "margin", pluginConfig.margin);
+        StyleHelper.setPluginConfigForLocalStyles(this.model.styles, "padding", pluginConfig.padding);
+        StyleHelper.setPluginConfigForLocalStyles(this.model.styles, "border", pluginConfig.border);
+        this.onChange(this.model);
+    }
 
+    public onSizeChange(sizeConfig: SizeStylePluginConfig): void {
+        StyleHelper.setPluginConfigForLocalStyles(this.model.styles, "size", sizeConfig);
         this.onChange(this.model);
     }
 }