demo
taha12322 3 years ago
parent 49b70126e6
commit b71677b31a
  1. 58
      src/components/Setting/FontColor/Colors/chosecolor.js
  2. 125
      src/components/Setting/FontColor/colors.js
  3. 3
      src/components/footer/Item.tsx
  4. 4
      src/components/style/_btnStyle.scss
  5. 36
      src/components/style/colorsComponents.scss
  6. 1
      src/components/style/setting.scss
  7. 7
      src/containers/Header.tsx

@ -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

@ -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 [isChecked, setIsChecked] = useState(false)
const { setcolor, color } = props;
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);
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)}
/>
<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'/>
<ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle>
<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>
{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>
</Dropdown>
</nav>
</ButtonDropdown>
</>
)
}
);
};
export default Colors
export default Colors;

@ -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};

@ -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;

@ -1,4 +1,4 @@
@import './colors';
@import "./colors";
.switch {
position: relative;
@ -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;
}
}

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

@ -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" }
}
>

Loading…
Cancel
Save