feat: brightness justify in topBar, Close Renovamen#4

buiduc06 · May 9, 2021 · 8857d9f · 8857d9f
1 parent c1998c0
commit 8857d9f
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 8 deletions.
diff --git a/src/components/menus/ControlCenterMenu.js b/src/components/menus/ControlCenterMenu.js
@@ -202,6 +202,7 @@ const mapStateToProps = (state) => {
  return {
  dark: state.dark,
  wifi: state.wifi,
+ brightness: state.brightness,
  bluetooth: state.bluetooth,
  airdrop: state.airdrop,
  fullscreen: state.fullscreen,

diff --git a/src/components/menus/TopBar.js b/src/components/menus/TopBar.js
@@ -5,7 +5,7 @@ import format from "date-fns/format";
 import AppleMenu from "./AppleMenu";
 import ControlCenterMenu from "./ControlCenterMenu";
 import { isFullScreen } from "../../utils/screen";
-import { setVolume, toggleFullScreen } from "../../redux/action";
+import { setVolume, setBrightness, toggleFullScreen } from "../../redux/action";
 import music from "../../configs/music";
 
 // ------- import icons -------
@@ -37,8 +37,7 @@ class TopBar extends Component {
  date: new Date(),
  showControlCenter: false,
  showAppleMenu: false,
- playing: false,
- brightness: Math.floor(Math.random() * 100)
+ playing: false
  };
  this.clickedOutside = {
  apple: false,
@@ -98,7 +97,10 @@ class TopBar extends Component {
  this.audio.volume = value / 100;
  };
 
- setBrightness = (value) => this.setState({ brightness: value });
+ setBrightness = (value) => {
+ this.props.setBrightness(value);
+ this.setState({ brightness: value });
+ };
 
  toggleControlCenter = () => {
  this.setState({
@@ -194,7 +196,6 @@ class TopBar extends Component {
  <ControlCenterMenu
  audio={this.audio}
  playing={this.state.playing}
- brightness={this.state.brightness}
  toggleAudio={this.toggleAudio}
  setVolume={this.setVolume}
  setBrightness={this.setBrightness}
@@ -212,11 +213,13 @@ class TopBar extends Component {
 
 const mapStateToProps = (state) => {
  return {
- volume: state.volume
+ volume: state.volume,
+ brightness: state.brightness
  };
 };
 
 export default connect(mapStateToProps, {
  setVolume,
+ setBrightness,
  toggleFullScreen
 })(TopBar);
diff --git a/src/pages/Desktop.js b/src/pages/Desktop.js
@@ -211,7 +211,8 @@ class Desktop extends Component {
  style={{
  backgroundImage: `url(${
  this.props.dark ? wallpapers.night : wallpapers.day
- })`
+ })`,
+ filter: `brightness( ${this.props.brightness * 0.7 + 50}% )`
  }}
  >
  {/* Dark Model Toggler */}
@@ -263,7 +264,8 @@ class Desktop extends Component {
 
 const mapStateToProps = (state) => {
  return {
- dark: state.dark
+ dark: state.dark,
+ brightness: state.brightness
  };
 };
 

diff --git a/src/redux/action.js b/src/redux/action.js
@@ -4,6 +4,7 @@ import { enterFullScreen, exitFullScreen } from "../utils/screen";
 export const type = {
  TOGGLE_DARK: "TOGGLE_DARK",
  SET_VOLUME: "SET_VOLUME",
+ SET_BRIGHTNESS: "SET_BRIGHTNESS",
  TOGGLE_WIFI: "TOGGLE_WIFI",
  TOGGLE_BLUETOOTH: "TOGGLE_BLUETOOTH",
  TOGGLE_AIRDROP: "TOGGLE_AIRDROP",
@@ -25,6 +26,13 @@ export const setVolume = (volume) => {
  };
 };
 
+export const setBrightness = (brightness) => {
+ return {
+ type: type.SET_BRIGHTNESS,
+ brightness
+ };
+};
+
 export const toggleFullScreen = (fullscreen) => {
  fullscreen ? enterFullScreen() : exitFullScreen();
  return {

diff --git a/src/redux/reducer.js b/src/redux/reducer.js
@@ -3,6 +3,7 @@ import { type } from "./action";
 const initState = {
  dark: false,
  volume: 100,
+ brightness: 80,
  wifi: true,
  bluetooth: true,
  airdrop: true,
@@ -21,6 +22,11 @@ export const Reducer = (state = initState, action = {}) => {
  ...state,
  volume: action.volume
  };
+ case type.SET_BRIGHTNESS:
+ return {
+ ...state,
+ brightness: action.brightness
+ };
  case type.TOGGLE_FULLSCREEN:
  return {
  ...state,