StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Neatly wrap long text of context menu

This commit is contained in:
jos 2017-07-24 11:37:43 +02:00
parent 6ad7552c3e
commit 06bbf2d1a5
2 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/css/contextmenu.css
View File

@ -16,13 +16,14 @@ div.jsoneditor-contextmenu {
div.jsoneditor-contextmenu ul,
div.jsoneditor-contextmenu li {
box-sizing: content-box;
position: relative;
}
div.jsoneditor-contextmenu ul {
position: relative;
left: 0;
top: 0;
width: 124px;
width: 128px;
background: white;
border: 1px solid #d3d3d3;
@ -34,10 +35,11 @@ div.jsoneditor-contextmenu ul {
}
div.jsoneditor-contextmenu ul li button {
padding: 0;
position: relative;
padding: 0 4px 0 0;
margin: 0;
width: 124px;
height: 24px;
width: 128px;
height: auto;
border: none;
cursor: pointer;
color: #4d4d4d;
@ -48,7 +50,6 @@ div.jsoneditor-contextmenu ul li button {
box-sizing: border-box;
line-height: 26px;
text-align: left;
}
@ -66,7 +67,7 @@ div.jsoneditor-contextmenu ul li button:focus {
}
div.jsoneditor-contextmenu ul li button.jsoneditor-default {
width: 92px;
width: 96px; /* 128px - 32px */
}
div.jsoneditor-contextmenu ul li button.jsoneditor-expand {
@ -77,7 +78,9 @@ div.jsoneditor-contextmenu ul li button.jsoneditor-expand {
}
div.jsoneditor-contextmenu div.jsoneditor-icon {
float: left;
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
border: none;
@ -86,8 +89,23 @@ div.jsoneditor-contextmenu div.jsoneditor-icon {
background-image: url('img/jsoneditor-icons.svg');
}
div.jsoneditor-contextmenu ul li ul div.jsoneditor-icon {
margin-left: 24px;
}
div.jsoneditor-contextmenu div.jsoneditor-text {
padding: 4px 0 4px 24px;
word-wrap: break-word;
}
div.jsoneditor-contextmenu div.jsoneditor-text.jsoneditor-right-margin {
padding-right: 24px;
}
div.jsoneditor-contextmenu ul li button div.jsoneditor-expand {
float: right;
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
padding: 0;

9
src/js/ContextMenu.js
View File

@ -90,7 +90,11 @@ function ContextMenu (items, options) {
var divIcon = document.createElement('div');
divIcon.className = 'jsoneditor-icon';
button.appendChild(divIcon);
button.appendChild(document.createTextNode(item.text));
var divText = document.createElement('div');
divText.className = 'jsoneditor-text' +
(item.click ? '' : ' jsoneditor-right-margin');
divText.appendChild(document.createTextNode(item.text));
button.appendChild(divText);
var buttonSubmenu;
if (item.click) {
@ -137,7 +141,8 @@ function ContextMenu (items, options) {
}
else {
// no submenu, just a button with clickhandler
button.innerHTML = '<div class="jsoneditor-icon"></div>' + item.text;
button.innerHTML = '<div class="jsoneditor-icon"></div>' +
'<div class="jsoneditor-text">' + item.text + '</div>';
}
domItems.push(domItem);