Skip to content

Commit

Permalink
Add setting to set tag sort order
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgmeyers
mgmeyers committed Apr 19, 2024
1 parent bfd092d commit c750bfd
Show file tree
Hide file tree
Showing 17 changed files with 648 additions and 224 deletions.
160 changes: 93 additions & 67 deletions src/Settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,17 @@ import {
} from './components/helpers';
import {
DataKey,
DateColorKey,
DateColor,
DateColorSetting,
DateColorSettingTemplate,
MetadataSetting,
MetadataSettingTemplate,
TagColorKey,
TagColor,
TagColorSetting,
TagColorSettingTemplate,
TagSort,
TagSortSetting,
TagSortSettingTemplate,
} from './components/types';
import { getParentWindow } from './dnd/util/getWindow';
import { t } from './lang/helpers';
Expand All @@ -32,6 +35,7 @@ import {
import { cleanUpDateSettings, renderDateSettings } from './settings/DateColorSettings';
import { cleanupMetadataSettings, renderMetadataSettings } from './settings/MetadataSettings';
import { cleanUpTagSettings, renderTagSettings } from './settings/TagColorSettings';
import { cleanUpTagSortSettings, renderTagSortSettings } from './settings/TagSortSettings';

const numberRegEx = /^\d+(?:\.\d+)?$/;

Expand All @@ -43,7 +47,7 @@ export interface KanbanSettings {
'archive-date-format'?: string;
'archive-date-separator'?: string;
'archive-with-date'?: boolean;
'date-colors'?: DateColorKey[];
'date-colors'?: DateColor[];
'date-display-format'?: string;
'date-format'?: string;
'date-picker-week-start'?: number;
Expand Down Expand Up @@ -74,7 +78,8 @@ export interface KanbanSettings {
'show-view-as-markdown'?: boolean;
'show-set-view'?: boolean;
'table-sizing'?: Record<string, number>;
'tag-colors'?: TagColorKey[];
'tag-sort'?: TagSort[];
'tag-colors'?: TagColor[];
'time-format'?: string;
'time-trigger'?: string;
}
Expand Down Expand Up @@ -117,6 +122,7 @@ export const settingKeyLookup: Set<keyof KanbanSettings> = new Set([
'show-set-view',
'table-sizing',
'tag-colors',
'tag-sort',
'time-format',
'time-trigger',
]);
Expand Down Expand Up @@ -562,34 +568,57 @@ export class SettingsManager {
});
});

new Setting(contentEl)
.setName(t('Tag colors'))
.setDesc(t('Set colors for tags displayed in cards.'))
.then((setting) => {
const [value] = this.getSetting('tag-colors', local);

const keys: TagColorSetting[] = ((value || []) as TagColorKey[]).map((k) => {
return {
...TagColorSettingTemplate,
id: generateInstanceId(),
data: k,
};
});
new Setting(contentEl).then((setting) => {
const [value, globalValue] = this.getSetting('tag-sort', local);

renderTagSettings(setting.settingEl, keys, (keys: TagColorSetting[]) =>
this.applySettingsUpdate({
'tag-colors': {
$set: keys.map((k) => k.data),
},
})
);
const keys: TagSortSetting[] = ((value || globalValue || []) as TagSort[]).map((k) => {
return {
...TagSortSettingTemplate,
id: generateInstanceId(),
data: k,
};
});

this.cleanupFns.push(() => {
if (setting.settingEl) {
cleanUpTagSettings(setting.settingEl);
}
});
renderTagSortSettings(setting.settingEl, contentEl, keys, (keys: TagSortSetting[]) =>
this.applySettingsUpdate({
'tag-sort': {
$set: keys.map((k) => k.data),
},
})
);

this.cleanupFns.push(() => {
if (setting.settingEl) {
cleanUpTagSortSettings(setting.settingEl);
}
});
});

new Setting(contentEl).then((setting) => {
const [value] = this.getSetting('tag-colors', local);

const keys: TagColorSetting[] = ((value || []) as TagColor[]).map((k) => {
return {
...TagColorSettingTemplate,
id: generateInstanceId(),
data: k,
};
});

renderTagSettings(setting.settingEl, keys, (keys: TagColorSetting[]) =>
this.applySettingsUpdate({
'tag-colors': {
$set: keys.map((k) => k.data),
},
})
);

this.cleanupFns.push(() => {
if (setting.settingEl) {
cleanUpTagSettings(setting.settingEl);
}
});
});

contentEl.createEl('h4', { text: t('Date & Time') });

Expand Down Expand Up @@ -929,47 +958,44 @@ export class SettingsManager {
});
});

