Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pat contentbrowser: ui improvements for select button in toolbar #1411

Merged
merged 3 commits into from
Dec 4, 2024
Merged

pat contentbrowser: ui improvements for select button in toolbar #1411

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
de97b87
feat(pat contentbrowser): improvements ui
1letter Nov 18, 2024
b28f789
feat(pat contentbrowser): use title attribute of select button to dis…
1letter Dec 4, 2024
c250e23
Update src/pat/contentbrowser/src/ContentBrowser.svelte
thet Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion src/pat/contentbrowser/src/ContentBrowser.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,6 +342,13 @@
}, 500);
}

function initToolTips(){
// init the tooltips for select buttons in contentbrowser
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
console.log(tooltipTriggerList, tooltipList)
}

$: {
if ($showContentBrowser) {
contentItems.get({ path: $currentPath });
Expand Down Expand Up @@ -409,6 +416,7 @@
<div
class="levelColumn{i % 2 == 0 ? ' odd' : ' even'}"
in:fly|local={{ duration: 300 }}
use:initToolTips
>
<div class="levelToolbar">
{#if i == 0 && $config.mode == "browse"}
Expand All @@ -426,11 +434,15 @@
{#if level.selectable}
<button
class="btn btn-primary btn-xs"
data-bs-toggle="tooltip"
data-bs-title="{level.displayPath}"
data-bs-placement="top"
data-bs-custom-class="contentbrowser-tooltip"
Copy link
Member

@thet thet Dec 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wouldn't a title attribute be enough for showing a tooltip by browser mechanisms?
We could also augment that later using patternslib or something, if the browser tooltip isn't enough.

Background: I overheard that Twitter Bootstrap is in declining development state. And I get always a bit nervous when we add another dependency to Bootstrap.
Also, the browser tooltip mechanism via the title attribute is fine enough in most cases.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I second to not use Bootstrap here.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
data-bs-toggle="tooltip"
data-bs-title="{level.displayPath}"
data-bs-placement="top"
data-bs-custom-class="contentbrowser-tooltip"
title="{level.displayPath}"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the idea of simplifying it. I will change it.

disabled={!isSelectable(level)}
on:click|preventDefault={() => addItem(level)}
>
{_t("select ${level_path}", {
level_path: level.displayPath,
level_path: level.Title,
})}
</button>
{/if}
Expand Down Expand Up @@ -753,4 +765,10 @@
text-align: center;
padding: 0.25rem 0;
}

/* override the default tooltip z-index, because contentbrowser is on a higher level */
:global(div.tooltip.contentbrowser-tooltip){
--bs-tooltip-zindex: 2000;
z-index: var(--bs-tooltip-zindex);
}
</style>
Loading