Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[YUNIKORN-2349] Allow changing the orientation of the queue graph #202

Closed
wants to merge 15 commits into from
Closed
18 changes: 12 additions & 6 deletions src/app/components/queue-v2/queues-v2.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,18 @@
<div class="header">
<div class="title-group">
<div>Partition</div>
<button id="fitButton" class="fit-to-screen-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
<path d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
<span id="tooltip" class="tooltip" role="tooltip">fit to screen</span>
</button>
<button id="ortButton" class="ort-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
<path d="M21 12c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.39 0 4.68-0.94 6.36-2.62l-1.41-1.41C15.54 18.37 13.85 19 12 19c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7h-3l4 4 4-4h-3z" />
</svg>
<span class="tooltip" role="tooltip">rotate </span>
</button>
<button id="fitButton" class="fit-to-screen-button">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
<path d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
<span id="tooltip" class="tooltip" role="tooltip">fit to screen</span>
</button>
</div>
</div>
<div class="body">
Expand Down
45 changes: 43 additions & 2 deletions src/app/components/queue-v2/queues-v2.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
font-weight: 600;
color: #010407;
}

.fit-to-screen-button {
position: relative;
display: inline-flex;
Expand All @@ -51,6 +51,48 @@
border-radius: 5px;
cursor: pointer;
}
.ort-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 6px;
background-color: #e5ecf6;
border: 1px solid #132030;
border-radius: 5px;
cursor: pointer;
overflow: show;
}

.ort-button:hover {
background-color: #8090a5;
}

.ort-button .tooltip {
width: 100px;
position: absolute;
bottom: 90%;
left: 50%;
transform: translateX(-50%);
background-color: rgb(225, 228, 241);
color: rgb(6, 7, 6);
text-align: center;
padding: 5px 5px;
border-radius: 6px;
visibility: hidden;
opacity: 1;
}

.ort-button:hover .tooltip {
margin-bottom: 10px;
visibility: visible;
opacity: 1;
}

.ort-button,
.fit-to-screen-button {
margin-right: 10px;
}

.tooltip {
width: 100px;
Expand All @@ -65,7 +107,6 @@
border-radius: 6px;
visibility: hidden;
opacity: 1;
transition: opacity 0.3s, visibility 0.3s;
}

.fit-to-screen-button:hover .tooltip {
Expand Down
Loading