From 8b83f7e3146a423b41f8d07895f04d8664f6036c Mon Sep 17 00:00:00 2001
From: huchenlei <chenlei.hu@mail.utoronto.ca>
Date: Sun, 15 Oct 2023 17:21:50 -0400
Subject: [PATCH] :bug: Fix flip button dark theme issue

---
 public/flip.svg                        | 39 -------------------
 src/components/FlipOutlined.vue        | 53 ++++++++++++++++++++++++++
 src/components/OpenposeObjectPanel.vue |  5 ++-
 3 files changed, 56 insertions(+), 41 deletions(-)
 delete mode 100644 public/flip.svg
 create mode 100644 src/components/FlipOutlined.vue

diff --git a/public/flip.svg b/public/flip.svg
deleted file mode 100644
index 87435de..0000000
--- a/public/flip.svg
+++ /dev/null
@@ -1,39 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
- preserveAspectRatio="xMidYMid meet">
-
-<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M2488 5099 c-69 -36 -78 -70 -78 -284 0 -166 2 -190 20 -225 23 -45
-80 -80 130 -80 50 0 107 35 130 80 18 35 20 59 20 225 0 166 -2 190 -20 225
--37 73 -127 99 -202 59z"/>
-<path d="M392 4493 c-18 -9 -43 -30 -55 -47 l-22 -31 -3 -1843 c-2 -1832 -2
--1843 18 -1882 23 -44 80 -80 130 -80 27 0 1478 573 1572 621 24 12 45 34 58
-59 20 39 20 56 20 1270 0 1214 0 1231 -20 1270 -13 25 -34 47 -58 59 -101 52
--1545 621 -1575 621 -17 0 -47 -8 -65 -17z m1418 -1933 l0 -1098 -600 -240
--600 -240 0 1578 0 1578 600 -240 600 -240 0 -1098z"/>
-<path d="M3868 4206 c-417 -167 -772 -312 -789 -322 -17 -11 -40 -35 -50 -54
--18 -33 -19 -84 -19 -1268 0 -1216 0 -1233 20 -1272 13 -25 34 -47 58 -59 94
--48 1545 -621 1572 -621 50 0 107 36 130 80 20 39 20 55 20 1872 l0 1833 -23
-39 c-26 46 -77 76 -127 76 -22 -1 -319 -115 -792 -304z m642 -1645 l0 -1579
--600 240 -600 240 0 1098 0 1098 598 240 c328 132 598 241 600 241 1 1 2 -710
-2 -1578z"/>
-<path d="M2488 4189 c-68 -35 -78 -71 -78 -279 0 -161 2 -185 20 -220 23 -45
-80 -80 130 -80 50 0 107 35 130 80 18 35 20 59 20 220 0 161 -2 185 -20 220
--37 73 -127 99 -202 59z"/>
-<path d="M2488 3289 c-68 -35 -78 -71 -78 -279 0 -161 2 -185 20 -220 23 -45
-80 -80 130 -80 50 0 107 35 130 80 18 35 20 59 20 220 0 161 -2 185 -20 220
--37 73 -127 99 -202 59z"/>
-<path d="M2488 2389 c-68 -35 -78 -71 -78 -279 0 -161 2 -185 20 -220 23 -45
-80 -80 130 -80 50 0 107 35 130 80 18 35 20 59 20 220 0 161 -2 185 -20 220
--37 73 -127 99 -202 59z"/>
-<path d="M2488 1489 c-68 -35 -78 -71 -78 -279 0 -210 10 -244 80 -280 50 -25
-90 -25 140 0 70 36 80 70 80 280 0 161 -2 185 -20 220 -37 73 -127 99 -202 59z"/>
-<path d="M2488 589 c-69 -36 -78 -70 -78 -284 0 -166 2 -190 20 -225 23 -45
-80 -80 130 -80 50 0 107 35 130 80 18 35 20 59 20 225 0 166 -2 190 -20 225
--37 73 -127 99 -202 59z"/>
-</g>
-</svg>
diff --git a/src/components/FlipOutlined.vue b/src/components/FlipOutlined.vue
new file mode 100644
index 0000000..00e043c
--- /dev/null
+++ b/src/components/FlipOutlined.vue
@@ -0,0 +1,53 @@
+<script lang="ts">
+export default {
+    name: 'FlipOutlined'
+}
+</script>
+
+<template>
+    <svg viewBox="0 0 512 512" class="custom-svg" xmlns="http://www.w3.org/2000/svg">
+        <g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" stroke="none">
+            <path d="M2488 5099 c-69 -36 -78 -70 -78 -284 0 -166 2 -190 20 -225 23 -45
+80 -80 130 -80 50 0 107 35 130 80 18 35 20 59 20 225 0 166 -2 190 -20 225
+-37 73 -127 99 -202 59z" />
+            <path d="M392 4493 c-18 -9 -43 -30 -55 -47 l-22 -31 -3 -1843 c-2 -1832 -2
+-1843 18 -1882 23 -44 80 -80 130 -80 27 0 1478 573 1572 621 24 12 45 34 58
+59 20 39 20 56 20 1270 0 1214 0 1231 -20 1270 -13 25 -34 47 -58 59 -101 52
+-1545 621 -1575 621 -17 0 -47 -8 -65 -17z m1418 -1933 l0 -1098 -600 -240
+-600 -240 0 1578 0 1578 600 -240 600 -240 0 -1098z" />
+            <path d="M3868 4206 c-417 -167 -772 -312 -789 -322 -17 -11 -40 -35 -50 -54
+-18 -33 -19 -84 -19 -1268 0 -1216 0 -1233 20 -1272 13 -25 34 -47 58 -59 94
+-48 1545 -621 1572 -621 50 0 107 36 130 80 20 39 20 55 20 1872 l0 1833 -23
+39 c-26 46 -77 76 -127 76 -22 -1 -319 -115 -792 -304z m642 -1645 l0 -1579
+-600 240 -600 240 0 1098 0 1098 598 240 c328 132 598 241 600 241 1 1 2 -710
+2 -1578z" />
+            <path d="M2488 4189 c-68 -35 -78 -71 -78 -279 0 -161 2 -185 20 -220 23 -45
+80 -80 130 -80 50 0 107 35 130 80 18 35 20 59 20 220 0 161 -2 185 -20 220
+-37 73 -127 99 -202 59z" />
+            <path d="M2488 3289 c-68 -35 -78 -71 -78 -279 0 -161 2 -185 20 -220 23 -45
+80 -80 130 -80 50 0 107 35 130 80 18 35 20 59 20 220 0 161 -2 185 -20 220
+-37 73 -127 99 -202 59z" />
+            <path d="M2488 2389 c-68 -35 -78 -71 -78 -279 0 -161 2 -185 20 -220 23 -45
+80 -80 130 -80 50 0 107 35 130 80 18 35 20 59 20 220 0 161 -2 185 -20 220
+-37 73 -127 99 -202 59z" />
+            <path d="M2488 1489 c-68 -35 -78 -71 -78 -279 0 -210 10 -244 80 -280 50 -25
+90 -25 140 0 70 36 80 70 80 280 0 161 -2 185 -20 220 -37 73 -127 99 -202 59z" />
+            <path d="M2488 589 c-69 -36 -78 -70 -78 -284 0 -166 2 -190 20 -225 23 -45
+80 -80 130 -80 50 0 107 35 130 80 18 35 20 59 20 225 0 166 -2 190 -20 225
+-37 73 -127 99 -202 59z" />
+        </g>
+    </svg>
+</template>
+  
+<style scoped>
+.custom-svg {
+    width: 1rem;
+    height: 1rem;
+    margin: 3px;
+}
+
+.custom-svg path {
+    fill: var(--color-text);
+    transition: fill 0.3s ease;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/OpenposeObjectPanel.vue b/src/components/OpenposeObjectPanel.vue
index cf07342..caeba89 100644
--- a/src/components/OpenposeObjectPanel.vue
+++ b/src/components/OpenposeObjectPanel.vue
@@ -4,8 +4,7 @@
             <VisibleSwitch v-model:visible="object.visible" @update:visible="onVisibleChange" />
             <GroupSwitch v-model:grouped="object.grouped" />
             <LockSwitch v-model:locked="object.locked" />
-            <img v-if="object.flippable" @click.stop="flipObject" :title="$t('ui.flip')" src="/flip.svg" alt="flip"
-                style="width: 1em; height: 1em; margin: 3px;">
+            <FlipOutlined v-if="object.flippable" @click.stop="flipObject" :title="$t('ui.flip')"></FlipOutlined>
             <span :class="{ hidden: !object.visible }">{{ display_name }}</span>
             <fire-outlined @click.stop="unjamInvalidKeypoints" v-if="object.hasInvalidKeypoints()"
                 title="Move all invalid keypoints to visible canvas for edit." class="unjam-button" />
@@ -33,6 +32,7 @@ import { OpenposeKeypoint2D, OpenposeObject } from '../Openpose';
 import VisibleSwitch from './VisibleSwitch.vue';
 import LockSwitch from './LockSwitch.vue';
 import GroupSwitch from './GroupSwitch.vue';
+import FlipOutlined from './FlipOutlined.vue';
 import { CloseOutlined, FireOutlined } from '@ant-design/icons-vue';
 
 const IDENTITY_MATRIX = [1, 0, 0, 1, 0, 0];
@@ -141,6 +141,7 @@ export default {
         LockSwitch,
         CloseOutlined,
         FireOutlined,
+        FlipOutlined,
     }
 };
 </script>