[WEB-4166] chore: projects app sidebar accessibility (#7115)
* chore: add ARIA attributes * chore: add missing translations * chore: add accessibility translations for multiple languages and configured store according to it * chore: refactor translation file handling and introduce TranslationFiles enum * fix: accessibility issues in workspace sidebar --------- Co-authored-by: JayashTripathy <jayashtripathy371@gmail.com> Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
b4bc49971c
commit
a3a580923c
43 changed files with 777 additions and 170 deletions
|
|
@ -24,4 +24,13 @@ export const SUPPORTED_LANGUAGES: ILanguageOption[] = [
|
|||
{ label: "Türkçe", value: "tr-TR" },
|
||||
];
|
||||
|
||||
/**
|
||||
* Enum for translation file names
|
||||
* These are the JSON files that contain translations each category
|
||||
*/
|
||||
export enum ETranslationFiles {
|
||||
TRANSLATIONS = "translations",
|
||||
ACCESSIBILITY = "accessibility",
|
||||
}
|
||||
|
||||
export const LANGUAGE_STORAGE_KEY = "userLanguage";
|
||||
|
|
|
|||
27
packages/i18n/src/locales/cs/accessibility.json
Normal file
27
packages/i18n/src/locales/cs/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "Logo pracovního prostoru",
|
||||
"open_workspace_switcher": "Otevřít přepínač pracovního prostoru",
|
||||
"open_user_menu": "Otevřít uživatelské menu",
|
||||
"open_command_palette": "Otevřít paletu příkazů",
|
||||
"open_extended_sidebar": "Otevřít rozšířený postranní panel",
|
||||
"close_extended_sidebar": "Zavřít rozšířený postranní panel",
|
||||
"create_favorites_folder": "Vytvořit složku oblíbených",
|
||||
"open_folder": "Otevřít složku",
|
||||
"close_folder": "Zavřít složku",
|
||||
"open_favorites_menu": "Otevřít menu oblíbených",
|
||||
"close_favorites_menu": "Zavřít menu oblíbených",
|
||||
"enter_folder_name": "Zadejte název složky",
|
||||
"create_new_project": "Vytvořit nový projekt",
|
||||
"open_projects_menu": "Otevřít menu projektů",
|
||||
"close_projects_menu": "Zavřít menu projektů",
|
||||
"toggle_quick_actions_menu": "Přepnout menu rychlých akcí",
|
||||
"open_project_menu": "Otevřít menu projektu",
|
||||
"close_project_menu": "Zavřít menu projektu",
|
||||
"collapse_sidebar": "Sbalit postranní panel",
|
||||
"expand_sidebar": "Rozbalit postranní panel",
|
||||
"edition_badge": "Otevřít modal placených plánů"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/de/accessibility.json
Normal file
27
packages/i18n/src/locales/de/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "Arbeitsbereich-Logo",
|
||||
"open_workspace_switcher": "Arbeitsbereich-Umschalter öffnen",
|
||||
"open_user_menu": "Benutzermenü öffnen",
|
||||
"open_command_palette": "Befehlspalette öffnen",
|
||||
"open_extended_sidebar": "Erweiterte Seitenleiste öffnen",
|
||||
"close_extended_sidebar": "Erweiterte Seitenleiste schließen",
|
||||
"create_favorites_folder": "Favoriten-Ordner erstellen",
|
||||
"open_folder": "Ordner öffnen",
|
||||
"close_folder": "Ordner schließen",
|
||||
"open_favorites_menu": "Favoriten-Menü öffnen",
|
||||
"close_favorites_menu": "Favoriten-Menü schließen",
|
||||
"enter_folder_name": "Ordnername eingeben",
|
||||
"create_new_project": "Neues Projekt erstellen",
|
||||
"open_projects_menu": "Projekt-Menü öffnen",
|
||||
"close_projects_menu": "Projekt-Menü schließen",
|
||||
"toggle_quick_actions_menu": "Schnellaktionen-Menü umschalten",
|
||||
"open_project_menu": "Projekt-Menü öffnen",
|
||||
"close_project_menu": "Projekt-Menü schließen",
|
||||
"collapse_sidebar": "Seitenleiste einklappen",
|
||||
"expand_sidebar": "Seitenleiste ausklappen",
|
||||
"edition_badge": "Modal für kostenpflichtige Pläne öffnen"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/en/accessibility.json
Normal file
27
packages/i18n/src/locales/en/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "Workspace logo",
|
||||
"open_workspace_switcher": "Open workspace switcher",
|
||||
"open_user_menu": "Open user menu",
|
||||
"open_command_palette": "Open command palette",
|
||||
"open_extended_sidebar": "Open extended sidebar",
|
||||
"close_extended_sidebar": "Close extended sidebar",
|
||||
"create_favorites_folder": "Create favorites folder",
|
||||
"open_folder": "Open folder",
|
||||
"close_folder": "Close folder",
|
||||
"open_favorites_menu": "Open favorites menu",
|
||||
"close_favorites_menu": "Close favorites menu",
|
||||
"enter_folder_name": "Enter folder name",
|
||||
"create_new_project": "Create new project",
|
||||
"open_projects_menu": "Open projects menu",
|
||||
"close_projects_menu": "Close projects menu",
|
||||
"toggle_quick_actions_menu": "Toggle quick actions menu",
|
||||
"open_project_menu": "Open project menu",
|
||||
"close_project_menu": "Close project menu",
|
||||
"collapse_sidebar": "Collapse sidebar",
|
||||
"expand_sidebar": "Expand sidebar",
|
||||
"edition_badge": "Open paid plans' modal"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2296,4 +2296,4 @@
|
|||
"previously_edited_by": "Previously edited by",
|
||||
"edited_by": "Edited by"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/es/accessibility.json
Normal file
27
packages/i18n/src/locales/es/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "Logo del espacio de trabajo",
|
||||
"open_workspace_switcher": "Abrir cambiador de espacio de trabajo",
|
||||
"open_user_menu": "Abrir menú de usuario",
|
||||
"open_command_palette": "Abrir paleta de comandos",
|
||||
"open_extended_sidebar": "Abrir barra lateral extendida",
|
||||
"close_extended_sidebar": "Cerrar barra lateral extendida",
|
||||
"create_favorites_folder": "Crear carpeta de favoritos",
|
||||
"open_folder": "Abrir carpeta",
|
||||
"close_folder": "Cerrar carpeta",
|
||||
"open_favorites_menu": "Abrir menú de favoritos",
|
||||
"close_favorites_menu": "Cerrar menú de favoritos",
|
||||
"enter_folder_name": "Ingresar nombre de carpeta",
|
||||
"create_new_project": "Crear nuevo proyecto",
|
||||
"open_projects_menu": "Abrir menú de proyectos",
|
||||
"close_projects_menu": "Cerrar menú de proyectos",
|
||||
"toggle_quick_actions_menu": "Alternar menú de acciones rápidas",
|
||||
"open_project_menu": "Abrir menú de proyecto",
|
||||
"close_project_menu": "Cerrar menú de proyecto",
|
||||
"collapse_sidebar": "Colapsar barra lateral",
|
||||
"expand_sidebar": "Expandir barra lateral",
|
||||
"edition_badge": "Abrir modal de planes de pago"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/fr/accessibility.json
Normal file
27
packages/i18n/src/locales/fr/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "Logo de l'espace de travail",
|
||||
"open_workspace_switcher": "Ouvrir le sélecteur d'espace de travail",
|
||||
"open_user_menu": "Ouvrir le menu utilisateur",
|
||||
"open_command_palette": "Ouvrir la palette de commandes",
|
||||
"open_extended_sidebar": "Ouvrir la barre latérale étendue",
|
||||
"close_extended_sidebar": "Fermer la barre latérale étendue",
|
||||
"create_favorites_folder": "Créer un dossier de favoris",
|
||||
"open_folder": "Ouvrir le dossier",
|
||||
"close_folder": "Fermer le dossier",
|
||||
"open_favorites_menu": "Ouvrir le menu des favoris",
|
||||
"close_favorites_menu": "Fermer le menu des favoris",
|
||||
"enter_folder_name": "Saisir le nom du dossier",
|
||||
"create_new_project": "Créer un nouveau projet",
|
||||
"open_projects_menu": "Ouvrir le menu des projets",
|
||||
"close_projects_menu": "Fermer le menu des projets",
|
||||
"toggle_quick_actions_menu": "Basculer le menu d'actions rapides",
|
||||
"open_project_menu": "Ouvrir le menu du projet",
|
||||
"close_project_menu": "Fermer le menu du projet",
|
||||
"collapse_sidebar": "Réduire la barre latérale",
|
||||
"expand_sidebar": "Étendre la barre latérale",
|
||||
"edition_badge": "Ouvrir le modal des plans payants"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/id/accessibility.json
Normal file
27
packages/i18n/src/locales/id/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "Logo ruang kerja",
|
||||
"open_workspace_switcher": "Buka penukar ruang kerja",
|
||||
"open_user_menu": "Buka menu pengguna",
|
||||
"open_command_palette": "Buka palet perintah",
|
||||
"open_extended_sidebar": "Buka sidebar diperluas",
|
||||
"close_extended_sidebar": "Tutup sidebar diperluas",
|
||||
"create_favorites_folder": "Buat folder favorit",
|
||||
"open_folder": "Buka folder",
|
||||
"close_folder": "Tutup folder",
|
||||
"open_favorites_menu": "Buka menu favorit",
|
||||
"close_favorites_menu": "Tutup menu favorit",
|
||||
"enter_folder_name": "Masukkan nama folder",
|
||||
"create_new_project": "Buat proyek baru",
|
||||
"open_projects_menu": "Buka menu proyek",
|
||||
"close_projects_menu": "Tutup menu proyek",
|
||||
"toggle_quick_actions_menu": "Alihkan menu tindakan cepat",
|
||||
"open_project_menu": "Buka menu proyek",
|
||||
"close_project_menu": "Tutup menu proyek",
|
||||
"collapse_sidebar": "Tutup sidebar",
|
||||
"expand_sidebar": "Perluas sidebar",
|
||||
"edition_badge": "Buka modal paket berbayar"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/it/accessibility.json
Normal file
27
packages/i18n/src/locales/it/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "Logo dell'area di lavoro",
|
||||
"open_workspace_switcher": "Apri selettore area di lavoro",
|
||||
"open_user_menu": "Apri menu utente",
|
||||
"open_command_palette": "Apri tavolozza comandi",
|
||||
"open_extended_sidebar": "Apri barra laterale estesa",
|
||||
"close_extended_sidebar": "Chiudi barra laterale estesa",
|
||||
"create_favorites_folder": "Crea cartella preferiti",
|
||||
"open_folder": "Apri cartella",
|
||||
"close_folder": "Chiudi cartella",
|
||||
"open_favorites_menu": "Apri menu preferiti",
|
||||
"close_favorites_menu": "Chiudi menu preferiti",
|
||||
"enter_folder_name": "Inserisci nome cartella",
|
||||
"create_new_project": "Crea nuovo progetto",
|
||||
"open_projects_menu": "Apri menu progetti",
|
||||
"close_projects_menu": "Chiudi menu progetti",
|
||||
"toggle_quick_actions_menu": "Attiva/disattiva menu azioni rapide",
|
||||
"open_project_menu": "Apri menu progetto",
|
||||
"close_project_menu": "Chiudi menu progetto",
|
||||
"collapse_sidebar": "Comprimi barra laterale",
|
||||
"expand_sidebar": "Espandi barra laterale",
|
||||
"edition_badge": "Apri modal piani a pagamento"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/ja/accessibility.json
Normal file
27
packages/i18n/src/locales/ja/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "ワークスペースロゴ",
|
||||
"open_workspace_switcher": "ワークスペーススイッチャーを開く",
|
||||
"open_user_menu": "ユーザーメニューを開く",
|
||||
"open_command_palette": "コマンドパレットを開く",
|
||||
"open_extended_sidebar": "拡張サイドバーを開く",
|
||||
"close_extended_sidebar": "拡張サイドバーを閉じる",
|
||||
"create_favorites_folder": "お気に入りフォルダを作成",
|
||||
"open_folder": "フォルダを開く",
|
||||
"close_folder": "フォルダを閉じる",
|
||||
"open_favorites_menu": "お気に入りメニューを開く",
|
||||
"close_favorites_menu": "お気に入りメニューを閉じる",
|
||||
"enter_folder_name": "フォルダ名を入力",
|
||||
"create_new_project": "新しいプロジェクトを作成",
|
||||
"open_projects_menu": "プロジェクトメニューを開く",
|
||||
"close_projects_menu": "プロジェクトメニューを閉じる",
|
||||
"toggle_quick_actions_menu": "クイックアクションメニューの切り替え",
|
||||
"open_project_menu": "プロジェクトメニューを開く",
|
||||
"close_project_menu": "プロジェクトメニューを閉じる",
|
||||
"collapse_sidebar": "サイドバーを折りたたむ",
|
||||
"expand_sidebar": "サイドバーを展開",
|
||||
"edition_badge": "有料プランのモーダルを開く"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/ko/accessibility.json
Normal file
27
packages/i18n/src/locales/ko/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "워크스페이스 로고",
|
||||
"open_workspace_switcher": "워크스페이스 전환기 열기",
|
||||
"open_user_menu": "사용자 메뉴 열기",
|
||||
"open_command_palette": "명령 팔레트 열기",
|
||||
"open_extended_sidebar": "확장된 사이드바 열기",
|
||||
"close_extended_sidebar": "확장된 사이드바 닫기",
|
||||
"create_favorites_folder": "즐겨찾기 폴더 생성",
|
||||
"open_folder": "폴더 열기",
|
||||
"close_folder": "폴더 닫기",
|
||||
"open_favorites_menu": "즐겨찾기 메뉴 열기",
|
||||
"close_favorites_menu": "즐겨찾기 메뉴 닫기",
|
||||
"enter_folder_name": "폴더 이름 입력",
|
||||
"create_new_project": "새 프로젝트 생성",
|
||||
"open_projects_menu": "프로젝트 메뉴 열기",
|
||||
"close_projects_menu": "프로젝트 메뉴 닫기",
|
||||
"toggle_quick_actions_menu": "빠른 작업 메뉴 토글",
|
||||
"open_project_menu": "프로젝트 메뉴 열기",
|
||||
"close_project_menu": "프로젝트 메뉴 닫기",
|
||||
"collapse_sidebar": "사이드바 축소",
|
||||
"expand_sidebar": "사이드바 확장",
|
||||
"edition_badge": "유료 플랜 모달 열기"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/pl/accessibility.json
Normal file
27
packages/i18n/src/locales/pl/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "Logo obszaru roboczego",
|
||||
"open_workspace_switcher": "Otwórz przełącznik obszaru roboczego",
|
||||
"open_user_menu": "Otwórz menu użytkownika",
|
||||
"open_command_palette": "Otwórz paletę poleceń",
|
||||
"open_extended_sidebar": "Otwórz rozszerzoną pasek boczny",
|
||||
"close_extended_sidebar": "Zamknij rozszerzoną pasek boczny",
|
||||
"create_favorites_folder": "Utwórz folder ulubionych",
|
||||
"open_folder": "Otwórz folder",
|
||||
"close_folder": "Zamknij folder",
|
||||
"open_favorites_menu": "Otwórz menu ulubionych",
|
||||
"close_favorites_menu": "Zamknij menu ulubionych",
|
||||
"enter_folder_name": "Wprowadź nazwę folderu",
|
||||
"create_new_project": "Utwórz nowy projekt",
|
||||
"open_projects_menu": "Otwórz menu projektów",
|
||||
"close_projects_menu": "Zamknij menu projektów",
|
||||
"toggle_quick_actions_menu": "Przełącz menu szybkich akcji",
|
||||
"open_project_menu": "Otwórz menu projektu",
|
||||
"close_project_menu": "Zamknij menu projektu",
|
||||
"collapse_sidebar": "Zwiń pasek boczny",
|
||||
"expand_sidebar": "Rozwiń pasek boczny",
|
||||
"edition_badge": "Otwórz modal płatnych planów"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/pt-BR/accessibility.json
Normal file
27
packages/i18n/src/locales/pt-BR/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "Logo do espaço de trabalho",
|
||||
"open_workspace_switcher": "Abrir seletor de espaço de trabalho",
|
||||
"open_user_menu": "Abrir menu do usuário",
|
||||
"open_command_palette": "Abrir paleta de comandos",
|
||||
"open_extended_sidebar": "Abrir barra lateral estendida",
|
||||
"close_extended_sidebar": "Fechar barra lateral estendida",
|
||||
"create_favorites_folder": "Criar pasta de favoritos",
|
||||
"open_folder": "Abrir pasta",
|
||||
"close_folder": "Fechar pasta",
|
||||
"open_favorites_menu": "Abrir menu de favoritos",
|
||||
"close_favorites_menu": "Fechar menu de favoritos",
|
||||
"enter_folder_name": "Digite o nome da pasta",
|
||||
"create_new_project": "Criar novo projeto",
|
||||
"open_projects_menu": "Abrir menu de projetos",
|
||||
"close_projects_menu": "Fechar menu de projetos",
|
||||
"toggle_quick_actions_menu": "Alternar menu de ações rápidas",
|
||||
"open_project_menu": "Abrir menu do projeto",
|
||||
"close_project_menu": "Fechar menu do projeto",
|
||||
"collapse_sidebar": "Recolher barra lateral",
|
||||
"expand_sidebar": "Expandir barra lateral",
|
||||
"edition_badge": "Abrir modal de planos pagos"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/ro/accessibility.json
Normal file
27
packages/i18n/src/locales/ro/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "Logo spațiu de lucru",
|
||||
"open_workspace_switcher": "Deschide comutator spațiu de lucru",
|
||||
"open_user_menu": "Deschide meniul utilizatorului",
|
||||
"open_command_palette": "Deschide paleta de comenzi",
|
||||
"open_extended_sidebar": "Deschide bara laterală extinsă",
|
||||
"close_extended_sidebar": "Închide bara laterală extinsă",
|
||||
"create_favorites_folder": "Creează folder de favorite",
|
||||
"open_folder": "Deschide folderul",
|
||||
"close_folder": "Închide folderul",
|
||||
"open_favorites_menu": "Deschide meniul de favorite",
|
||||
"close_favorites_menu": "Închide meniul de favorite",
|
||||
"enter_folder_name": "Introduceți numele folderului",
|
||||
"create_new_project": "Creează proiect nou",
|
||||
"open_projects_menu": "Deschide meniul de proiecte",
|
||||
"close_projects_menu": "Închide meniul de proiecte",
|
||||
"toggle_quick_actions_menu": "Comută meniul de acțiuni rapide",
|
||||
"open_project_menu": "Deschide meniul proiectului",
|
||||
"close_project_menu": "Închide meniul proiectului",
|
||||
"collapse_sidebar": "Restrânge bara laterală",
|
||||
"expand_sidebar": "Extinde bara laterală",
|
||||
"edition_badge": "Deschide modalul planurilor plătite"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/ru/accessibility.json
Normal file
27
packages/i18n/src/locales/ru/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "Логотип рабочей области",
|
||||
"open_workspace_switcher": "Открыть переключатель рабочей области",
|
||||
"open_user_menu": "Открыть пользовательское меню",
|
||||
"open_command_palette": "Открыть палитру команд",
|
||||
"open_extended_sidebar": "Открыть расширенную боковую панель",
|
||||
"close_extended_sidebar": "Закрыть расширенную боковую панель",
|
||||
"create_favorites_folder": "Создать папку избранного",
|
||||
"open_folder": "Открыть папку",
|
||||
"close_folder": "Закрыть папку",
|
||||
"open_favorites_menu": "Открыть меню избранного",
|
||||
"close_favorites_menu": "Закрыть меню избранного",
|
||||
"enter_folder_name": "Введите имя папки",
|
||||
"create_new_project": "Создать новый проект",
|
||||
"open_projects_menu": "Открыть меню проектов",
|
||||
"close_projects_menu": "Закрыть меню проектов",
|
||||
"toggle_quick_actions_menu": "Переключить меню быстрых действий",
|
||||
"open_project_menu": "Открыть меню проекта",
|
||||
"close_project_menu": "Закрыть меню проекта",
|
||||
"collapse_sidebar": "Свернуть боковую панель",
|
||||
"expand_sidebar": "Развернуть боковую панель",
|
||||
"edition_badge": "Открыть модал платных планов"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/sk/accessibility.json
Normal file
27
packages/i18n/src/locales/sk/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "Logo pracovného priestoru",
|
||||
"open_workspace_switcher": "Otvoriť prepínač pracovného priestoru",
|
||||
"open_user_menu": "Otvoriť používateľské menu",
|
||||
"open_command_palette": "Otvoriť paletu príkazov",
|
||||
"open_extended_sidebar": "Otvoriť rozšírený bočný panel",
|
||||
"close_extended_sidebar": "Zavrieť rozšírený bočný panel",
|
||||
"create_favorites_folder": "Vytvoriť priečinok obľúbených",
|
||||
"open_folder": "Otvoriť priečinok",
|
||||
"close_folder": "Zavrieť priečinok",
|
||||
"open_favorites_menu": "Otvoriť menu obľúbených",
|
||||
"close_favorites_menu": "Zavrieť menu obľúbených",
|
||||
"enter_folder_name": "Zadajte názov priečinka",
|
||||
"create_new_project": "Vytvoriť nový projekt",
|
||||
"open_projects_menu": "Otvoriť menu projektov",
|
||||
"close_projects_menu": "Zavrieť menu projektov",
|
||||
"toggle_quick_actions_menu": "Prepnúť menu rýchlych akcií",
|
||||
"open_project_menu": "Otvoriť menu projektu",
|
||||
"close_project_menu": "Zavrieť menu projektu",
|
||||
"collapse_sidebar": "Zbaliť bočný panel",
|
||||
"expand_sidebar": "Rozbaliť bočný panel",
|
||||
"edition_badge": "Otvoriť modal platených plánov"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/tr-TR/accessibility.json
Normal file
27
packages/i18n/src/locales/tr-TR/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "Çalışma alanı logosu",
|
||||
"open_workspace_switcher": "Çalışma alanı değiştiricisini aç",
|
||||
"open_user_menu": "Kullanıcı menüsünü aç",
|
||||
"open_command_palette": "Komut paletini aç",
|
||||
"open_extended_sidebar": "Genişletilmiş kenar çubuğunu aç",
|
||||
"close_extended_sidebar": "Genişletilmiş kenar çubuğunu kapat",
|
||||
"create_favorites_folder": "Favoriler klasörü oluştur",
|
||||
"open_folder": "Klasörü aç",
|
||||
"close_folder": "Klasörü kapat",
|
||||
"open_favorites_menu": "Favoriler menüsünü aç",
|
||||
"close_favorites_menu": "Favoriler menüsünü kapat",
|
||||
"enter_folder_name": "Klasör adını girin",
|
||||
"create_new_project": "Yeni proje oluştur",
|
||||
"open_projects_menu": "Projeler menüsünü aç",
|
||||
"close_projects_menu": "Projeler menüsünü kapat",
|
||||
"toggle_quick_actions_menu": "Hızlı eylemler menüsünü aç/kapat",
|
||||
"open_project_menu": "Proje menüsünü aç",
|
||||
"close_project_menu": "Proje menüsünü kapat",
|
||||
"collapse_sidebar": "Kenar çubuğunu daralt",
|
||||
"expand_sidebar": "Kenar çubuğunu genişlet",
|
||||
"edition_badge": "Ücretli planlar modalını aç"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/ua/accessibility.json
Normal file
27
packages/i18n/src/locales/ua/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "Логотип робочого простору",
|
||||
"open_workspace_switcher": "Відкрити перемикач робочого простору",
|
||||
"open_user_menu": "Відкрити меню користувача",
|
||||
"open_command_palette": "Відкрити палітру команд",
|
||||
"open_extended_sidebar": "Відкрити розширену бічну панель",
|
||||
"close_extended_sidebar": "Закрити розширену бічну панель",
|
||||
"create_favorites_folder": "Створити папку улюблених",
|
||||
"open_folder": "Відкрити папку",
|
||||
"close_folder": "Закрити папку",
|
||||
"open_favorites_menu": "Відкрити меню улюблених",
|
||||
"close_favorites_menu": "Закрити меню улюблених",
|
||||
"enter_folder_name": "Введіть назву папки",
|
||||
"create_new_project": "Створити новий проект",
|
||||
"open_projects_menu": "Відкрити меню проектів",
|
||||
"close_projects_menu": "Закрити меню проектів",
|
||||
"toggle_quick_actions_menu": "Перемкнути меню швидких дій",
|
||||
"open_project_menu": "Відкрити меню проекту",
|
||||
"close_project_menu": "Закрити меню проекту",
|
||||
"collapse_sidebar": "Згорнути бічну панель",
|
||||
"expand_sidebar": "Розгорнути бічну панель",
|
||||
"edition_badge": "Відкрити модал платних планів"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/vi-VN/accessibility.json
Normal file
27
packages/i18n/src/locales/vi-VN/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "Logo không gian làm việc",
|
||||
"open_workspace_switcher": "Mở trình chuyển đổi không gian làm việc",
|
||||
"open_user_menu": "Mở menu người dùng",
|
||||
"open_command_palette": "Mở bảng lệnh",
|
||||
"open_extended_sidebar": "Mở thanh bên mở rộng",
|
||||
"close_extended_sidebar": "Đóng thanh bên mở rộng",
|
||||
"create_favorites_folder": "Tạo thư mục yêu thích",
|
||||
"open_folder": "Mở thư mục",
|
||||
"close_folder": "Đóng thư mục",
|
||||
"open_favorites_menu": "Mở menu yêu thích",
|
||||
"close_favorites_menu": "Đóng menu yêu thích",
|
||||
"enter_folder_name": "Nhập tên thư mục",
|
||||
"create_new_project": "Tạo dự án mới",
|
||||
"open_projects_menu": "Mở menu dự án",
|
||||
"close_projects_menu": "Đóng menu dự án",
|
||||
"toggle_quick_actions_menu": "Bật/tắt menu hành động nhanh",
|
||||
"open_project_menu": "Mở menu dự án",
|
||||
"close_project_menu": "Đóng menu dự án",
|
||||
"collapse_sidebar": "Thu gọn thanh bên",
|
||||
"expand_sidebar": "Mở rộng thanh bên",
|
||||
"edition_badge": "Mở modal gói trả phí"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/zh-CN/accessibility.json
Normal file
27
packages/i18n/src/locales/zh-CN/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "工作空间徽标",
|
||||
"open_workspace_switcher": "打开工作空间切换器",
|
||||
"open_user_menu": "打开用户菜单",
|
||||
"open_command_palette": "打开命令面板",
|
||||
"open_extended_sidebar": "打开扩展侧边栏",
|
||||
"close_extended_sidebar": "关闭扩展侧边栏",
|
||||
"create_favorites_folder": "创建收藏夹文件夹",
|
||||
"open_folder": "打开文件夹",
|
||||
"close_folder": "关闭文件夹",
|
||||
"open_favorites_menu": "打开收藏夹菜单",
|
||||
"close_favorites_menu": "关闭收藏夹菜单",
|
||||
"enter_folder_name": "输入文件夹名称",
|
||||
"create_new_project": "创建新项目",
|
||||
"open_projects_menu": "打开项目菜单",
|
||||
"close_projects_menu": "关闭项目菜单",
|
||||
"toggle_quick_actions_menu": "切换快速操作菜单",
|
||||
"open_project_menu": "打开项目菜单",
|
||||
"close_project_menu": "关闭项目菜单",
|
||||
"collapse_sidebar": "折叠侧边栏",
|
||||
"expand_sidebar": "展开侧边栏",
|
||||
"edition_badge": "打开付费计划模态框"
|
||||
}
|
||||
}
|
||||
}
|
||||
27
packages/i18n/src/locales/zh-TW/accessibility.json
Normal file
27
packages/i18n/src/locales/zh-TW/accessibility.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"aria_labels": {
|
||||
"projects_sidebar": {
|
||||
"workspace_logo": "工作空間標誌",
|
||||
"open_workspace_switcher": "打開工作空間切換器",
|
||||
"open_user_menu": "打開用戶選單",
|
||||
"open_command_palette": "打開命令面板",
|
||||
"open_extended_sidebar": "打開擴展側邊欄",
|
||||
"close_extended_sidebar": "關閉擴展側邊欄",
|
||||
"create_favorites_folder": "創建收藏夾文件夾",
|
||||
"open_folder": "打開文件夾",
|
||||
"close_folder": "關閉文件夾",
|
||||
"open_favorites_menu": "打開收藏夾選單",
|
||||
"close_favorites_menu": "關閉收藏夾選單",
|
||||
"enter_folder_name": "輸入文件夾名稱",
|
||||
"create_new_project": "創建新項目",
|
||||
"open_projects_menu": "打開項目選單",
|
||||
"close_projects_menu": "關閉項目選單",
|
||||
"toggle_quick_actions_menu": "切換快速操作選單",
|
||||
"open_project_menu": "打開項目選單",
|
||||
"close_project_menu": "關閉項目選單",
|
||||
"collapse_sidebar": "摺疊側邊欄",
|
||||
"expand_sidebar": "展開側邊欄",
|
||||
"edition_badge": "打開付費計劃模態框"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@ import get from "lodash/get";
|
|||
import merge from "lodash/merge";
|
||||
import { makeAutoObservable, runInAction } from "mobx";
|
||||
// constants
|
||||
import { FALLBACK_LANGUAGE, SUPPORTED_LANGUAGES, LANGUAGE_STORAGE_KEY } from "../constants";
|
||||
import { FALLBACK_LANGUAGE, SUPPORTED_LANGUAGES, LANGUAGE_STORAGE_KEY, ETranslationFiles } from "../constants";
|
||||
// core translations imports
|
||||
import coreEn from "../locales/en/core.json";
|
||||
// types
|
||||
|
|
@ -130,54 +130,32 @@ export class TranslationStore {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper function to import and merge multiple translation files for a language
|
||||
* @param language - The language code
|
||||
* @param files - Array of file names to import (without .json extension)
|
||||
* @returns Promise that resolves to merged translations
|
||||
*/
|
||||
private async importAndMergeFiles(language: TLanguage, files: string[]): Promise<any> {
|
||||
try {
|
||||
const importPromises = files.map((file) => import(`../locales/${language}/${file}.json`));
|
||||
|
||||
const modules = await Promise.all(importPromises);
|
||||
const merged = modules.reduce((acc, module) => merge(acc, module.default), {});
|
||||
return { default: merged };
|
||||
} catch (error) {
|
||||
throw new Error(`Failed to import and merge files for ${language}: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Imports the translations for the given language
|
||||
* @param language - The language to import the translations for
|
||||
* @returns {Promise<any>}
|
||||
*/
|
||||
private importLanguageFile(language: TLanguage): Promise<any> {
|
||||
switch (language) {
|
||||
case "en":
|
||||
return import("../locales/en/translations.json");
|
||||
case "fr":
|
||||
return import("../locales/fr/translations.json");
|
||||
case "es":
|
||||
return import("../locales/es/translations.json");
|
||||
case "ja":
|
||||
return import("../locales/ja/translations.json");
|
||||
case "zh-CN":
|
||||
return import("../locales/zh-CN/translations.json");
|
||||
case "zh-TW":
|
||||
return import("../locales/zh-TW/translations.json");
|
||||
case "ru":
|
||||
return import("../locales/ru/translations.json");
|
||||
case "it":
|
||||
return import("../locales/it/translations.json");
|
||||
case "cs":
|
||||
return import("../locales/cs/translations.json");
|
||||
case "sk":
|
||||
return import("../locales/sk/translations.json");
|
||||
case "de":
|
||||
return import("../locales/de/translations.json");
|
||||
case "ua":
|
||||
return import("../locales/ua/translations.json");
|
||||
case "pl":
|
||||
return import("../locales/pl/translations.json");
|
||||
case "ko":
|
||||
return import("../locales/ko/translations.json");
|
||||
case "pt-BR":
|
||||
return import("../locales/pt-BR/translations.json");
|
||||
case "id":
|
||||
return import("../locales/id/translations.json");
|
||||
case "ro":
|
||||
return import("../locales/ro/translations.json");
|
||||
case "vi-VN":
|
||||
return import("../locales/vi-VN/translations.json");
|
||||
case "tr-TR":
|
||||
return import("../locales/tr-TR/translations.json");
|
||||
default:
|
||||
throw new Error(`Unsupported language: ${language}`);
|
||||
}
|
||||
private async importLanguageFile(language: TLanguage): Promise<any> {
|
||||
const files = Object.values(ETranslationFiles);
|
||||
return this.importAndMergeFiles(language, files);
|
||||
}
|
||||
|
||||
/** Checks if the language is valid based on the supported languages */
|
||||
|
|
|
|||
|
|
@ -160,7 +160,7 @@ export const Avatar: React.FC<Props> = (props) => {
|
|||
color: fallbackTextColor ?? "#ffffff",
|
||||
}}
|
||||
>
|
||||
{name ? name[0].toUpperCase() : fallbackText ?? "?"}
|
||||
{name?.[0]?.toUpperCase() ?? fallbackText ?? "?"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
|
|||
|
||||
const CustomMenu = (props: ICustomMenuDropdownProps) => {
|
||||
const {
|
||||
ariaLabel,
|
||||
buttonClassName = "",
|
||||
customButtonClassName = "",
|
||||
customButtonTabIndex = 0,
|
||||
|
|
@ -75,7 +76,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
|
|||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
isOpen ? closeDropdown() : openDropdown();
|
||||
if (menuButtonOnClick) menuButtonOnClick();
|
||||
menuButtonOnClick?.();
|
||||
};
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
|
|
@ -147,6 +148,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
|
|||
className={customButtonClassName}
|
||||
tabIndex={customButtonTabIndex}
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
{customButton}
|
||||
</button>
|
||||
|
|
@ -164,6 +166,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
|
|||
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
|
||||
} ${buttonClassName}`}
|
||||
tabIndex={customButtonTabIndex}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
<MoreHorizontal className={`h-3.5 w-3.5 ${verticalEllipsis ? "rotate-90" : ""}`} />
|
||||
</button>
|
||||
|
|
@ -183,6 +186,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
|
|||
onClick={handleMenuButtonClick}
|
||||
tabIndex={customButtonTabIndex}
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
{label}
|
||||
{!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ export interface ICustomMenuDropdownProps extends IDropdownProps {
|
|||
closeOnSelect?: boolean;
|
||||
portalElement?: Element | null;
|
||||
openOnHover?: boolean;
|
||||
ariaLabel?: string;
|
||||
}
|
||||
|
||||
export interface ICustomSelectProps extends IDropdownProps {
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export const ExtendedAppSidebar = observer(() => {
|
|||
|
||||
useExtendedSidebarOutsideClickDetector(
|
||||
extendedSidebarRef,
|
||||
() => toggleExtendedSidebar(false),
|
||||
() => toggleExtendedSidebar(true),
|
||||
"extended-sidebar-toggle"
|
||||
);
|
||||
|
||||
|
|
@ -106,8 +106,8 @@ export const ExtendedAppSidebar = observer(() => {
|
|||
className={cn(
|
||||
"absolute top-0 h-full z-[19] flex flex-col gap-0.5 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md pb-6",
|
||||
{
|
||||
"translate-x-0 opacity-100 pointer-events-auto": extendedSidebarCollapsed,
|
||||
"-translate-x-full opacity-0 pointer-events-none": !extendedSidebarCollapsed,
|
||||
"-translate-x-full opacity-0 pointer-events-none": extendedSidebarCollapsed,
|
||||
"translate-x-0 opacity-100 pointer-events-auto": !extendedSidebarCollapsed,
|
||||
"left-[70px]": sidebarCollapsed,
|
||||
"left-[250px]": !sidebarCollapsed,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { useState } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import packageJson from "package.json";
|
||||
// ui
|
||||
// plane imports
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { Button, Tooltip } from "@plane/ui";
|
||||
// hooks
|
||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
||||
|
|
@ -9,9 +10,12 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
|
|||
import { PaidPlanUpgradeModal } from "../license";
|
||||
|
||||
export const WorkspaceEditionBadge = observer(() => {
|
||||
const { isMobile } = usePlatformOS();
|
||||
// states
|
||||
const [isPaidPlanPurchaseModalOpen, setIsPaidPlanPurchaseModalOpen] = useState(false);
|
||||
// translation
|
||||
const { t } = useTranslation();
|
||||
// platform
|
||||
const { isMobile } = usePlatformOS();
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -25,6 +29,8 @@ export const WorkspaceEditionBadge = observer(() => {
|
|||
variant="accent-primary"
|
||||
className="w-fit min-w-24 cursor-pointer rounded-2xl px-2 py-1 text-center text-sm font-medium outline-none"
|
||||
onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
|
||||
aria-haspopup="dialog"
|
||||
aria-label={t("aria_labels.projects_sidebar.edition_badge")}
|
||||
>
|
||||
Community
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { observer } from "mobx-react";
|
||||
import { Search } from "lucide-react";
|
||||
// plane imports
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
// helpers
|
||||
import { cn } from "@/helpers/common.helper";
|
||||
// hooks
|
||||
|
|
@ -9,9 +11,12 @@ export const AppSearch = observer(() => {
|
|||
// store hooks
|
||||
const { sidebarCollapsed } = useAppTheme();
|
||||
const { toggleCommandPaletteModal } = useCommandPalette();
|
||||
// translation
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex-shrink-0 size-8 aspect-square grid place-items-center rounded hover:bg-custom-sidebar-background-90 outline-none",
|
||||
{
|
||||
|
|
@ -19,6 +24,7 @@ export const AppSearch = observer(() => {
|
|||
}
|
||||
)}
|
||||
onClick={() => toggleCommandPaletteModal(true)}
|
||||
aria-label={t("aria_labels.projects_sidebar.open_command_palette")}
|
||||
>
|
||||
<Search className="size-4 text-custom-sidebar-text-300" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((prop
|
|||
const sidebarPreference = getNavigationPreferences(workspaceSlug.toString());
|
||||
const isPinned = sidebarPreference?.[item.key]?.is_pinned;
|
||||
|
||||
const handleLinkClick = () => toggleExtendedSidebar();
|
||||
const handleLinkClick = () => toggleExtendedSidebar(true);
|
||||
|
||||
if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
|
||||
return null;
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
|
|||
if (window.innerWidth < 768) {
|
||||
toggleSidebar();
|
||||
}
|
||||
if (extendedSidebarCollapsed) toggleExtendedSidebar();
|
||||
if (!extendedSidebarCollapsed) toggleExtendedSidebar();
|
||||
};
|
||||
|
||||
const staticItems = ["home", "inbox", "pi-chat", "projects"];
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Briefcase, ContrastIcon, FileText, Layers, LucideIcon } from "lucide-react";
|
||||
import { Briefcase, FileText, Layers, LucideIcon } from "lucide-react";
|
||||
// plane imports
|
||||
import { IFavorite } from "@plane/types";
|
||||
import { DiceIcon, FavoriteFolderIcon, ISvgIcons } from "@plane/ui";
|
||||
import { ContrastIcon, DiceIcon, FavoriteFolderIcon, ISvgIcons } from "@plane/ui";
|
||||
|
||||
export const FAVORITE_ITEM_ICONS: Record<string, React.FC<ISvgIcons> | LucideIcon> = {
|
||||
page: FileText,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
// plane utils
|
||||
import { observer } from "mobx-react";
|
||||
// plane imports
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { cn } from "@plane/utils";
|
||||
// helpers
|
||||
import { getFileURL } from "@/helpers/file.helper";
|
||||
|
|
@ -9,22 +11,27 @@ type Props = {
|
|||
classNames?: string;
|
||||
};
|
||||
|
||||
export const WorkspaceLogo = (props: Props) => (
|
||||
<div
|
||||
className={cn(
|
||||
`relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
|
||||
!props.logo && "rounded bg-custom-primary-500 text-white"
|
||||
} ${props.classNames ? props.classNames : ""}`
|
||||
)}
|
||||
>
|
||||
{props.logo && props.logo !== "" ? (
|
||||
<img
|
||||
src={getFileURL(props.logo)}
|
||||
className="absolute left-0 top-0 h-full w-full rounded object-cover"
|
||||
alt="Workspace Logo"
|
||||
/>
|
||||
) : (
|
||||
(props.name?.charAt(0) ?? "...")
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
export const WorkspaceLogo = observer((props: Props) => {
|
||||
// translation
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
`relative grid h-6 w-6 flex-shrink-0 place-items-center uppercase ${
|
||||
!props.logo && "rounded bg-custom-primary-500 text-white"
|
||||
} ${props.classNames ? props.classNames : ""}`
|
||||
)}
|
||||
>
|
||||
{props.logo && props.logo !== "" ? (
|
||||
<img
|
||||
src={getFileURL(props.logo)}
|
||||
className="absolute left-0 top-0 h-full w-full rounded object-cover"
|
||||
alt={t("aria_labels.projects_sidebar.workspace_logo")}
|
||||
/>
|
||||
) : (
|
||||
(props.name?.[0] ?? "...")
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -25,21 +25,17 @@ import { WorkspaceLogo } from "../logo";
|
|||
import SidebarDropdownItem from "./dropdown-item";
|
||||
|
||||
export const SidebarDropdown = observer(() => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// store hooks
|
||||
const { sidebarCollapsed, toggleSidebar } = useAppTheme();
|
||||
const { data: currentUser } = useUser();
|
||||
const {
|
||||
// updateCurrentUser,
|
||||
// isUserInstanceAdmin,
|
||||
signOut,
|
||||
} = useUser();
|
||||
const { signOut } = useUser();
|
||||
const { updateUserProfile } = useUserProfile();
|
||||
const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
|
||||
|
||||
const isUserInstanceAdmin = false;
|
||||
const { currentWorkspace: activeWorkspace, workspaces } = useWorkspace();
|
||||
// derived values
|
||||
const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
|
||||
const isUserInstanceAdmin = false;
|
||||
// translation
|
||||
const { t } = useTranslation();
|
||||
// popper-js refs
|
||||
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
|
||||
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
|
||||
|
|
@ -87,6 +83,7 @@ export const SidebarDropdown = observer(() => {
|
|||
"group/menu-button flex items-center justify-between gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none",
|
||||
{ "flex-grow": !sidebarCollapsed }
|
||||
)}
|
||||
aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
|
||||
>
|
||||
<div className="flex-grow flex items-center gap-2 truncate">
|
||||
<WorkspaceLogo logo={activeWorkspace?.logo_url} name={activeWorkspace?.name} />
|
||||
|
|
@ -190,7 +187,11 @@ export const SidebarDropdown = observer(() => {
|
|||
)}
|
||||
</Menu>
|
||||
<Menu as="div" className="relative flex-shrink-0">
|
||||
<Menu.Button className="grid place-items-center outline-none" ref={setReferenceElement}>
|
||||
<Menu.Button
|
||||
className="grid place-items-center outline-none"
|
||||
ref={setReferenceElement}
|
||||
aria-label={t("aria_labels.projects_sidebar.open_user_menu")}
|
||||
>
|
||||
<Avatar
|
||||
name={currentUser?.display_name}
|
||||
src={getFileURL(currentUser?.avatar_url ?? "")}
|
||||
|
|
|
|||
|
|
@ -17,10 +17,9 @@ import { useParams } from "next/navigation";
|
|||
import { createRoot } from "react-dom/client";
|
||||
import { PenSquare, Star, MoreHorizontal, ChevronRight, GripVertical } from "lucide-react";
|
||||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
|
||||
// plane helpers
|
||||
// plane imports
|
||||
import { useOutsideClickDetector } from "@plane/hooks";
|
||||
// ui
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { IFavorite, InstructionType } from "@plane/types";
|
||||
import { CustomMenu, Tooltip, DropIndicator, FavoriteFolderIcon, DragHandle } from "@plane/ui";
|
||||
// helpers
|
||||
|
|
@ -29,7 +28,7 @@ import { cn } from "@/helpers/common.helper";
|
|||
import { useAppTheme } from "@/hooks/store";
|
||||
import { useFavorite } from "@/hooks/store/use-favorite";
|
||||
import { usePlatformOS } from "@/hooks/use-platform-os";
|
||||
// constants
|
||||
// local imports
|
||||
import { FavoriteRoot } from "./favorite-items";
|
||||
import { getCanDrop, getInstructionFromPayload } from "./favorites.helpers";
|
||||
import { NewFavoriteFolder } from "./new-fav-folder";
|
||||
|
|
@ -54,10 +53,11 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
|
|||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [folderToRename, setFolderToRename] = useState<string | boolean | null>(null);
|
||||
const [instruction, setInstruction] = useState<InstructionType | undefined>(undefined);
|
||||
|
||||
// refs
|
||||
const actionSectionRef = useRef<HTMLDivElement | null>(null);
|
||||
const elementRef = useRef<HTMLDivElement | null>(null);
|
||||
// translation
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
if (favorite.children === undefined && workspaceSlug) {
|
||||
|
|
@ -231,11 +231,11 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
|
|||
<span
|
||||
ref={actionSectionRef}
|
||||
className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 rounded"
|
||||
onClick={() => setIsMenuActive(!isMenuActive)}
|
||||
>
|
||||
<MoreHorizontal className="size-4" />
|
||||
<MoreHorizontal className="size-3" />
|
||||
</span>
|
||||
}
|
||||
menuButtonOnClick={() => setIsMenuActive(!isMenuActive)}
|
||||
className={cn(
|
||||
"opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
|
||||
{
|
||||
|
|
@ -244,6 +244,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
|
|||
)}
|
||||
customButtonClassName="grid place-items-center"
|
||||
placement="bottom-start"
|
||||
ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
|
||||
>
|
||||
<CustomMenu.MenuItem onClick={() => handleRemoveFromFavorites(favorite)}>
|
||||
<span className="flex items-center justify-start gap-2">
|
||||
|
|
@ -267,9 +268,12 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
|
|||
"inline-block": isMenuActive,
|
||||
}
|
||||
)}
|
||||
aria-label={t(
|
||||
open ? "aria_labels.projects_sidebar.close_folder" : "aria_labels.projects_sidebar.open_folder"
|
||||
)}
|
||||
>
|
||||
<ChevronRight
|
||||
className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
|
||||
className={cn("size-3 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
|
||||
"rotate-90": open,
|
||||
})}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
"use client";
|
||||
import React, { FC } from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { MoreHorizontal, Star } from "lucide-react";
|
||||
// plane imports
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { IFavorite } from "@plane/types";
|
||||
// ui
|
||||
import { CustomMenu } from "@plane/ui";
|
||||
// helpers
|
||||
import { cn } from "@/helpers/common.helper";
|
||||
|
|
@ -15,19 +17,22 @@ type Props = {
|
|||
handleRemoveFromFavorites: (favorite: IFavorite) => void;
|
||||
};
|
||||
|
||||
export const FavoriteItemQuickAction: FC<Props> = (props) => {
|
||||
export const FavoriteItemQuickAction: FC<Props> = observer((props) => {
|
||||
const { ref, isMenuActive, onChange, handleRemoveFromFavorites, favorite } = props;
|
||||
// translation
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<CustomMenu
|
||||
customButton={
|
||||
<span
|
||||
ref={ref}
|
||||
className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 rounded"
|
||||
onClick={() => onChange(!isMenuActive)}
|
||||
>
|
||||
<MoreHorizontal className="size-4" />
|
||||
</span>
|
||||
}
|
||||
menuButtonOnClick={() => onChange(!isMenuActive)}
|
||||
className={cn(
|
||||
"opacity-0 pointer-events-none flex-shrink-0 group-hover/project-item:opacity-100 group-hover/project-item:pointer-events-auto",
|
||||
{
|
||||
|
|
@ -36,6 +41,7 @@ export const FavoriteItemQuickAction: FC<Props> = (props) => {
|
|||
)}
|
||||
customButtonClassName="grid place-items-center"
|
||||
placement="bottom-start"
|
||||
ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
|
||||
>
|
||||
<CustomMenu.MenuItem onClick={() => handleRemoveFromFavorites(favorite)}>
|
||||
<span className="flex items-center justify-start gap-2">
|
||||
|
|
@ -45,4 +51,4 @@ export const FavoriteItemQuickAction: FC<Props> = (props) => {
|
|||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -34,13 +34,12 @@ import { getInstructionFromPayload, TargetData } from "./favorites.helpers";
|
|||
import { NewFavoriteFolder } from "./new-fav-folder";
|
||||
|
||||
export const SidebarFavoritesMenu = observer(() => {
|
||||
//state
|
||||
// states
|
||||
const [createNewFolder, setCreateNewFolder] = useState<boolean | string | null>(null);
|
||||
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
||||
// navigation
|
||||
const { workspaceSlug } = useParams();
|
||||
// store hooks
|
||||
const { t } = useTranslation();
|
||||
const { sidebarCollapsed } = useAppTheme();
|
||||
const {
|
||||
favoriteIds,
|
||||
|
|
@ -50,17 +49,17 @@ export const SidebarFavoritesMenu = observer(() => {
|
|||
reOrderFavorite,
|
||||
moveFavoriteToFolder,
|
||||
} = useFavorite();
|
||||
const { workspaceSlug } = useParams();
|
||||
|
||||
// translation
|
||||
const { t } = useTranslation();
|
||||
// platform hooks
|
||||
const { isMobile } = usePlatformOS();
|
||||
|
||||
// local storage
|
||||
const { setValue: toggleFavoriteMenu, storedValue } = useLocalStorage<boolean>(IS_FAVORITE_MENU_OPEN, false);
|
||||
// derived values
|
||||
const isFavoriteMenuOpen = !!storedValue;
|
||||
// refs
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const elementRef = useRef(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const elementRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const handleMoveToFolder = (sourceId: string, destinationId: string) => {
|
||||
moveFavoriteToFolder(workspaceSlug.toString(), sourceId, {
|
||||
|
|
@ -131,6 +130,7 @@ export const SidebarFavoritesMenu = observer(() => {
|
|||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleRemoveFromFavoritesFolder = (favoriteId: string) => {
|
||||
removeFromFavoriteFolder(workspaceSlug.toString(), favoriteId).catch(() => {
|
||||
setToast({
|
||||
|
|
@ -151,7 +151,7 @@ export const SidebarFavoritesMenu = observer(() => {
|
|||
});
|
||||
});
|
||||
},
|
||||
[workspaceSlug, reOrderFavorite]
|
||||
[workspaceSlug, reOrderFavorite, t]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -190,37 +190,68 @@ export const SidebarFavoritesMenu = observer(() => {
|
|||
<>
|
||||
<Disclosure as="div" defaultOpen ref={containerRef}>
|
||||
{!sidebarCollapsed && (
|
||||
<Disclosure.Button
|
||||
<div
|
||||
ref={elementRef}
|
||||
as="button"
|
||||
className={cn(
|
||||
"sticky top-0 bg-custom-sidebar-background-100 z-10 group/workspace-button w-full px-2 py-1.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90 rounded text-sm font-semibold",
|
||||
"group/favorites-button w-full flex items-center justify-between px-2 py-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90",
|
||||
{
|
||||
"bg-custom-sidebar-background-80 opacity-60": isDragging,
|
||||
"p-0 justify-center w-fit mx-auto bg-custom-sidebar-background-90 hover:bg-custom-sidebar-background-80":
|
||||
sidebarCollapsed,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<span onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)} className="flex-1 text-start">
|
||||
{t("favorites")}
|
||||
</span>
|
||||
<span className="flex flex-shrink-0 opacity-0 pointer-events-none group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto rounded p-0.5 ">
|
||||
<Disclosure.Button
|
||||
as="button"
|
||||
type="button"
|
||||
className={cn(
|
||||
"w-full flex items-center gap-1 whitespace-nowrap text-left text-sm font-semibold text-custom-sidebar-text-400",
|
||||
{
|
||||
"!text-center w-8 px-2 py-1.5 justify-center": sidebarCollapsed,
|
||||
"bg-custom-sidebar-background-80 opacity-60": isDragging,
|
||||
}
|
||||
)}
|
||||
onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)}
|
||||
aria-label={t(
|
||||
isFavoriteMenuOpen
|
||||
? "aria_labels.projects_sidebar.close_favorites_menu"
|
||||
: "aria_labels.projects_sidebar.open_favorites_menu"
|
||||
)}
|
||||
>
|
||||
<span className="text-sm font-semibold">{t("favorites")}</span>
|
||||
</Disclosure.Button>
|
||||
<div className="flex items-center opacity-0 pointer-events-none group-hover/favorites-button:opacity-100 group-hover/favorites-button:pointer-events-auto">
|
||||
<Tooltip tooltipHeading={t("create_folder")} tooltipContent="">
|
||||
<FolderPlus
|
||||
<button
|
||||
type="button"
|
||||
className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0 grid place-items-center"
|
||||
onClick={() => {
|
||||
setCreateNewFolder(true);
|
||||
if (!isFavoriteMenuOpen) toggleFavoriteMenu(!isFavoriteMenuOpen);
|
||||
}}
|
||||
className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform")}
|
||||
/>
|
||||
aria-label={t("aria_labels.projects_sidebar.create_favorites_folder")}
|
||||
>
|
||||
<FolderPlus className="size-3" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<ChevronRight
|
||||
<Disclosure.Button
|
||||
as="button"
|
||||
type="button"
|
||||
className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0 grid place-items-center"
|
||||
onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)}
|
||||
className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
|
||||
"rotate-90": isFavoriteMenuOpen,
|
||||
})}
|
||||
/>
|
||||
</span>
|
||||
</Disclosure.Button>
|
||||
aria-label={t(
|
||||
isFavoriteMenuOpen
|
||||
? "aria_labels.projects_sidebar.close_favorites_menu"
|
||||
: "aria_labels.projects_sidebar.open_favorites_menu"
|
||||
)}
|
||||
>
|
||||
<ChevronRight
|
||||
className={cn("flex-shrink-0 size-3 transition-all", {
|
||||
"rotate-90": isFavoriteMenuOpen,
|
||||
})}
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Transition
|
||||
show={isFavoriteMenuOpen}
|
||||
|
|
|
|||
|
|
@ -134,7 +134,14 @@ export const NewFavoriteFolder = observer((props: TProps) => {
|
|||
name="name"
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
render={({ field }) => <Input className="w-full" placeholder={t("new_folder")} {...field} />}
|
||||
render={({ field }) => (
|
||||
<Input
|
||||
className="w-full"
|
||||
placeholder={t("new_folder")}
|
||||
aria-label={t("aria_labels.projects_sidebar.enter_folder_name")}
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -175,8 +175,13 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
|
|||
isCollapsed ? "w-full" : ""
|
||||
}`}
|
||||
onClick={() => toggleSidebar()}
|
||||
aria-label={t(
|
||||
isCollapsed
|
||||
? "aria_labels.projects_sidebar.expand_sidebar"
|
||||
: "aria_labels.projects_sidebar.collapse_sidebar"
|
||||
)}
|
||||
>
|
||||
<MoveLeft className={`h-4 w-4 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
|
||||
<MoveLeft className={`size-4 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -184,13 +184,13 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
|
|||
const sourceId = source?.data?.id as string | undefined;
|
||||
const destinationId = self?.data?.id as string | undefined;
|
||||
|
||||
handleOnProjectDrop && handleOnProjectDrop(sourceId, destinationId, currentInstruction === "DRAG_BELOW");
|
||||
handleOnProjectDrop?.(sourceId, destinationId, currentInstruction === "DRAG_BELOW");
|
||||
|
||||
highlightIssueOnDrop(`sidebar-${sourceId}-${projectListType}`);
|
||||
},
|
||||
})
|
||||
);
|
||||
}, [projectRef?.current, dragHandleRef?.current, projectId, isLastChild, projectListType, handleOnProjectDrop]);
|
||||
}, [projectId, isLastChild, projectListType, handleOnProjectDrop]);
|
||||
|
||||
useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
|
||||
useOutsideClickDetector(projectRef, () => projectRef?.current?.classList?.remove(HIGHLIGHT_CLASS));
|
||||
|
|
@ -284,6 +284,11 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
|
|||
className={cn("flex-grow flex items-center gap-1.5 text-left select-none w-full", {
|
||||
"justify-center": isSidebarCollapsed,
|
||||
})}
|
||||
aria-label={
|
||||
isProjectListOpen
|
||||
? t("aria_labels.projects_sidebar.close_project_menu")
|
||||
: t("aria_labels.projects_sidebar.open_project_menu")
|
||||
}
|
||||
>
|
||||
<div className="size-4 grid place-items-center flex-shrink-0">
|
||||
<Logo logo={project.logo_props} size={16} />
|
||||
|
|
@ -310,6 +315,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
|
|||
)}
|
||||
customButtonClassName="grid place-items-center"
|
||||
placement="bottom-start"
|
||||
ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
|
||||
useCaptureForOutsideClick
|
||||
closeOnSelect
|
||||
>
|
||||
|
|
@ -384,6 +390,11 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
|
|||
}
|
||||
)}
|
||||
onClick={() => setIsProjectListOpen(!isProjectListOpen)}
|
||||
aria-label={t(
|
||||
isProjectListOpen
|
||||
? "aria_labels.projects_sidebar.close_project_menu"
|
||||
: "aria_labels.projects_sidebar.open_project_menu"
|
||||
)}
|
||||
>
|
||||
<ChevronRight
|
||||
className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
|
||||
|
|
|
|||
|
|
@ -167,12 +167,17 @@ export const SidebarProjectsList: FC = observer(() => {
|
|||
as="button"
|
||||
type="button"
|
||||
className={cn(
|
||||
"group w-full flex items-center gap-1 whitespace-nowrap text-left text-sm font-semibold text-custom-sidebar-text-400",
|
||||
"w-full flex items-center gap-1 whitespace-nowrap text-left text-sm font-semibold text-custom-sidebar-text-400",
|
||||
{
|
||||
"!text-center w-8 px-2 py-1.5 justify-center": isCollapsed,
|
||||
}
|
||||
)}
|
||||
onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
|
||||
aria-label={t(
|
||||
isAllProjectsListOpen
|
||||
? "aria_labels.projects_sidebar.close_projects_menu"
|
||||
: "aria_labels.projects_sidebar.open_projects_menu"
|
||||
)}
|
||||
>
|
||||
<Tooltip tooltipHeading={t("projects")} tooltipContent="" position="right" disabled={!isCollapsed}>
|
||||
<>
|
||||
|
|
@ -195,6 +200,7 @@ export const SidebarProjectsList: FC = observer(() => {
|
|||
setTrackElement(`APP_SIDEBAR_JOINED_BLOCK`);
|
||||
setIsProjectModalOpen(true);
|
||||
}}
|
||||
aria-label={t("aria_labels.projects_sidebar.create_new_project")}
|
||||
>
|
||||
<Plus className="size-3" />
|
||||
</button>
|
||||
|
|
@ -205,9 +211,14 @@ export const SidebarProjectsList: FC = observer(() => {
|
|||
type="button"
|
||||
className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
|
||||
onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
|
||||
aria-label={t(
|
||||
isAllProjectsListOpen
|
||||
? "aria_labels.projects_sidebar.close_projects_menu"
|
||||
: "aria_labels.projects_sidebar.open_projects_menu"
|
||||
)}
|
||||
>
|
||||
<ChevronRight
|
||||
className={cn("flex-shrink-0 size-4 transition-all", {
|
||||
className={cn("flex-shrink-0 size-3 transition-all", {
|
||||
"rotate-90": isAllProjectsListOpen,
|
||||
})}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,9 @@ export const SidebarQuickActions = observer(() => {
|
|||
|
||||
const handleMouseEnter = () => {
|
||||
// if enter before time out clear the timeout
|
||||
timeoutRef?.current && clearTimeout(timeoutRef.current);
|
||||
if (timeoutRef?.current) {
|
||||
clearTimeout(timeoutRef.current);
|
||||
}
|
||||
setIsDraftButtonOpen(true);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import {
|
|||
WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS,
|
||||
WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS,
|
||||
} from "@plane/constants";
|
||||
import { useTranslation } from "@plane/i18n";
|
||||
import { cn } from "@plane/utils";
|
||||
// components
|
||||
import { SidebarNavItem } from "@/components/sidebar";
|
||||
|
|
@ -20,9 +21,10 @@ export const SidebarMenuItems = observer(() => {
|
|||
// routers
|
||||
const { workspaceSlug } = useParams();
|
||||
// store hooks
|
||||
const { sidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
|
||||
const { sidebarCollapsed, extendedSidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
|
||||
const { getNavigationPreferences } = useWorkspace();
|
||||
|
||||
// translation
|
||||
const { t } = useTranslation();
|
||||
// derived values
|
||||
const currentWorkspaceNavigationPreferences = getNavigationPreferences(workspaceSlug.toString());
|
||||
|
||||
|
|
@ -39,31 +41,35 @@ export const SidebarMenuItems = observer(() => {
|
|||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={cn("flex flex-col gap-0.5", {
|
||||
"space-y-0": sidebarCollapsed,
|
||||
})}
|
||||
>
|
||||
{WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS.map((item, _index) => (
|
||||
<SidebarItem key={`static_${_index}`} item={item} />
|
||||
))}
|
||||
{sortedNavigationItems.map((item, _index) => (
|
||||
<SidebarItem key={`dynamic_${_index}`} item={item} />
|
||||
))}
|
||||
<SidebarNavItem className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}>
|
||||
<button
|
||||
onClick={() => toggleExtendedSidebar()}
|
||||
className={cn("flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350", {
|
||||
"justify-center": sidebarCollapsed,
|
||||
})}
|
||||
id="extended-sidebar-toggle"
|
||||
>
|
||||
<Ellipsis className="size-4" />
|
||||
{!sidebarCollapsed && <span>More</span>}
|
||||
</button>
|
||||
</SidebarNavItem>
|
||||
</div>
|
||||
</>
|
||||
<div
|
||||
className={cn("flex flex-col gap-0.5", {
|
||||
"space-y-0": sidebarCollapsed,
|
||||
})}
|
||||
>
|
||||
{WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS.map((item, _index) => (
|
||||
<SidebarItem key={`static_${_index}`} item={item} />
|
||||
))}
|
||||
{sortedNavigationItems.map((item, _index) => (
|
||||
<SidebarItem key={`dynamic_${_index}`} item={item} />
|
||||
))}
|
||||
<SidebarNavItem className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleExtendedSidebar()}
|
||||
className={cn("flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350", {
|
||||
"justify-center": sidebarCollapsed,
|
||||
})}
|
||||
id="extended-sidebar-toggle"
|
||||
aria-label={t(
|
||||
extendedSidebarCollapsed
|
||||
? "aria_labels.projects_sidebar.open_extended_sidebar"
|
||||
: "aria_labels.projects_sidebar.close_extended_sidebar"
|
||||
)}
|
||||
>
|
||||
<Ellipsis className="flex-shrink-0 size-4" />
|
||||
{!sidebarCollapsed && <span>More</span>}
|
||||
</button>
|
||||
</SidebarNavItem>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { action, observable, makeObservable } from "mobx";
|
||||
import { action, observable, makeObservable, runInAction } from "mobx";
|
||||
|
||||
export interface IThemeStore {
|
||||
// observables
|
||||
|
|
@ -26,7 +26,7 @@ export interface IThemeStore {
|
|||
export class ThemeStore implements IThemeStore {
|
||||
// observables
|
||||
sidebarCollapsed: boolean | undefined = undefined;
|
||||
extendedSidebarCollapsed: boolean | undefined = undefined;
|
||||
extendedSidebarCollapsed: boolean | undefined = true;
|
||||
extendedProjectSidebarCollapsed: boolean | undefined = undefined;
|
||||
profileSidebarCollapsed: boolean | undefined = undefined;
|
||||
workspaceAnalyticsSidebarCollapsed: boolean | undefined = undefined;
|
||||
|
|
@ -78,12 +78,11 @@ export class ThemeStore implements IThemeStore {
|
|||
* @param collapsed
|
||||
*/
|
||||
toggleExtendedSidebar = (collapsed?: boolean) => {
|
||||
if (collapsed === undefined) {
|
||||
this.extendedSidebarCollapsed = !this.extendedSidebarCollapsed;
|
||||
} else {
|
||||
this.extendedSidebarCollapsed = collapsed;
|
||||
}
|
||||
localStorage.setItem("extended_sidebar_collapsed", this.extendedSidebarCollapsed.toString());
|
||||
const updatedState = collapsed ?? !this.extendedSidebarCollapsed;
|
||||
runInAction(() => {
|
||||
this.extendedSidebarCollapsed = updatedState;
|
||||
});
|
||||
localStorage.setItem("extended_sidebar_collapsed", updatedState.toString());
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue