Skip to content

Commit 2d67a5a

Browse files
mProjectsCodemProjectsCode
committed
More CSS cleanup
1 parent 53a2d5e commit 2d67a5a

File tree

8 files changed

+70
-36
lines changed

8 files changed

+70
-36
lines changed

‎src/InputFieldMarkdownRenderChild.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,17 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
155155
let inputFieldArgumentObject: { name: string, value: string } = {name: inputFieldArgumentName, value: inputFieldArgumentValue};
156156
this.arguments.push(inputFieldArgumentObject);
157157
}
158+
159+
if (inputFieldArgumentName === 'title') {
160+
if (this.inputFieldType !== InputFieldType.SELECT && this.inputFieldType !== InputFieldType.MULTI_SELECT) {
161+
throw new Error(`argument \'${inputFieldArgumentName}\' is only applicable to select and multi-select input fields`);
162+
}
163+
164+
const inputFieldArgumentValue: string = this.extractInputFieldArgumentValue(inputFieldArgument);
165+
166+
let inputFieldArgumentObject: { name: string, value: string } = {name: inputFieldArgumentName, value: inputFieldArgumentValue};
167+
this.arguments.push(inputFieldArgumentObject);
168+
}
158169
}
159170
}
160171

‎src/inputFields/DateInputField.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {AbstractInputField} from './AbstractInputField';
22
import {DropdownComponent, TextComponent} from 'obsidian';
33
import {InputFieldMarkdownRenderChild} from '../InputFieldMarkdownRenderChild';
4-
import {Date, DateFormat, DateParser} from '../Parsers/DateParser';
4+
import {Date, DateFormat, DateParser} from '../parsers/DateParser';
55

