cobular
/
filepizza
mirror of https://github.com/kern/filepizza
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add dark theme

Browse Source
pull/130/head
Timofey 5 years ago
parent e4fb3431fb
commit 3306c691a5
5 changed files with 120 additions and 20 deletions
Show Stats Download Patch File Download Diff File

3
src/actions/SupportActions.js
Unescape Escape View File

@ -4,7 +4,8 @@ export default alt.createActions(class SupportActions {
constructor() { constructor() {
this.generateActions( this.generateActions(
'isChrome', 'isChrome',
'noSupport' 'noSupport',
'themeChange',
) )
} }
}) })

10
src/client.js
Unescape Escape View File

@ -11,12 +11,20 @@ let bootstrap = document.getElementById("bootstrap").innerHTML;
alt.bootstrap(bootstrap); alt.bootstrap(bootstrap);
window.FilePizza = () => { window.FilePizza = () => {
ReactRouter.run(routes, ReactRouter.HistoryLocation, function(Handler) { ReactRouter.run(routes, ReactRouter.HistoryLocation, function (Handler) {
React.render(<Handler data={bootstrap} />, document); React.render(<Handler data={bootstrap} />, document);
}); });
if (!webrtcSupport.support) SupportActions.noSupport(); if (!webrtcSupport.support) SupportActions.noSupport();
let theme = localStorage.getItem("theme")
if (theme != "") {
SupportActions.themeChange(theme)
} else {
let prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
SupportActions.themeChange(prefersDark ? "dark" : "light")
}
let isChrome = navigator.userAgent.toLowerCase().indexOf("chrome") > -1; let isChrome = navigator.userAgent.toLowerCase().indexOf("chrome") > -1;
if (isChrome) SupportActions.isChrome(); if (isChrome) SupportActions.isChrome();
}; };

17
src/components/App.js
Unescape Escape View File

