refactor(console): update the eye icon of CopyToClipboard (#3908)

2025-03-17 22:31:28 -05:00 · 2023-05-26 22:19:12 +08:00 · 2023-05-26 22:19:12 +08:00 · 292e6ebc6f
commit 292e6ebc6f
parent f1d8466919
17 changed files with 43 additions and 12 deletions
--- a/packages/console/src/assets/images/eye-closed.svg
+++ b/packages/console/src/assets/images/eye-closed.svg
@ -1,5 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fillRule="evenodd" clipRule="evenodd"
-    d="M3.66988 2.79338C3.27935 3.18391 3.27935 3.81707 3.66988 4.2076L5.30804 5.84576C3.10993 7.40492 1.66699 9.55153 1.66699 10.0003C1.66699 10.722 5.39795 15.8337 10.0003 15.8337C11.468 15.8337 12.847 15.3139 14.0447 14.5824L16.3978 16.9355C16.7883 17.326 17.4215 17.326 17.812 16.9355C18.2025 16.545 18.2025 15.9118 17.812 15.5213L5.08409 2.79338C4.69356 2.40286 4.0604 2.40286 3.66988 2.79338ZM12.0732 12.6109L7.38973 7.92745C6.9373 8.4965 6.66699 9.21685 6.66699 10.0003C6.66699 11.8413 8.15938 13.3337 10.0003 13.3337C10.7838 13.3337 11.5042 13.0634 12.0732 12.6109ZM18.3337 10.0003C18.3337 10.2663 17.8268 11.1287 16.9563 12.1117L9.07884 4.23427C9.38142 4.1904 9.68888 4.16699 10.0003 4.16699C14.6027 4.16699 18.3337 9.27866 18.3337 10.0003Z"
-    fill="currentColor" />
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.08962 1.9107C2.76419 1.58527 2.23655 1.58527 1.91111 1.9107C1.58567 2.23614 1.58567 2.76378 1.91111 3.08922L4.32982 5.50792C2.83446 6.72934 1.81505 8.16468 1.31308 8.9593L1.29284 8.9912C1.19456 9.14586 1.06692 9.3467 1.00255 9.62745C0.950582 9.85408 0.950565 10.1456 1.00251 10.3722C1.06684 10.653 1.19411 10.8533 1.29214 11.0076L1.31221 11.0393C1.80617 11.8214 2.79245 13.2098 4.23099 14.4104C5.67149 15.6127 7.61564 16.6666 10.0004 16.6666C11.6434 16.6666 13.079 16.1656 14.283 15.4611L16.9111 18.0892C17.2365 18.4147 17.7642 18.4147 18.0896 18.0892C18.4151 17.7638 18.4151 17.2361 18.0896 16.9107L15.0678 13.8889C15.0227 13.8301 14.971 13.7789 14.9145 13.7356L6.25533 5.07641C6.21533 5.02612 6.17048 4.98157 6.1219 4.94298L3.08962 1.9107ZM2.72214 9.84942C3.19507 9.10078 4.14928 7.77179 5.51526 6.69336L7.12867 8.30678C6.83561 8.80298 6.66703 9.38214 6.66703 9.99996C6.66703 11.8409 8.15942 13.3333 10.0004 13.3333C10.6182 13.3333 11.1973 13.1647 11.6936 12.8717L13.0562 14.2343C12.1482 14.7011 11.1278 15 10.0004 15C8.13092 15 6.55221 14.1769 5.29893 13.1309C4.04369 12.0832 3.16527 10.8521 2.72138 10.1493C2.69193 10.1027 2.67132 10.07 2.65411 10.0416C2.64275 10.0229 2.63525 10.01 2.63023 10.001L2.63023 9.99994L2.63023 9.99898C2.63531 9.98983 2.64293 9.97669 2.6545 9.95765C2.67183 9.92912 2.69256 9.89625 2.72214 9.84942ZM8.3337 9.99996C8.3337 9.8505 8.35326 9.70578 8.39002 9.56812L10.4322 11.6103C10.2945 11.6471 10.1498 11.6666 10.0004 11.6666C9.07989 11.6666 8.3337 10.9204 8.3337 9.99996Z" fill="currentColor"/>
+<path d="M9.07436 5.06793C9.37351 5.0237 9.68215 4.99996 10.0004 4.99996C11.8698 4.99996 13.4485 5.82304 14.7018 6.86905C15.957 7.91669 16.8355 9.14777 17.2794 9.85062C17.3088 9.89726 17.3294 9.92994 17.3466 9.95829C17.358 9.977 17.3655 9.98995 17.3705 9.99897L17.3705 9.99999L17.3705 10.0009C17.3654 10.0101 17.3577 10.0234 17.346 10.0426C17.3286 10.0713 17.3078 10.1042 17.2782 10.1512C17.0437 10.5222 16.6843 11.0467 16.2082 11.6154C15.9127 11.9682 15.9592 12.4938 16.3121 12.7893C16.665 13.0847 17.1906 13.0382 17.486 12.6853C18.0194 12.0484 18.4219 11.4613 18.6872 11.0414L18.7075 11.0093C18.8059 10.8545 18.9338 10.6533 18.9982 10.3726C19.0501 10.1459 19.0502 9.85437 18.9982 9.62772C18.9339 9.34699 18.8066 9.14663 18.7086 8.99232L18.6885 8.96067C18.1946 8.17853 17.2083 6.79011 15.7697 5.58948C14.3292 4.38723 12.3851 3.33329 10.0004 3.33329C9.5989 3.33329 9.20879 3.36327 8.83059 3.41919C8.3753 3.4865 8.06079 3.91015 8.1281 4.36544C8.19542 4.82073 8.61907 5.13524 9.07436 5.06793Z" fill="#747778"/>
 </svg>
--- a/packages/console/src/components/CopyToClipboard/index.tsx
+++ b/packages/console/src/components/CopyToClipboard/index.tsx
@ -41,7 +41,7 @@ function CopyToClipboard({
      return value;
    }

-    return '*'.repeat(value.length);
+    return '•'.repeat(value.length);
  }, [hasVisibilityToggle, showHiddenContent, value]);

  useEffect(() => {
@ -75,14 +75,16 @@ function CopyToClipboard({
      <div className={styles.row}>
        {variant !== 'icon' && <div className={styles.content}>{displayValue}</div>}
        {hasVisibilityToggle && (
-          <IconButton
-            className={styles.iconButton}
-            iconClassName={styles.icon}
-            size="small"
-            onClick={toggleHiddenContent}
-          >
-            {showHiddenContent ? <EyeClosed /> : <Eye />}
-          </IconButton>
+          <Tooltip content={t(showHiddenContent ? 'hide' : 'view')}>
+            <IconButton
+              className={styles.iconButton}
+              iconClassName={styles.icon}
+              size="small"
+              onClick={toggleHiddenContent}
+            >
+              {showHiddenContent ? <EyeClosed /> : <Eye />}
+            </IconButton>
+          </Tooltip>
        )}
        <Tooltip
          isSuccessful={copyState === 'copied'}
--- a/packages/phrases/src/locales/de/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/general.ts
@ -52,6 +52,8 @@ const general = {
  multiple_form_field: '(Mehrere)',
  demo: 'Demo',
  unnamed: 'Unbenannt',
+  view: 'Anzeigen',
+  hide: 'Verbergen',
 };

 export default general;
--- a/packages/phrases/src/locales/en/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/general.ts
@ -51,6 +51,8 @@ const general = {
  multiple_form_field: '(Multiple)',
  demo: 'Demo',
  unnamed: 'Unnamed',
+  view: 'View',
+  hide: 'Hide',
 };

 export default general;
--- a/packages/phrases/src/locales/es/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/general.ts
@ -52,6 +52,8 @@ const general = {
  multiple_form_field: '(Múltiple)',
  demo: 'Demostración',
  unnamed: 'Sin nombre',
+  view: 'Ver',
+  hide: 'Ocultar',
 };

 export default general;
--- a/packages/phrases/src/locales/fr/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/general.ts
@ -52,6 +52,8 @@ const general = {
  multiple_form_field: '(Multiple)',
  demo: 'Démo',
  unnamed: 'Sans nom',
+  view: 'Vue',
+  hide: 'Cacher',
 };

 export default general;
--- a/packages/phrases/src/locales/it/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/general.ts
@ -52,6 +52,8 @@ const general = {
  multiple_form_field: '(Multiplo)',
  demo: 'Demo',
  unnamed: 'Senza nome',
+  view: 'Vista',
+  hide: 'Nascondi',
 };

 export default general;
--- a/packages/phrases/src/locales/ja/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/general.ts
@ -51,6 +51,8 @@ const general = {
  multiple_form_field: '(複数)',
  demo: 'デモ',
  unnamed: '名前がありません',
+  view: '表示',
+  hide: '非表示',
 };

 export default general;
--- a/packages/phrases/src/locales/ko/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/general.ts
@ -51,6 +51,8 @@ const general = {
  multiple_form_field: '(복수 선택)',
  demo: '데모',
  unnamed: '이름없음',
+  view: '보기',
+  hide: '숨기기',
 };

 export default general;
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/general.ts
@ -51,6 +51,8 @@ const general = {
  multiple_form_field: '(Wiele)',
  demo: 'Demo',
  unnamed: 'Bez nazwy',
+  view: 'Pokaż',
+  hide: 'Ukryj',
 };

 export default general;
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/general.ts
@ -52,6 +52,8 @@ const general = {
  multiple_form_field: '(Multiple)',
  demo: 'Demo',
  unnamed: 'Sem nome',
+  view: 'Visualizar',
+  hide: 'Ocultar',
 };

 export default general;
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/general.ts
@ -51,6 +51,8 @@ const general = {
  multiple_form_field: '(Múltiplo)',
  demo: 'Demonstração',
  unnamed: 'Sem nome',
+  view: 'Ver',
+  hide: 'Esconder',
 };

 export default general;
--- a/packages/phrases/src/locales/ru/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/general.ts
@ -51,6 +51,8 @@ const general = {
  multiple_form_field: '(Несколько)',
  demo: 'Демо',
  unnamed: 'Без имени',
+  view: 'Просмотр',
+  hide: 'Скрыть',
 };

 export default general;
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/general.ts
@ -52,6 +52,8 @@ const general = {
  multiple_form_field: '(Çoklu)',
  demo: 'Demo',
  unnamed: 'İsimsiz',
+  view: 'Görünüm',
+  hide: 'Gizle',
 };

 export default general;
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/general.ts
@ -51,6 +51,8 @@ const general = {
  multiple_form_field: '（多选）',
  demo: '演示',
  unnamed: '未命名',
+  view: '查看',
+  hide: '隐藏',
 };

 export default general;
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/general.ts
@ -51,6 +51,8 @@ const general = {
  multiple_form_field: '（多選）',
  demo: '演示',
  unnamed: '未命名',
+  view: '查看',
+  hide: '隱藏',
 };

 export default general;
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/general.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/general.ts
@ -51,6 +51,8 @@ const general = {
  multiple_form_field: '（多選）',
  demo: '演示',
  unnamed: '未命名',
+  view: '查看',
+  hide: '隱藏',
 };

 export default general;