Theme page
This commit is contained in:
parent
0982a91c03
commit
af3db6d164
376
Context Menus/css/style.sass
Normal file
376
Context Menus/css/style.sass
Normal file
|
|
@ -0,0 +1,376 @@
|
|||
$red: rgb(182, 100, 103)
|
||||
$orange: rgb(206, 170, 111)
|
||||
$yellow: rgb(217, 188, 140)
|
||||
$green: rgb(140, 151, 125)
|
||||
$blue: rgb(141, 163, 185)
|
||||
$purple: rgb(169, 136, 176)
|
||||
|
||||
$fg100: rgb(248,248,250)
|
||||
$fg200: rgb(225,227,233)
|
||||
$fg300: rgb(203,205,216)
|
||||
$fg400: rgb(180,184,200)
|
||||
$fg500: rgb(146,150,169)
|
||||
$fg600: rgb(78,83,106)
|
||||
|
||||
$bg100: rgb(61,66,83)
|
||||
$bg200: rgb(50,54,68)
|
||||
$bg300: rgb(42,45,57)
|
||||
$bg400: rgb(37,39,50)
|
||||
$bg500: rgb(32,35,44)
|
||||
$bg600: rgb(28,30,38)
|
||||
|
||||
$primary: $blue
|
||||
$success: $green
|
||||
$warning: $orange
|
||||
$critical: $red
|
||||
|
||||
*
|
||||
box-sizing: border-box
|
||||
|
||||
html
|
||||
margin: 0
|
||||
padding: 0.5rem
|
||||
|
||||
height: 100vh
|
||||
|
||||
font-size: 16px
|
||||
font-family: 'Roboto', sans-serif
|
||||
font-weight: 400
|
||||
|
||||
color: $fg100
|
||||
background-color: $bg500
|
||||
|
||||
body
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
display: grid
|
||||
grid-template-columns: 20rem 1fr
|
||||
grid-template-rows: 1fr
|
||||
grid-template-areas: "sidebar content"
|
||||
|
||||
border: 1px solid $bg200
|
||||
border-radius: 6px
|
||||
|
||||
overflow: hidden
|
||||
|
||||
> button
|
||||
margin: 0
|
||||
padding: 0.5rem 1rem
|
||||
|
||||
width: auto
|
||||
height: 3rem
|
||||
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
color: $fg100
|
||||
background-color: $bg300
|
||||
border: 1px solid $bg200
|
||||
border-radius: 3px
|
||||
|
||||
cursor: pointer
|
||||
|
||||
transition: all 0.2s ease-in-out
|
||||
|
||||
&:hover
|
||||
background-color: $bg200
|
||||
|
||||
nav
|
||||
margin: 0
|
||||
padding: 0.5rem
|
||||
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
grid-area: sidebar
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: flex-start
|
||||
align-items: flex-start
|
||||
gap: 0.5rem
|
||||
|
||||
border-right: 1px solid $bg200
|
||||
|
||||
> button
|
||||
margin: 0
|
||||
padding: 0.5rem
|
||||
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
align-items: center
|
||||
|
||||
color: $fg400
|
||||
background-color: transparent
|
||||
border: none
|
||||
border-radius: 3px
|
||||
|
||||
cursor: pointer
|
||||
|
||||
transition: all 0.2s ease-in-out
|
||||
|
||||
&:hover
|
||||
background-color: $bg400
|
||||
|
||||
> hr
|
||||
margin: 0 auto
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
height: 1px
|
||||
|
||||
border: none
|
||||
background-color: $bg200
|
||||
|
||||
main
|
||||
margin: 0
|
||||
padding: 0.5rem
|
||||
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
grid-area: content
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: flex-start
|
||||
align-items: flex-start
|
||||
gap: 0.5rem
|
||||
|
||||
> button
|
||||
margin: 0
|
||||
padding: 0.5rem 1rem
|
||||
|
||||
width: auto
|
||||
height: 3rem
|
||||
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
color: $fg100
|
||||
background-color: $bg300
|
||||
border: 1px solid $bg200
|
||||
border-radius: 3px
|
||||
|
||||
cursor: pointer
|
||||
|
||||
transition: all 0.2s ease-in-out
|
||||
|
||||
&:hover
|
||||
background-color: $bg200
|
||||
|
||||
.code-block
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
border: 1px solid $bg200
|
||||
border-radius: 6px
|
||||
|
||||
color: $fg100
|
||||
background-color: $bg600
|
||||
|
||||
overflow: hidden
|
||||
|
||||
pre
|
||||
margin: 0
|
||||
padding: 0.5rem
|
||||
|
||||
white-space: pre-wrap
|
||||
|
||||
display: block
|
||||
|
||||
font-size: 0.8rem
|
||||
font-weight: 400
|
||||
|
||||
.code-header
|
||||
margin: 0
|
||||
padding: 0.3rem 0.3rem 0.3rem 0.8rem
|
||||
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
|
||||
background-color: $bg500
|
||||
border-bottom: 1px solid $bg200
|
||||
|
||||
p
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: auto
|
||||
height: auto
|
||||
|
||||
font-size: 1rem
|
||||
font-weight: 400
|
||||
color: $fg400
|
||||
|
||||
button
|
||||
margin: 0
|
||||
padding: 0.25rem 0.5rem
|
||||
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
color: $fg100
|
||||
background-color: $bg500
|
||||
border: none
|
||||
border-radius: 3px
|
||||
|
||||
cursor: pointer
|
||||
|
||||
&:hover
|
||||
background-color: $bg200
|
||||
|
||||
.contextMenuClose
|
||||
width: 100vw
|
||||
height: 100vh
|
||||
|
||||
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: $bg300
|
||||
border: 1px solid $bg200
|
||||
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: $fg300
|
||||
|
||||
.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: $bg300
|
||||
color: $fg300
|
||||
border: none
|
||||
border-radius: 3px
|
||||
|
||||
cursor: pointer
|
||||
.contextMenuItem:hover
|
||||
background-color: $bg200
|
||||
.contextMenuItem__critical
|
||||
color: $critical
|
||||
//.contextMenuItem__critical:hover
|
||||
// background-color: rgba($critical, 0.1)
|
||||
.contextMenuItem__warning
|
||||
color: $warning
|
||||
//.contextMenuItem__warning:hover
|
||||
// background-color: rgba($warning, 0.1)
|
||||
.contextMenuItem__success
|
||||
color: $success
|
||||
//.contextMenuItem__success:hover
|
||||
// background-color: rgba($success, 0.1)
|
||||
.contextMenuItem__info
|
||||
color: $primary
|
||||
//.contextMenuItem__info:hover
|
||||
// background-color: rgba($primary, 0.1)
|
||||
|
||||
.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: $bg200
|
||||
|
||||
.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)
|
||||
51
Context Menus/index.html
Normal file
51
Context Menus/index.html
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>JS menus</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/examples.js"></script>
|
||||
<script src="js/contextMenu.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav>
|
||||
<button>Context Menus</button>
|
||||
<button>Dropdowns</button>
|
||||
<button>Modals</button>
|
||||
<hr>
|
||||
<button>Code blocks</button>
|
||||
</nav>
|
||||
<main>
|
||||
<button onclick="contextAtMouse(this)">Mouse</button>
|
||||
<button onclick="contextAtButton(this)">Button</button>
|
||||
<button onclick="contextAtCenter(this)">Center</button>
|
||||
<button onclick="contextImageAction(this)">Image actions</button>
|
||||
|
||||
<div class="code-block">
|
||||
<div class="code-header">
|
||||
<p>Json</p>
|
||||
<button>Copy</button>
|
||||
</div>
|
||||
<pre>
|
||||
{
|
||||
'value': 'Edit',
|
||||
'icon': edit,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'critical'
|
||||
},
|
||||
{
|
||||
'value': 'Copy',
|
||||
'icon': copy,
|
||||
'function': copyToClipboard,
|
||||
'type': 'normal'
|
||||
},
|
||||
</pre>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
type - Type of menu item (critical, warning, success, info)
|
||||
*/
|
||||
|
||||
function showContextMenu(obj, menu) {
|
||||
function showContextMenu(obj, menu, position='mouse') {
|
||||
// If the context menu is already open, close it first
|
||||
if (document.querySelector(".contextMenu")) {
|
||||
dissmissContextMenu();
|
||||
|
|
@ -85,28 +85,43 @@ function showContextMenu(obj, menu) {
|
|||
document.body.appendChild(contextMenu);
|
||||
document.body.appendChild(closeSpan);
|
||||
|
||||
// Get position of the item clicked or the mouse
|
||||
try {
|
||||
if (position == 'mouse') {
|
||||
var posX = event.clientX + 5;
|
||||
var posY = event.clientY + 5;
|
||||
} else if (position == 'button') {
|
||||
var posX = obj.offsetLeft + (obj.offsetWidth / 2) - (contextMenu.offsetWidth / 2);
|
||||
var posY = obj.offsetTop + obj.offsetHeight + 5;
|
||||
} else if (position == 'center') {
|
||||
var posX = (window.innerWidth / 2) - (contextMenu.offsetWidth / 2);
|
||||
var posY = (window.innerHeight / 2) - (contextMenu.offsetHeight / 2);
|
||||
} else {
|
||||
var posX = event.clientX + 5;
|
||||
var posY = event.clientY + 5;
|
||||
} catch (error) {
|
||||
var posX = obj.offsetLeft + (bj.offsetWidth * 0.6) + 2;
|
||||
var posY = obj.offsetTop + obj.offsetHeight + 2
|
||||
}
|
||||
|
||||
|
||||
// Move the context menu if it is off the screen
|
||||
if (posX + contextMenu.offsetWidth > window.innerWidth) {
|
||||
posX = window.innerWidth - (contextMenu.offsetWidth + 5);
|
||||
} else if (posX < 0) {
|
||||
posX = 5;
|
||||
}
|
||||
if (posY + contextMenu.offsetHeight > window.innerHeight) {
|
||||
posY = window.innerHeight - (contextMenu.offsetHeight + 5);
|
||||
if (posY < 0) {
|
||||
posY = 5;
|
||||
}
|
||||
|
||||
contextMenu.style.left = posX + "px";
|
||||
contextMenu.style.top = posY + "px";
|
||||
|
||||
// Timeout otherwise animation doesn't work
|
||||
setTimeout(function() {
|
||||
contextMenu.classList.add("contextMenu__show");
|
||||
if (position == 'mouse') {
|
||||
contextMenu.classList.add("contextMenu__show--mouse");
|
||||
} else if (position == 'button') {
|
||||
contextMenu.classList.add("contextMenu__show--button");
|
||||
} else if (position == 'center') {
|
||||
contextMenu.classList.add("contextMenu__show--center");
|
||||
} else {
|
||||
contextMenu.classList.add("contextMenu__show");
|
||||
}
|
||||
}, 1);
|
||||
}
|
||||
|
||||
|
|
@ -127,4 +142,11 @@ function dissmissContextMenu() {
|
|||
menu.remove();
|
||||
}, 500);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("resize", function() {
|
||||
// If the context menu is already open, close it first
|
||||
if (document.querySelector(".contextMenu")) {
|
||||
dissmissContextMenu();
|
||||
}
|
||||
});
|
||||
122
Context Menus/js/examples.js
Normal file
122
Context Menus/js/examples.js
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
function contextAtMouse(obj) {
|
||||
showContextMenu(obj, [
|
||||
{
|
||||
'value': 'gwagwa',
|
||||
'function': dissmissContextMenu
|
||||
},
|
||||
{
|
||||
'value': 'gwagwa',
|
||||
'function': dissmissContextMenu
|
||||
}
|
||||
])
|
||||
}
|
||||
function contextAtButton(obj) {
|
||||
showContextMenu(obj, [
|
||||
{
|
||||
'value': 'gwagwa',
|
||||
'function': dissmissContextMenu
|
||||
},
|
||||
{
|
||||
'value': 'gwagwa',
|
||||
'function': dissmissContextMenu
|
||||
}
|
||||
], 'button')
|
||||
}
|
||||
function contextAtCenter(obj) {
|
||||
showContextMenu(obj, [
|
||||
{
|
||||
'value': 'gwagwa',
|
||||
'function': dissmissContextMenu
|
||||
},
|
||||
{
|
||||
'value': 'gwagwa',
|
||||
'function': dissmissContextMenu
|
||||
}
|
||||
], 'center')
|
||||
}
|
||||
|
||||
function contextImageAction(obj) {
|
||||
showContextMenu(obj, [
|
||||
{
|
||||
'value': 'title',
|
||||
'text': 'Image actions',
|
||||
},
|
||||
{
|
||||
'value': 'Copy Link',
|
||||
'icon': link,
|
||||
'function': dissmissContextMenu
|
||||
},
|
||||
{
|
||||
'value': 'Download',
|
||||
'icon': download,
|
||||
'function': dissmissContextMenu
|
||||
},
|
||||
{
|
||||
'value': 'divider',
|
||||
},
|
||||
{
|
||||
'value': 'Edit',
|
||||
'icon': edit,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'critical'
|
||||
},
|
||||
{
|
||||
'value': 'Delete',
|
||||
'icon': trash,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'critical'
|
||||
},
|
||||
{
|
||||
'value': 'divider',
|
||||
},
|
||||
{
|
||||
'value': 'Edit',
|
||||
'icon': edit,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'warning'
|
||||
},
|
||||
{
|
||||
'value': 'Delete',
|
||||
'icon': trash,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'warning'
|
||||
},
|
||||
{
|
||||
'value': 'divider',
|
||||
},
|
||||
{
|
||||
'value': 'Edit',
|
||||
'icon': edit,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'success'
|
||||
},
|
||||
{
|
||||
'value': 'Delete',
|
||||
'icon': trash,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'success'
|
||||
},
|
||||
{
|
||||
'value': 'divider',
|
||||
},
|
||||
{
|
||||
'value': 'Edit',
|
||||
'icon': edit,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'info'
|
||||
},
|
||||
{
|
||||
'value': 'Delete',
|
||||
'icon': trash,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'info'
|
||||
},
|
||||
{
|
||||
'value': 'divider',
|
||||
},
|
||||
{
|
||||
'value': 'gwagwa',
|
||||
'function': dissmissContextMenu
|
||||
}
|
||||
])
|
||||
};
|
||||
14
Context Menus/js/main.js
Normal file
14
Context Menus/js/main.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Icons
|
||||
var link = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 24 24" fill="currentColor"><path d="M3.19 9.345a.97.97 0 0 1 1.37 0 .966.966 0 0 1 0 1.367l-2.055 2.052a1.932 1.932 0 0 0 0 2.735 1.94 1.94 0 0 0 2.74 0l4.794-4.787a.966.966 0 0 0 0-1.367.966.966 0 0 1 0-1.368.97.97 0 0 1 1.37 0 2.898 2.898 0 0 1 0 4.103l-4.795 4.787a3.879 3.879 0 0 1-5.48 0 3.864 3.864 0 0 1 0-5.47L3.19 9.344zm11.62-.69a.97.97 0 0 1-1.37 0 .966.966 0 0 1 0-1.367l2.055-2.052a1.932 1.932 0 0 0 0-2.735 1.94 1.94 0 0 0-2.74 0L7.962 7.288a.966.966 0 0 0 0 1.367.966.966 0 0 1 0 1.368.97.97 0 0 1-1.37 0 2.898 2.898 0 0 1 0-4.103l4.795-4.787a3.879 3.879 0 0 1 5.48 0 3.864 3.864 0 0 1 0 5.47L14.81 8.656z"></path></svg>'
|
||||
var download = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor"><path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path></svg>';
|
||||
var edit = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2.5 24 24" fill="currentColor"><path d="M12.238 5.472L3.2 14.51l-.591 2.016 1.975-.571 9.068-9.068-1.414-1.415zM13.78 3.93l1.414 1.414 1.318-1.318a.5.5 0 0 0 0-.707l-.708-.707a.5.5 0 0 0-.707 0L13.781 3.93zm3.439-2.732l.707.707a2.5 2.5 0 0 1 0 3.535L5.634 17.733l-4.22 1.22a1 1 0 0 1-1.237-1.241l1.248-4.255 12.26-12.26a2.5 2.5 0 0 1 3.535 0z"></path></svg>';
|
||||
var trash = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2 24 24" fill="currentColor"><path d="M6 2V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-.133l-.68 10.2a3 3 0 0 1-2.993 2.8H5.826a3 3 0 0 1-2.993-2.796L2.137 7H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4zm10 2H2v1h14V4zM4.141 7l.687 10.068a1 1 0 0 0 .998.932h6.368a1 1 0 0 0 .998-.934L13.862 7h-9.72zM7 8a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1z"></path></svg>';
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.querySelectorAll('pre').forEach((block) => {
|
||||
var code = block.innerHTML;
|
||||
code = code.substring(0, code.lastIndexOf('\n'));
|
||||
block.innerHTML = code;
|
||||
});
|
||||
});
|
||||
|
|
@ -1,182 +0,0 @@
|
|||
$primary: rgb(66, 130, 167)
|
||||
$success: rgb(95, 175, 99)
|
||||
$warning: rgb(236, 136, 77)
|
||||
$critical: rgb(247, 111, 111)
|
||||
|
||||
$fg100: rgb(248,248,250)
|
||||
$fg200: rgb(225,227,233)
|
||||
$fg300: rgb(203,205,216)
|
||||
$fg400: rgb(180,184,200)
|
||||
$fg500: rgb(146,150,169)
|
||||
$fg600: rgb(78,83,106)
|
||||
|
||||
$bg100: rgb(61,66,83)
|
||||
$bg200: rgb(50,54,68)
|
||||
$bg300: rgb(42,45,57)
|
||||
$bg400: rgb(37,39,50)
|
||||
$bg500: rgb(32,35,44)
|
||||
$bg600: rgb(28,30,38)
|
||||
|
||||
*
|
||||
box-sizing: border-box
|
||||
|
||||
html
|
||||
font-size: 16px
|
||||
font-family: 'Roboto', sans-serif
|
||||
font-weight: 400
|
||||
color: $fg100
|
||||
background-color: $bg500
|
||||
|
||||
body
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: center
|
||||
align-items: center
|
||||
gap: 1rem
|
||||
|
||||
> button
|
||||
margin: 0
|
||||
padding: 0.5rem 1rem
|
||||
|
||||
width: auto
|
||||
height: 3rem
|
||||
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
color: $fg100
|
||||
background-color: $bg300
|
||||
border: 1px solid $bg200
|
||||
border-radius: 3px
|
||||
|
||||
cursor: pointer
|
||||
|
||||
transition: all 0.2s ease-in-out
|
||||
|
||||
&:hover
|
||||
background-color: $bg200
|
||||
|
||||
.contextMenuClose
|
||||
width: 100vw
|
||||
height: 100vh
|
||||
|
||||
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: $bg300
|
||||
border: 1px solid $bg200
|
||||
border-radius: 6px
|
||||
|
||||
overflow: hidden
|
||||
|
||||
transition: all 0.2s ease-in-out
|
||||
transform-origin: top left
|
||||
opacity: 0
|
||||
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: $fg300
|
||||
|
||||
.contextMenuItem
|
||||
margin: 0
|
||||
padding: 0.25rem
|
||||
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: flex-start
|
||||
align-items: center
|
||||
gap: 0.5rem
|
||||
|
||||
background-color: $bg300
|
||||
color: $fg300
|
||||
border: none
|
||||
border-radius: 3px
|
||||
|
||||
cursor: pointer
|
||||
.contextMenuItem:hover
|
||||
background-color: $bg200
|
||||
.contextMenuItem__critical
|
||||
color: $critical
|
||||
//.contextMenuItem__critical:hover
|
||||
// background-color: rgba($critical, 0.1)
|
||||
.contextMenuItem__warning
|
||||
color: $warning
|
||||
//.contextMenuItem__warning:hover
|
||||
// background-color: rgba($warning, 0.1)
|
||||
.contextMenuItem__success
|
||||
color: $success
|
||||
//.contextMenuItem__success:hover
|
||||
// background-color: rgba($success, 0.1)
|
||||
.contextMenuItem__info
|
||||
color: $primary
|
||||
//.contextMenuItem__info:hover
|
||||
// background-color: rgba($primary, 0.1)
|
||||
|
||||
.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: 90%
|
||||
height: 1px
|
||||
|
||||
border: none
|
||||
background-color: $bg200
|
||||
|
||||
.contextMenu__show
|
||||
opacity: 1
|
||||
transform: scale(1, 1)
|
||||
|
||||
.contextMenu__hide
|
||||
opacity: 0
|
||||
transform: scale(0, 0)
|
||||
110
Menus/index.html
110
Menus/index.html
|
|
@ -1,110 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>JS menus</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<button onclick="showContextMenu(this, [{'value': 'gwagwa', 'function': dissmissContextMenu},{'value': 'gwagwa', 'function': dissmissContextMenu}])">Show menu</button>
|
||||
<button onclick="imageActions(this)">Image actions</button>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script>
|
||||
function imageActions(obj) {
|
||||
var link = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 24 24" fill="currentColor"><path d="M3.19 9.345a.97.97 0 0 1 1.37 0 .966.966 0 0 1 0 1.367l-2.055 2.052a1.932 1.932 0 0 0 0 2.735 1.94 1.94 0 0 0 2.74 0l4.794-4.787a.966.966 0 0 0 0-1.367.966.966 0 0 1 0-1.368.97.97 0 0 1 1.37 0 2.898 2.898 0 0 1 0 4.103l-4.795 4.787a3.879 3.879 0 0 1-5.48 0 3.864 3.864 0 0 1 0-5.47L3.19 9.344zm11.62-.69a.97.97 0 0 1-1.37 0 .966.966 0 0 1 0-1.367l2.055-2.052a1.932 1.932 0 0 0 0-2.735 1.94 1.94 0 0 0-2.74 0L7.962 7.288a.966.966 0 0 0 0 1.367.966.966 0 0 1 0 1.368.97.97 0 0 1-1.37 0 2.898 2.898 0 0 1 0-4.103l4.795-4.787a3.879 3.879 0 0 1 5.48 0 3.864 3.864 0 0 1 0 5.47L14.81 8.656z"></path></svg>'
|
||||
var download = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor"><path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path></svg>';
|
||||
var edit = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2.5 24 24" fill="currentColor"><path d="M12.238 5.472L3.2 14.51l-.591 2.016 1.975-.571 9.068-9.068-1.414-1.415zM13.78 3.93l1.414 1.414 1.318-1.318a.5.5 0 0 0 0-.707l-.708-.707a.5.5 0 0 0-.707 0L13.781 3.93zm3.439-2.732l.707.707a2.5 2.5 0 0 1 0 3.535L5.634 17.733l-4.22 1.22a1 1 0 0 1-1.237-1.241l1.248-4.255 12.26-12.26a2.5 2.5 0 0 1 3.535 0z"></path></svg>';
|
||||
var trash = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2 24 24" fill="currentColor"><path d="M6 2V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-.133l-.68 10.2a3 3 0 0 1-2.993 2.8H5.826a3 3 0 0 1-2.993-2.796L2.137 7H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4zm10 2H2v1h14V4zM4.141 7l.687 10.068a1 1 0 0 0 .998.932h6.368a1 1 0 0 0 .998-.934L13.862 7h-9.72zM7 8a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1z"></path></svg>';
|
||||
|
||||
showContextMenu(obj, [
|
||||
{
|
||||
'value': 'title',
|
||||
'text': 'Image actions',
|
||||
},
|
||||
{
|
||||
'value': 'Copy Link',
|
||||
'icon': link,
|
||||
'function': dissmissContextMenu
|
||||
},
|
||||
{
|
||||
'value': 'Download',
|
||||
'icon': download,
|
||||
'function': dissmissContextMenu
|
||||
},
|
||||
{
|
||||
'value': 'divider',
|
||||
},
|
||||
{
|
||||
'value': 'Edit',
|
||||
'icon': edit,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'critical'
|
||||
},
|
||||
{
|
||||
'value': 'Delete',
|
||||
'icon': trash,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'critical'
|
||||
},
|
||||
{
|
||||
'value': 'divider',
|
||||
},
|
||||
{
|
||||
'value': 'Edit',
|
||||
'icon': edit,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'warning'
|
||||
},
|
||||
{
|
||||
'value': 'Delete',
|
||||
'icon': trash,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'warning'
|
||||
},
|
||||
{
|
||||
'value': 'divider',
|
||||
},
|
||||
{
|
||||
'value': 'Edit',
|
||||
'icon': edit,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'success'
|
||||
},
|
||||
{
|
||||
'value': 'Delete',
|
||||
'icon': trash,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'success'
|
||||
},
|
||||
{
|
||||
'value': 'divider',
|
||||
},
|
||||
{
|
||||
'value': 'Edit',
|
||||
'icon': edit,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'info'
|
||||
},
|
||||
{
|
||||
'value': 'Delete',
|
||||
'icon': trash,
|
||||
'function': dissmissContextMenu,
|
||||
'type': 'info'
|
||||
},
|
||||
{
|
||||
'value': 'divider',
|
||||
},
|
||||
{
|
||||
'value': 'gwagwa',
|
||||
'function': dissmissContextMenu
|
||||
}
|
||||
],
|
||||
)
|
||||
};
|
||||
|
||||
</script>
|
||||
Loading…
Reference in a new issue