new Setting(contentEl)
.setName(t('Display date colors'))
.setDesc(t('Set colors for dates displayed in cards based on the rules below.'))
.then((setting) => {
const [value] = this.getSetting('date-colors', local);

const keys: DateColorSetting[] = ((value || []) as DateColorKey[]).map((k) => {
return {
...DateColorSettingTemplate,
id: generateInstanceId(),
data: k,
};
});
new Setting(contentEl).then((setting) => {
const [value] = this.getSetting('date-colors', local);

renderDateSettings(
setting.settingEl,
keys,
(keys: DateColorSetting[]) =>
this.applySettingsUpdate({
'date-colors': {
$set: keys.map((k) => k.data),
},
}),
() => {
const [value, globalValue] = this.getSetting('date-display-format', local);
const defaultFormat = getDefaultDateFormat(this.app);
return value || globalValue || defaultFormat;
},
() => {
const [value, globalValue] = this.getSetting('time-format', local);
const defaultFormat = getDefaultTimeFormat(this.app);
return value || globalValue || defaultFormat;
}
);
const keys: DateColorSetting[] = ((value || []) as DateColor[]).map((k) => {
return {
...DateColorSettingTemplate,
id: generateInstanceId(),
data: k,
};
});

this.cleanupFns.push(() => {
if (setting.settingEl) {
cleanUpDateSettings(setting.settingEl);
}
});
renderDateSettings(
setting.settingEl,
keys,
(keys: DateColorSetting[]) =>
this.applySettingsUpdate({
'date-colors': {
$set: keys.map((k) => k.data),
},
}),
() => {
const [value, globalValue] = this.getSetting('date-display-format', local);
const defaultFormat = getDefaultDateFormat(this.app);
return value || globalValue || defaultFormat;
},
() => {
const [value, globalValue] = this.getSetting('time-format', local);
const defaultFormat = getDefaultTimeFormat(this.app);
return value || globalValue || defaultFormat;
}
);

this.cleanupFns.push(() => {
if (setting.settingEl) {
cleanUpDateSettings(setting.settingEl);
}
});
});

new Setting(contentEl)
.setName(t('Link dates to daily notes'))
Expand Down
1 change: 1 addition & 0 deletions src/StateManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,7 @@ export class StateManager {
'show-search': this.getSettingRaw('show-search', suppliedSettings) ?? true,
'show-set-view': this.getSettingRaw('show-set-view', suppliedSettings) ?? true,
'tag-colors': this.getSettingRaw('tag-colors', suppliedSettings) ?? [],
'tag-sort': this.getSettingRaw('tag-sort', suppliedSettings) ?? [],
'date-colors': this.getSettingRaw('date-colors', suppliedSettings) ?? [],
'tag-action': this.getSettingRaw('tag-action', suppliedSettings) ?? 'obsidian',
};
Expand Down
6 changes: 3 additions & 3 deletions src/components/Editor/dateWidget.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { useMemo } from 'preact/hooks';

import { StateManager } from '../../StateManager';
import { c } from '../helpers';
import { DateColorKey } from '../types';
import { DateColor } from '../types';

export const stateManagerField = StateField.define<StateManager | null>({
create() {
Expand Down Expand Up @@ -137,7 +137,7 @@ export const datePlugins: Extension[] = [
export function usePreprocessedStr(
stateManager: StateManager,
str: string,
getDateColor: (date: moment.Moment) => DateColorKey
getDateColor: (date: moment.Moment) => DateColor
) {
const dateTrigger = stateManager.useSetting('date-trigger');
const dateFormat = stateManager.useSetting('date-format');
Expand All @@ -149,7 +149,7 @@ export function usePreprocessedStr(

return useMemo(() => {
let date: moment.Moment;
let dateColor: DateColorKey;
let dateColor: DateColor;
const getWrapperStyles = (baseClass: string) => {
let wrapperStyle = '';
if (dateColor) {
Expand Down
4 changes: 2 additions & 2 deletions src/components/Item/DateAndTime.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { StateManager } from 'src/StateManager';
import { t } from 'src/lang/helpers';

import { c } from '../helpers';
import { DateColorKey, Item } from '../types';
import { DateColor, Item } from '../types';

export function getRelativeDate(date: moment.Moment, time: moment.Moment) {
if (time) {
Expand Down Expand Up @@ -52,7 +52,7 @@ interface DateAndTimeProps {
onEditDate?: JSX.MouseEventHandler<HTMLSpanElement>;
onEditTime?: JSX.MouseEventHandler<HTMLSpanElement>;
filePath: string;
getDateColor: (date: moment.Moment) => DateColorKey;
getDateColor: (date: moment.Moment) => DateColor;
}

export function DateAndTime({
Expand Down
Loading

0 comments on commit c750bfd

Please sign in to comment.