update

src/ts/components/BarChart/components/HorizontalScale.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-import style from '../index.module.scss';
+import style from '../styles/scale.module.scss';
 
 interface HorizontalScaleProps {
   max: number;

src/ts/components/BarChart/components/Line.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import style from '../index.module.scss';
+import style from '../styles/index.module.scss';
 
 interface HorizontalScaleProps {
   text: number | string;

src/ts/components/BarChart/index.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import HorizontalScale from './components/HorizontalScale';
 import Line from './components/Line';
 
-import style from './index.module.scss';
+import style from './styles/index.module.scss';
 
 interface IDot {
   title: string;

src/ts/components/BarChart/styles/index.module.scss

@@ -27,20 +27,6 @@
     }
   }
 
-  &_scale {
-    display: inline-block;
-    width: var(--temp-height);
-
-    &_wrapper {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 1px;
-      height: 1px;
-      transform: rotate(-90deg);
-    }
-  }
-
   &_line {
     position: absolute;
     left: var(--space-xxl);
@@ -72,10 +58,6 @@
   .vertical_bar {
     padding: 0;
 
-    &_scale {
-      display: none;
-    }
-
     &_line {
       left: 0;
       width: 100%;

src/ts/components/BarChart/styles/scale.module.scss

@@ -0,0 +1,69 @@
+@import 'src/styles/variables';
+
+.vertical_bar_scale {
+  --temp-height: 300px;
+  --temp-track: var(--color-11);
+  --temp-thumb: var(--color-grey);
+
+  display: inline-block;
+  width: var(--temp-height);
+
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    height: var(--space-s);
+    border-radius: var(--border-radius-m);
+    background-color: var(--temp-track);
+  }
+
+  &::-webkit-slider-thumb {
+    height: var(--space-l);
+    width: var(--space-l);
+    margin-top: -4px;
+
+    -webkit-appearance: none;
+    appearance: none;
+
+    border-radius: var(--border-radius-m);
+    background-color: var(--color-grey);
+  }
+
+  &::-moz-range-track {
+    height: var(--space-l);
+    width: var(--space-l);
+    margin-top: -4px;
+
+    -webkit-appearance: none;
+    appearance: none;
+
+    border-radius: var(--border-radius-m);
+    background-color: var(--color-grey);
+  }
+
+  &::-moz-range-thumb {
+    height: var(--space-s);
+    border-radius: var(--border-radius-m);
+    background-color: var(--temp-track);
+  }
+
+  &_wrapper {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 1px;
+    height: 1px;
+    transform: rotate(-90deg);
+  }
+}
+
+@media print {
+  .vertical_bar_scale {
+    display: none;
+  }
+}

src/ts/components/DataView/index.tsx

@@ -20,6 +20,7 @@ interface IDataViewProps {
   sort?: ISort[];
   columnCount?: number,
   className?: string,
+  fullScreenMode?: string,
   disabledRow?: (row: any) => boolean;
   converterToCsv?: Function,
   updateSort?: Function,
@@ -33,6 +34,7 @@ function DataView({
   type,
   columnCount,
   className,
+  fullScreenMode = '',
   disabledRow,
   updateSort,
   children,
@@ -60,7 +62,6 @@ function DataView({
         <div className={style.data_view_buttons}>
           {!isMobile && (
             <img
-              title={'Скачать XLSX'}
               src="./assets/icons/Download.svg"
               className={style.data_view_icon}
               onClick={() => {
@@ -76,7 +77,7 @@ function DataView({
                 : './assets/icons/OpenFullscreen.svg'}
               className={style.data_view_icon}
               onClick={() => {
-                fullScreen.toggle();
+                fullScreen.toggle(fullScreenMode);
               }}
             />
           )}

src/ts/pages/Team/components/PR/All.tsx

@@ -43,6 +43,7 @@ function AllPR({
       updateSort={updateSort}
       type={mode === 'print' ? 'cards' : undefined}
       columnCount={mode === 'print' ? 2 : undefined}
+      fullScreenMode="all"
     >
       {mode === 'print' ? (
         <Column

src/ts/pages/Team/components/PR/Authors.tsx

@@ -48,6 +48,7 @@ function Authors({ response, updateSort, rowsForExcel, mode }: IAuthorsProps) {
       updateSort={updateSort}
       type={mode === 'print' ? 'cards' : undefined}
       columnCount={mode === 'print' ? 3 : undefined}
+      fullScreenMode="author"
     >
       <Column
         isSortable

src/ts/pages/Team/components/PR/index.tsx

@@ -12,6 +12,7 @@ import getFakeLoader from 'ts/components/DataLoader/helpers/formatter';
 import NothingFound from 'ts/components/NothingFound';
 import Title from 'ts/components/Title';
 import PageBreak from 'ts/pages/Common/components/PageBreak';
+import fullScreen from 'ts/store/FullScreen';
 
 import Total from './Total';
 import Authors from './Authors';
@@ -29,41 +30,54 @@ const PR = observer(({
 
   return (
     <>
-      <Title title="page.team.pr.oneTaskDays"/>
+      {!fullScreen.isOpen && (
-      <Total/>
+        <>
+          <Title title="page.team.pr.oneTaskDays"/>
+          <Total/>
+        </>
+      )}
 
-      <Title title="page.team.pr.statByAuthors"/>
+      {!fullScreen.isOpen || fullScreen.mode === 'author' ? (
-      <DataLoader
+        <>
-        to="response"
+          <Title title="page.team.pr.statByAuthors"/>
-        loader={(pagination?: IPaginationRequest, sort?: ISort[]) => getFakeLoader({
+          <DataLoader
-          content: authorsStat, pagination, sort, mode,
+            to="response"
-        })}
+            loader={(pagination?: IPaginationRequest, sort?: ISort[]) => getFakeLoader({
-      >
+              content: authorsStat, pagination, sort, mode,
-        <Authors
+            })}
-          mode={mode}
+          >
-          rowsForExcel={authorsStat}
+            <Authors
-        />
+              mode={mode}
-        <Pagination/>
+              rowsForExcel={authorsStat}
-      </DataLoader>
+            />
+            <Pagination/>
+          </DataLoader>
+        </>
+      ) : null}
 
       <PageBreak/>
-      <Title title="page.team.pr.longDelay"/>
+
-      <DataLoader
+      {!fullScreen.isOpen || fullScreen.mode === 'all' ? (
-        to="response"
+        <>
-        loader={(pagination?: IPaginationRequest, sort?: ISort[]) => getFakeLoader({
+          <Title title="page.team.pr.longDelay"/>
-          content: rows,
+          <DataLoader
-          pagination: mode === 'print'
+            to="response"
-            ? { size: 20 }
+            loader={(pagination?: IPaginationRequest, sort?: ISort[]) => getFakeLoader({
-            : pagination,
+              content: rows,
-          sort,
+              pagination: mode === 'print'
-        })}
+                ? { size: 20 }
-      >
+                : pagination,
-        <All
+              sort,
-          mode={mode}
+            })}
-          rowsForExcel={rows}
+          >
-        />
+            <All
-        {mode !== 'print' && <Pagination/>}
+              mode={mode}
-      </DataLoader>
+              rowsForExcel={rows}
+            />
+            {mode !== 'print' && <Pagination/>}
+          </DataLoader>
+        </>
+      ) : null}
     </>
   );
 });