Feat: FileManager (#98) (#703)

* feat: add file manager module - Complete file manager implementation with UI/UX - Add drive management functionality - Add file upload/download with progress tracking - Add stamp integration and handling - Add bulk operations and context menus Co-authored-by: Roland Seres <roland.seres90@gmail.com> Co-authored-by: nidishk <nidishkrishnan45@gmail.com>
2025-11-12 11:26:00 +01:00
parent 1249c0df71
commit 5bfe2a0331
107 changed files with 21529 additions and 5578 deletions
@@ -0,0 +1,29 @@
+.fm-slider {
+  display: flex;
+  justify-content: center;
+
+  & .MuiSlider-markLabel {
+    margin-top: 14px;
+  }
+
+  & .MuiSlider-mark {
+    background-color: rgb(237, 129, 49);
+    height: 4px;
+  }
+
+  & .MuiSlider-markLabel {
+    top: 14px;
+    font-size: 12px;
+    margin-left: 3px;
+  }
+
+  & .MuiSlider-markLabel[data-index='4'] {
+    left: 98% !important;
+  }
+
+  & .MuiSlider-thumb:focus,
+  & .MuiSlider-thumb.Mui-focusVisible {
+    box-shadow: none !important;
+    outline: none !important;
+  }
+}
@@ -0,0 +1,95 @@
+import { ReactElement, useState } from 'react'
+import './Slider.scss'
+import Slider from '@material-ui/core/Slider'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles({
+  root: {
+    width: '98%',
+    marginLeft: '-3px',
+  },
+  rail: {
+    color: 'rgb(229, 231, 235)',
+    opacity: 1,
+    height: 4,
+  },
+  track: {
+    color: 'rgb(229, 231, 235)',
+    height: 4,
+  },
+  thumb: {
+    color: 'white',
+    height: 18,
+    width: 18,
+    border: '3px solid rgb(237, 129, 49)',
+    position: 'relative',
+    top: -1,
+    marginRight: '-10px',
+  },
+})
+
+interface FMSliderProps {
+  id?: string
+  label?: string
+  marks?: { value: number; label: string }[]
+  defaultValue?: number
+  onChange: (value: number) => void
+  minValue?: number
+  maxValue?: number
+  step?: number
+}
+
+export function FMSlider({
+  id,
+  label,
+  marks,
+  defaultValue,
+  onChange,
+  minValue,
+  maxValue,
+  step,
+}: FMSliderProps): ReactElement {
+  const [value, setValue] = useState(defaultValue || 0)
+  const classes = useStyles()
+
+  return (
+    <>
+      <style>
+        {`
+            .fm-slider .MuiSlider-markLabel[data-index="${value}"].MuiSlider-markLabelActive {
+              color: rgb(237, 129, 49);
+              font-weight: bold;
+              }
+              `}
+      </style>
+      <div className="fm-input-label">
+        {label && (
+          <label htmlFor={id} className="fm-dropdown-label">
+            {label}
+          </label>
+        )}
+      </div>
+      <div className="fm-slider">
+        <Slider
+          classes={{
+            root: classes.root,
+            rail: classes.rail,
+            track: classes.track,
+            thumb: classes.thumb,
+          }}
+          value={value || 0}
+          onChange={(_, val) => {
+            setValue(Number(val))
+            onChange(Number(val))
+          }}
+          defaultValue={defaultValue || 0}
+          min={minValue || 0}
+          max={maxValue || 100}
+          step={step || 1}
+          marks={marks}
+          valueLabelDisplay="off"
+        />
+      </div>
+    </>
+  )
+}