antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 10:23:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Convert play icon from base64 to svg

Browse source
This commit is contained in:
jeffvli 2023-10-18 19:51:55 -07:00
parent 8a53fab751
commit b28fe4cbc9
8 changed files with 204 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

138
src/renderer/components/virtual-table/cells/row-index-cell.tsx
View file

@ -2,9 +2,145 @@ import type { ICellRendererParams } from '@ag-grid-community/core';
import { Text } from '/@/renderer/components/text';
import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
export const RowIndexCell = ({ value }: ICellRendererParams) => {
const AnimatedSvg = () => {
return (
<div style={{ height: '1rem', transform: 'rotate(180deg)', width: '1rem' }}>
<svg
viewBox="100 130 57 80"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<rect
fill="var(--primary-color)"
height="80"
id="bar-1"
width="12"
x="100"
y="130"
>
<animate
attributeName="height"
begin="0.1s"
calcMode="spline"
dur="0.95s"
keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
keyTimes="0; 0.47368; 1"
repeatCount="indefinite"
values="80;15;80"
/>
</rect>
<rect
fill="var(--primary-color)"
height="80"
id="bar-2"
width="12"
x="115"
y="130"
>
<animate
attributeName="height"
begin="0.1s"
calcMode="spline"
dur="0.95s"
keySplines="0.45 0 0.55 1; 0.45 0 0.55 1"
keyTimes="0; 0.44444; 1"
repeatCount="indefinite"
values="25;80;25"
/>
</rect>
<rect
fill="var(--primary-color)"
height="80"
id="bar-3"
width="12"
x="130"
y="130"
>
<animate
attributeName="height"
begin="0.1s"
calcMode="spline"
dur="0.85s"
keySplines="0.65 0 0.35 1; 0.65 0 0.35 1"
keyTimes="0; 0.42105; 1"
repeatCount="indefinite"
values="80;10;80"
/>
</rect>
<rect
fill="var(--primary-color)"
height="80"
id="bar-4"
width="12"
x="145"
y="130"
>
<animate
attributeName="height"
begin="0.1s"
calcMode="spline"
dur="1.05s"
keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"
keyTimes="0; 0.31579; 1"
repeatCount="indefinite"
values="30;80;30"
/>
</rect>
</g>
</svg>
</div>
);
};
const StaticSvg = () => {
return (
<div style={{ height: '1rem', transform: 'rotate(180deg)', width: '1rem' }}>
<svg
viewBox="100 130 57 80"
xmlns="http://www.w3.org/2000/svg"
>
<rect
fill="var(--primary-color)"
height="20"
width="12"
x="100"
y="130"
/>
<rect
fill="var(--primary-color)"
height="60"
width="12"
x="115"
y="130"
/>
<rect
fill="var(--primary-color)"
height="80"
width="12"
x="130"
y="130"
/>
<rect
fill="var(--primary-color)"
height="45"
width="12"
x="145"
y="130"
/>
</svg>
</div>
);
};
export const RowIndexCell = ({ value, eGridCell }: ICellRendererParams) => {
const isFocused = eGridCell.classList.contains('focused');
const isCurrentSong =
eGridCell.classList.contains('current-song') ||
eGridCell.classList.contains('current-playlist-song');
return (
<CellContainer $position="right">
{isFocused && isCurrentSong ? <AnimatedSvg /> : isCurrentSong ? <StaticSvg /> : null}
<Text
$secondary
align="right"