rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: notes list item layout when title is empty (#850)

Browse Source
This commit is contained in:
Aman Harwara
2022-02-07 19:59:43 +05:30
committed by GitHub
parent a05075d858
commit 9932c2a177
2 changed files with 56 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
app/assets/javascripts/components/NotesListItem.tsx
View File

@@ -95,45 +95,7 @@ export const NotesListItem: FunctionComponent<Props> = ({
)}
<div className={`meta ${hideEditorIcon ? 'icon-hidden' : ''}`}>
<div className="name-container">
<div className="name">{note.title}</div>
<div className="flag-icons">
{note.locked && (
<span title="Editing Disabled">
<Icon
ariaLabel="Editing Disabled"
type="pencil-off"
className="sn-icon--small color-info"
/>
</span>
)}
{note.trashed && (
<span title="Trashed">
<Icon
ariaLabel="Trashed"
type="trash-filled"
className="sn-icon--small color-danger"
/>
</span>
)}
{note.archived && (
<span title="Archived">
<Icon
ariaLabel="Archived"
type="archive"
className="sn-icon--mid color-accessory-tint-3"
/>
</span>
)}
{note.pinned && (
<span title="Pinned">
<Icon
ariaLabel="Pinned"
type="pin-filled"
className="sn-icon--small color-info"
/>
</span>
)}
</div>
{note.title.length ? <div className="name">{note.title}</div> : null}
</div>
{!hidePreview && !note.hidePreview && !note.protected && (
<div className="note-preview">
@@ -187,6 +149,44 @@ export const NotesListItem: FunctionComponent<Props> = ({
</div>
) : null}
</div>
<div className="flag-icons">
{note.locked && (
<span title="Editing Disabled">
<Icon
ariaLabel="Editing Disabled"
type="pencil-off"
className="sn-icon--small color-info"
/>
</span>
)}
{note.trashed && (
<span title="Trashed">
<Icon
ariaLabel="Trashed"
type="trash-filled"
className="sn-icon--small color-danger"
/>
</span>
)}
{note.archived && (
<span title="Archived">
<Icon
ariaLabel="Archived"
type="archive"
className="sn-icon--mid color-accessory-tint-3"
/>
</span>
)}
{note.pinned && (
<span title="Pinned">
<Icon
ariaLabel="Pinned"
type="pin-filled"
className="sn-icon--small color-info"
/>
</span>
)}
</div>
</div>
);
};

33
app/assets/stylesheets/_notes.scss
View File

@@ -129,8 +129,7 @@
.meta {
flex-grow: 1;
min-width: 0;
padding: 1rem;
padding-left: 0;
padding: 1rem 0;
border-bottom: 1px solid var(--sn-stylekit-border-color);
&.icon-hidden {
@@ -152,20 +151,6 @@
margin-right: 0.5rem;
}
.flag-icons {
padding: 0.135rem 0;
&,
& > * {
display: flex;
align-items: center;
}
& > * + * {
margin-left: 0.375rem;
}
}
.bottom-info {
font-size: 12px;
line-height: 1.4;
@@ -173,6 +158,22 @@
}
}
.flag-icons {
display: flex;
align-items: flex-start;
padding: 1rem;
padding-left: 0;
& > * {
display: flex;
align-items: center;
}
& > * + * {
margin-left: 0.375rem;
}
}
.tags-string {
display: flex;
flex-wrap: wrap;