Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-09-18 17:31:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next)/floating buttons/backlink counter: fix the dropdown not showing up

Browse Source
This commit is contained in:
Adorian Doran 2025-03-24 17:05:09 +02:00
parent 8cc7d02f36
commit 283b8e9bc8
3 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/public/app/widgets/floating_buttons/floating_buttons.ts
View File

@ -3,6 +3,14 @@ import { t } from "../../services/i18n.js";
import type FNote from "../../entities/fnote.js";
import type BasicWidget from "../basic_widget.js";
/*
* Note:
*
* For floating button widgets that require content to overflow, the has-overflow CSS class should
* be applied to the root element of the widget. Additionally, this root element may need to
* properly handle rounded corners, as defined by the --border-radius CSS variable.
*/
const TPL = `
<div class="floating-buttons no-print">
<style>
@ -39,10 +47,18 @@ const TPL = `
top: 70px;
}
.type-canvas .floating-buttons-children > * {
--border-radius: 0; /* Overridden by themes */
}
.floating-buttons-children > *:not(.hidden-int):not(.no-content-hidden) {
margin: 2px;
}
.floating-buttons-children > *:not(.has-overflow) {
overflow: hidden;
}
.floating-buttons-children > button, .floating-buttons-children .floating-button {
font-size: 150%;
padding: 5px 10px 4px 10px;

5
src/public/app/widgets/floating_buttons/zpetne_odkazy.ts
View File

@ -10,7 +10,7 @@ import froca from "../../services/froca.js";
import type FNote from "../../entities/fnote.js";
const TPL = `
<div class="backlinks-widget">
<div class="backlinks-widget has-overflow">
<style>
.backlinks-widget {
position: relative;
@ -121,7 +121,8 @@ export default class BacklinksWidget extends NoteContextAwareWidget {
}
toggle(show: boolean) {
this.$widget.toggleClass("hidden-no-content", !show);
this.$widget.toggleClass("hidden-no-content", !show)
.toggleClass("visible", !!show);
}
clearItems() {

18
src/public/stylesheets/theme-next/shell.css
View File

@ -1305,7 +1305,6 @@ div.promoted-attribute-cell .multiplicity:has(span) {
/* Floating buttons container */
div#center-pane .floating-buttons-children {
opacity: 1;
overflow: hidden;
transform-origin: right;
box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
background: var(--floating-button-background-color);
@ -1325,6 +1324,10 @@ div#center-pane .floating-buttons-children {
/* Floating buttons */
.floating-buttons-children {
--border-radius-size: 6px;
}
.floating-buttons-children > * {
margin: 0 !important;
}
@ -1352,6 +1355,12 @@ div.floating-buttons-children .floating-button:active {
font-size: calc(var(--floating-button-icon-size) * 0.85);
}
/* The first visible floating button */
div.floating-buttons-children > *:nth-child(1 of .visible) {
--border-radius: var(--border-radius-size) 0 0 var(--border-radius-size);
border-radius: var(--border-radius);
}
/* "Show / hide floating buttons" buttons */
@keyframes floating-buttons-show-hide-button-animation {
@ -1409,8 +1418,9 @@ div.floating-buttons-children:not(.temporarily-hidden) .close-floating-buttons-b
animation: floating-buttons-show-hide-button-animation 400ms ease-out;
}
div.floating-buttons-children .close-floating-buttons-button {
border-radius: 0;
div.floating-buttons-children .close-floating-buttons {
border-radius: 0 var(--border-radius-size) var(--border-radius-size) 0;
overflow: hidden;
}
div.floating-buttons-children .close-floating-buttons {
@ -1434,7 +1444,7 @@ div.floating-buttons-children .close-floating-buttons:has(.close-floating-button
user-select: none;
}
.floating-buttons .backlinks-ticker:has(.backlinks-count:hover) {
.floating-buttons .backlinks-widget:hover {
background: var(--floating-button-hover-background);
}