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

Commit 1b56a4f

Browse files
RafaelGBRafaelGB
committed
Merge branch '444-fr-align-column-content-vertically-top-middle-bottom'
2 parents de19826 + 125292f commit 1b56a4f

File tree

12 files changed

+195
-26
lines changed

12 files changed

+195
-26
lines changed

‎src/cdm/FolderModel.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export interface ConfigColumn {
4141
isInline: boolean;
4242
/** Circunstancial */
4343
content_alignment?: string;
44+
content_vertical_alignment?: string;
4445
wrap_content?: boolean;
4546
// Text
4647
link_alias_enabled?: boolean;

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

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
import { ColumnSettingsHandlerResponse } from "cdm/ModalsModel";
22
import { add_setting_header } from "settings/SettingsComponents";
3-
import { MediaDimensionsHandler } from "components/modals/columnSettings/handlers/media/MediaDimensionsHandler";
4-
import { MediaToggleHandler } from "components/modals/columnSettings/handlers/media/MediaToggleHandler";
5-
import { InlineToggleHandler } from "components/modals/columnSettings/handlers/InlineToggleHandler";
6-
import { SelectedColumnOptionsHandler } from "components/modals/columnSettings/handlers/SelectedColumnOptionsHandler";
7-
import { HideCompletedTaskToggleHandler } from "components/modals/columnSettings/handlers/tasks/HideCompletedTaskToggleHandler";
8-
import { LinkAliasToggleHandler } from "components/modals/columnSettings/handlers/media/LinkAliasToggleHandler";
9-
import { FormulaInputHandler } from "components/modals/columnSettings/handlers/automations/FormulaInputHandler";
10-
import { AlignmentSelectorHandler } from "components/modals/columnSettings/handlers/styles/AlignmentSelectorHandler";
11-
import { ToggleWrapContentHandler } from "components/modals/columnSettings/handlers/styles/ToggleWrapContentHandler";
12-
import { ColumnIdInputHandler } from "components/modals/columnSettings/handlers/ColumnIdInputHandler";
13-
import { DatabaseSelectorHandler } from "components/modals/columnSettings/handlers/dropdowns/DatabaseSelectorHandler";
14-
import { RollupAsociatedRelationHandler } from "components/modals/columnSettings/handlers/rollups/RollupAsociatedRelationHandler";
15-
import { RollupActionHandler } from "components/modals/columnSettings/handlers/rollups/RollupActionHandler";
16-
import { RollupKeyHandler } from "components/modals/columnSettings/handlers/rollups/RollupKeyHandler";
17-
import { RollupPersistToggleHandler } from "components/modals/columnSettings/handlers/rollups/RollupPersistToggleHandler";
3+
import { MediaDimensionsHandler } from "./handlers/media/MediaDimensionsHandler";
4+
import { MediaToggleHandler } from "./handlers/media/MediaToggleHandler";
5+
import { InlineToggleHandler } from "./handlers/InlineToggleHandler";
6+
import { SelectedColumnOptionsHandler } from "./handlers/SelectedColumnOptionsHandler";
7+
import { HideCompletedTaskToggleHandler } from "./handlers/tasks/HideCompletedTaskToggleHandler";
8+
import { LinkAliasToggleHandler } from "./handlers/media/LinkAliasToggleHandler";
9+
import { FormulaInputHandler } from "./handlers/automations/FormulaInputHandler";
10+
import { AlignmentXSelectorHandler } from "./handlers/styles/AlignmentXSelectorHandler";
11+
import { AlignmentYSelectorHandler } from "./handlers/styles/AlignmentYSelectorHandler";
12+
import { ToggleWrapContentHandler } from "./handlers/styles/ToggleWrapContentHandler";
13+
import { ColumnIdInputHandler } from "./handlers/ColumnIdInputHandler";
14+
import { DatabaseSelectorHandler } from "./handlers/dropdowns/DatabaseSelectorHandler";
15+
import { RollupAsociatedRelationHandler } from "./handlers/rollups/RollupAsociatedRelationHandler";
16+
import { RollupActionHandler } from "./handlers/rollups/RollupActionHandler";
17+
import { RollupKeyHandler } from "./handlers/rollups/RollupKeyHandler";
18+
import { RollupPersistToggleHandler } from "./handlers/rollups/RollupPersistToggleHandler";
1819
import { InputType } from "helpers/Constants";
1920
import { AbstractChain } from "patterns/chain/AbstractFactoryChain";
2021
import { AbstractHandler } from "patterns/chain/AbstractHandler";
@@ -50,7 +51,8 @@ class StyleSetttingsSection extends AbstractChain<ColumnSettingsHandlerResponse>
5051
case InputType.SELECT:
5152
case InputType.TAGS:
5253
case InputType.MARKDOWN:
53-
particularHandlers.push(new AlignmentSelectorHandler());
54+
particularHandlers.push(new AlignmentXSelectorHandler());
55+
particularHandlers.push(new AlignmentYSelectorHandler());
5456
particularHandlers.push(new ToggleWrapContentHandler());
5557
break;
5658
default:

src/components/modals/columnSettings/handlers/styles/AlignmentSelectorHandler.tsx renamed to src/components/modals/columnSettings/handlers/styles/AlignmentXSelectorHandler.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { ColumnSettingsHandlerResponse } from "cdm/ModalsModel";
2-
import TextAlignmentSelector from "components/styles/TextAlignmentSelector";
2+
import TextAlignmentXSelector from "components/styles/TextAlignmentXSelector";
33
import { t } from "lang/helpers";
44
import { Setting } from "obsidian";
55
import { AbstractHandlerClass } from "patterns/chain/AbstractHandler";
66
import React from "react";
77
import { createRoot } from "react-dom/client";
88

9-
export class AlignmentSelectorHandler extends AbstractHandlerClass<ColumnSettingsHandlerResponse> {
9+
export class AlignmentXSelectorHandler extends AbstractHandlerClass<ColumnSettingsHandlerResponse> {
1010
settingTitle = t("column_settings_modal_aligment_select_title");
1111
handle(
1212
columnHandlerResponse: ColumnSettingsHandlerResponse
@@ -19,7 +19,7 @@ export class AlignmentSelectorHandler extends AbstractHandlerClass<ColumnSetting
1919
.setDesc(t("column_settings_modal_aligment_select_desc"));
2020

2121
createRoot(alignmentSetting.controlEl.createDiv()).render(
22-
<TextAlignmentSelector
22+
<TextAlignmentXSelector
2323
modal={columnSettingsManager.modal}
2424
columnId={column.id}
2525
currentAlignment={column.config.content_alignment}

‎src/components/modals/columnSettings/handlers/styles/AlignmentYSelectorHandler.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { ColumnSettingsHandlerResponse } from "cdm/ModalsModel";
2+
import TextAlignmentYSelector from "components/styles/TextAlignmentYSelector";
3+
import { t } from "lang/helpers";
4+
import { Setting } from "obsidian";
5+
import { AbstractHandlerClass } from "patterns/chain/AbstractHandler";
6+
import React from "react";
7+
import { createRoot } from "react-dom/client";
8+
9+
export class AlignmentYSelectorHandler extends AbstractHandlerClass<ColumnSettingsHandlerResponse> {
10+
settingTitle = t("column_settings_modal_aligment_vertical_select_title");
11+
handle(
12+
columnHandlerResponse: ColumnSettingsHandlerResponse
13+
): ColumnSettingsHandlerResponse {
14+
const { column, containerEl, columnSettingsManager } =
15+
columnHandlerResponse;
16+
17+
const alignmentSetting = new Setting(containerEl)
18+
.setName(this.settingTitle)
19+
.setDesc(t("column_settings_modal_aligment_vertical_select_desc"));
20+
21+
createRoot(alignmentSetting.controlEl.createDiv()).render(
22+
<TextAlignmentYSelector
23+
modal={columnSettingsManager.modal}
24+
columnId={column.id}
25+
currentAlignment={column.config.content_vertical_alignment}
26+
/>
27+
);
28+
return this.goNext(columnHandlerResponse);
29+
}
30+
}

src/components/styles/TextAlignmentSelector.tsx renamed to src/components/styles/TextAlignmentXSelector.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { TextAlignmentProps } from "cdm/StyleModel";
1010
import { COLUMN_ALIGNMENT_OPTIONS, StyleVariables } from "helpers/Constants";
1111
import { t } from "lang/helpers";
1212

13-
export default function TextAlignmentSelector(props: TextAlignmentProps) {
13+
export default function TextAlignmentXSelector(props: TextAlignmentProps) {
1414
const { modal, columnId, currentAlignment } = props;
1515
const { view } = modal;
1616
const [alignment, setAlignment] = React.useState(currentAlignment);

‎src/components/styles/TextAlignmentYSelector.tsx‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import * as React from "react";
2+
import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
3+
import AlignVerticalCenterIcon from "@mui/icons-material/AlignVerticalCenter";
4+
import AlignVerticalBottomIcon from "@mui/icons-material/AlignVerticalBottom";
5+
import Stack from "@mui/material/Stack";
6+
import ToggleButton from "@mui/material/ToggleButton";
7+
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
8+
import { TextAlignmentProps } from "cdm/StyleModel";
9+
import { COLUMN_ALIGNMENT_OPTIONS, StyleVariables } from "helpers/Constants";
10+
import { t } from "lang/helpers";
11+
12+
export default function TextAlignmentYSelector(props: TextAlignmentProps) {
13+
const { modal, columnId, currentAlignment } = props;
14+
const { view } = modal;
15+
const [alignment, setAlignment] = React.useState(currentAlignment);
16+
17+
const handleAlignment = async (
18+
event: React.MouseEvent<HTMLElement>,
19+
newAlignment: string | null
20+
) => {
21+
if (newAlignment !== null) {
22+
// Persist changes
23+
await view.diskConfig.updateColumnConfig(columnId, {
24+
content_vertical_alignment: newAlignment,
25+
});
26+
modal.enableReset = true;
27+
setAlignment(newAlignment);
28+
}
29+
};
30+
31+
return (
32+
<Stack direction="row" spacing={4}>
33+
<ToggleButtonGroup
34+
value={alignment}
35+
exclusive
36+
onChange={handleAlignment}
37+
aria-label={t(
38+
"column_settings_modal_text_alignment_vertical_select_title"
39+
)}
40+
>
41+
<ToggleButton
42+
value={COLUMN_ALIGNMENT_OPTIONS.TOP}
43+
aria-label={t(
44+
"column_settings_modal_text_alignment_vertical_select_top"
45+
)}
46+
sx={{
47+
color: StyleVariables.TEXT_NORMAL,
48+
"&.Mui-selected, &.Mui-selected:hover": {
49+
color: StyleVariables.TEXT_ACCENT,
50+
},
51+
}}
52+
>
53+
<AlignVerticalTopIcon />
54+
</ToggleButton>
55+
<ToggleButton
56+
value={COLUMN_ALIGNMENT_OPTIONS.MIDDLE}
57+
aria-label={t(
58+
"column_settings_modal_text_alignment_vertical_select_middle"
59+
)}
60+
sx={{
61+
color: StyleVariables.TEXT_NORMAL,
62+
"&.Mui-selected, &.Mui-selected:hover": {
63+
color: StyleVariables.TEXT_ACCENT,
64+
},
65+
}}
66+
>
67+
<AlignVerticalCenterIcon />
68+
</ToggleButton>
69+
<ToggleButton
70+
value={COLUMN_ALIGNMENT_OPTIONS.BOTTOM}
71+
aria-label={t(
72+
"column_settings_modal_text_alignment_vertical_select_bottom"
73+
)}
74+
sx={{
75+
color: StyleVariables.TEXT_NORMAL,
76+
"&.Mui-selected, &.Mui-selected:hover": {
77+
color: StyleVariables.TEXT_ACCENT,
78+
},
79+
}}
80+
>
81+
<AlignVerticalBottomIcon />
82+
</ToggleButton>
83+
</ToggleButtonGroup>
84+
</Stack>
85+
);
86+
}

‎src/helpers/Constants.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,16 @@ export const FileManagerEditOptions = Object.freeze({
9999
* COLUMN CONFIGURATIONS *
100100
******************************************************************************/
101101
export const COLUMN_ALIGNMENT_OPTIONS = Object.freeze({
102+
// horizontal alignment
102103
LEFT: 'text-align-left',
103104
CENTER: 'text-align-center',
104105
RIGHT: 'text-align-right',
105106
JUSTIFY: 'text-align-justify',
107+
// vertical alignment
108+
TOP: 'align-top',
109+
MIDDLE: 'align-middle',
110+
BOTTOM: 'align-bottom',
111+
// text wrapping
106112
NOWRAP: 'text-nowrap',
107113
WRAP: 'text-wrap',
108114
});

‎src/helpers/StylesHelper.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,13 @@ export function getAlignmentClassname(configColumn: ConfigColumn, localSettings:
5050
COLUMN_ALIGNMENT_OPTIONS.CENTER :
5151
configColumn.content_alignment
5252
);
53+
54+
classes.push(
55+
configColumn.content_vertical_alignment === undefined ?
56+
COLUMN_ALIGNMENT_OPTIONS.MIDDLE :
57+
configColumn.content_vertical_alignment
58+
);
59+
5360
classes.push(
5461
(configColumn.wrap_content && localSettings.cell_size !== CellSizeOptions.COMPACT) ?
5562
COLUMN_ALIGNMENT_OPTIONS.WRAP :

‎src/lang/locale/en.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,15 +164,25 @@ export default {
164164
"column_settings_modal_rollup_key_placeholder": "Search property...",
165165
"column_settings_modal_rollup_persist_toggle_title": "Persist rollup output",
166166
"column_settings_modal_rollup_persist_toggle_desc": "Enable/disable to persist rollup output on your notes (Only persisted rollups could be searchable and sortable)",
167+
167168
"column_settings_modal_aligment_select_title": "Select alignment",
168169
"column_settings_modal_aligment_select_desc": "Change content alignment of the column",
169170
"column_settings_modal_text_alignment_select_title": "text alignment",
170171
"column_settings_modal_text_alignment_select_left": "left aligned",
171172
"column_settings_modal_text_alignment_select_center": "centered",
172173
"column_settings_modal_text_alignment_select_right": "right aligned",
173174
"column_settings_modal_text_alignment_select_justify": "justified",
175+
176+
"column_settings_modal_aligment_vertical_select_title": "Select vertical alignment",
177+
"column_settings_modal_aligment_vertical_select_desc": "Change content vertical alignment of the column",
178+
"column_settings_modal_text_alignment_vertical_select_title": "text vertical alignment",
179+
"column_settings_modal_text_alignment_vertical_select_top": "top aligned",
180+
"column_settings_modal_text_alignment_vertical_select_middle": "middle aligned",
181+
"column_settings_modal_text_alignment_vertical_select_bottom": "bottom aligned",
182+
174183
"column_settings_modal_wrap_content_toggle_title": "Wrap content",
175184
"column_settings_modal_wrap_content_toggle_desc": "Enable/disable to wrap content of the column",
185+
176186
"column_settings_modal_hide_completed_tasks_toggle_title": "Hide completed tasks",
177187
"column_settings_modal_hide_completed_tasks_toggle_desc": "Enable/disable to hide completed tasks",
178188
"column_settings_modal_column_id_title": "Column ID",

‎src/lang/locale/es.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,15 +164,25 @@ export default {
164164
"column_settings_modal_rollup_key_placeholder": "Buscar propiedad...",
165165
"column_settings_modal_rollup_persist_toggle_title": "Persistir rollup en el archivo",
166166
"column_settings_modal_rollup_persist_toggle_desc": "Habilitar/deshabilitar la persistencia del rollup en sus notas (solo se pueden buscar y ordenar aquellos que se persisten)",
167+
167168
"column_settings_modal_aligment_select_title": "Alineación de contenido",
168169
"column_settings_modal_aligment_select_desc": "Seleccione la alineación de contenido para esta columna",
169170
"column_settings_modal_text_alignment_select_title": "Alineación de texto",
170171
"column_settings_modal_text_alignment_select_left": "izquierda",
171172
"column_settings_modal_text_alignment_select_center": "centrado",
172173
"column_settings_modal_text_alignment_select_right": "derecha",
173174
"column_settings_modal_text_alignment_select_justify": "justificado",
175+
176+
"column_settings_modal_aligment_vertical_select_title": "Alineación vertical de contenido",
177+
"column_settings_modal_aligment_vertical_select_desc": "Seleccione la alineación vertical de contenido para esta columna",
178+
"column_settings_modal_text_alignment_vertical_select_title": "Alineación vertical de texto",
179+
"column_settings_modal_text_alignment_vertical_select_top": "arriba",
180+
"column_settings_modal_text_alignment_vertical_select_middle": "centrado",
181+
"column_settings_modal_text_alignment_vertical_select_bottom": "abajo",
182+
174183
"column_settings_modal_wrap_content_toggle_title": "Salto de línea",
175184
"column_settings_modal_wrap_content_toggle_desc": "Habilitar/deshabilitar el salto de línea para el contenido de esta columna",
185+
176186
"column_settings_modal_hide_completed_tasks_toggle_title": "Ocultar tareas completadas",
177187
"column_settings_modal_hide_completed_tasks_toggle_desc": "Habilitar/deshabilitar la ocultación de tareas completadas para esta columna",
178188
"column_settings_modal_column_id_title": "ID de columna",

0 commit comments

Comments
 (0)