Skip to content
This repository was archived by the owner on Jul 28, 2025. It is now read-only.

Commit 1b1b5d7

Browse files
RafaelGBRafaelGB
committed
Merge branch '292-allow-control-over-justification-of-cell-content'
2 parents 719f497 + fe8a348 commit 1b1b5d7

File tree

17 files changed

+188
-22
lines changed

17 files changed

+188
-22
lines changed

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,22 @@
2828
"@testing-library/react": "13.4.0",
2929
"@types/jest": "28.1.8",
3030
"@types/luxon": "3.0.1",
31-
"@types/node": "18.7.16",
32-
"@types/react": "18.0.19",
31+
"@types/node": "18.7.18",
32+
"@types/react": "18.0.20",
3333
"@types/react-color": "3.0.6",
3434
"@types/react-csv": "1.1.3",
3535
"@types/react-datepicker": "4.4.2",
3636
"@types/react-dom": "18.0.6",
3737
"@types/react-window": "1.8.5",
3838
"@typescript-eslint/eslint-plugin": "5.36.2",
3939
"@typescript-eslint/parser": "5.36.2",
40-
"eslint": "8.23.0",
40+
"eslint": "8.23.1",
4141
"jest": "28.1.3",
4242
"jest-mock-extended": "2.0.7",
4343
"obsidian": "0.15.9",
4444
"rollup": "2.79.0",
4545
"rollup-plugin-terser": "7.0.2",
46-
"rollup-plugin-typescript2": "0.33.0",
46+
"rollup-plugin-typescript2": "0.34.0",
4747
"ts-jest": "28.0.8",
4848
"tslib": "2.4.0",
4949
"typescript": "4.8.3"

