skeleton of alignment

Author: RafaelGB

package.json

@@ -28,22 +28,22 @@
 		"@testing-library/react": "13.4.0",
 		"@types/jest": "28.1.8",
 		"@types/luxon": "3.0.1",
-		"@types/node": "18.7.16",
-		"@types/react": "18.0.19",
+		"@types/node": "18.7.18",
+		"@types/react": "18.0.20",
 		"@types/react-color": "3.0.6",
 		"@types/react-csv": "1.1.3",
 		"@types/react-datepicker": "4.4.2",
 		"@types/react-dom": "18.0.6",
 		"@types/react-window": "1.8.5",
 		"@typescript-eslint/eslint-plugin": "5.36.2",
 		"@typescript-eslint/parser": "5.36.2",
-		"eslint": "8.23.0",
+		"eslint": "8.23.1",
 		"jest": "28.1.3",
 		"jest-mock-extended": "2.0.7",
 		"obsidian": "0.15.9",
 		"rollup": "2.79.0",
 		"rollup-plugin-terser": "7.0.2",
-		"rollup-plugin-typescript2": "0.33.0",
+		"rollup-plugin-typescript2": "0.34.0",
 		"ts-jest": "28.0.8",
 		"tslib": "2.4.0",
 		"typescript": "4.8.3"

src/cdm/FolderModel.ts

