daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-13 13:22:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

dark mode update

Browse Source
This commit is contained in:
BFlat committed 2022-08-15 11:36:04 +07:00
1 parent df3ed798c0
commit 875d33f9de
3 files changed
+196 -124
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/fakeyou/src/AppNew.scss
+72 -49
View File
@@ -30,7 +30,6 @@ $headings-font-family: "Merriweather", serif;
color: $white;
&.dark-mode {
p,
h1,
h2,
@@ -38,7 +37,7 @@ $headings-font-family: "Merriweather", serif;
h4,
h5,
h6 {
color: #fff;
color: $white;
}
}
}
@@ -46,15 +45,16 @@ $headings-font-family: "Merriweather", serif;
.bg-gradient {
background: rgb(13, 16, 25) !important;
background: linear-gradient(325deg,
rgba(13, 16, 25, 1) 0%,
rgba(42, 21, 34, 1) 55%,
rgba(16, 14, 26, 1) 100%) !important;
background: linear-gradient(
325deg,
rgba(13, 16, 25, 1) 0%,
rgba(42, 21, 34, 1) 55%,
rgba(16, 14, 26, 1) 100%
) !important;
background-repeat: no-repeat;
background-attachment: fixed;
&.low-spec {
.particle-1 {
animation: animParticle $time-1 linear infinite;
@include particles(0);
@@ -100,93 +100,116 @@ $headings-font-family: "Merriweather", serif;
height: 1px;
width: 1px;
}
}
&.dark-mode {
.top-bar {
background-color: rgba($white, 0.02);
}
.panel {
background-color: #261924 !important;
background-color: rgba(#353535, 0.25);
}
select {
border-color: #372C34 !important;
background-color: #372C34 !important;
border-color: #372c34 !important;
background-color: #372c34 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
.btn-destructive {
background-color: #FFCFCE !important;
background-color: #ffcfce !important;
}
.video-card-title,
.video-card-text {
color: #ffffff !important;
color: $white !important;
}
textarea {
background-color: #372C34 !important;
border-color: #372C34 !important;
background-color: #372c34 !important;
border-color: #372c34 !important;
color: $white;
}
.form-select {
color: #fff;
color: $white;
}
::placeholder {
color: #fff !important;
color: $white !important;
}
.input-icon .form-control-feedback {
color: #fff !important
color: $white !important;
}
input {
background-color: #372C34 !important;
border-color: #372C34 !important;
}
menu.item {
background: #372C34;
background-color: #372c34 !important;
border-color: #372c34 !important;
color: $white;
}
.btn-secondary {
color: #fff;
border-color: #46343F;
background-color: #46343F;
color: $white !important;
border-color: #5a4a54;
background-color: #5a4a54;
&:hover {
border-color: lighten(#5a4a54, 5%);
background-color: lighten(#5a4a54, 5%);
}
}
.btn-destructive {
background-color: #FC6B68;
border-color: #FFCFCE;
background-color: #5a3d47 !important;
border-color: #5a3d47;
color: $white;
&:hover {
border-color: lighten(#5a3d47, 6%);
background-color: lighten(#5a3d47, 6%) !important;
}
}
.btn-inform svg {
filter: invert(98%) sepia(2%) saturate(0%) hue-rotate(196deg)
brightness(200%) contrast(103%);
}
.dropdown-menu {
background-color: #261924;
background-color: #281b25;
}
.dropdown-item {
color: #fff;
color: $white;
&:hover {
background-color: lighten(#271e25, 8%);
}
&:focus {
background-color: lighten(#271e25, 8%);
}
&:active {
background-color: $primary;
}
}
a.btn.btn-secondary {
color: #fff;
.form-control::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: rgba($white, 0.5) !important;
opacity: 1; /* Firefox */
}
.form-control:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: rgba($white, 0.5) !important;
}
.form-control::-ms-input-placeholder {
/* Microsoft Edge */
color: rgba($white, 0.5) !important;
}
}
}
@@ -335,7 +358,7 @@ $headings-font-family: "Merriweather", serif;
.nav-login {
font-size: 15px;
font-weight: 600;
color: #fff;
color: $white;
text-decoration: none;
transition: 0.2s;
@@ -347,7 +370,7 @@ $headings-font-family: "Merriweather", serif;
}
a.top-bar-text:hover {
color: $primary !important;
color: $primary !important;
}
.top-bar {
packages/fakeyou/src/scss/site-refresh.scss
+17
View File
@@ -128,6 +128,9 @@ styles with important tags:
font-weight: 600;
padding: 10px 24px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.btn-primary,
@@ -505,6 +508,20 @@ styles with important tags:
.rounded-circle {
border-radius: 50px;
}
.btn-toggle {
margin: 0;
padding: 0;
color: rgba($white, 0.8);
&.dark {
color: rgba($white, 0.8);
}
&:hover {
color: rgba($white, 0.6);
}
}
}
@media (min-width: 992px) {
packages/fakeyou/src/v2/view/NewTopNavFc.tsx
+107 -75
View File
@@ -20,15 +20,28 @@ import {
faMoon,
faSun,
faComputer,
faLaptop
faLaptop,
} from "@fortawesome/free-solid-svg-icons";
import { faPatreon } from "@fortawesome/free-brands-svg-icons";
import { t } from "i18next";
import { USE_REFRESH } from "../../Refresh";
import { Logout } from "@storyteller/components/src/api/session/Logout";
import { Gravatar } from "@storyteller/components/src/elements/Gravatar";
import { GetPendingTtsJobCount, GetPendingTtsJobCountIsOk, GetPendingTtsJobCountSuccessResponse } from "@storyteller/components/src/api/tts/GetPendingTtsJobCount";
import { container, item, panel, image, sessionItem } from "@storyteller/fakeyou/src/data/animation";
import {
GetPendingTtsJobCount,
GetPendingTtsJobCountIsOk,
GetPendingTtsJobCountSuccessResponse,
} from "@storyteller/components/src/api/tts/GetPendingTtsJobCount";
import {
container,
item,
panel,
image,
sessionItem,
} from "@storyteller/fakeyou/src/data/animation";
import Tippy from "@tippyjs/react";
import "tippy.js/dist/tippy.css";
import "tippy.js/animations/shift-away.css";
interface Props {
sessionWrapper: SessionWrapper;
@@ -37,11 +50,15 @@ interface Props {
}
function NewTopNavFc(props: Props) {
const defaultColourView = window.localStorage.getItem('darkMode')
const defaultLowSpecView = window.localStorage.getItem('lowSpec')
const defaultColourView = window.localStorage.getItem("darkMode");
const defaultLowSpecView = window.localStorage.getItem("lowSpec");
const [darkModes, toggleDarkModes] = useState(defaultColourView === 'true' ? true : false)
const [lowSpecView, toggleLowSpecs] = useState(defaultLowSpecView === 'true' ? true : false)
const [darkModes, toggleDarkModes] = useState(
defaultColourView === "true" ? true : false
);
const [lowSpecView, toggleLowSpecs] = useState(
defaultLowSpecView === "true" ? true : false
);
let history = useHistory();
@@ -54,18 +71,21 @@ function NewTopNavFc(props: Props) {
// NB: The responses from the "job count" endpoint are cached in a distributed manner.
// We use the timestamp as a vector clock to know when to update our view.
const [pendingTtsJobs, setPendingTtsJobs] = useState<GetPendingTtsJobCountSuccessResponse>({
success: true,
pending_job_count: 0,
cache_time: new Date(0), // NB: Epoch
});
const [pendingTtsJobs, setPendingTtsJobs] =
useState<GetPendingTtsJobCountSuccessResponse>({
success: true,
pending_job_count: 0,
cache_time: new Date(0), // NB: Epoch
});
useEffect(() => {
const fetch = async () => {
const response = await GetPendingTtsJobCount();
if (GetPendingTtsJobCountIsOk(response)) {
console.log(response);
if (response.cache_time.getTime() > pendingTtsJobs.cache_time.getTime()) {
if (
response.cache_time.getTime() > pendingTtsJobs.cache_time.getTime()
) {
setPendingTtsJobs(response);
}
}
@@ -96,49 +116,48 @@ function NewTopNavFc(props: Props) {
: "navbar-burger";
const toggleDarkMode = () => {
window.localStorage.setItem("darkMode", (darkModes ? "true" : "false"))
window.localStorage.setItem("darkMode", darkModes ? "true" : "false");
toggleDarkModes(!darkModes)
}
toggleDarkModes(!darkModes);
};
const toggleLowSpec = () => {
window.localStorage.setItem("lowSpec", (lowSpecView ? "true" : "false"))
window.localStorage.setItem("lowSpec", lowSpecView ? "true" : "false");
toggleLowSpecs(!lowSpecView)
toggleLowSpecs(!lowSpecView);
if (lowSpecView == false) {
image.hidden.opacity = 1
image.hidden.x = 0
panel.hidden.y = 0
item.hidden.y = 0
sessionItem.hidden.x = 0
panel.hidden.opacity = 1
item.hidden.opacity = 1
container.hidden.opacity = 1
sessionItem.hidden.opacity = 1
if (lowSpecView === false) {
image.hidden.opacity = 1;
image.hidden.x = 0;
panel.hidden.y = 0;
item.hidden.y = 0;
sessionItem.hidden.x = 0;
panel.hidden.opacity = 1;
item.hidden.opacity = 1;
container.hidden.opacity = 1;
sessionItem.hidden.opacity = 1;
} else {
image.hidden.opacity = 0;
image.hidden.x = 100;
panel.hidden.y = 50;
item.hidden.y = 50;
sessionItem.hidden.x = 50;
panel.hidden.opacity = 0;
item.hidden.opacity = 0;
container.hidden.opacity = 0;
sessionItem.hidden.opacity = 0;
}
else {
image.hidden.opacity = 0
image.hidden.x = 100
panel.hidden.y = 50
item.hidden.y = 50
sessionItem.hidden.x = 50
panel.hidden.opacity = 0
item.hidden.opacity = 0
container.hidden.opacity = 0
sessionItem.hidden.opacity = 0
}
}
};
useEffect(() => {
// Logic for dark mode toggle
if (darkModes) document.getElementById('main')!.classList.add('dark-mode')
else document.getElementById('main')!.classList.remove('dark-mode')
if (darkModes) document.getElementById("main")!.classList.add("dark-mode");
else document.getElementById("main")!.classList.remove("dark-mode");
// Logic for the animation toggle
if (lowSpecView) document.getElementById('main')!.classList.add('low-spec')
else document.getElementById('main')!.classList.remove('low-spec')
})
if (lowSpecView) document.getElementById("main")!.classList.add("low-spec");
else document.getElementById("main")!.classList.remove("low-spec");
});
if (!USE_REFRESH) {
return (
@@ -386,28 +405,7 @@ function NewTopNavFc(props: Props) {
return (
<div>
<div className="top-bar d-none d-lg-flex">
<button
className={`btn ${darkModes ? '' : 'text-light'}`}
title={`${darkModes ? 'Turn on Dark mode' : 'Turn on Light Mode'}`}
onClick={() => toggleDarkMode()}
>
<FontAwesomeIcon
icon={darkModes ? faSun : faMoon}
/>
</button>
<button
className={`btn ${darkModes ? '' : 'text-light'}`}
title={`${lowSpecView ? 'Turn on animations' : 'Turn off animations'}`}
onClick={() => toggleLowSpec()}
>
<FontAwesomeIcon
icon={lowSpecView ? faLaptop : faComputer}
className={`${lowSpecView ? '' : 'fa-beat-fade'}`}
/>
</button>
<div className="container d-flex">
<div className="container d-flex align-items-center">
<div className="d-flex gap-4 flex-grow-1">
<Link className="top-bar-text" to="/about">
About
@@ -422,18 +420,45 @@ function NewTopNavFc(props: Props) {
Developers
</a>
</div>
<div className="d-flex gap-4">
<div className="d-flex gap-3 align-items-center">
{/* <p className="top-bar-text">
Online Users: <span className="fw-bold text-red">1,204</span>
</p> */}
<p className="top-bar-text">
TTS Queued: <span className="fw-bold text-red">{pendingTtsJobs.pending_job_count}</span>
<Tippy
content={`${
darkModes ? "Toggle Light Mode" : "Toggle Dark Mode"
}`}
>
<button
className={`btn btn-toggle ${darkModes ? "dark" : ""}`}
onClick={() => toggleDarkMode()}
>
<FontAwesomeIcon icon={darkModes ? faSun : faMoon} />
</button>
</Tippy>
<Tippy
content={`${
lowSpecView ? "Turn on animations" : "Turn off animations"
}`}
>
<button
className={`btn btn-toggle ${darkModes ? "dark" : ""}`}
onClick={() => toggleLowSpec()}
>
<FontAwesomeIcon
icon={lowSpecView ? faLaptop : faComputer}
className={`${lowSpecView ? "" : ""}`}
/>
</button>
</Tippy>
<p className="top-bar-text ms-2">
TTS Queued:{" "}
<span className="fw-bold text-red">
{pendingTtsJobs.pending_job_count}
</span>
</p>
</div>
</div>
</div>
<nav
@@ -593,7 +618,11 @@ function NewTopNavFc(props: Props) {
<li className="nav-item d-lg-none">
{/* TODO(echelon): Fix the build warnings about href not being accessible. */}
<a className="nav-link" aria-current="page" href={FrontendUrlConfig.developerDocs()}>
<a
className="nav-link"
aria-current="page"
href={FrontendUrlConfig.developerDocs()}
>
Developers
</a>
</li>
@@ -607,7 +636,10 @@ function NewTopNavFc(props: Props) {
Online: <span className="fw-bold text-red">1,204</span>
</p> */}
<div className="top-bar-text mobile">
TTS Queued: <span className="fw-bold text-red ">{pendingTtsJobs.pending_job_count}</span>
TTS Queued:{" "}
<span className="fw-bold text-red ">
{pendingTtsJobs.pending_job_count}
</span>
</div>
</div>
</li>