Skip to content

feat: update note type menu design #1032

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
amanharwara merged 2 commits into from
May 19, 2022
Merged

feat: update note type menu design #1032

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0c6b52d
feat: update note type menu design
amanharwara May 19, 2022
b7f3268
feat: add new utility classes
amanharwara May 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
52 changes: 25 additions & 27 deletions app/assets/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
})}
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/Components/Menu/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions app/assets/javascripts/Components/NotesList/NotesListOptionsMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand All @@ -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 ? (
Expand All @@ -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 ? (
Expand Down
15 changes: 11 additions & 4 deletions app/assets/stylesheets/_sn.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -514,6 +514,10 @@
border-top-width: 1px;
}

.sn-component .border-b-0 {
border-bottom-width: 0;
}

.border-2 {
border-width: 0.5rem;
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -1152,3 +1155,7 @@
border-radius: 0.5rem;
}
}

.sn-component .flex-row-reverse {
flex-flow: row-reverse;
}