66
export class DateInputField extends AbstractInputField {
77
container: HTMLDivElement;
@@ -72,7 +72,7 @@ export class DateInputField extends AbstractInputField {
7272
console.log(this.date);
7373

7474
container.removeClass('meta-bind-plugin-input-wrapper');
75-
container.addClass('meta-bind-plugin-flex-input-wrapper');
75+
container.addClass('meta-bind-plugin-flex-input-wrapper', 'meta-bind-plugin-input-element-group');
7676

7777
if (DateParser.dateFormat === DateFormat.EU) {
7878
this.dayComponent = new DropdownComponent(container);
@@ -85,8 +85,8 @@ export class DateInputField extends AbstractInputField {
8585
this.monthComponent.setValue(this.date.getMonth().toString());
8686
this.monthComponent.onChange(this.onMonthChange.bind(this));
8787

88-
this.dayComponent.selectEl.addClass('meta-bind-plugin-date-input-left-input');
89-
this.monthComponent.selectEl.addClass('meta-bind-plugin-date-input-middle-input');
88+
this.dayComponent.selectEl.addClass('meta-bind-plugin-input-element-group-element');
89+
this.monthComponent.selectEl.addClass('meta-bind-plugin-input-element-group-element');
9090
} else {
9191
this.monthComponent = new DropdownComponent(container);
9292
this.monthComponent.addOptions(this.months);
@@ -98,15 +98,16 @@ export class DateInputField extends AbstractInputField {
9898
this.dayComponent.setValue(this.date.getDay().toString());
9999
this.dayComponent.onChange(this.onDayChange.bind(this));
100100

101-
this.dayComponent.selectEl.addClass('meta-bind-plugin-date-input-middle-input');
102-
this.monthComponent.selectEl.addClass('meta-bind-plugin-date-input-left-input');
101+
this.dayComponent.selectEl.addClass('meta-bind-plugin-input-element-group-element');
102+
this.monthComponent.selectEl.addClass('meta-bind-plugin-input-element-group-element');
103103
}
104104

105105
this.yearComponent = new TextComponent(container);
106106
this.yearComponent.setValue(this.date.getYear().toString());
107107
this.yearComponent.onChange(this.onYearChange.bind(this));
108108

109109
this.yearComponent.inputEl.addClass('meta-bind-plugin-date-input-year-input');
110+
this.yearComponent.inputEl.addClass('meta-bind-plugin-input-element-group-element');
110111
this.yearComponent.inputEl.type = 'number';
111112
this.yearComponent.inputEl.max = '9999';
112113

‎src/inputFields/SelectInputField.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,15 @@ export class SelectInputField extends AbstractInputField {
4646
}
4747

4848
render(container: HTMLDivElement): void {
49-
container.addClass('media-db-plugin-select-input-bg');
49+
container.addClass('meta-bind-plugin-select-input-bg');
5050
this.container = container;
5151

52-
const elementWrapper = container.createDiv({cls: 'media-db-plugin-select-input-wrapper'});
52+
const elementWrapper = container.createDiv({cls: 'meta-bind-plugin-select-input-wrapper'});
53+
54+
const titleArgument = this.inputFieldMarkdownRenderChild.getArgument('title');
55+
if (titleArgument) {
56+
elementWrapper.createEl('div', {text: titleArgument.value, cls: 'meta-bind-plugin-select-input-header'});
57+
}
5358

5459
const elementArguments: { name: string, value: string }[] = this.inputFieldMarkdownRenderChild.getArguments('option');
5560

‎src/main.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {DEFAULT_SETTINGS, MetaBindPluginSettings, MetaBindSettingTab} from './se
33
import {InputFieldMarkdownRenderChild, InputFieldMarkdownRenderChildType} from './InputFieldMarkdownRenderChild';
44
import {getFileName, isPath, removeFileEnding} from './utils/Utils';
55
import {Logger} from './utils/Logger';
6-
import {DateParser} from './Parsers/DateParser';
6+
import {DateParser} from './parsers/DateParser';
77

88
export default class MetaBindPlugin extends Plugin {
99
settings: MetaBindPluginSettings;

‎src/Parsers/DateParser.ts renamed to ‎src/parsers/DateParser.ts

File renamed without changes.

‎src/settings/Settings.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {App, PluginSettingTab, Setting} from 'obsidian';
22
import MetaBindPlugin from '../main';
3-
import {DateFormat} from '../Parsers/DateParser';
3+
import {DateFormat} from '../parsers/DateParser';
44

55
export interface MetaBindPluginSettings {
66
devMode: boolean;

‎styles.css

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
}
1616

1717
.meta-bind-plugin-slider-input {
18-
align-self: center;
19-
margin-left: 5px !important;
18+
align-self: center;
19+
margin-left: 5px !important;
2020
margin-right: 5px !important;
2121
}
2222

@@ -29,60 +29,77 @@
2929
}
3030

3131
.meta-bind-plugin-select-input-bg {
32-
display: flex;
32+
display: flex;
3333
flex-direction: column;
34+
border: 1px solid var(--background-modifier-border);
35+
border-radius: 4px;
3436
}
3537

3638
.meta-bind-plugin-select-input-wrapper {
37-
margin: 5px;
38-
flex: 1;
39+
margin: 0 5px 0 5px;
40+
flex: 1;
3941
overflow-y: auto;
4042
}
4143

44+
.meta-bind-plugin-select-input-header {
45+
margin: 5px 5px 10px 5px;
46+
}
47+
4248
.meta-bind-plugin-select-input-element {
43-
cursor: pointer;
44-
border-left: 5px solid transparent;
45-
padding: 5px;
46-
margin: 5px 0 5px 0;
49+
cursor: pointer;
50+
padding: 5px;
51+
margin: 5px 0 5px 0;
4752
border-radius: 5px;
48-
white-space: pre-wrap;
49-
font-size: 16px;
50-
min-width: 200px;
53+
border-left: 5px solid transparent;
54+
white-space: pre-wrap;
55+
font-size: 16px;
56+
min-width: 200px;
5157
}
5258

5359
.meta-bind-plugin-select-input-element-selected {
5460
border-left: 5px solid var(--interactive-accent) !important;
55-
background: var(--background-secondary-alt);
61+
background: var(--background-secondary);
5662
}
5763

5864
.meta-bind-plugin-select-input-element-hover {
59-
background: var(--background-secondary-alt);
65+
background: var(--background-secondary);
6066
}
6167

6268
.meta-bind-plugin-date-input-year-input[type="number"] {
63-
width: 80px;
64-
height: unset;
69+
width: 80px;
70+
height: unset;
6571
align-self: stretch;
66-
border-radius: 0 0.5em 0.5em 0;
6772
}
6873

69-
.meta-bind-plugin-date-input-left-input {
74+
.meta-bind-plugin-input-element-group {
75+
76+
}
77+
78+
.meta-bind-plugin-input-element-group .meta-bind-plugin-input-element-group-element:first-child {
7079
border-radius: 0.5em 0 0 0.5em;
7180
}
7281

73-
.meta-bind-plugin-date-input-middle-input:not(:focus) {
82+
.meta-bind-plugin-input-element-group .meta-bind-plugin-input-element-group-element:not(:first-child):not(:last-child):not(:focus) {
7483
border-radius: 0;
75-
border-left: 0;
76-
border-right: 0;
84+
border-left: 0;
7785
}
7886

79-
.meta-bind-plugin-date-input-middle-input:focus {
87+
.meta-bind-plugin-input-element-group .meta-bind-plugin-input-element-group-element:not(:first-child):not(:last-child):focus {
8088
border-radius: 0;
81-
margin-left: -1px;
82-
margin-right: -1px;
83-
z-index: 10;
89+
margin-left: -1px;
90+
z-index: 10;
8491
}
8592

93+
.meta-bind-plugin-input-element-group .meta-bind-plugin-input-element-group-element:last-child:not(:focus) {
94+
border-radius: 0 0.5em 0.5em 0;
95+
border-left: 0;
96+
}
97+
98+
.meta-bind-plugin-input-element-group .meta-bind-plugin-input-element-group-element:last-child:focus {
99+
border-radius: 0 0.5em 0.5em 0;
100+
margin-left: -1px;
101+
z-index: 10;
102+
}
86103

87104
.meta-bind-full-width {
88105
width: 100%;

‎tests/DateParser.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Date, DateParser} from '../src/Parsers/DateParser';
1+
import {Date, DateParser} from '../src/parsers/DateParser';
22

33

44
test('stringify EU date', () => {

0 commit comments

Comments
 (0)