Skip to content

Commit

Permalink
chore: specialize popup menu classes
Browse files Browse the repository at this point in the history 
Closes #703
  • Loading branch information
@smbea
smbea committed Nov 21, 2022
1 parent 6088e37 commit 572a466
Show file tree
Hide file tree
Showing 7 changed files with 69 additions and 69 deletions.
66 changes: 33 additions & 33 deletions assets/diagram-js.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -527,7 +527,7 @@ marker.djs-dragger tspan {
border-radius: 2px;
}

.djs-popup .overlay {
.djs-popup-overlay {
width: min-content;
background: var(--popup-background-color);
overflow: hidden;
Expand All @@ -538,7 +538,7 @@ marker.djs-dragger tspan {
min-width: 120px;
}

.djs-popup .search input {
.djs-popup-search input {
width: 100%;
box-sizing: border-box;
font-size: 14px;
Expand All @@ -548,7 +548,7 @@ marker.djs-dragger tspan {
line-height: 21px;
}

.djs-popup .search input:focus {
.djs-popup-search input:focus {
background-color: var(--popup-search-focus-background-color);
border: solid 1px var(--popup-search-focus-border-color);
outline: none;
Expand All @@ -561,82 +561,82 @@ marker.djs-dragger tspan {
margin: 12px 12px 10px 12px;
}

.djs-popup .djs-popup-header {
.djs-popup-header {
display: flex;
align-items: stretch;
line-height: 20px;
margin: 0 12px 10px 12px;
}

.djs-popup .djs-popup-header .entry {
.djs-popup-header .entry {
font-size: 19.5px;
border-radius: 2px;
}

.djs-popup .djs-popup-header .entry.active {
.djs-popup-header .entry.active {
color: var(--popup-header-entry-selected-color);
}

.djs-popup .djs-popup-header .entry.disabled {
.djs-popup-header .entry.disabled {
color: inherit;
}

.djs-popup .search {
.djs-popup-search {
margin: 10px 12px;
}

.djs-popup .title {
.djs-popup-title {
font-size: 14px;
font-weight: 500;
flex: 1;
margin: 0;
width: max-content;
}

.djs-popup .search {
.djs-popup-search {
position: relative;
width: auto;
}

.djs-popup .search-icon {
.djs-popup-search-icon {
position: absolute;
left: 8px;
top: 7px;
}

.djs-popup .search input {
.djs-popup-search input {
padding-left: 25px;
}

.djs-popup .results {
.djs-popup-results {
margin: 0 3px 7px 12px;
list-style: none;
max-height: 280px;
overflow: overlay;
padding-right: 9px;
}

.djs-popup .group {
.djs-popup-group {
margin: 0;
padding: 0;
width: 100%;
}

.djs-popup .djs-popup-body .entry,
.djs-popup .djs-popup-body .entry-header {
.djs-popup-body .entry,
.djs-popup-body .entry-header {
padding: 5px 7px;
cursor: default;
border-radius: 4px;
font-size: 14px;
}

.djs-popup .djs-popup-body .entry-header {
.djs-popup-body .entry-header {
font-weight: 500;
color: var(--popup-entry-title-color);
padding-left: 0;
}

.djs-popup .djs-popup-body .djs-popup-entry-icon {
.djs-popup-entry-icon {
width: 16px;
margin-right: 0.5rem;
margin-bottom: -0.2rem;
Expand All @@ -647,7 +647,7 @@ marker.djs-dragger tspan {
margin-bottom: 2px;
}

.djs-popup .djs-popup-body .entry {
.djs-popup-body .entry {
display: flex;
flex-direction: row;
align-items: stretch;
Expand All @@ -658,44 +658,44 @@ marker.djs-dragger tspan {
background-color: var(--popup-entry-hover-color);
}

.djs-popup .djs-popup-body .entry:not(:first-child) {
.djs-popup-body .entry:not(:first-child) {
margin-top: 2px;
}

.djs-popup .djs-popup-body .entry .content {
.djs-popup-entry-content {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
}

.djs-popup .djs-popup-body .entry .description {
.djs-popup-entry-description {
color: var(--popup-description-color);
}

.djs-popup .djs-popup-body .entry .name,
.djs-popup .djs-popup-body .entry .description {
.djs-popup-entry-name,
.djs-popup-entry-description {
line-height: 1.4em;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.djs-popup .djs-popup-body .entry .name {
.djs-popup-entry-name {
display: flex;
}

.djs-popup .djs-popup-body .entry-content {
.entry-content {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
}

.djs-popup .djs-popup-body .entry .name[class^="bpmn-icon-"]:before,
.djs-popup .djs-popup-body .entry .name[class*=" bpmn-icon-"]:before,
.djs-popup .djs-popup-body .entry .icon {
.djs-popup-entry-name[class^="bpmn-icon-"]:before,
.djs-popup-entry-name[class*=" bpmn-icon-"]:before,
.djs-popup-entry-icon {
display: inline-block;
font-size: 1.4em;
vertical-align: middle;
Expand Down Expand Up @@ -723,25 +723,25 @@ marker.djs-dragger tspan {
padding: 5px;
}

.djs-popup .no-results {
.djs-popup-no-results {
font-size: 14px;
padding: 0 12px 12px 12px;
color: var(--popup-no-results-color);
}

.djs-popup .docs {
.djs-popup-entry-docs {
flex: 0;
flex-direction: row;
align-items: center;
padding-left: 5px;
display: none;
}

.djs-popup .djs-popup-body .entry:hover .docs {
.djs-popup-body .entry:hover .djs-popup-entry-docs {
display: flex;
}

.djs-popup .djs-popup-body .entry .docs svg {
.djs-popup-entry-docs svg {
vertical-align: middle;
margin: auto 2px auto 5px;
}
Expand Down
10 changes: 5 additions & 5 deletions lib/features/popup-menu/PopupMenuComponent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export default function PopupMenuComponent(props) {
>
${ displayHeader && html`
<div class="djs-popup-header">
<h3 class="title">${ props.title }</h3>
<h3 class="djs-popup-title">${ props.title }</h3>
${ Object.entries(headerEntries).map(([ id, entry ]) => html`
<span
class=${ getHeaderClasses(entry, entry === selectedEntry) }
Expand All @@ -189,8 +189,8 @@ export default function PopupMenuComponent(props) {
<div class="djs-popup-body">
${ searchable && html`
<div class="search">
<svg class="search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<div class="djs-popup-search">
<svg class="djs-popup-search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
</svg>
<input
Expand All @@ -211,7 +211,7 @@ export default function PopupMenuComponent(props) {
</div>
` }
${ entries.length === 0 && html`
<div class="no-results">No matching entries found.</div>
<div class="djs-popup-no-results">No matching entries found.</div>
` }
</${PopupMenuWrapper}>`
);
Expand Down Expand Up @@ -250,7 +250,7 @@ function PopupMenuWrapper(props) {
onClick=${ () => onClose() }
>
<div
class="overlay"
class="djs-popup-overlay"
ref=${ overlayRef }
style=${ getOverlayStyle(props) }
>
Expand Down
10 changes: 5 additions & 5 deletions lib/features/popup-menu/PopupMenuItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default function PopupMenuItem(props) {
} = props;

const createImage = imageUrl => {
return html`<img src=${ imageUrl } class="icon" />`;
return html`<img src=${ imageUrl } class="djs-popup-entry-icon" />`;
};

return html`
Expand All @@ -33,25 +33,25 @@ export default function PopupMenuItem(props) {
onClick=${ onClick }
onMouseEnter=${ onMouseEnter }
>
<div class="content">
<div class="djs-popup-entry-content">
<span
class=${ classNames('name', entry.className) }
class=${ classNames('djs-popup-entry-name', entry.className) }
title=${ entry.label || entry.name }
>
${ entry.imageUrl ? createImage(entry.imageUrl) : null }
${ entry.label || entry.name }
</span>
${ entry.description && html`
<span
class="description"
class="djs-popup-entry-description"
title=${ entry.description }
>
${ entry.description }
</span>
` }
</div>
${ entry.documentationRef && html`
<div class="docs">
<div class="djs-popup-entry-docs">
<a
href="${ entry.documentationRef }"
onClick=${ (event) => event.stopPropagation() }
Expand Down
4 changes: 2 additions & 2 deletions lib/features/popup-menu/PopupMenuList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,14 @@ export default function PopupMenuList(props) {
}, [ selectedEntry ]);

return html`
<div class="results" ref=${ resultsRef }>
<div class="djs-popup-results" ref=${ resultsRef }>
${ groups.map(group => html`
${ group.name && html`
<div key=${ group.id } class="entry-header">
${ group.name }
</div>
` }
<ul class="group" data-group=${ group.id }>
<ul class="djs-popup-group" data-group=${ group.id }>
${ group.entries.map(entry => html`
<${PopupMenuItem}
key=${ entry.id }
Expand Down
Loading

0 comments on commit 572a466

Please sign in to comment.