ysandler/textualize
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: details arrow only for docs with areas

Browse Source
This commit is contained in:
Joshua Shoemaker 2023-01-05 23:46:29 -06:00
parent f01cd74a88
commit 8369230b7c
2 changed files with 68 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
build/bin/textualize.app/Contents/MacOS/Textualize
View File

Binary file not shown.

114
frontend/components/workspace/Sidebar.tsx
View File

@ -1,7 +1,7 @@
'use client' 'use client'
import React, { useRef, useState } from 'react' import React, { useRef, useState } from 'react'
import { PlusIcon, XMarkIcon } from '@heroicons/react/20/solid' import { PlusIcon, XMarkIcon, DocumentPlusIcon } from '@heroicons/react/20/solid'
import { ipc } from '../../wailsjs/wailsjs/go/models' import { ipc } from '../../wailsjs/wailsjs/go/models'
import { useProject } from '../../context/Project/provider' import { useProject } from '../../context/Project/provider'
@ -115,7 +115,6 @@ function Sidebar() {
getDocumentIdFromAreaId(areaId) getDocumentIdFromAreaId(areaId)
setSelectedDocumentId(getDocumentIdFromAreaId(areaId) || '') setSelectedDocumentId(getDocumentIdFromAreaId(areaId) || '')
setSelectedAreaId(areaId) setSelectedAreaId(areaId)
console.log('single click')
} }
const onAreaDoubleclick = (areaId: string) => { const onAreaDoubleclick = (areaId: string) => {
@ -271,12 +270,12 @@ function Sidebar() {
role='button' role='button'
className={classNames( className={classNames(
'text-gray-300 hover:bg-gray-700 hover:text-white', 'text-gray-300 hover:bg-gray-700 hover:text-white',
' group w-full flex items-center pr-2 py-2 text-left font-medium', ' group w-full flex items-center pl-5 py-2 text-left font-medium',
'text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 p-2' 'text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500'
)} )}
onClick={() => onAddNewDocumentLineItemClickHandler(groupId)} onClick={() => onAddNewDocumentLineItemClickHandler(groupId)}
> >
<PlusIcon className="h-3 w-4" aria-hidden="true" /> <DocumentPlusIcon className="h-3.5 mr-1" aria-hidden="true" />
Add Document Add Document
</a> </a>
} }
@ -299,17 +298,15 @@ function Sidebar() {
<ul> <ul>
{group.documents.map((d, index) => ( {group.documents.map((d, index) => (
<li className='p-0 m-0' key={d.id}> <li className='p-0 m-0' key={d.id}>
<details> {!d.areas.length
<summary ? <div
onClick={() => onDocumentClickHandler(d.id)} onClick={() => onDocumentClickHandler(d.id)}
className={classNames( className={classNames(
d.id === selectedDocumentId d.id === selectedDocumentId
? 'bg-gray-900 text-white' ? 'bg-gray-900 text-white'
: 'text-gray-300 hover:bg-gray-700 hover:text-white', : 'text-gray-300 hover:bg-gray-700 hover:text-white',
'group items-center py-2 text-base font-medium rounded-b-md pl-6', 'group items-center py-2 text-base font-medium rounded-b-md pl-10',
index !== 0 index !== 0 ? 'rounded-t-md' : '',
? 'rounded-t-md'
: ''
)}> )}>
<a <a
role='button' role='button'
@ -322,41 +319,66 @@ function Sidebar() {
> >
{d.name} {d.name}
</a> </a>
</summary> </div>
<ul> : <details>
{d.areas.map((a, index) => ( <summary
<li key={a.id}> onClick={() => onDocumentClickHandler(d.id)}
{selectedAreaId === a.id && isEditAreaNameInputShowing className={classNames(
? <input d.id === selectedDocumentId
type="text" ? 'bg-gray-900 text-white'
name="areaName" : 'text-gray-300 hover:bg-gray-700 hover:text-white',
id="areaName" 'group items-center py-2 text-base font-medium rounded-b-md pl-6',
autoFocus index !== 0 ? 'rounded-t-md' : '',
className="h-8 text-white placeholder-gray-400 bg-gray-900 bg-opacity-5 block w-full rounded-none rounded-l-md border-late-700 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
placeholder={a.name || `Area ${index + 1}`} )}>
onBlur={onAreaInputBlur} <a
onKeyDown={(event) => { role='button'
onEnterHandler(event, className={classNames(
() => onConfirmAreaNameChangeHandler({ areaId: a.id, areaName: event.currentTarget.value })) d.id === selectedDocumentId
}} ? 'bg-gray-900 text-white'
ref={editAreaNameTextInput} : 'text-gray-300 hover:bg-gray-700 hover:text-white',
/> 'text-left font-medium text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 '
: <a )}
role='button' >
onClick={() => onAreaClick(a.id)} {d.name}
onDoubleClick={() => onAreaDoubleclick(a.id)} </a>
className={classNames('text-gray-300 hover:bg-gray-700 hover:text-white', </summary>
'group w-full flex items-center pr-2 py-2 text-left font-medium pl-8 text-xs', <ul>
'rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 py-2 select-none' {d.areas.map((a, index) => (
)} <li key={a.id}>
> {selectedAreaId === a.id && isEditAreaNameInputShowing
{a.name || `Area ${index + 1}`} ? <input
</a> type="text"
} name="areaName"
</li> id="areaName"
))} autoFocus
</ul> className="h-8 text-white placeholder-gray-400 bg-gray-900 bg-opacity-5 block w-full rounded-none rounded-l-md border-late-700 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
</details> placeholder={a.name || `Area ${index + 1}`}
onBlur={onAreaInputBlur}
onKeyDown={(event) => {
onEnterHandler(event,
() => onConfirmAreaNameChangeHandler({ areaId: a.id, areaName: event.currentTarget.value }))
}}
ref={editAreaNameTextInput}
/>
: <a
role='button'
onClick={() => onAreaClick(a.id)}
onDoubleClick={() => onAreaDoubleclick(a.id)}
className={classNames('text-gray-300 hover:bg-gray-700 hover:text-white',
'group w-full flex items-center pr-2 py-2 text-left font-medium pl-8 text-xs',
'rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 py-2 select-none',
selectedAreaId === a.id ? 'underline' : ''
)}
>
{a.name || `Area ${index + 1}`}
</a>
}
</li>
))}
</ul>
</details>
}
</li> </li>
))} ))}