@@ -39,6 +39,7 @@ export interface ConfigColumn {
     media_width: number;
     media_height: number;
     isInline: boolean;
+    content_alignment: string;
     task_hide_completed?: boolean;
     formula_query?: string;
     persist_formula?: boolean;

src/cdm/StyleModel.ts

@@ -1,9 +1,16 @@
 import { RowSelectOption } from "cdm/ComponentsModel";
 import { ColumnSettingsModal } from "components/modals/columnSettings/ColumnSettingsModal";
 
-export type ColorPickerProps = {
+type BaseStyleProps = {
     modal: ColumnSettingsModal;
+    columnKey: string;
+};
+
+export type ColorPickerProps = {
     options: RowSelectOption[];
     option: RowSelectOption;
-    columnKey: string;
-};
+} & BaseStyleProps;
+
+export type TextAlignmentProps = {
+
+} & BaseStyleProps;

src/components/modals/columnSettings/ColumnSections.ts

@@ -7,6 +7,7 @@ import { SelectedColumnOptionsHandler } from "components/modals/columnSettings/h
 import { HideCompletedTaskToggleHandler } from "components/modals/columnSettings/handlers/tasks/HideCompletedTaskToggleHandler";
 import { LinkAliasToggleHandler } from "components/modals/columnSettings/handlers/media/LinkAliasToggleHandler";
 import { FormulaInputHandler } from "components/modals/columnSettings/handlers/automations/FormulaInputHandler";
+import { AlignmentSelectorHandler } from "components/modals/columnSettings/handlers/AlignmentSelectorHandler";
 import { InputType } from "helpers/Constants";
 import { AbstractChain } from "patterns/AbstractFactoryChain";
 import { AbstractHandler } from "patterns/AbstractHandler";
@@ -25,6 +26,7 @@ class BehaviorSetttingsSection extends AbstractChain<ColumnSettingsHandlerRespon
     }
     protected getHandlers(): AbstractHandler<ColumnSettingsHandlerResponse>[] {
         const particularHandlers: AbstractHandler<ColumnSettingsHandlerResponse>[] = [];
+        particularHandlers.push(new AlignmentSelectorHandler());
         switch (this.input) {
             case InputType.TASK:
                 // do nothing
@@ -68,6 +70,7 @@ class ParticularSetttingsSection extends AbstractChain<ColumnSettingsHandlerResp
                 break;
             case InputType.TASK:
                 particularHandlers.push(new HideCompletedTaskToggleHandler());
+                break;
             case InputType.FORMULA:
                 particularHandlers.push(new FormulaInputHandler());
                 break;

src/components/modals/columnSettings/handlers/AlignmentSelectorHandler.tsx

@@ -0,0 +1,28 @@
+import { ColumnSettingsHandlerResponse } from "cdm/ModalsModel";
+import TextAlignmentSelector from "components/styles/TextAlignmentSelector";
+import { Setting } from "obsidian";
+import { AbstractHandlerClass } from "patterns/AbstractHandler";
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+export class AlignmentSelectorHandler extends AbstractHandlerClass<ColumnSettingsHandlerResponse> {
+  settingTitle: string = "Content alignment selector";
+  handle(
+    columnHandlerResponse: ColumnSettingsHandlerResponse
+  ): ColumnSettingsHandlerResponse {
+    const { column, containerEl, columnSettingsManager } =
+      columnHandlerResponse;
+
+    const alignmentSetting = new Setting(containerEl)
+      .setName(this.settingTitle)
+      .setDesc("Change content alignment of the column");
+
+    createRoot(alignmentSetting.controlEl.createDiv()).render(
+      <TextAlignmentSelector
+        modal={columnSettingsManager.modal}
+        columnKey={column.key}
+      />
+    );
+    return this.goNext(columnHandlerResponse);
+  }
+}

src/components/modals/columnSettings/handlers/SelectedColumnOptionsHandler.tsx

@@ -1,6 +1,6 @@
 import { ColumnSettingsHandlerResponse } from "cdm/ModalsModel";
 import { ColorPickerProps } from "cdm/StyleModel";
-import { ColorPicker } from "components/ColorPicker";
+import { ColorPicker } from "components/styles/ColorPicker";
 import { randomColor } from "helpers/Colors";
 import { ButtonComponent, Notice, Setting } from "obsidian";
 import { AbstractHandlerClass } from "patterns/AbstractHandler";

src/components/modals/columnSettings/handlers/media/LinkAliasToggleHandler.ts

@@ -6,7 +6,6 @@ export class LinkAliasToggleHandler extends AbstractHandlerClass<ColumnSettingsH
     handle(columnHandlerResponse: ColumnSettingsHandlerResponse): ColumnSettingsHandlerResponse {
         const { column, containerEl, columnSettingsManager } = columnHandlerResponse;
         const { view } = columnSettingsManager.modal;
-        const { config } = column
         // pass if modal opened from local settings
         const link_alias_togle_promise = async (value: boolean): Promise<void> => {
             column.config.link_alias_enabled = value;

src/components/ColorPicker.tsx src/components/styles/ColorPicker.tsxsrc/components/ColorPicker.tsx renamed to src/components/styles/ColorPicker.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import FormatAlignLeftIcon from "@mui/icons-material/FormatAlignLeft";
+import FormatAlignCenterIcon from "@mui/icons-material/FormatAlignCenter";
+import FormatAlignRightIcon from "@mui/icons-material/FormatAlignRight";
+import Stack from "@mui/material/Stack";
+import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
+import { TextAlignmentProps } from "cdm/StyleModel";
+import { COLUMN_ALIGNMENT_OPTIONS } from "helpers/Constants";
+
+export default function TextAlignmentSelector(props: TextAlignmentProps) {
+  const { modal, columnKey } = props;
+  const { view } = modal;
+  const [alignment, setAlignment] = React.useState("left");
+
+  const handleAlignment = async (
+    event: React.MouseEvent<HTMLElement>,
+    newAlignment: string | null
+  ) => {
+    if (newAlignment !== null) {
+      // Persist changes
+      await view.diskConfig.updateColumnConfig(columnKey, {
+        content_alignment: newAlignment,
+      });
+      modal.enableReset = true;
+      setAlignment(newAlignment);
+    }
+  };
+
+  return (
+    <Stack direction="row" spacing={4}>
+      <ToggleButtonGroup
+        value={alignment}
+        exclusive
+        onChange={handleAlignment}
+        aria-label="text alignment"
+      >
+        <ToggleButton
+          value={COLUMN_ALIGNMENT_OPTIONS.LEFT}
+          aria-label="left aligned"
+        >
+          <FormatAlignLeftIcon />
+        </ToggleButton>
+        <ToggleButton
+          value={COLUMN_ALIGNMENT_OPTIONS.CENTER}
+          aria-label="centered"
+        >
+          <FormatAlignCenterIcon />
+        </ToggleButton>
+        <ToggleButton
+          value={COLUMN_ALIGNMENT_OPTIONS.RIGHT}
+          aria-label="right aligned"
+        >
+          <FormatAlignRightIcon />
+        </ToggleButton>
+      </ToggleButtonGroup>
+    </Stack>
+  );
+}

src/components/styles/TextAlignmentSelector.tsx

@@ -71,6 +71,14 @@ export const MetadataLabels = Object.freeze({
   OUTLINKS: 'Outlinks',
   INLINKS: 'Inlinks',
 });
+/******************************************************************************
+ *                          COLUMN CONFIGURATIONS                             *
+ ******************************************************************************/
+export const COLUMN_ALIGNMENT_OPTIONS = Object.freeze({
+  LEFT: 'left',
+  CENTER: 'center',
+  RIGHT: 'right',
+});
 
 export const DEFAULT_COLUMN_CONFIG: ConfigColumn = Object.freeze({
   enable_media_view: true,
@@ -79,6 +87,7 @@ export const DEFAULT_COLUMN_CONFIG: ConfigColumn = Object.freeze({
   media_height: 100,
   isInline: false,
   task_hide_completed: true,
+  content_alignment: COLUMN_ALIGNMENT_OPTIONS.LEFT,
 });
 
 export const MetadataDatabaseColumns: MetadataColumnsModel = Object.freeze({