Skip to content

Commit

Permalink
Merge pull request #141 from Saifullah-dev/139-feat-customize-primary…
Browse files Browse the repository at this point in the history 
…-color-and-font-family

feat(Styles): add primaryColor and fontFamily props
  • Loading branch information
@Saifullah-dev
Saifullah-dev authored Jan 18, 2025
2 parents 98a5c2a + 3cfe270 commit 37a33a6
Show file tree
Hide file tree
Showing 14 changed files with 69 additions and 78 deletions.
4 changes: 3 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,10 @@ type File = {
| `acceptedFileTypes` | string | (Optional) A comma-separated list of allowed file extensions for uploading specific file types (e.g., `.txt, .png, .pdf`). If omitted, all file types are accepted. |
| `enableFilePreview` | boolean | A boolean flag indicating whether to use the default file previewer in the file manager `default: true`. |
| `filePreviewPath` | string | The base URL for file previews e.g.`https://example.com`, file path will be appended automatically to it i.e. `https://example.com/yourFilePath`. |
| `filePreviewComponent` | (file: [File](#-file-structure)) => React.ReactNode | (Optional) A callback function that provides a custom file preview. It receives the selected file as its argument and must return a valid React node, JSX element, or HTML. Use this prop to override the default file preview behavior. Example: [Custom Preview Usage](#custom-file-preview). |
| `filePreviewComponent` | (file: [File](#-file-structure)) => React.ReactNode | (Optional) A callback function that provides a custom file preview. It receives the selected file as its argument and must return a valid React node, JSX element, or HTML. Use this prop to override the default file preview behavior. Example: [Custom Preview Usage](#custom-file-preview). |
| `fileUploadConfig` | { url: string; headers?: { [key: string]: string } } | Configuration object for file uploads. It includes the upload URL (`url`) and an optional `headers` object for setting custom HTTP headers in the upload request. The `headers` object can accept any standard or custom headers required by the server. Example: `{ url: "https://example.com/fileupload", headers: { Authorization: "Bearer" + TOKEN, "X-Custom-Header": "value" } }` |
| `files` | Array<[File](#-file-structure)> | An array of file and folder objects representing the current directory structure. Each object includes `name`, `isDirectory`, and `path` properties. |
| `fontFamily` | string | The font family to be used throughout the component. Accepts any valid CSS font family (e.g., `'Arial, sans-serif'`, `'Roboto'`). You can customize the font styling to match your application's theme. `default: 'Nunito Sans, sans-serif'`. |
| `height` | string \| number | The height of the component `default: 600px`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
| `initialPath` | string | The path of the directory to be loaded initially e.g. `/Documents`. This should be the path of a folder which is included in `files` array. Default value is `""` |
| `isLoading` | boolean | A boolean state indicating whether the application is currently performing an operation, such as creating, renaming, or deleting a file/folder. Displays a loading state if set `true`. |
Expand All @@ -122,6 +123,7 @@ type File = {
| `onPaste` | (files: Array<[File](#-file-structure)>, destinationFolder: [File](#-file-structure), operationType: "copy" \| "move") => void | A callback function triggered when when one or more files or folders are pasted into a new location. Depending on `operationType`, use this to either copy or move the `sourceItem` to the `destinationFolder`, updating the files state accordingly. |
| `onRefresh` | () => void | A callback function triggered when the file manager is refreshed. Use this to refresh the `files` state to reflect any changes or updates. |
| `onRename` | (file: [File](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. |
| `primaryColor` | string | The primary color for the component's theme. Accepts any valid CSS color format (e.g., `'blue'`, `'#E97451'`, `'rgb(52, 152, 219)'`). This color will be applied to buttons, highlights, and other key elements. `default: #6155b4`. |
| `width` | string \| number | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |

## ⌨️ Keyboard Shortcuts
Expand Down
4 changes: 3 additions & 1 deletion frontend/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,10 @@ type File = {
| `acceptedFileTypes` | string | (Optional) A comma-separated list of allowed file extensions for uploading specific file types (e.g., `.txt, .png, .pdf`). If omitted, all file types are accepted. |
| `enableFilePreview` | boolean | A boolean flag indicating whether to use the default file previewer in the file manager `default: true`. |
| `filePreviewPath` | string | The base URL for file previews e.g.`https://example.com`, file path will be appended automatically to it i.e. `https://example.com/yourFilePath`. |
| `filePreviewComponent` | (file: [File](#-file-structure)) => React.ReactNode | (Optional) A callback function that provides a custom file preview. It receives the selected file as its argument and must return a valid React node, JSX element, or HTML. Use this prop to override the default file preview behavior. Example: [Custom Preview Usage](#-custom-file-preview). |
| `filePreviewComponent` | (file: [File](#-file-structure)) => React.ReactNode | (Optional) A callback function that provides a custom file preview. It receives the selected file as its argument and must return a valid React node, JSX element, or HTML. Use this prop to override the default file preview behavior. Example: [Custom Preview Usage](#custom-file-preview). |
| `fileUploadConfig` | { url: string; headers?: { [key: string]: string } } | Configuration object for file uploads. It includes the upload URL (`url`) and an optional `headers` object for setting custom HTTP headers in the upload request. The `headers` object can accept any standard or custom headers required by the server. Example: `{ url: "https://example.com/fileupload", headers: { Authorization: "Bearer" + TOKEN, "X-Custom-Header": "value" } }` |
| `files` | Array<[File](#-file-structure)> | An array of file and folder objects representing the current directory structure. Each object includes `name`, `isDirectory`, and `path` properties. |
| `fontFamily` | string | The font family to be used throughout the component. Accepts any valid CSS font family (e.g., `'Arial, sans-serif'`, `'Roboto'`). You can customize the font styling to match your application's theme. `default: 'Nunito Sans, sans-serif'`. |
| `height` | string \| number | The height of the component `default: 600px`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |
| `initialPath` | string | The path of the directory to be loaded initially e.g. `/Documents`. This should be the path of a folder which is included in `files` array. Default value is `""` |
| `isLoading` | boolean | A boolean state indicating whether the application is currently performing an operation, such as creating, renaming, or deleting a file/folder. Displays a loading state if set `true`. |
Expand All @@ -122,6 +123,7 @@ type File = {
| `onPaste` | (files: Array<[File](#-file-structure)>, destinationFolder: [File](#-file-structure), operationType: "copy" \| "move") => void | A callback function triggered when when one or more files or folders are pasted into a new location. Depending on `operationType`, use this to either copy or move the `sourceItem` to the `destinationFolder`, updating the files state accordingly. |
| `onRefresh` | () => void | A callback function triggered when the file manager is refreshed. Use this to refresh the `files` state to reflect any changes or updates. |
| `onRename` | (file: [File](#-file-structure), newName: string) => void | A callback function triggered when a file or folder is renamed. |
| `primaryColor` | string | The primary color for the component's theme. Accepts any valid CSS color format (e.g., `'blue'`, `'#E97451'`, `'rgb(52, 152, 219)'`). This color will be applied to buttons, highlights, and other key elements. `default: #6155b4`. |
| `width` | string \| number | The width of the component `default: 100%`. Can be a string (e.g., `'100%'`, `'10rem'`) or a number (in pixels). |

## ⌨️ Keyboard Shortcuts
Expand Down
10 changes: 7 additions & 3 deletions frontend/src/FileManager/Actions/UploadFile/UploadFile.action.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@
}

&:hover {
border-color: $primary-color;
border-color: var(--file-manager-primary-color);
}
}

.draggable-file-input.dragging {
border-color: $primary-color;
border-color: var(--file-manager-primary-color);
}

.btn-choose-file {
Expand Down Expand Up @@ -120,7 +120,7 @@
&:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.07);
color: $primary-color;
color: var(--file-manager-primary-color);
}
}

Expand All @@ -130,6 +130,10 @@
color: red;
}
}

.upload-success {
color: var(--file-manager-primary-color);
}
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/FileManager/Actions/UploadFile/UploadItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ const UploadItem = ({
<span className="file-size">{getDataSize(fileData.file?.size)}</span>
</div>
{isUploaded ? (
<FaRegCheckCircle color="#5c5bb1" title="Uploaded" />
<FaRegCheckCircle title="Uploaded" className="upload-success" />
) : isCanceled || uploadFailed ? (
<IoMdRefresh className="retry-upload" title="Retry" onClick={handleRetry} />
) : (
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/FileManager/BreadCrumb/BreadCrumb.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
}

&::-webkit-scrollbar-thumb {
background: $primary-color !important;
background: var(--file-manager-primary-color) !important;
}

.folder-name {
Expand All @@ -30,7 +30,7 @@

&:hover {
cursor: pointer;
color: $secondary-color;
color: var(--file-manager-primary-color);
}
}

Expand All @@ -46,7 +46,7 @@
&:hover,
&:focus {
cursor: pointer;
color: $primary-color;
color: var(--file-manager-primary-color);
background-color: #dddcdc;
border-radius: 5px;
}
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/FileManager/FileList/FileList.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
padding: 1px 5px 2px 24px;
border-radius: 3px;
font-weight: bold;
color: $primary-color-dark;
color: var(--file-manager-primary-color);
z-index: 2;

.drop-zone-file-name {
Expand All @@ -41,7 +41,7 @@
border-radius: 4px;
position: relative;
color: white;
background-color: $primary-color;
background-color: var(--file-manager-primary-color);
padding: 3px 8px;
}
}
Expand Down Expand Up @@ -116,11 +116,11 @@
}

.file-selected {
background-color: $primary-color;
background-color: var(--file-manager-primary-color);
color: white;

&:hover {
background-color: $primary-color;
background-color: var(--file-manager-primary-color);
}
}

Expand Down Expand Up @@ -182,7 +182,7 @@

.file-item-container.file-selected {
&:hover {
background-color: $primary-color !important;
background-color: var(--file-manager-primary-color) !important;
}
}

Expand Down
Loading

0 comments on commit 37a33a6

Please sign in to comment.