diff --git a/src/back/jdd-components/subtree/subtree.css b/src/back/jdd-components/subtree/subtree.css index fb9e7fa..29d2bd8 100644 --- a/src/back/jdd-components/subtree/subtree.css +++ b/src/back/jdd-components/subtree/subtree.css @@ -64,7 +64,15 @@ .horizontal-scroller.has-next .next-button, .horizontal-scroller.has-prev .prev-button { - display: block; + display: flex; + + svg { + height: 16px; + + * { + fill: var(--fg-color) !important; + } + } } .scroller-wrapper { diff --git a/src/back/jdd-components/subtree/subtree.jdd.tsx b/src/back/jdd-components/subtree/subtree.jdd.tsx index 28b3991..fac9022 100644 --- a/src/back/jdd-components/subtree/subtree.jdd.tsx +++ b/src/back/jdd-components/subtree/subtree.jdd.tsx @@ -7,6 +7,7 @@ import type { import { Component, ComponentArguments } from "@sealcode/jdd"; import { horizontalScroller } from "src/back/routes/common/horizontal-scroller/horizontal-scroller.js"; import { getColorVariables, getFgColorVariable } from "src/back/colors.js"; +import { icon } from "src/back/icons.js"; const component_arguments = { mode: new ComponentArguments.Enum(["column", "horizontal-scroller"]).setDefaultValue( @@ -75,7 +76,7 @@ export class Subtree extends Component { if (mode == "horizontal-scroller") { const button_styles = [ `background-color: var(${scroller_mode_arrows_color})`, - `color: var(${getFgColorVariable(scroller_mode_arrows_color)})`, + `--fg-color: var(${getFgColorVariable(scroller_mode_arrows_color)})`, ].join(";"); return (
{ data-action="horizontal-scroller#scrollLeft" style={button_styles} > - ← + {icon("arrow-left")}
@@ -102,7 +103,7 @@ export class Subtree extends Component { data-action="horizontal-scroller#scrollRight" style={button_styles} > - → + {icon("arrow-right")}
{scroller} diff --git a/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts b/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts index 863e088..9cf45cd 100644 --- a/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts +++ b/src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts @@ -78,6 +78,16 @@ export default class HorizontalScroller extends Controller { while (visibility[current_index] == 1 && current_index < visibility.length) { current_index++; } + if (current_index >= this.visibility.length) { + // edge-case. Content must be wider than the viewing window for some reason and none of the items reach 100% visibility. Returning the index of the first zero-visible element that follows a visible element; + for (let i = visibility.length - 1; i > 0; i--) { + if (visibility[i] === 0 && visibility[i - 1] > 0) { + return i; + } + } + + return -1; + } return current_index; } diff --git a/src/icons/arrow-down.svg b/src/icons/arrow-down.svg new file mode 100644 index 0000000..dc3808b --- /dev/null +++ b/src/icons/arrow-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/arrow-left.svg b/src/icons/arrow-left.svg new file mode 100644 index 0000000..4e045f1 --- /dev/null +++ b/src/icons/arrow-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/arrow-right.svg b/src/icons/arrow-right.svg new file mode 100644 index 0000000..ccb2e2b --- /dev/null +++ b/src/icons/arrow-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/arrow-up.svg b/src/icons/arrow-up.svg new file mode 100644 index 0000000..76daa43 --- /dev/null +++ b/src/icons/arrow-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/copy.svg b/src/icons/copy.svg index c934514..423bcc1 100644 --- a/src/icons/copy.svg +++ b/src/icons/copy.svg @@ -1,41 +1 @@ - - - - - - + \ No newline at end of file diff --git a/src/icons/hamburger-close.svg b/src/icons/hamburger-close.svg index 1b3f341..4091eb9 100644 --- a/src/icons/hamburger-close.svg +++ b/src/icons/hamburger-close.svg @@ -1,67 +1 @@ - - - - - - - - - - - - - + \ No newline at end of file diff --git a/src/icons/hamburger.svg b/src/icons/hamburger.svg index a8199cb..cea45f0 100644 --- a/src/icons/hamburger.svg +++ b/src/icons/hamburger.svg @@ -1,69 +1 @@ - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/src/icons/mastodon.svg b/src/icons/mastodon.svg index fdf682c..244b4cb 100644 --- a/src/icons/mastodon.svg +++ b/src/icons/mastodon.svg @@ -1,11 +1 @@ - - - - - - - + \ No newline at end of file diff --git a/src/icons/matrix.svg b/src/icons/matrix.svg index b2150ce..e987a4e 100644 --- a/src/icons/matrix.svg +++ b/src/icons/matrix.svg @@ -1,28 +1 @@ - - - - - Matrix (protocol) logo - - - - - - +Matrix (protocol) logo \ No newline at end of file diff --git a/src/icons/mobilizon.svg b/src/icons/mobilizon.svg index 7ad89a1..a53fd04 100644 --- a/src/icons/mobilizon.svg +++ b/src/icons/mobilizon.svg @@ -1,41 +1 @@ - - - - - - - + \ No newline at end of file diff --git a/src/icons/paperclip.svg b/src/icons/paperclip.svg index 5ee6532..ffc9cb3 100644 --- a/src/icons/paperclip.svg +++ b/src/icons/paperclip.svg @@ -1,41 +1 @@ - - - - - - - - + \ No newline at end of file diff --git a/src/icons/peertube.svg b/src/icons/peertube.svg index 5637e42..98b41fa 100644 --- a/src/icons/peertube.svg +++ b/src/icons/peertube.svg @@ -1,16 +1 @@ - - - - - - + \ No newline at end of file