easier getter function to get themestyle

better dark theme for SideBar.js
This commit is contained in:
Lukas Heiligenbrunner 2020-08-03 23:31:43 +00:00
parent 8bea726e98
commit 747f3005c8
14 changed files with 54 additions and 36 deletions

View File

@ -6,8 +6,6 @@ import StaticInfos from "./GlobalInfos";
// include bootstraps css // include bootstraps css
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import style from './App.module.css' import style from './App.module.css'
import lighttheme from './AppLightTheme.module.css'
import darktheme from './AppDarkTheme.module.css'
import SettingsPage from "./pages/SettingsPage/SettingsPage"; import SettingsPage from "./pages/SettingsPage/SettingsPage";
import CategoryPage from "./pages/CategoryPage/CategoryPage"; import CategoryPage from "./pages/CategoryPage/CategoryPage";
@ -83,7 +81,7 @@ class App extends React.Component {
} }
render() { render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme; const themeStyle = StaticInfos.getThemeStyle();
// add the main theme to the page body // add the main theme to the page body
document.body.className = themeStyle.backgroundcolor; document.body.className = themeStyle.backgroundcolor;
return ( return (

View File

@ -30,6 +30,10 @@
background-color: #3c3d48; background-color: #3c3d48;
} }
.thirdbackground {
background-color: #141520;
}
.preview:hover { .preview:hover {
box-shadow: rgba(255, 255, 255, 0.7) 0 0 0 5px; box-shadow: rgba(255, 255, 255, 0.7) 0 0 0 5px;
} }

View File

@ -30,6 +30,10 @@
background-color: #a8c3ff; background-color: #a8c3ff;
} }
.thirdbackground {
background-color: #8ca3fc;
}
.preview:hover { .preview:hover {
box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px; box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
} }

View File

@ -1,3 +1,6 @@
import darktheme from "./AppDarkTheme.module.css";
import lighttheme from "./AppLightTheme.module.css";
class GlobalInfos { class GlobalInfos {
#darktheme = true; #darktheme = true;
@ -8,6 +11,10 @@ class GlobalInfos {
enableDarkTheme(enable = true){ enableDarkTheme(enable = true){
this.#darktheme = enable; this.#darktheme = enable;
} }
getThemeStyle(){
return this.isDarkTheme() ? darktheme : lighttheme;
}
} }
const StaticInfos = new GlobalInfos(); const StaticInfos = new GlobalInfos();

View File

@ -1,7 +1,5 @@
import React from "react"; import React from "react";
import style from "./PageTitle.module.css" import style from "./PageTitle.module.css"
import darktheme from "../../AppDarkTheme.module.css"
import lighttheme from "../../AppLightTheme.module.css"
import StaticInfos from "../../GlobalInfos"; import StaticInfos from "../../GlobalInfos";
class PageTitle extends React.Component { class PageTitle extends React.Component {
@ -13,7 +11,7 @@ class PageTitle extends React.Component {
} }
render() { render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme; const themeStyle = StaticInfos.getThemeStyle();
return ( return (
<div className={style.pageheader + ' ' + themeStyle.backgroundcolor}> <div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
<span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span> <span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
@ -21,10 +19,25 @@ class PageTitle extends React.Component {
<> <>
{this.props.children} {this.props.children}
</> </>
<hr className={themeStyle.hrcolor}/> <Line/>
</div> </div>
); );
} }
} }
/**
* class to override default <hr> color and styling
* use this for horizontal lines to use the current active theming
*/
export class Line extends React.Component {
render() {
const themeStyle = StaticInfos.getThemeStyle();
return (
<>
<hr className={themeStyle.hrcolor}/>
</>
);
}
}
export default PageTitle; export default PageTitle;

View File

