Patch #44260 » 0001-Refactor-context-menus-to-use-the-new-dropdown-compo.patch
| app/assets/javascripts/context_menu.js | ||
|---|---|---|
| 90 | 90 |
if ($('#context-menu').length < 1) {
|
| 91 | 91 |
var menu = document.createElement("div");
|
| 92 | 92 |
menu.setAttribute("id", "context-menu");
|
| 93 |
menu.setAttribute("class", "dropdown-content");
|
|
| 93 | 94 |
menu.setAttribute("style", "display:none;");
|
| 94 | 95 |
document.getElementsByTagName("body")[0].appendChild(menu);
|
| 95 | 96 |
} |
| app/assets/stylesheets/application.css | ||
|---|---|---|
| 116 | 116 |
} |
| 117 | 117 | |
| 118 | 118 |
#account .dropdown-content .user-info {
|
| 119 |
padding-block: 10px;
|
|
| 119 |
padding-block: 6px;
|
|
| 120 | 120 |
padding-inline: 16px; |
| 121 | 121 |
color: var(--oc-gray-9); |
| 122 | 122 |
} |
| app/assets/stylesheets/context_menu.css | ||
|---|---|---|
| 4 | 4 |
* This code is released under the GNU General Public License. |
| 5 | 5 |
*/ |
| 6 | 6 | |
| 7 |
#context-menu { position: absolute; z-index: 40; font-size: 0.9em;}
|
|
| 8 | ||
| 9 |
#context-menu ul, #context-menu li, #context-menu a {
|
|
| 10 |
margin:0; |
|
| 11 |
padding:0; |
|
| 12 |
border:0; |
|
| 13 |
} |
|
| 7 |
#context-menu { position: absolute; z-index: 1000; font-size: 0.9em;}
|
|
| 8 |
#context-menu.dropdown-content { inset-block-start: auto; inset-inline-end: auto; margin-block-start: 0; }
|
|
| 14 | 9 | |
| 15 | 10 |
#context-menu ul {
|
| 16 |
min-inline-size: 150px;
|
|
| 11 |
min-inline-size: 160px;
|
|
| 17 | 12 |
max-inline-size: 300px; |
| 18 |
border: 1px solid var(--oc-gray-4); |
|
| 19 |
background:white; |
|
| 20 | 13 |
list-style:none; |
| 21 |
padding:2px; |
|
| 22 |
border-radius:2px; |
|
| 23 |
box-shadow: 0 2px 4px rgba(var(--oc-gray-9-rgb), 0.1); |
|
| 24 | 14 |
} |
| 25 | 15 | |
| 26 | 16 |
#context-menu li {
|
| 27 | 17 |
position:relative; |
| 28 |
padding:1px; |
|
| 29 | 18 |
z-index:39; |
| 30 |
border:1px solid white; |
|
| 31 |
display: flex; |
|
| 32 | 19 |
} |
| 33 |
#context-menu li.folder ul { position: absolute; inset-block-start: -2px; max-block-size: 300px; overflow: hidden; overflow-y: auto; }
|
|
| 20 |
#context-menu li.folder ul { position: absolute; inset-block-start: -4px; max-block-size: 300px; overflow: hidden; overflow-y: auto; }
|
|
| 34 | 21 |
#context-menu li.folder>ul { inset-inline-start: 100%; }
|
| 35 | 22 | |
| 36 | 23 |
#context-menu.reverse-y li.folder>ul, #context-menu li.folder.up>ul { inset-block: auto 0; }
|
| ... | ... | |
| 38 | 25 |
#context-menu.reverse-x li.folder>ul { inset-inline-end: 100%; }
|
| 39 | 26 | |
| 40 | 27 |
#context-menu.reverse-y li.folder.down>ul {
|
| 41 |
position: absolute; inset-block: -2px auto; max-block-size: 300px; overflow: hidden; overflow-y: auto;
|
|
| 28 |
position: absolute; inset-block: -4px auto; max-block-size: 300px; overflow: hidden; overflow-y: auto;
|
|
| 42 | 29 |
} |
| 43 | 30 | |
| 44 | 31 |
#context-menu a {
|
| 45 | 32 |
text-decoration:none !important; |
| 46 |
padding-block: 2px; |
|
| 47 |
padding-inline: 8px; |
|
| 33 |
padding-block: 6px; |
|
| 34 |
display: flex; |
|
| 35 |
align-items: center; |
|
| 48 | 36 |
} |
| 49 | 37 |
#context-menu li>a { flex-grow: 1; }
|
| 50 | 38 |
#context-menu a.disabled, #context-menu a.disabled:hover {color: var(--oc-gray-5);}
|
| 51 |
#context-menu li a.submenu { padding-inline-start: 28px;}
|
|
| 52 |
#context-menu li:hover { border:1px solid var(--oc-blue-8); background-color:var(--oc-blue-0); border-radius:3px; }
|
|
| 53 | 39 |
#context-menu a:hover {color:var(--oc-blue-9);}
|
| 54 |
#context-menu li.folder ul li a:not(.icon) {
|
|
| 55 |
padding-inline-start: 28px; |
|
| 56 |
} |
|
| 57 | 40 |
#context-menu li.folder:hover { z-index:40; }
|
| 58 | 41 |
#context-menu ul ul, #context-menu li:hover ul ul { display:none; }
|
| 59 | 42 |
#context-menu li:hover ul, #context-menu li:hover li:hover ul { display:block; }
|
| app/assets/stylesheets/dropdown.css | ||
|---|---|---|
| 17 | 17 |
} |
| 18 | 18 | |
| 19 | 19 |
.dropdown-content {
|
| 20 |
/* Configuration Variables */ |
|
| 21 |
--dropdown-bg: var(--oc-white); |
|
| 22 |
--dropdown-border: var(--oc-gray-4); |
|
| 23 |
--dropdown-shadow: rgba(var(--oc-black-rgb), 0.1); |
|
| 24 |
--dropdown-item-padding-block: 6px; |
|
| 25 |
--dropdown-item-padding-inline: 16px; |
|
| 26 |
--dropdown-hover-bg: var(--oc-gray-1); |
|
| 27 |
--dropdown-active-color: var(--oc-blue-9); |
|
| 28 | ||
| 20 | 29 |
position: absolute; |
| 21 | 30 |
inset-block-start: 100%; |
| 22 | 31 |
inset-inline-end: 0; |
| 23 |
background-color: var(--oc-white);
|
|
| 24 |
border: 1px solid var(--oc-gray-4);
|
|
| 32 |
background-color: var(--dropdown-bg);
|
|
| 33 |
border: 1px solid var(--dropdown-border);
|
|
| 25 | 34 |
border-radius: 4px; |
| 26 |
box-shadow: 0 4px 6px rgba(var(--oc-black-rgb), 0.1);
|
|
| 35 |
box-shadow: 0 4px 6px var(--dropdown-shadow);
|
|
| 27 | 36 |
z-index: 1000; |
| 28 | 37 |
min-inline-size: 160px; |
| 29 | 38 |
margin-block-start: 4px; |
| 39 |
padding-block: 4px; |
|
| 30 | 40 |
} |
| 31 | 41 | |
| 32 | 42 |
.dropdown-content ul {
|
| 33 | 43 |
list-style: none; |
| 34 | 44 |
margin: 0; |
| 35 | 45 |
padding: 0; |
| 46 |
border: 0; |
|
| 47 |
} |
|
| 48 | ||
| 49 |
.dropdown-content li {
|
|
| 50 |
position: relative; |
|
| 51 |
display: flex; |
|
| 52 |
align-items: center; |
|
| 53 |
width: 100%; |
|
| 54 |
margin: 0; |
|
| 55 |
padding: 0; |
|
| 56 |
border: 0; |
|
| 36 | 57 |
} |
| 37 | 58 | |
| 38 | 59 |
.dropdown-content li a, .dropdown-content .dropdown-items a {
|
| 39 | 60 |
display: flex; |
| 40 |
padding-block: 8px; |
|
| 41 |
padding-inline: 16px; |
|
| 61 |
align-items: center; |
|
| 62 |
flex-grow: 1; |
|
| 63 |
padding-block: var(--dropdown-item-padding-block); |
|
| 64 |
padding-inline: var(--dropdown-item-padding-inline); |
|
| 42 | 65 |
font-weight: normal; |
| 43 | 66 |
margin: 0; |
| 67 |
border: 0; |
|
| 68 |
text-decoration: none; |
|
| 69 |
} |
|
| 70 | ||
| 71 |
.dropdown-content li a.disabled {
|
|
| 72 |
color: var(--oc-gray-5) !important; |
|
| 73 |
cursor: not-allowed; |
|
| 74 |
} |
|
| 75 | ||
| 76 |
.dropdown-content li:hover:not(:has(> a.disabled)), |
|
| 77 |
.dropdown-content .dropdown-items a:hover {
|
|
| 78 |
background-color: var(--dropdown-hover-bg); |
|
| 44 | 79 |
} |
| 45 | 80 | |
| 46 |
.dropdown-content li a:hover, .dropdown-content .dropdown-items a:hover {
|
|
| 47 |
background-color: var(--oc-gray-1); |
|
| 48 |
color: var(--oc-blue-9);
|
|
| 81 |
.dropdown-content li:hover:not(:has(> a.disabled)) > a,
|
|
| 82 |
.dropdown-content .dropdown-items a:hover {
|
|
| 83 |
color: var(--dropdown-active-color);
|
|
| 49 | 84 |
text-decoration: none; |
| 50 | 85 |
} |
| 51 | 86 | |
| 52 |
.dropdown-content li a:hover .icon-svg, .dropdown-content .dropdown-items a:hover .icon-svg {
|
|
| 53 |
stroke: var(--oc-blue-9); |
|
| 87 |
.dropdown-content li:hover:not(:has(> a.disabled)) .icon-svg, |
|
| 88 |
.dropdown-content .dropdown-items a:hover .icon-svg {
|
|
| 89 |
stroke: var(--dropdown-active-color); |
|
| 90 |
} |
|
| 91 | ||
| 92 |
/* Align text of all items identically if any item inside the dropdown contains an icon */ |
|
| 93 |
.dropdown-content:has(.icon-svg) li a, |
|
| 94 |
.dropdown-content:has(.icon-svg) .dropdown-items a {
|
|
| 95 |
padding-inline-start: 36px; |
|
| 96 |
} |
|
| 97 | ||
| 98 |
.dropdown-content li a .icon-svg, |
|
| 99 |
.dropdown-content .dropdown-items a .icon-svg {
|
|
| 100 |
position: absolute; |
|
| 101 |
inset-inline-start: 12px; |
|
| 102 |
} |
|
| 103 | ||
| 104 |
/* Submenu / Nested List support */ |
|
| 105 |
.dropdown-content li ul {
|
|
| 106 |
background-color: var(--dropdown-bg); |
|
| 107 |
border: 1px solid var(--dropdown-border); |
|
| 108 |
border-radius: 4px; |
|
| 109 |
box-shadow: 0 4px 6px var(--dropdown-shadow); |
|
| 110 |
padding-block: 4px; |
|
| 54 | 111 |
} |
| 55 | 112 | |
| 56 | 113 |
.dropdown-divider {
|