@ -3,6 +3,7 @@ import ErrorPage from "./ErrorPage";
import FrozenHead from "react-frozenhead"; import FrozenHead from "react-frozenhead";
import React from "react"; import React from "react";
import SupportStore from "../stores/SupportStore"; import SupportStore from "../stores/SupportStore";
import SupportActions from "../actions/SupportActions";
import { RouteHandler } from "react-router"; import { RouteHandler } from "react-router";
import ga from "react-google-analytics"; import ga from "react-google-analytics";
@ -21,6 +22,16 @@ export default class App extends React.Component {
}; };
} }
toggleTheme(e) {
e.preventDefault()
if (this.state.theme == "dark") {
SupportActions.themeChange("light")
} else {
SupportActions.themeChange("dark")
}
}
componentDidMount() { componentDidMount() {
SupportStore.listen(this._onChange); SupportStore.listen(this._onChange);
} }
@ -56,7 +67,7 @@ export default class App extends React.Component {
<script src="/app.js" /> <script src="/app.js" />
</FrozenHead> </FrozenHead>
<body> <body data-theme={this.state.theme}>
<div className="container"> <div className="container">
{this.state.isSupported ? <RouteHandler /> : <ErrorPage />} {this.state.isSupported ? <RouteHandler /> : <ErrorPage />}
</div> </div>
@ -81,6 +92,10 @@ export default class App extends React.Component {
&middot;{" "} &middot;{" "}
<a href="https://github.com/kern/filepizza" target="_blank"> <a href="https://github.com/kern/filepizza" target="_blank">
Fork us Fork us
</a>{" "}
&middot;{" "}
<a href="#" onClick={this.toggleTheme.bind(this)}>
{this.state.theme == "dark" ? "Toggle light theme 🌝" : "Toggle dark theme 🌚"}
</a> </a>
</p> </p>
</footer> </footer>

105
src/index.styl
Unescape Escape View File

@ -2,7 +2,6 @@
beige = #F9F2E7 beige = #F9F2E7
dark-gray = #333 dark-gray = #333
gray = #777
green = #3F6B29 green = #3F6B29
light-blue = #40C0CB light-blue = #40C0CB
light-gray = #EEE light-gray = #EEE
@ -12,6 +11,14 @@ light-yellow = #FFE476
red = #B11C17 red = #B11C17
yellow = #DEAC11 yellow = #DEAC11
:root {
--font-color: #777;
}
[data-theme="dark"] {
--font-color: #ccc;
}
@keyframes rotate { @keyframes rotate {
from { transform: rotate(0deg) } from { transform: rotate(0deg) }
to { transform: rotate(360deg) } to { transform: rotate(360deg) }
@ -19,7 +26,13 @@ yellow = #DEAC11
global-reset() global-reset()
* { box-sizing: border-box } * { box-sizing: border-box }
html, body { height: 100% } html, body {
height: 100%
background-color: white
[data-theme="dark"] {
background-color: #1E1014
}
}
h1 { h1 {
color: red; color: red;
@ -29,7 +42,13 @@ h1 {
} }
a { a {
color: gray color: var(--font-color)
}
pre {
color: var(--font-color)
font-family: monospace
margin: 1em auto
} }
strong { strong {
@ -37,7 +56,7 @@ strong {
} }
p { p {
color: gray; color: var(--font-color)
font: 18px/22px "Quicksand", sans-serif; font: 18px/22px "Quicksand", sans-serif;
text-align: center; text-align: center;
margin: 0; margin: 0;
@ -48,7 +67,7 @@ p {
} }
small { small {
color: gray; color: var(--font-color)
font: 12px/22px "Quicksand", sans-serif; font: 12px/22px "Quicksand", sans-serif;
text-align: center; text-align: center;
margin: 0; margin: 0;
@ -61,14 +80,19 @@ small {
.footer { .footer {
width: 100% width: 100%
text-align: center text-align: center
color: gray color: var(--font-color)
padding: 10px 0 10px padding: 10px 0 10px
position: fixed position: fixed
bottom: 0 bottom: 0
border-radius: 5px 5px 0 0 border-radius: 5px 5px 0 0
background white background white;
box-shadow 0 -2px 4px light-gray box-shadow 0 -2px 4px light-gray
[data-theme="dark"] & {
background: #1a1113;
box-shadow: 0 -2px 4px rgba(0,0,0,0.3)
}
iframe { iframe {
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
@ -93,6 +117,8 @@ small {
@media (max-width: 600px) { @media (max-width: 600px) {
position: relative position: relative
} }
} }
.page { .page {
@ -102,10 +128,13 @@ small {
height: 100%; height: 100%;
min-height: 640px; min-height: 640px;
padding: 40px 0 80px; padding: 40px 0 80px;
background-color: white
[data-theme="dark"] & {
background-color: #1E1014
}
} }
.drop-zone { .drop-zone {
.drop-zone-overlay { .drop-zone-overlay {
position: fixed position: fixed
top: 0 top: 0
@ -114,6 +143,7 @@ small {
height: 100% height: 100%
background: rgba(0, 0, 0, 0.5) background: rgba(0, 0, 0, 0.5)
text-align: center text-align: center
z-index: 10
&:after { &:after {
color: white color: white
@ -151,7 +181,7 @@ small {
width: 300px width: 300px
height: 300px height: 300px
transition: transform 1s transition: transform 1s
z-index: -1 z-index: 1
@media (max-width: 600px) { @media (max-width: 600px) {
width: 150px width: 150px
@ -167,6 +197,7 @@ small {
.spinner-image { .spinner-image {
display: block; display: block;
width: 40%; width: 40%;
z-index: 2
} }
.spinner-name { .spinner-name {
@ -178,6 +209,7 @@ small {
white-space: nowrap white-space: nowrap
margin-top: 10px margin-top: 10px
text-shadow: 0 0 3px #333 text-shadow: 0 0 3px #333
z-index: 2
} }
.spinner-size { .spinner-size {
@ -188,6 +220,7 @@ small {
text-overflow: ellipsis text-overflow: ellipsis
white-space: nowrap white-space: nowrap
text-shadow: 0 0 3px #333 text-shadow: 0 0 3px #333
z-index: 2
} }
} }
@ -208,6 +241,10 @@ small {
text-align: center text-align: center
width: 100% width: 100%
border-radius: 4px 4px 0 0 border-radius: 4px 4px 0 0
[data-theme="dark"] & {
background-color: #231717
color: white
}
} }
.short-url { .short-url {
@ -219,6 +256,10 @@ small {
width: 100% width: 100%
font: 14px/1 "Quicksand", sans-serif; font: 14px/1 "Quicksand", sans-serif;
border-radius: 0 0 4px 4px border-radius: 0 0 4px 4px
[data-theme="dark"] & {
background-color: #2b1f22
color: var(--font-color)
}
span { span {
font: 14px/1 monospace font: 14px/1 monospace
@ -226,12 +267,15 @@ small {
} }
.qr { .qr {
flex: none flex: none
padding-right: 40px padding-right: 40px
} }
.urls { .urls {
flex: auto flex: auto
[data-theme="dark"] & {
box-shadow: 0 1px 4px rgba(0,0,0,0.3)
}
} }
img { img {
@ -279,7 +323,7 @@ small {
} }
.data { .data {
color: gray color: var(--font-color)
font: 14px/20px "Quicksand", sans-serif font: 14px/20px "Quicksand", sans-serif
text-align: center text-align: center
overflow: hidden overflow: hidden
@ -314,6 +358,16 @@ small {
&:active { &:active {
background: light-green background: light-green
} }
[data-theme="dark"] & {
$shade = #cc4c00
background: #b62222
box-shadow: inset 0 1px 1px $shade
&:hover {
background: #d42828
box-shadow: inset 0 1px 1px lighten($shade, 10%)
}
}
} }
.progress-bar { .progress-bar {
@ -343,8 +397,10 @@ small {
} }
&.progress-bar-failed { &.progress-bar-failed {
background: red .progress-bar-inner {
box-shadow: inset 0 1px 1px light-red background: red
box-shadow: inset 0 1px 1px light-red
}
.progress-bar-text { .progress-bar-text {
text-align: center text-align: center
@ -375,18 +431,24 @@ small {
line-height: 30px line-height: 30px
} }
} }
[data-theme="dark"] & {
background: #1a0d11
box-shadow: inset 0 1px 4px rgba(0,0,0,0.6)
}
} }
.select-file-label { .select-file-label {
border: 2px solid gray border: 2px solid #777
border-radius: 4px border-radius: 4px
padding: 2px 5px padding: 2px 5px
margin-top: 10px margin-top: 10px
background: light-gray background: white
display: inline-block display: inline-block
cursor: pointer cursor: pointer
transition: all 0.25s ease transition: all 0.25s ease
&:hover, &:active { &:hover, &:active {
border-color: yellow border-color: yellow
background: white background: white
@ -397,6 +459,15 @@ small {
position: fixed position: fixed
top: -1000px top: -1000px
} }
[data-theme="dark"] & {
background: #b62222
border-color: #701815
&:hover {
border-color: #c47732
color: white
}
}
} }
.donate-button { .donate-button {

5
src/stores/SupportStore.js
Unescape Escape View File

@ -7,6 +7,7 @@ export default alt.createStore(class SupportStore {
this.bindActions(SupportActions) this.bindActions(SupportActions)
this.isSupported = true this.isSupported = true
this.isChrome = false this.isChrome = false
this.theme = "light"
} }
onNoSupport() { onNoSupport() {
@ -17,4 +18,8 @@ export default alt.createStore(class SupportStore {
this.isChrome = true this.isChrome = true
} }
onThemeChange(theme) {
localStorage.setItem("theme", theme)
this.theme = theme
}
}, 'SupportStore') }, 'SupportStore')

Write Preview
Loading…
Cancel
Save