Skip to content

Commit 436715e

Browse files
kepanokepano
committed
Consolidate property styles
1 parent 8d927b5 commit 436715e

6 files changed

Lines changed: 189 additions & 109 deletions

File tree

‎src/core/popup.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -646,12 +646,16 @@ async function initializeTemplateFields(currentTabId: number, template: Template
646646
}
647647

648648
propertyDiv.innerHTML = `
649-
<span class="metadata-property-icon"><i data-lucide="${getPropertyTypeIcon(propertyType)}"></i></span>
650-
<label for="${property.name}">${property.name}</label>
651-
${propertyType === 'checkbox'
652-
? `<input id="${property.name}" type="checkbox" ${value === 'true' ? 'checked' : ''} data-type="${propertyType}" data-template-value="${escapeHtml(property.value)}" />`
653-
: `<input id="${property.name}" type="text" value="${escapeHtml(value)}" data-type="${propertyType}" data-template-value="${escapeHtml(property.value)}" />`
654-
}
649+
<div class="metadata-property-key">
650+
<span class="metadata-property-icon"><i data-lucide="${getPropertyTypeIcon(propertyType)}"></i></span>
651+
<label for="${property.name}">${property.name}</label>
652+
</div>
653+
<div class="metadata-property-value">
654+
${propertyType === 'checkbox'
655+
? `<input id="${property.name}" type="checkbox" ${value === 'true' ? 'checked' : ''} data-type="${propertyType}" data-template-value="${escapeHtml(property.value)}" />`
656+
: `<input id="${property.name}" type="text" value="${escapeHtml(value)}" data-type="${propertyType}" data-template-value="${escapeHtml(property.value)}" />`
657+
}
658+
</div>
655659
`;
656660
newTemplateProperties.appendChild(propertyDiv);
657661
}

‎src/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ body {
3030
@import 'styles/menu';
3131
@import 'styles/modals';
3232
@import 'styles/popup';
33+
@import 'styles/properties';
3334
@import 'styles/safari';
3435
@import 'styles/settings';
3536
@import 'styles/side-panel';

‎src/styles/_variables.scss‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@
5353
--font-ui-medium: 0.9375rem;
5454
--font-ui-large: 1.125rem;
5555

56+
--font-smaller: var(--font-ui-smaller);
57+
--font-small: var(--font-ui-small);
58+
5659
--font-default: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif;
5760
--font-monospace-default: ui-monospace, SFMono-Regular, "Cascadia Mono", "Roboto Mono", "DejaVu Sans Mono", "Liberation Mono", Menlo, Monaco, "Consolas", "Source Code Pro", monospace;
5861

@@ -63,7 +66,42 @@
6366
--icon-size: 1rem;
6467
--input-height: 1.875rem;
6568

66-
--metadata-label-width: 7rem;
69+
/* Metadata */
70+
--metadata-background: transparent;
71+
--metadata-display-reading: block;
72+
--metadata-display-editing: block;
73+
--metadata-max-width: none;
74+
--metadata-padding: var(--size-4-2) 0;
75+
--metadata-border-color: var(--background-modifier-border);
76+
--metadata-border-radius: 0;
77+
--metadata-border-width: 0;
78+
--metadata-divider-color: var(--background-modifier-border);
79+
--metadata-divider-color-hover: transparent;
80+
--metadata-divider-color-focus: transparent;
81+
--metadata-divider-width: 0;
82+
--metadata-gap: 3px;
83+
--metadata-property-padding: 0;
84+
--metadata-property-radius: 0.375rem;
85+
--metadata-property-radius-hover: 0.375rem;
86+
--metadata-property-radius-focus: 0.375rem;
87+
--metadata-property-background: transparent;
88+
--metadata-property-background-hover: transparent;
89+
--metadata-property-background-active: var(--background-modifier-hover);
90+
--metadata-label-background-hover: transparent;
91+
--metadata-label-background-active: var(--background-modifier-hover);
92+
--metadata-label-font: var(--font-interface);
93+
--metadata-label-font-size: var(--font-smaller);
94+
--metadata-label-font-weight: inherit;
95+
--metadata-label-text-color: var(--text-muted);
96+
--metadata-label-text-color-hover: var(--text-muted);
97+
--metadata-label-width: 6.5rem;
98+
--metadata-input-height: 1.75rem;
99+
--metadata-input-text-color: var(--text-normal);
100+
--metadata-input-font: var(--font-interface);
101+
--metadata-input-font-size: var(--font-smaller);
102+
--metadata-input-background: transparent;
103+
--metadata-input-background-hover: transparent;
104+
--metadata-input-background-active: var(--background-modifier-hover);
67105

68106
--modal-background: var(--background-primary);
69107
--modal-width: 90vw;

‎src/styles/icons.scss‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,4 @@ svg.lucide-icon {
22
stroke-width: 1.75px;
33
width: var(--icon-size);
44
height: var(--icon-size);
5-
}
6-
.metadata-property-icon {
7-
margin-inline-start: 4px;
8-
display: flex;
9-
align-items: center;
10-
justify-content: center;
11-
min-width: var(--icon-size);
12-
color: var(--text-muted);
13-
svg {
14-
width: var(--icon-size);
15-
height: var(--icon-size);
16-
}
175
}

‎src/styles/popup.scss‎

Lines changed: 0 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -105,96 +105,6 @@
105105
}
106106
}
107107

