Added background styling to Table widget editors.

paperbits · Mar 9, 2024 · 60ecd17 · 60ecd17
1 parent a58dfcc
commit 60ecd17
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 6 deletions.
diff --git a/src/table-cell/ko/tableCellEditor.html b/src/table-cell/ko/tableCellEditor.html
@@ -1,8 +1,15 @@
 <alignment-editor params="{ container: container, onUpdate: onContainerUpdate }"></alignment-editor>
 
+<details open>
+    <summary>
+        Background
+    </summary>
+    <background params="{ background: $component.background, onUpdate: onBackgroundUpdate }"></background>
+</details>
+
 <details open>
     <summary>
         Box
     </summary>
     <box params="{ features: 'border,padding', box: box, onUpdate: onBoxUpdate }"></box>
-</details>
+</details>
diff --git a/src/table-cell/ko/tableCellEditor.ts b/src/table-cell/ko/tableCellEditor.ts
@@ -2,7 +2,7 @@ import * as ko from "knockout";
 import template from "./tableCellEditor.html";
 import { Component, OnMounted, Param, Event } from "@paperbits/common/ko/decorators";
 import { TableCellModel } from "../tableCellModel";
-import { ContainerStylePluginConfig, BoxStylePluginConfig, BorderStylePluginConfig } from "@paperbits/styles/plugins";
+import { ContainerStylePluginConfig, BoxStylePluginConfig, BorderStylePluginConfig, BackgroundStylePluginConfig } from "@paperbits/styles/plugins";
 import { StyleHelper } from "@paperbits/styles";
 import { TableCellStylePluginConfig } from "@paperbits/styles/plugins/table/tableCellStylePluginConfig";
 import { PaddingStylePluginConfig } from "@paperbits/styles/plugins/padding";
@@ -15,10 +15,12 @@ import { PaddingStylePluginConfig } from "@paperbits/styles/plugins/padding";
 export class TableCellEditor {
     public readonly container: ko.Observable<ContainerStylePluginConfig>;
     public readonly box: ko.Observable<BoxStylePluginConfig>;
+    public readonly background: ko.Observable<BackgroundStylePluginConfig>;
 
     constructor() {
         this.container = ko.observable<ContainerStylePluginConfig>();
         this.box = ko.observable<BoxStylePluginConfig>();
+        this.background = ko.observable<BackgroundStylePluginConfig>();
     }
 
     @Param()
@@ -56,6 +58,9 @@ export class TableCellEditor {
             .getConfig<BorderStylePluginConfig>();
 
         this.box({ padding: paddingConfig, border: borderConfig });
+
+        const backgroundStyles = <BackgroundStylePluginConfig>StyleHelper.getPluginConfigForLocalStyles(this.model.styles, "background");
+        this.background(backgroundStyles);
     }
 
     public onContainerUpdate(containerConfig: ContainerStylePluginConfig): void {
@@ -80,4 +85,9 @@ export class TableCellEditor {
 
         this.onChange(this.model);
     }
+
+    public onBackgroundUpdate(backgroundStyles: BackgroundStylePluginConfig): void {
+        StyleHelper.setPluginConfigForLocalStyles(this.model.styles, "background", backgroundStyles);
+        this.onChange(this.model);
+    }
 }
diff --git a/src/table/ko/tableColumnEditor.html b/src/table/ko/tableColumnEditor.html
@@ -7,9 +7,17 @@
             data-bind="textInput: width" />
     </div>
 </div>
+
 <details open>
     <summary>
-        Container box
+        Background (applied once)
+    </summary>
+    <background params="{ background: $component.background, onUpdate: onBackgroundUpdate }"></background>
+</details>
+
+<details open>
+    <summary>
+        Container box  (applied once)
     </summary>
     <box params="{ features: 'border,padding', onUpdate: onBoxUpdate }"></box>
 </details>
diff --git a/src/table/ko/tableColumnEditor.ts b/src/table/ko/tableColumnEditor.ts
@@ -6,7 +6,7 @@ import { SizeUnits, Size } from "@paperbits/styles/size";
 import { Component, OnMounted, Param, Event } from "@paperbits/common/ko/decorators";
 import { TableModel } from "../tableModel";
 import { ChangeRateLimit } from "@paperbits/common/ko/consts";
-import { BoxStylePluginConfig } from "@paperbits/styles/plugins";
+import { BackgroundStylePluginConfig, BoxStylePluginConfig } from "@paperbits/styles/plugins";
 import { StylePluginConfig } from "@paperbits/common/styles";
 
 
@@ -69,6 +69,11 @@ export class TableColumnEditor {
         this.onChange(this.model);
     }
 
+    public onBackgroundUpdate(backgroundStyles: BackgroundStylePluginConfig): void {
+        this.applyColumnStyles("background", backgroundStyles);
+        this.onChange(this.model);
+    }
+
     private applyChanges(): void {
         if (!this.columnIndex) {
             this.columnIndex = 0;

diff --git a/src/table/ko/tableRowEditor.html b/src/table/ko/tableRowEditor.html
@@ -7,9 +7,17 @@
             data-bind="textInput: height" />
     </div>
 </div>
+
 <details open>
     <summary>
-        Container box
+        Background (applied once)
+    </summary>
+    <background params="{ background: $component.background, onUpdate: onBackgroundUpdate }"></background>
+</details>
+
+<details open>
+    <summary>
+        Container box (applied once)
     </summary>
     <box params="{ features: 'border,padding', onUpdate: onBoxUpdate }"></box>
 </details>
diff --git a/src/table/ko/tableRowEditor.ts b/src/table/ko/tableRowEditor.ts
@@ -7,7 +7,7 @@ import { Component, OnMounted, Param, Event } from "@paperbits/common/ko/decorat
 import { TableModel } from "../tableModel";
 import { ChangeRateLimit } from "@paperbits/common/ko/consts";
 import { StylePluginConfig } from "@paperbits/common/styles";
-import { BoxStylePluginConfig } from "@paperbits/styles/plugins";
+import { BackgroundStylePluginConfig, BoxStylePluginConfig } from "@paperbits/styles/plugins";
 
 
 @Component({
@@ -70,6 +70,10 @@ export class TableRowEditor {
         this.onChange(this.model);
     }
 
+    public onBackgroundUpdate(backgroundStyles: BackgroundStylePluginConfig): void {
+        this.applyRowStyles("background", backgroundStyles);
+        this.onChange(this.model);
+    }
 
     private applyChanges(): void {
         if (!this.rowIndex) {