-
Notifications
You must be signed in to change notification settings - Fork 15
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.
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
Feat/styling right click menu #114
Conversation
A quick screenshot would be generally appreciated for any UI changes :) |
src/App.scss
Outdated
} | ||
|
||
.excalidraw .context-menu-item-separator { | ||
border-top: 0.5px solid #adb5bd !important; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
border-top: 0.5px solid #adb5bd !important; | |
border-top: 0.5px solid var(--color-border) !important; |
src/App.scss
Outdated
margin-top: 0.25rem !important; | ||
margin-bottom: 0.25rem !important; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ideally we'd use spacing values that are calculated from --default-grid-baseline
https://docs.nextcloud.com/server/latest/developer_manual/html_css_design/css.html#element-structure-variables
src/App.scss
Outdated
|
||
.excalidraw .context-menu-item:hover { | ||
background-color: var(--color-background-hover) !important; | ||
border-radius: 6px !important; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should use a css variable
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Small nitpicks regarding usages of css variables, but otherwise looks good 👍
Signed-off-by: Hoang Pham <[email protected]>
4e3ce4b
to
f7fc3dc
Compare
Some screenshots of how it looks, not sure if it's okay :)
Full menu:
![image](https://private-user-images.githubusercontent.com/19475872/358557557-b984776b-c8c6-413b-9d1f-bd26ace6ba44.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxNDk2MjYsIm5iZiI6MTczOTE0OTMyNiwicGF0aCI6Ii8xOTQ3NTg3Mi8zNTg1NTc1NTctYjk4NDc3NmItYzhjNi00MTNiLTlkMWYtYmQyNmFjZTZiYTQ0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEwVDAxMDIwNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM4N2FkMjY0ZjJiNTQ3M2VhNzA3MDFiYTY2ZmUxM2U1ZDkzNzQ5YzRlNDc4ZmZkYWRiZDU4ODQ0NmZjZDkzYjMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.ObRO128JqoxosWmVJJVD1qSCMNM3jR-2R6MSDNJAqX0)
Partial:
![image](https://private-user-images.githubusercontent.com/19475872/358558595-a5e6a50f-9724-4a39-8f49-98d77a2e5175.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxNDk2MjYsIm5iZiI6MTczOTE0OTMyNiwicGF0aCI6Ii8xOTQ3NTg3Mi8zNTg1NTg1OTUtYTVlNmE1MGYtOTcyNC00YTM5LThmNDktOThkNzdhMmU1MTc1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEwVDAxMDIwNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM5MGVhNmMxZjRiMDEwNjA5NjdhOTJhNzZlODdjODE5NjAwNDA2MmQyMmZhODc4YWEzNWU0YTA5YTg2YzBlZWEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.yB-9tGfCB-ZW4rR0vu_VuTJTmMxxs9gk4QRuqVX4cFw)
Mobile:
![image](https://private-user-images.githubusercontent.com/19475872/358558686-c18649e0-4e61-4569-afe4-73a97cda9be0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxNDk2MjYsIm5iZiI6MTczOTE0OTMyNiwicGF0aCI6Ii8xOTQ3NTg3Mi8zNTg1NTg2ODYtYzE4NjQ5ZTAtNGU2MS00NTY5LWFmZTQtNzNhOTdjZGE5YmUwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEwVDAxMDIwNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRjYjRiOGNjZGI4NzBkNDc4ZWMyZTcwZTRlMjRhNTkzODg5OGI4ZjA4ZmVkMjU4YTczOWUyYTYyNTYxMmJhMDcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.877yxs5YBEij6CJ-VTosqhFVU9sLfAWyuewp6zHkriQ)
Hover:
![image](https://private-user-images.githubusercontent.com/19475872/358558773-71405148-f21c-4c86-82bf-869f55b42f93.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxNDk2MjYsIm5iZiI6MTczOTE0OTMyNiwicGF0aCI6Ii8xOTQ3NTg3Mi8zNTg1NTg3NzMtNzE0MDUxNDgtZjIxYy00Yzg2LTgyYmYtODY5ZjU1YjQyZjkzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEwVDAxMDIwNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWUyMjMxOGMyMGFiYWVkN2JiOGFmMGUzNTg2MDRmNTBkMGI1NmExYzQzMjgxYzA2YTUzM2RjNmRhYjU5ODIxMWUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.i5fdomWs96gbF5h2YQ1Pr8EXENasQn5ijt3ekucOl-s)