diff --git a/apps/client/src/layouts/desktop_layout.tsx b/apps/client/src/layouts/desktop_layout.tsx index fece6efd0..bdde92ff1 100644 --- a/apps/client/src/layouts/desktop_layout.tsx +++ b/apps/client/src/layouts/desktop_layout.tsx @@ -22,40 +22,25 @@ import LeftPaneToggleWidget from "../widgets/buttons/left_pane_toggle.js"; import CreatePaneButton from "../widgets/buttons/create_pane_button.js"; import ClosePaneButton from "../widgets/buttons/close_pane_button.js"; import RightPaneContainer from "../widgets/containers/right_pane_container.js"; -import EditButton from "../widgets/floating_buttons/edit_button.js"; -import ShowTocWidgetButton from "../widgets/buttons/show_toc_widget_button.js"; -import ShowHighlightsListWidgetButton from "../widgets/buttons/show_highlights_list_widget_button.js"; import NoteWrapperWidget from "../widgets/note_wrapper.js"; -import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js"; import SharedInfoWidget from "../widgets/shared_info.js"; import FindWidget from "../widgets/find.js"; import TocWidget from "../widgets/toc.js"; import HighlightsListWidget from "../widgets/highlights_list.js"; import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js"; -import FloatingButtons from "../widgets/floating_buttons/floating_buttons.js"; -import RelationMapButtons from "../widgets/floating_buttons/relation_map_buttons.js"; -import SvgExportButton from "../widgets/floating_buttons/svg_export_button.js"; import LauncherContainer from "../widgets/containers/launcher_container.js"; -import CodeButtonsWidget from "../widgets/floating_buttons/code_buttons.js"; import ApiLogWidget from "../widgets/api_log.js"; -import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating_buttons_button.js"; import MovePaneButton from "../widgets/buttons/move_pane_button.js"; import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js"; -import CopyImageReferenceButton from "../widgets/floating_buttons/copy_image_reference_button.js"; import ScrollPaddingWidget from "../widgets/scroll_padding.js"; import options from "../services/options.js"; import utils from "../services/utils.js"; -import GeoMapButtons from "../widgets/floating_buttons/geo_map_button.js"; -import ContextualHelpButton from "../widgets/floating_buttons/help_button.js"; import CloseZenButton from "../widgets/close_zen_button.js"; import type { AppContext } from "../components/app_context.js"; import type { WidgetsByParent } from "../services/bundle.js"; -import SwitchSplitOrientationButton from "../widgets/floating_buttons/switch_layout_button.js"; -import ToggleReadOnlyButton from "../widgets/floating_buttons/toggle_read_only_button.js"; -import PngExportButton from "../widgets/floating_buttons/png_export_button.js"; -import RefreshButton from "../widgets/floating_buttons/refresh_button.js"; import { applyModals } from "./layout_commons.js"; import Ribbon from "../widgets/ribbon/Ribbon.jsx"; +import FloatingButtons from "../widgets/FloatingButtons.jsx"; export default class DesktopLayout { @@ -145,24 +130,7 @@ export default class DesktopLayout { .child() .child(new SharedInfoWidget()) .child(new WatchedFileUpdateStatusWidget()) - .child( - new FloatingButtons() - .child(new RefreshButton()) - .child(new SwitchSplitOrientationButton()) - .child(new ToggleReadOnlyButton()) - .child(new EditButton()) - .child(new ShowTocWidgetButton()) - .child(new ShowHighlightsListWidgetButton()) - .child(new CodeButtonsWidget()) - .child(new RelationMapButtons()) - .child(new GeoMapButtons()) - .child(new CopyImageReferenceButton()) - .child(new SvgExportButton()) - .child(new PngExportButton()) - .child(new BacklinksWidget()) - .child(new ContextualHelpButton()) - .child(new HideFloatingButtonsButton()) - ) + .child() .child( new ScrollingContainer() .filling() diff --git a/apps/client/src/widgets/FloatingButtons.css b/apps/client/src/widgets/FloatingButtons.css new file mode 100644 index 000000000..d254a4363 --- /dev/null +++ b/apps/client/src/widgets/FloatingButtons.css @@ -0,0 +1,94 @@ +/* #region Generic floating buttons styles */ +.floating-buttons { + position: relative; +} + +.floating-buttons-children, +.show-floating-buttons { + position: absolute; + top: 10px; + right: 10px; + display: flex; + flex-direction: row; + z-index: 100; +} + +.note-split.rtl .floating-buttons-children, +.note-split.rtl .show-floating-buttons { + right: unset; + left: 10px; +} + +.note-split.rtl .close-floating-buttons { + order: -1; +} + +.note-split.rtl .close-floating-buttons, +.note-split.rtl .show-floating-buttons { + transform: rotate(180deg); +} + +.type-canvas .floating-buttons-children { + 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; + width: 40px; + cursor: pointer; + color: var(--button-text-color); + background: var(--button-background-color); + border-radius: var(--button-border-radius); + border: 1px solid transparent; + display: flex; + justify-content: space-around; +} + +.floating-buttons-children > button:hover, .floating-buttons-children .floating-button:hover { + text-decoration: none; + border-color: var(--button-border-color); +} + +.floating-buttons .floating-buttons-children.temporarily-hidden { + display: none; +} +/* #endregion */ + +/* #region Show floating button */ +.floating-buttons-children.temporarily-hidden+.show-floating-buttons { + display: block; +} + +.floating-buttons-children:not(.temporarily-hidden)+.show-floating-buttons { + display: none; +} + +.show-floating-buttons { + /* display: none;*/ + margin-left: 5px !important; +} + +.show-floating-buttons-button { + border: 1px solid transparent; + color: var(--button-text-color); + padding: 6px; + border-radius: 100px; +} + +.show-floating-buttons-button:hover { + border: 1px solid var(--button-border-color); +} +/* #endregion */ \ No newline at end of file diff --git a/apps/client/src/widgets/FloatingButtons.tsx b/apps/client/src/widgets/FloatingButtons.tsx new file mode 100644 index 000000000..d19ccfa49 --- /dev/null +++ b/apps/client/src/widgets/FloatingButtons.tsx @@ -0,0 +1,37 @@ +import { t } from "i18next"; +import "./FloatingButtons.css"; +import Button from "./react/Button"; + +/* + * 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. + */ +export default function FloatingButtons() { + return ( +
+
+ +
+ + +
+ ) +} + +/** + * Show button that displays floating button after click on close button + */ +function ShowFloatingButton() { + return ( +
+
+ ); +} \ No newline at end of file diff --git a/apps/client/src/widgets/floating_buttons/floating_buttons.ts b/apps/client/src/widgets/floating_buttons/floating_buttons.ts index e75072d4e..c2900dee3 100644 --- a/apps/client/src/widgets/floating_buttons/floating_buttons.ts +++ b/apps/client/src/widgets/floating_buttons/floating_buttons.ts @@ -3,135 +3,11 @@ 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 = /*html*/` -
- - -
- - -
- - - -
-
`; export default class FloatingButtons extends NoteContextAwareWidget { private $children!: JQuery; - doRender() { - this.$widget = $(TPL); - this.$children = this.$widget.find(".floating-buttons-children"); - - for (const widget of this.children) { - if ("render" in widget) { - this.$children.append((widget as BasicWidget).render()); - } - } - } - async refreshWithNote(note: FNote) { this.toggle(true); this.$widget.find(".show-floating-buttons-button").on("click", () => this.toggle(true));