Skip to content

Commit f3b5627

Browse files
kyoshinokyoshino
committed
Add label to content/asset library folders
1 parent 91c4180 commit f3b5627

5 files changed

Lines changed: 134 additions & 127 deletions

File tree

‎src/lib/components/assets/browser/select-assets-dialog.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,7 @@
333333
selectedResource = undefined;
334334
}}
335335
>
336-
<OptionGroup label={$_('assets_dialog.location.repository')}>
336+
<OptionGroup label={$_('asset_location.repository')}>
337337
{#each Object.entries(allDefaultLibraryFolders) as [id, { enabled }] (id)}
338338
{#if enabled}
339339
{@const name = `default-${id}`}
@@ -346,7 +346,7 @@
346346
{/each}
347347
</OptionGroup>
348348
{#if canEnterURL || !!Object.keys(allCloudStorageServices).length}
349-
<OptionGroup label={$_('assets_dialog.location.external_locations')}>
349+
<OptionGroup label={$_('asset_location.external')}>
350350
{#if canEnterURL}
351351
<Option name="enter-url" label={$_('assets_dialog.enter_url')} />
352352
{/if}
@@ -357,7 +357,7 @@
357357
</OptionGroup>
358358
{/if}
359359
{#if enabledStockAssetProviderEntries.length}
360-
<OptionGroup label={$_('assets_dialog.location.stock_photos')}>
360+
<OptionGroup label={$_('asset_location.stock_photos')}>
361361
{#each enabledStockAssetProviderEntries as [serviceId, { serviceLabel }] (serviceId)}
362362
<Option name={serviceId} label={serviceLabel} />
363363
{/each}

‎src/lib/components/assets/list/primary-sidebar.svelte‎

Lines changed: 83 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import { Icon, Listbox, Option } from '@sveltia/ui';
2+
import { Icon, Listbox, Option, OptionGroup } from '@sveltia/ui';
33
import { sleep } from '@sveltia/utils/misc';
44
import equal from 'fast-deep-equal';
55
import { _, locale as appLocale } from 'svelte-i18n';
@@ -41,92 +41,95 @@
4141
/>
4242
{/if}
4343
<Listbox aria-label={$_('asset_folder_list')} aria-controls="assets-container">
44-
{#each folders as folder ([folder.collectionName, folder.fileName, folder.internalPath].join(':'))}
45-
{#await sleep() then}
46-
{@const { collectionName, internalPath, entryRelative, hasTemplateTags } = folder}
47-
{@const collection = collectionName ? getCollection(collectionName) : undefined}
48-
<!-- Can’t upload assets if collection assets are saved at entry-relative paths -->
49-
{@const uploadDisabled = entryRelative || hasTemplateTags}
50-
{@const selected = equal($selectedAssetFolder, folder)}
51-
<Option
52-
selected={$isSmallScreen ? false : selected}
53-
label={$appLocale ? getFolderLabelByCollection(folder) : ''}
54-
onSelect={() => {
55-
goto(`/assets/${internalPath ?? '-/all'}`, {
56-
transitionType: 'forwards',
57-
// An internal path can be shared by multiple collections, files and fields. Pass the
58-
// folder info as history state so we can distinguish these different asset folders
59-
// while keeping the URL clean.
60-
state: { folder },
61-
});
62-
}}
63-
ondragover={(event) => {
64-
event.preventDefault();
44+
<OptionGroup label={$_('asset_location.repository')}>
45+
{#each folders as folder ([folder.collectionName, folder.fileName, folder.internalPath].join(':'))}
46+
{#await sleep() then}
47+
{@const { collectionName, internalPath, entryRelative, hasTemplateTags } = folder}
48+
{@const collection = collectionName ? getCollection(collectionName) : undefined}
49+
<!-- Can’t upload assets if collection assets are saved at entry-relative paths -->
50+
{@const uploadDisabled = entryRelative || hasTemplateTags}
51+
{@const selected = equal($selectedAssetFolder, folder)}
52+
<Option
53+
selected={$isSmallScreen ? false : selected}
54+
label={$appLocale ? getFolderLabelByCollection(folder) : ''}
55+
onSelect={() => {
56+
goto(`/assets/${internalPath ?? '-/all'}`, {
57+
transitionType: 'forwards',
58+
// An internal path can be shared by multiple collections, files and fields. Pass
59+
// the folder info as history state so we can distinguish these different asset
60+
// folders while keeping the URL clean.
61+
state: { folder },
62+
});
63+
}}
64+
ondragover={(event) => {
65+
event.preventDefault();
6566
66-
if (uploadDisabled) {
67-
return;
68-
}
67+
if (uploadDisabled) {
68+
return;
69+
}
6970
70-
if (internalPath === undefined || selected) {
71-
/** @type {DataTransfer} */ (event.dataTransfer).dropEffect = 'none';
72-
} else {
73-
/** @type {DataTransfer} */ (event.dataTransfer).dropEffect = 'move';
74-
/** @type {HTMLElement} */ (event.target).classList.add('dragover');
75-
}
76-
}}
77-
ondragleave={(event) => {
78-
event.preventDefault();
71+
if (internalPath === undefined || selected) {
72+
/** @type {DataTransfer} */ (event.dataTransfer).dropEffect = 'none';
73+
} else {
74+
/** @type {DataTransfer} */ (event.dataTransfer).dropEffect = 'move';
75+
/** @type {HTMLElement} */ (event.target).classList.add('dragover');
76+
}
77+
}}
78+
ondragleave={(event) => {
79+
event.preventDefault();
7980
80-
if (uploadDisabled) {
81-
return;
82-
}
81+
if (uploadDisabled) {
82+
return;
83+
}
8384
84-
/** @type {HTMLElement} */ (event.target).classList.remove('dragover');
85-
}}
86-
ondragend={(event) => {
87-
event.preventDefault();
85+
/** @type {HTMLElement} */ (event.target).classList.remove('dragover');
86+
}}
87+
ondragend={(event) => {
88+
event.preventDefault();
8889
89-
if (uploadDisabled) {
90-
return;
91-
}
90+
if (uploadDisabled) {
91+
return;
92+
}
9293
93-
/** @type {HTMLElement} */ (event.target).classList.remove('dragover');
94-
}}
95-
ondrop={(event) => {
96-
event.preventDefault();
94+
/** @type {HTMLElement} */ (event.target).classList.remove('dragover');
95+
}}
96+
ondrop={(event) => {
97+
event.preventDefault();
9798
98-
if (uploadDisabled) {
99-
return;
100-
}
99+
if (uploadDisabled) {
100+
return;
101+
}
101102
102-
/** @type {HTMLElement} */ (event.target).classList.remove('dragover');
103-
// @todo Move the assets while updating entries using the files, after showing a
104-
// confirmation dialog.
105-
}}
106-
>
107-
{#snippet startIcon()}
108-
<Icon name={collection?.icon || 'folder'} />
109-
{/snippet}
110-
{#snippet endIcon()}
111-
{#key $allAssets}
112-
{#await sleep() then}
113-
{@const count = (
114-
internalPath !== undefined ? getAssetsByFolder(folder) : $allAssets
115-
).length}
116-
<span
117-
class="count"
118-
aria-label="({$_(
119-
count > 1 ? 'many_assets' : count === 1 ? 'one_asset' : 'no_assets',
120-
{ values: { count } },
121-
)})"
122-
>
123-
{numberFormatter.format(count)}
124-
</span>
125-
{/await}
126-
{/key}
127-
{/snippet}
128-
</Option>
129-
{/await}
130-
{/each}
103+
/** @type {HTMLElement} */ (event.target).classList.remove('dragover');
104+
// @todo Move the assets while updating entries using the files, after showing a
105+
// confirmation dialog.
106+
}}
107+
>
108+
{#snippet startIcon()}
109+
<Icon name={collection?.icon || 'folder'} />
110+
{/snippet}
111+
{#snippet endIcon()}
112+
{#key $allAssets}
113+
{#await sleep() then}
114+
{@const count = (
115+
internalPath !== undefined ? getAssetsByFolder(folder) : $allAssets
116+
).length}
117+
<span
118+
class="count"
119+
aria-label="({$_(
120+
count > 1 ? 'many_assets' : count === 1 ? 'one_asset' : 'no_assets',
121+
{ values: { count } },
122+
)})"
123+
>
124+
{numberFormatter.format(count)}
125+
</span>
126+
{/await}
127+
{/key}
128+
{/snippet}
129+
</Option>
130+
{/await}
131+
{/each}
132+
</OptionGroup>
133+
<!-- @todo Add external locations, including Cloudinary and Uploadcare -->
131134
</Listbox>
132135
</div>

‎src/lib/components/contents/list/primary-sidebar.svelte‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import { Divider, Icon, Listbox, Option } from '@sveltia/ui';
2+
import { Divider, Icon, Listbox, Option, OptionGroup } from '@sveltia/ui';
33
import { sleep } from '@sveltia/utils/misc';
44
import { _, locale as appLocale } from 'svelte-i18n';
55
import QuickSearchBar from '$lib/components/global/toolbar/items/quick-search-bar.svelte';
@@ -25,38 +25,40 @@
2525
/>
2626
{/if}
2727
<Listbox aria-label={$_('collection_list')} aria-controls="collection-container">
28-
{#each collections as { name, label, icon, files, divider = false } (name)}
29-
{#await sleep() then}
30-
{#if divider}
31-
<Divider />
32-
{:else}
33-
<Option
34-
label={label || name}
35-
selected={$isSmallScreen ? false : $selectedCollection?.name === name}
36-
onSelect={() => {
37-
goto(`/collections/${name}`, { transitionType: 'forwards' });
38-
}}
39-
>
40-
{#snippet startIcon()}
41-
<Icon name={icon || 'edit_note'} />
42-
{/snippet}
43-
{#snippet endIcon()}
44-
{#key $allEntries}
45-
{@const count = (files ?? getEntriesByCollection(name)).length}
46-
<span
47-
class="count"
48-
aria-label="({$_(
49-
count > 1 ? 'many_entries' : count === 1 ? 'one_entry' : 'no_entries',
50-
{ values: { count } },
51-
)})"
52-
>
53-
{numberFormatter.format(count)}
54-
</span>
55-
{/key}
56-
{/snippet}
57-
</Option>
58-
{/if}
59-
{/await}
60-
{/each}
28+
<OptionGroup label={$_('collections')}>
29+
{#each collections as { name, label, icon, files, divider = false } (name)}
30+
{#await sleep() then}
31+
{#if divider}
32+
<Divider />
33+
{:else}
34+
<Option
35+
label={label || name}
36+
selected={$isSmallScreen ? false : $selectedCollection?.name === name}
37+
onSelect={() => {
38+
goto(`/collections/${name}`, { transitionType: 'forwards' });
39+
}}
40+
>
41+
{#snippet startIcon()}
42+
<Icon name={icon || 'edit_note'} />
43+
{/snippet}
44+
{#snippet endIcon()}
45+
{#key $allEntries}
46+
{@const count = (files ?? getEntriesByCollection(name)).length}
47+
<span
48+
class="count"
49+
aria-label="({$_(
50+
count > 1 ? 'many_entries' : count === 1 ? 'one_entry' : 'no_entries',
51+
{ values: { count } },
52+
)})"
53+
>
54+
{numberFormatter.format(count)}
55+
</span>
56+
{/key}
57+
{/snippet}
58+
</Option>
59+
{/if}
60+
{/await}
61+
{/each}
62+
</OptionGroup>
6163
</Listbox>
6264
</div>

‎src/lib/locales/en.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -156,8 +156,14 @@ export const strings = {
156156
},
157157

158158
// Library
159+
singletons: 'Singletons',
159160
content_library: 'Content Library',
160161
asset_library: 'Asset Library',
162+
asset_location: {
163+
repository: 'Your Site',
164+
external: 'External Locations',
165+
stock_photos: 'Stock Photos',
166+
},
161167
collection_assets: 'Collection Assets',
162168
entry_list: 'Entry List',
163169
file_list: 'File List',
@@ -498,11 +504,6 @@ export const strings = {
498504
search_for_file: 'Search for Files',
499505
search_for_image: 'Search for Images',
500506
locations: 'Locations',
501-
location: {
502-
repository: 'Your Site',
503-
external_locations: 'External Locations',
504-
stock_photos: 'Stock Photos',
505-
},
506507
folder: {
507508
field: 'Field Assets',
508509
entry: 'Entry Assets',

‎src/lib/locales/ja.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -157,8 +157,14 @@ export const strings = {
157157
},
158158

159159
// Library
160+
singletons: 'シングルトン',
160161
content_library: 'コンテンツライブラリ',
161162
asset_library: 'アセットライブラリ',
163+
asset_location: {
164+
repository: 'あなたのサイト',
165+
external: '外部の場所',
166+
stock_photos: 'ストックフォト',
167+
},
162168
collection_assets: 'コレクションアセット',
163169
entry_list: 'エントリーリスト',
164170
file_list: 'ファイルリスト',
@@ -499,11 +505,6 @@ export const strings = {
499505
search_for_file: 'ファイルを検索',
500506
search_for_image: '画像を検索',
501507
locations: '場所',
502-
location: {
503-
repository: 'あなたのサイト',
504-
external_locations: '外部の場所',
505-
stock_photos: 'ストックフォト',
506-
},
507508
folder: {
508509
field: 'フィールドアセット',
509510
entry: 'エントリーアセット',

0 commit comments

Comments
 (0)