sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: media query for hiding shortcuts for mobile view (#2667)

Browse Source 
Co-authored-by: Lipis <lipiridis@gmail.com>
This commit is contained in:
Harshil Parmar 2020-12-27 00:53:51 +05:30 committed by GitHub
parent bc414ccaaf
commit 8091ac6c08
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/ContextMenu.scss
View File

@ -1,4 +1,4 @@
@import "open-color/open-color.scss"; @import "../css/_variables";
.excalidraw { .excalidraw {
.context-menu { .context-menu {
@ -42,16 +42,16 @@
} }
&.dangerous { &.dangerous {
div:nth-child(1) { .context-menu-option__label {
color: $oc-red-7; color: $oc-red-7;
} }
} }
div:nth-child(1) { .context-menu-option__label {
justify-self: start; justify-self: start;
margin-inline-end: 20px; margin-inline-end: 20px;
} }
div:nth-child(2) { .context-menu-option__shortcut {
justify-self: end; justify-self: end;
opacity: 0.6; opacity: 0.6;
font-size: 0.7rem; font-size: 0.7rem;
@ -63,7 +63,7 @@
background-color: var(--select-highlight-color); background-color: var(--select-highlight-color);
&.dangerous { &.dangerous {
div:nth-child(1) { .context-menu-option__label {
color: var(--popup-background-color); color: var(--popup-background-color);
} }
background-color: $oc-red-6; background-color: $oc-red-6;
@ -73,4 +73,18 @@
.context-menu-option:focus { .context-menu-option:focus {
z-index: 1; z-index: 1;
} }
@media #{$media-query} {
.context-menu-option {
display: block;
.context-menu-option__label {
margin-inline-end: 0;
}
.context-menu-option__shortcut {
display: none;
}
}
}
} }

4
src/components/ContextMenu.tsx
View File

@ -51,8 +51,8 @@ const ContextMenu = ({ options, onCloseRequest, top, left }: Props) => {
${checked ? "checkmark" : ""}`} ${checked ? "checkmark" : ""}`}
onClick={action} onClick={action}
> >
<div>{label}</div> <div className="context-menu-option__label">{label}</div>
<div> <div className="context-menu-option__shortcut">
{shortcutName {shortcutName
? getShortcutFromShortcutName(shortcutName) ? getShortcutFromShortcutName(shortcutName)
: ""} : ""}