Skip to content

Commit 4f5c4e5

Browse files
petschkipetschki
committed
fix(pat contentbrowser): add button icon and styling fix.
1 parent 439fd29 commit 4f5c4e5

1 file changed

Lines changed: 52 additions & 22 deletions

File tree

‎src/pat/contentbrowser/src/ContentBrowser.svelte‎

Lines changed: 52 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,9 @@
4444
let gridView = $state(($config.layout || "list") === "grid");
4545
let defaultConfigMode = $config.mode;
4646
47-
let vw = $state(Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0));
47+
let vw = $state(
48+
Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0),
49+
);
4850
4951
function updatePreview({ data = null, uuid = null, action = "show" }) {
5052
if (data && action == "show") {
@@ -490,8 +492,10 @@
490492
class="btn btn-light btn-sm"
491493
type="button"
492494
aria-label={_t("clear search")}
493-
onclick={(e) => { e.preventDefault(); searchItems(""); }}
494-
><svg use:resolveIcon={{ iconName: "x" }} /></button
495+
onclick={(e) => {
496+
e.preventDefault();
497+
searchItems("");
498+
}}><svg use:resolveIcon={{ iconName: "x" }} /></button
495499
>
496500
{/if}
497501
</div>
@@ -516,8 +520,10 @@
516520
class="btn btn-link text-white ms-auto"
517521
tabindex="0"
518522
aria-label={_t("close")}
519-
onclick={(e) => { e.preventDefault(); closeBrowser(); }}
520-
><svg use:resolveIcon={{ iconName: "x-circle" }} /></button
523+
onclick={(e) => {
524+
e.preventDefault();
525+
closeBrowser();
526+
}}><svg use:resolveIcon={{ iconName: "x-circle" }} /></button
521527
>
522528
</div>
523529
{#await $contentItems}
@@ -534,7 +540,7 @@
534540
in:fly={{ duration: 500 }}
535541
>
536542
<div class="levelToolbar">
537-
{#if i == 0 && $config.mode == "browse"}
543+
{#if i == 0 && levels.length > 1 && $config.mode == "browse"}
538544
<button
539545
type="button"
540546
class="btn btn-link btn-xs ps-0"
@@ -551,20 +557,26 @@
551557
{#if i == levels.length - 1}
552558
{#if level.selectable && !level.showFilter && !previewItem.UID}
553559
<button
554-
class="btn btn-xs btn-outline-primary d-flex align-items-center"
560+
class="btn btn-xs btn-primary d-flex align-items-center ps-1"
555561
title={_t("select ${level_path}", {
556562
level_path:
557563
level.Title || itemId(level),
558564
})}
559565
disabled={!isSelectable(level)}
560-
onclick={(e) => { e.preventDefault(); addItem(level); }}
566+
onclick={(e) => {
567+
e.preventDefault();
568+
addItem(level);
569+
}}
561570
><svg
562571
use:resolveIcon={{
563-
iconName: "plus",
572+
iconName: "check",
564573
}}
565574
/>
566-
<span class="select-button-ellipsis"
567-
>{level.Title || itemId(level)}</span
575+
<span
576+
>{_t("select ${level_path}", {
577+
level_path:
578+
level.Title || itemId(level),
579+
})}</span
568580
></button
569581
>
570582
{/if}
@@ -581,7 +593,11 @@
581593
<button
582594
class="btn btn-link btn-xs level-filter"
583595
title={_t("clear filter")}
584-
onclick={(e) => { e.preventDefault(); filterLevel(""); level.showFilter = false; }}
596+
onclick={(e) => {
597+
e.preventDefault();
598+
filterLevel("");
599+
level.showFilter = false;
600+
}}
585601
>
586602
<svg
587603
use:resolveIcon={{
@@ -593,7 +609,10 @@
593609
<button
594610
class="btn btn-link btn-xs level-filter"
595611
title={_t("level filter")}
596-
onclick={(e) => { e.preventDefault(); level.showFilter = true; }}
612+
onclick={(e) => {
613+
e.preventDefault();
614+
level.showFilter = true;
615+
}}
597616
>
598617
<svg
599618
use:resolveIcon={{
@@ -648,7 +667,10 @@
648667
role="button"
649668
tabindex={n}
650669
data-uuid={item.UID}
651-
onkeydown={(e) => { e.preventDefault(); keyboardNavigation(item, e); }}
670+
onkeydown={(e) => {
671+
e.preventDefault();
672+
keyboardNavigation(item, e);
673+
}}
652674
onclick={(e) => clickItem(item, e)}
653675
>
654676
<div
@@ -726,16 +748,21 @@
726748
<div class="selectLevel me-3">
727749
{#if isSelectable(previewItem)}
728750
<button
729-
class="btn btn-xs btn-outline-primary d-flex align-items-center"
751+
class="btn btn-xs btn-primary d-flex align-items-center ps-1"
730752
title={_t("select ${preview_path}", {
731753
preview_path: previewItem.Title,
732754
})}
733-
onclick={(e) => { e.preventDefault(); addItem(previewItem); }}
755+
onclick={(e) => {
756+
e.preventDefault();
757+
addItem(previewItem);
758+
}}
734759
><svg
735-
use:resolveIcon={{ iconName: "plus" }}
760+
use:resolveIcon={{ iconName: "check" }}
736761
/>
737762
<span class="select-button-ellipsis"
738-
>{previewItem.Title}</span
763+
>{_t("select ${preview_path}", {
764+
preview_path: previewItem.Title,
765+
})}</span
739766
>
740767
</button>
741768
{/if}
@@ -800,10 +827,13 @@
800827
<div class="preview" in:fly={{ duration: 500 }}>
801828
<div class="levelToolbar">
802829
<button
803-
class="btn btn-xs btn-outline-primary d-flex align-items-center"
830+
class="btn btn-xs btn-primary d-flex align-items-center ps-1"
804831
title={_t("add selected items")}
805-
onclick={(e) => { e.preventDefault(); addSelectedItems(); }}
806-
><svg use:resolveIcon={{ iconName: "plus" }} />
832+
onclick={(e) => {
833+
e.preventDefault();
834+
addSelectedItems();
835+
}}
836+
><svg use:resolveIcon={{ iconName: "check" }} />
807837
<span class="select-button-ellipsis"
808838
>{_t("add selected items")}</span
809839
>
@@ -997,7 +1027,7 @@
9971027
9981028
.select-button-ellipsis {
9991029
white-space: nowrap;
1000-
max-width: 150px;
1030+
max-width: 220px;
10011031
text-overflow: ellipsis;
10021032
overflow: hidden;
10031033
}

0 commit comments

Comments
 (0)