frontend
/
spa_instat_tv
1
0
Fork 0
Code Pull Requests 1 Releases Wiki Activity

feat(#185): added score store and component (#50)

Browse Source
keep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Mirlan 5 years ago committed by GitHub
parent 2fff5da887
commit e29b1b3889
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 141 additions and 7 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 25
      public/images/switchOff.svg
  2. 25
      public/images/switchOn.svg
  3. 1
      src/config/lexics/authenticated.tsx
  4. 8
      src/features/App/AuthenticatedApp.tsx
  5. 19
      src/features/ToggleScore/index.tsx
  6. 28
      src/features/ToggleScore/store.tsx
  7. 42
      src/features/ToggleScore/styled.tsx

25
public/images/switchOff.svg
Unescape View File

@ -0,0 +1,25 @@
<svg width="30" height="20" viewBox="0 0 30 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 16H23C26.866 16 30 12.866 30 9C30 5.13401 26.866 2 23 2H18V3H23C26.3137 3 29 5.68629 29 9C29 12.3137 26.3137 15 23 15H18V16Z" fill="#656565"/>
<rect x="16" y="2" width="5" height="1" rx="0.5" fill="#656565"/>
<rect x="16" y="15" width="5" height="1" rx="0.5" fill="#656565"/>
<g filter="url(#filter0_d)">
<rect x="2" y="1" width="16" height="16" rx="8" fill="#999999"/>
<rect x="2" y="1" width="16" height="16" rx="8" fill="url(#paint0_radial)" fill-opacity="0.25"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(10 6.5) rotate(90) scale(10.5)">
<stop stop-color="white"/>
<stop offset="1"/>
</radialGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

25
public/images/switchOn.svg
Unescape View File

@ -0,0 +1,25 @@
<svg width="30" height="20" viewBox="0 0 30 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2L7 2C3.13401 2 -9.49935e-07 5.13401 -6.11959e-07 9C-2.73984e-07 12.866 3.13401 16 7 16L12 16L12 15L7 15C3.68629 15 1 12.3137 0.999999 9C0.999999 5.68629 3.68629 3 7 3L12 3L12 2Z" fill="#656565"/>
<rect x="14" y="16" width="5" height="1" rx="0.5" transform="rotate(180 14 16)" fill="#656565"/>
<rect x="14" y="3" width="5" height="1" rx="0.5" transform="rotate(180 14 3)" fill="#656565"/>
<g filter="url(#filter0_d)">
<rect x="28" y="17" width="16" height="16" rx="8" transform="rotate(180 28 17)" fill="#F2C94C"/>
<rect x="28" y="17" width="16" height="16" rx="8" transform="rotate(180 28 17)" fill="url(#paint0_radial)" fill-opacity="0.25"/>
</g>
<defs>
<filter id="filter0_d" x="10" y="0" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(36 22.5) rotate(90) scale(10.5)">
<stop stop-color="white"/>
<stop offset="1"/>
</radialGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
src/config/lexics/authenticated.tsx
Unescape View File

@ -1,6 +1,7 @@
export const authenticatedLexics = {
basketball: 6960,
football: 6958,
hide_score: 12982,
hockey: 6959,
logout: 4306,
player: 630,

8
src/features/App/AuthenticatedApp.tsx
Unescape View File

@ -1,4 +1,4 @@
import React, { Fragment } from 'react'
import React from 'react'
import {
Route,
Redirect,
@ -16,13 +16,13 @@ import { PlayerPage } from 'features/PlayerPage'
import { TournamentPage } from 'features/TournamentPage'
import { LanguageSelect } from 'features/LanguageSelect'
import { UserAccount } from 'features/UserAccount'
import { ToggleScore } from 'features/ToggleScore'
import { ScoreStore, ToggleScore } from 'features/ToggleScore'
export const AuthenticatedApp = () => {
useLexicsConfig(authenticatedLexics)
return (
<Fragment>
<ScoreStore>
<ToggleScore />
<LanguageSelect />
<Switch>
@ -51,6 +51,6 @@ export const AuthenticatedApp = () => {
<Redirect to={PAGES.home} />
</Switch>
</Fragment>
</ScoreStore>
)
}

19
src/features/ToggleScore/index.tsx
Unescape View File

@ -1,5 +1,20 @@
import React from 'react'
import { Wrapper } from './styled'
import { useScoreStore } from './store'
import {
Switch,
Title,
Icon,
} from './styled'
export const ToggleScore = () => <Wrapper />
export * from './store'
export const ToggleScore = () => {
const { isVisible, toggle } = useScoreStore()
return (
<Switch onClick={toggle}>
<Title t='hide_score' />
<Icon isOn={isVisible} />
</Switch>
)
}

28
src/features/ToggleScore/store.tsx
Unescape View File

@ -0,0 +1,28 @@
import type { ReactNode } from 'react'
import React, {
createContext,
useContext,
} from 'react'
import { useToggle } from 'hooks'
type ScoreStore = {
isVisible: boolean,
toggle: () => void,
}
type Props = { children: ReactNode }
const ScoreContext = createContext({} as ScoreStore)
export const ScoreStore = ({ children }: Props) => {
const { isOpen, toggle } = useToggle()
return (
<ScoreContext.Provider value={{ isVisible: isOpen, toggle }}>
{children}
</ScoreContext.Provider>
)
}
export const useScoreStore = () => useContext(ScoreContext)

42
src/features/ToggleScore/styled.tsx
Unescape View File

@ -1,3 +1,43 @@
import styled from 'styled-components/macro'
export const Wrapper = styled.div``
import { T9n } from 'features/T9n'
export const Switch = styled.div`
position: absolute;
right: 99px;
top: 32px;
display: flex;
align-items: center;
cursor: pointer;
`
export const Title = styled(T9n)`
font-style: normal;
font-weight: 600;
font-size: 14px;
letter-spacing: -0.03em;
color: #999999;
margin-right: 5px;
`
type IconProps = {
isOn: boolean,
}
export const Icon = styled.div<IconProps>`
width: 28px;
height: 16px;
color: white;
background-repeat: no-repeat;
${({ isOn }) => (
isOn
? `
background-image: url(/images/switchOn.svg);
background-position: 0 -1px;
`
: `
background-image: url(/images/switchOff.svg);
background-position: -2px -1px;
`
)};
`

Write Preview
Loading…
Cancel
Save