mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
refactor(settings-modal): align avatar settings UI with crypto wallets
Refactor avatar settings to match crypto wallets UI structure and styling. Use flexbox layout for consistent spacing, align input widths, use ErrorDisplay component for errors, and add delete avatar functionality with translations.
This commit is contained in:
plebeius
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} مواضيع منذ {{currentTimeFilterName}} — [<1>عرض المزيد من المواضيع من السنة الماضية</1>]",
|
||||
"moderator_of_this_board": "هذا المستخدم هو مشرف على هذا المنتدى",
|
||||
"administrator_of_this_board": "هذا المستخدم هو مسؤول عن هذا المنتدى",
|
||||
"copy_content_id": "نسخ معرف المحتوى"
|
||||
"copy_content_id": "نسخ معرف المحتوى",
|
||||
"delete_avatar": "حذف الصورة الرمزية"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} থ্রেড {{currentTimeFilterName}} থেকে — [<1>গত বছরের আরও থ্রেড দেখান</1>]",
|
||||
"moderator_of_this_board": "এই ব্যবহারকারী এই বোর্ডের একজন মডারেটর",
|
||||
"administrator_of_this_board": "এই ব্যবহারকারী এই বোর্ডের একজন প্রশাসক",
|
||||
"copy_content_id": "কনটেন্ট আইডি কপি করুন"
|
||||
"copy_content_id": "কনটেন্ট আইডি কপি করুন",
|
||||
"delete_avatar": "অবতার মুছুন"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} příspěvků od {{currentTimeFilterName}} — [<1>Zobrazit více příspěvků z minulého roku</1>]",
|
||||
"moderator_of_this_board": "Tento uživatel je moderátorem tohoto fóra",
|
||||
"administrator_of_this_board": "Tento uživatel je administrátorem tohoto fóra",
|
||||
"copy_content_id": "kopírovat ID obsahu"
|
||||
"copy_content_id": "kopírovat ID obsahu",
|
||||
"delete_avatar": "Smazat avatar"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} tråde siden {{currentTimeFilterName}} — [<1>Vis flere tråde fra sidste år</1>]",
|
||||
"moderator_of_this_board": "Denne bruger er moderator for dette board",
|
||||
"administrator_of_this_board": "Denne bruger er administrator for dette board",
|
||||
"copy_content_id": "kopier indhold-ID"
|
||||
"copy_content_id": "kopier indhold-ID",
|
||||
"delete_avatar": "Slet avatar"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} Threads seit {{currentTimeFilterName}} — [<1>Mehr Threads vom letzten Jahr anzeigen</1>]",
|
||||
"moderator_of_this_board": "Dieser Benutzer ist Moderator dieses Boards",
|
||||
"administrator_of_this_board": "Dieser Benutzer ist Administrator dieses Boards",
|
||||
"copy_content_id": "Inhalts-ID kopieren"
|
||||
"copy_content_id": "Inhalts-ID kopieren",
|
||||
"delete_avatar": "Avatar löschen"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} νήματα από {{currentTimeFilterName}} — [<1>Προβολή περισσότερων νημάτων από το περασμένο έτος</1>]",
|
||||
"moderator_of_this_board": "Αυτός ο χρήστης είναι συντονιστής αυτού του πίνακα",
|
||||
"administrator_of_this_board": "Αυτός ο χρήστης είναι διαχειριστής αυτού του πίνακα",
|
||||
"copy_content_id": "αντιγραφή ID περιεχομένου"
|
||||
"copy_content_id": "αντιγραφή ID περιεχομένου",
|
||||
"delete_avatar": "Διαγραφή avatar"
|
||||
}
|
||||
|
||||
@@ -245,6 +245,7 @@
|
||||
"reset_changes": "Reset Changes",
|
||||
"crypto_address_yours": "Crypto address belongs to this account.",
|
||||
"delete_wallet": "Delete Wallet",
|
||||
"delete_avatar": "Delete Avatar",
|
||||
"loading_board": "Loading board",
|
||||
"last_bumped": "Last Bumped",
|
||||
"threads_without_images_tip": "Only display threads that link to embeddable media",
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} hilos desde {{currentTimeFilterName}} — [<1>Ver más hilos del año pasado</1>]",
|
||||
"moderator_of_this_board": "Este usuario es moderador de este tablero",
|
||||
"administrator_of_this_board": "Este usuario es administrador de este tablero",
|
||||
"copy_content_id": "Copiar ID de contenido"
|
||||
"copy_content_id": "Copiar ID de contenido",
|
||||
"delete_avatar": "Eliminar avatar"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} پست از {{currentTimeFilterName}} — [<1>نمایش بیشتر پستهای سال گذشته</1>]",
|
||||
"moderator_of_this_board": "این کاربر مدیر این انجمن است",
|
||||
"administrator_of_this_board": "این کاربر مدیرکل این انجمن است",
|
||||
"copy_content_id": "کپی شناسه محتوا"
|
||||
"copy_content_id": "کپی شناسه محتوا",
|
||||
"delete_avatar": "حذف آواتار"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} ketjua sitten {{currentTimeFilterName}} — [<1>Näytä lisää viime vuoden ketjuja</1>]",
|
||||
"moderator_of_this_board": "Tämä käyttäjä on tämän taulun moderaattori",
|
||||
"administrator_of_this_board": "Tämä käyttäjä on tämän taulun järjestelmänvalvoja",
|
||||
"copy_content_id": "kopioi sisältö-ID"
|
||||
"copy_content_id": "kopioi sisältö-ID",
|
||||
"delete_avatar": "Poista avatar"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} mga thread mula {{currentTimeFilterName}} — [<1>Ipakita ang higit pang mga thread mula noong nakaraang taon</1>]",
|
||||
"moderator_of_this_board": "Ang user na ito ay moderator ng board na ito",
|
||||
"administrator_of_this_board": "Ang user na ito ay administrator ng board na ito",
|
||||
"copy_content_id": "kopyahin ang content ID"
|
||||
"copy_content_id": "kopyahin ang content ID",
|
||||
"delete_avatar": "Tanggalin ang avatar"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} fils depuis {{currentTimeFilterName}} — [<1>Afficher plus de fils de l'année dernière</1>]",
|
||||
"moderator_of_this_board": "Cet utilisateur est modérateur de ce tableau",
|
||||
"administrator_of_this_board": "Cet utilisateur est administrateur de ce tableau",
|
||||
"copy_content_id": "Copier l'ID du contenu"
|
||||
"copy_content_id": "Copier l'ID du contenu",
|
||||
"delete_avatar": "Supprimer l'avatar"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} חוטים מאז {{currentTimeFilterName}} — [<1>הצג עוד חוטים מהשנה שעברה</1>]",
|
||||
"moderator_of_this_board": "משתמש זה הוא מנהל של הלוח הזה",
|
||||
"administrator_of_this_board": "משתמש זה הוא מנהל מערכת של הלוח הזה",
|
||||
"copy_content_id": "העתק מזהה תוכן"
|
||||
"copy_content_id": "העתק מזהה תוכן",
|
||||
"delete_avatar": "מחק אווטר"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} थ्रेड्स {{currentTimeFilterName}} से — [<1>पिछले साल के अधिक थ्रेड्स दिखाएं</1>]",
|
||||
"moderator_of_this_board": "यह उपयोगकर्ता इस बोर्ड का मॉडरेटर है",
|
||||
"administrator_of_this_board": "यह उपयोगकर्ता इस बोर्ड का प्रशासक है",
|
||||
"copy_content_id": "कंटेंट ID कॉपी करें"
|
||||
"copy_content_id": "कंटेंट ID कॉपी करें",
|
||||
"delete_avatar": "अवतार हटाएं"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} szál {{currentTimeFilterName}} óta — [<1>Több szál megjelenítése a múlt évből</1>]",
|
||||
"moderator_of_this_board": "Ez a felhasználó ennek a táblának a moderátora",
|
||||
"administrator_of_this_board": "Ez a felhasználó ennek a táblának a rendszergazdája",
|
||||
"copy_content_id": "tartalom ID másolása"
|
||||
"copy_content_id": "tartalom ID másolása",
|
||||
"delete_avatar": "Avatar törlése"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} thread sejak {{currentTimeFilterName}} — [<1>Tampilkan lebih banyak thread dari tahun lalu</1>]",
|
||||
"moderator_of_this_board": "Pengguna ini adalah moderator papan ini",
|
||||
"administrator_of_this_board": "Pengguna ini adalah administrator papan ini",
|
||||
"copy_content_id": "salin ID konten"
|
||||
"copy_content_id": "salin ID konten",
|
||||
"delete_avatar": "Hapus avatar"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} thread da {{currentTimeFilterName}} — [<1>Mostra altri thread dell'anno scorso</1>]",
|
||||
"moderator_of_this_board": "Questo utente è moderatore di questa bacheca",
|
||||
"administrator_of_this_board": "Questo utente è amministratore di questa bacheca",
|
||||
"copy_content_id": "Copia ID contenuto"
|
||||
"copy_content_id": "Copia ID contenuto",
|
||||
"delete_avatar": "Elimina avatar"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} スレッド {{currentTimeFilterName}} から — [<1>去年のスレッドをさらに表示</1>]",
|
||||
"moderator_of_this_board": "このユーザーはこのボードのモデレーターです",
|
||||
"administrator_of_this_board": "このユーザーはこのボードの管理者です",
|
||||
"copy_content_id": "コンテンツIDをコピー"
|
||||
"copy_content_id": "コンテンツIDをコピー",
|
||||
"delete_avatar": "アバターを削除"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} 스레드 {{currentTimeFilterName}} 이후 — [<1>작년의 스레드 더 보기</1>]",
|
||||
"moderator_of_this_board": "이 사용자는 이 게시판의 관리자입니다",
|
||||
"administrator_of_this_board": "이 사용자는 이 게시판의 관리자입니다",
|
||||
"copy_content_id": "콘텐츠 ID 복사"
|
||||
"copy_content_id": "콘텐츠 ID 복사",
|
||||
"delete_avatar": "아바타 삭제"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} ध糀ं {{currentTimeFilterName}} पासून — [<1>गेल्या वर्षातील आणखी थ्रेड्स दाखवा</1>]",
|
||||
"moderator_of_this_board": "हा वापरकर्ता या बोर्डचा मॉडरेटर आहे",
|
||||
"administrator_of_this_board": "हा वापरकर्ता या बोर्डचा प्रशासक आहे",
|
||||
"copy_content_id": "कंटेंट ID कॉपी करा"
|
||||
"copy_content_id": "कंटेंट ID कॉपी करा",
|
||||
"delete_avatar": "अवतार हटवा"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} threads sinds {{currentTimeFilterName}} — [<1>Meer threads van afgelopen jaar tonen</1>]",
|
||||
"moderator_of_this_board": "Deze gebruiker is moderator van dit bord",
|
||||
"administrator_of_this_board": "Deze gebruiker is beheerder van dit bord",
|
||||
"copy_content_id": "kopieer inhoud-ID"
|
||||
"copy_content_id": "kopieer inhoud-ID",
|
||||
"delete_avatar": "Avatar verwijderen"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} tråder siden {{currentTimeFilterName}} — [<1>Vis flere tråder fra forrige år</1>]",
|
||||
"moderator_of_this_board": "Denne brukeren er moderator for dette tavlet",
|
||||
"administrator_of_this_board": "Denne brukeren er administrator for dette tavlet",
|
||||
"copy_content_id": "kopier innhold-ID"
|
||||
"copy_content_id": "kopier innhold-ID",
|
||||
"delete_avatar": "Slett avatar"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} wątki od {{currentTimeFilterName}} — [<1>Pokaż więcej wątków z zeszłego roku</1>]",
|
||||
"moderator_of_this_board": "Ten użytkownik jest moderatorem tego forum",
|
||||
"administrator_of_this_board": "Ten użytkownik jest administratorem tego forum",
|
||||
"copy_content_id": "skopiuj ID treści"
|
||||
"copy_content_id": "skopiuj ID treści",
|
||||
"delete_avatar": "Usuń avatar"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} tópicos desde {{currentTimeFilterName}} — [<1>Mostrar mais tópicos do ano passado</1>]",
|
||||
"moderator_of_this_board": "Este usuário é moderador deste quadro",
|
||||
"administrator_of_this_board": "Este usuário é administrador deste quadro",
|
||||
"copy_content_id": "Copiar ID do conteúdo"
|
||||
"copy_content_id": "Copiar ID do conteúdo",
|
||||
"delete_avatar": "Excluir avatar"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} subiecte din {{currentTimeFilterName}} — [<1>Afișați mai multe subiecte de anul trecut</1>]",
|
||||
"moderator_of_this_board": "Acest utilizator este moderator al acestui forum",
|
||||
"administrator_of_this_board": "Acest utilizator este administrator al acestui forum",
|
||||
"copy_content_id": "copiați ID-ul conținutului"
|
||||
"copy_content_id": "copiați ID-ul conținutului",
|
||||
"delete_avatar": "Șterge avatar"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} темы с {{currentTimeFilterName}} — [<1>Показать больше тем с прошлого года</1>]",
|
||||
"moderator_of_this_board": "Этот пользователь является модератором этого форума",
|
||||
"administrator_of_this_board": "Этот пользователь является администратором этого форума",
|
||||
"copy_content_id": "копировать ID контента"
|
||||
"copy_content_id": "копировать ID контента",
|
||||
"delete_avatar": "Удалить аватар"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} tema nga {{currentTimeFilterName}} — [<1>Shfaq më shumë tema nga viti i kaluar</1>]",
|
||||
"moderator_of_this_board": "Ky përdorues është moderator i këtij bordi",
|
||||
"administrator_of_this_board": "Ky përdorues është administrator i këtij bordi",
|
||||
"copy_content_id": "kopjo ID e përmbajtjes"
|
||||
"copy_content_id": "kopjo ID e përmbajtjes",
|
||||
"delete_avatar": "Fshi avatarin"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} trådar sedan {{currentTimeFilterName}} — [<1>Visa fler trådar från förra året</1>]",
|
||||
"moderator_of_this_board": "Denna användare är moderator för detta forum",
|
||||
"administrator_of_this_board": "Denna användare är administratör för detta forum",
|
||||
"copy_content_id": "kopiera innehålls-ID"
|
||||
"copy_content_id": "kopiera innehålls-ID",
|
||||
"delete_avatar": "Ta bort avatar"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} థ్రెడ్లు {{currentTimeFilterName}} నుండి — [<1>గత సంవత్సరం నుండి మరిన్ని థ్రెడ్లను చూపించండి</1>]",
|
||||
"moderator_of_this_board": "ఈ వినియోగదారు ఈ బోర్డ్ యొక్క మోడరేటర్",
|
||||
"administrator_of_this_board": "ఈ వినియోగదారు ఈ బోర్డ్ యొక్క నిర్వాహకుడు",
|
||||
"copy_content_id": "కంటెంట్ ID కాపీ చేయండి"
|
||||
"copy_content_id": "కంటెంట్ ID కాపీ చేయండి",
|
||||
"delete_avatar": "అవతార్ను తొలగించు"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} กระทู้ตั้งแต่ {{currentTimeFilterName}} — [<1>แสดงกระทู้จากปีที่แล้วเพิ่มเติม</1>]",
|
||||
"moderator_of_this_board": "ผู้ใช้รายนี้เป็นผู้ดูแลของบอร์ดนี้",
|
||||
"administrator_of_this_board": "ผู้ใช้รายนี้เป็นผู้ดูแลระบบของบอร์ดนี้",
|
||||
"copy_content_id": "คัดลอก ID เนื้อหา"
|
||||
"copy_content_id": "คัดลอก ID เนื้อหา",
|
||||
"delete_avatar": "ลบอวตาร"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} konu {{currentTimeFilterName}} itibariyle — [<1>Geçen yıldan daha fazla konu göster</1>]",
|
||||
"moderator_of_this_board": "Bu kullanıcı bu panonun moderatörüdür",
|
||||
"administrator_of_this_board": "Bu kullanıcı bu panonun yöneticisidir",
|
||||
"copy_content_id": "içerik ID'sini kopyala"
|
||||
"copy_content_id": "içerik ID'sini kopyala",
|
||||
"delete_avatar": "Avatarı sil"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} тем з {{currentTimeFilterName}} — [<1>Показати більше тем з минулого року</1>]",
|
||||
"moderator_of_this_board": "Цей користувач є модератором цього форуму",
|
||||
"administrator_of_this_board": "Цей користувач є адміністратором цього форуму",
|
||||
"copy_content_id": "копіювати ID контенту"
|
||||
"copy_content_id": "копіювати ID контенту",
|
||||
"delete_avatar": "Видалити аватар"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} تھریڈز {{currentTimeFilterName}} سے — [<1>گزشتہ سال کے مزید تھریڈز دکھائیں</1>]",
|
||||
"moderator_of_this_board": "یہ صارف اس بورڈ کا ماڈریٹر ہے",
|
||||
"administrator_of_this_board": "یہ صارف اس بورڈ کا منتظم ہے",
|
||||
"copy_content_id": "مواد کی شناخت کاپی کریں"
|
||||
"copy_content_id": "مواد کی شناخت کاپی کریں",
|
||||
"delete_avatar": "اوتار حذف کریں"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} chủ đề từ {{currentTimeFilterName}} — [<1>Hiển thị thêm các chủ đề từ năm ngoái</1>]",
|
||||
"moderator_of_this_board": "Người dùng này là người điều hành của bảng này",
|
||||
"administrator_of_this_board": "Người dùng này là quản trị viên của bảng này",
|
||||
"copy_content_id": "sao chép ID nội dung"
|
||||
"copy_content_id": "sao chép ID nội dung",
|
||||
"delete_avatar": "Xóa avatar"
|
||||
}
|
||||
|
||||
@@ -296,5 +296,6 @@
|
||||
"more_threads_last_year": "{{count}} 主题自 {{currentTimeFilterName}} — [<1>显示更多去年的主题</1>]",
|
||||
"moderator_of_this_board": "此用户是此版块的版主",
|
||||
"administrator_of_this_board": "此用户是此版块的管理员",
|
||||
"copy_content_id": "复制内容ID"
|
||||
"copy_content_id": "复制内容ID",
|
||||
"delete_avatar": "删除头像"
|
||||
}
|
||||
|
||||
@@ -26,61 +26,94 @@
|
||||
}
|
||||
|
||||
.avatarSettingsForm {
|
||||
padding: 10px 0 15px 10px;
|
||||
padding: 5px 0 15px 10px;
|
||||
}
|
||||
|
||||
.avatarSettingsForm input {
|
||||
width: 200px;
|
||||
.settingField {
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.settingField input {
|
||||
flex: 0 1 200px;
|
||||
min-width: 0;
|
||||
max-width: 200px;
|
||||
padding: 2px;
|
||||
margin-left: 5px;
|
||||
box-shadow: var(--box-shadow-input);
|
||||
}
|
||||
|
||||
.avatarSettingInput input {
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
.settingField[class*='step']::before {
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.avatarSettingInput a {
|
||||
color: var(--link-primary);
|
||||
.settingField.step1::before {
|
||||
content: '1.\00a0';
|
||||
}
|
||||
|
||||
.avatarSettingInput a {
|
||||
.settingField.step2::before {
|
||||
content: '2.\00a0';
|
||||
}
|
||||
|
||||
.settingField.step3::before {
|
||||
content: '3.\00a0';
|
||||
}
|
||||
|
||||
.settingField.step4::before {
|
||||
content: '4.\00a0';
|
||||
}
|
||||
|
||||
.settingField a {
|
||||
color: var(--post-link-text-color);
|
||||
text-decoration: var(--post-content-link-text-decoration);
|
||||
}
|
||||
|
||||
.avatarSettingInput a:hover {
|
||||
.settingField a:hover {
|
||||
color: var(--post-link-text-color-hover);
|
||||
text-decoration: var(--post-content-link-text-decoration-hover);
|
||||
}
|
||||
|
||||
.settingTitle {
|
||||
font-style: italic;
|
||||
text-transform: lowercase;
|
||||
font-style: inherit;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.copyMessage {
|
||||
padding-bottom: 10px;
|
||||
.timestampfield {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.pasteSignature span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pasteSignature button {
|
||||
.buttons {
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.save {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.state {
|
||||
text-transform: lowercase;
|
||||
padding-top: 10px;
|
||||
padding-left: 10px;
|
||||
max-width: 300px;
|
||||
color: var(--post-mobile-abbr-text-color);
|
||||
}
|
||||
|
||||
.copyMessage a {
|
||||
color: var(--text-primary);
|
||||
.error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.copyMessage a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.deleteAvatarContainer {
|
||||
margin-top: 20px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.removeAvatar {
|
||||
color: red;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,8 @@ import { setAccount, useAccount, useAuthorAvatar } from '@plebbit/plebbit-react-
|
||||
import styles from './avatar-settings.module.css';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
import LoadingEllipsis from '../../loading-ellipsis';
|
||||
import ErrorDisplay from '../../error-display/error-display';
|
||||
import _ from 'lodash';
|
||||
|
||||
const AvatarPreview = ({ avatar }: any) => {
|
||||
const { t } = useTranslation();
|
||||
@@ -31,7 +33,7 @@ const AvatarPreview = ({ avatar }: any) => {
|
||||
</div>
|
||||
{state !== 'succeeded' && account?.author?.avatar && (
|
||||
<div className={styles.state}>
|
||||
{!error && stateText} {error && error?.message}
|
||||
{!error && stateText} {error && <ErrorDisplay error={error} />}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
@@ -111,15 +113,26 @@ const AvatarSettings = () => {
|
||||
return alert(t('missing_signature'));
|
||||
}
|
||||
setAccount({ ...account, author: { ...account?.author, avatar } });
|
||||
alert(`saved`);
|
||||
alert(t('saved'));
|
||||
};
|
||||
|
||||
const _removeAvatar = () => {
|
||||
if (window.confirm(t('delete_confirm', { value: 'avatar', interpolation: { escapeValue: false } }))) {
|
||||
setAccount({ ...account, author: { ...account?.author, avatar: undefined } });
|
||||
setChainTicker(undefined);
|
||||
setTokenAddress(undefined);
|
||||
setTokenId(undefined);
|
||||
setTimestamp(undefined);
|
||||
setSignature(undefined);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.avatarSettings}>
|
||||
<AvatarPreview avatar={avatar} />
|
||||
<div className={styles.avatarSettingsForm}>
|
||||
<div className={styles.avatarSettingInput}>
|
||||
<span className={styles.settingTitle}>{t('chain_ticker')}</span>
|
||||
<div className={`${styles.settingField} ${styles.step1}`}>
|
||||
<span className={styles.settingTitle}>{_.capitalize(t('chain_ticker'))}: </span>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='eth/sol/avax'
|
||||
@@ -130,7 +143,7 @@ const AvatarSettings = () => {
|
||||
onChange={(e) => setChainTicker(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.avatarSettingInput}>
|
||||
<div className={`${styles.settingField} ${styles.step2}`}>
|
||||
<span className={styles.settingTitle}>
|
||||
<Trans
|
||||
i18nKey='token_address_whitelist'
|
||||
@@ -146,6 +159,7 @@ const AvatarSettings = () => {
|
||||
),
|
||||
}}
|
||||
/>
|
||||
:{' '}
|
||||
</span>
|
||||
<input
|
||||
type='text'
|
||||
@@ -157,43 +171,33 @@ const AvatarSettings = () => {
|
||||
onChange={(e) => setTokenAddress(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.avatarSettingInput}>
|
||||
<span className={styles.settingTitle}>{t('token_id')}</span>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='Token ID'
|
||||
autoCorrect='off'
|
||||
autoComplete='off'
|
||||
spellCheck='false'
|
||||
defaultValue={account?.author?.avatar?.id}
|
||||
onChange={(e) => setTokenId(e.target.value)}
|
||||
/>
|
||||
<div className={`${styles.settingField} ${styles.step3}`}>
|
||||
<span className={styles.settingTitle}>
|
||||
<Trans
|
||||
i18nKey='copy_message_etherscan'
|
||||
values={{ copy: hasCopied ? t('copied') : t('copy') }}
|
||||
components={{
|
||||
1: <button key='copy-message-button' onClick={copyMessageToSign} />,
|
||||
// eslint-disable-next-line
|
||||
2: <a key='etherscan-link' href='https://etherscan.io/verifiedSignatures' target='_blank' rel='noopener noreferrer' />,
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.copyMessage}>
|
||||
<Trans
|
||||
i18nKey='copy_message_etherscan'
|
||||
values={{ copy: hasCopied ? t('copied') : t('copy') }}
|
||||
components={{
|
||||
1: <button key='copy-message-button' onClick={copyMessageToSign} />,
|
||||
// eslint-disable-next-line
|
||||
2: <a key='etherscan-link' href='https://etherscan.io/verifiedSignatures' target='_blank' rel='noopener noreferrer' />,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.avatarSettingInput}>
|
||||
<span className={styles.settingTitle}>{t('timestamp')}</span>
|
||||
<div className={styles.settingField}>
|
||||
<span className={`${styles.settingTitle} ${styles.timestampfield}`}>{_.capitalize(t('timestamp'))}: </span>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='Timestamp'
|
||||
autoCorrect='off'
|
||||
autoComplete='off'
|
||||
spellCheck='false'
|
||||
value={timestamp}
|
||||
value={timestamp || ''}
|
||||
onChange={(e) => setTimestamp(Number(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.pasteSignature}>
|
||||
<span className={styles.settingTitle}>{t('paste_signature')}</span>
|
||||
<div className={`${styles.settingField} ${styles.step4}`}>
|
||||
<span className={styles.settingTitle}>{_.capitalize(t('paste_signature'))}: </span>
|
||||
<input
|
||||
type='text'
|
||||
placeholder='0x...'
|
||||
@@ -203,7 +207,16 @@ const AvatarSettings = () => {
|
||||
defaultValue={account?.author?.avatar?.signature?.signature}
|
||||
onChange={(e) => setSignature(e.target.value)}
|
||||
/>
|
||||
<button onClick={save}>{t('save')}</button>
|
||||
</div>
|
||||
<div className={styles.buttons}>
|
||||
<button className={styles.save} onClick={save}>
|
||||
{t('save_changes')}
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles.deleteAvatarContainer}>
|
||||
<button className={styles.removeAvatar} onClick={_removeAvatar}>
|
||||
{t('delete_avatar')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+9
-2
@@ -52,9 +52,16 @@
|
||||
content: '5. ';
|
||||
}
|
||||
|
||||
.walletField input {
|
||||
width: 200px;
|
||||
.walletField {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.settingField input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
padding: 2px;
|
||||
margin-left: 5px;
|
||||
box-shadow: var(--box-shadow-input);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user