diff --git a/src/activities/Activities.tsx b/src/activities/Activities.tsx index 55860f86..a9ca71e9 100644 --- a/src/activities/Activities.tsx +++ b/src/activities/Activities.tsx @@ -75,6 +75,32 @@ const Activities: React.VoidFunctionComponent = () => { firstTab.setAttribute('tabindex', '0'); }, [tabsRef, selectedActivity]); + // HACK: hoist html title attribute from icon to tab + + useEffect(() => { + // @ts-expect-error: using private property + const tablist: HTMLDivElement = tabsRef.current?.tablistElement; + + // istanbul-ignore-if: should not happen + if (!tablist) { + return; + } + + for (const element of tablist.getElementsByClassName( + 'pb-activities-tablist-tab', + )) { + const title = element.firstElementChild?.getAttribute('title'); + + // istanbul-ignore-if: should not happen + if (!title) { + continue; + } + + element.setAttribute('title', title); + element.firstElementChild?.removeAttribute('title'); + } + }, [tabsRef]); + return ( .#{bp.$ns}-tab-list &-tablist-tab { +// override bluetprintjs styles +.#{bp.$ns}-tabs.#{bp.$ns}-vertical > { + & .#{bp.$ns}-tab-list .pb-activities-tablist-tab { margin: bp.$pt-grid-size * 0.6; padding: unset; width: unset; line-height: unset; } + & .pb-activities-tabview { + padding-left: bp.$pt-grid-size; + } +} + +.pb-activities { + // TODO: submit upstream patch to allow setting tablist class + &-tablist, + & .#{bp.$ns}-tab-list { + @include pb.background-contrast(6%); + } + &-tabview { width: bp.$pt-grid-size * 25; padding: bp.$pt-grid-size; diff --git a/src/explorer/Explorer.tsx b/src/explorer/Explorer.tsx index 6f77ce35..1687bddb 100644 --- a/src/explorer/Explorer.tsx +++ b/src/explorer/Explorer.tsx @@ -145,11 +145,15 @@ const Header: React.VoidFunctionComponent = ({ i18n }) => { const files = useSelector((s) => s.explorer.files); return ( -
- +
+ dispatch(explorerArchiveAllFiles())} /> @@ -158,12 +162,12 @@ const Header: React.VoidFunctionComponent = ({ i18n }) => { // what we want here since import is analogous to upload // even though this is the "import" action icon="export" - tooltip={i18n.translate(I18nId.HeaderImportTooltip)} + tooltip={i18n.translate(I18nId.HeaderToolbarImport)} onClick={() => dispatch(explorerImportFiles())} /> dispatch(explorerCreateNewFile())} /> @@ -377,7 +381,7 @@ const Explorer: React.VFC = () => { const [i18n] = useI18n(); return ( -
+
diff --git a/src/explorer/explorer.scss b/src/explorer/explorer.scss index 9e5189af..2fa286da 100644 --- a/src/explorer/explorer.scss +++ b/src/explorer/explorer.scss @@ -7,3 +7,10 @@ .#{bp.$ns}-tree-node-content:not(:hover) .pb-explorer-file-action-button-group { display: none; } + +.pb-explorer { + &-header { + display: flex; + justify-content: flex-end; + } +} diff --git a/src/explorer/i18n.ts b/src/explorer/i18n.ts index 115560f0..4836d95a 100644 --- a/src/explorer/i18n.ts +++ b/src/explorer/i18n.ts @@ -4,9 +4,10 @@ // Explorer translation keys. export enum I18nId { - HeaderExportAllTooltip = 'header.exportAllTooltip', - HeaderImportTooltip = 'header.importTooltip', - HeaderAddNewTooltip = 'header.addNewTooltip', + HeaderToolbarTitle = 'header.toolbar.title', + HeaderToolbarExportAll = 'header.toolbar.exportAll', + HeaderToolbarImport = 'header.toolbar.import', + HeaderToolbarAddNew = 'header.toolbar.addNew', TreeLabel = 'tree.label', TreeLiveDescriptorIntroAccessibilityGuide = 'tree.liveDescriptor.intro.accessibilityGuide', TreeLiveDescriptorIntroNavigation = 'tree.liveDescriptor.intro.navigation', diff --git a/src/explorer/translations/en.json b/src/explorer/translations/en.json index 384e09af..b83a7c35 100644 --- a/src/explorer/translations/en.json +++ b/src/explorer/translations/en.json @@ -1,8 +1,11 @@ { "header": { - "exportAllTooltip": "Backup all files", - "importTooltip": "Import a file", - "addNewTooltip": "Create a new file" + "toolbar": { + "title": "File Actions", + "exportAll": "Backup all files", + "import": "Import a file", + "addNew": "Create a new file" + } }, "tree": { "label": "File Explorer",