108-
.metadata-properties-header {
109-
padding: 0 var(--popup-padding) 0.375rem;
110-
font-size: var(--font-ui-small);
111-
font-weight: 500;
112-
color: var(--text-muted);
113-
user-select: none;
114-
-webkit-user-select: none;
115-
cursor: pointer;
116-
display: flex;
117-
flex-direction: row;
118-
gap: 2px;
119-
align-items: center;
120-
&:hover {
121-
color: var(--text-normal);
122-
}
123-
svg {
124-
color: var(--text-muted);
125-
transition: transform 0.1s ease-in-out;
126-
}
127-
&.collapsed {
128-
svg {
129-
transform: rotate(-90deg);
130-
transition: transform 0.1s ease-in-out;
131-
}
132-
}
133-
}
134-
135-
.metadata-properties {
136-
--input-height: 1.875rem;
137-
padding: 2px 0.5rem 0.5rem;
138-
margin: 0;
139-
display: flex;
140-
flex-direction: column;
141-
flex-shrink: 1;
142-
gap: 1px;
143-
max-height: 46%;;
144-
overflow-y: scroll;
145-
&:empty {
146-
display: none;
147-
}
148-
&.collapsed {
149-
display: none;
150-
}
151-
.metadata-property {
152-
display: flex;
153-
flex-direction: row;
154-
gap: 2px;
155-
align-items: center;
156-
border-radius: var(--radius-s);
157-
min-height: var(--input-height);
158-
border: 1px solid transparent;
159-
transition:
160-
box-shadow .15s ease-in-out,
161-
border .15s ease-in-out;
162-
&:hover {
163-
border-color: var(--background-modifier-border);
164-
}
165-
&:focus-within {
166-
border-color: var(--background-modifier-border-focus);
167-
box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
168-
transition:
169-
box-shadow .15s ease-in-out,
170-
border .15s ease-in-out;
171-
}
172-
label {
173-
width: 7.5rem;
174-
padding-inline-start: 6px;
175-
white-space: nowrap;
176-
overflow: hidden;
177-
text-overflow: ellipsis;
178-
font-weight: 400;
179-
color: var(--text-muted);
180-
font-size: var(--font-ui-small);
181-
user-select: none;
182-
-webkit-user-select: none;
183-
margin: 0;
184-
}
185-
input[type=text] {
186-
border: none;
187-
background-color: transparent;
188-
&:hover,
189-
&:active,
190-
&:focus {
191-
border: none;
192-
box-shadow: none;
193-
}
194-
}
195-
}
196-
}
197-
198108
#note-content-container {
199109
display: flex;
200110
flex-grow: 1;