‎src/cdm/FolderModel.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ export interface ConfigColumn {
3939
media_width: number;
4040
media_height: number;
4141
isInline: boolean;
42+
content_alignment: string;
4243
task_hide_completed?: boolean;
4344
formula_query?: string;
4445
persist_formula?: boolean;

‎src/cdm/StyleModel.ts‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
import { RowSelectOption } from "cdm/ComponentsModel";
22
import { ColumnSettingsModal } from "components/modals/columnSettings/ColumnSettingsModal";
33

4-
export type ColorPickerProps = {
4+
type BaseStyleProps = {
55
modal: ColumnSettingsModal;
6+
columnKey: string;
7+
};
8+
9+
export type ColorPickerProps = {
610
options: RowSelectOption[];
711
option: RowSelectOption;
8-
columnKey: string;
9-
};
12+
} & BaseStyleProps;
13+
14+
export type TextAlignmentProps = {
15+
currentAlignment: string;
16+
} & BaseStyleProps;

‎src/components/cellTypes/FormulaCell.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const FormulaCell = (mdProps: CellComponentProps) => {
4646
return (
4747
<span
4848
ref={formulaRef}
49-
className={`${c("md_cell")}`}
49+
className={`${c("md_cell " + tableColumn.config.content_alignment)}`}
5050
key={`formula_${cell.id}`}
5151
/>
5252
);

‎src/components/cellTypes/NumberCell.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { CellComponentProps } from "cdm/ComponentsModel";
22
import { TableColumn } from "cdm/FolderModel";
3+
import { c } from "helpers/StylesHelper";
34
import React, {
45
ChangeEventHandler,
56
KeyboardEventHandler,
@@ -15,7 +16,7 @@ const NumberCell = (props: CellComponentProps) => {
1516
const dataActions = tableState.data((state) => state.actions);
1617
const numberRow = tableState.data((state) => state.rows[row.index]);
1718
const configInfo = tableState.configState((state) => state.info);
18-
19+
const tableColumn = column.columnDef as TableColumn;
1920
const [editableValue, setEditableValue] = useState(null);
2021
const [dirtyCell, setDirtyCell] = useState(false);
2122

@@ -34,7 +35,7 @@ const NumberCell = (props: CellComponentProps) => {
3435
function persistChange(changedValue: number) {
3536
dataActions.updateCell(
3637
row.index,
37-
column.columnDef as TableColumn,
38+
tableColumn,
3839
changedValue,
3940
columnsInfo.getAllColumns(),
4041
configInfo.getLocalSettings()
@@ -60,11 +61,11 @@ const NumberCell = (props: CellComponentProps) => {
6061
onChange={handleOnChange}
6162
onKeyDown={handleKeyDown}
6263
onBlur={handleOnBlur}
63-
className="text-align-right"
64+
className={c(tableColumn.config.content_alignment)}
6465
/>
6566
) : (
6667
<span
67-
className="text-align-right"
68+
className={c(tableColumn.config.content_alignment)}
6869
onClick={handleEditableOnclick}
6970
style={{ width: column.getSize() }}
7071
>

‎src/components/cellTypes/TextCell.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@ import React, { MouseEventHandler, useEffect, useRef } from "react";
44
import { useState } from "react";
55
import EditorCell from "components/cellTypes/EditorCell";
66
import { TableColumn } from "cdm/FolderModel";
7+
import { c } from "helpers/StylesHelper";
78

89
const TextCell = (props: CellComponentProps) => {
910
const { defaultCell } = props;
1011
const { cell, column, table, row } = defaultCell;
1112
const { tableState } = table.options.meta;
12-
13+
const tableColumn = column.columnDef as TableColumn;
1314
const textRow = tableState.data((state) => state.rows[row.index]);
1415

1516
const configInfo = table.options.meta.tableState.configState(
@@ -52,7 +53,7 @@ const TextCell = (props: CellComponentProps) => {
5253
if (changedValue !== undefined && changedValue !== textCell) {
5354
dataActions.updateCell(
5455
row.index,
55-
column.columnDef as TableColumn,
56+
tableColumn,
5657
changedValue.trim(),
5758
columnsInfo.getAllColumns(),
5859
configInfo.getLocalSettings()
@@ -72,6 +73,7 @@ const TextCell = (props: CellComponentProps) => {
7273
ref={containerCellRef}
7374
onClick={handleEditableOnclick}
7475
style={{ width: column.getSize() }}
76+
className={c(tableColumn.config.content_alignment)}
7577
/>
7678
);
7779
};

‎src/components/modals/columnSettings/ColumnSections.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,39 @@ import { SelectedColumnOptionsHandler } from "components/modals/columnSettings/h
77
import { HideCompletedTaskToggleHandler } from "components/modals/columnSettings/handlers/tasks/HideCompletedTaskToggleHandler";
88
import { LinkAliasToggleHandler } from "components/modals/columnSettings/handlers/media/LinkAliasToggleHandler";
99
import { FormulaInputHandler } from "components/modals/columnSettings/handlers/automations/FormulaInputHandler";
10+
import { AlignmentSelectorHandler } from "components/modals/columnSettings/handlers/AlignmentSelectorHandler";
1011
import { InputType } from "helpers/Constants";
1112
import { AbstractChain } from "patterns/AbstractFactoryChain";
1213
import { AbstractHandler } from "patterns/AbstractHandler";
1314

15+
class StyleSetttingsSection extends AbstractChain<ColumnSettingsHandlerResponse> {
16+
private input: string = InputType.TEXT;
17+
protected runBefore(columnHandlerResponse: ColumnSettingsHandlerResponse): ColumnSettingsHandlerResponse {
18+
this.input = columnHandlerResponse.column.input;
19+
return columnHandlerResponse;
20+
}
21+
protected customHandle(columnHandlerResponse: ColumnSettingsHandlerResponse): ColumnSettingsHandlerResponse {
22+
const style_section = columnHandlerResponse.containerEl.createDiv("column-section-container-style");
23+
add_setting_header(style_section, "Style", "h3");
24+
columnHandlerResponse.containerEl = style_section;
25+
return columnHandlerResponse;
26+
}
27+
protected getHandlers(): AbstractHandler<ColumnSettingsHandlerResponse>[] {
28+
const particularHandlers: AbstractHandler<ColumnSettingsHandlerResponse>[] = [];
29+
switch (this.input) {
30+
case InputType.TEXT:
31+
case InputType.NUMBER:
32+
case InputType.FORMULA:
33+
particularHandlers.push(new AlignmentSelectorHandler());
34+
break;
35+
default:
36+
// do nothing
37+
}
38+
return particularHandlers;
39+
}
40+
}
41+
export const style_settings_section = new StyleSetttingsSection();
42+
1443
class BehaviorSetttingsSection extends AbstractChain<ColumnSettingsHandlerResponse> {
1544
private input: string = InputType.TEXT;
1645
protected runBefore(columnHandlerResponse: ColumnSettingsHandlerResponse): ColumnSettingsHandlerResponse {
@@ -68,6 +97,7 @@ class ParticularSetttingsSection extends AbstractChain<ColumnSettingsHandlerResp
6897
break;
6998
case InputType.TASK:
7099
particularHandlers.push(new HideCompletedTaskToggleHandler());
100+
break;
71101
case InputType.FORMULA:
72102
particularHandlers.push(new FormulaInputHandler());
73103
break;

‎src/components/modals/columnSettings/ColumnSettingsModal.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Modal } from "obsidian";
44
import { add_setting_header } from "settings/SettingsComponents";
55
import { StyleClasses } from "helpers/Constants";
66
import { ColumnSettingsHandlerResponse, ColumnSettingsModalProps } from "cdm/ModalsModel";
7-
import { particular_settings_section, behavior_settings_section } from "components/modals/columnSettings/ColumnSections";
7+
import { particular_settings_section, behavior_settings_section, style_settings_section } from "components/modals/columnSettings/ColumnSections";
88
import { HeaderMenuProps } from "cdm/HeaderModel";
99
import { ColumnsState, ConfigState, DataState } from "cdm/TableStateInterface";
1010

@@ -70,6 +70,8 @@ export class ColumnSettingsManager {
7070
constructBody(response: ColumnSettingsHandlerResponse) {
7171
/** behavior section */
7272
behavior_settings_section.run(response);
73+
/** styles section */
74+
style_settings_section.run(response);
7375
/** Particular settings section */
7476
particular_settings_section.run(response);
7577
}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { ColumnSettingsHandlerResponse } from "cdm/ModalsModel";
2+
import TextAlignmentSelector from "components/styles/TextAlignmentSelector";
3+
import { Setting } from "obsidian";
4+
import { AbstractHandlerClass } from "patterns/AbstractHandler";
5+
import React from "react";
6+
import { createRoot } from "react-dom/client";
7+
8+
export class AlignmentSelectorHandler extends AbstractHandlerClass<ColumnSettingsHandlerResponse> {
9+
settingTitle: string = "Content alignment selector";
10+
handle(
11+
columnHandlerResponse: ColumnSettingsHandlerResponse
12+
): ColumnSettingsHandlerResponse {
13+
const { column, containerEl, columnSettingsManager } =
14+
columnHandlerResponse;
15+
16+
const alignmentSetting = new Setting(containerEl)
17+
.setName(this.settingTitle)
18+
.setDesc("Change content alignment of the column");
19+
20+
createRoot(alignmentSetting.controlEl.createDiv()).render(
21+
<TextAlignmentSelector
22+
modal={columnSettingsManager.modal}
23+
columnKey={column.key}
24+
currentAlignment={column.config.content_alignment}
25+
/>
26+
);
27+
return this.goNext(columnHandlerResponse);
28+
}
29+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ColumnSettingsHandlerResponse } from "cdm/ModalsModel";
22
import { ColorPickerProps } from "cdm/StyleModel";
3-
import { ColorPicker } from "components/ColorPicker";
3+
import { ColorPicker } from "components/styles/ColorPicker";
44
import { randomColor } from "helpers/Colors";
55
import { ButtonComponent, Notice, Setting } from "obsidian";
66
import { AbstractHandlerClass } from "patterns/AbstractHandler";

0 commit comments

Comments
 (0)