administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-01 16:55:21 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

add-rotate-argument

Browse Source
This commit is contained in:
ElMoribond 2021-09-06 17:38:51 +02:00
parent 8109445fdd
commit ba4c796f11
6 changed files with 13 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/components/RecordingPlaylist.jsx
View File

@ -1,8 +1,7 @@
import { h } from 'preact';
import { useState } from 'preact/hooks';
import { addSeconds, differenceInSeconds, fromUnixTime, format, parseISO, startOfHour } from 'date-fns';
import ArrowDropdown from '../icons/ArrowDropdown';
import ArrowDropup from '../icons/ArrowDropup';
import Arrow from '../icons/Arrow';
import Link from '../components/Link';
import Menu from '../icons/Menu';
import MenuOpen from '../icons/MenuOpen';
@ -73,7 +72,7 @@ export function ExpandableList({ title, events = 0, children, selected = false }
<div className="flex items-center w-full p-2 cursor-pointer md:text-lg" onClick={toggle}>
<div className="flex-1 font-bold">{title}</div>
<div className="flex-1 text-right mr-4">{events} Events</div>
<div className="w-6 md:w-10 h-6 md:h-10">{active ? <ArrowDropup /> : <ArrowDropdown />}</div>
<div className="w-6 md:w-10 h-6 md:h-10">{active ? <Arrow /> : <Arrow rotate_degrees="180" />}</div>
</div>
<div className={`bg-gray-800 bg-opacity-50 ${active ? '' : 'hidden'}`}>{children}</div>
</div>

5
web/src/components/Select.jsx
View File

@ -1,6 +1,5 @@
import { h, Fragment } from 'preact';
import ArrowDropdown from '../icons/ArrowDropdown';
import ArrowDropup from '../icons/ArrowDropup';
import Arrow from '../icons/Arrow';
import Menu, { MenuItem } from './Menu';
import TextField from './TextField';
import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
@ -94,7 +93,7 @@ export default function Select({ label, onChange, options: inputOptions = [], se
onclick={handleClick}
onkeydown={handleKeydown}
readonly
trailingIcon={showMenu ? ArrowDropup : ArrowDropdown}
trailingIcon={showMenu ? Arrow : (() => <Arrow rotate_degrees="180" />)}
value={options[selected]?.label}
/>
{showMenu ? (

6
web/src/icons/ArrowDropup.jsx → web/src/icons/Arrow.jsx
View File

@ -1,13 +1,13 @@
import { h } from 'preact';
import { memo } from 'preact/compat';
export function ArrowDropup({ className = '' }) {
export function Arrow({ rotate_degrees = 0, className = '' }) {
return (
<svg className={`fill-current ${className}`} viewBox="0 0 24 24">
<svg className={`fill-current ${className}`} viewBox="0 0 24 24" transform={`rotate(${rotate_degrees})`}>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M7 14l5-5 5 5z" />
</svg>
);
}
export default memo(ArrowDropup);
export default memo(Arrow);

13
web/src/icons/ArrowDropdown.jsx
View File

@ -1,13 +0,0 @@
import { h } from 'preact';
import { memo } from 'preact/compat';
export function ArrowDropdown({ className = '' }) {
return (
<svg className={`fill-current ${className}`} viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M7 10l5 5 5-5z" />
</svg>
);
}
export default memo(ArrowDropdown);

7
web/src/routes/Event.jsx
View File

@ -3,8 +3,7 @@ import { useCallback, useState, useEffect } from 'preact/hooks';
import Link from '../components/Link';
import ActivityIndicator from '../components/ActivityIndicator';
import Button from '../components/Button';
import ArrowDown from '../icons/ArrowDropdown';
import ArrowDropup from '../icons/ArrowDropup';
import Arrow from '../icons/Arrow';
import Clip from '../icons/Clip';
import Close from '../icons/Close';
import Delete from '../icons/Delete';
@ -108,12 +107,12 @@ export default function Event({ eventId, close, scrollRef }) {
<Button className="w-full sm:w-auto" onClick={() => setShowDetails(!showDetails)}>
{showDetails ? (
<Fragment>
<ArrowDropup className="w-6" />
<Arrow className="w-6" />
Hide event Details
</Fragment>
) : (
<Fragment>
<ArrowDown className="w-6" />
<Arrow rotate_degrees="180" className="w-6" />
Show event Details
</Fragment>
)}

7
web/src/routes/StyleGuide.jsx
View File

@ -1,6 +1,5 @@
import { h } from 'preact';
import ArrowDropdown from '../icons/ArrowDropdown';
import ArrowDropup from '../icons/ArrowDropup';
import Arrow from '../icons/Arrow';
import Button from '../components/Button';
import Dialog from '../components/Dialog';
import Heading from '../components/Heading';
@ -118,8 +117,8 @@ export default function StyleGuide() {
<TextField label="Default text field" />
<TextField label="Pre-filled" value="This is my pre-filled value" />
<TextField label="With help" helpText="This is some help text" />
<TextField label="Leading icon" leadingIcon={ArrowDropdown} />
<TextField label="Trailing icon" trailingIcon={ArrowDropup} />
<TextField label="Leading icon" leadingIcon={(() => <Arrow rotate_degrees="180" />)} />
<TextField label="Trailing icon" trailingIcon={Arrow} />
</div>
</div>
);