Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Get Resources web-view UI to Phase 1 UX design #1399

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
Open

Update Get Resources web-view UI to Phase 1 UX design #1399

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
a847480
Use multi-select. Add example
rolfheij-sil Dec 17, 2024
c083a11
Add resource examples
rolfheij-sil Dec 17, 2024
7a64c8d
Add filter component
rolfheij-sil Dec 17, 2024
f347655
Align table header with UX design
rolfheij-sil Dec 17, 2024
905570f
Remove get resources layout example
rolfheij-sil Dec 17, 2024
ebc4b12
Add table footer and add sorting for more columns
rolfheij-sil Dec 17, 2024
09b8ba3
Update props in home web-view
rolfheij-sil Dec 17, 2024
b233fc2
Add entries count. Fix 'Any' behavior
rolfheij-sil Dec 17, 2024
1629519
Processed review comments
rolfheij-sil Dec 19, 2024
f9bd93a
Merge branch 'main' into get-resources-v1-final
rolfheij-sil Dec 19, 2024
8a49c14
Search for label instead of value in Multi Select
rolfheij-sil Dec 20, 2024
e654526
Merge branch 'main' into get-resources-v1-final
rolfheij-sil Dec 20, 2024
413b1d8
Move localized string from extensions to platform base
rolfheij-sil Dec 20, 2024
0743cf4
Fixed a bug where labels were set to selected instead of values
rolfheij-sil Dec 20, 2024
a07d7f9
Build PBR
rolfheij-sil Dec 20, 2024
be7e525
Add missing dependency
rolfheij-sil Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion extensions/src/platform-get-resources/contributions/localizedStrings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,25 @@
"localizedStrings": {
"en": {
"%resources_action%": "Action",
"%resources_any%": "Any",
"%resources_dialog_subtitle%": "Add resources to Home",
"%resources_dialog_title%": "Get Resources",
"%resources_filterBy%": "Filter by",
"%resources_filterInput%": "Search by name, language, type",
"%resources_fullName%": "Full Name",
"%resources_get%": "Get",
"%resources_installed%": "Installed",
"%resources_language%": "Language",
"%resources_languageFilter%": "Filter by language",
"%resources_languages%": "Languages",
"%resources_loadingResources%": "Loading resources...",
"%resources_noResults%": "No results found",
"%resources_open%": "Open",
"%resources_remove%": "Remove",
"%resources_results%": "results",
"%resources_showing%": "Showing",
"%resources_size%": "Size",
"%resources_type%": "Type",
"%resources_types%": "Types",
"%resources_type_DBL%": "DBL Resource",
"%resources_type_ER%": "Enhanced Resource",
"%resources_type_SLR%": "Source Language Text",
Expand Down
17 changes: 8 additions & 9 deletions extensions/src/platform-get-resources/src/get-resources.web-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { WebViewProps } from '@papi/core';
import papi from '@papi/frontend';
import { useData, useDataProvider, useLocalizedStrings } from '@papi/frontend/react';
import type { ResourceType } from 'platform-bible-utils';
import { FilterableResourceList, FILTERABLE_RESOURCE_LIST_STRING_KEYS } from 'platform-bible-react';

globalThis.webViewComponent = function GetResourcesDialog({ useWebViewState }: WebViewProps) {
Expand All @@ -13,24 +12,24 @@ globalThis.webViewComponent = function GetResourcesDialog({ useWebViewState }: W
'platformGetResources.dblResourcesProvider',
).DblResources(undefined, []);

const [typeFilter, setTypeFilter] = useWebViewState<ResourceType[]>('typeFilter', [
const [selectedTypes, setSelectedTypes] = useWebViewState<string[]>('typeFilter', [
'DBLResource',
]);

const [languageFilter, setLanguageFilter] = useWebViewState<string[]>('languageFilter', []);
const [selectedLanguages, setSelectedLanguages] = useWebViewState<string[]>('languageFilter', []);

const openResource = (projectId: string) =>
papi.commands.sendCommand('platformScriptureEditor.openResourceViewer', projectId);

return (
<FilterableResourceList
localizedStrings={localizedStrings}
dblResources={dblResources}
isLoadingDblResources={isLoadingDblResources}
typeFilter={typeFilter}
setTypeFilter={setTypeFilter}
languageFilter={languageFilter}
setLanguageFilter={setLanguageFilter}
resources={dblResources}
isLoadingResources={isLoadingDblResources}
selectedTypes={selectedTypes}
setSelectedTypes={setSelectedTypes}
selectedLanguages={selectedLanguages}
setSelectedLanguages={setSelectedLanguages}
openResource={openResource}
installResource={dblResourcesProvider?.installDblResource}
uninstallResource={dblResourcesProvider?.uninstallDblResource}
Expand Down
7 changes: 6 additions & 1 deletion extensions/src/platform-home/contributions/localizedStrings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,25 @@
"localizedStrings": {
"en": {
"%resources_action%": "Action",
"%resources_any%": "Any",
"%resources_dialog_subtitle%": "",
"%resources_dialog_title%": "Home",
"%resources_filterBy%": "Filter by",
"%resources_filterInput%": "Search by name, language, type",
"%resources_fullName%": "Full Name",
"%resources_get%": "Get",
"%resources_installed%": "Installed",
"%resources_language%": "Language",
"%resources_languageFilter%": "Filter by language",
"%resources_languages%": "Languages",
"%resources_loadingResources%": "Loading Projects and Resource",
"%resources_noResults%": "No results found",
"%resources_open%": "Open",
"%resources_remove%": "Remove",
"%resources_results%": "results",
"%resources_showing%": "Showing",
"%resources_size%": "Size",
"%resources_type%": "Type",
"%resources_types%": "Types",
"%resources_type_DBL%": "DBL Resource",
"%resources_type_ER%": "Enhanced Resource",
"%resources_type_SLR%": "Source Language Text",
Expand Down
17 changes: 8 additions & 9 deletions extensions/src/platform-home/src/home.web-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { WebViewProps } from '@papi/core';
import papi from '@papi/frontend';
import { useData, useDataProvider, useLocalizedStrings } from '@papi/frontend/react';
import type { ResourceType } from 'platform-bible-utils';
import { FilterableResourceList, FILTERABLE_RESOURCE_LIST_STRING_KEYS } from 'platform-bible-react';

globalThis.webViewComponent = function GetResourcesDialog({ useWebViewState }: WebViewProps) {
Expand All @@ -13,24 +12,24 @@ globalThis.webViewComponent = function GetResourcesDialog({ useWebViewState }: W
'platformGetResources.dblResourcesProvider',
).DblResources(undefined, []);

const [typeFilter, setTypeFilter] = useWebViewState<ResourceType[]>('typeFilter', [
const [selectedTypes, setSelectedTypes] = useWebViewState<string[]>('typeFilter', [
'DBLResource',
]);

const [languageFilter, setLanguageFilter] = useWebViewState<string[]>('languageFilter', []);
const [selectedLanguages, setSelectedLanguages] = useWebViewState<string[]>('languageFilter', []);

const openResource = (projectId: string) =>
papi.commands.sendCommand('platformScriptureEditor.openResourceViewer', projectId);

return (
<FilterableResourceList
localizedStrings={localizedStrings}
dblResources={dblResources}
isLoadingDblResources={isLoadingDblResources}
typeFilter={typeFilter}
setTypeFilter={setTypeFilter}
languageFilter={languageFilter}
setLanguageFilter={setLanguageFilter}
resources={dblResources}
isLoadingResources={isLoadingDblResources}
selectedTypes={selectedTypes}
setSelectedTypes={setSelectedTypes}
selectedLanguages={selectedLanguages}
setSelectedLanguages={setSelectedLanguages}
openResource={openResource}
installResource={dblResourcesProvider?.installDblResource}
uninstallResource={dblResourcesProvider?.uninstallDblResource}
Expand Down
116 changes: 37 additions & 79 deletions lib/platform-bible-react/dist/index.cjs
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/platform-bible-react/dist/index.cjs.map
View file
Open in desktop

Large diffs are not rendered by default.

22 changes: 14 additions & 8 deletions lib/platform-bible-react/dist/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -439,8 +439,9 @@ export interface MultiSelectComboBoxProps {
customSelectedText?: string;
sortSelected?: boolean;
icon?: React$1.ReactNode;
className?: string;
}
export declare function MultiSelectComboBox({ entries, getEntriesCount, selected, onChange, placeholder, commandEmptyMessage, customSelectedText, sortSelected, icon, }: MultiSelectComboBoxProps): import("react/jsx-runtime").JSX.Element;
export declare function MultiSelectComboBox({ entries, getEntriesCount, selected, onChange, placeholder, commandEmptyMessage, customSelectedText, sortSelected, icon, className, }: MultiSelectComboBoxProps): import("react/jsx-runtime").JSX.Element;
export type TabKeyValueContent = {
key: string;
value: string;
Expand Down Expand Up @@ -1420,20 +1421,25 @@ export interface FooterProps {
* @returns The rendered Footer component
*/
export function Footer({ id, publisherDisplayName, fileSize, locales, versionHistory, }: FooterProps): import("react/jsx-runtime").JSX.Element;
export interface FilterProps extends MultiSelectComboBoxProps {
badgesPlaceholder: string;
}
export declare function Filter({ entries, getEntriesCount, selected, onChange, placeholder, commandEmptyMessage, customSelectedText, sortSelected, icon, className, badgesPlaceholder, }: FilterProps): import("react/jsx-runtime").JSX.Element;
export declare const FILTERABLE_RESOURCE_LIST_STRING_KEYS: LocalizeKey[];
export type FilterableResourceListProps = {
localizedStrings: LanguageStrings;
dblResources: DblResourceData[];
isLoadingDblResources: boolean;
typeFilter: ResourceType[];
setTypeFilter: (stateValue: ResourceType[]) => void;
languageFilter: string[];
setLanguageFilter: (stateValue: string[]) => void;
resources: DblResourceData[];
isLoadingResources: boolean;
selectedTypes: string[];
setSelectedTypes: (stateValue: string[]) => void;
selectedLanguages: string[];
setSelectedLanguages: (stateValue: string[]) => void;
openResource: (projectId: string) => void;
installResource: ((uid: string) => Promise<void>) | undefined;
uninstallResource: ((uid: string) => Promise<void>) | undefined;
className?: string;
};
export declare function FilterableResourceList({ localizedStrings, dblResources, isLoadingDblResources, typeFilter, setTypeFilter, languageFilter, setLanguageFilter, openResource, installResource, uninstallResource, }: FilterableResourceListProps): import("react/jsx-runtime").JSX.Element;
export declare function FilterableResourceList({ localizedStrings, resources, isLoadingResources, selectedTypes, setSelectedTypes, selectedLanguages, setSelectedLanguages, openResource, installResource, uninstallResource, className, }: FilterableResourceListProps): import("react/jsx-runtime").JSX.Element;
declare const UI_LANGUAGE_SELECTOR_STRING_KEYS: readonly [
"%settings_uiLanguageSelector_selectFallbackLanguages%"
];
Expand Down
Loading
Loading