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

feat: update note type menu design (#1032)

Browse Source
This commit is contained in:
Aman Harwara
2022-05-19 17:29:48 +05:30
committed by GitHub
parent c5ded6da3c
commit 9524a83ec3
5 changed files with 41 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
View File

@@ -51,7 +51,7 @@ export const WorkspaceMenuItem: FunctionComponent<Props> = ({
onClick={onClick}
checked={descriptor.primary}
>
<div className="flex items-center justify-between w-full">
<div className="flex items-center justify-between w-full ml-2">
{isRenaming ? (
<input
ref={inputRef}

52
app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
View File

@@ -176,34 +176,32 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
return (
<Fragment key={groupId}>
<div
className={`flex items-center px-2.5 py-2 text-xs font-semibold color-text border-0 border-y-1px border-solid border-main ${
index === 0 ? 'border-t-0 mb-2' : 'my-2'
}`}
>
{group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
<div className="font-semibold text-input">{group.title}</div>
<div className={`py-1 border-0 border-t-1px border-solid border-main ${index === 0 ? 'border-t-0' : ''}`}>
{group.items.map((item) => {
const onClickEditorItem = () => {
selectEditor(item).catch(console.error)
}
return (
<MenuItem
type={MenuItemType.RadioButton}
onClick={onClickEditorItem}
className={
'sn-dropdown-item py-2 text-input focus:bg-info-backdrop focus:shadow-none flex-row-reverse'
}
onBlur={closeOnBlur}
checked={isSelectedEditor(item)}
>
<div className="flex flex-grow items-center justify-between">
<div className="flex items-center">
{group.icon && <Icon type={group.icon} className={`mr-2 ${group.iconClassName}`} />}
{item.name}
</div>
{!item.isEntitled && <Icon type="premium-feature" />}
</div>
</MenuItem>
)
})}
</div>
{group.items.map((item) => {
const onClickEditorItem = () => {
selectEditor(item).catch(console.error)
}
return (
<MenuItem
type={MenuItemType.RadioButton}
onClick={onClickEditorItem}
className={'sn-dropdown-item py-2 text-input focus:bg-info-backdrop focus:shadow-none'}
onBlur={closeOnBlur}
checked={isSelectedEditor(item)}
>
<div className="flex flex-grow items-center justify-between">
{item.name}
{!item.isEntitled && <Icon type="premium-feature" />}
</div>
</MenuItem>
)
})}
</Fragment>
)
})}

2
app/assets/javascripts/Components/Menu/MenuItem.tsx
View File

@@ -67,7 +67,7 @@ export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
>
{type === MenuItemType.IconButton && icon ? <Icon type={icon} className={iconClassName} /> : null}
{type === MenuItemType.RadioButton && typeof checked === 'boolean' ? (
<div className={`pseudo-radio-btn ${checked ? 'pseudo-radio-btn--checked' : ''} mr-2 flex-shrink-0`}></div>
<div className={`pseudo-radio-btn ${checked ? 'pseudo-radio-btn--checked' : ''} flex-shrink-0`}></div>
) : null}
{children}
</button>

6
app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
View File

@@ -119,7 +119,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
checked={sortBy === CollectionSort.UpdatedAt}
onBlur={closeOnBlur}
>
<div className="flex flex-grow items-center justify-between">
<div className="flex flex-grow items-center justify-between ml-2">
<span>Date modified</span>
{sortBy === CollectionSort.UpdatedAt ? (
sortReverse ? (
@@ -137,7 +137,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
checked={sortBy === CollectionSort.CreatedAt}
onBlur={closeOnBlur}
>
<div className="flex flex-grow items-center justify-between">
<div className="flex flex-grow items-center justify-between ml-2">
<span>Creation date</span>
{sortBy === CollectionSort.CreatedAt ? (
sortReverse ? (
@@ -155,7 +155,7 @@ export const NotesListOptionsMenu: FunctionComponent<Props> = observer(
checked={sortBy === CollectionSort.Title}
onBlur={closeOnBlur}
>
<div className="flex flex-grow items-center justify-between">
<div className="flex flex-grow items-center justify-between ml-2">
<span>Title</span>
{sortBy === CollectionSort.Title ? (
sortReverse ? (

15
app/assets/stylesheets/_sn.scss
View File

@@ -514,6 +514,10 @@
border-top-width: 1px;
}
.sn-component .border-b-0 {
border-bottom-width: 0;
}
.border-2 {
border-width: 0.5rem;
}
@@ -1006,8 +1010,7 @@
}
.focus\:shadow-inner:focus {
box-shadow: var(--sn-stylekit-info-color) 1px 1px 0px 0px inset,
var(--sn-stylekit-info-color) -1px -1px 0px 0px inset;
box-shadow: var(--sn-stylekit-info-color) 1px 1px 0px 0px inset, var(--sn-stylekit-info-color) -1px -1px 0px 0px inset;
}
.focus\:shadow-bottom:focus {
@@ -1076,8 +1079,8 @@
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 100ms;
}
@@ -1152,3 +1155,7 @@
border-radius: 0.5rem;
}
}
.sn-component .flex-row-reverse {
flex-flow: row-reverse;
}