feat(Settings): Add settings mobile view

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

Hide file tree

Showing 3 changed files with 29 additions and 3 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,7 +29,7 @@
         @include text-size(body-1);
     }
 
-    &__popup-tooltip {
+    &__popup-tooltip-content {
         padding: 0;
     }
 
@@ -61,4 +61,24 @@
         align-items: center;
         margin-left: auto;
     }
+
+    @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 {
+            width: 100%;
+        }
+    }
 }
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,
@@ -178,7 +178,9 @@ const SettingsControl = (props: ControlProps) => {
             placement={getPopupPosition(isVerticalView)}
             className={controlClassName}
             contentClassName={b('popup')}
-            tooltipContentClassName={b('popup-tooltip')}
+            tooltipClassName={b('popup-tooltip')}
+            tooltipContentClassName={b('popup-tooltip-content')}
+            hasArrow={!isMobileView}
             content={
                 <List
                     role={'list'}