Added toggle switch
This commit is contained in:
Andrew Collington
parent
da0a4bfb0f
commit
c67ad50bbc
3 changed files with 272 additions and 148 deletions
|
|
@ -201,6 +201,7 @@ class Tabs extends React.Component {
|
|||
super(props);
|
||||
this.state = {
|
||||
activeTab: this.props.children[0].props.label,
|
||||
colourMode: 0, // 0 = light, 1 = dark
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -208,10 +209,22 @@ class Tabs extends React.Component {
|
|||
this.setState({ activeTab: tab });
|
||||
}
|
||||
|
||||
onClickModeSwitch = (event) => {
|
||||
event.stopPropagation()
|
||||
console.log(event)
|
||||
this.setState({ colourMode: event.target.checked ? 1 : 0 });
|
||||
if (event.target.checked) {
|
||||
document.body.classList.add('dark-mode');
|
||||
} else {
|
||||
document.body.classList.remove('dark-mode');
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
onClickTabItem,
|
||||
state: { activeTab }
|
||||
onClickModeSwitch,
|
||||
state: { activeTab, colourMode }
|
||||
} = this;
|
||||
|
||||
const children = this.props.children.filter(Boolean);
|
||||
|
|
@ -234,6 +247,29 @@ class Tabs extends React.Component {
|
|||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
<Tab
|
||||
activeTab={activeTab}
|
||||
key={7}
|
||||
label={(
|
||||
<div className="mode-container" onClick={onClickModeSwitch}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
|
||||
</svg>
|
||||
<label className="switch mode-switch">
|
||||
<input type="checkbox" name="dark_mode" id="dark_mode" value={colourMode} />
|
||||
<label htmlFor="dark_mode" data-on="Dark" data-off="Light" className="mode-switch-inner"></label>
|
||||
</label>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
onClick={() => null}
|
||||
className=""
|
||||
tabIndex={7}
|
||||
tabId="mode-switch"
|
||||
/>
|
||||
</ul>
|
||||
<div className="tab-content">
|
||||
{children.map((child) => (
|
||||
|
|
|
|||
|
|
@ -171,20 +171,35 @@ body.opcache-gui {
|
|||
outline: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
flex: 1;
|
||||
justify-content: end;
|
||||
padding: 0 1rem 0 0;
|
||||
align-self: center;
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: initial;
|
||||
text-decoration: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tab-link-reset, .nav-tab-link-realtime {
|
||||
>svg {
|
||||
> svg {
|
||||
overflow: visible;
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
margin-right: 0.5em;
|
||||
>path {
|
||||
|
||||
> path {
|
||||
fill: var(--nav-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.activated {
|
||||
>svg>path {
|
||||
> svg > path {
|
||||
fill: var(--nav-icon-active-color);
|
||||
transform-origin: 50% 50%;
|
||||
display: inline-block;
|
||||
|
|
@ -194,12 +209,13 @@ body.opcache-gui {
|
|||
|
||||
.nav-tab-link-reset {
|
||||
&.activated {
|
||||
>svg>path {
|
||||
> svg > path {
|
||||
animation: spin-all 2s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-resetting {
|
||||
>svg>path {
|
||||
> svg > path {
|
||||
fill: var(--nav-icon-active-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -207,7 +223,7 @@ body.opcache-gui {
|
|||
|
||||
.nav-tab-link-realtime {
|
||||
&.activated {
|
||||
>svg>path {
|
||||
> svg > path {
|
||||
animation: spin-pause 2s ease-in infinite;
|
||||
}
|
||||
}
|
||||
|
|
@ -304,6 +320,7 @@ body.opcache-gui {
|
|||
&:nth-child(odd) {
|
||||
background-color: var(--table-row-color);
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: var(--table-row-color-alternative);
|
||||
}
|
||||
|
|
@ -383,14 +400,14 @@ body.opcache-gui {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
>svg {
|
||||
> svg {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.github-link>svg>path {
|
||||
.github-link > svg > path {
|
||||
fill: var(--nav-icon-color);
|
||||
}
|
||||
|
||||
|
|
@ -452,6 +469,100 @@ body.opcache-gui {
|
|||
}
|
||||
}
|
||||
|
||||
.mode-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 80%;
|
||||
|
||||
svg {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
label {
|
||||
color: var(--font-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mode-switch {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
|
||||
> label.mode-switch-inner {
|
||||
margin: 0;
|
||||
width: 140px;
|
||||
height: 30px;
|
||||
background: #E0E0E0;
|
||||
border-radius: 26px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
display: block;
|
||||
|
||||
&:before {
|
||||
content: attr(data-on);
|
||||
position: absolute;
|
||||
font-weight: 500;
|
||||
top: 7px;
|
||||
right: 20px;
|
||||
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: attr(data-off);
|
||||
width: 70px;
|
||||
height: 16px;
|
||||
background: #fff;
|
||||
border-radius: 26px;
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0px 0px 6px -2px #111;
|
||||
padding: 5px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
> .alert {
|
||||
display: none;
|
||||
background: #FF9800;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
|
||||
&:checked + label.mode-switch-inner {
|
||||
background: #151515;
|
||||
color: #fff;
|
||||
|
||||
&:after {
|
||||
content: attr(data-on);
|
||||
left: 68px;
|
||||
background: #3c3c3c;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: attr(data-off);
|
||||
right: auto;
|
||||
left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
.nav-tab-list {
|
||||
border-bottom: 0;
|
||||
|
|
|
|||
255
index.php
255
index.php
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue