steffo/todocolors
steffo/todocolors
1
Fork 0
mirror of https://github.com/Steffo99/todocolors.git synced 2024-11-22 16:24:19 +00:00
Code Activity

Display title placeholder in untitled boards

Browse source
This commit is contained in:
Steffo 2023-08-16 15:43:44 +02:00
parent 36f1e2b649
commit 6e985405d8
Signed by: steffo
GPG key ID: 2A24051445686895
4 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
todoblue/src/app/(i18n)/(locales)/(board)/en-US.json
View file

@ -27,5 +27,6 @@
"columnHeaderTaskStatusComplete": "Complete", "columnHeaderTaskStatusComplete": "Complete",
"taskButtonDelete": "Delete this task", "taskButtonDelete": "Delete this task",
"taskButtonRecreate": "Delete and go back to editing this task", "taskButtonRecreate": "Delete and go back to editing this task",
"editorPlaceholder": "What do you want to do?" "editorPlaceholder": "What do you want to do?",
"noTitlePlaceholder": "Untitled board"
} }

3
todoblue/src/app/(i18n)/(locales)/(board)/it-IT.json
View file

@ -27,5 +27,6 @@
"columnHeaderTaskStatusComplete": "Completata", "columnHeaderTaskStatusComplete": "Completata",
"taskButtonDelete": "Elimina questa attività", "taskButtonDelete": "Elimina questa attività",
"taskButtonRecreate": "Elimina questa attività e torna a modificarla", "taskButtonRecreate": "Elimina questa attività e torna a modificarla",
"editorPlaceholder": "Cosa vuoi fare?" "editorPlaceholder": "Cosa vuoi fare?",
"noTitlePlaceholder": "Board senza titolo"
} }

6
todoblue/src/app/[lang]/board/[board]/(page)/(header)/BoardHeader.tsx
View file

@ -27,7 +27,11 @@ export function BoardHeader({lang, className, metadataHook, layoutHook: {columni
<ToggleStarredButton lang={lang}/> <ToggleStarredButton lang={lang}/>
<ToggleEditingButton lang={lang} metadataHook={metadataHook}/> <ToggleEditingButton lang={lang} metadataHook={metadataHook}/>
</div> </div>
<BoardHeaderTitle className={style.titleArea} editorHook={metadataHook}/> <BoardHeaderTitle
lang={lang}
className={style.titleArea}
editorHook={metadataHook}
/>
<div className={cn(style.buttonsArea, style.rightButtonsArea)}> <div className={cn(style.buttonsArea, style.rightButtonsArea)}>
<CycleColumningButton lang={lang} value={columningHook.value} next={columningHook.next}/> <CycleColumningButton lang={lang} value={columningHook.value} next={columningHook.next}/>
<CycleGroupingButton lang={lang} next={groupingHook.next}/> <CycleGroupingButton lang={lang} next={groupingHook.next}/>

15
todoblue/src/app/[lang]/board/[board]/(page)/(header)/BoardHeaderTitle.tsx
View file

@ -1,3 +1,4 @@
import {useClientTranslation} from "@/app/(i18n)/client"
import {usePageTitleSetter} from "@/app/(utils)/usePageTitleSetter" import {usePageTitleSetter} from "@/app/(utils)/usePageTitleSetter"
import {useBoardConsumer} from "@/app/[lang]/board/[board]/(layout)/(contextBoard)" import {useBoardConsumer} from "@/app/[lang]/board/[board]/(layout)/(contextBoard)"
import style from "@/app/[lang]/board/[board]/(page)/(header)/BoardHeaderTitle.module.css" import style from "@/app/[lang]/board/[board]/(page)/(header)/BoardHeaderTitle.module.css"
@ -6,7 +7,8 @@ import cn from "classnames"
import {useMemo} from "react" import {useMemo} from "react"
export function BoardHeaderTitle({className, editorHook}: {className?: string, editorHook: ReturnType<typeof useBoardMetadataEditor>}) { export function BoardHeaderTitle({lang, className, editorHook}: {lang: string, className?: string, editorHook: ReturnType<typeof useBoardMetadataEditor>}) {
const {t} = useClientTranslation(lang, "board")
const {isReady, boardState: {title: titleFromState}} = useBoardConsumer() const {isReady, boardState: {title: titleFromState}} = useBoardConsumer()
const pageTitle = useMemo(() => { const pageTitle = useMemo(() => {
@ -33,7 +35,7 @@ export function BoardHeaderTitle({className, editorHook}: {className?: string, e
</form> </form>
) )
} }
else { else if(titleFromState.length > 0) {
contents = ( contents = (
<div <div
className={style.boardHeaderTitleDisplay} className={style.boardHeaderTitleDisplay}
@ -42,6 +44,15 @@ export function BoardHeaderTitle({className, editorHook}: {className?: string, e
</div> </div>
) )
} }
else {
contents = (
<div
className={cn(style.boardHeaderTitleDisplay, "fade")}
>
{t("noTitlePlaceholder")}
</div>
)
}
return ( return (
<h1 className={cn(style.boardHeaderTitle, className)}> <h1 className={cn(style.boardHeaderTitle, className)}>