Turn scroll indicator into selectable widget

REDMINE-20895
codevise · Feb 4, 2025 · c732e11 · c732e11
1 parent 8553d1d
commit c732e11
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/entry_types/scrolled/package/src/frontend/Section.js b/entry_types/scrolled/package/src/frontend/Section.js
@@ -18,7 +18,7 @@ import {SectionLifecycleProvider, useSectionLifecycle} from './useSectionLifecyc
 import {SectionViewTimelineProvider} from './SectionViewTimelineProvider';
 import {withInlineEditingDecorator} from './inlineEditing';
 import {BackgroundColorProvider} from './backgroundColor';
-import {Widget} from './Widget';
+import {SelectableWidget} from './SelectableWidget';
 
 import * as v1 from './v1';
 import * as v2 from './v2';
@@ -80,8 +80,8 @@ const Section = withInlineEditingDecorator('SectionDecorator', function Section(
                                      state={state} />
 
             {section.sectionIndex === 0 &&
-             <Widget role="scrollIndicator"
-                     props={{sectionLayout: section.layout}} />}
+             <SelectableWidget role="scrollIndicator"
+                               props={{sectionLayout: section.layout}} />}
           </BackgroundColorProvider>
         </SectionViewTimelineProvider>
       </SectionLifecycleProvider>

diff --git a/entry_types/scrolled/package/src/widgets/iconScrollIndicator/IconScrollIndicator.js b/entry_types/scrolled/package/src/widgets/iconScrollIndicator/IconScrollIndicator.js
@@ -1,7 +1,10 @@
 import React, {useEffect, useRef} from 'react';
 import classNames from 'classnames';
 
-import {ThemeIcon} from 'pageflow-scrolled/frontend';
+import {
+  ThemeIcon,
+  WidgetSelectionRect
+} from 'pageflow-scrolled/frontend';
 
 import styles from './IconScrollIndicator.module.css';
 
@@ -33,7 +36,9 @@ export function IconScrollIndicator({configuration, sectionLayout}) {
                                styles[`size-${configuration.size}`],
                                styles[`align-${getAlignment(configuration, sectionLayout)}`])}
          ref={ref}>
-      <ThemeIcon name="scrollDown" width={30} height={30} />
+      <WidgetSelectionRect>
+        <ThemeIcon name="scrollDown" width={30} height={30} />
+      </WidgetSelectionRect>
     </div>
   );
 }

diff --git a/entry_types/scrolled/package/src/widgets/iconScrollIndicator/IconScrollIndicator.module.css b/entry_types/scrolled/package/src/widgets/iconScrollIndicator/IconScrollIndicator.module.css
@@ -10,6 +10,10 @@
   pointer-events: none;
 }
 
+.indicator > * {
+  display: inline-block;
+}
+
 .size-large {
   --size: 60px;
 }