luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Updated the text and changed position for sidebar Tour (#3665)

Browse source
This commit is contained in:
Rajat Dabade 2022-08-12 21:17:52 +05:30 committed by GitHub
parent d029a390fa
commit c33840004d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 40 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
webapp/i18n/en.json
View file

@ -235,6 +235,15 @@
"SidebarCategories.CategoryMenu.DeleteModal.Body": "Boards in <b>{categoryName}</b> will move back to the Boards categories. You're not removed from any boards.",
"SidebarCategories.CategoryMenu.DeleteModal.Title": "Delete this category?",
"SidebarCategories.CategoryMenu.Update": "Rename Category",
"SidebarTour.ManageBoards.Body": "Move boards to another category or hide the board from the sidebar.",
"SidebarTour.ManageBoards.Title": "Manage boards",
"SidebarTour.ManageCategories.Body": "Create and manage custom categories. Categories are user-specific, so moving a board to your category won’t impact other members using the same board.",
"SidebarTour.ManageCategories.Title": "Manage categories",
"SidebarTour.SidebarCategories.Body": "All your boards are now organized under your new sidebar. No more switching between workspaces. One-time custom categories based on your prior workspaces may have automatically been created for you as part of your v7.2 upgrade. These can be removed or edited to your preference. ",
"SidebarTour.SidebarCategories.Link": "Learn more",
"SidebarTour.SidebarCategories.Title": "Sidebar categories",
"SidebarTour.SearchForBoards.Body": "Open the board switcher (Cmd/Ctrl + K) to quickly search and add boards to your sidebar.",
"SidebarTour.SearchForBoards.Title": "Search for boards",
"TableComponent.add-icon": "Add icon",
"TableComponent.name": "Name",
"TableComponent.plus-new": "+ New",

16
webapp/src/components/boardsSwitcher/boardsSwitcher.tsx
View file

@ -23,6 +23,7 @@ import {Constants} from '../../constants'
import {TOUR_SIDEBAR, SidebarTourSteps} from '../../components/onboardingTour'
import IconButton from '../../widgets/buttons/iconButton'
import SearchForBoardsTourStep from '../../components/onboardingTour/searchForBoards/searchForBoards'
type Props = {
onBoardTemplateSelectorOpen?: () => void,
@ -42,17 +43,6 @@ const BoardsSwitcher = (props: Props): JSX.Element => {
onboardingTourCategory === TOUR_SIDEBAR &&
onboardingTourStep === SidebarTourSteps.SEARCH_FOR_BOARDS.toString()
useEffect(() => {
if(shouldViewSearchForBoardsTour) {
setShowSwitcher(true)
}
return () => {
setShowSwitcher(false)
}
}, [shouldViewSearchForBoardsTour])
// We need this keyboard handling (copied from Mattermost webapp) instead of
// using react-hotkeys-hook as react-hotkeys-hook is unable to handle keyboard shortcuts that
// the browser uses when the user is focused in an input field.
@ -101,7 +91,7 @@ const BoardsSwitcher = (props: Props): JSX.Element => {
</span>
</div>
</div>
{shouldViewSearchForBoardsTour && <div><SearchForBoardsTourStep/></div>}
{
Utils.isFocalboardPlugin() &&
<IconButton
@ -115,7 +105,7 @@ const BoardsSwitcher = (props: Props): JSX.Element => {
{
showSwitcher &&
<BoardSwitcherDialog onClose={() => setShowSwitcher(false)} shouldViewSearchForBoardsTour={shouldViewSearchForBoardsTour}/>
<BoardSwitcherDialog onClose={() => setShowSwitcher(false)} />
}
</div>
)

2
webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.tsx
View file

@ -26,7 +26,6 @@ import {
type Props = {
onClose: () => void
shouldViewSearchForBoardsTour?: boolean
}
const BoardSwitcherDialog = (props: Props): JSX.Element => {
@ -140,7 +139,6 @@ const BoardSwitcherDialog = (props: Props): JSX.Element => {
searchHandler={searchHandler}
selected={selected}
setSelected={(n: number) => setSelected(n)}
shouldViewSearchForBoardsTour={props.shouldViewSearchForBoardsTour}
/>
)
}

6
webapp/src/components/onboardingTour/manageBoards/manageBoards.tsx
View file

@ -18,14 +18,14 @@ const ManageBoardsTourStep = (): JSX.Element | null => {
const title = (
<FormattedMessage
id='SidebarTour.ManageBoards.Title'
defaultMessage='Manage Boards'
defaultMessage='Manage boards'
/>
)
const screen = (
<FormattedMessage
id='SidebarTour.ManageBoard.title'
defaultMessage='Move boards to another category or hide the board from the sidebar'
id='SidebarTour.ManageBoards.Body'
defaultMessage='Move boards to another category or hide the board from the sidebar.'
/>
)

2
webapp/src/components/onboardingTour/manageCategories/manageCategories.tsx
View file

@ -20,7 +20,7 @@ const ManageCategoriesTourStep = (): JSX.Element | null => {
const title = (
<FormattedMessage
id="SidebarTour.ManageCategories.Title"
defaultMessage='Manage Categories'
defaultMessage='Manage categories'
/>
)

3
webapp/src/components/onboardingTour/searchForBoards/searchForBoards.scss
View file

@ -1,7 +1,6 @@
.SearchForBoards {
&.tutorial-tour-tip__pulsating-dot-ctr {
margin-left: 14px;
margin-top: 5px;
margin-top: 10px;
}
.tutorial-tour-tip__overlay {

10
webapp/src/components/onboardingTour/searchForBoards/searchForBoards.tsx
View file

@ -3,7 +3,7 @@
import React from 'react'
import {FormattedMessage} from 'react-intl'
import {top} from '@popperjs/core'
import {right} from '@popperjs/core'
import { SidebarTourSteps, TOUR_SIDEBAR } from '..'
@ -16,18 +16,18 @@ const SearchForBoardsTourStep = (): JSX.Element | null => {
const title = (
<FormattedMessage
id='SidebarTour.SearchForBoards.Title'
defaultMessage='Search For Boards'
defaultMessage='Search for boards'
/>
)
const screen = (
<FormattedMessage
id='SidebarTour.SearchForBoards.title'
id='SidebarTour.SearchForBoards.Body'
defaultMessage='Open the board switcher (Cmd/Ctrl + K) to quickly search and add boards to your sidebar.'
/>
)
const punchout = useMeasurePunchouts(['BoardsSwitcherWrapper'], [])
const punchout = useMeasurePunchouts(['.BoardsSwitcher'], [])
return (
<TourTipRenderer
@ -40,7 +40,7 @@ const SearchForBoardsTourStep = (): JSX.Element | null => {
punchout={punchout}
classname='SearchForBoards'
telemetryTag='tourPoint4d'
placement={top}
placement={right}
hideBackdrop={false}
showForce={true}
/>

22
webapp/src/components/onboardingTour/sidebarCategories/sidebarCategories.tsx
View file

@ -27,14 +27,26 @@ const SidebarCategoriesTourStep = (): JSX.Element | null => {
const title = (
<FormattedMessage
id='SidebarTour.SidebarCategories.Title'
defaultMessage='Sidebar Categories'
defaultMessage='Sidebar categories'
/>
)
const screen = (
<FormattedMessage
id="SidebarTour.SidebarCategories.Body"
defaultMessage='All your boards are now accessible in the new sidebar and organized under categories. No more switching between workspaces to find your boards. One-time custom categories based on your prior workspaces may have automatically been created for you as part of your v7.2 upgrade, but can be removed or edited to your preference.'
/>
<div>
<FormattedMessage
id="SidebarTour.SidebarCategories.Body"
defaultMessage='All your boards are now organized under your new sidebar. No more switching between workspaces. One-time custom categories based on your prior workspaces may have automatically been created for you as part of your v7.2 upgrade. These can be removed or edited to your preference. '
/>
<a
href="https://docs.mattermost.com/welcome/whats-new-in-v72.html"
target='_blank'
rel='noopener noreferrer'
>
<FormattedMessage
id="SidebarTour.SidebarCategories.Link"
defaultMessage="Learn more"
/>
</a>
</div>
)
const punchout = useMeasurePunchouts(['.SidebarCategory'], [])

3
webapp/src/components/searchDialog/searchDialog.tsx
View file

@ -12,7 +12,6 @@ import {Utils} from '../../utils'
import Search from '../../widgets/icons/search'
import { Constants } from '../../constants'
import SearchForBoardsTourStep from '../onboardingTour/searchForBoards/searchForBoards'
type Props = {
onClose: () => void
@ -22,7 +21,6 @@ type Props = {
initialData?: Array<ReactNode>
selected: number
setSelected: (n: number) => void
shouldViewSearchForBoardsTour?: boolean
}
export const EmptySearch = (): JSX.Element => (
@ -146,7 +144,6 @@ const SearchDialog = (props: Props): JSX.Element => {
{!emptyResult && !searchQuery && <EmptySearch/>}
</div>
</div>
{props.shouldViewSearchForBoardsTour && <SearchForBoardsTourStep />}
</Dialog>
)
}