lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

easier getter function to get themestyle

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.js
View File

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

4
src/AppDarkTheme.module.css
View File

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

4
src/AppLightTheme.module.css
View File

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

7
src/GlobalInfos.js
View File

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

21
src/elements/PageTitle/PageTitle.js
View File

@ -1,7 +1,5 @@
import React from "react";
import style from "./PageTitle.module.css"
import darktheme from "../../AppDarkTheme.module.css"
import lighttheme from "../../AppLightTheme.module.css"
import StaticInfos from "../../GlobalInfos";
class PageTitle extends React.Component {
@ -13,7 +11,7 @@ class PageTitle extends React.Component {
}
render() {
const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
const themeStyle = StaticInfos.getThemeStyle();
return (
<div className={style.pageheader + ' ' + themeStyle.backgroundcolor}>
<span className={style.pageheadertitle + ' ' + themeStyle.textcolor}>{this.props.title}</span>
@ -21,10 +19,25 @@ class PageTitle extends React.Component {
<>
{this.props.children}
</>
<hr className={themeStyle.hrcolor}/>
<Line/>
</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;

2
src/elements/PageTitle/PageTitle.test.js
View File

@ -19,7 +19,7 @@ describe('<Preview/>', function () {
it('renders pagetitle prop', function () {
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 () {

9
src/elements/Preview/Preview.js
View File

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

9
src/elements/SideBar/SideBar.js
View File

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

2
src/elements/SideBar/SideBar.module.css
View File

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

4
src/pages/CategoryPage/CategoryPage.js
View File

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

6
src/pages/HomePage/HomePage.js
View File

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

10
src/pages/Player/Player.js
View File

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

4
src/pages/SettingsPage/GeneralSettings.js
View File

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

4
src/pages/SettingsPage/SettingsPage.js
View File

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