taha
/
epub_Reader
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

color mood

Browse Source
demo
taha12322 3 years ago
parent 49b70126e6
commit b71677b31a
7 changed files with 140 additions and 120 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 58
      src/components/Setting/FontColor/Colors/chosecolor.js
  2. 147
      src/components/Setting/FontColor/colors.js
  3. 3
      src/components/footer/Item.tsx
  4. 4
      src/components/style/_btnStyle.scss
  5. 40
      src/components/style/colorsComponents.scss
  6. 1
      src/components/style/setting.scss
  7. 7
      src/containers/Header.tsx

58
src/components/Setting/FontColor/Colors/chosecolor.js
Unescape View File

@ -1,58 +0,0 @@
import React from 'react';
import '../../../style/chosecolor.scss';
const Chosecolor = (props) => {
const {setcolor , isChecked} = props;
const changeColorHandler = (value) => {
setcolor(value)
}
return (
<>
{isChecked ?
<div className='dark-mood'>
<div className='nav-btn'>
<div>
<button onClick={() => changeColorHandler('dark-white')} id='red-btn-d' className='btn-color'>
الف
</button>
</div>
<div className='nav-btn'>
<button onClick={() => changeColorHandler('dark-brown')} id='green-btn-d' className='btn-color'>
الف
</button>
</div>
<div className='nav-btn'>
<button onClick={() => changeColorHandler('dark-blue')} id='blue-btn-d' className='btn-color'>
الف
</button>
</div>
</div>
</div>:
<div className='light-mood'>
<div className='nav-btn'>
<div>
<button onClick={() => changeColorHandler('light-white')} id='red-btn-w' className='btn-color'>
الف
</button>
</div>
<div className='nav-btn'>
<button onClick={() => changeColorHandler('light-brown')} id='green-btn-w' className='btn-color'>
الف
</button>
</div>
<div className='nav-btn'>
<button onClick={() => changeColorHandler('light-blue')} id='blue-btn-w' className='btn-color'>
الف
</button>
</div>
</div>
</div>
}
</>
)
}
export default Chosecolor

147
src/components/Setting/FontColor/colors.js
Unescape View File

@ -1,50 +1,109 @@
import React , { useState } from 'react';
import '../../../components/style/colorsComponents.scss';
import PalletColorOutline from '../../image/PalletColorOutline.svg';
import PalletColorbold from '../../image/PalletColorBold.svg';
import Chosecolor from './Colors/chosecolor'
import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
import React, { useState } from "react";
import "../../../components/style/colorsComponents.scss";
import "../../../components/style/chosecolor.scss";
import PalletColorOutline from "../../image/PalletColorOutline.svg";
import PalletColorbold from "../../image/PalletColorBold.svg";
import Chosecolor from "./Colors/chosecolor";
import {
ButtonDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from "reactstrap";
const Colors = (props) => {
const { setcolor, color} = props;
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
const { setcolor, color } = props;
const [isChecked, setIsChecked] = useState(false)
const [dropdownOpen, setOpen] = useState(false);
const toggle = () => setOpen(!dropdownOpen);
const [isChecked, setIsChecked] = useState(false);
const [Icon, seticon] = useState(PalletColorOutline);
const changeIcone = () => {
seticon(Icon === PalletColorOutline ? PalletColorbold : PalletColorOutline);
};
const [Icon, seticon] = useState(PalletColorOutline);
const changeIcone = () => {
seticon(Icon===PalletColorOutline?PalletColorbold:PalletColorOutline);
};
const changeColorHandler = (value) => {
setcolor(value);
};
return (
<>
<nav className='main-colors-setting'>
<label class="switch">
<input type="checkbox"
onChange={() => setIsChecked(!isChecked)}
/>
<span class="slider round"></span>
</label>
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle id='dropdown-btn'>
<div onClick={()=>changeIcone()} >
<img src={Icon} set="curved" className='palette-icon' alt='icon'/>
</div>
</DropdownToggle>
<DropdownMenu className='nav-menu'>
<Chosecolor
isChecked={isChecked}
setcolor={setcolor}
color={color}
/>
</DropdownMenu>
</Dropdown>
</nav>
</>
)
}
return (
<>
<label class="switch">
<input type="checkbox" onChange={() => setIsChecked(!isChecked)} />
<span class="slider round"></span>
</label>
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle>
<div onClick={() => changeIcone()}>
<img src={Icon} set="curved" className="palette-icon" alt="icon" />
</div>
</DropdownToggle>
<DropdownMenu>
{isChecked ? (
<>
<DropdownItem>
<button
onClick={() => changeColorHandler("dark-white")}
id="red-btn-d"
className="btn-color"
>
الف
</button>
</DropdownItem>
<DropdownItem>
<button
onClick={() => changeColorHandler("dark-brown")}
id="green-btn-d"
className="btn-color"
>
الف
</button>
</DropdownItem>
<DropdownItem>
<button
onClick={() => changeColorHandler("dark-blue")}
id="blue-btn-d"
className="btn-color"
>
الف
</button>
</DropdownItem>
</>
) : (
<>
<DropdownItem>
<button
onClick={() => changeColorHandler("light-white")}
id="red-btn-w"
className="btn-color"
>
الف
</button>
</DropdownItem>
<DropdownItem>
<button
onClick={() => changeColorHandler("light-brown")}
id="green-btn-w"
className="btn-color"
>
الف
</button>
</DropdownItem>
<DropdownItem>
<button
onClick={() => changeColorHandler("light-blue")}
id="blue-btn-w"
className="btn-color"
>
الف
</button>
</DropdownItem>
</>
)}
</DropdownMenu>
</ButtonDropdown>
</>
);
};
export default Colors
export default Colors;

