Add context menu script

2025-06-29 03:26:16 +00:00 · 2023-09-24 19:53:14 +01:00 · 2023-09-24 19:53:14 +01:00 · 8a4fe891ef
commit 8a4fe891ef
parent 2db4d0a6ea
9 changed files with 463 additions and 96 deletions
--- a/onlylegs/static/sass/components/context-menu.sass
+++ b/onlylegs/static/sass/components/context-menu.sass
@ -0,0 +1,128 @@
+.contextMenuClose
+    width: 100%
+    height: 100%
+
+    position: fixed
+    top: 0
+    left: 0
+
+    background-color: transparent
+    z-index: 99998
+
+.contextMenu
+    margin: 0
+    padding: 0.25rem
+
+    width: calc( 100vw - 10px )
+    height: auto
+    max-width: 300px
+
+    position: absolute
+
+    display: flex
+    flex-direction: column
+    justify-content: flex-start
+    align-items: flex-start
+    gap: 0.25rem
+
+    background-color: RGB($bg-300)
+    border: 1px solid RGB($bg-200)
+    border-radius: 6px
+
+    overflow: hidden
+
+    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
+    transform-origin: center center
+    opacity: 0.5
+    transform: scale(0, 0)
+    z-index: 99999
+
+.contextMenuTitle
+    margin: 0
+    padding: 0.25rem 0.5rem
+
+    width: 100%
+
+    text-align: center
+    font-size: 1.2rem
+    font-weight: 400
+    color: RGB($fg-white)
+
+.contextMenuItem
+    margin: 0
+    padding: 0.5rem
+
+    width: 100%
+    height: auto
+
+    display: flex
+    flex-direction: row
+    justify-content: flex-start
+    align-items: center
+    gap: 0.5rem
+
+    background-color: RGB($bg-300)
+    color: RGB($fg-white)
+    border: none
+    border-radius: 3px
+
+    cursor: pointer
+.contextMenuItem:hover
+    background-color: RGB($bg-200)
+.contextMenuItem__critical
+    color: RGB($critical)
+.contextMenuItem__warning
+    color: RGB($warning)
+.contextMenuItem__success
+    color: RGB($success)
+.contextMenuItem__info
+    color: RGB($primary)
+
+.contextMenuText
+    margin: 0
+    padding: 0
+
+    font-size: 1rem
+    font-weight: 400
+
+.contextMenuIcon
+    margin: 0
+    padding: 0
+
+    width: 1.25rem
+    height: 1.25rem
+
+    display: flex
+    justify-content: center
+    align-items: center
+
+.contextMenuDivider
+    margin: 0 auto
+    padding: 0
+
+    width: 100%
+    height: 1px
+
+    border: none
+    background-color: RGB($bg-200)
+
+.contextMenu__show
+    opacity: 1
+    transform: scale(1, 1)
+
+.contextMenu__show--mouse
+    opacity: 1
+    transform: scale(1, 1)
+    transform-origin: top left
+.contextMenu__show--button
+    opacity: 1
+    transform: scale(1, 1)
+    transform-origin: top center
+.contextMenu__show--center
+    opacity: 1
+    transform: scale(1, 1)
+    transform-origin: center center
+
+.contextMenu__hide
+    opacity: 0
+    transform: scale(0, 0)