beenull/opcache-gui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revisited top navigation icons

Browse source 
* Used slightly different svg icons
* Changed animation for both
This commit is contained in:
Andrew Collington 2023-10-29 22:53:42 +00:00
parent 423a47b865
commit aad06c0b92
2 changed files with 42 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
build/_frontend/interface.jsx
View file

@ -166,12 +166,12 @@ function MainNavigation(props) {
{
props.allow.reset &&
<div label={props.txt("Reset cache")} tabId="resetCache"
className={`nav-tab-link-reset${props.resetting ? ' is-resetting pulse' : ''}`}
className={`nav-tab-link-reset${props.resetting ? ' is-resetting activated' : ''}`}
handler={props.resetHandler}
tabIndex={5}
icon={(
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
<path d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 489.645 489.645">
<path d="M460.656,132.911c-58.7-122.1-212.2-166.5-331.8-104.1c-9.4,5.2-13.5,16.6-8.3,27c5.2,9.4,16.6,13.5,27,8.3 c99.9-52,227.4-14.9,276.7,86.3c65.4,134.3-19,236.7-87.4,274.6c-93.1,51.7-211.2,17.4-267.6-70.7l69.3,14.5 c10.4,2.1,21.8-4.2,23.9-15.6c2.1-10.4-4.2-21.8-15.6-23.9l-122.8-25c-20.6-2-25,16.6-23.9,22.9l15.6,123.8 c1,10.4,9.4,17.7,19.8,17.7c12.8,0,20.8-12.5,19.8-23.9l-6-50.5c57.4,70.8,170.3,131.2,307.4,68.2 C414.856,432.511,548.256,314.811,460.656,132.911z"/>
</svg>
)}
></div>
@ -179,13 +179,13 @@ function MainNavigation(props) {
{
props.allow.realtime &&
<div label={props.txt(`${props.realtime ? 'Disable' : 'Enable'} real-time update`)} tabId="toggleRealtime"
className={`nav-tab-link-realtime${props.realtime ? ' live-update pulse' : ''}`}
className={`nav-tab-link-realtime${props.realtime ? ' live-update activated' : ''}`}
handler={props.realtimeHandler}
tabIndex={6}
icon={(
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 24 24">
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8z"/>
<path d="M12.5 7H11v6l5.25 3.15l.75-1.23l-4.5-2.67z"/>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewBox="0 0 489.698 489.698">
<path d="M468.999,227.774c-11.4,0-20.8,8.3-20.8,19.8c-1,74.9-44.2,142.6-110.3,178.9c-99.6,54.7-216,5.6-260.6-61l62.9,13.1 c10.4,2.1,21.8-4.2,23.9-15.6c2.1-10.4-4.2-21.8-15.6-23.9l-123.7-26c-7.2-1.7-26.1,3.5-23.9,22.9l15.6,124.8 c1,10.4,9.4,17.7,19.8,17.7c15.5,0,21.8-11.4,20.8-22.9l-7.3-60.9c101.1,121.3,229.4,104.4,306.8,69.3 c80.1-42.7,131.1-124.8,132.1-215.4C488.799,237.174,480.399,227.774,468.999,227.774z"/>
<path d="M20.599,261.874c11.4,0,20.8-8.3,20.8-19.8c1-74.9,44.2-142.6,110.3-178.9c99.6-54.7,216-5.6,260.6,61l-62.9-13.1 c-10.4-2.1-21.8,4.2-23.9,15.6c-2.1,10.4,4.2,21.8,15.6,23.9l123.8,26c7.2,1.7,26.1-3.5,23.9-22.9l-15.6-124.8 c-1-10.4-9.4-17.7-19.8-17.7c-15.5,0-21.8,11.4-20.8,22.9l7.2,60.9c-101.1-121.2-229.4-104.4-306.8-69.2 c-80.1,42.6-131.1,124.8-132.2,215.3C0.799,252.574,9.199,261.874,20.599,261.874z"/>
</svg>
)}
></div>

45
build/_frontend/interface.scss
View file

@ -173,22 +173,40 @@ body.opcache-gui {
.nav-tab-link-reset, .nav-tab-link-realtime {
>svg {
width: 1.5em;
height: 1.5em;
width: 1.1rem;
height: 1.1rem;
margin-right: 0.5em;
overflow: visible;
>path {
fill: var(--nav-icon-color);
}
}
&.activated {
>svg>path {
fill: var(--nav-icon-active-color);
transform-origin: 50% 50%;
display: inline-block;
}
}
}
.nav-tab-link-reset {
&.activated {
>svg>path {
animation: spin-all 2s linear infinite;
}
}
&.is-resetting {
>svg>path {
fill: var(--nav-icon-active-color);
}
}
&.pulse {
}
.nav-tab-link-realtime {
&.activated {
>svg>path {
animation: pulse 2s linear infinite;
animation: spin-pause 2s ease-in infinite;
}
}
}
@ -459,13 +477,20 @@ body.opcache-gui {
}
}
@keyframes pulse {
@keyframes spin-pause {
0% {
transform: scale(1);
opacity: 1;
transform: rotate(0deg);
}
50%,100% {
transform: scale(2);
opacity: 0;
50%, 100% {
transform: rotate(360deg);
}
}
@keyframes spin-all {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}