3
src/components/footer/Item.tsx
Unescape View File

@ -15,10 +15,11 @@ const Container = styled.div`
flex-basis: 100%;
display: flex;
align-items: center;
justify-content: center;
justify-content: flex-start;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 5px;
& > span {
color: ${palette.white};

4
src/components/style/_btnStyle.scss
Unescape View File

@ -1,7 +1,8 @@
@import './colors';
.btn{
border: $green solid 1.5px !important;
background-color: #fff !important;
border: none !important;
padding: 0px 3px 4px 3px !important;
height: 1.5rem;
color: $green !important;
@ -15,7 +16,6 @@
.btn:hover{
color: $white !important;
background-color: $green !important;
}
.btn:focus {
box-shadow: none !important;

40
src/components/style/colorsComponents.scss
Unescape View File

@ -1,4 +1,4 @@
@import './colors';
@import "./colors";
.switch {
position: relative;
@ -8,7 +8,7 @@
margin-right: 5px;
}
.switch input {
.switch input {
opacity: 0;
width: 0;
height: 0;
@ -22,8 +22,8 @@
right: 0;
bottom: 0;
background-color: rgb(187, 187, 187);
-webkit-transition: .4s;
transition: .4s;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
@ -34,10 +34,9 @@
left: 2px;
bottom: 3px;
background-color: white;
transition: .4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: $green;
}
@ -46,7 +45,6 @@ input:checked + .slider:before {
background-color: black;
}
input:focus + .slider {
box-shadow: 0 0 1px $green;
}
@ -64,25 +62,39 @@ input:checked + .slider:before {
border-radius: 50%;
}
.main-colors-setting{
.main-colors-setting {
display: flex;
align-items: center;
}
#dropdown-btn{
#dropdown-btn {
background-color: white !important;
border: none !important ;
padding: 0px !important;
margin: 0px !important;
}
#dropdown-btn:hover{
#dropdown-btn:hover {
color: $green !important;
}
.palette-icon{
.palette-icon {
width: 1.4rem;
margin-top: 2px;
}
}
.dropdown-menu{
position: absolute !important;
z-index: 1000 !important;
margin: 0;
text-align: center !important;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border-radius: 0.25rem;
min-width: 0rem !important;
padding: 0.5rem !important;
.dropdown-item{
padding: 0 !important;
}
}

1
src/components/style/setting.scss
Unescape View File

@ -3,6 +3,7 @@
align-items: center;
padding: 0.25rem 1rem;
justify-content: space-between;
z-index: 1000;
.nav-items{
display: flex;

7
src/containers/Header.tsx
Unescape View File

@ -46,7 +46,12 @@ const Header = ({
<nav
style={
window.innerWidth < 768
? { width: "150px", textOverflow: "ellipsis" , direction:'rtl' }
? {
width: "150px",
textOverflow: "ellipsis",
direction: "rtl",
justifyContent: "flex-start !important",
}
: { border: "none" }
}
>

Write Preview
Loading…
Cancel
Save