From d9ce2377e691ccd69f18d53191e4f60679129988 Mon Sep 17 00:00:00 2001
From: 3y3 <3y3@ya.ru>
Date: Thu, 3 Oct 2024 19:34:09 +0300
Subject: [PATCH] feat: Add search for mobile view
---
package-lock.json | 6 +-
package.json | 1 +
.../ConstructorPage/useNavigation.tsx | 1 +
src/components/Search/Suggest.scss | 56 ++++++++++++++++++-
src/components/Search/Suggest.tsx | 14 ++++-
src/styles/overrides.scss | 47 ++++++++++++++--
6 files changed, 117 insertions(+), 8 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index b0384a2..d7378f8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
"@diplodoc/latex-extension": "^1.0.2",
"@diplodoc/mermaid-extension": "^1.2.1",
"@diplodoc/transform": "^4.31.3",
+ "@gravity-ui/icons": "^2.11.0",
"url": "^0.11.0"
},
"devDependencies": {
@@ -2618,8 +2619,9 @@
"license": "MIT"
},
"node_modules/@gravity-ui/icons": {
- "version": "2.9.1",
- "dev": true,
+ "version": "2.11.0",
+ "resolved": "https://registry.npmjs.org/@gravity-ui/icons/-/icons-2.11.0.tgz",
+ "integrity": "sha512-kRiemFztlFV4iUcsbdGRM/2ozK6XZYkzOV4hIzSmNDqtXpEoumm7LhzOLCiugN68YQrazzJLksq4Ho8lpjkVrg==",
"license": "MIT",
"peerDependencies": {
"react": "*"
diff --git a/package.json b/package.json
index 417ea26..17be2cc 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
"@diplodoc/latex-extension": "^1.0.2",
"@diplodoc/mermaid-extension": "^1.2.1",
"@diplodoc/transform": "^4.31.3",
+ "@gravity-ui/icons": "^2.11.0",
"url": "^0.11.0"
},
"devDependencies": {
diff --git a/src/components/ConstructorPage/useNavigation.tsx b/src/components/ConstructorPage/useNavigation.tsx
index 9202c27..7112464 100644
--- a/src/components/ConstructorPage/useNavigation.tsx
+++ b/src/components/ConstructorPage/useNavigation.tsx
@@ -40,6 +40,7 @@ export const useNavigation = (
withBorder: true,
leftItems: leftItems,
rightItems: rightItems,
+ customMobileHeaderItems: [{type: 'search'} as unknown as NavigationItemModel],
}),
[leftItems, rightItems],
);
diff --git a/src/components/Search/Suggest.scss b/src/components/Search/Suggest.scss
index 295ed94..88ea3a8 100644
--- a/src/components/Search/Suggest.scss
+++ b/src/components/Search/Suggest.scss
@@ -1,12 +1,66 @@
.Suggest {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ float: right;
+
margin-right: 20px;
min-width: 200px;
- transition: min-width 0.3s;
+ transition:
+ min-width 0.3s,
+ max-width 0.3s;
.dc-root_focused-search & {
min-width: 500px;
}
+ .mobile & {
+ margin-right: 0;
+ min-width: 36px;
+ max-width: 36px;
+ }
+
+ .mobile.dc-root_focused-search & {
+ min-width: 100%;
+ max-width: 100%;
+ }
+
+ &__close {
+ display: none;
+ flex: none;
+ margin-left: 16px;
+
+ .mobile.dc-root_focused-search & {
+ display: block;
+ }
+ }
+
+ &__end {
+ display: none;
+
+ .mobile & {
+ display: block;
+ }
+ }
+
+ &__input {
+ & input::placeholder {
+ transition: color 0.1s;
+ }
+
+ .mobile:not(.dc-root_focused-search) & {
+ --g-text-input-placeholder-color: rgba(0, 0, 0, 0);
+
+ & input {
+ padding: 0;
+ }
+
+ & > * {
+ border-color: rgba(0, 0, 0, 0);
+ }
+ }
+ }
+
&__Item {
&__Marker {
background: var(--g-color-base-neutral-medium);
diff --git a/src/components/Search/Suggest.tsx b/src/components/Search/Suggest.tsx
index 3d3cfa0..2ee03ab 100644
--- a/src/components/Search/Suggest.tsx
+++ b/src/components/Search/Suggest.tsx
@@ -2,12 +2,21 @@ import type {ISearchProvider, SearchSuggestApi} from '@diplodoc/components';
import React, {useCallback, useRef} from 'react';
import {SearchSuggest} from '@diplodoc/components';
+import {Icon} from '@gravity-ui/uikit';
+import {Magnifier} from '@gravity-ui/icons';
+import block from 'bem-cn-lite';
import {updateRootClassName} from '../../utils';
import {useProvider} from './useProvider';
import './Suggest.scss';
+const b = block('Suggest');
+
+function SearchButton() {
+ return ;
+}
+
export function Suggest() {
const provider: ISearchProvider | null = useProvider();
const suggest = useRef(null);
@@ -35,7 +44,10 @@ export function Suggest() {
provider={provider}
onFocus={onFocus}
onBlur={onBlur}
- classNameContainer={'Suggest'}
+ endContent={}
+ className={b('input')}
+ classNameContainer={b()}
+ closeButton={true}
/>
);
}
diff --git a/src/styles/overrides.scss b/src/styles/overrides.scss
index c37bda4..6949b12 100644
--- a/src/styles/overrides.scss
+++ b/src/styles/overrides.scss
@@ -42,10 +42,8 @@
z-index: 120;
& > .container-fluid {
- .desktop & {
- padding-right: $desktopHPadding;
- padding-left: $desktopHPadding;
- }
+ padding-right: $desktopHPadding;
+ padding-left: $desktopHPadding;
.mobile & {
padding-right: $mobileRPadding;
@@ -157,3 +155,44 @@
}
}
}
+
+.mobile {
+ .pc-navigation {
+ .pc-overflow-scroller {
+ justify-content: flex-end;
+ overflow: visible;
+ }
+ }
+}
+
+.mobile.dc-root_focused-search {
+ .pc-navigation {
+ .pc-desktop-navigation {
+ &__left,
+ &__navigation-container {
+ display: none;
+ }
+
+ &__right {
+ flex: 1 1 100%;
+ max-width: 100%;
+ }
+
+ &__mobile-navigation-container {
+ padding-right: 0;
+ }
+ }
+
+ .pc-overflow-scroller__wrapper {
+ width: 100%;
+ }
+
+ .pc-navigation-item:has(> .Suggest) {
+ width: 100%;
+ }
+
+ .pc-mobile-menu-button {
+ display: none;
+ }
+ }
+}