Skip to content

Commit af3fafd

Browse files
jriefjrief
committed
highlight selected folder/file in structure view
1 parent cf60878 commit af3fafd

File tree

6 files changed

+42
-14
lines changed

6 files changed

+42
-14
lines changed

‎client/browser/FileSelectDialog.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ function Figure(props) {
4343
<figure className="figure">
4444
<FigBody {...props}>
4545
<FigureLabels labels={props.labels}>
46-
<img src={props.thumbnail_url} {...props.listeners} {...props.attributes} />
46+
<img src={props.thumbnail_url} {...props.listeners} {...props.attributes} aria-selected={props.isSelected} />
4747
</FigureLabels>
4848
</FigBody>
4949
<figcaption>
@@ -71,14 +71,16 @@ function ScrollSpy(props) {
7171

7272

7373
const FilesList = memo((props: any) => {
74-
const {structure, setDirty, selectFile, webAudio} = props;
74+
const {structure, setDirty, selectFile, selectedFileId, webAudio} = props;
7575

7676
return (
7777
<ul className="files-browser">{
7878
structure.files.length === 0 ?
7979
<li className="status">{gettext("Empty folder")}</li> : (
8080
<>{structure.files.map(file => (
81-
<li key={file.id} onClick={() => selectFile(file)}><Figure {...file} webAudio={webAudio} /></li>
81+
<li key={file.id} onClick={() => selectFile(file)}>
82+
<Figure {...file} webAudio={webAudio} isSelected={file.id === selectedFileId} />
83+
</li>
8284
))}
8385
{structure.offset !== null && <ScrollSpy key={structure.offset} setDirty={setDirty} />}
8486
</>
@@ -189,8 +191,10 @@ const FileSelectDialog = forwardRef((props: any, forwardedRef) => {
189191
}
190192

191193
async function initializeStructure() {
194+
const params = new URLSearchParams();
195+
mimeTypes?.forEach(type => params.append('mimetypes', type));
192196
setDirty(false);
193-
const response = await fetch(`${baseUrl}structure/${realm}`);
197+
const response = await fetch(`${baseUrl}structure/${realm}${params.size === 0 ? '' : `?${params.toString()}`}`);
194198
if (response.ok) {
195199
setStructure(await response.json());
196200
} else {
@@ -244,6 +248,8 @@ const FileSelectDialog = forwardRef((props: any, forwardedRef) => {
244248
}, []);
245249

246250
const selectFolder = useCallback(folder => {
251+
if (structure.last_folder === folder.id)
252+
return;
247253
setCurrentFolderId(folder.id);
248254
if (props.selectFolder) {
249255
props.selectFolder(folder);
@@ -299,19 +305,20 @@ const FileSelectDialog = forwardRef((props: any, forwardedRef) => {
299305
/>
300306
<div className="browser-body">
301307
<nav className="folder-structure">
302-
<ul role="navigation">
303-
{structure.root_folder && <FolderStructure
308+
<ul role="navigation">{
309+
structure.root_folder && <FolderStructure
304310
baseUrl={baseUrl}
305311
folder={structure.root_folder}
306312
lastFolderId={structure.last_folder}
307313
selectFolder={selectFolder}
314+
selectedFolderId={props.selectedFolderId}
308315
toggleRecursive={toggleRecursive}
309316
refreshStructure={() => setStructure({...structure})}
310317
isListed={structure.recursive ? false : null}
311318
setCurrentFolderId={setCurrentFolderId}
312319
setCurrentFolderElement={setCurrentFolderElement}
313-
/>}
314-
</ul>
320+
/>
321+
}</ul>
315322
</nav>
316323
<FileUploader
317324
folderId={structure.last_folder}
@@ -325,6 +332,7 @@ const FileSelectDialog = forwardRef((props: any, forwardedRef) => {
325332
structure={structure}
326333
setDirty={setDirty}
327334
selectFile={selectFile}
335+
selectedFileId={props.selectedFileId}
328336
webAudio={webAudio}
329337
/>
330338
}</FileUploader>

‎client/browser/FinderFileSelect.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import FileSelectDialog from './FileSelectDialog';
44

55
interface SelectedFile {
66
id: string;
7+
parent: string;
78
name: string;
89
file_name: string;
910
file_size: number;
@@ -22,6 +23,7 @@ function parseDataset(dataset: string|object) : SelectedFile|null {
2223
if (data) {
2324
const {
2425
id,
26+
parent,
2527
name,
2628
file_name,
2729
file_size,
@@ -36,6 +38,7 @@ function parseDataset(dataset: string|object) : SelectedFile|null {
3638
} = data;
3739
return {
3840
id,
41+
parent,
3942
name,
4043
file_name,
4144
file_size,
@@ -204,6 +207,8 @@ export default function FinderFileSelect(props) {
204207
mimeTypes={mimeTypes}
205208
csrfToken={csrfToken}
206209
selectFile={selectFile}
210+
selectedFileId={selectedFile?.id}
211+
selectedFolderId={selectedFile?.parent}
207212
dialogRef={dialogRef}
208213
/>
209214
</dialog>

‎client/browser/FinderFolderSelect.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@ export default function FinderFolderSelect(props) {
178178
baseUrl={baseUrl}
179179
csrfToken={csrfToken}
180180
selectFolder={selectFolder}
181+
selectedFolderId={selectedFolder?.id}
181182
dialogRef={dialogRef}
182183
/>
183184
</dialog>

‎client/browser/FolderStructure.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import RootIcon from '../icons/root.svg';
88

99

1010
function FolderEntry(props) {
11-
const {folder, toggleOpen, selectFolder, setCurrentFolderId, openRecursive, isCurrent, isListed, setCurrentFolderElement} = props;
11+
const {folder, toggleOpen, selectFolder, openRecursive, isCurrent, isSelected, isListed, setCurrentFolderElement} = props;
1212
const ref = useRef(null);
1313

1414
if (folder.is_root) {
@@ -26,15 +26,15 @@ function FolderEntry(props) {
2626
folder.is_open ? <ArrowDownIcon/> : <ArrowRightIcon/>
2727
}</i> : <i><EmptyIcon/></i>}
2828
<i onClick={() => openRecursive()} role="button">{isListed || isCurrent ? <FolderOpenIcon/> : <FolderIcon/>}</i>
29-
<span onClick={() => selectFolder(folder)} ref={isCurrent ? ref : null} aria-current={isCurrent} role="button">
29+
<span onClick={() => selectFolder(folder)} ref={isCurrent ? ref : null} aria-current={isCurrent} aria-selected={isSelected} role="button">
3030
{folder.name}
3131
</span>
3232
</>);
3333
}
3434

3535

3636
export default function FolderStructure(props) {
37-
const {baseUrl, folder, lastFolderId, selectFolder, toggleRecursive, refreshStructure, setCurrentFolderId, setCurrentFolderElement} = props;
37+
const {baseUrl, folder, lastFolderId, selectFolder, selectedFolderId, toggleRecursive, refreshStructure, setCurrentFolderId, setCurrentFolderElement} = props;
3838
const isListed = props.isListed === false ? lastFolderId === folder.id : props.isListed;
3939
const isCurrent = lastFolderId === folder.id;
4040

@@ -90,6 +90,7 @@ export default function FolderStructure(props) {
9090
openRecursive={openRecursive}
9191
isCurrent={isCurrent}
9292
isListed={isListed}
93+
isSelected={folder.id === selectedFolderId}
9394
setCurrentFolderId={setCurrentFolderId}
9495
setCurrentFolderElement={setCurrentFolderElement}
9596
/>
@@ -102,6 +103,7 @@ export default function FolderStructure(props) {
102103
folder={child}
103104
lastFolderId={lastFolderId}
104105
selectFolder={selectFolder}
106+
selectedFolderId={selectedFolderId}
105107
toggleRecursive={toggleRecursive}
106108
refreshStructure={refreshStructure}
107109
isListed={isListed}

‎client/scss/finder-browser.scss‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -149,11 +149,17 @@ dialog {
149149
span[role="button"] {
150150
cursor: pointer;
151151

152-
&[aria-current="true"] {
152+
&[aria-selected="true"] {
153153
font-weight: bold;
154154
}
155155

156-
&:hover {
156+
&[aria-current="true"] {
157+
text-decoration: underline;
158+
text-decoration-style: solid;
159+
text-decoration-color: #000000;
160+
}
161+
162+
&:not([aria-current="true"]):hover {
157163
text-decoration: underline;
158164
text-decoration-style: dashed;
159165
text-decoration-color: #808080;
@@ -208,7 +214,12 @@ dialog {
208214
border-radius: 0.25rem;
209215
}
210216

211-
img:not([src$=".svg"]), video {
217+
img[aria-selected="true"] {
218+
box-shadow: 0 0 0.5rem colors.$active-rectangle;
219+
border: 1px solid colors.$active-rectangle;
220+
}
221+
222+
img[aria-selected="false"]:not([src$=".svg"]), video {
212223
box-shadow: 0 0 0.5rem #808080;
213224
}
214225

‎finder/models/file.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,7 @@ def mime_types_query(cls):
165165
def as_dict(self, realm):
166166
return {
167167
'id': self.id,
168+
'parent': self.folder.id,
168169
'name': self.name,
169170
'file_name': self.file_name,
170171
'file_size': self.file_size,

0 commit comments

Comments
 (0)