@ -19,7 +19,7 @@ describe('<Preview/>', function () {
it('renders pagetitle prop', function () { it('renders pagetitle prop', function () {
const wrapper = shallow(<PageTitle title='testtitle'/>); const wrapper = shallow(<PageTitle title='testtitle'/>);
expect(wrapper.find(".pageheader").text()).toBe("testtitle"); expect(wrapper.find(".pageheader").text()).toBe("testtitle<Line />");
}); });
it('renders subtitle prop', function () { it('renders subtitle prop', function () {

View File

@ -3,8 +3,6 @@ import style from "./Preview.module.css";
import Player from "../../pages/Player/Player"; import Player from "../../pages/Player/Player";
import {Spinner} from "react-bootstrap"; import {Spinner} from "react-bootstrap";
import StaticInfos from "../../GlobalInfos"; import StaticInfos from "../../GlobalInfos";
import darktheme from "../../AppDarkTheme.module.css";
import lighttheme from "../../AppLightTheme.module.css";
class Preview extends React.Component { class Preview extends React.Component {
constructor(props, context) { constructor(props, context) {
@ -36,7 +34,7 @@ class Preview extends React.Component {
} }
render() { render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme; const themeStyle = StaticInfos.getThemeStyle();
return ( return (
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}> <div className={style.videopreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
<div className={style.previewtitle + ' '+ themeStyle.lighttextcolor}>{this.state.name}</div> <div className={style.previewtitle + ' '+ themeStyle.lighttextcolor}>{this.state.name}</div>
@ -67,9 +65,10 @@ class Preview extends React.Component {
export class TagPreview extends React.Component { export class TagPreview extends React.Component {
render() { render() {
const themeStyle = StaticInfos.getThemeStyle();
return ( return (
<div className={style.videopreview + ' ' + style.tagpreview} onClick={() => this.itemClick()}> <div className={style.videopreview + ' ' + style.tagpreview + ' ' + themeStyle.secbackground + ' '+ themeStyle.preview} onClick={() => this.itemClick()}>
<div className={style.tagpreviewtitle}> <div className={style.tagpreviewtitle + ' ' + themeStyle.lighttextcolor}>
{this.props.name} {this.props.name}
</div> </div>
</div> </div>

View File

@ -1,12 +1,10 @@
import React from "react"; import React from "react";
import style from "./SideBar.module.css" import style from "./SideBar.module.css"
import StaticInfos from "../../GlobalInfos"; import StaticInfos from "../../GlobalInfos";
import darktheme from "../../AppDarkTheme.module.css";
import lighttheme from "../../AppLightTheme.module.css";
class SideBar extends React.Component { class SideBar extends React.Component {
render() { render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme; const themeStyle = StaticInfos.getThemeStyle();
return (<div className={style.sideinfo + ' '+ themeStyle.secbackground}> return (<div className={style.sideinfo + ' '+ themeStyle.secbackground}>
{this.props.children} {this.props.children}
</div>); </div>);
@ -15,7 +13,7 @@ class SideBar extends React.Component {
export class SideBarTitle extends React.Component { export class SideBarTitle extends React.Component {
render() { render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme; const themeStyle = StaticInfos.getThemeStyle();
return ( return (
<div className={style.sidebartitle + ' '+ themeStyle.subtextcolor}>{this.props.children}</div> <div className={style.sidebartitle + ' '+ themeStyle.subtextcolor}>{this.props.children}</div>
); );
@ -24,8 +22,9 @@ export class SideBarTitle extends React.Component {
export class SideBarItem extends React.Component { export class SideBarItem extends React.Component {
render() { render() {
const themeStyle = StaticInfos.getThemeStyle();
return ( return (
<div className={style.sidebarinfo}>{this.props.children}</div> <div className={style.sidebarinfo + ' ' + themeStyle.thirdbackground + ' ' + themeStyle.lighttextcolor}>{this.props.children}</div>
); );
} }
} }

View File

@ -4,7 +4,6 @@
padding: 20px; padding: 20px;
margin-top: 25px; margin-top: 25px;
margin-left: 15px; margin-left: 15px;
background-color: #b4c7fe;
border-radius: 20px; border-radius: 20px;
border: 2px #3574fe solid; border: 2px #3574fe solid;
overflow: hidden; overflow: hidden;
@ -17,7 +16,6 @@
.sidebarinfo { .sidebarinfo {
margin-top: 5px; margin-top: 5px;
background-color: #8ca3fc;
border-radius: 5px; border-radius: 5px;
padding: 2px 10px 2px 15px; padding: 2px 10px 2px 15px;
width: 220px; width: 220px;

View File

@ -5,7 +5,7 @@ import videocontainerstyle from "../../elements/VideoContainer/VideoContainer.mo
import {TagPreview} from "../../elements/Preview/Preview"; import {TagPreview} from "../../elements/Preview/Preview";
import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup"; import NewTagPopup from "../../elements/NewTagPopup/NewTagPopup";
import PageTitle from "../../elements/PageTitle/PageTitle"; import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
import VideoContainer from "../../elements/VideoContainer/VideoContainer"; import VideoContainer from "../../elements/VideoContainer/VideoContainer";
class CategoryPage extends React.Component { class CategoryPage extends React.Component {
@ -56,7 +56,7 @@ class CategoryPage extends React.Component {
this.loadTag(e.props.category) this.loadTag(e.props.category)
} }
}}>HD</Tag> }}>HD</Tag>
<hr/> <Line/>
<button data-testid='btnaddtag' className='btn btn-success' onClick={() => { <button data-testid='btnaddtag' className='btn btn-success' onClick={() => {
this.setState({popupvisible: true}) this.setState({popupvisible: true})
}}>Add a new Tag! }}>Add a new Tag!

View File

@ -4,7 +4,7 @@ import Tag from "../../elements/Tag/Tag";
import VideoContainer from "../../elements/VideoContainer/VideoContainer"; import VideoContainer from "../../elements/VideoContainer/VideoContainer";
import style from "./HomePage.module.css" import style from "./HomePage.module.css"
import PageTitle from "../../elements/PageTitle/PageTitle"; import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
class HomePage extends React.Component { class HomePage extends React.Component {
constructor(props, context) { constructor(props, context) {
@ -138,13 +138,13 @@ class HomePage extends React.Component {
</PageTitle> </PageTitle>
<SideBar> <SideBar>
<SideBarTitle>Infos:</SideBarTitle> <SideBarTitle>Infos:</SideBarTitle>
<hr/> <Line/>
<SideBarItem><b>{this.state.sideinfo.videonr}</b> Videos Total!</SideBarItem> <SideBarItem><b>{this.state.sideinfo.videonr}</b> Videos Total!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</SideBarItem> <SideBarItem><b>{this.state.sideinfo.fullhdvideonr}</b> FULL-HD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</SideBarItem> <SideBarItem><b>{this.state.sideinfo.hdvideonr}</b> HD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</SideBarItem> <SideBarItem><b>{this.state.sideinfo.sdvideonr}</b> SD Videos!</SideBarItem>
<SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem> <SideBarItem><b>{this.state.sideinfo.tagnr}</b> different Tags!</SideBarItem>
<hr/> <Line/>
<SideBarTitle>Default Tags:</SideBarTitle> <SideBarTitle>Default Tags:</SideBarTitle>
<Tag viewbinding={this.props.viewbinding}>All</Tag> <Tag viewbinding={this.props.viewbinding}>All</Tag>
<Tag viewbinding={this.props.viewbinding}>FullHd</Tag> <Tag viewbinding={this.props.viewbinding}>FullHd</Tag>

View File

@ -1,14 +1,11 @@
import React from "react"; import React from "react";
import style from "./Player.module.css" import style from "./Player.module.css"
import darktheme from "../../AppDarkTheme.module.css"
import lighttheme from "../../AppLightTheme.module.css"
import {PlyrComponent} from 'plyr-react'; import {PlyrComponent} from 'plyr-react';
import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar"; import SideBar, {SideBarTitle, SideBarItem} from "../../elements/SideBar/SideBar";
import Tag from "../../elements/Tag/Tag"; import Tag from "../../elements/Tag/Tag";
import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup"; import AddTagPopup from "../../elements/AddTagPopup/AddTagPopup";
import PageTitle from "../../elements/PageTitle/PageTitle"; import PageTitle, {Line} from "../../elements/PageTitle/PageTitle";
import StaticInfos from "../../GlobalInfos";
class Player extends React.Component { class Player extends React.Component {
@ -49,7 +46,6 @@ class Player extends React.Component {
} }
render() { render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
return ( return (
<div id='videocontainer'> <div id='videocontainer'>
<PageTitle <PageTitle
@ -58,13 +54,13 @@ class Player extends React.Component {
<SideBar> <SideBar>
<SideBarTitle>Infos:</SideBarTitle> <SideBarTitle>Infos:</SideBarTitle>
<hr className={themeStyle.hrcolor}/> <Line/>
<SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem> <SideBarItem><b>{this.state.likes}</b> Likes!</SideBarItem>
{this.state.quality !== 0 ? {this.state.quality !== 0 ?
<SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null} <SideBarItem><b>{this.state.quality}p</b> Quality!</SideBarItem> : null}
{this.state.length !== 0 ? {this.state.length !== 0 ?
<SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem>: null} <SideBarItem><b>{Math.round(this.state.length / 60)}</b> Minutes of length!</SideBarItem>: null}
<hr/> <Line/>
<SideBarTitle>Tags:</SideBarTitle> <SideBarTitle>Tags:</SideBarTitle>
{this.state.tags.map((m) => ( {this.state.tags.map((m) => (
<Tag <Tag

View File

@ -2,8 +2,6 @@ import React from "react";
import {Button, Col, Form} from "react-bootstrap"; import {Button, Col, Form} from "react-bootstrap";
import style from "./GeneralSettings.module.css" import style from "./GeneralSettings.module.css"
import StaticInfos from "../../GlobalInfos"; import StaticInfos from "../../GlobalInfos";
import darktheme from "../../AppDarkTheme.module.css";
import lighttheme from "../../AppLightTheme.module.css";
class GeneralSettings extends React.Component { class GeneralSettings extends React.Component {
constructor(props) { constructor(props) {
@ -40,7 +38,7 @@ class GeneralSettings extends React.Component {
} }
render() { render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme; const themeStyle = StaticInfos.getThemeStyle();
return ( return (
<> <>
<div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}> <div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>

View File

@ -2,6 +2,7 @@ import React from "react";
import MovieSettings from "./MovieSettings"; import MovieSettings from "./MovieSettings";
import GeneralSettings from "./GeneralSettings"; import GeneralSettings from "./GeneralSettings";
import style from "./SettingsPage.module.css" import style from "./SettingsPage.module.css"
import StaticInfos from "../../GlobalInfos";
class SettingsPage extends React.Component { class SettingsPage extends React.Component {
@ -27,9 +28,10 @@ class SettingsPage extends React.Component {
} }
render() { render() {
const themestyle = StaticInfos.getThemeStyle();
return ( return (
<div> <div>
<div className={style.SettingsSidebar}> <div className={style.SettingsSidebar + ' ' + themestyle.secbackground}> {/* todo: test style */}
<div className={style.SettingsSidebarTitle}>Settings</div> <div className={style.SettingsSidebarTitle}>Settings</div>
<div onClick={() => this.setState({currentpage: "general"})} <div onClick={() => this.setState({currentpage: "general"})}
className={style.SettingSidebarElement}>General className={style.SettingSidebarElement}>General