‎src/styles/properties.scss‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
2+
.metadata-properties-header {
3+
padding: 0 var(--popup-padding) 0.375rem;
4+
font-size: var(--font-ui-small);
5+
font-weight: 500;
6+
color: var(--text-muted);
7+
user-select: none;
8+
-webkit-user-select: none;
9+
cursor: pointer;
10+
display: flex;
11+
flex-direction: row;
12+
gap: 2px;
13+
align-items: center;
14+
&:hover {
15+
color: var(--text-normal);
16+
}
17+
svg {
18+
color: var(--text-muted);
19+
transition: transform 0.1s ease-in-out;
20+
}
21+
&.collapsed {
22+
svg {
23+
transform: rotate(-90deg);
24+
transition: transform 0.1s ease-in-out;
25+
}
26+
}
27+
}
28+
29+
.metadata-properties {
30+
--input-height: var(--metadata-input-height);
31+
padding: 2px 0.5rem 0.5rem;
32+
margin: 0;
33+
display: flex;
34+
flex-direction: column;
35+
flex-shrink: 1;
36+
gap: var(--metadata-gap);
37+
max-height: 46%;;
38+
overflow-y: scroll;
39+
&:empty {
40+
display: none;
41+
}
42+
&.collapsed {
43+
display: none;
44+
}
45+
}
46+
.metadata-property {
47+
display: flex;
48+
flex-direction: row;
49+
gap: 2px;
50+
align-items: center;
51+
border-radius: var(--radius-s);
52+
min-height: var(--input-height);
53+
transition:
54+
box-shadow .15s ease-in-out,
55+
border .15s ease-in-out;
56+
&:hover {
57+
box-shadow: 0 0 0 1px var(--background-modifier-border);
58+
}
59+
&:focus-within {
60+
box-shadow: 0 0 0 2px var(--background-modifier-border-focus);
61+
transition:
62+
box-shadow .15s ease-in-out,
63+
border .15s ease-in-out;
64+
}
65+
input[type=text] {
66+
border: none;
67+
background-color: transparent;
68+
padding: 0;
69+
border-radius: 0;
70+
&:hover,
71+
&:active,
72+
&:focus {
73+
border: none;
74+
box-shadow: none;
75+
}
76+
}
77+
}
78+
.metadata-property-key {
79+
display: flex;
80+
align-self: stretch;
81+
align-items: center;
82+
flex-direction: row;
83+
flex-shrink: 0;
84+
border-bottom: var(--metadata-divider-width) solid var(--metadata-divider-color);
85+
background-color: var(--metadata-label-background);
86+
width: var(--metadata-label-width);
87+
min-width: var(--metadata-label-width);
88+
height: var(--input-height);
89+
90+
label {
91+
padding-inline-start: 0.375rem;
92+
white-space: nowrap;
93+
overflow: hidden;
94+
text-overflow: ellipsis;
95+
font-weight: 400;
96+
color: var(--text-muted);
97+
font-size: var(--font-ui-smaller);
98+
user-select: none;
99+
-webkit-user-select: none;
100+
margin: 0;
101+
}
102+
@media (hover: hover) {
103+
&:hover {
104+
background-color:var(--metadata-label-background-hover);
105+
}
106+
}
107+
&:focus-within {
108+
background-color:var(--metadata-label-background-active);
109+
}
110+
}
111+
.metadata-property-icon {
112+
margin-inline-start: 0.25rem;
113+
display: flex;
114+
align-items: center;
115+
justify-content: center;
116+
min-width: var(--icon-size);
117+
color: var(--text-muted);
118+
height: var(--input-height);
119+
svg {
120+
width: var(--icon-size);
121+
height: var(--icon-size);
122+
}
123+
}
124+
.metadata-property-value {
125+
display: flex;
126+
flex: 1 1 auto;
127+
gap: 0.25rem;
128+
align-items: center;
129+
align-self: stretch;
130+
font-family: var(--metadata-input-font);
131+
min-height: var(--input-height);
132+
background-color: var(--metadata-input-background);
133+
border-bottom: var(--metadata-divider-width) solid var(--metadata-divider-color);
134+
overflow: hidden;
135+
padding-inline-start: 0.375rem;
136+
&:focus-within {
137+
background-color: var(--metadata-input-background-active);
138+
}
139+
}

0 commit comments

Comments
 (0)