feat(Settings): Add settings mobile view

diplodoc-platform · Dec 20, 2023 · bd3de3c · bd3de3c
1 parent 4a2fcc9
commit bd3de3c
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/src/components/Controls/ControlsLayout.tsx b/src/components/Controls/ControlsLayout.tsx
@@ -7,6 +7,7 @@ import {ControlSizes} from '../../models';
 
 type ControlsLayoutProps = {
     isWideView?: boolean;
+    isMobileView?: boolean;
     isVerticalView?: boolean;
     controlClassName?: string;
     controlSize?: ControlSizes;
@@ -16,6 +17,7 @@ type ControlsLayoutProps = {
 export const ControlsLayoutContext = createContext<ControlsLayoutProps>({
     controlClassName: '',
     isWideView: false,
+    isMobileView: false,
     isVerticalView: false,
     controlSize: ControlSizes.M,
     popupPosition: PopperPosition.BOTTOM_END,
@@ -25,6 +27,7 @@ const b = block('dc-controls');
 
 export const ControlsLayout: React.FC<PropsWithChildren<ControlsLayoutProps>> = ({
     isWideView,
+    isMobileView,
     isVerticalView,
     controlClassName,
     controlSize,
@@ -36,6 +39,7 @@ export const ControlsLayout: React.FC<PropsWithChildren<ControlsLayoutProps>> =
             value={{
                 controlClassName: controlClassName || b('control'),
                 isWideView: isWideView,
+                isMobileView: isMobileView,
                 isVerticalView: isVerticalView,
                 controlSize: controlSize,
                 popupPosition: popupPosition,

diff --git a/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss b/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss
@@ -29,14 +29,34 @@
         @include text-size(body-1);
     }
 
-    &__popup-tooltip {
+    &__popup-tooltip-content {
         padding: 0;
     }
 
+    @media (max-width: map-get($screenBreakpoints, 'md')) {
+        &__popup {
+            width: 100vw;
+        }
+
+        &__popup-tooltip {
+            position: fixed;
+            inset: var(--header-height) 0px auto 0px !important;
+            transform: translate3d(0,0,0) !important;
+        }
+
+        &__popup-tooltip-content {
+            max-width: 100%;
+        }
+    }
+
     &__list {
         padding: 4px 0;
         width: 230px;
 
+        &_mobile {
+            width: 100%;
+        }
+
         .yc-list__item_active {
             background: transparent;
         }

diff --git a/src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx b/src/components/Controls/single-controls/SettingsControl/SettingsControl.tsx
@@ -36,7 +36,7 @@ interface SettingControlItem {
 
 const SettingsControl = (props: ControlProps) => {
     const {t} = useTranslation('controls');
-    const {controlClassName, controlSize, isVerticalView, isWideView, popupPosition} =
+    const {controlClassName, controlSize, isVerticalView, isWideView, isMobileView, popupPosition} =
         useContext(ControlsLayoutContext);
     const {
         textSize,
@@ -177,13 +177,23 @@ const SettingsControl = (props: ControlProps) => {
             onOpenChange={setIsVisiblePopup}
             placement={getPopupPosition(isVerticalView)}
             className={controlClassName}
-            contentClassName={b('popup')}
-            tooltipContentClassName={b('popup-tooltip')}
+            contentClassName={b('popup', {
+                mobile: isMobileView,
+            })}
+            tooltipClassName={b('popup-tooltip', {
+                mobile: isMobileView,
+            })}
+            tooltipContentClassName={b('popup-tooltip-content', {
+                mobile: isMobileView,
+            })}
+            hasArrow={!isMobileView}
             content={
                 <List
                     role={'list'}
                     items={settingsItems}
-                    className={b('list')}
+                    className={b('list', {
+                        mobile: isMobileView,
+                    })}
                     itemHeight={ITEM_HEIGHT}
                     itemsHeight={ITEM_HEIGHT * settingsItems.length}
                     filterable={false}