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
Unified 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 React, { useState } from "react";
import '../../../components/style/colorsComponents.scss'; import "../../../components/style/colorsComponents.scss";
import PalletColorOutline from '../../image/PalletColorOutline.svg'; import "../../../components/style/chosecolor.scss";
import PalletColorbold from '../../image/PalletColorBold.svg'; import PalletColorOutline from "../../image/PalletColorOutline.svg";
import Chosecolor from './Colors/chosecolor' import PalletColorbold from "../../image/PalletColorBold.svg";
import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap'; import Chosecolor from "./Colors/chosecolor";
import {
ButtonDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from "reactstrap";
const Colors = (props) => { const Colors = (props) => {
const { setcolor, color} = props; const { setcolor, color } = props;
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
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 changeColorHandler = (value) => {
const changeIcone = () => { setcolor(value);
seticon(Icon===PalletColorOutline?PalletColorbold:PalletColorOutline); };
};
return ( return (
<> <>
<nav className='main-colors-setting'> <label class="switch">
<label class="switch"> <input type="checkbox" onChange={() => setIsChecked(!isChecked)} />
<input type="checkbox" <span class="slider round"></span>
onChange={() => setIsChecked(!isChecked)} </label>
/> <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<span class="slider round"></span> <DropdownToggle>
</label> <div onClick={() => changeIcone()}>
<Dropdown isOpen={dropdownOpen} toggle={toggle}> <img src={Icon} set="curved" className="palette-icon" alt="icon" />
<DropdownToggle id='dropdown-btn'> </div>
<div onClick={()=>changeIcone()} > </DropdownToggle>
<img src={Icon} set="curved" className='palette-icon' alt='icon'/> <DropdownMenu>
</div> {isChecked ? (
</DropdownToggle> <>
<DropdownMenu className='nav-menu'> <DropdownItem>
<Chosecolor <button
isChecked={isChecked} onClick={() => changeColorHandler("dark-white")}
setcolor={setcolor} id="red-btn-d"
color={color} className="btn-color"
/> >
</DropdownMenu> الف
</Dropdown> </button>
</nav> </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%; flex-basis: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
padding-right: 5px;
& > span { & > span {
color: ${palette.white}; color: ${palette.white};

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

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

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

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

7
src/containers/Header.tsx
Unescape View File

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

Write Preview
Loading…
Cancel
Save